@orchestrator-ui/orchestrator-ui-components 8.7.2 → 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.2';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.8.1';

package/src/hooks/usePathAutoComplete.spec.tsx

@@ -0,0 +1,64 @@
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { EntityKind } from '@/types';
+
+import { useFieldsPathInfo } from './usePathAutoComplete';
+
+const fetchPathsMock = jest.fn();
+
+jest.mock('@/rtk/endpoints', () => ({
+  useSearchPathsQuery: jest.fn(),
+  useLazySearchPathsQuery: () => [fetchPathsMock],
+  useSearchDefinitionsQuery: () => ({
+    data: {
+      boolean: {
+        operators: ['eq', 'neq'],
+        value_schema: { eq: { kind: 'boolean' }, neq: { kind: 'boolean' } },
+      },
+    },
+    isError: false,
+  }),
+}));
+
+describe('useFieldsPathInfo', () => {
+  beforeEach(() => {
+    fetchPathsMock.mockImplementation(({ q }: { q: string }) => ({
+      unwrap: () =>
+        Promise.resolve(
+          q === 'lldp' ?
+            { leaves: [{ name: 'lldp', ui_types: ['boolean'], paths: [] }], components: [] }
+          : { leaves: [], components: [] },
+        ),
+    }));
+  });
+
+  it('resolves the path info of an exactly matching leaf', async () => {
+    const { result } = renderHook(() => useFieldsPathInfo(['lldp'], EntityKind.SUBSCRIPTION));
+
+    await waitFor(() => expect(result.current.get('lldp')).toBeTruthy());
+    expect(result.current.get('lldp')).toMatchObject({
+      path: 'lldp',
+      ui_types: ['boolean'],
+      operators: ['eq', 'neq'],
+    });
+  });
+
+  it('stores null for a field the backend does not know', async () => {
+    const { result } = renderHook(() => useFieldsPathInfo(['nonexistent'], EntityKind.SUBSCRIPTION));
+
+    await waitFor(() => expect(result.current.has('nonexistent')).toBe(true));
+    expect(result.current.get('nonexistent')).toBeNull();
+  });
+
+  it('looks up each field at most once across rerenders', async () => {
+    const { result, rerender } = renderHook(({ fields }) => useFieldsPathInfo(fields, EntityKind.SUBSCRIPTION), {
+      initialProps: { fields: ['lldp'] },
+    });
+
+    await waitFor(() => expect(result.current.has('lldp')).toBe(true));
+    rerender({ fields: ['lldp'] });
+    rerender({ fields: ['lldp'] });
+
+    expect(fetchPathsMock).toHaveBeenCalledTimes(1);
+  });
+});

package/src/hooks/usePathAutoComplete.ts

@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-import { useSearchDefinitionsQuery, useSearchPathsQuery } from '@/rtk/endpoints';
-import { EntityKind, PathInfo, value_schema } from '@/types';
+import { useLazySearchPathsQuery, useSearchDefinitionsQuery, useSearchPathsQuery } from '@/rtk/endpoints';
+import { EntityKind, PathAutocompleteResponse, PathInfo, value_schema } from '@/types';
 
 import { useDebounce } from './useDebounce';
 
@@ -50,6 +50,52 @@ const FALLBACK_DEFINITIONS: Record<
   },
 };
 
