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

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { CombinatorSelectorProps } from 'react-querybuilder';
+
+import { EuiButtonGroup } from '@elastic/eui';
+
+import { getWfoStructuredSearchTableStyles } from '@/components/WfoTable/WfoStructuredSearchTable/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+export const WfoCombinatorSelector = (props: CombinatorSelectorProps) => {
+  const { buttonGroupStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+  const options = props.options.map((option) => ({
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore This seems to be a typing error in the react-querybuilde library. Option.name does exist
+    id: option.name,
+    label: option.label,
+  }));
+
+  return (
+    <EuiButtonGroup
+      css={buttonGroupStyles}
+      legend="Combinator"
+      type="single"
+      options={options}
+      idSelected={props.value || options[0].id}
+      onChange={(id) => props.handleOnChange(id)}
+      buttonSize="m"
+      color="primary"
+    />
+  );
+};

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

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+import type { MatchingField } from '@/types';
+
+import { getWfoStructuredSearchTableStyles } from './styles';
+
+interface WfoExpandingSearchRowProps {
+  score?: number;
+  perfectMatch?: number;
+  matchingField?: MatchingField | null;
+}
+
+export const WfoExpandingSearchRow = ({ score, matchingField }: WfoExpandingSearchRowProps) => {
+  const { expandingSearchRowStyles, expandingRowBodyStyles } = useWithOrchestratorTheme(
+    getWfoStructuredSearchTableStyles,
+  );
+
+  if (!matchingField) return null;
+
+  const { path, text } = matchingField;
+
+  return (
+    <tr>
+      <td colSpan={999} css={expandingSearchRowStyles}>
+        <div css={expandingRowBodyStyles}>
+          <div>
+            <span>{path}</span> {text}
+          </div>
+          <span>•</span>
+          <div>
+            <span>score</span> {score !== undefined && `${(score * 100).toFixed(1)}%`}
+          </div>
+        </div>
+      </td>
+    </tr>
+  );
+};

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

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { FieldSelectorProps } from 'react-querybuilder';
+
+import { useTranslations } from 'next-intl';
+
+import type { EuiComboBoxOptionOption } from '@elastic/eui';
+import { EuiComboBox } from '@elastic/eui';
+
+import { usePathAutocomplete } from '@/hooks';
+import { EntityKind, PathInfo } from '@/types';
+
+export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: FieldSelectorProps) => {
+  const { field } = rule;
+  const [selectedValue, setSelectedValue] = useState<string>(field);
+  const t = useTranslations('search.page');
+  const getOption = (path: string) => ({
+    value: path,
+    label: path,
+  });
+  const getOptionsFromPathInfo = (pathInfos: PathInfo[]): EuiComboBoxOptionOption<string>[] => {
+    const pathOptions: EuiComboBoxOptionOption<string>[] = [];
+
+    pathInfos.forEach((pathInfo) => {
+      pathOptions.push(getOption(pathInfo.path));
+      // Adds more specific paths
+      pathInfo.availablePaths?.forEach((path) => {
+        pathOptions.push(getOption(path));
+      });
+    });
+    return (
+      pathOptions.length > 0 ? pathOptions
+      : selectedValue ? [getOption(selectedValue)]
+      : []
+    );
+  };
+
+  const {
+    paths,
+    loading: isLoading,
+    error: errorMessage,
+  } = usePathAutocomplete(selectedValue, EntityKind.SUBSCRIPTION);
+
+  const options = getOptionsFromPathInfo(paths);
+
+  const storeFieldOperators = (selectedValue: string) => {
+    const matchingPath =
+      paths.find((path) => path.path === selectedValue)
+      ?? paths.find((path) => path.availablePaths?.includes(selectedValue));
+
+    context?.onFieldSelected?.(selectedValue, matchingPath);
+  };
+
+  const handleFieldSelection = (selectedOptions: EuiComboBoxOptionOption<string>[]) => {
+    const selectedOption = selectedOptions[0];
+    const selectedValue = selectedOption?.value || '';
+    setSelectedValue(selectedValue);
+    storeFieldOperators(selectedValue);
+
+    handleOnChange(selectedValue);
+  };
+
+  return (
+    <EuiComboBox
+      placeholder={t('searchFieldsPlaceholder')}
+      options={options}
+      fullWidth={true}
+      selectedOptions={options.filter((option) => option.value === selectedValue)}
+      onChange={(selectedOptions) => {
+        handleFieldSelection(selectedOptions);
+      }}
+      onSearchChange={(inputValue) => {
+        if (inputValue.length > 0) {
+          setSelectedValue(inputValue);
+        }
+      }}
+      singleSelection={{ asPlainText: true }}
+      isLoading={isLoading}
+      isClearable
+      isInvalid={!!errorMessage}
+      isDisabled={disabled}
+      rowHeight={30}
+    />
+  );
+};

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

