@orchestrator-ui/orchestrator-ui-components 8.7.3 → 8.8.1

package/src/components/WfoTable/WfoTable/WfoTableExpandedRowReveal.spec.tsx

@@ -0,0 +1,120 @@
+/**
+ * The expanded ("match details") row under each data row hides itself with display: none and
+ * is revealed by sibling selectors that WfoTable puts on the data row: always when
+ * showExpandedRows is set, and on hover/focus otherwise. These tests pin the whole mechanism
+ * down at the DOM level: the detail row must be the data row's next sibling, the reveal rules
+ * must be emitted, and their selectors must actually match the detail row.
+ */
+import React from 'react';
+
+import { css } from '@emotion/react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import { ColumnType, WfoTable, WfoTableColumnConfig } from './WfoTable';
+
+jest.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+type Item = { id: string; name: string };
+
+const data: Item[] = [
+  { id: 'row-1', name: 'First row' },
+  { id: 'row-2', name: 'Second row' },
+];
+
+const columnConfig: WfoTableColumnConfig<Item> = {
+  name: {
+    columnType: ColumnType.DATA,
+    label: 'Name',
+  },
+};
+
+// Mimics WfoExpandingSearchRow: a <tr> that hides itself
+const hideStyle = css({ display: 'none' });
+const DetailRow = ({ text }: { text: string }) => (
+  <tr css={hideStyle}>
+    <td>{text}</td>
+  </tr>
+);
+
+const rowExpandingConfiguration = {
+  uniqueRowId: 'id' as keyof WfoTableColumnConfig<Item>,
+  uniqueRowIdToExpandedRowMap: {
+    'row-1': <DetailRow text="detail-1" />,
+    'row-2': <DetailRow text="detail-2" />,
+  },
+};
+
+// Emotion may insert rules through the CSSOM, leaving <style> tags without text content, so
+// read the rules from document.styleSheets. Returns [selectorText, display] pairs, with the
+// selector whitespace stripped since the CSSOM normalizes it.
+const getDisplayRules = () =>
+  Array.from(document.styleSheets)
+    .flatMap((sheet) => Array.from(sheet.cssRules))
+    .filter((rule): rule is CSSStyleRule => 'selectorText' in rule)
+    .map((rule): [string, string] => [rule.selectorText.replace(/\s+/g, ''), rule.style.display])
+    .filter(([, display]) => Boolean(display));
+
+const getRowPair = () => {
+  const dataRow = screen.getByText('First row').closest('tr');
+  const detailRow = dataRow?.nextElementSibling;
+  return { dataRow, detailRow };
+};
+
+// The reveal selectors resolve '&' to the emotion class composed on the data row
+const getDataRowEmotionClass = (dataRow: HTMLTableRowElement) => {
+  const emotionClass = Array.from(dataRow.classList).find((className) => className.startsWith('css-'));
+  expect(emotionClass).toBeDefined();
+  return emotionClass;
+};
+
+describe('WfoTable expanded row reveal', () => {
+  it('renders the detail row as next sibling of its data row, hidden by its own style', () => {
+    render(
+      <WfoTable<Item> data={data} columnConfig={columnConfig} rowExpandingConfiguration={rowExpandingConfiguration} />,
+    );
+
+    const { dataRow, detailRow } = getRowPair();
+    expect(dataRow).toBeInTheDocument();
+    expect(detailRow).toHaveTextContent('detail-1');
+
+    const detailRowClass = Array.from(detailRow!.classList).find((className) => className.startsWith('css-'));
+    expect(getDisplayRules()).toContainEqual([`.${detailRowClass}`, 'none']);
+  });
+
+  it('reveals every detail row through the sibling selector when showExpandedRows is set', () => {
+    render(
+      <WfoTable<Item>
+        data={data}
+        columnConfig={columnConfig}
+        rowExpandingConfiguration={rowExpandingConfiguration}
+        showExpandedRows
+      />,
+    );
+
+    const { dataRow, detailRow } = getRowPair();
+    const emotionClass = getDataRowEmotionClass(dataRow!);
+
+    expect(getDisplayRules()).toContainEqual([`.${emotionClass}+tr`, 'table-row']);
+    expect(detailRow!.matches(`.${emotionClass} + tr`)).toBe(true);
+  });
+
+  it('reveals a detail row on hover/focus of the data row or of the detail row itself when showExpandedRows is not set', () => {
+    render(
+      <WfoTable<Item> data={data} columnConfig={columnConfig} rowExpandingConfiguration={rowExpandingConfiguration} />,
+    );
+
+    const { dataRow, detailRow } = getRowPair();
+    const emotionClass = getDataRowEmotionClass(dataRow!);
+    const displayRules = getDisplayRules();
+
+    expect(displayRules).toContainEqual([`.${emotionClass}:hover+tr,.${emotionClass}:focus-within+tr`, 'table-row']);
+    // The rule that keeps the row open while hovering the revealed row itself (flicker fix)
+    expect(displayRules).toContainEqual([`.${emotionClass}+tr:hover,.${emotionClass}+tr:focus-within`, 'table-row']);
+
+    // :hover cannot be simulated in jsdom; verify the selectors structurally instead
+    expect(detailRow!.matches(`.${emotionClass} + tr`)).toBe(true);
+  });
+});

