@orchestrator-ui/orchestrator-ui-components 8.6.0 → 8.7.1

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

@@ -13,7 +13,8 @@ import { WfoRemoveGroupAction } from './WfoRemoveGroupAction';
 
 export const WfoRuleGroup = (props: RuleGroupProps) => {
   const ruleGroupProps = useRuleGroup(props);
-  const ruleId = ruleGroupProps.ruleGroup.id;
+  const rulePath = ruleGroupProps.path;
+  const isRootGroup: boolean = !rulePath || rulePath.length === 0;
 
   const {
     ruleGroupContainerBlueStyles,
@@ -24,9 +25,9 @@ export const WfoRuleGroup = (props: RuleGroupProps) => {
   } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
   const getGroupContainerStyles = () => {
     if (ruleGroupProps.path.length % 2) {
-      return ruleId !== 'root' ? innerGroupContainerWhiteStyles : ruleGroupContainerWhiteStyles;
+      return !isRootGroup ? innerGroupContainerWhiteStyles : ruleGroupContainerWhiteStyles;
     } else {
-      return ruleId !== 'root' ? innerGroupContainerBlueStyles : ruleGroupContainerBlueStyles;
+      return !isRootGroup ? innerGroupContainerBlueStyles : ruleGroupContainerBlueStyles;
     }
   };
 
@@ -70,7 +71,7 @@ export const WfoRuleGroup = (props: RuleGroupProps) => {
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
-      {ruleId !== 'root' && <WfoRemoveGroupAction onClick={ruleGroupProps.removeGroup} />}
+      {!isRootGroup && <WfoRemoveGroupAction onClick={ruleGroupProps.removeGroup} />}
     </EuiFlexGroup>
   );
 };

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

@@ -9,7 +9,6 @@ import {
   DEFAULT_PAGE_SIZE,
   DEFAULT_PAGE_SIZES,
   TableColumnKeys,
-  TableSettingsColumnConfig,
   TableSettingsConfig,
   TableSettingsModal,
   WfoDataSearch,
@@ -19,6 +18,7 @@ import {
   WfoKeyValueTable,
   WfoKeyValueTableDataType,
   clearTableConfigFromLocalStorage,
+  getTableSettingsColumns,
   setTableConfigToLocalStorage,
 } from '@/components';
 import { getRowDetailData } from '@/components/WfoTable/WfoAdvancedTable/getRowDetailData';
@@ -27,7 +27,7 @@ import {
   WfoTableControlColumnConfigItem,
   WfoTableDataColumnConfigItem,
 } from '@/components/WfoTable/WfoTable';
-import { useOrchestratorTheme } from '@/hooks';
+import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { WfoArrowsExpand } from '@/icons';
 import { WfoGraphqlError } from '@/rtk';
 import { FieldToOperatorMap, RetrieverType } from '@/types';
@@ -36,6 +36,7 @@ import { getDefaultTableConfig } from '@/utils';
 import { ColumnType, WfoTable, WfoTableProps } from '../WfoTable';
 import { WfoFilterBuilder } from './WfoFilterBuilder';
 import { WfoSearchFieldWithActions } from './WfoSearchFieldWithActions';
+import { getWfoStructuredSearchTableStyles } from './styles';
 import { buildColumnFilter } from './utils';
 
 export type WfoStructuredSearchTableDataColumnConfigItem<
@@ -129,7 +130,7 @@ export const WfoStructuredSearchTable = <T extends object>({
   ...tableProps
 }: WfoStructuredSearchTableProps<T>) => {
   const { theme } = useOrchestratorTheme();
-
+  const { toggleButtonStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
   const [hiddenColumns, setHiddenColumns] = useState<TableColumnKeys<T>>(defaultHiddenColumns);
   const [isFilterBuilderVisible, setIsFilterBuilderVisible] = useState(false);
   const [showTableSettingsModal, setShowTableSettingsModal] = useState(false);
@@ -166,17 +167,7 @@ export const WfoStructuredSearchTable = <T extends object>({
     ...tableColumnConfig,
   };
 
-  const tableSettingsColumns: TableSettingsColumnConfig<T>[] = Object.entries(tableColumnConfig).map(
-    ([key, { label }]): TableSettingsColumnConfig<T> => {
-      const field = key as keyof T;
-
-      return {
-        field,
-        name: label,
-        isVisible: hiddenColumns.indexOf(field) === -1,
-      };
-    },
-  );
+  const tableSettingsColumns = getTableSettingsColumns(tableColumnConfig, hiddenColumns);
 
   const rowDetailData: WfoKeyValueTableDataType[] | undefined =
     rowDetailModalData && getRowDetailData(rowDetailModalData, tableColumnConfig);
@@ -211,24 +202,26 @@ export const WfoStructuredSearchTable = <T extends object>({
     handleSearch({ ruleGroup: columnFilter.ruleGroup });
   };
 
-  const filterBuilder = (
-    <WfoFilterBuilder
-      filterString={filterString}
-      onUpdateFilterString={onUpdateFilterString}
-      isValidFilterString={isValidFilterString}
-      queryBuilderRuleGroup={queryBuilderRuleGroup}
-      onUpdateQueryBuilder={onUpdateQueryBuilder}
-      handleSearch={handleSearch}
-      isFilterBuilderVisible={isFilterBuilderVisible}
-      onToggleFilterBuilder={setIsFilterBuilderVisible}
-      prefilledFieldOptions={prefilledFieldOptions}
-    />
-  );
-
   return (
     <>
       <EuiFlexGroup alignItems="center" gutterSize="s">
-        {!isFilterBuilderVisible && <EuiFlexItem grow={false}>{filterBuilder}</EuiFlexItem>}
+        {!isFilterBuilderVisible && (
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              css={toggleButtonStyles}
+              onClick={() => setIsFilterBuilderVisible(true)}
+              id={'button-toggle-filter-builder'}
+              data-test-id={'button-toggle-filter-builder'}
+              fill
+              type="submit"
+              iconType="filter"
+              iconSide="left"
+              aria-label={t('createFilter')}
+            >
+              {t('createFilter')}
+            </EuiButton>
+          </EuiFlexItem>
+        )}
         <WfoSearchFieldWithActions
           queryText={queryText}
           onChangeQueryText={onChangeQueryText}
@@ -241,7 +234,16 @@ export const WfoStructuredSearchTable = <T extends object>({
       {isFilterBuilderVisible && (
         <>
           <EuiSpacer size="s" />
-          {filterBuilder}
+          <WfoFilterBuilder
+            filterString={filterString}
+            onUpdateFilterString={onUpdateFilterString}
+            isValidFilterString={isValidFilterString}
+            queryBuilderRuleGroup={queryBuilderRuleGroup}
+            onUpdateQueryBuilder={onUpdateQueryBuilder}
+            handleSearch={handleSearch}
+            onToggleFilterBuilder={setIsFilterBuilderVisible}
+            prefilledFieldOptions={prefilledFieldOptions}
+          />
         </>
       )}
 

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

@@ -137,23 +137,53 @@ const DatePicker = ({ handleOnChange, rangeIndex, value: currentValue }: WfoRang
   );
 };
 
-export const WfoValueEditor = ({ field: fieldName, context, handleOnChange, operator, value }: ValueEditorProps) => {
+export const WfoValueEditor = ({
+  field: fieldName,
+  context,
+  handleOnChange,
+  operator,
+  value,
+  className,
+}: ValueEditorProps) => {
   const fieldPathInfoMap = context?.fieldPathInfoMap;
 
   const fieldInfo = fieldPathInfoMap && fieldPathInfoMap.has(fieldName) ? fieldPathInfoMap.get(fieldName) : undefined;
   const uiFieldType = fieldInfo?.ui_types[0] || UiFieldType.text;
 
-  if (uiFieldType === UiFieldType.boolean) {
-    return <BooleanEditor handleOnChange={handleOnChange} value={value} />;
-  }
+  const getEditor = () => {
+    if (uiFieldType === UiFieldType.boolean) {
+      return <BooleanEditor handleOnChange={handleOnChange} value={value} />;
+    }
 
-  if (uiFieldType === UiFieldType.datetime) {
-    return <WfoRangeEditor handleOnChange={handleOnChange} operator={operator} Element={DatePicker} value={value} />;
-  }
+    if (uiFieldType === UiFieldType.datetime) {
+      return <WfoRangeEditor handleOnChange={handleOnChange} operator={operator} Element={DatePicker} value={value} />;
+    }
 
-  if (uiFieldType === UiFieldType.number) {
-    return <WfoRangeEditor handleOnChange={handleOnChange} operator={operator} Element={NumberEditor} value={value} />;
-  }
+    if (uiFieldType === UiFieldType.number) {
+      return (
+        <WfoRangeEditor handleOnChange={handleOnChange} operator={operator} Element={NumberEditor} value={value} />
+      );
+    }
+
+    return <TextEditor handleOnChange={handleOnChange} value={value} />;
+  };
 
-  return <TextEditor handleOnChange={handleOnChange} value={value} />;
+  const handleWrapperKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
+    if (event.key !== 'Enter') return;
+    // Restrict to the editor inputs: the editors' own Enter handlers have already run
+    // (bubble phase) and committed the value via blur, so the search sees it. Enter on
+    // the boolean buttons means "select" — its click fires only after this keydown, so
+    // searching there would use the pre-toggle value.
+    if (!(event.target instanceof HTMLInputElement)) return;
+    context?.onValueEditorEnter?.();
+  };
+
+  // react-querybuilder delivers the standard `rule-value` class via this prop; the wrapper
+  // makes it queryable in the DOM (WfoFieldSelector relies on it to move focus here).
+  // `display: contents` keeps the children direct participants in the rule's flex row.
+  return (
+    <div className={className} style={{ display: 'contents' }} onKeyDown={handleWrapperKeyDown}>
+      {getEditor()}
+    </div>
+  );
 };

package/src/components/WfoTable/WfoStructuredSearchTable/styles.ts

@@ -107,11 +107,12 @@ export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) =>
   });
   const expandingRowBodyStyles = css({
     display: 'flex',
-    gap: theme.base,
-    fontWeight: theme.font.weight.bold,
-    span: {
-      fontWeight: 'bold',
-    },
+    justifyContent: 'space-between',
+    // Size to the visible scroll viewport (minus the td padding) instead of
+    // the full table width, and keep it pinned there on horizontal scroll
+    position: 'sticky',
+    left: theme.base / 2,
+    width: `calc(100cqw - ${theme.base}px)`,
   });
 
   const addRulePlusStyles = css({
@@ -161,6 +162,19 @@ export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) =>
     },
   });
 
+  const hideExpandedRowStyle = css({
+    display: 'none',
+  });
+  const dotStyles = css({
+    padding: theme.base / 4,
+  });
+
+  const expandingRowFieldStyles = css({
+    display: 'flex',
+    padding: theme.base / 4,
+    alignItems: 'center',
+  });
+
   return {
     toggleButtonStyles,
     queryBuilderContainerStyles,
@@ -178,5 +192,8 @@ export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) =>
     addGroupStyles,
     inlineCombinatorStyles,
     ruleGroupBodyGridStyles,
+    hideExpandedRowStyle,
+    expandingRowFieldStyles,
+    dotStyles,
   };
 };

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

@@ -82,6 +82,7 @@ export type WfoTableProps<T extends object> = {
   rowExpandingConfiguration?: {
     uniqueRowId: keyof WfoTableColumnConfig<T>;
     uniqueRowIdToExpandedRowMap: Record<string, ReactNode>;
+    shouldOnlyShowOnHover?: boolean;
   };
   pagination?: Pagination;
   overrideHeader?: (

package/src/components/WfoTable/WfoTable/WfoTableDataRows.tsx

@@ -27,8 +27,15 @@ export const WfoTableDataRows = <T extends object>({
   onRowClick,
   className,
 }: WfoTableDataRowsProps<T>) => {
-  const { cellStyle, cellContentStyle, rowStyle, dataRowStyle, clickableStyle, setWidth } =
-    useWithOrchestratorTheme(getWfoTableStyles);
+  const {
+    cellStyle,
+    cellContentStyle,
+    rowStyle,
+    dataRowStyle,
+    clickableStyle,
+    setWidth,
+    toggleExpandedRowOnHoverStyle,
+  } = useWithOrchestratorTheme(getWfoTableStyles);
 
   const sortedVisibleColumns = getSortedVisibleColumns(columnConfig, columnOrder, hiddenColumns);
 
@@ -37,8 +44,13 @@ export const WfoTableDataRows = <T extends object>({
       {data.map((row, index) => (
         <Fragment key={`table-data-row-${index}`}>
           <tr
-            className={`${className} ${DATA_ROW_CLASS}`}
-            css={[rowStyle, dataRowStyle, onRowClick && clickableStyle]}
+            className={className ? `${className} ${DATA_ROW_CLASS}` : DATA_ROW_CLASS}
+            css={[
+              rowStyle,
+              dataRowStyle,
+              onRowClick && clickableStyle,
+              rowExpandingConfiguration?.shouldOnlyShowOnHover && toggleExpandedRowOnHoverStyle,
+            ]}
             onClick={() => onRowClick?.(row)}
           >
             {sortedVisibleColumns.map(([key, columnConfig]) => {

package/src/components/WfoTable/WfoTable/styles.ts

@@ -31,6 +31,9 @@ export const getWfoTableStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers)
 
   const tableContainerStyle = css({
     overflowX: 'auto',
+    // Query container so descendants (e.g. expanded rows) can size to the
+    // visible table width with cqw units instead of the full table width
+    containerType: 'inline-size',
   });
 
   const tableStyle = css({
@@ -157,6 +160,10 @@ export const getWfoTableStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers)
     '.eui-xScroll': { display: 'flex', justifyContent: 'flex-start' },
   });
 
+  const toggleExpandedRowOnHoverStyle = css({
+    '&:hover + tr, &:focus-within + tr': { display: 'table-row' },
+  });
+
   return {
     tableContainerStyle,
     tableStyle,
@@ -174,5 +181,6 @@ export const getWfoTableStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers)
     dragAndDropStyle,
     paginationStyle,
     setWidth,
+    toggleExpandedRowOnHoverStyle,
   };
 };

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/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/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.6.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.7.1';

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';
+  }
+};