@orchestrator-ui/orchestrator-ui-components 8.9.2 → 8.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "8.9.2",
+  "version": "8.9.3",
   "license": "Apache-2.0",
   "description": "Library of UI Components used to display the workflow orchestrator frontend",
   "author": {

package/src/components/WfoKeyValueTable/styles.ts

@@ -63,8 +63,32 @@ export const getStyles = ({ theme }: WfoThemeHelpers) => {
     color: theme.colors.textParagraph,
     display: 'flex',
     alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: theme.size.s,
     overflowWrap: 'anywhere',
     whiteSpace: 'pre-wrap',
+
+    '& > *': {
+      maxWidth: '100%',
+      flexGrow: 1,
+    },
+
+    '& > .euiBadge + .euiBadge': {
+      marginInlineStart: 0,
+    },
+
+    '&:has(.euiInlineEdit), & > :has(.euiInlineEdit)': {
+      flexGrow: 1,
+    },
+
+    '.euiInlineEditText .euiButtonEmpty': {
+      blockSize: 'auto',
+      whiteSpace: 'normal',
+      textAlign: 'start',
+    },
+    '.euiInlineEditText .eui-textTruncate': {
+      whiteSpace: 'pre-wrap !important',
+    },
   });
 
   const clipboardIconStyle = css({

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

@@ -2,6 +2,8 @@ import React from 'react';
 
 import { PydanticFormElement } from 'pydantic-forms';
 
+import { euiFontSizeFromScale } from '@elastic/eui';
+
 import { useOrchestratorTheme } from '@/hooks';
 
 export const WfoLabel: PydanticFormElement = ({ pydanticFormField }) => {
@@ -11,7 +13,9 @@ export const WfoLabel: PydanticFormElement = ({ pydanticFormField }) => {
     <div data-testid={pydanticFormField.id}>
       <label
         css={{
-          color: theme.colors.textParagraph,
+          fontSize: euiFontSizeFromScale('m', theme),
+          fontWeight: theme.font.weight.semiBold,
+          color: theme.colors.link,
           display: 'block',
         }}
         id={pydanticFormField.id}

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

@@ -1,3 +1,4 @@
+import { euiFontSizeFromScale, euiLineHeightFromBaseline } from '@elastic/eui';
 import { css } from '@emotion/react';
 
 import type { WfoThemeHelpers } from '@/hooks';
@@ -114,15 +115,23 @@ export const getCommonFormFieldStyles = ({ theme }: WfoThemeHelpers) => {
       color: theme.colors.textParagraph,
     },
     '.euiFormLabel': {
-      color: theme.colors.textParagraph,
+      fontSize: euiFontSizeFromScale('m', theme),
+      lineHeight: euiLineHeightFromBaseline('m', theme),
+      color: theme.colors.link,
       cursor: 'text',
-      '&.euiFormLabel-isFocused': {
-        color: theme.colors.textPrimary,
+      '&.euiFormLabel-isInvalid': {
+        color: theme.colors.textDanger,
       },
     },
     '.euiFormRow__labelWrapper': {
       display: 'flex',
       flexDirection: 'column',
+      '> .euiText': {
+        fontSize: euiFontSizeFromScale('s', theme),
+        lineHeight: euiLineHeightFromBaseline('s', theme),
+        fontWeight: theme.font.weight.regular,
+        color: theme.colors.textParagraph,
+      },
     },
   });
 

package/src/components/WfoSettingsModal/WfoInformationModal.tsx

@@ -14,11 +14,12 @@ export type WfoInformationModalProps = {
   title: string;
   onClose: () => void;
   children: ReactNode;
+  maxWidth?: number;
 };
 
-export const WfoInformationModal: FC<WfoInformationModalProps> = ({ title, onClose, children }) => {
+export const WfoInformationModal: FC<WfoInformationModalProps> = ({ title, onClose, children, maxWidth }) => {
   return (
-    <EuiModal onClose={onClose}>
+    <EuiModal onClose={onClose} maxWidth={maxWidth}>
       <EuiModalHeader>
         <EuiModalHeaderTitle size="xs">{title}</EuiModalHeaderTitle>
       </EuiModalHeader>

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

@@ -190,7 +190,11 @@ export const WfoAdvancedTable = <T extends object>({
       )}
 
       {rowDetailData && (
-        <WfoInformationModal title={detailModalTitle} onClose={() => setSelectedDataForDetailModal(undefined)}>
+        <WfoInformationModal
+          title={detailModalTitle}
+          onClose={() => setSelectedDataForDetailModal(undefined)}
+          maxWidth={theme.breakpoint.m}
+        >
           <WfoKeyValueTable keyValues={rowDetailData} showCopyToClipboardIcon />
         </WfoInformationModal>
       )}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiButton } from '@elastic/eui';
+
+import { WfoDebounceCountdown } from '@/components/WfoTable/WfoStructuredSearchTable/WfoDebounceCountdown';
+import { getWfoStructuredSearchTableStyles } from '@/components/WfoTable/WfoStructuredSearchTable/styles';
+import { DebouncedPendingRun, useWithOrchestratorTheme } from '@/hooks';
+
+interface ApplyFilterButtonProps {
+  isDisabled: boolean;
+  pendingSearchRun?: DebouncedPendingRun;
+  onClick: () => void;
+}
+
+export const WfoApplyFilterButton = ({ isDisabled, pendingSearchRun, onClick }: ApplyFilterButtonProps) => {
+  const t = useTranslations('common');
+  const { applyFilterContentStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+
+  return (
+    <EuiButton
+      onClick={onClick}
+      id={'button-apply-filter'}
+      data-test-id={'button-apply-filter'}
+      fill
+      type="submit"
+      aria-label={t('applyFilter')}
+      disabled={isDisabled}
+    >
+      <span css={applyFilterContentStyles}>
+        {pendingSearchRun && <WfoDebounceCountdown key={pendingSearchRun.id} durationMs={pendingSearchRun.delay} />}
+        {t('applyFilter')}
+      </span>
+    </EuiButton>
+  );
+};

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

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { keyframes } from '@emotion/react';
+
+const SIZE = 14;
+const STROKE_WIDTH = 2;
+const CENTER = SIZE / 2;
+const RADIUS = (SIZE - STROKE_WIDTH) / 2;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+const sweep = keyframes({
+  from: { strokeDashoffset: CIRCUMFERENCE },
+  to: { strokeDashoffset: 0 },
+});
+
+interface WfoDebounceCountdownProps {
+  durationMs: number;
+}
+
+/**
+ * Ring that fills over `durationMs`, showing how long is left before the pending search runs.
+ * Render it with a key that changes per scheduled run, so the sweep restarts from empty every
+ * time an edit pushes the debounce back.
+ */
+export const WfoDebounceCountdown = ({ durationMs }: WfoDebounceCountdownProps) => (
+  <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`} aria-hidden="true" css={{ flex: 'none' }}>
+    <circle
+      cx={CENTER}
+      cy={CENTER}
+      r={RADIUS}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={STROKE_WIDTH}
+      opacity={0.3}
+    />
+    <circle
+      cx={CENTER}
+      cy={CENTER}
+      r={RADIUS}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeDasharray={CIRCUMFERENCE}
+      // Start the sweep at 12 o'clock instead of 3 o'clock.
+      transform={`rotate(-90 ${CENTER} ${CENTER})`}
+      css={{
+        strokeDashoffset: CIRCUMFERENCE,
+        animation: `${sweep} ${durationMs}ms linear forwards`,
+        // A ring that jumps straight to full is still an honest "a search is queued" marker.
+        '@media (prefers-reduced-motion: reduce)': {
+          animation: 'none',
+          strokeDashoffset: 0,
+        },
+      }}
+    />
+  </svg>
+);

package/src/components/WfoTable/WfoStructuredSearchTable/WfoFieldSelector.spec.tsx

@@ -0,0 +1,196 @@
+/**
+ * Renders the filter builder's field selector on its own with the autocomplete hook mocked,
+ * so the tests control which paths the "backend" returns for a typed prefix.
+ */
+import React, { type ComponentProps } from 'react';
+import { defaultPlaceholderFieldName } from 'react-querybuilder';
+
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { usePathAutocomplete } from '@/hooks';
+import type { PathInfo, WfoQueryBuilderContext } from '@/types';
+
+import { WfoFieldSelector } from './WfoFieldSelector';
+
+jest.mock('@/hooks', () => ({
+  usePathAutocomplete: jest.fn(),
+}));
+
+jest.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+// EuiComboBox sizes its search input by measuring text on a canvas, which jsdom does not implement.
+beforeEach(() => {
+  jest
+    .spyOn(HTMLCanvasElement.prototype, 'getContext')
+    .mockReturnValue({ font: '', measureText: () => ({ width: 0 }) } as unknown as CanvasRenderingContext2D);
+});
+
+const SAPS_PATH_INFO = {
+  path: 'saps',
+  type: 'component',
+  operators: ['has_component', 'not_has_component'],
+  value_schema: {},
+  group: 'component',
+  ui_types: ['component'],
+  availablePaths: ['saps.port'],
+} as unknown as PathInfo;
+
+const PREFILLED_FIELD_OPTIONS = new Map([
+  ['subscription.insync', ['eq', 'neq']],
+  ['subscription.status', ['eq', 'neq', 'like']],
+]);
+
+// The mocked backend only knows saps, returned for any prefix of it.
+const mockAutocomplete = (loading = false) =>
+  jest.mocked(usePathAutocomplete).mockImplementation((prefix) => ({
+    paths: prefix && 'saps'.startsWith(prefix) ? [SAPS_PATH_INFO] : [],
+    loading,
+    error: null,
+  }));
+
+const renderFieldSelector = (field: string = defaultPlaceholderFieldName) => {
+  const handleOnChange = jest.fn();
+  const onFieldSelected = jest.fn();
+  const context: WfoQueryBuilderContext = {
+    onFieldSelected,
+    prefilledFieldOptions: PREFILLED_FIELD_OPTIONS,
+    fieldPathInfoMap: new Map(),
+    useAdvancedNestedSearch: true,
+  };
+  const props = {
+    handleOnChange,
+    rule: { field, operator: '=', value: '' },
+    context,
+  } as unknown as ComponentProps<typeof WfoFieldSelector>;
+
+  render(<WfoFieldSelector {...props} />);
+  return { handleOnChange, onFieldSelected };
+};
+
+const getSearchInput = () => screen.getByRole('combobox');
+const typeSearchTerm = (searchTerm: string) => fireEvent.change(getSearchInput(), { target: { value: searchTerm } });
+const requestedPrefixes = () => jest.mocked(usePathAutocomplete).mock.calls.map(([prefix]) => prefix);
+const listedOptions = () => screen.queryAllByRole('option').map((option) => option.textContent);
+
+describe('WfoFieldSelector', () => {
+  beforeEach(() => mockAutocomplete());
+
+  it('does not look up the placeholder field and only shows a typing hint before typing', () => {
+    renderFieldSelector();
+
+    fireEvent.focus(getSearchInput());
+
+    expect(requestedPrefixes().every((prefix) => prefix === '')).toBe(true);
+    expect(listedOptions()).toEqual(['startTypingToLoadOptions']);
+    expect(screen.getByRole('option', { name: 'startTypingToLoadOptions' })).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('shows the loading state instead of a no-match message while nothing is listed yet', () => {
+    mockAutocomplete(true);
+    renderFieldSelector();
+
+    typeSearchTerm('unknown');
+
+    expect(screen.getByText('Loading options')).toBeInTheDocument();
+    expect(listedOptions()).toEqual([]);
+    expect(screen.queryByText(/doesn't match any options/)).not.toBeInTheDocument();
+  });
+
+  it('shows the loading state when the previous paths do not match the new text', () => {
+    // The hook keeps the previous lookup's paths until the new ones arrive.
+    jest
+      .mocked(usePathAutocomplete)
+      .mockImplementation(() => ({ paths: [SAPS_PATH_INFO], loading: true, error: null }));
+    renderFieldSelector();
+
+    typeSearchTerm('sax');
+
+    expect(listedOptions()).toEqual([]);
+    expect(screen.getByText('Loading options')).toBeInTheDocument();
+    expect(screen.queryByText(/doesn't match any options/)).not.toBeInTheDocument();
+  });
+
+  it('keeps listed options visible while the next lookup runs and spins inside the field', () => {
+    mockAutocomplete(true);
+    renderFieldSelector();
+
+    typeSearchTerm('sa');
+
+    expect(listedOptions()).toEqual(['saps', 'saps.port']);
+    expect(screen.queryByText('Loading options')).not.toBeInTheDocument();
+    expect(document.querySelector('.euiFormControlLayoutIcons [role="progressbar"]')).toBeInTheDocument();
+  });
+
+  it('looks up the typed term and lists the returned paths', () => {
+    renderFieldSelector();
+
+    typeSearchTerm('sa');
+
+    expect(requestedPrefixes()).toContain('sa');
+    expect(listedOptions()).toEqual(['saps', 'saps.port']);
+  });
+
+  it('selects a listed path and reports its operators and path info', () => {
+    const { handleOnChange, onFieldSelected } = renderFieldSelector();
+
+    typeSearchTerm('sa');
+    fireEvent.click(screen.getByRole('option', { name: 'saps' }));
+
+    expect(handleOnChange).toHaveBeenCalledWith('saps');
+    expect(onFieldSelected).toHaveBeenCalledWith('saps', SAPS_PATH_INFO.operators, SAPS_PATH_INFO);
+  });
+
+  it('drops the options again as soon as the input is cleared', () => {
+    renderFieldSelector();
+
+    typeSearchTerm('sa');
+    expect(listedOptions()).toEqual(['saps', 'saps.port']);
+
+    typeSearchTerm('');
+
+    expect(listedOptions()).toEqual(['startTypingToLoadOptions']);
+  });
+
+  it('lists matching prefilled fields alongside the backend paths', () => {
+    renderFieldSelector();
+
+    typeSearchTerm('ins');
+    expect(listedOptions()).toEqual(['subscription.insync']);
+
+    typeSearchTerm('s');
+    expect(listedOptions()).toEqual(['subscription.insync', 'subscription.status', 'saps', 'saps.port']);
+  });
+
+  it('does not offer the raw typed text as an option and reports no match once loaded', () => {
+    renderFieldSelector();
+
+    typeSearchTerm('unknown');
+
+    expect(listedOptions()).toEqual([]);
+    expect(screen.getByText(/doesn't match any options/)).toBeInTheDocument();
+  });
+
+  it('shows a restored field as selected without an autocomplete request', () => {
+    renderFieldSelector('subscription.insync');
+
+    // A plain-text single selection is shown as the value of the search input.
+    expect(getSearchInput()).toHaveValue('subscription.insync');
+    expect(requestedPrefixes().every((prefix) => prefix === '')).toBe(true);
+  });
+
+  it('lists options for the selected field as soon as the selector is opened', () => {
+    renderFieldSelector('saps');
+
+    fireEvent.focus(getSearchInput());
+
+    expect(requestedPrefixes()).toContain('saps');
+    expect(listedOptions()).toEqual(['saps', 'saps.port']);
+
+    fireEvent.blur(getSearchInput());
+
+    expect(jest.mocked(usePathAutocomplete).mock.lastCall?.[0]).toBe('');
+  });
+});

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

@@ -1,10 +1,11 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
-import { FieldSelectorProps } from 'react-querybuilder';
+import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { FieldSelectorProps, defaultPlaceholderFieldName } from 'react-querybuilder';
 
 import { useTranslations } from 'next-intl';
 
 import type { EuiComboBoxOptionOption } from '@elastic/eui';
-import { EuiComboBox } from '@elastic/eui';
+import { EuiComboBox, EuiLoadingSpinner, EuiText } from '@elastic/eui';
 
 import { usePathAutocomplete } from '@/hooks';
 import { EntityKind, PathInfo, WfoQueryBuilderContext } from '@/types';
@@ -37,7 +38,10 @@ interface WfoFieldSelectorProps extends Omit<FieldSelectorProps, 'context'> {
 export const WfoFieldSelector: FC<WfoFieldSelectorProps> = ({ handleOnChange, disabled, rule, context }) => {
   const { field } = rule;
   const { useAdvancedNestedSearch, prefilledFieldOptions, onFieldSelected } = context;
-  const [selectedValue, setSelectedValue] = useState<string>(field);
+  const [autoFocus] = useState(field === defaultPlaceholderFieldName);
+  const selectedField = field === defaultPlaceholderFieldName ? '' : field;
+  const [searchTerm, setSearchTerm] = useState('');
+  const [hasFocus, setHasFocus] = useState(false);
   const [searchInput, setSearchInput] = useState<HTMLInputElement | null>(null);
   const optionsRef = useRef<EuiComboBoxOptionOption<string>[]>([]);
   const handleFieldSelectionRef = useRef<(selected: EuiComboBoxOptionOption<string>[]) => void>(() => {});
@@ -49,39 +53,51 @@ export const WfoFieldSelector: FC<WfoFieldSelectorProps> = ({ handleOnChange, di
 
   const isSelectablePath = (path: string) => useAdvancedNestedSearch || !path.includes('.');
 
-  const getOptionsFromPathInfo = (pathInfos: PathInfo[]): EuiComboBoxOptionOption<string>[] => {
-    const pathOptions: EuiComboBoxOptionOption<string>[] = [];
-
-    pathInfos.forEach((pathInfo) => {
-      [pathInfo.path, ...(pathInfo.availablePaths ?? [])].filter(isSelectablePath).forEach((path) => {
-        pathOptions.push(getOption(path));
-      });
-    });
-    return (
-      pathOptions.length > 0 ? pathOptions
-      : selectedValue ? [getOption(selectedValue)]
-      : []
+  const getOptionsFromPathInfo = (pathInfos: PathInfo[]): EuiComboBoxOptionOption<string>[] =>
+    pathInfos.flatMap((pathInfo) =>
+      [pathInfo.path, ...(pathInfo.availablePaths ?? [])].filter(isSelectablePath).map(getOption),
     );
-  };
 
+  const trimmedSearchTerm = searchTerm.trim();
+  const autocompletePrefix = trimmedSearchTerm || (hasFocus ? selectedField : '');
   const {
     paths,
     loading: isLoading,
     error: errorMessage,
-  } = usePathAutocomplete(selectedValue, EntityKind.SUBSCRIPTION);
+  } = usePathAutocomplete(autocompletePrefix, EntityKind.SUBSCRIPTION);
+
+  const matchesPrefix = (path: string) => path.toLowerCase().includes(autocompletePrefix.toLowerCase());
+
+  const prefilledFields = Array.from(prefilledFieldOptions.keys()).filter(matchesPrefix);
+  const autocompleteOptions = getOptionsFromPathInfo(paths).filter(
+    (option) => !prefilledFields.includes(option.value ?? ''),
+  );
 
-  const prefilledOptions: EuiComboBoxOptionOption<string>[] = Array.from(prefilledFieldOptions.keys()).map(getOption);
-  const autocompleteOptions = getOptionsFromPathInfo(paths);
-  const placeholderOption: EuiComboBoxOptionOption<string> = {
-    label: '──────',
+  const startTypingHintOption: EuiComboBoxOptionOption<string> = {
+    label: t('startTypingToLoadOptions'),
     disabled: true,
   };
-  const showPlaceholder = prefilledOptions.length > 0 && autocompleteOptions.length > 0;
-  const options: EuiComboBoxOptionOption<string>[] = [
-    ...prefilledOptions,
-    ...(showPlaceholder ? [placeholderOption] : []),
-    ...autocompleteOptions,
-  ];
+  const options: EuiComboBoxOptionOption<string>[] =
+    autocompletePrefix ? [...prefilledFields.map(getOption), ...autocompleteOptions] : [startTypingHintOption];
+
+  const renderHintOption = (option: EuiComboBoxOptionOption<string>) => (
+    <EuiText size="xs" color="default">
+      {option.label}
+    </EuiText>
+  );
+  const normalizedSearchTerm = trimmedSearchTerm.toLowerCase();
+  const hasListedOptions =
+    autocompletePrefix !== ''
+    && options.some(
+      (option) =>
+        !option.disabled && option.value !== selectedField && option.label.toLowerCase().includes(normalizedSearchTerm),
+    );
+  const showLoadingState = isLoading && !hasListedOptions;
+  const showFieldSpinner = isLoading && hasListedOptions;
+  const fieldIconsContainer = useMemo(
+    () => searchInput?.closest('.euiFormControlLayout')?.querySelector('.euiFormControlLayoutIcons') ?? null,
+    [searchInput],
+  );
 
   const storeFieldOperators = (selectedValue: string) => {
     const matchingPath =
@@ -95,7 +111,7 @@ export const WfoFieldSelector: FC<WfoFieldSelectorProps> = ({ handleOnChange, di
   const handleFieldSelection = (selectedOptions: EuiComboBoxOptionOption<string>[]) => {
     const selectedOption = selectedOptions[0];
     const selectedValue = selectedOption?.value || '';
-    setSelectedValue(selectedValue);
+    setSearchTerm('');
     storeFieldOperators(selectedValue);
 
     handleOnChange(selectedValue);
@@ -143,26 +159,31 @@ export const WfoFieldSelector: FC<WfoFieldSelectorProps> = ({ handleOnChange, di
   }, [searchInput]);
 
   return (
-    <EuiComboBox
-      placeholder={t('searchFieldsPlaceholder')}
-      options={options}
-      fullWidth={true}
-      selectedOptions={options.filter((option) => option.value === selectedValue)}
-      onChange={(selectedOptions) => {
-        handleFieldSelection(selectedOptions);
-      }}
-      onSearchChange={(inputValue) => {
-        if (inputValue.length > 0) {
-          setSelectedValue(inputValue);
-        }
-      }}
-      inputRef={setSearchInput}
-      singleSelection={{ asPlainText: true }}
-      isLoading={isLoading}
-      isClearable
-      isInvalid={!!errorMessage}
-      isDisabled={disabled}
-      rowHeight={30}
-    />
+    <>
+      {showFieldSpinner
+        && fieldIconsContainer
+        && createPortal(<EuiLoadingSpinner size="m" aria-label={t('loadingOptions')} />, fieldIconsContainer)}
+      <EuiComboBox
+        placeholder={t('searchFieldsPlaceholder')}
+        options={options}
+        renderOption={autocompletePrefix ? undefined : renderHintOption}
+        fullWidth={true}
+        selectedOptions={selectedField ? [getOption(selectedField)] : []}
+        onChange={(selectedOptions) => {
+          handleFieldSelection(selectedOptions);
+        }}
+        onSearchChange={setSearchTerm}
+        onFocus={() => setHasFocus(true)}
+        onBlur={() => setHasFocus(false)}
+        inputRef={setSearchInput}
+        autoFocus={autoFocus}
+        singleSelection={{ asPlainText: true }}
+        isLoading={showLoadingState}
+        isClearable
+        isInvalid={!!errorMessage}
+        isDisabled={disabled}
+        rowHeight={30}
+      />
+    </>
   );
 };