package/src/components/WfoTable/WfoTable/styles.ts

@@ -160,8 +160,13 @@ export const getWfoTableStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers)
     '.eui-xScroll': { display: 'flex', justifyContent: 'flex-start' },
   });
 
+  const showExpandedRowStyle = css({
+    '& + tr': { display: 'table-row' },
+  });
+
   const toggleExpandedRowOnHoverStyle = css({
     '&:hover + tr, &:focus-within + tr': { display: 'table-row' },
+    '& + tr:hover, & + tr:focus-within': { display: 'table-row' },
   });
 
   return {
@@ -181,6 +186,7 @@ export const getWfoTableStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers)
     dragAndDropStyle,
     paginationStyle,
     setWidth,
+    showExpandedRowStyle,
     toggleExpandedRowOnHoverStyle,
   };
 };

package/src/components/WfoTable/utils/tableConfigPersistence.ts

@@ -3,6 +3,7 @@ import { TableColumnKeys } from './columns';
 export type StoredTableConfig<T> = {
   hiddenColumns: TableColumnKeys<T>;
   selectedPageSize: number;
+  showMatchDetails?: boolean;
 };
 
 export const isValidLocalStorageTableConfig = <T>(object: StoredTableConfig<T>): object is StoredTableConfig<T> =>

package/src/components/WfoTimeline/styles.ts

