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

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import type { RuleGroupProps } from 'react-querybuilder';
+import { RuleGroupBodyComponents, RuleGroupHeaderComponents, useRuleGroup } from 'react-querybuilder';
+
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+import { getWfoStructuredSearchTableStyles } from '@/components/WfoTable/WfoStructuredSearchTable/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { WfoAddGroupAction } from './WfoAddGroupAction';
+import { WfoAddRuleAction } from './WfoAddRuleAction';
+import { WfoRemoveGroupAction } from './WfoRemoveGroupAction';
+
+export const WfoRuleGroup = (props: RuleGroupProps) => {
+  const ruleGroupProps = useRuleGroup(props);
+  const ruleId = ruleGroupProps.ruleGroup.id;
+
+  const {
+    ruleGroupContainerBlueStyles,
+    ruleGroupContainerWhiteStyles,
+    innerGroupContainerWhiteStyles,
+    innerGroupContainerBlueStyles,
+    ruleGroupBodyGridStyles,
+  } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+  const getGroupContainerStyles = () => {
+    if (ruleGroupProps.path.length % 2) {
+      return ruleId !== 'root' ? innerGroupContainerWhiteStyles : ruleGroupContainerWhiteStyles;
+    } else {
+      return ruleId !== 'root' ? innerGroupContainerBlueStyles : ruleGroupContainerBlueStyles;
+    }
+  };
+
+  const { addRule, path, schema, disabled, ruleGroup, addGroup } = ruleGroupProps;
+
+  return (
+    <EuiFlexGroup gutterSize={'none'} responsive={false} alignItems="center">
+      <EuiFlexItem>
+        <EuiFlexGroup direction="column" css={getGroupContainerStyles()}>
+          <EuiFlexItem>
+            <EuiFlexGroup gutterSize="none">
+              <RuleGroupHeaderComponents {...ruleGroupProps} />
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <div css={ruleGroupBodyGridStyles}>
+              <RuleGroupBodyComponents {...ruleGroupProps} />
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <WfoAddRuleAction
+              handleOnClick={addRule}
+              path={path}
+              level={path.length}
+              schema={schema}
+              disabled={disabled ?? false}
+              ruleOrGroup={ruleGroup}
+              rules={ruleGroup.rules}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <WfoAddGroupAction
+              handleOnClick={addGroup}
+              path={path}
+              level={path.length}
+              schema={schema}
+              disabled={disabled ?? false}
+              ruleOrGroup={ruleGroup}
+              rules={ruleGroup.rules}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      {ruleId !== 'root' && <WfoRemoveGroupAction onClick={ruleGroupProps.removeGroup} />}
+    </EuiFlexGroup>
+  );
+};

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

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiButtonIcon, EuiFieldSearch, EuiFlexItem, EuiFormRow } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+import { getFormFieldsBaseStyle } from '@/theme';
+
+export type SearchFieldWithActionsProps = {
+  queryText?: string;
+  onChangeQueryText: (queryText: string) => void;
+  onSearchQueryText: (queryText: 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,
+  onShowInformation,
+  onShowTableSettings,
+}: SearchFieldWithActionsProps) => {
+  const t = useTranslations('common');
+  const { formFieldBaseStyle } = useWithOrchestratorTheme(getFormFieldsBaseStyle);
+
+  return (
+    <>
+      <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}>
+        <EuiButtonIcon
+          onClick={onShowInformation}
+          iconSize={'l'}
+          iconType={'info'}
+          aria-label={t('searchModalTitle')}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon onClick={onShowTableSettings} iconSize={'l'} iconType={'gear'} aria-label={t('tableSettings')} />
+      </EuiFlexItem>
+    </>
+  );
+};

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

