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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "8.6.0",
+  "version": "8.7.0",
   "license": "Apache-2.0",
   "description": "Library of UI Components used to display the workflow orchestrator frontend",
   "author": {
@@ -39,6 +39,8 @@
     "@monaco-editor/react": "^4.7.0",
     "@rtk-query/graphql-request-base-query": "^2.3.1",
     "@tanstack/react-virtual": "^3.13.24",
+    "cron-parser": "^5.6.2",
+    "cronstrue": "^3.24.0",
     "graphql-request": "^6.1.0",
     "invariant": "^2.2.4",
     "lodash": "^4.17.21",

package/src/components/WfoPydanticForm/fields/WfoCron.spec.ts

@@ -0,0 +1,88 @@
+import { getCronFieldIndexAtCursor, getCronFieldLayout, getCronFieldSelectionRange } from './WfoCron';
+
+describe('getCronFieldSelectionRange', () => {
+  it('returns the character range of the requested field', () => {
+    expect(getCronFieldSelectionRange('5 4 * JAN *', 0)).toEqual([0, 1]);
+    expect(getCronFieldSelectionRange('5 4 * JAN *', 1)).toEqual([2, 3]);
+    expect(getCronFieldSelectionRange('5 4 * JAN *', 3)).toEqual([6, 9]);
+  });
+
+  it('handles extra whitespace', () => {
+    expect(getCronFieldSelectionRange('  5   4 *', 1)).toEqual([6, 7]);
+  });
+
+  it('returns null when the field is not present in the expression', () => {
+    expect(getCronFieldSelectionRange('5 4', 2)).toEqual(null);
+    expect(getCronFieldSelectionRange('', 0)).toEqual(null);
+  });
+});
+
+describe('getCronFieldLayout', () => {
+  it('returns the 5 field layout starting with minute for an empty expression', () => {
+    expect(getCronFieldLayout('')).toEqual(['minute', 'hour', 'dayOfMonth', 'month', 'dayOfWeek']);
+  });
+
+  it('returns the 5 field layout starting with minute for a 5 field expression', () => {
+    expect(getCronFieldLayout('5 4 * JAN *')).toEqual(['minute', 'hour', 'dayOfMonth', 'month', 'dayOfWeek']);
+  });
+
+  it('returns the 6 field layout starting with second for a 6 field expression', () => {
+    expect(getCronFieldLayout('0 5 4 * JAN *')).toEqual([
+      'second',
+      'minute',
+      'hour',
+      'dayOfMonth',
+      'month',
+      'dayOfWeek',
+    ]);
+  });
+});
+
+describe('getCronFieldIndexAtCursor', () => {
+  const expression = '*/5 8-17 * JAN mon-fri';
+
+  it('returns the first field for an empty expression', () => {
+    expect(getCronFieldIndexAtCursor('', 0)).toEqual(0);
+  });
+
+  it('returns the field the cursor is inside', () => {
+    expect(getCronFieldIndexAtCursor(expression, 0)).toEqual(0); // |*/5
+    expect(getCronFieldIndexAtCursor(expression, 2)).toEqual(0); // */|5
+    expect(getCronFieldIndexAtCursor(expression, 3)).toEqual(0); // */5|
+    expect(getCronFieldIndexAtCursor(expression, 5)).toEqual(1); // 8|-17
+    expect(getCronFieldIndexAtCursor(expression, 9)).toEqual(2); // |*
+    expect(getCronFieldIndexAtCursor(expression, 12)).toEqual(3); // J|AN
+    expect(getCronFieldIndexAtCursor(expression, 22)).toEqual(4); // mon-fri|
+  });
+
+  it('returns the next field when the cursor is after a separating space', () => {
+    expect(getCronFieldIndexAtCursor(expression, 4)).toEqual(1); // */5 |8-17
+    expect(getCronFieldIndexAtCursor(expression, 15)).toEqual(4); // JAN |mon-fri
+  });
+
+  it('handles multiple consecutive spaces', () => {
+    expect(getCronFieldIndexAtCursor('*  *', 1)).toEqual(0);
+    expect(getCronFieldIndexAtCursor('*  *', 2)).toEqual(1);
+    expect(getCronFieldIndexAtCursor('*  *', 3)).toEqual(1);
+  });
+
+  it('never exceeds the last field of the active layout', () => {
+    expect(getCronFieldIndexAtCursor('1 2 3 4 5 ', 10)).toEqual(4);
+    expect(getCronFieldIndexAtCursor('* * * * * * extra', 17)).toEqual(5);
+  });
+
+  it('handles leading whitespace', () => {
+    expect(getCronFieldIndexAtCursor('  * * * * *', 1)).toEqual(0);
+    expect(getCronFieldIndexAtCursor('  * * * * *', 3)).toEqual(0);
+  });
+
+  it('maps the first field to minute for 5 fields and to second for 6 fields', () => {
+    const fiveFieldExpression = '5 4 * JAN *';
+    expect(getCronFieldLayout(fiveFieldExpression)[getCronFieldIndexAtCursor(fiveFieldExpression, 1)]).toEqual(
+      'minute',
+    );
+
+    const sixFieldExpression = '0 5 4 * JAN *';
+    expect(getCronFieldLayout(sixFieldExpression)[getCronFieldIndexAtCursor(sixFieldExpression, 1)]).toEqual('second');
+  });
+});

package/src/components/WfoPydanticForm/fields/WfoCron.tsx

@@ -0,0 +1,233 @@
+import React, { useMemo, useRef, useState } from 'react';
+
+import { CronExpressionParser } from 'cron-parser';
+import cronstrue from 'cronstrue/i18n';
+import _ from 'lodash';
+import moment from 'moment';
+import { useTranslations } from 'next-intl';
+import type { PydanticFormControlledElement } from 'pydantic-forms';
+import { getFormFieldIdWithPath } from 'pydantic-forms';
+
+import { EuiFieldText, EuiText } from '@elastic/eui';
+
+import { useLanguageCode, useWithOrchestratorTheme } from '@/hooks';
+import { getFormFieldsBaseStyle } from '@/theme';
+
+import { getWfoCronFieldStyles } from './styles';
+
+const CRON_FIELD_KEYS = ['second', 'minute', 'hour', 'dayOfMonth', 'month', 'dayOfWeek'] as const;
+
+type CronFieldKey = (typeof CRON_FIELD_KEYS)[number];
+
+type CronHintRow = {
+  symbol: string;
+  translationKey: string;
+};
+
+const SPECIAL_CHARACTER_HINTS: CronHintRow[] = [
+  { symbol: '*', translationKey: 'anyValue' },
+  { symbol: ',', translationKey: 'valueListSeparator' },
+  { symbol: '-', translationKey: 'rangeOfValues' },
+  { symbol: '/', translationKey: 'stepValues' },
+];
+
+const CRON_FIELD_HINTS: Record<CronFieldKey, CronHintRow[]> = {
+  second: [{ symbol: '0-59', translationKey: 'allowedValues' }],
+  minute: [{ symbol: '0-59', translationKey: 'allowedValues' }],
+  hour: [{ symbol: '0-23', translationKey: 'allowedValues' }],
+  dayOfMonth: [{ symbol: '1-31', translationKey: 'allowedValues' }],
+  month: [
+    { symbol: '1-12', translationKey: 'allowedValues' },
+    { symbol: 'JAN-DEC', translationKey: 'alternativeSingleValues' },
+  ],
+  dayOfWeek: [
+    { symbol: '0-6', translationKey: 'allowedValues' },
+    { symbol: 'SUN-SAT', translationKey: 'alternativeSingleValues' },
+    { symbol: '7', translationKey: 'sundayNonStandard' },
+  ],
+};
+
+// cron-parser and cronstrue treat a 5 field expression as starting with minute;
+// only with 6 fields does the first field become second
+export const getCronFieldLayout = (expression: string): readonly CronFieldKey[] => {
+  const fieldCount = expression.trim().split(/\s+/).filter(Boolean).length;
+  return fieldCount >= CRON_FIELD_KEYS.length ? CRON_FIELD_KEYS : CRON_FIELD_KEYS.slice(1);
+};
+
+export const getCronFieldIndexAtCursor = (expression: string, cursorPosition: number): number => {
+  const textBeforeCursor = expression.slice(0, cursorPosition);
+  const fieldsBeforeCursor = textBeforeCursor.split(/\s+/).filter(Boolean);
+  const cursorIsBetweenFields = /\s$/.test(textBeforeCursor) || fieldsBeforeCursor.length === 0;
+  const fieldIndex = cursorIsBetweenFields ? fieldsBeforeCursor.length : fieldsBeforeCursor.length - 1;
+  return Math.min(fieldIndex, getCronFieldLayout(expression).length - 1);
+};
+
+export const getCronFieldSelectionRange = (expression: string, fieldIndex: number): [number, number] | null => {
+  const fieldPattern = /\S+/g;
+  let match = fieldPattern.exec(expression);
+  let index = 0;
+  while (match) {
+    if (index === fieldIndex) {
+      return [match.index, match.index + match[0].length];
+    }
+    index++;
+    match = fieldPattern.exec(expression);
+  }
+  return null;
+};
+
+export const WfoCron: PydanticFormControlledElement = ({ onChange, value, disabled, pydanticFormField }) => {
+  const { formFieldBaseStyle } = useWithOrchestratorTheme(getFormFieldsBaseStyle);
+  const {
+    cronFieldWrapperStyle,
+    cronPossibleValuesStyle,
+    cronLegendStyle,
+    cronLegendItemStyle,
+    cronActiveLegendItemStyle,
+    cronInactiveLegendItemStyle,
+    cronDescriptionStyle,
+    cronHintStyle,
+    cronHintListStyle,
+    cronHintSymbolStyle,
+    cronErrorStyle,
+    cronDescriptionContainerStyle,
+  } = useWithOrchestratorTheme(getWfoCronFieldStyles);
+  const t = useTranslations('pydanticForms.widgets.cron');
+  const cronstrueLocale = useLanguageCode();
+  const [activeFieldIndex, setActiveFieldIndex] = useState<number | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  // If the field is part of an array the value is passed in as an object with the field name as key
+  // this is imposed by react-hook-form. We try to detect this and extract the actual value
+  const fieldName = getFormFieldIdWithPath(pydanticFormField.id);
+  const fieldValue = _.isObject(value) && _.has(value, fieldName) ? _.get(value, fieldName) : value;
+
+  const { description, parseError, nextOccurrences } = useMemo(() => {
+    const expression = typeof fieldValue === 'string' ? fieldValue.trim() : '';
+    if (!expression) {
+      return { description: undefined, parseError: undefined, nextOccurrences: [] };
+    }
+    try {
+      // cron-parser validates the expression, cronstrue turns it into a human readable description
+      const cronExpression = CronExpressionParser.parse(expression);
+
+      return {
+        description: cronstrue.toString(expression, {
+          locale: cronstrueLocale,
+          throwExceptionOnParseError: true,
+        }),
+        parseError: undefined,
+        nextOccurrences: cronExpression.take(1).map((cronDate) => cronDate.toDate()),
+      };
+    } catch (error) {
+      return {
+        description: undefined,
+        parseError: error instanceof Error ? error.message : String(error),
+        nextOccurrences: [],
+      };
+    }
+  }, [fieldValue, cronstrueLocale]);
+
+  const updateActiveField = (event: React.SyntheticEvent<HTMLInputElement>) => {
+    const { selectionStart, value: expression } = event.currentTarget;
+    setActiveFieldIndex(selectionStart === null ? null : getCronFieldIndexAtCursor(expression, selectionStart));
+  };
+
+  const fieldLayout = getCronFieldLayout(typeof fieldValue === 'string' ? fieldValue : '');
+  const activeFieldKey =
+    activeFieldIndex !== null ? fieldLayout[Math.min(activeFieldIndex, fieldLayout.length - 1)] : null;
+  const hintFieldKey = activeFieldKey ?? fieldLayout[0];
+
+  const focusCronField = (fieldKey: CronFieldKey) => {
+    const input = inputRef.current;
+    const fieldIndex = fieldLayout.indexOf(fieldKey);
+    // The second field is not part of the layout when the expression has 5 fields
+    if (!input || fieldIndex === -1) {
+      return;
+    }
+    const expression = typeof fieldValue === 'string' ? fieldValue : '';
+    input.focus();
+    const selectionRange = getCronFieldSelectionRange(expression, fieldIndex);
+    if (selectionRange) {
+      input.setSelectionRange(selectionRange[0], selectionRange[1]);
+    } else {
+      // The selection can't be found so the caret is placed at the end of the selection while maintaining focus on the field
+      input.setSelectionRange(expression.length, expression.length);
+    }
+    setActiveFieldIndex(fieldIndex);
+  };
+
+  return (
+    <div css={cronFieldWrapperStyle}>
+      <EuiFieldText
+        data-testid={pydanticFormField.id}
+        css={formFieldBaseStyle}
+        inputRef={inputRef}
+        disabled={disabled}
+        isInvalid={!!parseError}
+        placeholder="* * * * *"
+        onChange={(event) => {
+          onChange(event.target.value);
+        }}
+        onSelect={updateActiveField}
+        onFocus={updateActiveField}
+        onBlur={() => setActiveFieldIndex(null)}
+        value={fieldValue}
+        fullWidth
+      />
+      <div css={[cronLegendStyle]}>
+        {CRON_FIELD_KEYS.map((fieldKey) => {
+          const isInLayout = fieldLayout.includes(fieldKey);
+          return (
+            <button
+              key={fieldKey}
+              type="button"
+              disabled={disabled || !isInLayout}
+              aria-pressed={fieldKey === activeFieldKey}
+              onClick={() => focusCronField(fieldKey)}
+              css={[
+                cronLegendItemStyle,
+                fieldKey === activeFieldKey && cronActiveLegendItemStyle,
+                !isInLayout && cronInactiveLegendItemStyle,
+              ]}
+            >
+              {t(fieldKey)}
+            </button>
+          );
+        })}
+      </div>
+      {hintFieldKey && (
+        <>
+          <div css={cronPossibleValuesStyle}>{t('possibleValues')}</div>
+          <div css={cronHintListStyle}>
+            {[...SPECIAL_CHARACTER_HINTS, ...CRON_FIELD_HINTS[hintFieldKey]].map(({ symbol, translationKey }) => (
+              <React.Fragment key={symbol}>
+                <span css={cronHintSymbolStyle}>{symbol}</span>
+                <span>{t(translationKey)}</span>
+              </React.Fragment>
+            ))}
+          </div>
+        </>
+      )}
+      {parseError && (
+        <EuiText size="s" css={cronErrorStyle}>
+          {t('invalidExpression', { error: parseError })}
+        </EuiText>
+      )}
+      {description && (
+        <div css={cronDescriptionContainerStyle}>
+          <EuiText size="s" css={cronDescriptionStyle}>
+            {description}
+          </EuiText>
+          {nextOccurrences.length > 0 && (
+            <EuiText size="xs" css={cronHintStyle}>
+              {t('nextOccurrences', {
+                dates: nextOccurrences.map((date) => moment(date).format('YYYY-MM-DD HH:mm:ss')).join(', '),
+              })}
+            </EuiText>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/WfoPydanticForm/fields/index.ts

@@ -15,3 +15,4 @@ export * from './wfoPydanticFormUtils';
 export * from './WfoCallout';
 export * from './WfoMarkdownField';
 export * from './WfoTimestampField';
+export * from './WfoCron';

package/src/components/WfoPydanticForm/fields/styles.ts

@@ -14,6 +14,98 @@ export const getWfoObjectFieldStyles = () => {
   };
 };
 
+export const getWfoCronFieldStyles = ({ theme }: WfoThemeHelpers) => {
+  const cronFieldWrapperStyle = css({
+    width: '100%',
+  });
+
+  const cronLegendStyle = css({
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: theme.size.xs,
+    marginTop: theme.size.s,
+    fontSize: theme.size.m,
+  });
+
+  const cronLegendItemStyle = css({
+    color: theme.colors.textSubdued,
+    padding: `0 ${theme.size.xs}`,
+    borderRadius: theme.border.radius.small,
+    border: 'none',
+    backgroundColor: 'transparent',
+    font: 'inherit',
+    cursor: 'pointer',
+  });
+
+  const cronPossibleValuesStyle = css({
+    marginTop: theme.size.m,
+    marginLeft: theme.size.m,
+    fontSize: theme.size.m,
+    color: theme.colors.textSubdued,
+  });
+
+  const cronActiveLegendItemStyle = css({
+    color: theme.colors.textPrimary,
+    backgroundColor: theme.colors.backgroundBasePrimary,
+    fontWeight: theme.font.weight.bold,
+  });
+
+  const cronInactiveLegendItemStyle = css({
+    color: theme.colors.textDisabled,
+    cursor: 'default',
+  });
+
+  const cronDescriptionStyle = css({
+    color: theme.colors.textParagraph,
+    fontWeight: theme.font.weight.semiBold,
+  });
+
+  const cronHintStyle = css({
+    marginTop: theme.size.xs,
+    color: theme.colors.textSubdued,
+  });
+
+  const cronHintListStyle = css({
+    display: 'grid',
+    gridTemplateColumns: 'max-content 1fr',
+    columnGap: theme.size.m,
+    rowGap: theme.size.xxs,
+    margin: theme.size.m,
+    marginTop: theme.size.xs,
+    fontSize: theme.size.m,
+    color: theme.colors.textSubdued,
+  });
+
+  const cronHintSymbolStyle = css({
+    fontFamily: theme.font.familyCode,
+    color: theme.colors.textPrimary,
+  });
+
+  const cronErrorStyle = css({
+    marginTop: theme.size.xs,
+    color: theme.colors.textDanger,
+  });
+  const cronDescriptionContainerStyle = css({
+    border: `thin dotted ${theme.colors.borderBasePlain}`,
+    borderRadius: theme.border.radius.small,
+    padding: theme.size.m,
+  });
+  return {
+    cronFieldWrapperStyle,
+    cronLegendStyle,
+    cronLegendItemStyle,
+    cronActiveLegendItemStyle,
+    cronInactiveLegendItemStyle,
+    cronDescriptionStyle,
+    cronHintStyle,
+    cronHintListStyle,
+    cronHintSymbolStyle,
+    cronErrorStyle,
+    cronPossibleValuesStyle,
+    cronDescriptionContainerStyle,
+  };
+};
+
 export const getCommonFormFieldStyles = ({ theme }: WfoThemeHelpers) => {
   const formRowStyle = css({
     marginBottom: theme.base * 2,

package/src/components/WfoSearchPage/WfoSearchResults/WfoSearchResultItem.tsx

@@ -28,7 +28,8 @@ export const WfoSearchResultItem: FC<WfoSearchResultItemProps> = ({
   index,
 }) => {
   const t = useTranslations('search.page');
-  const matchingField = result.matching_field;
+  const matchingFields = result.matching_fields;
+  const matchingField = matchingFields?.[0];
   const { theme } = useOrchestratorTheme();
   const baseUrl = `${window.location.protocol}//${window.location.host}`;
   const detailUrl = getDetailUrl(result, baseUrl);

package/src/components/WfoSearchPage/utils.ts

@@ -7,6 +7,7 @@ import {
   Condition,
   EntityKind,
   Filter,
+  MatchingField,
   OperatorDisplay,
   PathInfo,
   RetrieverType,
@@ -194,7 +195,42 @@ const buildSubscriptionStatusFilter = (tab: WfoSubscriptionListTab) => {
   };
 };
 
-export const combineSearchFilters = (ruleGroup: RuleGroupType | false | undefined, tab: WfoSubscriptionListTab) => {
+/**
+ * Search-API field path holding the status of each entity kind. Only the SUBSCRIPTION path is in
+ * use; the others follow the same convention but should be verified against the backend paths
+ * endpoint before relying on them.
+ */
+const STATUS_FIELD_PATHS: Record<EntityKind, string> = {
+  [EntityKind.SUBSCRIPTION]: 'subscription.status',
+  [EntityKind.PROCESS]: 'process.last_status',
+  [EntityKind.PRODUCT]: 'product.status',
+  [EntityKind.WORKFLOW]: 'workflow.status',
+};
+
+/**
+ * The tab implicitly adds a status filter to the search (see addStatusFilterFromTab). The backend
+ * reports every matched filter in matching_fields, so those implicit matches are removed here to
+ * only show the user matches for filters they provided themselves. Matching on path AND value:
+ * a status match that cannot come from the tab filter is kept.
+ */
+export const removeTabStatusMatchingFields = (
+  matchingFields: MatchingField[] | null | undefined,
+  tab: WfoSubscriptionListTab,
+  entityKind: EntityKind,
+): MatchingField[] => {
+  const statusFieldPath = STATUS_FIELD_PATHS[entityKind];
+  const tabStatuses = getSubscriptionStatusesFromTab(tab);
+  return (
+    matchingFields?.filter((field) => {
+      const isTabStatusMatch =
+        field.path === statusFieldPath
+        && tabStatuses.some((status) => status.toLowerCase() === field.text.toLowerCase());
+      return !isTabStatusMatch;
+    }) ?? []
+  );
+};
+
+export const addStatusFilterFromTab = (ruleGroup: RuleGroupType | false | undefined, tab: WfoSubscriptionListTab) => {
   const userRuleGroup = ruleGroup === false ? undefined : ruleGroup;
   const ruleGroups = [buildSubscriptionStatusFilter(tab), userRuleGroup].filter(Boolean) as RuleGroupType[];
 

package/src/components/WfoSubscription/WfoInUseByRelations.tsx

@@ -14,9 +14,13 @@ import { getSubscriptionDetailStyles } from './styles';
 
 interface WfoInUseByRelationsProps {
   inUseByRelations: InUseByRelation[];
+  subscriptionPath?: string;
 }
 
-export const WfoInUseByRelations = ({ inUseByRelations }: WfoInUseByRelationsProps) => {
+export const WfoInUseByRelations = ({
+  inUseByRelations,
+  subscriptionPath = PATH_SUBSCRIPTIONS,
+}: WfoInUseByRelationsProps) => {
   const t = useTranslations('subscriptions.detail');
   const { inUseByRelationDetailsStyle } = useWithOrchestratorTheme(getSubscriptionDetailStyles);
   const subscriptionIds = inUseByRelations.map((relation) => relation.subscription_id).join('|');
@@ -42,7 +46,7 @@ export const WfoInUseByRelations = ({ inUseByRelations }: WfoInUseByRelationsPro
       {
         key: t('description'),
         value: (
-          <Link href={`${PATH_SUBSCRIPTIONS}/${inUseByRelationDetails.subscriptionId}`} target="_blank">
+          <Link href={`${subscriptionPath}/${inUseByRelationDetails.subscriptionId}`} target="_blank">
             {inUseByRelationDetails.description}
           </Link>
         ),

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);
               }}