@orchestrator-ui/orchestrator-ui-components 6.1.1 → 6.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "6.1.1",
+    "version": "6.2.1",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -34,13 +34,14 @@
         "dev": "npm run build -- --watch"
     },
     "dependencies": {
-        "@ag-ui/client": "^0.0.39",
+        "@ag-ui/client": "0.0.39",
         "@copilotkit/react-core": "^1.3.18",
         "@copilotkit/react-ui": "^1.3.18",
         "@copilotkit/runtime": "^1.3.18",
         "@elastic/eui": "101.3.0",
         "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.11.4",
+        "@monaco-editor/react": "^4.7.0",
         "@rtk-query/graphql-request-base-query": "^2.3.1",
         "graphql-request": "^6.1.0",
         "invariant": "^2.2.4",
@@ -91,5 +92,8 @@
     "type": "module",
     "main": "./dist/index.js",
     "browser": "./dist/index.js",
-    "types": "./dist/index.d.ts"
+    "types": "./dist/index.d.ts",
+    "overrides": {
+        "@monaco-editor/loader": "1.5.0"
+    }
 }

package/src/components/WfoMonacoCodeBlock/WfoMonacoCodeBlock.tsx

@@ -0,0 +1,92 @@
+import React, { FC, useCallback, useEffect, useState } from 'react';
+
+import { editor } from 'monaco-editor';
+
+import { EuiFlexItem } from '@elastic/eui';
+import Editor from '@monaco-editor/react';
+import type { Monaco } from '@monaco-editor/react';
+
+import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
+
+import { getStyles } from './styles';
+
+export type WfoMonacoCodeBlockProps = {
+    data: object;
+};
+
+const MONACO_THEME: { light: editor.BuiltinTheme; dark: editor.BuiltinTheme } =
+    {
+        light: 'vs',
+        dark: 'hc-black',
+    };
+
+/**
+ * WfoMonacoCodeBlock is used to render objects in JSON format using the Monaco Editor
+ * @param data
+ * @constructor
+ */
+export const WfoMonacoCodeBlock: FC<WfoMonacoCodeBlockProps> = ({ data }) => {
+    const { theme, isDarkThemeActive } = useOrchestratorTheme();
+    const { monacoEditorStyle } = useWithOrchestratorTheme(getStyles);
+    const [monacoInstance, setMonacoInstance] = useState<Monaco | undefined>(
+        undefined,
+    );
+    const json = JSON.stringify(data, null, 4);
+
+    const [editorHeight, setEditorHeight] = useState(0);
+
+    const addThemeToEditor = useCallback(
+        (monaco: Monaco) => {
+            monaco.editor.defineTheme('wfoTheme', {
+                base: isDarkThemeActive
+                    ? MONACO_THEME.dark
+                    : MONACO_THEME.light,
+                inherit: true,
+                rules: [],
+                colors: {
+                    'editor.background': theme.colors.body,
+                },
+            });
+            monaco.editor.setTheme('wfoTheme');
+        },
+        [theme, isDarkThemeActive],
+    );
+
+    useEffect(() => {
+        if (monacoInstance) {
+            addThemeToEditor(monacoInstance);
+        }
+    }, [addThemeToEditor, isDarkThemeActive, monacoInstance]);
+
+    function editorDidMount(
+        editor: editor.IStandaloneCodeEditor,
+        monaco: Monaco,
+    ) {
+        const scrollHeight = editor.getScrollHeight();
+        setEditorHeight(Math.min(scrollHeight, 500));
+        setMonacoInstance(monaco);
+    }
+
+    return (
+        <EuiFlexItem css={monacoEditorStyle}>
+            <Editor
+                height={editorHeight}
+                options={{
+                    readOnly: true,
+                    lineNumbers: 'on',
+                    scrollBeyondLastLine: false,
+                    contextmenu: false,
+                    minimap: { enabled: false },
+                    mouseWheelZoom: true,
+                    renderLineHighlight: 'none',
+                    fontFamily: theme.font.family,
+                    tabSize: 8,
+                }}
+                beforeMount={addThemeToEditor}
+                onMount={editorDidMount}
+                language="json"
+                value={json}
+            />
+        </EuiFlexItem>
+    );
+};

package/src/components/WfoMonacoCodeBlock/index.ts

@@ -0,0 +1 @@
+export * from './WfoMonacoCodeBlock';

