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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "8.4.4",
+  "version": "8.5.0",
   "license": "Apache-2.0",
   "description": "Library of UI Components used to display the workflow orchestrator frontend",
   "author": {
@@ -49,9 +49,10 @@
     "next-query-params": "^5.0.0",
     "object-hash": "^3.0.0",
     "prism-themes": "^1.9.0",
-    "pydantic-forms": "^3.0.0",
+    "pydantic-forms": "^3.0.1",
     "react-diff-view": "^3.2.0",
     "react-draggable": "^4.4.6",
+    "react-querybuilder": "^8.18.0",
     "react-redux": "^9.3.0",
     "react-select": "^5.8.0",
     "scroll-into-view": "^1.16.2",
@@ -80,9 +81,9 @@
   "peerDependencies": {
     "@elastic/eui": "^113.0.0",
     "next": "^15.5.18",
+    "next-intl": "^3.26.5",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "next-intl": "^3.26.5"
+    "react-dom": "^18.3.1"
   },
   "type": "module",
   "main": "./dist/index.js",

package/src/components/WfoPydanticForm/WfoPydanticForm.tsx

@@ -1,16 +1,19 @@
 import React, { useCallback, useMemo } from 'react';
 
 import _ from 'lodash';
+import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
 import type { PydanticFormApiProvider } from 'pydantic-forms';
 import { PydanticForm } from 'pydantic-forms';
 
 import { PATH_TASKS, PATH_WORKFLOWS } from '@/components';
 import { Footer } from '@/components/WfoPydanticForm/Footer';
+import { useShowToastMessage } from '@/hooks';
 import { useGetPydanticFormsConfig } from '@/hooks/useGetPydanticFormsConfig';
 import { StartWorkflowPayload } from '@/pages/processes/WfoStartProcessPage';
 import { HttpStatus, isFetchBaseQueryError, isRecord } from '@/rtk';
 import { useStartProcessMutation } from '@/rtk/endpoints/forms';
+import { ToastTypes } from '@/types';
 
 interface WfoPydanticFormProps {
   processName: string;
@@ -29,6 +32,8 @@ export const WfoPydanticForm = ({ processName, startProcessPayload, isTask }: Wf
 
   const [startProcess] = useStartProcessMutation();
   const router = useRouter();
+  const t = useTranslations('pydanticForms.userInputForm');
+  const { showToastMessage } = useShowToastMessage();
 
   const onSuccess = useCallback(
     (_fieldValues: object, req: object) => {
@@ -64,6 +69,23 @@ export const WfoPydanticForm = ({ processName, startProcessPayload, isTask }: Wf
                   ...error.data,
                   status: error.status,
                 });
+              } else if (error.status === HttpStatus.PreconditionFailed) {
+                const detail = typeof error.data.detail === 'string' ? error.data.detail : '';
+                showToastMessage(
+                  ToastTypes.ERROR,
+                  detail || t('preconditionFailedFallback'),
+                  t('preconditionFailedTitle'),
+                );
+                router.replace(isTask ? PATH_TASKS : PATH_WORKFLOWS);
+                resolve({
+                  validation_errors: [
+                    {
+                      loc: ['__root__'],
+                      msg: detail || t('preconditionFailedFallback'),
+                      type: 'precondition_failed',
+                    },
+                  ],
+                });
               }
             } else if (data) {
               resolve({
@@ -86,7 +108,7 @@ export const WfoPydanticForm = ({ processName, startProcessPayload, isTask }: Wf
     };
 
     return pydanticFormProvider;
-  }, [startProcess, startProcessPayload]);
+  }, [startProcess, startProcessPayload, t, showToastMessage, router, isTask]);
 
   const config = useGetPydanticFormsConfig(getPydanticFormProvider, (props) => <Footer {...props} isTask={isTask} />);
 

package/src/components/WfoSearchBar/WfoSearchField.tsx

@@ -39,7 +39,6 @@ export const WfoSearchField = ({ queryString, queryIsValid = true, onUpdateQuery
         placeholder={`${t('search')}...`}
         onChange={(event) => setCurrentQuery(event.target.value)}
         onSearch={handleSearch.current}
-        onBlur={(event) => handleSearch.current(event.target.value)}
         isInvalid={!queryIsValid}
         fullWidth
       />

package/src/components/WfoSearchPage/WfoFilterGroup/WfoFilterGroup.tsx

@@ -17,14 +17,14 @@ import {
 import { WfoToolTip } from '@/components';
 import { isCondition } from '@/components/WfoSearchPage/utils';
 import { useOrchestratorTheme } from '@/hooks';
-import { Condition, EntityKind, Group } from '@/types';
+import type { Condition, EntityKind, Filter } from '@/types';
 
 import { ConditionRow } from '../WfoConditionRow';
 
 interface FilterGroupProps {
-  group: Group;
+  group: Filter;
   entityType: EntityKind;
-  onChange: (group: Group) => void;
+  onChange: (group: Filter) => void;
   onRemove?: () => void;
   depth?: number;
   isRoot?: boolean;
@@ -58,7 +58,7 @@ export const FilterGroup: FC<FilterGroupProps> = ({
   const addGroup = () => {
     if (!canAddGroup) return;
 
-    const newGroup: Group = {
+    const newGroup: Filter = {
       op: 'AND',
       children: [],
     };
@@ -68,7 +68,7 @@ export const FilterGroup: FC<FilterGroupProps> = ({
     });
   };
 
-  const updateChild = (index: number, child: Group | Condition) => {
+  const updateChild = (index: number, child: Filter | Condition) => {
     const newChildren = [...group.children];
     newChildren[index] = child;
     onChange({

package/src/components/WfoSearchPage/WfoSearch/WfoSearch.tsx

@@ -29,7 +29,7 @@ import { useDebounce } from '@/hooks/useDebounce';
 import { useSearch } from '@/hooks/useSearch';
 import { useSearchPagination } from '@/hooks/useSearchPagination';
 import { useUrlParams } from '@/hooks/useUrlParams';
-import { EntityKind, Group, RetrieverType } from '@/types';
+import { EntityKind, Filter, RetrieverType } from '@/types';
 
 import { DEFAULT_DEBOUNCE_DELAY, DEFAULT_PAGE_SIZE, LAYOUT_RATIOS, SMALL_RESULT_THRESHOLD } from '../constants';
 
@@ -53,7 +53,7 @@ export const WfoSearch = () => {
 
   const pageSize = DEFAULT_PAGE_SIZE;
 
-  const [filterGroup, setFilterGroup] = useState<Group>({
+  const [filterGroup, setFilterGroup] = useState<Filter>({
     op: 'AND',
     children: [],
   });
@@ -105,6 +105,11 @@ export const WfoSearch = () => {
     });
     setResults({
       data: [],
+      cursor: {
+        total_items: 0,
+        start_cursor: 0,
+        end_cursor: 0,
+      },
       page_info: {
         has_next_page: false,
         next_page_cursor: null,
@@ -189,7 +194,7 @@ export const WfoSearch = () => {
 
       <EuiFieldSearch
         placeholder={t('searchPlaceholder', {
-          entityType: currentTab?.label.toLowerCase(),
+          entityType: currentTab?.label.toLowerCase() || '',
         })}
         value={searchValue || ''}
         onChange={(event) => {
@@ -272,7 +277,7 @@ export const WfoSearch = () => {
           <EuiCallOut title={t('noResults')} color="primary" iconType="search" size="m">
             <p>
               {t('noResultsMessage', {
-                entityType: currentTab?.label.toLowerCase(),
+                entityType: currentTab?.label.toLowerCase() || '',
               })}
             </p>
             <EuiSpacer size="s" />
@@ -304,7 +309,9 @@ export const WfoSearch = () => {
                 <EuiFlexItem grow={false}>
                   <WfoSearchPaginationInfo
                     has_next_page={results.page_info.has_next_page}
-                    next_page_cursor={results.page_info.next_page_cursor}
+                    next_page_cursor={
+                      results.page_info.next_page_cursor ? parseInt(results.page_info.next_page_cursor, 0) : null
+                    }
                     onNextPage={handleNextPage}
                     onPrevPage={handlePrevPage}
                     isLoading={isLoadingMore}

package/src/components/WfoSearchPage/constants.ts

@@ -6,7 +6,3 @@ export const LAYOUT_RATIOS = {
   RESULTS_GROW: 2,
   DETAIL_GROW: 3,
 } as const;
-
-export const VALID_ENTITY_TYPES = ['SUBSCRIPTION', 'PRODUCT', 'WORKFLOW', 'PROCESS'] as const;
-
-export const DEFAULT_ENTITY_TAB = 'SUBSCRIPTION';

package/src/components/WfoSearchPage/utils.ts

@@ -1,4 +1,18 @@
-import { Condition, EntityKind, Group, RetrieverType, SearchResult } from '@/types';
+import type { RuleGroupType } from 'react-querybuilder';
+import { formatQuery } from 'react-querybuilder/formatQuery';
+
+import { WfoSubscriptionListTab } from '@/components';
+import { SearchPaginationPayload } from '@/rtk';
+import {
+  Condition,
+  EntityKind,
+  Filter,
+  OperatorDisplay,
+  PathInfo,
+  RetrieverType,
+  SearchResult,
+  SubscriptionStatus,
+} from '@/types';
 
 export function isSubscriptionSearchResult(item: SearchResult): boolean {
   return item.entity_type === 'SUBSCRIPTION';
@@ -16,7 +30,7 @@ export function isWorkflowSearchResult(item: SearchResult): boolean {
   return item.entity_type === 'WORKFLOW';
 }
 
-export const isCondition = (item: Group | Condition): item is Condition => {
+export const isCondition = (item: Filter | Condition): item is Condition => {
   return 'path' in item && 'condition' in item;
 };
 
@@ -37,10 +51,10 @@ export const getDetailUrl = (result: SearchResult, baseUrl: string): string => {
 };
 
 export const ENTITY_TABS = [
-  { id: 'SUBSCRIPTION' as const, label: 'Subscriptions' },
-  { id: 'PRODUCT' as const, label: 'Products' },
-  { id: 'WORKFLOW' as const, label: 'Workflows' },
-  { id: 'PROCESS' as const, label: 'Processes' },
+  { id: EntityKind.SUBSCRIPTION, label: 'Subscriptions' },
+  { id: EntityKind.PRODUCT, label: 'Products' },
+  { id: EntityKind.WORKFLOW, label: 'Workflows' },
+  { id: EntityKind.PROCESS, label: 'Processes' },
 ];
 
 interface ThemeColors {
@@ -68,16 +82,6 @@ export const getTypeColor = (type: string, theme: Theme): string => {
   return colorKey ? theme.colors[colorKey] : theme.colors.textSubdued;
 };
 
-interface PathInfo {
-  type?: string;
-  [key: string]: unknown;
-}
-
-interface OperatorDisplay {
-  symbol: string;
-  description: string;
-}
-
 const OPERATOR_MAP: Record<string, OperatorDisplay> = {
   eq: { symbol: '=', description: 'equals' },
   neq: { symbol: '≠', description: 'not equals' },
@@ -88,6 +92,7 @@ const OPERATOR_MAP: Record<string, OperatorDisplay> = {
   between: { symbol: '⟷', description: 'between (range)' },
   has_component: { symbol: '✓', description: 'has component' },
   not_has_component: { symbol: '✗', description: 'does not have component' },
+  like: { symbol: '∋', description: 'contains' },
 };
 
 const BOOLEAN_OPERATOR_MAP: Record<string, OperatorDisplay> = {
@@ -117,7 +122,7 @@ export const getButtonFill = (op: string, pathInfo: PathInfo | null, condition:
   return condition.condition.op === op;
 };
 
-export const isFilterValid = (group: Group): boolean => {
+export const isFilterValid = (group: Filter): boolean => {
   return group.children.every((child) => {
     if (isCondition(child)) {
       return child.path && child.condition.op && child.condition.value !== undefined;
@@ -133,18 +138,68 @@ interface SearchQuery {
 export const buildSearchParams = (
   debouncedQuery: SearchQuery | string,
   selectedEntityTab: EntityKind,
-  filterGroup: Group,
+  filterGroup: Filter,
   pageSize: number,
+  cursor: number,
   retriever?: Exclude<RetrieverType, 'auto'>,
-) => {
+): SearchPaginationPayload => {
   const queryText = typeof debouncedQuery === 'string' ? debouncedQuery : debouncedQuery?.text?.trim() || '';
 
   return {
-    action: 'select' as const,
     entity_type: selectedEntityTab,
     query: queryText || '',
     filters: filterGroup?.children.length > 0 ? filterGroup : undefined,
     limit: pageSize,
     retriever,
+    cursor,
+    response_columns: [],
   };
 };
+
+const parseRuleGroupToFilters = (ruleGroup?: RuleGroupType) => {
+  const elasticQuery =
+    ruleGroup ? formatQuery(ruleGroup, { format: 'elasticsearch', fallbackExpression: '' }) : undefined;
+  return elasticQuery as unknown as Filter;
+};
+
+const getSubscriptionStatusesFromTab = (tab: WfoSubscriptionListTab) => {
+  switch (tab) {
+    case WfoSubscriptionListTab.ACTIVE:
+      return [SubscriptionStatus.ACTIVE];
+    case WfoSubscriptionListTab.TERMINATED:
+      return [SubscriptionStatus.TERMINATED];
+    case WfoSubscriptionListTab.TRANSIENT:
+      return [SubscriptionStatus.INITIAL, SubscriptionStatus.PROVISIONING, SubscriptionStatus.MIGRATING];
+    case WfoSubscriptionListTab.ALL:
+      return [
+        SubscriptionStatus.ACTIVE,
+        SubscriptionStatus.TERMINATED,
+        SubscriptionStatus.INITIAL,
+        SubscriptionStatus.MIGRATING,
+        SubscriptionStatus.PROVISIONING,
+      ];
+    default:
+      return [SubscriptionStatus.ACTIVE];
+  }
+};
+
+const buildSubscriptionStatusFilter = (tab: WfoSubscriptionListTab) => {
+  return {
+    combinator: 'or',
+    rules: getSubscriptionStatusesFromTab(tab).map((status) => ({
+      field: 'subscription.status',
+      operator: '=',
+      value: status,
+    })),
+  };
+};
+
+export const combineSearchFilters = (ruleGroup: RuleGroupType | false | undefined, tab: WfoSubscriptionListTab) => {
+  const userRuleGroup = ruleGroup === false ? undefined : ruleGroup;
+  const ruleGroups = [buildSubscriptionStatusFilter(tab), userRuleGroup].filter(Boolean) as RuleGroupType[];
+
+  const combinedRuleGroup: RuleGroupType =
+    ruleGroups.length === 1 ? ruleGroups[0] : { combinator: 'and', rules: ruleGroups };
+
+  return parseRuleGroupToFilters(combinedRuleGroup);
+};

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

@@ -7,13 +7,13 @@ import { EuiButtonIcon, EuiText } from '@elastic/eui';
 
 import { PATH_SUBSCRIPTIONS } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
-import { SubscriptionAction } from '@/types';
+import { SubscriptionAction, SubscriptionRelation } from '@/types';
 
 import { getSubscriptionActionStyles } from './styles';
 
 export type WfoSubscriptionActionExpandableMenuItemProps = {
   subscriptionAction: SubscriptionAction;
-  onClickLockedRelation: (relation: string) => void;
+  onClickLockedRelation: (relation: SubscriptionRelation) => void;
   children: React.ReactNode;
 };
 
@@ -28,16 +28,19 @@ export const WfoSubscriptionActionExpandableMenuItem: FC<WfoSubscriptionActionEx
     useWithOrchestratorTheme(getSubscriptionActionStyles);
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const { locked_relations: lockedRelations } = subscriptionAction;
+  // 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;
 
   return (
     <div>
       <div
-        css={[expandableMenuItemStyle, lockedRelations && clickableStyle]}
+        css={[expandableMenuItemStyle, hasLockedRelations && clickableStyle]}
         onClick={() => setIsExpanded(!isExpanded)}
       >
         <div>{children}</div>
-        {lockedRelations && (
+        {hasLockedRelations && (
           <EuiButtonIcon
             css={expandButtonStyle}
             iconType={isExpanded ? 'arrowDown' : 'arrowRight'}
@@ -46,21 +49,36 @@ export const WfoSubscriptionActionExpandableMenuItem: FC<WfoSubscriptionActionEx
           />
         )}
       </div>
-      {lockedRelations && isExpanded && (
+      {hasLockedRelations && isExpanded && (
         <div css={expandedContentStyle}>
           <EuiText size="xs">{t('lockedBySubscriptions')}</EuiText>
-          {lockedRelations.map((relation) => (
-            <EuiText key={relation} size="xs">
-              <Link
-                css={linkStyle}
-                href={`${PATH_SUBSCRIPTIONS}/${relation}`}
-                target="_blank"
-                onClick={() => onClickLockedRelation(relation)}
-              >
-                {relation}
-              </Link>
-            </EuiText>
-          ))}
+          <ul css={{ margin: 0, paddingLeft: 16, listStyleType: 'disc' }}>
+            {lockedRelationsDetail ?
+              lockedRelationsDetail.map((relation) => (
+                <li key={relation.subscription_id}>
+                  <EuiText size="xs">
+                    <Link
+                      css={linkStyle}
+                      href={`${PATH_SUBSCRIPTIONS}/${relation.subscription_id}`}
+                      target="_blank"
+                      onClick={() => onClickLockedRelation(relation)}
+                    >
+                      {relation.subscription_description}
+                    </Link>
+                  </EuiText>
+                </li>
+              ))
+            : lockedRelationsUuids?.map((id) => (
+                <li key={id}>
+                  <EuiText size="xs">
+                    <Link css={linkStyle} href={`${PATH_SUBSCRIPTIONS}/${id}`} target="_blank">
+                      {id}
+                    </Link>
+                  </EuiText>
+                </li>
+              ))
+            }
+          </ul>
         </div>
       )}
     </div>

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

@@ -4,7 +4,7 @@ import { useTranslations } from 'next-intl';
 
 import { EuiContextMenuItem, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui';
 
-import { flattenArrayProps } from '@/components';
+import { flattenSubscriptionActionProps } from '@/components';
 import { WfoSubscriptionActionExpandableMenuItem } from '@/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionExpandableMenuItem';
 import { getSubscriptionActionStyles } from '@/components/WfoSubscription/WfoSubscriptionActions/styles';
 import { useCheckEngineStatus, useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
@@ -56,9 +56,45 @@ export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
     );
   };
 
+  // TODO: remove UUID-only fallback when orchestrator-core 6.0.0 is released and only use the _detail variants
+  const getRelationsList = () => {
+    const detailRelations = [
+      ...(subscriptionAction.locked_relations_detail ?? []),
+      ...(subscriptionAction.unterminated_in_use_by_subscriptions_detail ?? []),
+    ];
+    if (detailRelations.length > 0) {
+      return (
+        <ul css={{ margin: 0, paddingLeft: 16, listStyleType: 'disc' }}>
+          {detailRelations.map((r) => (
+            <li key={r.subscription_id}>{r.subscription_description || r.subscription_id}</li>
+          ))}
+        </ul>
+      );
+    }
+    const uuidRelations = [
+      ...(subscriptionAction.locked_relations ?? []),
+      ...(subscriptionAction.unterminated_in_use_by_subscriptions ?? []),
+    ];
+    if (uuidRelations.length === 0) return null;
+    return (
+      <ul css={{ margin: 0, paddingLeft: 16, listStyleType: 'disc' }}>
+        {uuidRelations.map((id) => (
+          <li key={id}>{id}</li>
+        ))}
+      </ul>
+    );
+  };
+
   const tooltipIt = (actionItem: React.ReactNode) => {
     if (!subscriptionActionReason) return actionItem;
-    const tooltipContent = t(subscriptionActionReason, flattenArrayProps(subscriptionAction));
+    const relationsList = getRelationsList();
+    const tooltipContent =
+      relationsList ?
+        <span css={{ whiteSpace: 'pre-line' }}>
+          {t(subscriptionActionReason, flattenSubscriptionActionProps(subscriptionAction))}
+          {relationsList}
+        </span>
+      : t(subscriptionActionReason, flattenSubscriptionActionProps(subscriptionAction));
 
     return (
       <div css={tooltipMenuItemStyle}>

package/src/components/WfoSubscription/utils/index.ts

@@ -1 +1,4 @@
 export * from './utils';
+
+/** @deprecated Use flattenSubscriptionActionProps instead */
+export { flattenSubscriptionActionProps as flattenArrayProps } from './utils';

package/src/components/WfoSubscription/utils/utils.spec.ts

@@ -9,7 +9,7 @@ import {
   WorkflowTarget,
 } from '../../../types';
 import {
-  flattenArrayProps,
+  flattenSubscriptionActionProps,
   getFieldFromProductBlockInstanceValues,
   getLastUncompletedProcess,
   getLatestTaskDate,
@@ -61,7 +61,7 @@ describe('getProductBlockTitle()', () => {
   });
 });
 
-describe('flattenArrayProps', () => {
+describe('flattenSubscriptionActionProps', () => {
   it('should flatten an object with array values into a comma-separated string', () => {
     const action: SubscriptionAction = {
       name: 'action name',
@@ -69,7 +69,7 @@ describe('flattenArrayProps', () => {
       usable_when: ['Status1', 'Status2', 'Status3'],
     };
 
-    const result = flattenArrayProps(action);
+    const result = flattenSubscriptionActionProps(action);
 
     expect(result).toEqual({
       name: 'action name',
@@ -78,12 +78,47 @@ describe('flattenArrayProps', () => {
     });
   });
 
+  it('should flatten locked_relations_detail objects using subscription_description', () => {
+    const action: SubscriptionAction = {
+      name: 'action name',
+      description: 'action description',
+      locked_relations_detail: [
+        { subscription_id: 'uuid-1', subscription_description: 'Sub A' },
+        { subscription_id: 'uuid-2', subscription_description: 'Sub B' },
+      ],
+    };
+
+    const result = flattenSubscriptionActionProps(action);
+
+    expect(result).toEqual({
+      name: 'action name',
+      description: 'action description',
+      locked_relations_detail: 'Sub A, Sub B',
+    });
+  });
+
+  it('should flatten locked_relations UUIDs', () => {
+    const action: SubscriptionAction = {
+      name: 'action name',
+      description: 'action description',
+      locked_relations: ['uuid-1', 'uuid-2'],
+    };
+
+    const result = flattenSubscriptionActionProps(action);
+
+    expect(result).toEqual({
+      name: 'action name',
+      description: 'action description',
+      locked_relations: 'uuid-1, uuid-2',
+    });
+  });
+
   it('should handle an object with non-array values', () => {
     const action: SubscriptionAction = {
       name: 'action name',
       description: 'action description',
     };
-    const result = flattenArrayProps(action);
+    const result = flattenSubscriptionActionProps(action);
     expect(result).toEqual({
       name: 'action name',
       description: 'action description',

package/src/components/WfoSubscription/utils/utils.ts

@@ -10,6 +10,7 @@ import {
   SortOrder,
   SubscriptionAction,
   SubscriptionDetailProcess,
+  SubscriptionRelation,
   WorkflowTarget,
 } from '@/types';
 
@@ -40,16 +41,21 @@ export const getProductBlockTitle = (instanceValues: FieldValue[]): string | num
   return title;
 };
 
-export const flattenArrayProps = (action: SubscriptionAction): TranslationValues => {
+const toLabel = (item: string | SubscriptionRelation): string =>
+  typeof item === 'object' ? (item.subscription_description ?? item.subscription_id) : item;
+
+export const flattenSubscriptionActionProps = (action?: SubscriptionAction | null): TranslationValues => {
+  if (!action) return {};
+
   const flatObject: TranslationValues = {};
   for (const [key, value] of Object.entries(action)) {
     if (Array.isArray(value)) {
-      flatObject[key] = value.join(', ');
-    } else {
+      flatObject[key] = value.map(toLabel).join(', ');
+    } else if (typeof value !== 'object' || value === null) {
       flatObject[key] = value;
     }
   }
-  return action ? flatObject : {};
+  return flatObject;
 };
 
 export const getWorkflowTargetColor = (workflowTarget: WorkflowTarget, theme: EuiThemeComputed) => {

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { ActionProps } from 'react-querybuilder';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiFlexItem } from '@elastic/eui';
+
+import { getWfoStructuredSearchTableStyles } from '@/components/WfoTable/WfoStructuredSearchTable/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+export const WfoAddGroupAction = ({ disabled, handleOnClick }: ActionProps) => {
+  const t = useTranslations('search.page');
+  const { addGroupStyles, addRulePlusStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+  return disabled ? null : (
+      <EuiFlexItem css={addGroupStyles} onClick={() => handleOnClick()}>
+        <span css={addRulePlusStyles}>+</span>&nbsp;{t('addGroup')}
+      </EuiFlexItem>
+    );
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ActionProps } from 'react-querybuilder';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiFlexItem } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { getWfoStructuredSearchTableStyles } from './styles';
+
+export const WfoAddRuleAction = (props: ActionProps) => {
+  const { addRulePlusStyles, addRuleContainerStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+
+  const t = useTranslations('search.page');
+
+  return (
+    <EuiFlexItem grow={false} onClick={() => props.handleOnClick()} css={addRuleContainerStyles}>
+      <span css={addRulePlusStyles}>+</span>
+      {t('addRule')}
+    </EuiFlexItem>
+  );
+};