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

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

@@ -0,0 +1,323 @@
+import React, { useEffect, useState } from 'react';
+import type { RuleGroupType } from 'react-querybuilder';
+
+import { useTranslations } from 'next-intl';
+
+import {
+  EuiButton,
+  EuiButtonIcon,
+  EuiFieldSearch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiSelect,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+
+import {
+  DEFAULT_PAGE_SIZE,
+  DEFAULT_PAGE_SIZES,
+  TableColumnKeys,
+  TableSettingsColumnConfig,
+  TableSettingsConfig,
+  TableSettingsModal,
+  WfoDataSorting,
+  WfoErrorWithMessage,
+  WfoInformationModal,
+  WfoKeyValueTable,
+  WfoKeyValueTableDataType,
+  clearTableConfigFromLocalStorage,
+  setTableConfigToLocalStorage,
+} from '@/components';
+import { getRowDetailData } from '@/components/WfoTable/WfoAdvancedTable/getRowDetailData';
+import {
+  WfoTableControlColumnConfig,
+  WfoTableControlColumnConfigItem,
+  WfoTableDataColumnConfigItem,
+} from '@/components/WfoTable/WfoTable';
+import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
+import { WfoArrowsExpand } from '@/icons';
+import { WfoGraphqlError } from '@/rtk';
+import { getFormFieldsBaseStyle } from '@/theme';
+import { RetrieverType } from '@/types';
+import { getDefaultTableConfig } from '@/utils';
+
+import { ColumnType, WfoTable, WfoTableProps } from '../WfoTable';
+import { WfoFilterBuilder } from './WfoFilterBuilder';
+
+export type WfoStructuredSearchTableDataColumnConfigItem<
+  T extends object,
+  Property extends keyof T,
+> = WfoTableDataColumnConfigItem<T, Property> & {
+  renderDetails?: (cellValue: T[Property], row: T) => React.ReactNode;
+  clipboardText?: (cellValue: T[Property], row: T) => string;
+};
+export type WfoStructuredSearchTableDataColumnConfig<T extends object> = {
+  [Property in keyof T]: WfoStructuredSearchTableDataColumnConfigItem<T, Property> | WfoTableControlColumnConfigItem<T>;
+};
+export type WfoStructuredSearchTableColumnConfig<T extends object> = Partial<
+  WfoTableControlColumnConfig<T> | WfoStructuredSearchTableDataColumnConfig<T>
+>;
+export type SearchParams = {
+  queryText?: string | false;
+  retrieverType?: RetrieverType;
+  ruleGroup?: RuleGroupType | false;
+  limit?: number;
+  sortBy?: {
+    field: string;
+    sortOrder: string;
+  };
+};
+
+export type WfoStructuredSearchTableProps<T extends object> = Omit<
+  WfoTableProps<T>,
+  'columnConfig' | 'onUpdateDataSearch'
+> & {
+  tableColumnConfig: WfoStructuredSearchTableColumnConfig<T>;
+  rowExpandingConfiguration: WfoTableProps<T>['rowExpandingConfiguration'];
+  defaultHiddenColumns?: TableColumnKeys<T>;
+  queryText?: string;
+  localStorageKey: string;
+  exportDataIsLoading?: boolean;
+  error?: WfoGraphqlError[];
+  onChangeQueryText: (queryString: string) => void;
+  onSearchQueryText: (queryString: string) => void;
+  onShowMore: () => void;
+  onUpdateDataSorting: (updateSorting: WfoDataSorting<T>) => void;
+  onExportData?: () => void;
+  retrieverType: RetrieverType;
+  onUpdateRetrieverType: (newRetrieverType: RetrieverType) => void;
+  filterString?: string;
+  onUpdateFilterString: (filterString: string) => void;
+  isValidFilterString?: boolean;
+  queryBuilderRuleGroup?: RuleGroupType;
+  onUpdateQueryBuilder: (ruleGroup: RuleGroupType | false) => void;
+  handleSearch: () => void;
+  pageSize: number;
+  setPageSize: React.Dispatch<React.SetStateAction<number>>;
+  totalItems: number | false;
+  hasNextPage: boolean;
+};
+
+export const WfoStructuredSearchTable = <T extends object>({
+  tableColumnConfig,
+  defaultHiddenColumns = [],
+  queryText,
+  localStorageKey,
+  exportDataIsLoading,
+  error,
+  onChangeQueryText,
+  onSearchQueryText,
+  onShowMore,
+  onExportData,
+  retrieverType,
+  onUpdateRetrieverType,
+  filterString,
+  onUpdateFilterString,
+  isValidFilterString,
+  queryBuilderRuleGroup,
+  onUpdateQueryBuilder,
+  onUpdateDataSorting,
+  handleSearch,
+  pageSize,
+  setPageSize,
+  totalItems,
+  rowExpandingConfiguration,
+  dataSorting,
+  hasNextPage,
+  data,
+  isLoading,
+  ...tableProps
+}: WfoStructuredSearchTableProps<T>) => {
+  const { theme } = useOrchestratorTheme();
+  const { formFieldBaseStyle } = useWithOrchestratorTheme(getFormFieldsBaseStyle);
+
+  const [hiddenColumns, setHiddenColumns] = useState<TableColumnKeys<T>>(defaultHiddenColumns);
+  const [showTableSettingsModal, setShowTableSettingsModal] = useState(false);
+  const [rowDetailModalData, setRowDetailModalData] = useState<T | undefined>(undefined);
+  const [showInformationModal, setShowInformationModal] = useState(false);
+  const t = useTranslations('common');
+
+  useEffect(() => {
+    if (defaultHiddenColumns) {
+      setHiddenColumns(defaultHiddenColumns);
+    }
+  }, [defaultHiddenColumns]);
+
+  const detailsIconColumn: WfoStructuredSearchTableColumnConfig<T> = {
+    viewDetails: {
+      columnType: ColumnType.CONTROL,
+      width: '36px',
+      renderControl: (row) => (
+        <EuiFlexItem css={{ cursor: 'pointer' }} onClick={() => setRowDetailModalData(row)}>
+          <WfoArrowsExpand color={theme.colors.borderBasePlain} />
+        </EuiFlexItem>
+      ),
+    },
+  };
+
+  const tableColumnsWithControlColumns: WfoStructuredSearchTableColumnConfig<T> = {
+    ...detailsIconColumn,
+    ...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 rowDetailData: WfoKeyValueTableDataType[] | undefined =
+    rowDetailModalData && getRowDetailData(rowDetailModalData, tableColumnConfig);
+
+  const handleUpdateTableConfig = (updatedTableConfig: TableSettingsConfig<T>) => {
+    const updatedHiddenColumns = updatedTableConfig.columns
+      .filter((column) => !column.isVisible)
+      .map((hiddenColumn) => hiddenColumn.field);
+    setHiddenColumns(updatedHiddenColumns);
+    setShowTableSettingsModal(false);
+    setPageSize(updatedTableConfig.selectedPageSize);
+    setTableConfigToLocalStorage(localStorageKey, {
+      hiddenColumns: updatedHiddenColumns,
+      selectedPageSize: updatedTableConfig.selectedPageSize,
+    });
+  };
+
+  const handleResetToDefaults = () => {
+    const defaultTableConfig = getDefaultTableConfig<T>(localStorageKey);
+    setHiddenColumns(defaultTableConfig.hiddenColumns);
+    setPageSize(defaultTableConfig.selectedPageSize);
+    setShowTableSettingsModal(false);
+    clearTableConfigFromLocalStorage(localStorageKey);
+  };
+
+  return (
+    <>
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem>
+          <WfoFilterBuilder
+            filterString={filterString}
+            onUpdateFilterString={onUpdateFilterString}
+            isValidFilterString={isValidFilterString}
+            queryBuilderRuleGroup={queryBuilderRuleGroup}
+            onUpdateQueryBuilder={onUpdateQueryBuilder}
+            handleSearch={handleSearch}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem>
+          <EuiFormRow fullWidth>
+            <EuiFieldSearch
+              css={formFieldBaseStyle}
+              value={queryText}
+              placeholder={`${t('search')}...`}
+              onChange={(e) => onChangeQueryText(e.target.value)}
+              onSearch={(queryText) => onSearchQueryText(queryText)}
+              fullWidth
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiSelect
+            options={[
+              {
+                value: RetrieverType.Auto,
+                text: t('retrieverAuto'),
+              },
+              {
+                value: RetrieverType.Fuzzy,
+                text: t('retrieverFuzzy'),
+              },
+              {
+                value: RetrieverType.Semantic,
+                text: t('retrieverSemantic'),
+              },
+              {
+                value: RetrieverType.Hybrid,
+                text: t('retrieverHybrid'),
+              },
+            ]}
+            value={retrieverType}
+            onChange={(e) => onUpdateRetrieverType(e.target.value as RetrieverType)}
+            compressed
+            prepend={t('retrieval')}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            onClick={() => setShowInformationModal(true)}
+            iconSize={'l'}
+            iconType={'info'}
+            aria-label={t('searchModalTitle')}
+          />
+        </EuiFlexItem>
+        <EuiButton onClick={() => setShowTableSettingsModal(true)}>{t('editColumns')}</EuiButton>
+        {onExportData && (
+          <EuiButton isLoading={exportDataIsLoading} onClick={() => onExportData()}>
+            {t('export')}
+          </EuiButton>
+        )}
+      </EuiFlexGroup>
+
+      {error && <WfoErrorWithMessage error={error} />}
+
+      <EuiSpacer size="m" />
+
+      <WfoTable<T>
+        columnConfig={tableColumnsWithControlColumns}
+        hiddenColumns={hiddenColumns}
+        rowExpandingConfiguration={rowExpandingConfiguration}
+        onUpdateDataSorting={onUpdateDataSorting}
+        dataSorting={dataSorting}
+        data={data}
+        isLoading={isLoading}
+        {...tableProps}
+      />
+
+      {totalItems && (
+        <EuiFlexGroup alignItems={'center'} justifyContent={'center'} css={{ padding: theme.base }}>
+          <EuiButton onClick={() => onShowMore()} disabled={!hasNextPage || isLoading}>
+            {t('loadMore')}
+          </EuiButton>
+          <div>{`${data.length}/${totalItems} records`}</div>
+        </EuiFlexGroup>
+      )}
+
+      {showTableSettingsModal && (
+        <TableSettingsModal
+          tableConfig={{
+            columns: tableSettingsColumns,
+            selectedPageSize: pageSize ?? DEFAULT_PAGE_SIZE,
+          }}
+          pageSizeOptions={DEFAULT_PAGE_SIZES}
+          onClose={() => setShowTableSettingsModal(false)}
+          onUpdateTableConfig={handleUpdateTableConfig}
+          onResetToDefaults={handleResetToDefaults}
+        />
+      )}
+
+      {showInformationModal && (
+        <WfoInformationModal title={t('searchModalTitle')} onClose={() => setShowInformationModal(false)}>
+          <EuiText>
+            <p>TODO: Info about searching</p>
+          </EuiText>
+        </WfoInformationModal>
+      )}
+
+      {rowDetailData && (
+        <WfoInformationModal title={'TODO: Information modal title'} onClose={() => setRowDetailModalData(undefined)}>
+          <WfoKeyValueTable keyValues={rowDetailData} showCopyToClipboardIcon />
+        </WfoInformationModal>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,159 @@
+import React, { type KeyboardEventHandler, useEffect, useState } from 'react';
+import type { ChangeEventHandler } from 'react';
+import type { ValueEditorProps } from 'react-querybuilder';
+
+import moment from 'moment';
+import { useTranslations } from 'next-intl';
+
+import { EuiButtonGroup, EuiDatePicker, EuiFieldNumber, EuiFieldText } from '@elastic/eui';
+
+import { getWfoStructuredSearchTableStyles } from '@/components/WfoTable/WfoStructuredSearchTable/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { WfoRangeEditor, WfoRangeElementProps } from './WfoRangeEditor';
+
+enum UiFieldType {
+  text = 'text',
+  number = 'number',
+  boolean = 'boolean',
+  datetime = 'datetime',
+}
+
+export type HandleOnChange<T> = (value: T | undefined, rangeIndex?: number) => void;
+
+export interface EditorProps<T> {
+  handleOnChange: HandleOnChange<T>;
+  value: T;
+  operator?: string;
+}
+
+const BooleanEditor = ({ handleOnChange, value: currentValue = true }: EditorProps<boolean>) => {
+  const [value, setValue] = useState<string>(currentValue.toString());
+
+  useEffect(() => {
+    handleOnChange(true);
+    // Sets the initial value to true so we allow empty dep array here
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const { buttonGroupStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+  const options = [
+    {
+      id: 'true',
+      label: 'True',
+    },
+    {
+      id: 'false',
+      label: 'False',
+    },
+  ];
+
+  return (
+    <EuiButtonGroup
+      css={buttonGroupStyles}
+      legend="Combinator"
+      type="single"
+      options={options}
+      idSelected={value}
+      onChange={(id) => {
+        setValue(id);
+        handleOnChange(id === 'true');
+      }}
+      buttonSize="m"
+      color="primary"
+    />
+  );
+};
+
+const TextEditor = ({ handleOnChange, value: currentValue = '' }: EditorProps<string>) => {
+  const [value, setValue] = useState<string>(currentValue);
+
+  const handleTextChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setValue(e.target.value || '');
+  };
+
+  const handleOnBlur = () => {
+    handleOnChange(value);
+  };
+
+  const handleOnKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
+    if (e.key === 'Enter') {
+      e.currentTarget.blur();
+    }
+  };
+
+  return <EuiFieldText value={value} onChange={handleTextChange} onBlur={handleOnBlur} onKeyDown={handleOnKeyDown} />;
+};
+
+const NumberEditor = ({ handleOnChange, rangeIndex, value: currentValue }: WfoRangeElementProps) => {
+  const [value, setValue] = useState<string>(currentValue?.toString() || '');
+
+  const handleNumberChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setValue(e.target.value || '');
+  };
+
+  const handleOnBlur = () => {
+    const numberValue = parseFloat(value);
+    handleOnChange(numberValue, rangeIndex);
+  };
+
+  const handleOnKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
+    if (e.key === 'Enter') {
+      e.currentTarget.blur();
+    }
+  };
+
+  return (
+    <EuiFieldNumber
+      value={value || undefined}
+      onChange={handleNumberChange}
+      onBlur={handleOnBlur}
+      onKeyDown={handleOnKeyDown}
+    />
+  );
+};
+
+const DatePicker = ({ handleOnChange, rangeIndex, value: currentValue }: WfoRangeElementProps) => {
+  const [date, setDate] = useState<string>(currentValue || '');
+  const t = useTranslations('search.page');
+
+  return (
+    <EuiDatePicker
+      selected={date && date !== '' ? moment.utc(date) : undefined}
+      onChange={(date) => {
+        const utcDate = date ? moment.utc(date) : undefined;
+        setDate(utcDate?.toISOString() || '');
+        handleOnChange(utcDate?.toISOString(), rangeIndex);
+      }}
+      id={rangeIndex ? `date-range-${rangeIndex}` : 'date-range'}
+      css={{ width: '330px' }}
+      showTimeSelect
+      dateFormat="yyyy-MM-dd HH:mm"
+      timeFormat="HH:mm"
+      placeholderText={t('selectDateAndTime')}
+      locale="nl"
+      shouldCloseOnSelect={true}
+    />
+  );
+};
+
+export const WfoValueEditor = ({ field: fieldName, context, handleOnChange, operator, value }: 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} />;
+  }
+
+  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} />;
+  }
+
+  return <TextEditor handleOnChange={handleOnChange} value={value} />;
+};

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

@@ -0,0 +1,2 @@
+export * from './WfoStructuredSearchTable';
+export * from './WfoExpandingSearchRow';

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

@@ -0,0 +1,146 @@
+import { css } from '@emotion/react';
+
+import { WfoThemeHelpers } from '@/hooks';
+
+export const getWfoStructuredSearchTableStyles = ({ theme, toSecondaryColor }: WfoThemeHelpers) => {
+  const queryBuilderContainerStyles = css({
+    backgroundColor: theme.colors.backgroundBaseSubdued,
+    padding: theme.base / 2,
+    marginBottom: theme.base,
+    border: `thin solid ${theme.colors.borderBasePlain}`,
+    borderRadius: theme.border.radius.small,
+  });
+  const toggleButtonStyles = css({
+    backgroundColor: 'primary',
+    padding: theme.base * 0.75,
+    marginLeft: theme.base,
+  });
+
+  const textAreaStyles = css({
+    width: '100%',
+    maxInlineSize: '100%',
+    height: '42px',
+    border: `this solid ${toSecondaryColor(theme.colors.borderBasePlain)}`,
+  });
+
+  const buttonGroupStyles = css({
+    backgroundColor: theme.colors.textGhost,
+    height: '100%',
+    borderRadius: theme.border.radius.small,
+  });
+
+  const ruleContainerStyles = css({
+    '& > .rule': {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: theme.base / 2,
+      alignItems: 'center',
+      marginBottom: theme.base / 4,
+      marginTop: theme.base / 4,
+    },
+  });
+
+  const ruleGroupContainerBase = {
+    padding: theme.base / 2,
+    marginTop: theme.base / 4,
+  };
+
+  const ruleGroupContainerBlueStyles = css({
+    ...ruleGroupContainerBase,
+    borderRadius: theme.border.radius.small,
+    backgroundColor: '#E9F1F9',
+  });
+
+  const ruleGroupContainerWhiteStyles = css({
+    ...ruleGroupContainerBase,
+    borderRadius: theme.border.radius.small,
+    backgroundColor: theme.colors.backgroundBasePlain,
+  });
+
+  const innerGroupContainerWhiteStyles = css({
+    ...ruleGroupContainerBase,
+    borderBottomLeftRadius: theme.border.radius.small,
+    borderTopLeftRadius: theme.border.radius.small,
+    backgroundColor: theme.colors.backgroundBasePlain,
+  });
+
+  const innerGroupContainerBlueStyles = css({
+    ...ruleGroupContainerBase,
+    borderBottomLeftRadius: theme.border.radius.small,
+    borderTopLeftRadius: theme.border.radius.small,
+    backgroundColor: '#E9F1F9',
+  });
+
+  const removeGroupActionStyles = css({
+    backgroundColor: theme.colors.backgroundLightPrimary,
+    width: '40px',
+    marginTop: theme.base / 4,
+    height: 'stretch',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomRightRadius: theme.border.radius.small,
+    borderTopRightRadius: theme.border.radius.small,
+    cursor: 'pointer',
+  });
+
+  const expandingSearchRowStyles = css({
+    padding: theme.base / 2,
+    height: theme.base * 2,
+    borderRadius: theme.border.radius.medium,
+    border: 'thin solid FEF7E0',
+    backgroundColor: '#FEF7E0',
+  });
+  const expandingRowBodyStyles = css({
+    display: 'flex',
+    gap: theme.base,
+    fontWeight: theme.font.weight.bold,
+    span: {
+      fontWeight: 'bold',
+    },
+  });
+
+  const addRulePlusStyles = css({
+    fontSize: theme.size.l,
+  });
+
+  const addRuleContainerStyles = css({
+    color: theme.colors.primary,
+    size: theme.size.m,
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: theme.base / 2,
+    alignSelf: 'end',
+    cursor: 'pointer',
+    marginRight: theme.base / 2,
+  });
+
+  const addGroupStyles = css({
+    border: `thin dashed ${theme.colors.backgroundFilledPrimary}`,
+    borderRadius: theme.border.radius.medium,
+    alignItems: 'center',
+    padding: theme.base,
+    color: theme.colors.primary,
+    justifyContent: 'center',
+    flexDirection: 'row',
+    cursor: 'pointer',
+  });
+
+  return {
+    toggleButtonStyles,
+    queryBuilderContainerStyles,
+    textAreaStyles,
+    buttonGroupStyles,
+    ruleContainerStyles,
+    ruleGroupContainerBlueStyles,
+    ruleGroupContainerWhiteStyles,
+    innerGroupContainerWhiteStyles,
+    innerGroupContainerBlueStyles,
+    removeGroupActionStyles,
+    expandingSearchRowStyles,
+    expandingRowBodyStyles,
+    addRulePlusStyles,
+    addRuleContainerStyles,
+    addGroupStyles,
+  };
+};

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import type { FC } from 'react';
 import Draggable from 'react-draggable';
 import type { DraggableEventHandler } from 'react-draggable';
@@ -17,6 +17,7 @@ interface WfoDragHandlerProps {
 }
 
 export const WfoDragHandler: FC<WfoDragHandlerProps> = ({ headerRowRef, fieldName, onUpdateColumWidth }) => {
+  const nodeRef = useRef(null);
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [isDragging, setIsDragging] = useState(false);
   const { dragAndDropStyle } = useWithOrchestratorTheme(getWfoTableStyles);
@@ -66,8 +67,9 @@ export const WfoDragHandler: FC<WfoDragHandlerProps> = ({ headerRowRef, fieldNam
         onDrag={onDrag}
         bounds={bounds}
         onStop={onStop}
+        nodeRef={nodeRef}
       >
-        <div css={dragAndDropStyle} />
+        <div css={dragAndDropStyle} ref={nodeRef} />
       </Draggable>
     </div>
   );

package/src/components/WfoTable/index.ts

@@ -1,18 +1,14 @@
-export * from './WfoTableSettingsModal';
-
 export * from './utils/columns';
 export * from './utils/constants';
-
 export * from './utils/tableConfigPersistence';
 export * from './utils/tableUtils';
-
+export * from './WfoTableSettingsModal';
 export * from './WfoStatusColorField';
 export * from './WfoTableWithFilter';
-
 export * from './WfoSortButtons';
 export * from './WfoFirstPartUUID';
 export * from './WfoInlineJson';
 export * from './WfoRowContextMenu';
-
 export * from './WfoAdvancedTable';
 export * from './WfoTable';
+export * from './WfoStructuredSearchTable';