+type SearchDefinitions = typeof FALLBACK_DEFINITIONS;
+
+const mapPathAutocompleteResponseToPathInfos = (
+  pathData: PathAutocompleteResponse,
+  definitions: SearchDefinitions,
+): PathInfo[] => {
+  const enrichedPaths: PathInfo[] = [];
+
+  // Process leaves first
+  (pathData.leaves || []).forEach((leaf) => {
+    const primaryType = leaf.ui_types[0] || 'string';
+    const typeDefinition = definitions[primaryType];
+
+    enrichedPaths.push({
+      path: leaf.name,
+      type: primaryType as 'string' | 'number' | 'datetime' | 'boolean',
+      operators: typeDefinition?.operators || [],
+      value_schema: typeDefinition?.value_schema || {},
+      group: 'leaf',
+      displayLabel: leaf.name,
+      ui_types: leaf.ui_types,
+      availablePaths: leaf.paths || [],
+      pathCount: leaf.paths ? leaf.paths?.length : 0,
+    });
+  });
+
+  (pathData.components || []).forEach((component) => {
+    const primaryType = component.ui_types[0] || 'string';
+    const typeDefinition = definitions[primaryType];
+
+    enrichedPaths.push({
+      path: component.name,
+      type: 'component',
+      operators: typeDefinition?.operators || [],
+      value_schema: typeDefinition?.value_schema || {},
+      group: 'component',
+      displayLabel: component.name,
+      ui_types: component.ui_types,
+      availablePaths: component.paths || [],
+      pathCount: component.paths ? component.paths?.length : 0,
+    });
+  });
+
+  return enrichedPaths;
+};
+
 export const usePathAutocomplete = (prefix: string, entityType: EntityKind) => {
   const [paths, setPaths] = useState<PathInfo[]>([]);
   const debouncedPrefix = useDebounce(prefix, 300);
@@ -71,44 +117,7 @@ export const usePathAutocomplete = (prefix: string, entityType: EntityKind) => {
       return;
     }
 
-    const enrichedPaths: PathInfo[] = [];
-
-    // Process leaves first
-    (pathData.leaves || []).forEach((leaf) => {
-      const primaryType = leaf.ui_types[0] || 'string';
-      const typeDefinition = definitions[primaryType];
-
-      enrichedPaths.push({
-        path: leaf.name,
-        type: primaryType as 'string' | 'number' | 'datetime' | 'boolean',
-        operators: typeDefinition?.operators || [],
-        value_schema: typeDefinition?.value_schema || {},
-        group: 'leaf',
-        displayLabel: leaf.name,
-        ui_types: leaf.ui_types,
-        availablePaths: leaf.paths || [],
-        pathCount: leaf.paths ? leaf.paths?.length : 0,
-      });
-    });
-
-    (pathData.components || []).forEach((component) => {
-      const primaryType = component.ui_types[0] || 'string';
-      const typeDefinition = definitions[primaryType];
-
-      enrichedPaths.push({
-        path: component.name,
-        type: 'component',
-        operators: typeDefinition?.operators || [],
-        value_schema: typeDefinition?.value_schema || {},
-        group: 'component',
-        displayLabel: component.name,
-        ui_types: component.ui_types,
-        availablePaths: component.paths || [],
-        pathCount: component.paths ? component.paths?.length : 0,
-      });
-    });
-
-    setPaths(enrichedPaths);
+    setPaths(mapPathAutocompleteResponseToPathInfos(pathData, definitions));
   }, [pathData, definitions, debouncedPrefix?.length]);
 
   const errorMessage =
@@ -118,3 +127,51 @@ export const usePathAutocomplete = (prefix: string, entityType: EntityKind) => {
 
   return { paths, loading: isLoading, error: errorMessage };
 };
+
+/**
+ * Resolves PathInfo for exact field paths that were never picked through the field
+ * selector, e.g. the fields of a query restored from the URL. Returns a map that gains
+ * an entry per field once its lookup settles: the matching PathInfo, or null when the
+ * backend does not know the path. Each field is looked up at most once.
+ */
+export const useFieldsPathInfo = (fields: string[], entityType: EntityKind) => {
+  const [fieldsPathInfo, setFieldsPathInfo] = useState<Map<string, PathInfo | null>>(new Map());
+  const requestedFieldsRef = useRef<Set<string>>(new Set());
+  const [fetchPaths] = useLazySearchPathsQuery();
+  const { data: definitions, isError: definitionsFailed } = useSearchDefinitionsQuery();
+
+  // Wait for the definitions request to settle so resolved fields get the backend's
+  // operator lists instead of the fallback ones.
+  const settledDefinitions = definitions ?? (definitionsFailed ? FALLBACK_DEFINITIONS : undefined);
+
+  useEffect(() => {
+    // Changing entity type invalidates previous lookups.
+    requestedFieldsRef.current = new Set();
+    setFieldsPathInfo(new Map());
+  }, [entityType]);
+
+  useEffect(() => {
+    if (!settledDefinitions) {
+      return;
+    }
+    const newFields = fields.filter((field) => field && !requestedFieldsRef.current.has(field));
+    newFields.forEach((field) => {
+      requestedFieldsRef.current.add(field);
+      fetchPaths({ q: field, entity_type: entityType }, true)
+        .unwrap()
+        .then((pathData) => {
+          const pathInfos = mapPathAutocompleteResponseToPathInfos(pathData, settledDefinitions);
+          const match =
+            pathInfos.find((pathInfo) => pathInfo.path === field)
+            ?? pathInfos.find((pathInfo) => pathInfo.availablePaths?.includes(field));
+          setFieldsPathInfo((previous) => new Map(previous).set(field, match ?? null));
+        })
+        .catch(() => {
+          // Allow a retry on a later render, e.g. after a transient network error.
+          requestedFieldsRef.current.delete(field);
+        });
+    });
+  }, [fields, entityType, fetchPaths, settledDefinitions]);
+
+  return fieldsPathInfo;
+};

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 {