@orchestrator-ui/orchestrator-ui-components 8.8.2 → 8.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "8.8.2",
+  "version": "8.9.1",
   "license": "Apache-2.0",
   "description": "Library of UI Components used to display the workflow orchestrator frontend",
   "author": {

package/src/components/WfoBadges/WfoProductStatusBadge/WfoProductStatusBadge.tsx

@@ -8,16 +8,13 @@ export type WfoProductStatusBadgeProps = {
   status: ProductLifecycleStatus;
 };
 
-const normalizedStatus = (status: ProductLifecycleStatus): string => status.toLowerCase().replace(/_/g, ' ');
-
 export const WfoProductStatusBadge: FC<WfoProductStatusBadgeProps> = ({ status }) => {
   const { theme, toSecondaryColor } = useOrchestratorTheme();
 
-  const productLifeCycleStatus = normalizedStatus(status);
   const getBadgeColorFromStatus = () => {
     const { primary, borderBaseSubdued, textPrimary, textParagraph, success, textSuccess } = theme.colors;
 
-    switch (productLifeCycleStatus) {
+    switch (status) {
       case ProductLifecycleStatus.ACTIVE:
         return {
           badgeColor: toSecondaryColor(success),
@@ -41,7 +38,7 @@ export const WfoProductStatusBadge: FC<WfoProductStatusBadgeProps> = ({ status }
 
   return (
     <WfoBadge textColor={textColor} color={badgeColor}>
-      {productLifeCycleStatus}
+      {status}
     </WfoBadge>
   );
 };

package/src/components/WfoStartButton/WfoStartButtonComboBox.tsx

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 
-import { capitalize } from 'lodash';
-
 import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiPopover, EuiSelectable, EuiSpacer } from '@elastic/eui';
 
 import { useGetOrchestratorConfig, useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { WfoChevronDown, WfoPlusCircleFill } from '@/icons';
 import { ProductLifecycleStatus, StartComboBoxOption } from '@/types';
+import { getProductLifecycleStatus } from '@/utils';
 
 import { getStyles } from './styles';
 
@@ -16,12 +15,8 @@ export type WfoStartButtonComboBoxProps = {
   onOptionChange: (selectedOption: StartComboBoxOption) => void;
   isProcess: boolean;
   className?: string;
-  selectedProductStatus?: ProductLifecycleStatus | string;
-  setSelectedProductStatus?: (status: ProductLifecycleStatus | string) => void;
-};
-
-const formatProductStatusLabel = (productStatus: string) => {
-  return capitalize(productStatus.replace(/_/g, ' '));
+  selectedProductStatus?: ProductLifecycleStatus;
+  setSelectedProductStatus?: (status: ProductLifecycleStatus) => void;
 };
 
 export const WfoStartButtonComboBox = ({
@@ -67,7 +62,7 @@ export const WfoStartButtonComboBox = ({
                 iconType={() => <WfoChevronDown height={18} width={18} color="currentColor" />}
                 onClick={() => setFilterPopoverOpen((v) => !v)}
               >
-                <b>{formatProductStatusLabel(selectedProductStatus ?? ProductLifecycleStatus.ACTIVE)}</b>
+                <b>{selectedProductStatus ?? ProductLifecycleStatus.ACTIVE}</b>
               </EuiButtonEmpty>
             }
             isOpen={isFilterPopoverOpen}
@@ -80,11 +75,11 @@ export const WfoStartButtonComboBox = ({
                   key={productStatus}
                   size="xs"
                   onClick={() => {
-                    setSelectedProductStatus(productStatus.toUpperCase());
+                    setSelectedProductStatus(getProductLifecycleStatus(productStatus));
                     setFilterPopoverOpen(false);
                   }}
                 >
-                  {formatProductStatusLabel(productStatus ?? ProductLifecycleStatus.ACTIVE)}
+                  {productStatus ?? ProductLifecycleStatus.ACTIVE}
                 </EuiButtonEmpty>
               </div>
             ))}

package/src/components/WfoStartButton/WfoStartWorkflowComboBox.tsx

@@ -14,7 +14,7 @@ export const WfoStartWorkflowButtonComboBox = () => {
   const router = useRouter();
   const t = useTranslations('common');
   const { isEngineRunningNow } = useCheckEngineStatus();
-  const [selectedProductStatus, setSelectedProductStatus] = React.useState<ProductLifecycleStatus | string>(
+  const [selectedProductStatus, setSelectedProductStatus] = React.useState<ProductLifecycleStatus>(
     ProductLifecycleStatus.ACTIVE,
   );
 

package/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActions.tsx

@@ -12,13 +12,14 @@ import {
   WfoInSyncField,
   WfoPopover,
 } from '@/components';
+import { getActionItemsByTarget } from '@/components/WfoSubscription';
 import { WfoSubscriptionActionsMenuItem } from '@/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionsMenuItem';
 import { useActiveProcess } from '@/components/WfoSubscription/WfoSubscriptionActions/utils';
 import { PolicyResource } from '@/configuration/policy-resources';
 import { useOrchestratorTheme, usePolicy } from '@/hooks';
 import { WfoDotsHorizontal } from '@/icons/WfoDotsHorizontal';
 import { useGetSubscriptionActionsQuery, useGetSubscriptionDetailQuery, useStartProcessMutation } from '@/rtk';
-import { SubscriptionAction, WorkflowTarget } from '@/types';
+import { WorkflowTarget } from '@/types';
 
 type MenuBlockProps = {
   title: string;
@@ -129,21 +130,10 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
     }
   };
 
-  const getActionItems = (workflowTarget: WorkflowTarget): SubscriptionAction[] => {
-    // Core versions 5.2 and lower return subscriptionActions result with lowercase keynames. Higher version return them uppercased to align
-    // with all the other places they are used. We support both for now. The lowercase keys are deliberately not part of the
-    // SubscriptionActions type, so the fallback is a runtime-only check behind a cast.
-    const actionsByTarget = subscriptionActions as unknown as
-      | Record<string, SubscriptionAction[] | undefined>
-      | undefined;
-
-    return actionsByTarget?.[workflowTarget] ?? actionsByTarget?.[workflowTarget.toLowerCase()] ?? [];
-  };
-
-  const validateActionItems = getActionItems(WorkflowTarget.VALIDATE);
-  const reconcileActionItems = getActionItems(WorkflowTarget.RECONCILE);
-  const modifyActionItems = getActionItems(WorkflowTarget.MODIFY);
-  const terminateActionItems = getActionItems(WorkflowTarget.TERMINATE);
+  const validateActionItems = getActionItemsByTarget(WorkflowTarget.VALIDATE, subscriptionActions);
+  const reconcileActionItems = getActionItemsByTarget(WorkflowTarget.RECONCILE, subscriptionActions);
+  const modifyActionItems = getActionItemsByTarget(WorkflowTarget.MODIFY, subscriptionActions);
+  const terminateActionItems = getActionItemsByTarget(WorkflowTarget.TERMINATE, subscriptionActions);
 
   const compactItems = (
     <>

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

@@ -5,11 +5,13 @@ import {
   ProcessStatus,
   ProductBlockInstance,
   SubscriptionAction,
+  SubscriptionActions,
   SubscriptionDetailProcess,
   WorkflowTarget,
 } from '../../../types';
 import {
   flattenSubscriptionActionProps,
+  getActionItemsByTarget,
   getFieldFromProductBlockInstanceValues,
   getLastUncompletedProcess,
   getLatestTaskDate,
@@ -470,6 +472,61 @@ describe('mapProductBlockInstancesToEuiSelectableOptions', () => {
   });
 });
 
+describe('getActionItemsByTarget', () => {
+  const modifyAction: SubscriptionAction = {
+    name: 'modify_note',
+    description: 'Modify note',
+  };
+  const terminateAction: SubscriptionAction = {
+    name: 'terminate',
+    description: 'Terminate subscription',
+  };
+
+  const subscriptionActions: SubscriptionActions = {
+    [WorkflowTarget.MODIFY]: [modifyAction],
+    [WorkflowTarget.TERMINATE]: [terminateAction],
+    [WorkflowTarget.SYSTEM]: [],
+    [WorkflowTarget.VALIDATE]: [],
+    [WorkflowTarget.RECONCILE]: [],
+  };
+
+  it('returns actions for the given target with uppercase keys', () => {
+    expect(getActionItemsByTarget(WorkflowTarget.MODIFY, subscriptionActions)).toEqual([modifyAction]);
+    expect(getActionItemsByTarget(WorkflowTarget.TERMINATE, subscriptionActions)).toEqual([terminateAction]);
+  });
+
+  it('falls back to lowercase keys returned by core versions 5.2 and lower', () => {
+    const lowercaseActions = {
+      modify: [modifyAction],
+      terminate: [terminateAction],
+    } as unknown as SubscriptionActions;
+
+    expect(getActionItemsByTarget(WorkflowTarget.MODIFY, lowercaseActions)).toEqual([modifyAction]);
+    expect(getActionItemsByTarget(WorkflowTarget.TERMINATE, lowercaseActions)).toEqual([terminateAction]);
+  });
+
+  it('prefers the uppercase key when both casings are present', () => {
+    const mixedActions = {
+      [WorkflowTarget.MODIFY]: [modifyAction],
+      modify: [terminateAction],
+    } as unknown as SubscriptionActions;
+
+    expect(getActionItemsByTarget(WorkflowTarget.MODIFY, mixedActions)).toEqual([modifyAction]);
+  });
+
+  it('returns an empty array when the target is missing in either casing', () => {
+    const actionsWithoutValidate = {
+      [WorkflowTarget.MODIFY]: [modifyAction],
+    } as unknown as SubscriptionActions;
+
+    expect(getActionItemsByTarget(WorkflowTarget.VALIDATE, actionsWithoutValidate)).toEqual([]);
+  });
+
+  it('returns an empty array when subscriptionActions is undefined', () => {
+    expect(getActionItemsByTarget(WorkflowTarget.MODIFY, undefined)).toEqual([]);
+  });
+});
+
 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']";

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

@@ -9,6 +9,7 @@ import {
   ProductBlockInstance,
   SortOrder,
   SubscriptionAction,
+  SubscriptionActions,
   SubscriptionDetailProcess,
   SubscriptionRelation,
   WorkflowTarget,
@@ -189,3 +190,17 @@ export const mapProductBlockInstancesToEuiSelectableOptions = (
     },
   }));
 };
+
+export const getActionItemsByTarget = (
+  workflowTarget: WorkflowTarget,
+  subscriptionActions?: SubscriptionActions,
+): SubscriptionAction[] => {
+  // https://github.com/workfloworchestrator/orchestrator-core/issues/1820 will align the WorkflowTarget enum and make it
+  // uppercase. We support both for now. The lowercase keys are deliberately not part of the
+  // SubscriptionActions type, so the fallback is a runtime-only check behind a cast.
+  const actionsByTarget = subscriptionActions as unknown as
+    | Record<string, SubscriptionAction[] | undefined>
+    | undefined;
+
+  return actionsByTarget?.[workflowTarget] ?? actionsByTarget?.[workflowTarget.toLowerCase()] ?? [];
+};

package/src/components/WfoTable/WfoStructuredSearchTable/WfoSearchFieldWithActions.tsx

@@ -8,18 +8,18 @@ import { useWithOrchestratorTheme } from '@/hooks';
 import { getFormFieldsBaseStyle } from '@/theme';
 
 export type SearchFieldWithActionsProps = {
-  queryText?: string;
-  onChangeQueryText: (queryText: string) => void;
-  onSearchQueryText: (queryText: string) => void;
+  queryString?: string;
+  onChangeQueryString: (queryString: string) => void;
+  onSearchQueryString: (queryString: string) => void;
   onShowInformation: () => void;
   onShowTableSettings: () => void;
 };
 
 // Search field with the info and table-settings actions, rendered as EuiFlexItems inside an EuiFlexGroup.
 export const WfoSearchFieldWithActions = ({
-  queryText,
-  onChangeQueryText,
-  onSearchQueryText,
+  queryString,
+  onChangeQueryString,
+  onSearchQueryString,
   onShowInformation,
   onShowTableSettings,
 }: SearchFieldWithActionsProps) => {
@@ -32,10 +32,10 @@ export const WfoSearchFieldWithActions = ({
         <EuiFormRow fullWidth>
           <EuiFieldSearch
             css={formFieldBaseStyle}
-            value={queryText}
+            value={queryString}
             placeholder={`${t('search')}...`}
-            onChange={(e) => onChangeQueryText(e.target.value)}
-            onSearch={(queryText) => onSearchQueryText(queryText)}
+            onChange={(e) => onChangeQueryString(e.target.value)}
+            onSearch={(queryString) => onSearchQueryString(queryString)}
             fullWidth
           />
         </EuiFormRow>

package/src/components/WfoTable/WfoStructuredSearchTable/WfoSearchHelpModal.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiText } from '@elastic/eui';
+
+import { WfoInformationModal } from '@/components';
+
+export type WfoSearchHelpModalProps = {
+  onClose: () => void;
+};
+
+export const WfoSearchHelpModal = ({ onClose }: WfoSearchHelpModalProps) => {
+  const t = useTranslations('search.page');
+  const tCommon = useTranslations('common');
+
+  return (
+    <WfoInformationModal title={t('help.title')} onClose={onClose}>
+      <EuiText size="s">
+        <p>
+          <strong>{t('help.searchFieldTitle')}</strong> - {t('help.searchFieldDescription')}
+        </p>
+
+        <h4>{t('help.filterTitle')}</h4>
+        <p>{t('help.filterIntro')}</p>
+        <ul>
+          <li>
+            <strong>{t('addRule')}</strong> - {t('help.addRuleDescription')}
+          </li>
+          <li>
+            <strong>{t('addGroup')}</strong> - {t('help.addGroupDescription')}
+          </li>
+        </ul>
+
+        <h4>{t('help.quickFilterTitle')}</h4>
+        <p>{t('help.quickFilterDescription')}</p>
+
+        <h4>{t('help.matchingRowTitle')}</h4>
+        <p>{t('help.matchingRowDescription')}</p>
+
+        <h4>{t('help.tableSettingsTitle')}</h4>
+        <ul>
+          <li>
+            <strong>{tCommon('showMatchDetails')}</strong> - {t('help.showMatchDetailsDescription')}
+          </li>
+          <li>
+            <strong>{tCommon('retrieval')}</strong> - {t('help.retrievalDescription')}
+          </li>
+          <li>
+            <strong>{tCommon('export')}</strong> - {t('help.exportDescription')}
+          </li>
+          <li>
+            <strong>{t('help.advancedNestedSearchLabel')}</strong> - {t('help.advancedNestedSearchDescription')}
+          </li>
+        </ul>
+      </EuiText>
+    </WfoInformationModal>
+  );
+};

package/src/components/WfoTable/WfoStructuredSearchTable/WfoStructuredSearchTable.tsx

@@ -3,16 +3,7 @@ import type { RuleGroupType } from 'react-querybuilder';
 
 import { useTranslations } from 'next-intl';
 
-import {
-  EuiButton,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiSelect,
-  EuiSpacer,
-  EuiSwitch,
-  EuiText,
-} from '@elastic/eui';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect, EuiSpacer, EuiSwitch } from '@elastic/eui';
 
 import {
   DEFAULT_PAGE_SIZE,
@@ -45,6 +36,7 @@ import { getDefaultTableConfig } from '@/utils';
 import { ColumnType, WfoTable, WfoTableProps } from '../WfoTable';
 import { WfoFilterBuilder } from './WfoFilterBuilder';
 import { WfoSearchFieldWithActions } from './WfoSearchFieldWithActions';
+import { WfoSearchHelpModal } from './WfoSearchHelpModal';
 import { getWfoStructuredSearchTableStyles } from './styles';
 import { buildColumnFilter } from './utils';
 
@@ -62,7 +54,7 @@ export type WfoStructuredSearchTableColumnConfig<T extends object> = Partial<
   WfoTableControlColumnConfig<T> | WfoStructuredSearchTableDataColumnConfig<T>
 >;
 export type SearchParams = {
-  queryText?: string | false;
+  queryString?: string | false;
   retrieverType?: RetrieverType;
   ruleGroup?: RuleGroupType | false;
   limit?: number;
@@ -81,12 +73,12 @@ export type WfoStructuredSearchTableProps<T extends object> = Omit<
   defaultHiddenColumns?: TableColumnKeys<T>;
   defaultShowMatchDetails?: boolean;
   defaultAdvancedNestedSearch?: boolean;
-  queryText?: string;
+  queryString?: string;
   localStorageKey: string;
   exportDataIsLoading?: boolean;
   error?: WfoGraphqlError[];
-  onChangeQueryText: (queryString: string) => void;
-  onSearchQueryText: (queryString: string) => void;
+  onChangeQueryString: (queryString: string) => void;
+  onSearchQueryString: (queryString: string) => void;
   onShowMore: () => void;
   onUpdateDataSorting: (updateSorting: WfoDataSorting<T>) => void;
   // Resolves a column key to its search field path (e.g. "status" -> "subscription.status"), used
@@ -113,12 +105,12 @@ export const WfoStructuredSearchTable = <T extends object>({
   defaultHiddenColumns = [],
   defaultShowMatchDetails = false,
   defaultAdvancedNestedSearch = true,
-  queryText,
+  queryString,
   localStorageKey,
   exportDataIsLoading,
   error,
-  onChangeQueryText,
-  onSearchQueryText,
+  onChangeQueryString,
+  onSearchQueryString,
   onShowMore,
   onExportData,
   retrieverType,
@@ -272,9 +264,9 @@ export const WfoStructuredSearchTable = <T extends object>({
           </EuiFlexItem>
         )}
         <WfoSearchFieldWithActions
-          queryText={queryText}
-          onChangeQueryText={onChangeQueryText}
-          onSearchQueryText={onSearchQueryText}
+          queryString={queryString}
+          onChangeQueryString={onChangeQueryString}
+          onSearchQueryString={onSearchQueryString}
           onShowInformation={() => setShowInformationModal(true)}
           onShowTableSettings={() => setShowTableSettingsModal(true)}
         />
@@ -380,13 +372,7 @@ export const WfoStructuredSearchTable = <T extends object>({
         />
       )}
 
-      {showInformationModal && (
-        <WfoInformationModal title={t('searchModalTitle')} onClose={() => setShowInformationModal(false)}>
-          <EuiText>
-            <p>TODO: Info about searching</p>
-          </EuiText>
-        </WfoInformationModal>
-      )}
+      {showInformationModal && <WfoSearchHelpModal onClose={() => setShowInformationModal(false)} />}
 
       {rowDetailData && (
         <WfoInformationModal title={'TODO: Information modal title'} onClose={() => setRowDetailModalData(undefined)}>

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.8.2';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.9.1';

package/src/messages/en-GB.json

@@ -339,6 +339,25 @@
       "fromDate": "From date",
       "fromNumber": "From",
       "groupLabel": "Group",
+      "help": {
+        "addGroupDescription": "adds a new group with two rules inside. A group has its own AND/OR choice.",
+        "addRuleDescription": "adds a new rule to the current group. A rule consists of a field, an operator and a value.",
+        "advancedNestedSearchDescription": "when enabled, the field dropdown in the filter also offers the full nested paths. When disabled, only the paths that match the table columns are shown.",
+        "advancedNestedSearchLabel": "Advanced nested search",
+        "exportDescription": "downloads a CSV file with only the rows that match the current filter.",
+        "filterIntro": "Use 'Create a filter' to build a structured filter out of rules.",
+        "filterTitle": "Filter rules and grouping",
+        "matchingRowDescription": "Hover over a row to reveal an extra row with information about the matched item: the fields that matched the search text and the confidence of the match.",
+        "matchingRowTitle": "Matching row",
+        "quickFilterDescription": "You can also click a column header and enter a value there - this adds a new rule for that column to the filter.",
+        "quickFilterTitle": "Quick filter from a column header",
+        "retrievalDescription": "choose how results are retrieved: Auto, Fuzzy, Semantic or Hybrid.",
+        "searchFieldDescription": "Searches across all available fields - no filter applied.",
+        "searchFieldTitle": "Default Search box behavior",
+        "showMatchDetailsDescription": "always show the matching rows instead of only on hover.",
+        "tableSettingsTitle": "Table settings (gear button)",
+        "title": "How search works"
+      },
       "hideFilters": "Hide filters",
       "loadingSearchResults": "Loading search results...",
       "maxNestingDepth": "Maximum nesting depth reached",

package/src/messages/nl-NL.json

@@ -64,7 +64,7 @@
     "metadataProductblocks": "Product blocks",
     "metadataProducts": "Products",
     "metadataResourceTypes": "Resource types",
-    "metadataScheduledTasks": "Scheduled tasks",
+    "metadataScheduledTasks": "Geplande taken",
     "metadataTasks": "Taken",
     "metadataWorkflows": "Workflows",
     "minimumOrchestratorCoreVersion": "Minimale versie van orchestrator-core",
@@ -339,6 +339,25 @@
       "fromDate": "Vanaf datum",
       "fromNumber": "Van",
       "groupLabel": "Groep",
+      "help": {
+        "addGroupDescription": "voegt een nieuwe groep toe met daarin twee regels. Een groep heeft een eigen AND/OR-keuze.",
+        "addRuleDescription": "voegt een nieuwe regel toe aan de huidige groep. Een regel bestaat uit een veld, een operator en een waarde.",
+        "advancedNestedSearchDescription": "indien ingeschakeld biedt de veldkeuzelijst in het filter ook de volledige geneste paden. Indien uitgeschakeld worden alleen de paden getoond die overeenkomen met de tabelkolommen.",
+        "advancedNestedSearchLabel": "Geavanceerd genest zoeken",
+        "exportDescription": "downloadt een CSV-bestand met alleen de rijen die voldoen aan het huidige filter.",
+        "filterIntro": "Bouw met 'Filter' een gestructureerd filter op uit regels.",
+        "filterTitle": "Filterregels en groepen",
+        "matchingRowDescription": "Beweeg de muis over een rij om een extra rij te tonen met informatie over het gevonden item: de velden die overeenkomen met de zoektekst en de betrouwbaarheid van de match.",
+        "matchingRowTitle": "Matching rij",
+        "quickFilterDescription": "Je kunt ook op een tabel header klikken en daar een waarde invoeren - dit voegt een nieuwe regel voor die kolom aan het filter toe.",
+        "quickFilterTitle": "Snel filteren via een tabel header",
+        "retrievalDescription": "kies hoe resultaten worden opgehaald: Auto, Fuzzy, Semantic of Hybride.",
+        "searchFieldDescription": "Doorzoekt alle beschikbare velden - geen filter toegepast.",
+        "searchFieldTitle": "Standaardgedrag van het zoekveld",
+        "showMatchDetailsDescription": "toon de matching rijen altijd in plaats van alleen bij hover.",
+        "tableSettingsTitle": "Tabelinstellingen (tandwielknop)",
+        "title": "Hoe zoeken werkt"
+      },
       "hideFilters": "Verberg filters",
       "loadingSearchResults": "Zoekresultaten laden...",
       "maxNestingDepth": "Maximale nesting-diepte bereikt",