@@ -0,0 +1,189 @@
+import React, { useState } from 'react';
+import { FullOperator, QueryBuilder, type RuleGroupType } from 'react-querybuilder';
+import 'react-querybuilder/dist/query-builder.css';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiTextArea } from '@elastic/eui';
+
+import { SearchParams, WfoTextAnchor } from '@/components';
+import { WfoCombinatorSelector } from '@/components/WfoTable/WfoStructuredSearchTable/WfoCombinatorSelector';
+import { useWithOrchestratorTheme } from '@/hooks';
+import { OperatorDisplay, PathInfo } from '@/types';
+
+import { WfoFieldSelector } from './WfoFieldSelector';
+import { WfoOperatorSelector } from './WfoOperatorSelector';
+import { WfoRemoveRuleAction } from './WfoRemoveRuleAction';
+import { WfoRule } from './WfoRule';
+import { WfoRuleGroup } from './WfoRuleGroup';
+import { WfoValueEditor } from './WfoValueEditor';
+import { getWfoStructuredSearchTableStyles } from './styles';
+
+// Maps PathInfo operator names to react-querybuilder's native operator names,
+// which is what parseCEL produces and formatQuery(cel) expects.
+const SEARCH_OPERATOR_TO_RQB_OPERATOR_MAP: Record<string, string> = {
+  eq: '=',
+  neq: '!=',
+  lt: '<',
+  lte: '<=',
+  gt: '>',
+  gte: '>=',
+  between: 'between',
+  like: 'contains',
+};
+
+const OPERATOR_MAP: Record<string, OperatorDisplay> = {
+  eq: { symbol: '=', description: 'equals' },
+  neq: { symbol: '≠', description: 'not equals' },
+  lt: { symbol: '<', description: 'less than' },
+  lte: { symbol: '≤', description: 'less than or equal to' },
+  gt: { symbol: '>', description: 'greater than' },
+  gte: { symbol: '≥', description: 'greater than or equal to' },
+  between: { symbol: '⟷', description: 'between (range)' },
+  has_component: { symbol: '✓', description: 'has component' },
+  not_has_component: { symbol: '✗', description: 'does not have component' },
+  like: { symbol: '∋', description: 'contains' },
+};
+
+/* TODO: Add the missing operators
+['has_component', 'not_has_component'];
+ */
+type FieldPathInfoMap = Map<string, PathInfo>;
+
+interface WfoFilterBuilderProps {
+  filterString?: string;
+  onUpdateFilterString: (filterString: string) => void;
+  isValidFilterString?: boolean;
+  queryBuilderRuleGroup?: RuleGroupType;
+  onUpdateQueryBuilder: (ruleGroup: RuleGroupType | false) => void;
+  handleSearch: (searchParams?: SearchParams) => void;
+}
+
+const initialRuleGroup: RuleGroupType = {
+  id: 'root',
+  rules: [{ id: 'rule-0', field: '~', operator: '=', value: '' }],
+  combinator: 'and',
+};
+
+export const WfoFilterBuilder = ({
+  filterString,
+  onUpdateFilterString,
+  isValidFilterString = true,
+  queryBuilderRuleGroup = initialRuleGroup,
+  onUpdateQueryBuilder,
+  handleSearch,
+}: WfoFilterBuilderProps) => {
+  const getOperatorsFromPathInfo = (fieldInfo?: PathInfo): FullOperator[] => {
+    return (fieldInfo?.operators ?? []).map((operator) => {
+      const { symbol, description } = OPERATOR_MAP[operator] || { symbol: operator, description: operator };
+      const rqbOperator = SEARCH_OPERATOR_TO_RQB_OPERATOR_MAP[operator] ?? operator;
+      return { name: rqbOperator, label: `${symbol} ${description}`, value: rqbOperator };
+    });
+  };
+
+  const t = useTranslations('common');
+  const { queryBuilderContainerStyles, toggleButtonStyles, textAreaStyles } = useWithOrchestratorTheme(
+    getWfoStructuredSearchTableStyles,
+  );
+  const [isFilterBuilderVisible, setIsFilterBuilderVisible] = useState<boolean>(false);
+  const [fieldPathInfoMap, setFieldPathInfoMap] = useState<FieldPathInfoMap>(new Map());
+
+  const handleFieldSelected = (field: string, pathInfo: PathInfo | undefined) => {
+    if (pathInfo) {
+      setFieldPathInfoMap((previousMap) => {
+        return new Map(previousMap).set(field, pathInfo);
+      });
+    }
+  };
+
+  return (
+    <EuiFlexGroup css={queryBuilderContainerStyles}>
+      {(isFilterBuilderVisible && (
+        <EuiFlexGroup direction={'column'}>
+          <EuiFlexItem>
+            <QueryBuilder
+              query={queryBuilderRuleGroup}
+              onQueryChange={(ruleGroup: RuleGroupType) => {
+                onUpdateQueryBuilder(ruleGroup);
+              }}
+              context={{ onFieldSelected: handleFieldSelected, fieldPathInfoMap }}
+              getOperators={(field) => {
+                const pathInfo = fieldPathInfoMap.get(field);
+                return getOperatorsFromPathInfo(pathInfo);
+              }}
+              controlElements={{
+                fieldSelector: WfoFieldSelector,
+                operatorSelector: WfoOperatorSelector,
+                valueEditor: WfoValueEditor,
+                ruleGroup: WfoRuleGroup,
+                rule: WfoRule,
+                combinatorSelector: WfoCombinatorSelector,
+                addRuleAction: null,
+                addGroupAction: null,
+                removeGroupAction: null,
+                removeRuleAction: WfoRemoveRuleAction,
+              }}
+              addRuleToNewGroups
+              maxLevels={5}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiTextArea
+              css={textAreaStyles}
+              id={'searchbox-textarea'}
+              value={filterString}
+              onChange={(e) => {
+                const filterString = e.target.value;
+                onUpdateFilterString(filterString);
+              }}
+              fullWidth={true}
+              isClearable={true}
+              resize={'vertical'}
+              isInvalid={!isValidFilterString}
+            />
+          </EuiFlexItem>
+
+          <EuiFlexGroup direction={'rowReverse'} alignItems={'center'}>
+            <EuiButton
+              onClick={() => {
+                handleSearch();
+              }}
+              id={'button-apply-filter'}
+              data-test-id={'button-apply-filter'}
+              fill
+              type="submit"
+              aria-label={t('applyFilter')}
+              disabled={!isValidFilterString}
+            >
+              {t('applyFilter')}
+            </EuiButton>
+            <WfoTextAnchor
+              text={t('removeFilter')}
+              onClick={() => {
+                onUpdateQueryBuilder(false);
+                // we call with ruleGroup: false explictly to
+                // avoid state not having caught up yet when searching
+                handleSearch({ ruleGroup: false });
+                setIsFilterBuilderVisible(false);
+              }}
+            />
+          </EuiFlexGroup>
+        </EuiFlexGroup>
+      )) || (
+        <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>
+      )}
+    </EuiFlexGroup>
+  );
+};

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

