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

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

@@ -10,6 +10,7 @@ import { EuiButtonGroup, EuiDatePicker, EuiFieldNumber, EuiFieldText } from '@el
 import { WfoRangeEditor } from '@/components/WfoTable/WfoStructuredSearchTable/WfoRangeEditor';
 import { getWfoStructuredSearchTableStyles } from '@/components/WfoTable/WfoStructuredSearchTable/styles';
 import { useWithOrchestratorTheme } from '@/hooks';
+import type { WfoQueryBuilderContext } from '@/types';
 
 export interface EditorInputFieldProps<T = string> {
   handleOnChange: ValueEditorProps['handleOnChange'];
@@ -176,7 +177,8 @@ export const WfoValueEditor = ({
     return TextEditor;
   };
 
-  const fieldPathInfoMap = context?.fieldPathInfoMap;
+  const queryBuilderContext: WfoQueryBuilderContext | undefined = context;
+  const fieldPathInfoMap = queryBuilderContext?.fieldPathInfoMap;
 
   const fieldInfo = fieldPathInfoMap && fieldPathInfoMap.has(fieldName) ? fieldPathInfoMap.get(fieldName) : undefined;
   const uiFieldType = fieldInfo?.ui_types?.[0] || UiFieldType.text;
@@ -198,7 +200,7 @@ export const WfoValueEditor = ({
     // the boolean buttons means "select" — its click fires only after this keydown, so
     // searching there would use the pre-toggle value.
     if (!(event.target instanceof HTMLInputElement)) return;
-    context?.onValueEditorEnter?.();
+    queryBuilderContext?.onValueEditorEnter();
   };
 
   // react-querybuilder delivers the standard `rule-value` class via this prop; the wrapper

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

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 
 import { WfoThemeHelpers } from '@/hooks';
 
-export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) => {
+export const getWfoStructuredSearchTableStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers) => {
   const queryBuilderContainerStyles = css({
     backgroundColor: theme.colors.backgroundBaseSubdued,
     padding: theme.base / 2,
@@ -63,7 +63,7 @@ export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) =>
   const ruleGroupContainerBlueStyles = css({
     ...ruleGroupContainerBase,
     borderRadius: theme.border.radius.small,
-    backgroundColor: '#E9F1F9',
+    backgroundColor: isDarkModeActive ? theme.colors.backgroundLightPrimary : '#E9F1F9',
   });
 
   const ruleGroupContainerWhiteStyles = css({
@@ -83,7 +83,7 @@ export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) =>
     ...ruleGroupContainerBase,
     borderBottomLeftRadius: theme.border.radius.small,
     borderTopLeftRadius: theme.border.radius.small,
-    backgroundColor: '#E9F1F9',
+    backgroundColor: isDarkModeActive ? theme.colors.backgroundLightPrimary : '#E9F1F9',
   });
 
   const removeGroupActionStyles = css({
@@ -99,11 +99,10 @@ export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) =>
   });
 
   const expandingSearchRowStyles = css({
-    padding: theme.base / 2,
-    height: theme.base * 2,
+    padding: `${theme.base / 4}px ${theme.base / 2}px`,
     borderRadius: theme.border.radius.medium,
-    border: 'thin solid FEF7E0',
-    backgroundColor: '#FEF7E0',
+    border: `thin solid ${theme.colors.highlight}`,
+    backgroundColor: theme.colors.highlight,
   });
   const expandingRowBodyStyles = css({
     display: 'flex',
@@ -166,12 +165,12 @@ export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) =>
     display: 'none',
   });
   const dotStyles = css({
-    padding: theme.base / 4,
+    padding: `${theme.base / 8}px ${theme.base / 4}px`,
   });
 
   const expandingRowFieldStyles = css({
     display: 'flex',
-    padding: theme.base / 4,
+    padding: `${theme.base / 8}px ${theme.base / 4}px`,
     alignItems: 'center',
   });
 

package/src/components/WfoTable/WfoTable/WfoTable.tsx

@@ -13,6 +13,7 @@ import { DEFAULT_PAGE_SIZES } from '../utils/constants';
 import { getPageCount } from '../utils/tableUtils';
 import { WfoTableDataRows } from './WfoTableDataRows';
 import { WfoTableHeaderRow } from './WfoTableHeaderRow';
+import { WfoTableSkeletonRows } from './WfoTableSkeletonRows';
 import { getWfoTableStyles } from './styles';
 import { getColumnWidthsFromConfig, getSortedVisibleColumns, usePageIndexBoundsGuard } from './utils';
 
@@ -78,12 +79,14 @@ export type WfoTableProps<T extends object> = {
   hiddenColumns?: TableColumnKeys<T>;
   columnOrder?: TableColumnKeys<T>;
   isLoading?: boolean;
+  loadingSkeletonRowCount?: number;
   dataSorting?: WfoDataSorting<T>[];
   rowExpandingConfiguration?: {
     uniqueRowId: keyof WfoTableColumnConfig<T>;
     uniqueRowIdToExpandedRowMap: Record<string, ReactNode>;
-    shouldOnlyShowOnHover?: boolean;
   };
+  // When true, every row's expanded detail row is revealed at once (otherwise all are hidden)
+  showExpandedRows?: boolean;
   pagination?: Pagination;
   overrideHeader?: (
     tableHeaderEntries: Array<[string, WfoTableControlColumnConfigItem<T> | WfoTableDataColumnConfigItem<T, keyof T>]>,
@@ -105,8 +108,10 @@ export const WfoTable = <T extends object>({
   hiddenColumns = [],
   columnOrder = [],
   isLoading = false,
+  loadingSkeletonRowCount,
   dataSorting = [],
   rowExpandingConfiguration,
+  showExpandedRows = false,
   pagination,
   overrideHeader,
   onUpdateDataSorting,
@@ -123,6 +128,8 @@ export const WfoTable = <T extends object>({
   const dataLength = data.length;
   usePageIndexBoundsGuard({ dataLength, isLoading, pagination });
 
+  const showLoadingSkeleton = !!loadingSkeletonRowCount && isLoading && dataLength === 0;
+
   const parentRef = useRef<HTMLDivElement>(null);
 
   const columnConfigWithFiller: WfoTableColumnConfig<T> =
@@ -190,6 +197,77 @@ export const WfoTable = <T extends object>({
   const virtualTrHeight = virtualItems[0]?.start ?? 0;
   const bottomSpacerHeight = totalSize - lastVirtualItemEnd;
 
+  const WfoTableBody = () => {
+    if (showLoadingSkeleton) {
+      return (
+        <tbody css={bodyLoadingStyle} aria-busy={true}>
+          <WfoTableSkeletonRows
+            rowCount={loadingSkeletonRowCount}
+            columnConfig={configWithLocalWidths}
+            hiddenColumns={hiddenColumns}
+            columnOrder={columnOrder}
+          />
+        </tbody>
+      );
+    }
+
+    if (dataLength === 0) {
+      return (
+        <tbody css={isLoading && bodyLoadingStyle}>
+          <tr css={rowStyle}>
+            <td colSpan={sortedVisibleColumns.length} css={[cellStyle, emptyTableMessageStyle]}>
+              {isLoading ? t('loading') : t('noItemsFound')}
+            </td>
+          </tr>
+        </tbody>
+      );
+    }
+
+    if (isVirtualized && height) {
+      return (
+        <tbody>
+          <tr
+            style={{
+              height: virtualTrHeight,
+            }}
+          />
+
+          {virtualItems.map((virtualRow) => (
+            <WfoTableDataRows
+              key={virtualRow.key}
+              data={[data[virtualRow.index]]}
+              columnConfig={configWithLocalWidths}
+              hiddenColumns={hiddenColumns}
+              columnOrder={columnOrder}
+              rowExpandingConfiguration={rowExpandingConfiguration}
+              showExpandedRows={showExpandedRows}
+              onRowClick={onRowClick}
+            />
+          ))}
+          <tr
+            style={{
+              height: bottomSpacerHeight,
+            }}
+          />
+        </tbody>
+      );
+    }
+
+    return (
+      <tbody css={isLoading && bodyLoadingStyle}>
+        <WfoTableDataRows
+          data={data}
+          columnConfig={configWithLocalWidths}
+          hiddenColumns={hiddenColumns}
+          columnOrder={columnOrder}
+          rowExpandingConfiguration={rowExpandingConfiguration}
+          showExpandedRows={showExpandedRows}
+          onRowClick={onRowClick}
+        />
+      </tbody>
+    );
+  };
+
   return (
     <>
       <div
@@ -212,50 +290,7 @@ export const WfoTable = <T extends object>({
               />
             </thead>
           }
-          {dataLength === 0 ?
-            <tbody css={isLoading && bodyLoadingStyle}>
-              <tr css={rowStyle}>
-                <td colSpan={sortedVisibleColumns.length} css={[cellStyle, emptyTableMessageStyle]}>
-                  {isLoading ? t('loading') : t('noItemsFound')}
-                </td>
-              </tr>
-            </tbody>
-          : isVirtualized && height ?
-            <tbody>
-              <tr
-                style={{
-                  height: virtualTrHeight,
-                }}
-              />
-
-              {virtualItems.map((virtualRow) => (
-                <WfoTableDataRows
-                  key={virtualRow.key}
-                  data={[data[virtualRow.index]]}
-                  columnConfig={configWithLocalWidths}
-                  hiddenColumns={hiddenColumns}
-                  columnOrder={columnOrder}
-                  rowExpandingConfiguration={rowExpandingConfiguration}
-                  onRowClick={onRowClick}
-                />
-              ))}
-              <tr
-                style={{
-                  height: bottomSpacerHeight,
-                }}
-              />
-            </tbody>
-          : <tbody css={isLoading && bodyLoadingStyle}>
-              <WfoTableDataRows
-                data={data}
-                columnConfig={configWithLocalWidths}
-                hiddenColumns={hiddenColumns}
-                columnOrder={columnOrder}
-                rowExpandingConfiguration={rowExpandingConfiguration}
-                onRowClick={onRowClick}
-              />
-            </tbody>
-          }
+          {<WfoTableBody />}
         </table>
       </div>
       {pagination && (

package/src/components/WfoTable/WfoTable/WfoTableDataRows.tsx

@@ -11,7 +11,14 @@ import { getSortedVisibleColumns } from './utils';
 
 export type WfoTableDataRowsProps<T extends object> = Pick<
   WfoTableProps<T>,
-  'data' | 'columnConfig' | 'hiddenColumns' | 'columnOrder' | 'rowExpandingConfiguration' | 'onRowClick' | 'className'
+  | 'data'
+  | 'columnConfig'
+  | 'hiddenColumns'
+  | 'columnOrder'
+  | 'rowExpandingConfiguration'
+  | 'showExpandedRows'
+  | 'onRowClick'
+  | 'className'
 >;
 
 export const DATA_ROW_CLASS = 'data-row';
@@ -24,6 +31,7 @@ export const WfoTableDataRows = <T extends object>({
   hiddenColumns = [],
   columnOrder = [],
   rowExpandingConfiguration,
+  showExpandedRows,
   onRowClick,
   className,
 }: WfoTableDataRowsProps<T>) => {
@@ -34,6 +42,7 @@ export const WfoTableDataRows = <T extends object>({
     dataRowStyle,
     clickableStyle,
     setWidth,
+    showExpandedRowStyle,
     toggleExpandedRowOnHoverStyle,
   } = useWithOrchestratorTheme(getWfoTableStyles);
 
@@ -49,7 +58,7 @@ export const WfoTableDataRows = <T extends object>({
               rowStyle,
               dataRowStyle,
               onRowClick && clickableStyle,
-              rowExpandingConfiguration?.shouldOnlyShowOnHover && toggleExpandedRowOnHoverStyle,
+              rowExpandingConfiguration && (showExpandedRows ? showExpandedRowStyle : toggleExpandedRowOnHoverStyle),
             ]}
             onClick={() => onRowClick?.(row)}
           >

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

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { EuiSkeletonText } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+import { toOptionalArrayEntry } from '@/utils';
+
+import { ColumnType, WfoTableProps } from './WfoTable';
+import { getWfoTableStyles } from './styles';
+import { getSortedVisibleColumns } from './utils';
+
+export type WfoTableSkeletonRowsProps<T extends object> = Pick<
+  WfoTableProps<T>,
+  'columnConfig' | 'hiddenColumns' | 'columnOrder'
+> & {
+  rowCount: number;
+};
+
+export const WfoTableSkeletonRows = <T extends object>({
+  rowCount,
+  columnConfig,
+  hiddenColumns = [],
+  columnOrder = [],
+}: WfoTableSkeletonRowsProps<T>) => {
+  const { cellStyle, cellContentStyle, rowStyle, setWidth } = useWithOrchestratorTheme(getWfoTableStyles);
+
+  const sortedVisibleColumns = getSortedVisibleColumns(columnConfig, columnOrder, hiddenColumns);
+
+  return (
+    <>
+      {[...Array(rowCount)].map((_, rowIndex) => (
+        <tr key={`skeleton-row-${rowIndex}`} css={rowStyle}>
+          {sortedVisibleColumns.map(([key, columnConfig]) => (
+            <td
+              key={key}
+              css={[
+                ...toOptionalArrayEntry(cellStyle, !columnConfig.disableDefaultCellStyle),
+                setWidth(columnConfig.width),
+              ]}
+            >
+              {columnConfig.columnType === ColumnType.DATA && (
+                <div css={cellContentStyle}>
+                  <EuiSkeletonText lines={1} size="m" isLoading />
+                </div>
+              )}
+            </td>
+          ))}
+        </tr>
+      ))}
+    </>
+  );
+};

package/src/components/WfoTable/WfoTable/index.ts

@@ -11,6 +11,7 @@ export * from './WfoMultilineCell';
 export * from './WfoTable';
 export * from './WfoTableHeaderCell';
 export * from './WfoTableDataRows';
+export * from './WfoTableSkeletonRows';
 
 export * from './WfoTruncateCell';
 export * from './WfoDataCell';

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import { EuiForm, EuiFormRow, EuiHorizontalRule, EuiSelect, EuiSpacer, EuiSwitch } from '@elastic/eui';
+import { EuiForm, EuiFormRow, EuiHorizontalRule, EuiSelect, EuiSpacer, EuiSwitch, useEuiScrollBar } from '@elastic/eui';
 
 import { WfoSettingsModal } from '@/components';
 import { getWfoTableSettingsModalStyles } from '@/components/WfoTable/WfoTableSettingsModal/styles';
@@ -37,7 +37,8 @@ export const TableSettingsModal = <T,>({
   extraSettings,
 }: TableSettingsModalProps<T>) => {
   const t = useTranslations('main');
-  const { formRowStyle, selectFieldStyle } = useWithOrchestratorTheme(getWfoTableSettingsModalStyles);
+  const { formRowStyle, columnsListStyle, selectFieldStyle } = useWithOrchestratorTheme(getWfoTableSettingsModalStyles);
+  const scrollBarStyle = useEuiScrollBar();
 
   const [columns, setColumns] = useState(tableConfig.columns);
   const [selectedPageSize, setSelectedPageSize] = useState(tableConfig.selectedPageSize);
@@ -72,22 +73,24 @@ export const TableSettingsModal = <T,>({
       }
     >
       <EuiForm>
-        {columns.map(({ field, name, isVisible }) => (
-          <div key={field.toString()}>
-            <EuiFormRow display="columnCompressed" label={name} css={formRowStyle}>
-              <EuiSwitch
-                showLabel={false}
-                label={name}
-                checked={isVisible}
-                onChange={() => {
-                  handleUpdateColumnVisibility(field);
-                }}
-                compressed
-              />
-            </EuiFormRow>
-            <EuiHorizontalRule margin="xs" />
-          </div>
-        ))}
+        <div css={[columnsListStyle, scrollBarStyle]}>
+          {columns.map(({ field, name, isVisible }) => (
+            <div key={field.toString()}>
+              <EuiFormRow display="columnCompressed" label={name} css={formRowStyle}>
+                <EuiSwitch
+                  showLabel={false}
+                  label={name}
+                  checked={isVisible}
+                  onChange={() => {
+                    handleUpdateColumnVisibility(field);
+                  }}
+                  compressed
+                />
+              </EuiFormRow>
+              <EuiHorizontalRule margin="xs" />
+            </div>
+          ))}
+        </div>
         <EuiSpacer size="xs" />
 
         <EuiFormRow css={formRowStyle} hasEmptyLabelSpace label={t('numberOfRows')} display="columnCompressed">

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

@@ -1,3 +1,4 @@
+import { transparentize } from '@elastic/eui';
 import { css } from '@emotion/react';
 
 import { WfoThemeHelpers } from '@/hooks';
@@ -13,8 +14,24 @@ export const getWfoTableSettingsModalStyles = (wfoThemeHelpers: WfoThemeHelpers)
     },
   });
 
+  const { theme } = wfoThemeHelpers;
+
+  const columnsListStyle = css({
+    maxHeight: theme.base * 16,
+    overflowY: 'auto',
+    paddingLeft: theme.base / 4,
+    marginBottom: theme.base / 2,
+    backgroundImage: `linear-gradient(to top, ${theme.colors.textGhost} ${theme.base}px, transparent),
+      radial-gradient(farthest-side at 50% 100%, ${transparentize(theme.colors.shadow, 0.24)}, transparent)`,
+    backgroundPosition: `center bottom, center bottom -${theme.base / 2}px`,
+    backgroundSize: `100% ${theme.base * 2}px, 100% ${theme.base}px`,
+    backgroundRepeat: 'no-repeat',
+    backgroundAttachment: 'local, scroll',
+  });
+
   return {
     formRowStyle,
+    columnsListStyle,
     selectFieldStyle: formFieldBaseStyle,
   };
 };

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

@@ -3,6 +3,8 @@ import { TableColumnKeys } from './columns';
 export type StoredTableConfig<T> = {
   hiddenColumns: TableColumnKeys<T>;
   selectedPageSize: number;
+  showMatchDetails?: boolean;
+  advancedNestedSearch?: 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>
   );