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

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

@@ -15,12 +15,14 @@ export type WfoSubscriptionActionExpandableMenuItemProps = {
   subscriptionAction: SubscriptionAction;
   onClickLockedRelation: (relation: SubscriptionRelation) => void;
   children: React.ReactNode;
+  subscriptionPath?: string;
 };
 
 export const WfoSubscriptionActionExpandableMenuItem: FC<WfoSubscriptionActionExpandableMenuItemProps> = ({
   subscriptionAction,
   onClickLockedRelation,
   children,
+  subscriptionPath = PATH_SUBSCRIPTIONS,
 }) => {
   const t = useTranslations('subscriptions.detail.actions');
 
@@ -29,18 +31,21 @@ export const WfoSubscriptionActionExpandableMenuItem: FC<WfoSubscriptionActionEx
   const [isExpanded, setIsExpanded] = useState(false);
 
   // TODO: remove lockedRelationsUuids fallback when orchestrator-core 6.0.0 is released and only use the _detail variant
-  const lockedRelationsDetail = subscriptionAction.locked_relations_detail;
-  const lockedRelationsUuids = subscriptionAction.locked_relations;
-  const hasLockedRelations = (lockedRelationsDetail?.length ?? 0) > 0 || (lockedRelationsUuids?.length ?? 0) > 0;
+  const relationsDetail = [
+    ...(subscriptionAction.locked_relations_detail ?? []),
+    ...(subscriptionAction.unterminated_in_use_by_subscriptions_detail ?? []),
+  ];
+  const relationsUuids = [
+    ...(subscriptionAction.locked_relations ?? []),
+    ...(subscriptionAction.unterminated_in_use_by_subscriptions ?? []),
+  ];
+  const hasRelations = relationsDetail.length > 0 || relationsUuids.length > 0;
 
   return (
     <div>
-      <div
-        css={[expandableMenuItemStyle, hasLockedRelations && clickableStyle]}
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
+      <div css={[expandableMenuItemStyle, hasRelations && clickableStyle]} onClick={() => setIsExpanded(!isExpanded)}>
         <div>{children}</div>
-        {hasLockedRelations && (
+        {hasRelations && (
           <EuiButtonIcon
             css={expandButtonStyle}
             iconType={isExpanded ? 'arrowDown' : 'arrowRight'}
@@ -49,17 +54,17 @@ export const WfoSubscriptionActionExpandableMenuItem: FC<WfoSubscriptionActionEx
           />
         )}
       </div>
-      {hasLockedRelations && isExpanded && (
+      {hasRelations && isExpanded && (
         <div css={expandedContentStyle}>
           <EuiText size="xs">{t('lockedBySubscriptions')}</EuiText>
           <ul css={{ margin: 0, paddingLeft: 16, listStyleType: 'disc' }}>
-            {lockedRelationsDetail ?
-              lockedRelationsDetail.map((relation) => (
+            {relationsDetail.length > 0 ?
+              relationsDetail.map((relation) => (
                 <li key={relation.subscription_id}>
                   <EuiText size="xs">
                     <Link
                       css={linkStyle}
-                      href={`${PATH_SUBSCRIPTIONS}/${relation.subscription_id}`}
+                      href={`${subscriptionPath}/${relation.subscription_id}`}
                       target="_blank"
                       onClick={() => onClickLockedRelation(relation)}
                     >
@@ -68,10 +73,10 @@ export const WfoSubscriptionActionExpandableMenuItem: FC<WfoSubscriptionActionEx
                   </EuiText>
                 </li>
               ))
-            : lockedRelationsUuids?.map((id) => (
+            : relationsUuids.map((id) => (
                 <li key={id}>
                   <EuiText size="xs">
-                    <Link css={linkStyle} href={`${PATH_SUBSCRIPTIONS}/${id}`} target="_blank">
+                    <Link css={linkStyle} href={`${subscriptionPath}/${id}`} target="_blank">
                       {id}
                     </Link>
                   </EuiText>

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

@@ -5,7 +5,13 @@ import { useRouter } from 'next/router';
 
 import { EuiButton, EuiButtonIcon, EuiLoadingSpinner, EuiTitle } from '@elastic/eui';
 
-import { PATH_START_NEW_TASK, PATH_START_NEW_WORKFLOW, WfoInSyncField, WfoPopover } from '@/components';
+import {
+  PATH_START_NEW_TASK,
+  PATH_START_NEW_WORKFLOW,
+  PATH_SUBSCRIPTIONS,
+  WfoInSyncField,
+  WfoPopover,
+} from '@/components';
 import { WfoSubscriptionActionsMenuItem } from '@/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionsMenuItem';
 import { useActiveProcess } from '@/components/WfoSubscription/WfoSubscriptionActions/utils';
 import { PolicyResource } from '@/configuration/policy-resources';
@@ -27,12 +33,14 @@ export type WfoSubscriptionActionsProps = {
   subscriptionId: string;
   isLoading?: boolean;
   compactMode?: boolean;
+  subscriptionPath?: string;
 };
 
 export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
   subscriptionId,
   isLoading,
   compactMode = false,
+  subscriptionPath = PATH_SUBSCRIPTIONS,
 }) => {
   const t = useTranslations('subscriptions.detail.actions');
   const { theme } = useOrchestratorTheme();
@@ -132,6 +140,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
               subscriptionAction={subscriptionAction}
               target={WorkflowTarget.VALIDATE}
               setPopover={setPopover}
+              subscriptionPath={subscriptionPath}
               onClick={() => handleActionClick(subscriptionAction.name, compactMode, true)}
               isLoading={buttonIsLoading}
             />
@@ -152,6 +161,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
               }
               target={WorkflowTarget.RECONCILE}
               setPopover={setPopover}
+              subscriptionPath={subscriptionPath}
               onClick={() => handleActionClick(subscriptionAction.name, compactMode, false)}
               isLoading={buttonIsLoading}
             />
@@ -182,6 +192,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
               subscriptionAction={subscriptionAction}
               target={WorkflowTarget.MODIFY}
               setPopover={setPopover}
+              subscriptionPath={subscriptionPath}
               onClick={() => {
                 redirectToUrl(subscriptionAction.name);
               }}
@@ -199,6 +210,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
               subscriptionAction={subscriptionAction}
               target={WorkflowTarget.TERMINATE}
               setPopover={setPopover}
+              subscriptionPath={subscriptionPath}
               onClick={() => {
                 redirectToUrl(subscriptionAction.name);
               }}

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/WfoAddGroupAction.tsx

@@ -12,7 +12,7 @@ export const WfoAddGroupAction = ({ disabled, handleOnClick }: ActionProps) => {
   const t = useTranslations('search.page');
   const { addGroupStyles, addRulePlusStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
   return disabled ? null : (
-      <EuiFlexItem css={addGroupStyles} onClick={() => handleOnClick()}>
+      <EuiFlexItem grow={true} css={addGroupStyles} onClick={() => handleOnClick()}>
         <span css={addRulePlusStyles}>+</span>&nbsp;{t('addGroup')}
       </EuiFlexItem>
     );

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

@@ -8,6 +8,9 @@ import { useWithOrchestratorTheme } from '@/hooks';
 
 export const WfoCombinatorSelector = (props: CombinatorSelectorProps) => {
   const { buttonGroupStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+
+  if (props.rules.length < 2) return null;
+
   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

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { FieldSelectorProps } from 'react-querybuilder';
 
 import { useTranslations } from 'next-intl';
@@ -7,16 +7,42 @@ import type { EuiComboBoxOptionOption } from '@elastic/eui';
 import { EuiComboBox } from '@elastic/eui';
 
 import { usePathAutocomplete } from '@/hooks';
-import { EntityKind, PathInfo } from '@/types';
+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;
   const [selectedValue, setSelectedValue] = useState<string>(field);
+  const [searchInput, setSearchInput] = useState<HTMLInputElement | null>(null);
+  const optionsRef = useRef<EuiComboBoxOptionOption<string>[]>([]);
+  const handleFieldSelectionRef = useRef<(selected: EuiComboBoxOptionOption<string>[]) => void>(() => {});
   const t = useTranslations('search.page');
   const getOption = (path: string) => ({
     value: path,
     label: path,
   });
+
   const getOptionsFromPathInfo = (pathInfos: PathInfo[]): EuiComboBoxOptionOption<string>[] => {
     const pathOptions: EuiComboBoxOptionOption<string>[] = [];
 
@@ -40,14 +66,26 @@ export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: Fi
     error: errorMessage,
   } = usePathAutocomplete(selectedValue, EntityKind.SUBSCRIPTION);
 
-  const options = getOptionsFromPathInfo(paths);
+  const prefilledOptions: EuiComboBoxOptionOption<string>[] = Array.from(prefilledFieldOptions.keys()).map(getOption);
+  const autocompleteOptions = getOptionsFromPathInfo(paths);
+  const placeholderOption: EuiComboBoxOptionOption<string> = {
+    label: '──────',
+    disabled: true,
+  };
+  const showPlaceholder = prefilledOptions.length > 0 && autocompleteOptions.length > 0;
+  const options: EuiComboBoxOptionOption<string>[] = [
+    ...prefilledOptions,
+    ...(showPlaceholder ? [placeholderOption] : []),
+    ...autocompleteOptions,
+  ];
 
   const storeFieldOperators = (selectedValue: string) => {
     const matchingPath =
       paths.find((path) => path.path === selectedValue)
       ?? paths.find((path) => path.availablePaths?.includes(selectedValue));
+    const operators = matchingPath?.operators ?? prefilledFieldOptions.get(selectedValue) ?? [];
 
-    context?.onFieldSelected?.(selectedValue, matchingPath);
+    context?.onFieldSelected?.(selectedValue, operators);
   };
 
   const handleFieldSelection = (selectedOptions: EuiComboBoxOptionOption<string>[]) => {
@@ -57,8 +95,49 @@ 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
+  // text. When several options share the typed prefix, the exact-match option is not picked
+  // unless the user arrow-navigates. Patch that with a native keydown listener on the input.
+  optionsRef.current = options;
+  handleFieldSelectionRef.current = handleFieldSelection;
+
+  useEffect(() => {
+    if (!searchInput) return;
+
+    const autoSelectExactMatchOption = (event: KeyboardEvent) => {
+      if (event.key !== 'Enter' && event.key !== 'Tab') return;
+      // Let EuiComboBox handle selection when an option is keyboard-highlighted.
+      if (searchInput.getAttribute('aria-activedescendant')) return;
+      const typed = searchInput.value.trim();
+      if (!typed) return;
+      const exactMatch = optionsRef.current.find(
+        (option) => !option.disabled && option.label.toLowerCase() === typed.toLowerCase(),
+      );
+      if (!exactMatch) return;
+      // 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
+      // the value via the React-recognised native setter + input event suppresses EUI's
+      // "typed-but-not-selected" warning icon (the `markAsInvalid` branch in combo_box.js).
+      // The synthetic Escape closes the dropdown without disturbing focus.
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+      nativeInputValueSetter?.call(searchInput, '');
+      searchInput.dispatchEvent(new Event('input', { bubbles: true }));
+      searchInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    };
+
+    searchInput.addEventListener('keydown', autoSelectExactMatchOption);
+    return () => searchInput.removeEventListener('keydown', autoSelectExactMatchOption);
+  }, [searchInput]);
+
   return (
     <EuiComboBox
       placeholder={t('searchFieldsPlaceholder')}
@@ -73,6 +152,7 @@ export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: Fi
           setSelectedValue(inputValue);
         }
       }}
+      inputRef={setSearchInput}
       singleSelection={{ asPlainText: true }}
       isLoading={isLoading}
       isClearable