package/src/components/WfoMonacoCodeBlock/styles.ts

@@ -0,0 +1,16 @@
+import { css } from '@emotion/react';
+
+import { WfoTheme } from '@/hooks';
+
+export const getStyles = ({ theme }: WfoTheme) => {
+    const monacoEditorStyle = css({
+        marginTop: 10,
+        padding: 10,
+        backgroundColor: theme.colors.body,
+        borderRadius: theme.border.radius.medium,
+    });
+
+    return {
+        monacoEditorStyle,
+    };
+};

package/src/components/WfoSubscription/WfoInSyncField/WfoInSyncErrorToastMessage.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+
+import Link from 'next/link';
+
+import { PATH_WORKFLOWS, parseErrorDetail } from '@/components';
+
+export const WfoInSyncErrorToastMessage: FC<{ errorDetail: string }> = ({
+    errorDetail,
+}) => {
+    const { failedIds, filteredInput } = parseErrorDetail(errorDetail);
+
+    return (
+        <div css={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>
+            <div>{filteredInput}</div>
+            {failedIds.map((processId) => {
+                const processUrl = `${PATH_WORKFLOWS}/${processId}`;
+                return (
+                    <div key={processId}>
+                        <Link href={processUrl}>{processId}</Link>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};

package/src/components/WfoSubscription/{WfoInSyncField.tsx → WfoInSyncField/WfoInSyncField.tsx}

@@ -8,6 +8,7 @@ import { EuiButton } from '@elastic/eui';
 import { WfoIsAllowedToRender } from '@/components';
 import { WfoInsyncIcon } from '@/components';
 import { PATH_TASKS, PATH_WORKFLOWS } from '@/components';
+import { WfoInSyncErrorToastMessage } from '@/components/WfoSubscription/WfoInSyncField/WfoInSyncErrorToastMessage';
 import { PolicyResource } from '@/configuration/policy-resources';
 import { ConfirmationDialogContext } from '@/contexts';
 import { useOrchestratorTheme, useShowToastMessage } from '@/hooks';
@@ -15,7 +16,7 @@ import { useSetSubscriptionInSyncMutation } from '@/rtk/endpoints';
 import { SubscriptionDetail, ToastTypes } from '@/types';
 import { formatDate } from '@/utils';
 
-import { getLastUncompletedProcess, getLatestTaskDate } from './utils';
+import { getLastUncompletedProcess, getLatestTaskDate } from '../utils';
 
 interface WfoInSyncFieldProps {
     subscriptionDetail: SubscriptionDetail;
@@ -31,6 +32,7 @@ export const WfoInSyncField = ({ subscriptionDetail }: WfoInSyncFieldProps) => {
     const lastUncompletedProcess = getLastUncompletedProcess(
         subscriptionDetail?.processes?.page,
     );
+
     const [setSubscriptionInSync, { isLoading }] =
         useSetSubscriptionInSyncMutation();
     const { showToastMessage } = useShowToastMessage();
@@ -52,11 +54,17 @@ export const WfoInSyncField = ({ subscriptionDetail }: WfoInSyncFieldProps) => {
                 );
             })
             .catch((error) => {
+                const errorToastMessage = error?.data?.detail ? (
+                    <WfoInSyncErrorToastMessage
+                        errorDetail={error.data?.detail}
+                    />
+                ) : (
+                    t('setInSyncFailed.text').toString()
+                );
+
                 showToastMessage(
                     ToastTypes.ERROR,
-                    error?.data?.detail
-                        ? error.data.detail
-                        : t('setInSyncFailed.text').toString,
+                    errorToastMessage,
                     t('setInSyncFailed.title'),
                 );
                 console.error('Failed to set subscription in sync.', error);

package/src/components/WfoSubscription/index.ts

@@ -5,7 +5,7 @@ export * from './overrides';
 export * from './WfoSubscriptionGeneralSections';
 
 export * from './SubscriptionKeyValueBlock';
-export * from './WfoInSyncField';
+export * from './WfoInSyncField/WfoInSyncField';
 export * from './WfoProcessesTimeline';
 export * from './WfoRelatedSubscriptions';
 export * from './WfoSubscription';

package/src/components/WfoSubscription/utils/utils.spec.ts

@@ -17,6 +17,7 @@ import {
     getWorkflowTargetColor,
     getWorkflowTargetIconContent,
     mapProductBlockInstancesToEuiSelectableOptions,
+    parseErrorDetail,
 } from './utils';
 
 describe('getFieldFromProductBlockInstanceValues()', () => {
@@ -468,3 +469,52 @@ describe('mapProductBlockInstancesToEuiSelectableOptions', () => {
         ]);
     });
 });
+
+describe('parseErrorDetail', () => {
+    it('parses a single UUID inside brackets', () => {
+        const input =
+            "Subscription 123 has still failed processes with id's: ['11111111-1111-1111-1111-111111111111']";
+
+        const { failedIds, filteredInput } = parseErrorDetail(input);
+
+        expect(failedIds).toEqual(['11111111-1111-1111-1111-111111111111']);
+        expect(filteredInput).toBe(
+            "Subscription 123 has still failed processes with id's:",
+        );
+    });
+
+    it('parses multiple UUIDs inside brackets', () => {
+        const input =
+            "Failed processes: ['11111111-1111-1111-1111-111111111111', '22222222-2222-2222-2222-222222222222']";
+
+        const { failedIds, filteredInput } = parseErrorDetail(input);
+
+        expect(failedIds).toEqual([
+            '11111111-1111-1111-1111-111111111111',
+            '22222222-2222-2222-2222-222222222222',
+        ]);
+        expect(filteredInput).toBe('Failed processes:');
+    });
+
+    it('returns empty array when no brackets present', () => {
+        const input = 'No failed processes.';
+
+        const { failedIds, filteredInput } = parseErrorDetail(input);
+
+        expect(failedIds).toEqual([]);
+        expect(filteredInput).toBe('No failed processes.');
+    });
+
+    it('ignores extra spaces or commas inside brackets', () => {
+        const input =
+            "Errors: [ '11111111-1111-1111-1111-111111111111' , '22222222-2222-2222-2222-222222222222' ]";
+
+        const { failedIds, filteredInput } = parseErrorDetail(input);
+
+        expect(failedIds).toEqual([
+            '11111111-1111-1111-1111-111111111111',
+            '22222222-2222-2222-2222-222222222222',
+        ]);
+        expect(filteredInput).toBe('Errors:');
+    });
+});

package/src/components/WfoSubscription/utils/utils.ts

@@ -122,6 +122,28 @@ export const getLastUncompletedProcess = (
         : undefined;
 };
 
+const uuidRegex =
+    /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+const extractUUIDsFromBrackets = (input: string) => {
+    const start = input.indexOf('[');
+    const end = input.indexOf(']', start);
+    if (start === -1 || end === -1) return [];
+    const content = input.slice(start + 1, end).trim();
+    if (!content) return [];
+
+    return content
+        .split(',')
+        .map((s) => s.trim().replace(/^['"]|['"]$/g, '')) // remove surrounding ' or "
+        .filter((s) => uuidRegex.test(s));
+};
+
+export function parseErrorDetail(errorDetail: string) {
+    const failedIds = extractUUIDsFromBrackets(errorDetail);
+    const filteredInput = errorDetail.split('[')[0].trim();
+    return { failedIds, filteredInput };
+}
+
 export const getLatestTaskDate = (processes?: SubscriptionDetailProcess[]) => {
     if (!processes || processes.length === 0) {
         return '';

package/src/components/WfoWorkflowSteps/WfoStep/WfoCodeViewSelector.tsx

@@ -0,0 +1,116 @@
+import React, { useCallback } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiButtonGroup } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '@/hooks';
+import { WfoBracketSquare, WfoCommandLine, WfoTableCells } from '@/icons';
+
+export enum CodeView {
+    JSON = 'json',
+    TABLE = 'table',
+    RAW = 'raw',
+}
+
+interface WfoCodeViewSelectorProps {
+    codeView: CodeView;
+    handleCodeViewChange: (codeView: CodeView) => void;
+}
+
+export const WfoCodeViewSelector = ({
+    codeView,
+    handleCodeViewChange,
+}: WfoCodeViewSelectorProps) => {
+    const t = useTranslations('processes.steps');
+    const { theme, toSecondaryColor } = useOrchestratorTheme();
+
+    const isSelected = (buttonView: CodeView): boolean =>
+        buttonView === codeView;
+
+    const codeViewOptions = [
+        {
+            id: CodeView.JSON,
+            label: t('codeView.json'),
+            iconType: () => (
+                <WfoBracketSquare
+                    color={
+                        isSelected(CodeView.JSON)
+                            ? theme.colors.ghost
+                            : theme.colors.textPrimary
+                    }
+                />
+            ),
+            'data-test-id': 'jsonCodeViewButton',
+            toolTipContent: t('codeView.json'),
+            style: {
+                backgroundColor: isSelected(CodeView.JSON)
+                    ? theme.colors.textPrimary
+                    : toSecondaryColor(theme.colors.primary),
+            },
+        },
+        {
+            id: CodeView.TABLE,
+            label: t('codeView.table'),
+            iconType: () => (
+                <WfoTableCells
+                    color={
+                        isSelected(CodeView.TABLE)
+                            ? theme.colors.ghost
+                            : theme.colors.textPrimary
+                    }
+                />
+            ),
+            'data-test-id': 'tableCodeViewButton',
+            toolTipContent: t('codeView.table'),
+            style: {
+                backgroundColor: isSelected(CodeView.TABLE)
+                    ? theme.colors.textPrimary
+                    : toSecondaryColor(theme.colors.primary),
+            },
+        },
+        {
+            id: CodeView.RAW,
+            label: t('codeView.raw'),
+            iconType: () => (
+                <WfoCommandLine
+                    color={
+                        isSelected(CodeView.RAW)
+                            ? theme.colors.ghost
+                            : theme.colors.textPrimary
+                    }
+                />
+            ),
+            'data-test-id': 'rawCodeViewButton',
+            toolTipContent: t('codeView.raw'),
+            style: {
+                backgroundColor: isSelected(CodeView.RAW)
+                    ? theme.colors.textPrimary
+                    : toSecondaryColor(theme.colors.primary),
+            },
+        },
+    ];
+
+    const handle = useCallback(
+        (id: string) => handleCodeViewChange(id as CodeView),
+        [handleCodeViewChange],
+    );
+
+    return (
+        <EuiButtonGroup
+            style={{
+                gap: 0,
+                borderRadius: theme.border.radius.medium,
+            }}
+            legend=""
+            options={codeViewOptions}
+            idSelected={codeView}
+            isIconOnly={true}
+            onChange={handle}
+            onClick={(e) => {
+                e.stopPropagation();
+            }}
+            type="single"
+        />
+    );
+};

package/src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx

@@ -1,16 +1,14 @@
-import React, { LegacyRef, useState } from 'react';
+import React, { LegacyRef, useCallback, useState } from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import {
-    EuiButton,
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiPanel,
-    EuiText,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
 
-import { WfoJsonCodeBlock, WfoTableCodeBlock } from '@/components';
+import {
+    WfoJsonCodeBlock,
+    WfoMonacoCodeBlock,
+    WfoTableCodeBlock,
+} from '@/components';
 import { WfoStepFormOld } from '@/components/WfoWorkflowSteps/WfoStep/WfoStepFormOld';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { WfoChevronDown, WfoChevronUp } from '@/icons';
@@ -23,6 +21,7 @@ import { WfoStepStatusIcon } from '../WfoStepStatusIcon';
 import type { StepListItem } from '../WfoWorkflowStepList';
 import { getStepContent } from '../stepListUtils';
 import { getWorkflowStepsStyles } from '../styles';
+import { CodeView, WfoCodeViewSelector } from './WfoCodeViewSelector';
 import { WfoStepForm } from './WfoStepForm';
 
 export interface WfoStepProps {
@@ -53,7 +52,7 @@ export const WfoStep = React.forwardRef(
         ref: LegacyRef<HTMLDivElement>,
     ) => {
         const { isExpanded, step, userInputForm } = stepListItem;
-        const [tableView, setTableView] = useState<boolean>(false);
+        const [codeView, setCodeView] = useState<CodeView>(CodeView.JSON);
 
         const { theme } = useOrchestratorTheme();
         const {
@@ -123,6 +122,13 @@ export const WfoStep = React.forwardRef(
             Object.keys(userInputForm?.properties ?? {})[0],
         );
 
+        const handle = useCallback(
+            (newCodeView: string) => {
+                setCodeView(newCodeView as CodeView);
+            },
+            [setCodeView],
+        );
+
         return (
             <div ref={ref}>
                 <EuiPanel>
@@ -150,21 +156,10 @@ export const WfoStep = React.forwardRef(
                             {step.completed && (
                                 <>
                                     {isExpanded && (
-                                        <EuiButton
-                                            onClick={(
-                                                event: React.MouseEvent<HTMLButtonElement>,
-                                            ) => {
-                                                setTableView(!tableView);
-                                                event.stopPropagation();
-                                            }}
-                                            size="s"
-                                        >
-                                            {t(
-                                                tableView
-                                                    ? 'jsonView'
-                                                    : 'tableView',
-                                            )}
-                                        </EuiButton>
+                                        <WfoCodeViewSelector
+                                            codeView={codeView}
+                                            handleCodeViewChange={handle}
+                                        />
                                     )}
                                     <EuiFlexItem
                                         grow={0}
@@ -203,10 +198,12 @@ export const WfoStep = React.forwardRef(
                     {hasStepContent &&
                         !hasHtmlMail &&
                         isExpanded &&
-                        (tableView ? (
+                        (codeView === CodeView.TABLE ? (
                             <WfoTableCodeBlock stepState={stepContent} />
-                        ) : (
+                        ) : codeView === CodeView.RAW ? (
                             <WfoJsonCodeBlock data={stepContent} />
+                        ) : (
+                            <WfoMonacoCodeBlock data={stepContent} />
                         ))}
                     {isExpanded && hasHtmlMail && (
                         <div css={stepEmailContainerStyle}>

package/src/components/index.ts

@@ -38,3 +38,4 @@ export * from './WfoInlineEdit';
 export * from './WfoPydanticForm';
 export * from './WfoSearchPage';
 export * from './WfoAgent';
+export * from './WfoMonacoCodeBlock';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '6.1.1';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '6.2.1';

package/src/hooks/useShowToastMessage.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 import { useAppDispatch } from '@/rtk/hooks';
 import { addToastMessage } from '@/rtk/slices/toastMessages';
 import { ToastTypes } from '@/types';
@@ -8,7 +10,7 @@ export const useShowToastMessage = () => {
 
     const showToastMessage = (
         type: ToastTypes,
-        text: string, // We use string here instead of Toast['text'] because we want to prevent passing in react component because they trigger an "unsynchronizable values in payload detected" error',
+        text: ReactNode,
         title: string, // same as above for string instead of Toast['title'],
     ) => {
         const toastMessage = getToastMessage(type, text, title);

package/src/icons/heroicons/WfoBracketSquare.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons/WfoIconProps';
+
+import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
+
+export const WfoBracketSquareSvg: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = 'currentColor',
+}) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        width={width}
+        height={height}
+        strokeWidth={1.5}
+        stroke={color}
+    >
+        <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z"
+        />
+    </svg>
+);
+
+export const WfoBracketSquare = withWfoHeroIconsWrapper(WfoBracketSquareSvg);

package/src/icons/heroicons/WfoCommandLine.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons/WfoIconProps';
+
+import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
+
+export const WfoCommandLineSvg: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = 'currentColor',
+}) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        width={width}
+        height={height}
+        stroke={color}
+    >
+        <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"
+        />
+    </svg>
+);
+
+export const WfoCommandLine = withWfoHeroIconsWrapper(WfoCommandLineSvg);

package/src/icons/heroicons/WfoTableCells.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons/WfoIconProps';
+
+import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
+
+export const WfoTableCellsSvg: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = 'currentColor',
+}) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke={color}
+        width={width}
+        height={height}
+    >
+        <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5"
+        />
+    </svg>
+);
+
+export const WfoTableCells = withWfoHeroIconsWrapper(WfoTableCellsSvg);

package/src/icons/heroicons/index.ts

@@ -5,3 +5,6 @@ export * from './WfoArrowsUpDown';
 export * from './WfoArrowUp';
 export * from './WfoWrench';
 export * from './WfoSquareStack3dStack';
+export * from './WfoBracketSquare';
+export * from './WfoCommandLine';
+export * from './WfoTableCells';

package/src/messages/en-GB.json

@@ -252,8 +252,11 @@
             "submitTaskFormLabel": "Please submit the form to start this task",
             "submitWorkflowFormLabel": "Please submit the form to start this workflow",
             "traceback": "Traceback",
-            "tableView": "Table view",
-            "jsonView": "JSON view"
+            "codeView": {
+                "json": "JSON",
+                "table": "Tab",
+                "raw": "Raw"
+            }
         },
         "delta": {
             "title": "Subscription delta",