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

package/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionsMenuItem.tsx

@@ -19,6 +19,7 @@ interface MenuItemProps {
   setPopover: (isOpen: boolean) => void;
   onClick: () => void;
   isLoading?: boolean;
+  subscriptionPath?: string;
 }
 
 export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
@@ -27,6 +28,7 @@ export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
   target,
   setPopover,
   isLoading = false,
+  subscriptionPath,
 }) => {
   const { linkMenuItemStyle, tooltipMenuItemStyle, disabledIconStyle, iconStyle, secondaryIconStyle } =
     useWithOrchestratorTheme(getSubscriptionActionStyles);
@@ -102,6 +104,7 @@ export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
           <WfoSubscriptionActionExpandableMenuItem
             subscriptionAction={subscriptionAction}
             onClickLockedRelation={() => setPopover(false)}
+            subscriptionPath={subscriptionPath}
           >
             {actionItem}
           </WfoSubscriptionActionExpandableMenuItem>

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx

@@ -147,7 +147,7 @@ export const WfoSubscriptionProductBlock = ({
                     </td>
                     <td>
                       {(inUseByRelations.length === 0 && 'None') || (
-                        <WfoInUseByRelations inUseByRelations={inUseByRelations} />
+                        <WfoInUseByRelations inUseByRelations={inUseByRelations} subscriptionPath={subscriptionPath} />
                       )}
                     </td>
                   </tr>

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -122,6 +122,11 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
       label: t('tag'),
       width: '100px',
     },
+    customerId: {
+      columnType: ColumnType.DATA,
+      label: t('customerId'),
+      width: '100px',
+    },
     customerFullname: {
       columnType: ColumnType.DATA,
       label: t('customerFullname'),

package/src/components/WfoSubscriptionsList/subscriptionResultMappers.ts

@@ -12,6 +12,7 @@ export type SubscriptionListItem = Pick<
   tag: string | null;
   customerFullname: string;
   customerShortcode: string;
+  customerId: string;
   metadata: object | null;
 };
 
@@ -27,7 +28,7 @@ export const mapGraphQlSubscriptionsResultToSubscriptionListItems = (
       subscription;
 
     const { name: productName, tag } = product;
-    const { fullname: customerFullname, shortcode: customerShortcode } = customer;
+    const { fullname: customerFullname, shortcode: customerShortcode, customerId } = customer;
 
     return {
       subscriptionId,
@@ -41,6 +42,7 @@ export const mapGraphQlSubscriptionsResultToSubscriptionListItems = (
       tag,
       customerFullname,
       customerShortcode,
+      customerId,
       metadata: Object.keys(metadata).length > 0 ? metadata : null,
     };
   });

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

@@ -8,7 +8,6 @@ import {
   DEFAULT_PAGE_SIZE,
   DEFAULT_PAGE_SIZES,
   TableColumnKeys,
-  TableSettingsColumnConfig,
   TableSettingsConfig,
   TableSettingsModal,
   WfoErrorWithMessage,
@@ -18,6 +17,7 @@ import {
   WfoSearchField,
   WfoToolTip,
   clearTableConfigFromLocalStorage,
+  getTableSettingsColumns,
   setTableConfigToLocalStorage,
 } from '@/components';
 import { getRowDetailData } from '@/components/WfoTable/WfoAdvancedTable/getRowDetailData';
@@ -96,17 +96,7 @@ export const WfoAdvancedTable = <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 =
     selectedDataForDetailModal && getRowDetailData(selectedDataForDetailModal, tableColumnConfig);

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

@@ -1,36 +1,43 @@
 import React from 'react';
 
+import { WfoHighlightedText } from '@/components/WfoSearchPage/WfoSearchResults/WfoHighlightedText';
 import { useWithOrchestratorTheme } from '@/hooks';
 import type { MatchingField } from '@/types';
+import { toPercentage } from '@/utils';
 
 import { getWfoStructuredSearchTableStyles } from './styles';
 
 interface WfoExpandingSearchRowProps {
   score?: number;
   perfectMatch?: number;
-  matchingField?: MatchingField | null;
+  matchingFields?: MatchingField[] | null;
 }
 
-export const WfoExpandingSearchRow = ({ score, matchingField }: WfoExpandingSearchRowProps) => {
-  const { expandingSearchRowStyles, expandingRowBodyStyles } = useWithOrchestratorTheme(
-    getWfoStructuredSearchTableStyles,
-  );
-
-  if (!matchingField) return null;
+export const WfoExpandingSearchRow = ({ score, matchingFields }: WfoExpandingSearchRowProps) => {
+  const { expandingSearchRowStyles, expandingRowBodyStyles, hideExpandedRowStyle, dotStyles, expandingRowFieldStyles } =
+    useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
 
-  const { path, text } = matchingField;
+  if (!matchingFields || matchingFields.length === 0) return null;
 
+  // Note: The row is shown on hover by the row above is as configured in the table component expandableRow config
   return (
-    <tr>
+    <tr css={hideExpandedRowStyle}>
       <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)}%`}
+            {matchingFields.map((field) => {
+              return (
+                <div key={`${field.path}:${field.text}`} css={expandingRowFieldStyles}>
+                  <div>
+                    <span css={dotStyles}>•</span>
+                    {field.path}: <WfoHighlightedText text={field.text} highlight_indices={field.highlight_indices} />
+                  </div>
+                </div>
+              );
+            })}
           </div>
+
+          {score && <div css={dotStyles}>confidence: {toPercentage(score)}</div>}
         </div>
       </td>
     </tr>

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

@@ -9,6 +9,27 @@ import { EuiComboBox } from '@elastic/eui';
 import { usePathAutocomplete } from '@/hooks';
 import { EntityKind, FieldToOperatorMap, PathInfo } from '@/types';
 
+// react-querybuilder applies the `.rule` class to the rule container and `.rule-value` to
+// the value-editor cell (see `standardClassnames` in @react-querybuilder/core). We hop from
+// the EuiComboBox search input up to the enclosing rule and focus the value editor's first
+// focusable child on the next frame, once react-querybuilder has re-rendered the rule with
+// the editor type for the new field.
+const focusValueEditorAfterRender = (searchInput: HTMLInputElement | null) => {
+  if (!searchInput) return;
+  requestAnimationFrame(() => {
+    const valueCell = searchInput.closest('.rule')?.querySelector('.rule-value');
+    const focusable = valueCell?.querySelector<HTMLElement>(
+      'input:not([disabled]), textarea:not([disabled]), button:not([disabled])',
+    );
+
+    if (!focusable) return;
+    focusable.focus();
+    if (focusable instanceof HTMLInputElement && (focusable.type === 'text' || focusable.type === 'number')) {
+      focusable.select();
+    }
+  });
+};
+
 export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: FieldSelectorProps) => {
   const { field } = rule;
   const prefilledFieldOptions: FieldToOperatorMap = context.prefilledFieldOptions;
@@ -74,6 +95,8 @@ export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: Fi
     storeFieldOperators(selectedValue);
 
     handleOnChange(selectedValue);
+
+    if (selectedValue) focusValueEditorAfterRender(searchInput);
   };
 
   // EuiComboBox only auto-selects on Enter/Tab when exactly one option matches the typed
@@ -95,7 +118,10 @@ export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: Fi
         (option) => !option.disabled && option.label.toLowerCase() === typed.toLowerCase(),
       );
       if (!exactMatch) return;
-      if (event.key === 'Enter') event.preventDefault();
+      // Prevent both Enter (form submit / EUI's no-op fallback) and Tab (native focus
+      // shift to the operator selector) — handleFieldSelection moves focus to the value
+      // editor itself, and a native Tab in the meantime causes a visible focus flash.
+      event.preventDefault();
       handleFieldSelectionRef.current([exactMatch]);
 
       // EuiComboBox keeps its own internal `searchValue` and `isListOpen` state. Clearing

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { FullOperator, QueryBuilder, type RuleGroupType, generateID } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 
@@ -58,7 +58,6 @@ interface WfoFilterBuilderProps {
   queryBuilderRuleGroup?: RuleGroupType;
   onUpdateQueryBuilder: (ruleGroup: RuleGroupType | false) => void;
   handleSearch: (searchParams?: SearchParams) => void;
-  isFilterBuilderVisible: boolean;
   onToggleFilterBuilder: (isVisible: boolean) => void;
   prefilledFieldOptions: FieldToOperatorMap;
 }
@@ -82,7 +81,6 @@ export const WfoFilterBuilder = ({
   onUpdateQueryBuilder,
   handleSearch,
   prefilledFieldOptions,
-  isFilterBuilderVisible,
   onToggleFilterBuilder,
 }: WfoFilterBuilderProps) => {
   const mapOperatorsToRQBOperatorOptions = (operators?: string[]): FullOperator[] => {
@@ -94,11 +92,20 @@ export const WfoFilterBuilder = ({
   };
 
   const t = useTranslations('common');
-  const { queryBuilderContainerStyles, toggleButtonStyles } = useWithOrchestratorTheme(
-    getWfoStructuredSearchTableStyles,
-  );
+  const { queryBuilderContainerStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
   const [fieldToOperatorMap, setFieldToOperatorMap] = useState<FieldToOperatorMap>(prefilledFieldOptions);
 
+  // Enter in a value editor commits its value on blur, and that state update has not
+  // flushed yet when the search runs in the same keydown. onQueryChange fires
+  // synchronously during the blur, so this ref always holds the freshest rule group,
+  // which is passed to handleSearch explicitly (same pattern as the remove-filter link).
+  const latestRuleGroupRef = useRef<RuleGroupType | undefined>(queryBuilderRuleGroup);
+  latestRuleGroupRef.current = queryBuilderRuleGroup;
+
+  const handleValueEditorEnter = () => {
+    handleSearch({ ruleGroup: latestRuleGroupRef.current });
+  };
+
   const handleFieldSelected = (field: string, operators: string[]) => {
     setFieldToOperatorMap((previousMap) => {
       return new Map(previousMap).set(field, operators);
@@ -106,93 +113,92 @@ export const WfoFilterBuilder = ({
   };
 
   return (
-    <EuiFlexGroup css={isFilterBuilderVisible ? queryBuilderContainerStyles : undefined}>
-      {(isFilterBuilderVisible && (
-        <EuiFlexGroup direction={'column'}>
-          <EuiFlexItem>
-            <QueryBuilder
-              query={queryBuilderRuleGroup}
-              enableMountQueryChange={false}
-              onQueryChange={(ruleGroup: RuleGroupType) => {
-                onUpdateQueryBuilder(ruleGroup);
-              }}
-              context={{ onFieldSelected: handleFieldSelected, prefilledFieldOptions }}
-              getOperators={(field) => {
-                const operators = fieldToOperatorMap.get(field);
-                return mapOperatorsToRQBOperatorOptions(operators);
-              }}
-              controlElements={{
-                fieldSelector: WfoFieldSelector,
-                operatorSelector: WfoOperatorSelector,
-                valueEditor: WfoValueEditor,
-                ruleGroup: WfoRuleGroup,
-                rule: WfoRule,
-                combinatorSelector: WfoCombinatorSelector,
-                inlineCombinator: WfoInlineCombinator,
-                addRuleAction: null,
-                addGroupAction: null,
-                removeGroupAction: null,
-                removeRuleAction: WfoRemoveRuleAction,
-              }}
-              addRuleToNewGroups
-              onAddGroup={onAddGroupHandler}
-              maxLevels={5}
-              showCombinatorsBetweenRules
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <WfoAutoExpandableTextArea
-              id={'searchbox-textarea'}
-              value={filterString ?? ''}
-              onChange={(e) => {
-                const filterString = e.target.value;
-                onUpdateFilterString(filterString);
-              }}
-              isInvalid={!isValidFilterString}
-            />
-          </EuiFlexItem>
-
-          <EuiFlexGroup direction={'rowReverse'} alignItems={'center'}>
-            <EuiButton
-              onClick={() => {
+    <EuiFlexGroup css={queryBuilderContainerStyles}>
+      <EuiFlexGroup direction={'column'}>
+        <EuiFlexItem>
+          <QueryBuilder
+            query={queryBuilderRuleGroup}
+            enableMountQueryChange={false}
+            onQueryChange={(ruleGroup: RuleGroupType) => {
+              latestRuleGroupRef.current = ruleGroup;
+              onUpdateQueryBuilder(ruleGroup);
+            }}
+            context={{
+              onFieldSelected: handleFieldSelected,
+              prefilledFieldOptions,
+              onValueEditorEnter: handleValueEditorEnter,
+            }}
+            getOperators={(field) => {
+              const operators = fieldToOperatorMap.get(field);
+              return mapOperatorsToRQBOperatorOptions(operators);
+            }}
+            controlElements={{
+              fieldSelector: WfoFieldSelector,
+              operatorSelector: WfoOperatorSelector,
+              valueEditor: WfoValueEditor,
+              ruleGroup: WfoRuleGroup,
+              rule: WfoRule,
+              combinatorSelector: WfoCombinatorSelector,
+              inlineCombinator: WfoInlineCombinator,
+              addRuleAction: null,
+              addGroupAction: null,
+              removeGroupAction: null,
+              removeRuleAction: WfoRemoveRuleAction,
+            }}
+            addRuleToNewGroups
+            onAddGroup={onAddGroupHandler}
+            maxLevels={5}
+            showCombinatorsBetweenRules
+            resetOnFieldChange={false}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <WfoAutoExpandableTextArea
+            id={'searchbox-textarea'}
+            value={filterString ?? ''}
+            onChange={(e) => {
+              const filterString = e.target.value;
+              onUpdateFilterString(filterString);
+            }}
+            onKeyDown={(event) => {
+              // Enter applies the filter like the Apply button (and like it, does nothing
+              // while the filter string is invalid); Shift+Enter inserts a newline.
+              if (event.key !== 'Enter' || event.shiftKey) return;
+              event.preventDefault();
+              if (isValidFilterString) {
                 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 });
-                onToggleFilterBuilder(false);
-              }}
-            />
-          </EuiFlexGroup>
+              }
+            }}
+            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 });
+              onToggleFilterBuilder(false);
+            }}
+          />
         </EuiFlexGroup>
-      )) || (
-        <EuiButton
-          css={toggleButtonStyles}
-          onClick={() => onToggleFilterBuilder(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>
     </EuiFlexGroup>
   );
 };

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

@@ -1,5 +1,6 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import type { FullOperator, OperatorSelectorProps, OptionGroup } from 'react-querybuilder';
+import { defaultOperators } from 'react-querybuilder';
 
 import { EuiSelect } from '@elastic/eui';
 
@@ -7,6 +8,8 @@ const isOptionGroup = (operator: FullOperator | OptionGroup<FullOperator>): oper
   'options' in operator;
 
 export const WfoOperatorSelector = (props: OperatorSelectorProps) => {
+  const { value, handleOnChange } = props;
+
   const flatOptions = (props.options as Array<FullOperator | OptionGroup<FullOperator>>).flatMap((option) =>
     isOptionGroup(option) ? option.options : [option],
   );
@@ -16,17 +19,39 @@ export const WfoOperatorSelector = (props: OperatorSelectorProps) => {
     [flatOptions],
   );
 
+  const optionsKey = selectOptions.map((option) => option.value).join('|');
+  const previousOptionsKeyRef = useRef(optionsKey);
+
   useEffect(() => {
-    if (props.options && !props.value && selectOptions.length > 0) {
-      props.handleOnChange(selectOptions[0].value);
+    const optionsChanged = previousOptionsKeyRef.current !== optionsKey;
+    previousOptionsKeyRef.current = optionsKey;
+
+    // Reset to the first option only when the field's operator list changes — i.e. the
+    // user picked a (different) field, and resetOnFieldChange=false on QueryBuilder
+    // preserved an operator that is not valid for it. The `optionsChanged` guard keeps
+    // rules restored from CEL (URL or textarea) intact on mount: parseCEL can produce
+    // operators outside the prefilled operator lists (e.g. beginsWith), and resetting
+    // those here would silently rewrite the user's filter string.
+    if (!optionsChanged || selectOptions.length === 0) return;
+    const currentValueIsValid = selectOptions.some((option) => option.value === value);
+    if (!currentValueIsValid) {
+      handleOnChange(selectOptions[0].value);
     }
-  }, [props, props.options, props.value, selectOptions]);
+  }, [optionsKey, selectOptions, value, handleOnChange]);
+
+  // A restored operator that falls outside the field's list must still be visible in
+  // the dropdown; without it EuiSelect renders an empty selection for the rule.
+  const currentValueIsListed = !value || selectOptions.some((option) => option.value === value);
+  const displayOptions =
+    currentValueIsListed ? selectOptions : (
+      [...selectOptions, { value, text: defaultOperators.find((operator) => operator.name === value)?.label ?? value }]
+    );
 
   return (
     <EuiSelect
-      options={selectOptions}
-      value={props.value}
-      onChange={(e) => props.handleOnChange(e.target.value)}
+      options={displayOptions}
+      value={value}
+      onChange={(e) => handleOnChange(e.target.value)}
       disabled={props.disabled}
     />
   );

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}
+          />
         </>
       )}