@orchestrator-ui/orchestrator-ui-components 8.5.0 → 8.7.0

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

@@ -1,7 +1,12 @@
+import { TableColumnKeys } from '@/components';
 import { ColumnType, WfoTableColumnConfig } from '@/components/WfoTable/WfoTable/WfoTable';
 import { SortOrder } from '@/types';
 
-import { getUpdatedSortOrder, mapSortableAndFilterableValuesToTableColumnConfig } from './utils';
+import {
+  getSortedVisibleColumns,
+  getUpdatedSortOrder,
+  mapSortableAndFilterableValuesToTableColumnConfig,
+} from './utils';
 
 type TestObject = {
   name: string;
@@ -19,6 +24,21 @@ const tableColumnConfig: WfoTableColumnConfig<TestObject> = {
   },
 };
 
+const tableColumnConfigWithControlColumn: WfoTableColumnConfig<TestObject> = {
+  actions: {
+    columnType: ColumnType.CONTROL,
+    renderControl: () => null,
+  },
+  name: {
+    columnType: ColumnType.DATA,
+    label: 'testName',
+  },
+  age: {
+    columnType: ColumnType.DATA,
+    label: 'testAge',
+  },
+};
+
 describe('utils', () => {
   describe('getUpdatedSortOrder()', () => {
     it('returns SortOrder.DESC if the currentSortOrder is SortOrder.ASC', () => {
@@ -38,6 +58,47 @@ describe('utils', () => {
     });
   });
 
+  describe('getSortedVisibleColumns()', () => {
+    it('keeps a control column visible even when its key is present in hiddenColumns', () => {
+      // Given a stale hiddenColumns still listing the control column (e.g. from localStorage)
+      const hiddenColumns = ['actions'] as unknown as TableColumnKeys<TestObject>;
+
+      // When
+      const result = getSortedVisibleColumns(tableColumnConfigWithControlColumn, [], hiddenColumns);
+
+      // Then the control column is still rendered
+      const visibleKeys = result.map(([key]) => key);
+      expect(visibleKeys).toContain('actions');
+    });
+
+    it('hides data columns that are listed in hiddenColumns', () => {
+      // Given
+      const hiddenColumns: TableColumnKeys<TestObject> = ['age'];
+
+      // When
+      const result = getSortedVisibleColumns(tableColumnConfigWithControlColumn, [], hiddenColumns);
+
+      // Then
+      const visibleKeys = result.map(([key]) => key);
+      expect(visibleKeys).not.toContain('age');
+      expect(visibleKeys).toContain('name');
+    });
+
+    it('keeps the control column visible while still hiding a hidden data column', () => {
+      // Given both a control key and a data key are marked hidden
+      const hiddenColumns = ['actions', 'age'] as unknown as TableColumnKeys<TestObject>;
+
+      // When
+      const result = getSortedVisibleColumns(tableColumnConfigWithControlColumn, [], hiddenColumns);
+
+      // Then only the data column is hidden; the control column stays visible
+      const visibleKeys = result.map(([key]) => key);
+      expect(visibleKeys).toContain('actions');
+      expect(visibleKeys).toContain('name');
+      expect(visibleKeys).not.toContain('age');
+    });
+  });
+
   describe('mapSortableAndFilterableValuesToTableColumnConfig()', () => {
     it('sets the sortable and filterable properties for the columnConfig object to true when the colum name is specified in the list', () => {
       // Given

package/src/components/WfoTable/WfoTable/utils.ts

@@ -25,7 +25,10 @@ export const getSortedVisibleColumns = <T extends object>(
     ),
   );
 
-  return tableHeadersEntries.filter(([columnId]) => !hiddenColumns.includes(columnId as keyof T));
+  return tableHeadersEntries.filter(
+    ([columnId, columnConfig]) =>
+      columnConfig.columnType === ColumnType.CONTROL || !hiddenColumns.includes(columnId as keyof T),
+  );
 };
 
 export const getUpdatedSortOrder = (currentSortOrder?: SortOrder) =>

package/src/components/WfoTable/WfoTableSettingsModal/WfoTableSettingsModal.spec.ts

@@ -0,0 +1,45 @@
+import { TableColumnKeys } from '@/components';
+import { ColumnType, WfoTableColumnConfig } from '@/components/WfoTable/WfoTable/WfoTable';
+import { getTableSettingsColumns } from '@/components/WfoTable/WfoTableSettingsModal/utils';
+
+type TestObject = {
+  name: string;
+  age: number;
+};
+
+const columnConfig: WfoTableColumnConfig<TestObject> = {
+  actions: {
+    columnType: ColumnType.CONTROL,
+    renderControl: () => null,
+  },
+  name: {
+    columnType: ColumnType.DATA,
+    label: 'Name',
+  },
+  age: {
+    columnType: ColumnType.DATA,
+    label: 'Age',
+  },
+};
+
+describe('getTableSettingsColumns()', () => {
+  it('excludes control columns and keeps only data columns as toggles', () => {
+    const result = getTableSettingsColumns(columnConfig, []);
+    expect(result.map((column) => column.field)).toEqual(['name', 'age']);
+  });
+
+  it('maps each data column label to name and marks all visible when nothing is hidden', () => {
+    const result = getTableSettingsColumns(columnConfig, []);
+    expect(result).toEqual([
+      { field: 'name', name: 'Name', isVisible: true },
+      { field: 'age', name: 'Age', isVisible: true },
+    ]);
+  });
+
+  it('marks a data column as not visible when it is present in hiddenColumns', () => {
+    const hiddenColumns: TableColumnKeys<TestObject> = ['age'];
+    const result = getTableSettingsColumns(columnConfig, hiddenColumns);
+    expect(result.find((column) => column.field === 'age')?.isVisible).toBe(false);
+    expect(result.find((column) => column.field === 'name')?.isVisible).toBe(true);
+  });
+});

package/src/components/WfoTable/WfoTableSettingsModal/WfoTableSettingsModal.tsx

@@ -25,6 +25,7 @@ export type TableSettingsModalProps<T> = {
   onClose: () => void;
   onUpdateTableConfig: (updatedTableConfig: TableSettingsConfig<T>) => void;
   onResetToDefaults: () => void;
+  extraSettings?: React.ReactNode;
 };
 
 export const TableSettingsModal = <T,>({
@@ -33,6 +34,7 @@ export const TableSettingsModal = <T,>({
   onUpdateTableConfig,
   onResetToDefaults,
   onClose,
+  extraSettings,
 }: TableSettingsModalProps<T>) => {
   const t = useTranslations('main');
   const { formRowStyle, selectFieldStyle } = useWithOrchestratorTheme(getWfoTableSettingsModalStyles);
@@ -97,6 +99,13 @@ export const TableSettingsModal = <T,>({
             options={options}
           />
         </EuiFormRow>
+
+        {extraSettings && (
+          <>
+            <EuiSpacer size="xs" />
+            {extraSettings}
+          </>
+        )}
       </EuiForm>
     </WfoSettingsModal>
   );

package/src/components/WfoTable/WfoTableSettingsModal/index.ts

@@ -1 +1,2 @@
 export * from './WfoTableSettingsModal';
+export * from './utils';

package/src/components/WfoTable/WfoTableSettingsModal/utils.ts

@@ -0,0 +1,17 @@
+import { ColumnType, TableColumnKeys, TableSettingsColumnConfig, WfoTableColumnConfig } from '@/components';
+
+export const getTableSettingsColumns = <T extends object>(
+  columnConfig: WfoTableColumnConfig<T>,
+  hiddenColumns: TableColumnKeys<T>,
+): TableSettingsColumnConfig<T>[] =>
+  Object.entries(columnConfig)
+    .filter(([, columnItemConfig]) => columnItemConfig.columnType === ColumnType.DATA)
+    .map(([key, { label }]): TableSettingsColumnConfig<T> => {
+      const field = key as keyof T;
+
+      return {
+        field,
+        name: label,
+        isVisible: hiddenColumns.indexOf(field) === -1,
+      };
+    });

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './WfoAutoExpandableTextArea';
 export * from './WfoBadges';
 export * from './WfoBackendUnavailable';
 export * from './WfoAvailabilityCheck';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.5.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.7.0';

package/src/hooks/index.ts

@@ -15,3 +15,4 @@ export * from './useGetSchedulesForWorkflow';
 export * from './useGetWorkflowNameById';
 export * from './usePathAutoComplete';
 export * from './useGetPydanticFormsConfig';
+export * from './useLanguageCode';

package/src/hooks/useGetPydanticFormsConfig.tsx

@@ -23,6 +23,7 @@ import {
   WfoArrayField,
   WfoCallout,
   WfoCheckbox,
+  WfoCron,
   WfoDivider,
   WfoDropdown,
   WfoInteger,
@@ -181,6 +182,17 @@ const useGetComponentMatcherExtender = (): ComponentMatcherExtender => {
             return type === PydanticFormFieldType.STRING && format === ('callout' as PydanticFormFieldFormat);
           },
         },
+        {
+          id: 'cron',
+          ElementMatch: {
+            isControlledElement: true,
+            Element: WfoCron,
+          },
+          matcher: (field) => {
+            const { type, schema } = field;
+            return type === PydanticFormFieldType.STRING && schema.title === 'Cron';
+          },
+        },
         {
           id: 'markdownField',
           ElementMatch: {

package/src/hooks/useLanguageCode.ts

@@ -0,0 +1,11 @@
+import { useLocale } from 'next-intl';
+
+export const useLanguageCode = () => {
+  const locale = useLocale();
+  if (!locale) return 'en';
+  try {
+    return typeof Intl !== 'undefined' && 'Locale' in Intl ? new Intl.Locale(locale).language : locale.split(/[-_]/)[0];
+  } catch {
+    return locale.split(/[-_]/)[0] || 'en';
+  }
+};

package/src/messages/en-GB.json

@@ -36,6 +36,7 @@
     "deselect": "Deselect",
     "close": "Close",
     "editColumns": "Edit columns",
+    "tableSettings": "Table settings",
     "loading": "Loading",
     "newSubscription": "New subscription",
     "newTask": "New task",
@@ -106,6 +107,24 @@
       "contactPersonName": {
         "placeholder": "Search and add contact persons..."
       },
+      "cron": {
+        "second": "second",
+        "minute": "minute",
+        "hour": "hour",
+        "dayOfMonth": "day (month)",
+        "month": "month",
+        "dayOfWeek": "day (week)",
+        "anyValue": "any value",
+        "valueListSeparator": "value list separator",
+        "rangeOfValues": "range of values",
+        "stepValues": "step values",
+        "allowedValues": "allowed values",
+        "alternativeSingleValues": "alternative single values",
+        "sundayNonStandard": "sunday (non-standard)",
+        "invalidExpression": "Invalid cron expression: {error}",
+        "nextOccurrences": "Next: {dates}",
+        "possibleValues": "Possible values for this field"
+      },
       "ipvAnyNetworkField": {
         "manuallySelectedPrefix": "Manually selected prefix"
       },
@@ -346,6 +365,7 @@
       "endDate": "End date",
       "metadata": "Metadata",
       "note": "Note",
+      "customerId": "Customer ID",
       "customerFullname": "Customer",
       "customerShortcode": "Customer abbr",
       "actions": "Actions"

package/src/messages/nl-NL.json

@@ -36,6 +36,7 @@
     "deselect": "Deselecteer",
     "close": "Sluiten",
     "editColumns": "Wijzig kolommen",
+    "tableSettings": "Tabel instellingen",
     "loading": "Laden",
     "newSubscription": "Nieuwe subscription",
     "newTask": "Nieuwe task",
@@ -107,6 +108,24 @@
       "contactPersonName": {
         "placeholder": "Zoek en voeg contactpersonen toe..."
       },
+      "cron": {
+        "second": "seconde",
+        "minute": "minuut",
+        "hour": "uur",
+        "dayOfMonth": "dag (maand)",
+        "month": "maand",
+        "dayOfWeek": "dag (week)",
+        "anyValue": "elke waarde",
+        "valueListSeparator": "scheidingsteken voor waardenlijst",
+        "rangeOfValues": "bereik van waarden",
+        "stepValues": "stapwaarden",
+        "allowedValues": "toegestane waarden",
+        "alternativeSingleValues": "alternatieve losse waarden",
+        "sundayNonStandard": "zondag (niet-standaard)",
+        "invalidExpression": "Ongeldige cron-expressie: {error}",
+        "nextOccurrences": "Volgende: {dates}",
+        "possibleValues": "Mogelijke waarden voor dit veld"
+      },
       "ipvAnyNetworkField": {
         "manuallySelectedPrefix": "Manually selected prefix"
       },
@@ -346,6 +365,7 @@
       "endDate": "Einddatum",
       "note": "Notitie",
       "metadata": "Metadata",
+      "customerId": "Klant ID",
       "customerFullname": "Klant",
       "customerShortcode": "Klantafkorting",
       "actions": "Acties"