@@ -0,0 +1,33 @@
+import React, { useEffect, useMemo } from 'react';
+import type { FullOperator, OperatorSelectorProps, OptionGroup } from 'react-querybuilder';
+
+import { EuiSelect } from '@elastic/eui';
+
+const isOptionGroup = (operator: FullOperator | OptionGroup<FullOperator>): operator is OptionGroup<FullOperator> =>
+  'options' in operator;
+
+export const WfoOperatorSelector = (props: OperatorSelectorProps) => {
+  const flatOptions = (props.options as Array<FullOperator | OptionGroup<FullOperator>>).flatMap((option) =>
+    isOptionGroup(option) ? option.options : [option],
+  );
+
+  const selectOptions = useMemo(
+    () => flatOptions.map((option) => ({ value: option.name, text: option.label })),
+    [flatOptions],
+  );
+
+  useEffect(() => {
+    if (props.options && !props.value && selectOptions.length > 0) {
+      props.handleOnChange(selectOptions[0].value);
+    }
+  }, [props, props.options, props.value, selectOptions]);
+
+  return (
+    <EuiSelect
+      options={selectOptions}
+      value={props.value}
+      onChange={(e) => props.handleOnChange(e.target.value)}
+      disabled={props.disabled}
+    />
+  );
+};

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

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+
+import { EuiFlexGroup } from '@elastic/eui';
+
+export interface WfoRangeElementProps {
+  handleOnChange: (value: string | number | undefined, rangeIndex?: number) => void;
+  value: string;
+  operator?: string;
+  rangeIndex?: number;
+}
+
+interface WfoRangeEditorProps {
+  handleOnChange: (value: string | number | undefined, rangeIndex?: number) => void;
+  operator: string;
+  value: string;
+  Element: React.ComponentType<WfoRangeElementProps>;
+}
+
+export const WfoRangeEditor = ({ handleOnChange, operator, Element, value: currentValue }: WfoRangeEditorProps) => {
+  const [currentOperator, setCurrentOperator] = useState(operator);
+  const startValue = currentValue ? currentValue?.toString().split(',') : [];
+  const [value, setValue] = useState<string[]>(startValue);
+
+  useEffect(() => {
+    if (operator !== currentOperator && (operator === 'between' || currentOperator === 'between')) {
+      setValue([]);
+      handleOnChange('');
+      setCurrentOperator(operator);
+    }
+  }, [currentOperator, handleOnChange, operator]);
+
+  const handleChange = (value: string | number | undefined, rangeIndex: number = 0) => {
+    if (operator === 'between') {
+      setValue((currentDates) => {
+        // remove value if set to undefined
+        if (value === null) {
+          return currentDates.filter((_, index) => index !== rangeIndex);
+        }
+        // add value at supplied index
+        currentDates[rangeIndex] = value as string;
+
+        // call the parent if 2 values are present
+        if (currentDates.length === 2) {
+          handleOnChange(`${currentDates[0]},${currentDates[1]}`);
+        }
+
+        return currentDates;
+      });
+    } else {
+      handleOnChange(value);
+    }
+  };
+
+  if (operator === 'between') {
+    return (
+      <EuiFlexGroup direction="row" gutterSize="s">
+        <Element handleOnChange={handleChange} rangeIndex={0} value={value[0]} />
+        <Element handleOnChange={handleChange} rangeIndex={1} value={value[1]} />
+      </EuiFlexGroup>
+    );
+  }
+
+  return <Element handleOnChange={handleOnChange} value={value[0]} />;
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiFlexItem } from '@elastic/eui';
+
+import { getWfoStructuredSearchTableStyles } from '@/components/WfoTable/WfoStructuredSearchTable/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
+import { useOrchestratorTheme } from '@/hooks';
+import { WfoTrashFilled } from '@/icons';
+
+export const WfoRemoveGroupAction = ({ onClick }: { onClick: () => void }) => {
+  const { removeGroupActionStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+  const { theme } = useOrchestratorTheme();
+  const t = useTranslations('search.page');
+  return (
+    <EuiFlexItem grow={0} css={removeGroupActionStyles} onClick={() => onClick()}>
+      <WfoTrashFilled color={theme.colors.textPrimary} aria-label={t('removeGroup')} />
+    </EuiFlexItem>
+  );
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ActionProps } from 'react-querybuilder';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiFlexItem } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '@/hooks';
+import { WfoXMarkSmall } from '@/icons/WfoXMarkSmall';
+
+export const WfoRemoveRuleAction = (props: ActionProps) => {
+  const { theme } = useOrchestratorTheme();
+
+  const t = useTranslations('search.page');
+  return (
+    <EuiFlexItem onClick={props.handleOnClick} css={{ cursor: 'pointer' }}>
+      <WfoXMarkSmall color={theme.colors.primary} aria-label={t('removeRule')} />
+    </EuiFlexItem>
+  );
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { RuleProps } from 'react-querybuilder';
+import { Rule } from 'react-querybuilder';
+
+import { getWfoStructuredSearchTableStyles } from '@/components/WfoTable/WfoStructuredSearchTable/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+export const WfoRule = (props: RuleProps) => {
+  const { ruleContainerStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+
+  return (
+    <div css={ruleContainerStyles}>
+      <Rule {...props} />
+    </div>
+  );
+};

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

@@ -0,0 +1,73 @@
+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,
+  } = 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'} alignItems="center">
+      <EuiFlexItem>
+        <EuiFlexGroup direction="column" gutterSize="s" css={getGroupContainerStyles()}>
+          <EuiFlexItem>
+            <EuiFlexGroup gutterSize="none">
+              <RuleGroupHeaderComponents {...ruleGroupProps} />
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <RuleGroupBodyComponents {...ruleGroupProps} />
+          </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>
+  );
+};