@@ -0,0 +1,326 @@
+import React, { useEffect, useState } from 'react';
+import type { RuleGroupType } from 'react-querybuilder';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect, EuiSpacer, EuiText } from '@elastic/eui';
+
+import {
+  DEFAULT_PAGE_SIZE,
+  DEFAULT_PAGE_SIZES,
+  TableColumnKeys,
+  TableSettingsColumnConfig,
+  TableSettingsConfig,
+  TableSettingsModal,
+  WfoDataSearch,
+  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 } from '@/hooks';
+import { WfoArrowsExpand } from '@/icons';
+import { WfoGraphqlError } from '@/rtk';
+import { FieldToOperatorMap, RetrieverType } from '@/types';
+import { getDefaultTableConfig } from '@/utils';
+
+import { ColumnType, WfoTable, WfoTableProps } from '../WfoTable';
+import { WfoFilterBuilder } from './WfoFilterBuilder';
+import { WfoSearchFieldWithActions } from './WfoSearchFieldWithActions';
+import { buildColumnFilter } from './utils';
+
+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;
+  // Resolves a column key to its search field path (e.g. "status" -> "subscription.status"), used
+  // when a column header search adds a condition to the filter query.
+  getColumnSearchFieldName?: (field: keyof T) => string;
+  onExportData?: () => void;
+  retrieverType: RetrieverType;
+  onUpdateRetrieverType: (newRetrieverType: RetrieverType) => void;
+  filterString?: string;
+  onUpdateFilterString: (filterString: string) => void;
+  isValidFilterString?: boolean;
+  queryBuilderRuleGroup?: RuleGroupType;
+  onUpdateQueryBuilder: (ruleGroup: RuleGroupType | false) => void;
+  handleSearch: (searchParams?: SearchParams) => void;
+  pageSize: number;
+  setPageSize: React.Dispatch<React.SetStateAction<number>>;
+  totalItems: number | false;
+  hasNextPage: boolean;
+  prefilledFieldOptions: FieldToOperatorMap;
+};
+
+export const WfoStructuredSearchTable = <T extends object>({
+  tableColumnConfig,
+  defaultHiddenColumns = [],
+  queryText,
+  localStorageKey,
+  exportDataIsLoading,
+  error,
+  onChangeQueryText,
+  onSearchQueryText,
+  onShowMore,
+  onExportData,
+  retrieverType,
+  onUpdateRetrieverType,
+  filterString,
+  onUpdateFilterString,
+  isValidFilterString,
+  queryBuilderRuleGroup,
+  onUpdateQueryBuilder,
+  onUpdateDataSorting,
+  getColumnSearchFieldName,
+  handleSearch,
+  pageSize,
+  setPageSize,
+  totalItems,
+  rowExpandingConfiguration,
+  dataSorting,
+  hasNextPage,
+  data,
+  isLoading,
+  prefilledFieldOptions,
+  ...tableProps
+}: WfoStructuredSearchTableProps<T>) => {
+  const { theme } = useOrchestratorTheme();
+
+  const [hiddenColumns, setHiddenColumns] = useState<TableColumnKeys<T>>(defaultHiddenColumns);
+  const [isFilterBuilderVisible, setIsFilterBuilderVisible] = useState(false);
+  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]);
+
+  useEffect(() => {
+    if (filterString) {
+      setIsFilterBuilderVisible(true);
+    }
+  }, [filterString]);
+
+  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);
+  };
+
+  const handleColumnFilterSearch = ({ field, searchText }: WfoDataSearch<T>) => {
+    const columnFilter = buildColumnFilter(field, searchText, filterString, getColumnSearchFieldName);
+    if (!columnFilter) {
+      return;
+    }
+    onUpdateFilterString(columnFilter.filterString);
+    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>}
+        <WfoSearchFieldWithActions
+          queryText={queryText}
+          onChangeQueryText={onChangeQueryText}
+          onSearchQueryText={onSearchQueryText}
+          onShowInformation={() => setShowInformationModal(true)}
+          onShowTableSettings={() => setShowTableSettingsModal(true)}
+        />
+      </EuiFlexGroup>
+
+      {isFilterBuilderVisible && (
+        <>
+          <EuiSpacer size="s" />
+          {filterBuilder}
+        </>
+      )}
+
+      {error && <WfoErrorWithMessage error={error} />}
+
+      <EuiSpacer size="m" />
+
+      <WfoTable<T>
+        columnConfig={tableColumnsWithControlColumns}
+        hiddenColumns={hiddenColumns}
+        rowExpandingConfiguration={rowExpandingConfiguration}
+        onUpdateDataSorting={onUpdateDataSorting}
+        onUpdateDataSearch={handleColumnFilterSearch}
+        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}
+          extraSettings={
+            <>
+              <EuiFormRow label={t('retrieval')} display="columnCompressed">
+                <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
+                />
+              </EuiFormRow>
+              {onExportData && (
+                <>
+                  <EuiSpacer size="m" />
+                  <EuiButton isLoading={exportDataIsLoading} onClick={() => onExportData()} fullWidth>
+                    {t('export')}
+                  </EuiButton>
+                </>
+              )}
+            </>
+          }
+        />
+      )}
+
+      {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';