@@ -57,7 +57,7 @@ export const getTimelineStyles = ({ theme }: WfoThemeHelpers) => {
     paddingLeft: theme.font.baseline * 4,
     paddingRight: theme.font.baseline * 4,
     position: 'sticky',
-    top: timelineOutlineWidthPx,
+    top: theme.base / 4,
     zIndex: 2, // Some EUI components have a zIndex
     display: 'flex',
 

package/src/components/WfoWorkflowUserGuide/WfoPageWithUserGuide.tsx

@@ -29,9 +29,15 @@ export const WfoPageWithUserGuide = ({ workflowName, children }: WfoFormWithUser
   );
 
   return (
-    <EuiFlexGroup gutterSize="s" direction={isBigScreen ? 'row' : 'column'}>
+    <EuiFlexGroup
+      gutterSize="s"
+      direction={isBigScreen ? 'row' : 'column'}
+      alignItems={isBigScreen ? 'flexStart' : 'stretch'}
+    >
       {!isBigScreen && workflowGuideExpandablePanel}
-      <EuiFlexItem grow={true}>{children}</EuiFlexItem>
+      <EuiFlexItem grow={true} css={{ minWidth: 0 }}>
+        {children}
+      </EuiFlexItem>
       {isBigScreen && workflowGuideExpandablePanel}
     </EuiFlexGroup>
   );

package/src/components/WfoWorkflowUserGuide/WfoWorkflowGuideExpandablePanel.tsx

@@ -29,6 +29,7 @@ interface WfoUserGuideToggleStripProps {
   ariaLabel: string;
   isBigScreen: boolean;
   noLeadingBorder?: boolean;
+  sticky?: boolean;
   children: ReactNode;
 }
 
@@ -37,37 +38,51 @@ const WfoWorkflowGuideToggleStrip = ({
   ariaLabel,
   isBigScreen,
   noLeadingBorder,
+  sticky,
   children,
 }: WfoUserGuideToggleStripProps) => {
   const {
     fullHeightStyle,
+    stickyStripContainerStyle,
+    stripIconStyle,
+    stickyPanelFillStyle,
     toggleStripContainerStyle,
     toggleStripContainerHorizontalStyle,
+    stickyHorizontalStripContainerStyle,
     toggleStripPanelStyle,
     noLeftBorderStyle,
     noBottomBorderStyle,
   } = useWithOrchestratorTheme(getStyles);
 
+  const containerStyle =
+    isBigScreen ?
+      sticky ? stickyStripContainerStyle
+      : toggleStripContainerStyle
+    : sticky ? stickyHorizontalStripContainerStyle
+    : toggleStripContainerHorizontalStyle;
+
   return (
-    <EuiFlexItem
-      grow={false}
-      onClick={onToggle}
-      aria-label={ariaLabel}
-      css={isBigScreen ? toggleStripContainerStyle : toggleStripContainerHorizontalStyle}
-    >
+    <EuiFlexItem grow={false} onClick={onToggle} aria-label={ariaLabel} css={containerStyle}>
       <EuiPanel
         hasShadow={false}
-        css={[toggleStripPanelStyle, noLeadingBorder && (isBigScreen ? noLeftBorderStyle : noBottomBorderStyle)]}
+        css={[
+          toggleStripPanelStyle,
+          sticky && stickyPanelFillStyle,
+          noLeadingBorder && (isBigScreen ? noLeftBorderStyle : noBottomBorderStyle),
+        ]}
       >
-        <EuiFlexGroup
-          direction={isBigScreen ? 'column' : 'row'}
-          alignItems="center"
-          gutterSize="s"
-          justifyContent="center"
-          css={fullHeightStyle}
-        >
-          {children}
-        </EuiFlexGroup>
+        {isBigScreen ?
+          <div css={stripIconStyle}>{children}</div>
+        : <EuiFlexGroup
+            direction="row"
+            alignItems="center"
+            gutterSize="s"
+            justifyContent="center"
+            css={fullHeightStyle}
+          >
+            {children}
+          </EuiFlexGroup>
+        }
       </EuiPanel>
     </EuiFlexItem>
   );
@@ -82,12 +97,13 @@ const WfoWorkflowGuideMarkdown = ({ workflowName, isBigScreen }: { workflowName:
 
   return (
     <div css={isBigScreen ? guideBodyStyle : guideStackedBodyStyle}>
-      {(isLoading && <EuiLoadingSpinner size="m" />)
-        || ((isError || !content) && <EuiText color="subdued">{t('noGuideAvailable')}</EuiText>) || (
-          <EuiPanel paddingSize="m" hasShadow css={isBigScreen ? guidePanelStyle : guideStackedPanelStyle}>
+      {(isLoading && <EuiLoadingSpinner size="m" />) || (
+        <EuiPanel paddingSize="m" hasShadow css={isBigScreen ? guidePanelStyle : guideStackedPanelStyle}>
+          {((isError || !content) && <EuiText color="subdued">{t('noGuideAvailable')}</EuiText>) || (
             <EuiMarkdownFormat>{content}</EuiMarkdownFormat>
-          </EuiPanel>
-        )}
+          )}
+        </EuiPanel>
+      )}
     </div>
   );
 };
@@ -97,14 +113,7 @@ export const WfoWorkflowGuideExpandablePanel = ({ workflowName, isExpanded, onTo
   const { fullHeightStyle, guideExpandedItemStyle, guideExpandedFillStyle } = useWithOrchestratorTheme(getStyles);
   const isBigScreen = useIsWithinBreakpoints(['xl', 'xxl']);
 
-  const OpenGuideButton = () => (
-    <EuiFlexItem grow={false}>
-      <EuiFlexGroup gutterSize="xs" alignItems="center" direction={isBigScreen ? 'column' : 'row'}>
-        <EuiIcon type={isBigScreen ? 'arrowLeft' : 'arrowDown'} size="xxl" color="primary" />
-        <EuiIcon type={'info'} size="xxl" color="primary" />
-      </EuiFlexGroup>
-    </EuiFlexItem>
-  );
+  const OpenGuideButton = () => <EuiIcon type={'info'} size="xxl" color="primary" />;
 
   const CloseGuideButton = () => (
     <EuiFlexItem grow={false}>
@@ -114,7 +123,7 @@ export const WfoWorkflowGuideExpandablePanel = ({ workflowName, isExpanded, onTo
 
   if (!isExpanded) {
     return (
-      <WfoWorkflowGuideToggleStrip onToggle={onToggle} ariaLabel={t('show')} isBigScreen={isBigScreen}>
+      <WfoWorkflowGuideToggleStrip onToggle={onToggle} ariaLabel={t('show')} isBigScreen={isBigScreen} sticky>
         <OpenGuideButton />
       </WfoWorkflowGuideToggleStrip>
     );

package/src/components/WfoWorkflowUserGuide/styles.ts

@@ -3,6 +3,11 @@ import { css } from '@emotion/react';
 import { WfoThemeHelpers } from '@/hooks';
 
 export const getStyles = ({ theme }: WfoThemeHelpers) => {
+  const navigationHeight = theme.base * 3;
+  const timelineStickyHeight = theme.base * 4;
+  const stripBottomGap = theme.base;
+  const stripMinHeight = theme.base * 40;
+
   const fullHeightStyle = css({
     height: '100%',
   });
@@ -12,25 +17,56 @@ export const getStyles = ({ theme }: WfoThemeHelpers) => {
     cursor: 'pointer',
   });
 
+  const stickyStripContainerStyle = css({
+    width: theme.base * 4,
+    cursor: 'pointer',
+    alignSelf: 'stretch',
+    position: 'sticky',
+    top: timelineStickyHeight,
+    minHeight: stripMinHeight,
+    maxHeight: `calc(100vh - ${navigationHeight + timelineStickyHeight + stripBottomGap}px)`,
+  });
+
+  const stripIconStyle = css({
+    display: 'flex',
+    justifyContent: 'center',
+  });
+
+  const stickyPanelFillStyle = css({
+    flexGrow: 1,
+  });
+
   const toggleStripContainerHorizontalStyle = css({
     width: '100%',
     height: theme.base * 4,
     cursor: 'pointer',
   });
 
+  const stickyHorizontalStripContainerStyle = css({
+    width: '100%',
+    height: theme.base * 4,
+    cursor: 'pointer',
+    position: 'sticky',
+    top: timelineStickyHeight,
+    zIndex: 2,
+  });
+
   const toggleStripPanelStyle = css({
     height: '100%',
     backgroundColor: theme.colors.backgroundBasePrimary,
-    border: `2px dashed ${theme.colors.backgroundLightPrimary}`,
-    transition: 'box-shadow 100ms ease-in-out, border-style 100ms ease-in-out',
+    border: `2px solid ${theme.colors.backgroundLightPrimary}`,
+    transition: 'border-color 100ms ease-in-out',
     '&:hover': {
-      borderStyle: 'solid',
-      boxShadow: `0 0 0 2px ${theme.colors.backgroundBasePrimary}`,
+      borderColor: theme.colors.borderBasePrimary,
     },
   });
 
   const guideExpandedItemStyle = css({
-    position: 'relative',
+    alignSelf: 'stretch',
+    position: 'sticky',
+    top: timelineStickyHeight,
+    minHeight: stripMinHeight,
+    maxHeight: `calc(100vh - ${navigationHeight + timelineStickyHeight + stripBottomGap}px)`,
   });
 
   const guideExpandedFillStyle = css({
@@ -41,8 +77,10 @@ export const getStyles = ({ theme }: WfoThemeHelpers) => {
   const guidePanelStyle = css({
     height: '100%',
     overflowY: 'auto',
-    border: `2px dashed ${theme.colors.backgroundLightPrimary}`,
+    border: `2px solid ${theme.colors.backgroundLightPrimary}`,
     borderRightWidth: 0,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
   });
 
   const guideBodyStyle = css({
@@ -54,10 +92,14 @@ export const getStyles = ({ theme }: WfoThemeHelpers) => {
 
   const noLeftBorderStyle = css({
     borderLeftWidth: 0,
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
   });
 
   const noBottomBorderStyle = css({
     borderBottomWidth: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
   });
 
   const guideStackedBodyStyle = css({
@@ -66,14 +108,20 @@ export const getStyles = ({ theme }: WfoThemeHelpers) => {
   });
 
   const guideStackedPanelStyle = css({
-    border: `2px dashed ${theme.colors.backgroundLightPrimary}`,
+    border: `2px solid ${theme.colors.backgroundLightPrimary}`,
     borderTopWidth: 0,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
   });
 
   return {
     fullHeightStyle,
     toggleStripContainerStyle,
+    stickyStripContainerStyle,
+    stripIconStyle,
+    stickyPanelFillStyle,
     toggleStripContainerHorizontalStyle,
+    stickyHorizontalStripContainerStyle,
     toggleStripPanelStyle,
     noLeftBorderStyle,
     noBottomBorderStyle,

package/src/configuration/constants.ts

@@ -34,7 +34,7 @@ export const METADATA_PRODUCT_ENDPOINT = 'products';
 export const METADATA_PRODUCT_BLOCK_ENDPOINT = 'product_blocks';
 export const METADATA_RESOURCE_TYPE_ENDPOINT = 'resource_types';
 export const METADATA_WORKFLOWS_ENDPOINT = 'workflows';
-export const METADATA_SCHEDULES_ENDPOINT = 'schedules';
+export const METADATA_SCHEDULES_ENDPOINT = 'schedules/';
 
 //search
 export const SEARCH_QUERY_RESULTS_ENDPOINT = 'search/queries';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.7.3';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.8.1';

package/src/hooks/useStoredTableConfig.ts

@@ -23,6 +23,7 @@ export const useStoredTableConfig = <T>(localeStorageKey: string) => {
       if (storedConfig) {
         tableConfig.hiddenColumns = storedConfig.hiddenColumns;
         tableConfig.selectedPageSize = storedConfig.selectedPageSize;
+        tableConfig.showMatchDetails = storedConfig.showMatchDetails;
       }
       return tableConfig;
     } catch {

package/src/messages/en-GB.json

@@ -24,6 +24,7 @@
     "searchModalText": "<p>Different options are available from free text search covering all data columns, or column specific filtering. Note that: <p></p><ul><li>Hidden columns are included</li> <li>Searching is case-insensitive</li> <li>Ordering of words does not matter (unless it is a Phrase)</li> <li>TSV (text search vector) search only available for subscriptions table</li></ul></p> <p>For example:</p> <li><b>\"l2vpn\"</b> – free text search</li> <li><b>tag:l2vpn</b> – search in a specific column</li><li><b>tag:lp description:test</b> – search in multiple columns</li><li><b>tag:(lp|lr)</b> – multiselect within 1 column</li><li><b>-tag:lp</b> – negated filter</li><li><b>test*</b> – prefix filter</li> <p></p><p><b>Note:</b> Search words containing characters `|-*():\"` may not be valid, as they are part of the search query grammar</p><p>Invalid search strings are for example:</p><ul><li>2a10:e300:fff0::/48</li> <li>\"node123(planned)\"</li> <li>\"node123|planned\"</li></ul>",
     "searchModalTitle": "Search string options",
     "showAllColumnsInDetailView": "Show all columns in detail view",
+    "showMatchDetails": "Show match details",
     "tableSettings": "Table settings",
     "unauthorizedPage": "You are not authorized to see this page",
     "unknownError": "Unknown error"
@@ -520,7 +521,8 @@
       "title": "Subscriptions",
       "workflowsTab": {
         "startWithNewestLabel": "Start with newest first",
-        "startWithOldestLabel": "Start with oldest first"
+        "startWithOldestLabel": "Start with oldest first",
+        "hideValidateTasks": "Hide validation tasks"
       }
     },
     "index": {

package/src/messages/nl-NL.json

@@ -24,6 +24,7 @@
     "searchModalText": "<p>Er zijn verschillende opties beschikbaar: zoeken in vrije tekst voor alle datakolommen en specifiek per kolom te filteren. Houd er rekening mee dat: </p><p></p><ul><li>Verborgen kolommen zijn inbegrepen</li> <li>Zoeken is niet hoofdlettergevoelig</li> <li>De volgorde van woorden doet er niet toe (tenzij het een quote)</li> <li>TSV (text search vector) zoekactie alleen beschikbaar voor subscription tabel</li></ul><p>Bijvoorbeeld:</p> <li><b>\"l2vpn\"</b> – vrije tekst search</li> <li><b>tag:l2vpn</b> – zoeken in een specifieke kolom</li> <li><b>tag:lp beschrijving: test</b> – zoeken in meerdere kolommen</li><li><b>tag:(lp|lr)</b> – multi select binnen 1 kolom</li> <li><b>-tag:lp</b> – omgekeerd filteren</li> <li><b>test*</b> – prefix filter</li> <p></p><p><b>Opmerking:</b> Zoeken op woorden die tekens `|-*():\"` bevatten, zijn mogelijk niet geldig, omdat ze deel uitmaken van de grammatica van de zoekfunctie</p><p>Ongeldige zoekwoorden zijn bijvoorbeeld:</p><ul><li>2a10:e300:fff0::/48</li> <li>\"node123(gepland)\"</li> <li>\"node123|gepland\"</li></ul>",
     "searchModalTitle": "Zoekwoorden opties",
     "showAllColumnsInDetailView": "Toon alle kolommen in detailweergave",
+    "showMatchDetails": "Toon overeenkomstdetails",
     "tableSettings": "Tabel instellingen",
     "unauthorizedPage": "Niet geautoriseerd om deze pagina te bekijken",
     "unknownError": "Onbekende fout"
@@ -519,8 +520,9 @@
       "tag": "Tag",
       "title": "Subscriptions",
       "workflowsTab": {
-        "startWithNewestLabel": "Start met nieuwste eerst",
-        "startWithOldestLabel": "Start met oudste eerst"
+        "startWithNewestLabel": "Start met nieuwste",
+        "startWithOldestLabel": "Start met oudste",
+        "hideValidateTasks": "Verberg validatie taken"
       }
     },
     "index": {

package/src/pages/WfoSearchPocPage.tsx

@@ -88,7 +88,6 @@ const getDataFromResponse = <T extends object>(
       },
       {} as Record<string, ReactNode>,
     ),
-    shouldOnlyShowOnHover: true,
   };
 
   const items: T[] = responseColumns.map((responseColumn) => {
@@ -508,6 +507,7 @@ export const WfoSearchPocPage = () => {
         data={subscriptionListItems}
         rowExpandingConfiguration={rowExpandingConfiguration}
         defaultHiddenColumns={tableDefaults?.hiddenColumns}
+        defaultShowMatchDetails={tableDefaults?.showMatchDetails}
         filterString={filterString}
         handleSearch={handleApplyFilter}
         isLoading={isFetching}

package/src/pages/tasks/WfoTasksListPage.tsx

@@ -110,6 +110,7 @@ export const WfoTasksListPage = () => {
       'productName',
       'customer',
       'customerAbbreviation',
+      'note',
       'subscriptions',
       'createdBy',
       'assignee',

package/src/types/types.ts

@@ -134,12 +134,12 @@ export interface ProductDefinition {
 export type ProductsSummary = Pick<ProductDefinition, 'name'> & SubscriptionsResult<never>;
 
 export enum WorkflowTarget {
-  CREATE = 'create',
-  MODIFY = 'modify',
-  TERMINATE = 'terminate',
-  SYSTEM = 'system',
-  VALIDATE = 'validate',
-  RECONCILE = 'reconcile',
+  CREATE = 'CREATE',
+  MODIFY = 'MODIFY',
+  TERMINATE = 'TERMINATE',
+  SYSTEM = 'SYSTEM',
+  VALIDATE = 'VALIDATE',
+  RECONCILE = 'RECONCILE',
 }
 
 export type Process = {
@@ -624,11 +624,11 @@ export type SubscriptionActions = {
   reason?: string;
   locked_relations?: string[];
   locked_relations_detail?: SubscriptionRelation[];
-  modify: SubscriptionAction[];
-  terminate: SubscriptionAction[];
-  system: SubscriptionAction[];
-  validate: SubscriptionAction[];
-  reconcile: SubscriptionAction[];
+  [WorkflowTarget.MODIFY]: SubscriptionAction[];
+  [WorkflowTarget.TERMINATE]: SubscriptionAction[];
+  [WorkflowTarget.SYSTEM]: SubscriptionAction[];
+  [WorkflowTarget.VALIDATE]: SubscriptionAction[];
+  [WorkflowTarget.RECONCILE]: SubscriptionAction[];
 };
 
 export enum CacheTagType {

package/src/utils/getDefaultTableConfig.ts

@@ -19,10 +19,12 @@ import { ProductBlockDefinition, ProductDefinition, ResourceTypeDefinition, Work
 function getTableConfig<T>(
   hiddenColumns: (keyof T)[] = [],
   selectedPageSize = DEFAULT_PAGE_SIZE,
+  showMatchDetails = false,
 ): StoredTableConfig<T> {
   return {
     selectedPageSize,
     hiddenColumns,
+    showMatchDetails,
   };
 }