@orchestrator-ui/orchestrator-ui-components 8.3.0 → 8.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "8.3.0",
+  "version": "8.4.0",
   "license": "Apache-2.0",
   "description": "Library of UI Components used to display the workflow orchestrator frontend",
   "author": {
@@ -34,16 +34,11 @@
     "dev": "tsup --watch"
   },
   "dependencies": {
-    "@ag-ui/client": "^0.0.53",
-    "@copilotkit/react-core": "^1.57.0",
-    "@copilotkit/react-ui": "^1.57.0",
-    "@copilotkit/runtime": "^1.57.0",
-    "@elastic/charts": "^64.1.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",
-    "@tanstack/react-virtual": "^3.13.13",
+    "@tanstack/react-virtual": "^3.13.24",
     "graphql-request": "^6.1.0",
     "invariant": "^2.2.4",
     "lodash": "^4.17.21",
@@ -57,17 +52,17 @@
     "pydantic-forms": "^2.0.0",
     "react-diff-view": "^3.2.0",
     "react-draggable": "^4.4.6",
-    "react-redux": "^9.1.2",
+    "react-redux": "^9.3.0",
     "react-select": "^5.8.0",
     "scroll-into-view": "^1.16.2",
     "unidiff": "^1.0.4",
     "use-query-params": "^2.2.2"
   },
   "devDependencies": {
-    "@elastic/eui": "^113.3.0",
+    "@elastic/eui": "^114.3.0",
     "@orchestrator-ui/eslint-config-custom": "*",
     "@orchestrator-ui/jest-config": "*",
-    "@reduxjs/toolkit": "^2.0.1",
+    "@reduxjs/toolkit": "^2.12.0",
     "@testing-library/jest-dom": "^6.9.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -75,16 +70,17 @@
     "@types/jest": "^30.0.0",
     "@types/object-hash": "^3.0.6",
     "@types/scroll-into-view": "^1.16.3",
-    "babel-jest": "^30.2.0",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
+    "babel-jest": "^30.4.1",
+    "jest": "^30.4.2",
+    "jest-environment-jsdom": "^30.4.1",
     "jest-watch-typeahead": "^3.0.1",
     "tsup": "^8.5.0",
     "typescript": "^5.5.2"
   },
   "peerDependencies": {
     "@elastic/eui": "^113.1.0",
-    "next": "^15.5.9",
+    "next": "^15.5.18",
+    "next-intl": "^4.9.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

package/src/components/WfoAvailabilityCheck/WfoAvailabilityCheck.tsx

@@ -4,7 +4,7 @@ import { WfoBackendUnavailable } from '@/components/WfoBackendUnavailable';
 import { BackendFeatureStatus } from '@/hooks';
 
 interface WfoAvailabilityCheckProps {
-  featureType: 'search' | 'agent';
+  featureType: 'search';
   availability: BackendFeatureStatus;
   children: ReactNode;
 }

package/src/components/WfoBackendUnavailable/WfoBackendUnavailable.tsx

@@ -5,27 +5,14 @@ import { useTranslations } from 'next-intl';
 import { EuiButton, EuiCallOut, EuiCode, EuiSpacer, EuiText } from '@elastic/eui';
 
 interface WfoBackendUnavailableProps {
-  featureType: 'search' | 'agent';
+  featureType: 'search';
   onRetry?: () => void;
 }
 
 export const WfoBackendUnavailable: FC<WfoBackendUnavailableProps> = ({ featureType, onRetry }) => {
   const t = useTranslations(`${featureType}.availability.unavailable`);
 
-  const getInstructionSteps = () => {
-    if (featureType === 'search') {
-      return ['setEnvironmentVariable', 'checkVersion', 'restartService', 'checkDockerConfig'];
-    } else {
-      return [
-        'setAgentEnvironment',
-        'setSearchEnvironment',
-        'checkVersion',
-        'configureOpenAI',
-        'restartService',
-        'checkDockerConfig',
-      ];
-    }
-  };
+  const getInstructionSteps = () => ['setEnvironmentVariable', 'checkVersion', 'restartService', 'checkDockerConfig'];
 
   const renderInstruction = (step: string) => {
     if (step === 'setEnvironmentVariable') {
@@ -36,22 +23,6 @@ export const WfoBackendUnavailable: FC<WfoBackendUnavailableProps> = ({ featureT
           {t('instructions.setEnvironmentVariable.after')}
         </>
       );
-    } else if (step === 'setAgentEnvironment') {
-      return (
-        <>
-          {t('instructions.setAgentEnvironment.before')}
-          <EuiCode>AGENT_ENABLED=True</EuiCode>
-          {t('instructions.setAgentEnvironment.after')}
-        </>
-      );
-    } else if (step === 'setSearchEnvironment') {
-      return (
-        <>
-          {t('instructions.setSearchEnvironment.before')}
-          <EuiCode>SEARCH_ENABLED=True</EuiCode>
-          {t('instructions.setSearchEnvironment.after')}
-        </>
-      );
     } else {
       return t(`instructions.${step}`);
     }

package/src/components/WfoMetadata/WfoMetadataStatusField.tsx

@@ -21,6 +21,23 @@ export const WfoMetadataStatusField: FC<WfoMetadataStatusFieldProps> = ({ onSave
     </EuiButtonEmpty>
   );
 
+  const wrappedButton = (
+    <div
+      css={{
+        ':hover': {
+          '.euiIcon': {
+            visibility: 'visible',
+          },
+        },
+        '.euiIcon': {
+          visibility: isPopoverOpen ? 'visible' : 'hidden',
+        },
+      }}
+    >
+      {button}
+    </div>
+  );
+
   const handleOnSelectOption = (updatedStatus: ProductLifecycleStatus) => {
     setPopover(false);
     onSave(updatedStatus);
@@ -37,7 +54,7 @@ export const WfoMetadataStatusField: FC<WfoMetadataStatusFieldProps> = ({ onSave
     <WfoPopover
       id={'productStatusPopover'}
       isLoading={false}
-      button={button}
+      button={wrappedButton}
       isPopoverOpen={isPopoverOpen}
       closePopover={() => setPopover(false)}
       PopoverContent={setNewStatusBadges}

package/src/components/WfoProcessList/WfoProcessListDeltaPopover.tsx

@@ -36,7 +36,7 @@ export const WfoProcessListDeltaPopover: FC<WfoProcessListDeltaPopoverProps> = (
 
   const iconButton = (
     <EuiButtonIcon
-      iconType={() => <WfoCode color={theme.colors.primary} />}
+      iconType={() => <WfoCode color={theme.colors.textDisabled} />}
       onClick={() => setPopoverOpen(!isPopoverOpen)}
       aria-label={t('showDelta')}
       isLoading={isFetching}

package/src/components/WfoTable/WfoAdvancedTable/WfoAdvancedTable.tsx

@@ -16,6 +16,7 @@ import {
   WfoKeyValueTable,
   WfoKeyValueTableDataType,
   WfoSearchField,
+  WfoToolTip,
   clearTableConfigFromLocalStorage,
   setTableConfigToLocalStorage,
 } from '@/components';
@@ -60,7 +61,6 @@ export const WfoAdvancedTable = <T extends object>({
   ...tableProps
 }: WfoAdvancedTableProps<T>) => {
   const { theme } = useOrchestratorTheme();
-
   const [hiddenColumns, setHiddenColumns] = useState<TableColumnKeys<T>>(defaultHiddenColumns);
   const [showSettingsModal, setShowSettingsModal] = useState(false);
   const [selectedDataForDetailModal, setSelectedDataForDetailModal] = useState<T | undefined>(undefined);
@@ -80,9 +80,13 @@ export const WfoAdvancedTable = <T extends object>({
       columnType: ColumnType.CONTROL,
       width: '36px',
       renderControl: (row) => (
-        <EuiFlexItem css={{ cursor: 'pointer' }} onClick={() => setSelectedDataForDetailModal(row)}>
-          <WfoArrowsExpand color={theme.colors.textDisabled} />
-        </EuiFlexItem>
+        <WfoToolTip tooltipContent={t('showAllColumnsInDetailView')}>
+          <EuiButtonIcon
+            iconType={() => <WfoArrowsExpand color={theme.colors.textDisabled} />}
+            onClick={() => setSelectedDataForDetailModal(row)}
+            aria-label={t('showAllColumnsInDetailView')}
+          />
+        </WfoToolTip>
       ),
     },
   };

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

@@ -100,13 +100,15 @@ export const WfoStep = React.forwardRef(
       );
     };
 
-    const handle = useCallback(
-      (newCodeView: string) => {
-        setCodeView(newCodeView as CodeView);
+    const handleCodeViewChange = useCallback(
+      (newCodeView: CodeView) => {
+        setCodeView(newCodeView);
       },
       [setCodeView],
     );
+
     const shouldExpand: boolean = isExpanded && hasStepContent;
+
     return (
       <div ref={ref}>
         <EuiPanel>
@@ -125,7 +127,9 @@ export const WfoStep = React.forwardRef(
                 <EuiFlexGroup css={stepRowStyle}>
                   {step.completed && (
                     <>
-                      {isExpanded && <WfoCodeViewSelector codeView={codeView} handleCodeViewChange={handle} />}
+                      {isExpanded && (
+                        <WfoCodeViewSelector codeView={codeView} handleCodeViewChange={handleCodeViewChange} />
+                      )}
                       <EuiFlexItem grow={0} css={stepHeaderRightStyle}>
                         <EuiText css={stepDurationStyle}>{t('duration')}</EuiText>
                         <EuiText size="m">{calculateTimeDifference(startedAt, completedAt)}</EuiText>
@@ -144,33 +148,40 @@ export const WfoStep = React.forwardRef(
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexGroup>
-          {shouldExpand && (
+          {shouldExpand && !hasHtmlMail && (
             <EuiFlexGroup direction="column" gutterSize="none">
+              <EuiFlexItem>
+                {codeView === CodeView.TABLE ?
+                  <WfoTableCodeBlock stepState={stepContent} />
+                : codeView === CodeView.RAW ?
+                  <WfoJsonCodeBlock data={stepContent} />
+                : <WfoMonacoCodeBlock data={stepContent} />}
+              </EuiFlexItem>
               <EuiFlexItem grow={1}>
                 {overrideStepDetail?.stepBody && <overrideStepDetail.stepBody step={step} />}
               </EuiFlexItem>
-              <EuiFlexItem>
-                {shouldExpand
-                  && !hasHtmlMail
-                  && (codeView === CodeView.TABLE ? <WfoTableCodeBlock stepState={stepContent} />
-                  : codeView === CodeView.RAW ? <WfoJsonCodeBlock data={stepContent} />
-                  : <WfoMonacoCodeBlock data={stepContent} />)}
-                {isExpanded && hasHtmlMail && (
-                  <div css={stepEmailContainerStyle}>
-                    {displayMailConfirmation(step.stateDelta.confirmation_mail as EmailState)}
-                  </div>
-                )}
-                {step.status === StepStatus.SUSPEND && userInputForm && (
-                  <WfoStepForm
-                    userInputForm={userInputForm}
-                    isTask={isTask}
-                    processId={processId ?? ''}
-                    userPermissions={userPermissions}
-                  />
-                )}
+            </EuiFlexGroup>
+          )}
+          {step.status === StepStatus.SUSPEND && userInputForm && (
+            <EuiFlexGroup direction="column" gutterSize="none">
+              <EuiFlexItem grow={1}>
+                <WfoStepForm
+                  userInputForm={userInputForm}
+                  isTask={isTask}
+                  processId={processId ?? ''}
+                  userPermissions={userPermissions}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={1}>
+                {overrideStepDetail?.stepBody && <overrideStepDetail.stepBody step={step} />}
               </EuiFlexItem>
             </EuiFlexGroup>
           )}
+          {isExpanded && hasHtmlMail && (
+            <div css={stepEmailContainerStyle}>
+              {displayMailConfirmation(step.stateDelta.confirmation_mail as EmailState)}
+            </div>
+          )}
         </EuiPanel>
       </div>
     );

package/src/components/index.ts

@@ -38,7 +38,6 @@ export * from './WfoTableCodeBlock';
 export * from './WfoInlineEdit';
 export * from './WfoPydanticForm';
 export * from './WfoSearchPage';
-export * from './WfoAgent';
 export * from './WfoMonacoCodeBlock';
 export * from './WfoLogoSpinner';
 export * from './WfoPopover';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.3.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.4.0';

package/src/hooks/useBackendAvailability.ts

@@ -3,7 +3,7 @@ import { GraphQLError } from 'graphql';
 import { SerializedError } from '@reduxjs/toolkit';
 import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
 
-import { useCheckAgentAvailabilityQuery, useCheckSearchAvailabilityQuery } from '@/rtk/endpoints/availability';
+import { useCheckSearchAvailabilityQuery } from '@/rtk/endpoints/availability';
 
 export interface BackendFeatureStatus {
   isAvailable: boolean;
@@ -42,26 +42,3 @@ export const useSearchAvailability = (): BackendFeatureStatus => {
     isLoading: false,
   };
 };
-
-export const useAgentAvailability = (): BackendFeatureStatus => {
-  const { isLoading: agentLoading, error: agentError } = useCheckAgentAvailabilityQuery();
-
-  const { isLoading: searchLoading, error: searchError } = useCheckSearchAvailabilityQuery();
-
-  if (agentLoading || searchLoading) {
-    return {
-      isAvailable: false,
-      isLoading: true,
-    };
-  }
-
-  const agentNotFound = agentError ? isNotFoundError(agentError) : false;
-  const searchNotFound = searchError ? isNotFoundError(searchError) : false;
-
-  const isAvailable = !agentNotFound && !searchNotFound;
-
-  return {
-    isAvailable,
-    isLoading: false,
-  };
-};

package/src/messages/en-GB.json

@@ -49,7 +49,8 @@
     "insyncTrue": "in-sync",
     "insyncFalse": "out-of-sync",
     "searchModalTitle": "Search string options",
-    "searchModalText": "<p>Different options are available from free text search covering all data columns, or column specific filtering. Note that: <p></p><ul><li>Hidden columns are included</li> <li>Searching is case-insensitive</li> <li>Ordering of words does not matter (unless it is a Phrase)</li> <li>TSV (text search vector) search only available for subscriptions table</li></ul></p> <p>For example:</p> <li><b>\"l2vpn\"</b> – free text search</li> <li><b>tag:l2vpn</b> – search in a specific column</li><li><b>tag:lp description:test</b> – search in multiple columns</li><li><b>tag:(lp|lr)</b> – multiselect within 1 column</li><li><b>-tag:lp</b> – negated filter</li><li><b>test*</b> – prefix filter</li> <p></p><p><b>Note:</b> Search words containing characters `|-*():\"` may not be valid, as they are part of the search query grammar</p><p>Invalid search strings are for example:</p><ul><li>2a10:e300:fff0::/48</li> <li>\"node123(planned)\"</li> <li>\"node123|planned\"</li></ul>"
+    "searchModalText": "<p>Different options are available from free text search covering all data columns, or column specific filtering. Note that: <p></p><ul><li>Hidden columns are included</li> <li>Searching is case-insensitive</li> <li>Ordering of words does not matter (unless it is a Phrase)</li> <li>TSV (text search vector) search only available for subscriptions table</li></ul></p> <p>For example:</p> <li><b>\"l2vpn\"</b> – free text search</li> <li><b>tag:l2vpn</b> – search in a specific column</li><li><b>tag:lp description:test</b> – search in multiple columns</li><li><b>tag:(lp|lr)</b> – multiselect within 1 column</li><li><b>-tag:lp</b> – negated filter</li><li><b>test*</b> – prefix filter</li> <p></p><p><b>Note:</b> Search words containing characters `|-*():\"` may not be valid, as they are part of the search query grammar</p><p>Invalid search strings are for example:</p><ul><li>2a10:e300:fff0::/48</li> <li>\"node123(planned)\"</li> <li>\"node123|planned\"</li></ul>",
+    "showAllColumnsInDetailView": "Show all columns in detail view"
   },
   "confirmationDialog": {
     "title": "Please confirm",
@@ -512,68 +513,6 @@
     "logout": "Logout",
     "aoStatusPage": "A&O application status page"
   },
-  "agent": {
-    "title": "Wfo Agent",
-    "availability": {
-      "unavailable": {
-        "title": "Agent Service Not Available",
-        "instructions": {
-          "setAgentEnvironment": {
-            "before": "Set ",
-            "after": " in your service environment variables"
-          },
-          "setSearchEnvironment": {
-            "before": "Set ",
-            "after": " (agent functionality requires search)"
-          },
-          "checkVersion": "Ensure your orchestrator-core version supports agent functionality",
-          "configureOpenAI": "Configure your OpenAI API key if using OpenAI models",
-          "restartService": "Restart your service",
-          "checkDockerConfig": "If using Docker, make sure the environment variables are set in docker-compose.yml"
-        },
-        "documentation": "Please refer to the orchestrator documentation for detailed setup instructions.",
-        "retryButton": "Retry Connection"
-      }
-    },
-    "page": {
-      "filledParameters": "Filled parameters",
-      "emptyGroup": "Empty group",
-      "searchQuery": "Search query",
-      "activeFilters": "Active filters",
-      "noFiltersApplied": "No filters applied",
-      "entityType": "Entity type",
-      "action": "Action",
-      "copilot": {
-        "title": "Database assistant",
-        "initial": "What can I help you with?"
-      },
-      "suggestions": {
-        "findActiveSubscriptions": "Find active subscriptions",
-        "showTerminatedWorkflows": "Show terminated workflows",
-        "listAllSubscriptionsAndExport": "List all subscriptions and export them",
-        "showActiveSubscriptionsPerMonth": "Show the number of active subscriptions per month"
-      },
-      "tools": {
-        "set_filter_tree": "I'm setting up filters",
-        "start_new_search": "I'm starting a new search",
-        "run_search": "I'm executing a search",
-        "discover_filter_paths": "I'm discovering available filters",
-        "run_aggregation": "I'm running aggregations",
-        "prepare_export": "I'm preparing the export",
-        "get_valid_operators": "I'm getting valid operators",
-        "set_temporal_grouping": "I'm setting temporal grouping"
-      },
-      "planProgress": {
-        "planning": "Planning...",
-        "completed": "Plan completed",
-        "executing": "Executing plan ({completed}/{total})"
-      },
-      "visualization": {
-        "noDataAvailable": "No data available for visualization.",
-        "invalidDataStructure": "Invalid data structure."
-      }
-    }
-  },
   "search": {
     "availability": {
       "unavailable": {

package/src/messages/nl-NL.json

@@ -48,6 +48,7 @@
     "unauthorizedPage": "Niet geautoriseerd om deze pagina te bekijken",
     "insyncTrue": "in-sync",
     "insyncFalse": "out-of-sync",
+    "showAllColumnsInDetailView": "Toon alle kolommen in detailweergave",
     "searchModalTitle": "Zoekwoorden opties",
     "searchModalText": "<p>Er zijn verschillende opties beschikbaar: zoeken in vrije tekst voor alle datakolommen en specifiek per kolom te filteren. Houd er rekening mee dat: </p><p></p><ul><li>Verborgen kolommen zijn inbegrepen</li> <li>Zoeken is niet hoofdlettergevoelig</li> <li>De volgorde van woorden doet er niet toe (tenzij het een quote)</li> <li>TSV (text search vector) zoekactie alleen beschikbaar voor subscription tabel</li></ul><p>Bijvoorbeeld:</p> <li><b>\"l2vpn\"</b> – vrije tekst search</li> <li><b>tag:l2vpn</b> – zoeken in een specifieke kolom</li> <li><b>tag:lp beschrijving: test</b> – zoeken in meerdere kolommen</li><li><b>tag:(lp|lr)</b> – multi select binnen 1 kolom</li> <li><b>-tag:lp</b> – omgekeerd filteren</li> <li><b>test*</b> – prefix filter</li> <p></p><p><b>Opmerking:</b> Zoeken op woorden die tekens `|-*():\"` bevatten, zijn mogelijk niet geldig, omdat ze deel uitmaken van de grammatica van de zoekfunctie</p><p>Ongeldige zoekwoorden zijn bijvoorbeeld:</p><ul><li>2a10:e300:fff0::/48</li> <li>\"node123(gepland)\"</li> <li>\"node123|gepland\"</li></ul>"
   },