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

package/src/pages/WfoSearchPocPage.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useMemo, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { RuleGroupType } from 'react-querybuilder';
 import { formatQuery } from 'react-querybuilder/formatQuery';
 import { parseCEL } from 'react-querybuilder/parseCEL';
@@ -9,7 +9,7 @@ import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
 import { EuiSpacer } from '@elastic/eui';
 
-import { SearchParams, combineSearchFilters } from '@/components';
+import { SearchParams, addStatusFilterFromTab, removeTabStatusMatchingFields } from '@/components';
 import {
   DEFAULT_PAGE_SIZE,
   StoredTableConfig,
@@ -32,16 +32,22 @@ import {
   WfoTableColumnConfig,
   subscriptionListTabs,
 } from '@/components';
+import { parseCelToRuleGroup } from '@/components/WfoTable/WfoStructuredSearchTable/utils';
 import { ColumnType, WfoTableProps } from '@/components/WfoTable/WfoTable';
 import { useStoredTableConfig } from '@/hooks';
-import { SearchPayload, useSearchQuery } from '@/rtk';
-import { EntityKind, PaginatedSearchResults, RetrieverType, SortOrder } from '@/types';
-import { parseDateToLocaleDateTimeString } from '@/utils';
+import { SearchPayload, useLazySearchQuery, useSearchQuery } from '@/rtk';
+import {
+  EntityKind,
+  FieldToOperatorMap,
+  PaginatedSearchResults,
+  ResultColumToPropertyMap,
+  RetrieverType,
+  SortOrder,
+} from '@/types';
+import { getCsvFileNameWithDate, initiateCsvFileDownload, parseDateToLocaleDateTimeString } from '@/utils';
 
 const SEARCH_TABLE_LOCAL_STORAGE_KEY = 'SEARCH_TABLE_LOCAL_STORAGE_KEY';
 
-type ResultColumToPropertyMap<T> = Map<string, keyof T>;
-
 const getKeyByValueFromMap = <T,>(resultColumToPropertyMap: ResultColumToPropertyMap<T>, field: keyof T) => {
   return [...resultColumToPropertyMap.entries()].find(([, v]) => v === field)?.[0] || '';
 };
@@ -50,6 +56,7 @@ const getDataFromResponse = <T extends object>(
   data: PaginatedSearchResults,
   resultColumToPropertyMap: ResultColumToPropertyMap<T>,
   uniqueRowId: keyof T,
+  selectedTab: WfoSubscriptionListTab,
 ): {
   items: T[];
   rowExpandingConfiguration?: WfoTableProps<T>['rowExpandingConfiguration'];
@@ -66,18 +73,23 @@ const getDataFromResponse = <T extends object>(
   const rowExpandingConfiguration: WfoTableProps<T>['rowExpandingConfiguration'] = {
     uniqueRowId: uniqueRowId as keyof WfoTableColumnConfig<T>,
     uniqueRowIdToExpandedRowMap: searchResult.reduce(
-      (rowMap, { response_columns, score, perfect_match, matching_field }) => {
+      (rowMap, { response_columns, score, perfect_match, matching_fields }) => {
         const idColumnInResponseColumn = getKeyByValueFromMap<T>(resultColumToPropertyMap, uniqueRowId);
         const rowId = response_columns[idColumnInResponseColumn];
         if (rowId) {
           rowMap[rowId] = (
-            <WfoExpandingSearchRow score={score} matchingField={matching_field} perfectMatch={perfect_match} />
+            <WfoExpandingSearchRow
+              score={score}
+              matchingFields={removeTabStatusMatchingFields(matching_fields, selectedTab, EntityKind.SUBSCRIPTION)}
+              perfectMatch={perfect_match}
+            />
           );
         }
         return rowMap;
       },
       {} as Record<string, ReactNode>,
     ),
+    shouldOnlyShowOnHover: true,
   };
 
   const items: T[] = responseColumns.map((responseColumn) => {
@@ -116,6 +128,21 @@ const resultColumToPropertyMap: ResultColumToPropertyMap<SubscriptionListItem> =
   ['subscription.metadata', 'metadata'],
 ]);
 
+/* These options will be added as the first options in the field dropdown in the FieldSelector */
+const prefilledFieldOptions: FieldToOperatorMap = new Map([
+  ['subscription.subscription_id', ['eq', 'neq', 'like']],
+  ['subscription.description', ['eq', 'neq', 'like']],
+  ['subscription.status', ['eq', 'neq', 'like']],
+  ['subscription.insync', ['eq', 'neq']],
+  ['subscription.product.name', ['eq', 'neq', 'like']],
+  ['subscription.product.tag', ['eq', 'neq', 'like']],
+  ['subscription.customer_name', ['eq', 'neq', 'like']],
+  ['subscription.customer_abbreviation', ['eq', 'neq', 'like']],
+  ['subscription.start_date', ['eq', 'neq', 'lt', 'lte', 'gt', 'gte', 'between']],
+  ['subscription.end_date', ['eq', 'neq', 'lt', 'lte', 'gt', 'gte', 'between']],
+  ['subscription.note', ['eq', 'neq', 'like']],
+]);
+
 export const WfoSearchPocPage = () => {
   const t = useTranslations('subscriptions.index');
   const [activeTab, setActiveTab] = useQueryParam('activeTab', withDefault(StringParam, WfoSubscriptionListTab.ACTIVE));
@@ -125,30 +152,64 @@ export const WfoSearchPocPage = () => {
 
   // Part of the search endpoint payload that is passed in the q parameter
   const [queryText, setQueryText] = useState<string>('');
-  const [committedSearchQuery, setCommittedSearchQuery] = useState<string>('');
+  // The committed query and filter live in the URL so a link reproduces the search and browser
+  // back/forward re-runs it. The filter is stored as a CEL string and parsed back to a rule group.
+  const [committedSearchQuery, setCommittedSearchQuery] = useQueryParam('queryString', withDefault(StringParam, ''));
+  const [committedFilterString, setCommittedFilterString] = useQueryParam('filterString', withDefault(StringParam, ''));
+  // Track the last value this page committed, so the URL->state sync effects below only rebuild the
+  // inputs for external changes (page load, back/forward). Rebuilding on own commits would revert
+  // characters typed right after committing (search bar) or visibly restructure builder rules the
+  // CEL round trip cannot preserve, such as 'between'. The refs hold the value as the params decode
+  // it (absent param -> ''); the setters receive undefined to remove an empty param from the URL.
+  const lastSelfCommittedFilter = useRef('');
+  const commitFilterString = (celString: string) => {
+    lastSelfCommittedFilter.current = celString;
+    setCommittedFilterString(celString || undefined);
+  };
+  const lastSelfCommittedQuery = useRef('');
+  const commitSearchQuery = (queryText: string) => {
+    lastSelfCommittedQuery.current = queryText;
+    setCommittedSearchQuery(queryText || undefined);
+  };
 
   // String that is displayed in the filter textarea. This is transformed and if valid passed to the search endpoint in the filter parameter
-  const [filterString, setFilterString] = useState<string>();
+  const [filterString, setFilterString] = useState<string>('');
   const [queryBuilderRuleGroup, setQueryBuilderRuleGroup] = useState<RuleGroupType | undefined>();
-  const [committedRuleGroup, setCommittedRuleGroup] = useState<RuleGroupType | undefined>();
+  const committedRuleGroup = useMemo<RuleGroupType | undefined>(
+    () => parseCelToRuleGroup(committedFilterString),
+    [committedFilterString],
+  );
   const [isValidFilterString, setIsValidFilterString] = useState<boolean>(true);
   const [tableDefaults, setTableDefaults] = useState<StoredTableConfig<SubscriptionListItem>>();
   const [pageSize, setPageSize] = useState<number>(tableDefaults?.selectedPageSize || DEFAULT_PAGE_SIZE);
   const [limit, setLimit] = useState<number>(pageSize);
-  const [cursor, setCursor] = useState<string | undefined>(undefined);
+  const [pageCursor, setPageCursor] = useState<{ cursor: string; searchKey: string } | undefined>(undefined);
   const [dataSorting, setDataSorting] = useState<WfoDataSorting<SubscriptionListItem>>({
     field: 'subscriptionId',
     sortOrder: SortOrder.DESC,
   });
 
-  // The search payload is derived entirely from the committed search state. Changing any of these
-  // values — including the active tab, whether via a tab click or a browser back/forward that
-  // updates the activeTab URL param — produces a new payload and RTK Query re-runs the search
-  // automatically. No imperative trigger or effect (and no eslint-disable) is needed.
+  // A next-page cursor is only valid for the committed search that produced it. Binding it to a key
+  // of that search covers commits that bypass the handlers below, e.g. browser back/forward changing
+  // the queryString/filterString/activeTab URL params: the key no longer matches, so the stale
+  // cursor is not sent along with the new search.
+  const committedSearchKey = JSON.stringify([
+    committedSearchQuery,
+    committedFilterString,
+    selectedTab,
+    retrieverType,
+    dataSorting,
+  ]);
+  const cursor = pageCursor?.searchKey === committedSearchKey ? pageCursor.cursor : undefined;
+
+  // The search payload is derived entirely from the committed search state, which lives in the URL
+  // (queryString, filterString and activeTab params). Changing any of these values — whether via the
+  // UI or a browser back/forward that updates the URL — produces a new payload and RTK Query re-runs
+  // the search automatically. No imperative trigger or effect (and no eslint-disable) is needed.
   // Cursor is stripped from the RTK cache key, so a cursor change appends to the accumulated
   // result set instead of creating a new cache entry — see search endpoint's merge() logic.
   const searchPayload: SearchPayload = useMemo(() => {
-    const filters = combineSearchFilters(committedRuleGroup, selectedTab);
+    const filters = addStatusFilterFromTab(committedRuleGroup, selectedTab);
     const order_by = {
       element: getKeyByValueFromMap(resultColumToPropertyMap, dataSorting.field),
       direction: dataSorting.sortOrder.toLowerCase(),
@@ -167,6 +228,9 @@ export const WfoSearchPocPage = () => {
 
   const { data, isFetching } = useSearchQuery(searchPayload);
 
+  const [getSubscriptionListTrigger] = useLazySearchQuery();
+  const getSubscriptionListForExport = () => getSubscriptionListTrigger(searchPayload).unwrap();
+
   useEffect(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
@@ -188,6 +252,7 @@ export const WfoSearchPocPage = () => {
       renderDetails: (value) => value,
       renderTooltip: (value) => value,
       isSortable: true,
+      isFilterable: true,
     },
     description: {
       columnType: ColumnType.DATA,
@@ -195,37 +260,44 @@ export const WfoSearchPocPage = () => {
       width: '500px',
       renderData: (value, record) => <Link href={`/subscriptions/${record.subscriptionId}`}>{value}</Link>,
       renderTooltip: (value) => value,
+      isFilterable: true,
     },
     status: {
       columnType: ColumnType.DATA,
       label: t('status'),
       width: '120px',
       renderData: (value) => <WfoSubscriptionStatusBadge status={value} />,
+      isFilterable: true,
     },
     insync: {
       columnType: ColumnType.DATA,
       label: t('insync'),
       width: '75px',
       renderData: (value) => <WfoInsyncIcon inSync={value} />,
+      isFilterable: true,
     },
     productName: {
       columnType: ColumnType.DATA,
       width: '260px',
       label: t('product'),
+      isFilterable: true,
     },
     tag: {
       columnType: ColumnType.DATA,
       label: t('tag'),
       width: '100px',
+      isFilterable: true,
     },
     customerFullname: {
       columnType: ColumnType.DATA,
       label: t('customerFullname'),
+      isFilterable: true,
     },
     customerShortcode: {
       columnType: ColumnType.DATA,
       label: t('customerShortcode'),
       width: '150px',
+      isFilterable: true,
     },
     startDate: {
       columnType: ColumnType.DATA,
@@ -235,6 +307,7 @@ export const WfoSearchPocPage = () => {
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
       renderTooltip: (cellValue) => cellValue?.toString(),
+      isFilterable: true,
     },
     endDate: {
       columnType: ColumnType.DATA,
@@ -244,6 +317,7 @@ export const WfoSearchPocPage = () => {
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
       renderTooltip: (cellValue) => cellValue?.toString(),
+      isFilterable: true,
     },
     note: {
       columnType: ColumnType.DATA,
@@ -260,6 +334,7 @@ export const WfoSearchPocPage = () => {
           />
         );
       },
+      isFilterable: true,
     },
     metadata: {
       columnType: ColumnType.DATA,
@@ -268,12 +343,28 @@ export const WfoSearchPocPage = () => {
       renderData: (value) => <WfoInlineJson data={value} />,
       renderDetails: (value) => value && <WfoJsonCodeBlock data={value} isBasicStyle />,
       renderTooltip: (value) => value && <WfoJsonCodeBlock data={value} isBasicStyle={false} />,
+      isFilterable: true,
     },
   };
 
   const handleApplyFilter = (searchParams?: SearchParams) => {
-    setCommittedRuleGroup(searchParams?.ruleGroup === false ? undefined : queryBuilderRuleGroup);
-    setCursor(undefined);
+    const ruleGroupParam = searchParams?.ruleGroup;
+    // Use an explicitly passed rule group when provided (e.g. a column-header search), a cleared filter
+    // when `false`, and otherwise the current query builder state (the "Apply filter" button).
+    const effectiveRuleGroup = ruleGroupParam === false ? undefined : (ruleGroupParam ?? queryBuilderRuleGroup);
+    // '' (no rule group, or only placeholder rules) commits an empty filter, clearing the URL param.
+    const celQuery =
+      effectiveRuleGroup ? formatQuery(effectiveRuleGroup, { format: 'cel', fallbackExpression: '' }) : '';
+    // A non-empty CEL string must survive the round trip through the URL: formatQuery escapes double
+    // quotes in values but parseCEL has no escape support, so such a filter would silently be dropped
+    // after committing. Refuse the commit and flag the filter instead, keeping the URL and the search
+    // results consistent.
+    if (celQuery && !parseCelToRuleGroup(celQuery)) {
+      setIsValidFilterString(false);
+      return;
+    }
+    commitFilterString(celQuery);
+    setPageCursor(undefined);
   };
 
   const onChangeQueryText = (queryText: string) => {
@@ -282,22 +373,22 @@ export const WfoSearchPocPage = () => {
 
   const onSearchQueryText = (queryText: string) => {
     setQueryText(queryText);
-    setCommittedSearchQuery(queryText);
-    setCursor(undefined);
+    commitSearchQuery(queryText);
+    setPageCursor(undefined);
   };
 
   const onUpdateRetrieverType = (retrieverType: RetrieverType) => {
     setRetrieverType(retrieverType);
-    setCursor(undefined);
+    setPageCursor(undefined);
   };
 
   const handleChangeTab = (updatedTab: WfoSubscriptionListTab) => {
     setActiveTab(updatedTab);
     setLimit(pageSize);
-    setCursor(undefined);
+    setPageCursor(undefined);
   };
 
-  const safeCelParse = (celString: string) => {
+  const safeCelParse = useCallback((celString: string) => {
     try {
       const ruleGroup = parseCEL(celString);
       if (celString === '') {
@@ -315,7 +406,32 @@ export const WfoSearchPocPage = () => {
     } catch {
       setIsValidFilterString(false);
     }
-  };
+  }, []);
+
+  // Populate the search bar and the filter builder from the URL, both on page load and when
+  // back/forward navigation changes the committed search. Commits made by this page are skipped —
+  // see the lastSelfCommitted refs above.
+  useEffect(() => {
+    if (committedSearchQuery === lastSelfCommittedQuery.current) {
+      return;
+    }
+    lastSelfCommittedQuery.current = committedSearchQuery;
+    setQueryText(committedSearchQuery);
+  }, [committedSearchQuery]);
+
+  useEffect(() => {
+    if (committedFilterString === lastSelfCommittedFilter.current) {
+      return;
+    }
+    lastSelfCommittedFilter.current = committedFilterString;
+    setFilterString(committedFilterString);
+    if (committedFilterString) {
+      safeCelParse(committedFilterString);
+    } else {
+      setQueryBuilderRuleGroup(undefined);
+      setIsValidFilterString(true);
+    }
+  }, [committedFilterString, safeCelParse]);
 
   const onUpdateQueryBuilder = (ruleGroup: RuleGroupType | false) => {
     if (ruleGroup === false) {
@@ -343,27 +459,43 @@ export const WfoSearchPocPage = () => {
   };
 
   const { items: subscriptionListItems, rowExpandingConfiguration } =
-    data ? getDataFromResponse<SubscriptionListItem>(data, resultColumToPropertyMap, 'subscriptionId') : { items: [] };
+    data ?
+      getDataFromResponse<SubscriptionListItem>(data, resultColumToPropertyMap, 'subscriptionId', selectedTab)
+    : { items: [] };
 
   const totalItems = getTotalItemsFromResponse(data);
   const hasNextPage = data?.page_info?.has_next_page ?? false;
   const nextPageCursor = data?.page_info?.next_page_cursor ?? undefined;
 
+  const exportData = async () => {
+    const exportResult = await getSubscriptionListForExport();
+    const { items: exportItems } = getDataFromResponse<SubscriptionListItem>(
+      exportResult,
+      resultColumToPropertyMap,
+      'subscriptionId',
+      selectedTab,
+    );
+    if (!exportItems.length) {
+      return;
+    }
+    initiateCsvFileDownload(exportItems, Object.keys(tableColumnConfig), getCsvFileNameWithDate('Subscriptions'));
+  };
+
   const onShowMore = () => {
     if (!isFetching && nextPageCursor) {
-      setCursor(nextPageCursor);
+      setPageCursor({ cursor: nextPageCursor, searchKey: committedSearchKey });
     }
   };
 
   const onUpdateDataSorting = ({ field, sortOrder }: WfoDataSorting<SubscriptionListItem>) => {
     setDataSorting({ field, sortOrder });
     setLimit(pageSize);
-    setCursor(undefined);
+    setPageCursor(undefined);
   };
 
   return (
     <>
-      <WfoContentHeader title="Subscriptions (POC)" />
+      <WfoContentHeader title="Subscriptions (Beta)" />
       <WfoFilterTabs
         tabs={subscriptionListTabs}
         selectedTab={selectedTab}
@@ -391,11 +523,14 @@ export const WfoSearchPocPage = () => {
         queryText={queryText}
         retrieverType={retrieverType}
         tableColumnConfig={tableColumnConfig}
+        getColumnSearchFieldName={(field) => getKeyByValueFromMap(resultColumToPropertyMap, field)}
         pageSize={pageSize}
         onUpdateDataSorting={onUpdateDataSorting}
         setPageSize={setPageSize}
         totalItems={totalItems}
         hasNextPage={hasNextPage}
+        prefilledFieldOptions={prefilledFieldOptions}
+        onExportData={exportData}
       />
     </>
   );

package/src/rtk/endpoints/subscriptionList.ts

@@ -31,6 +31,7 @@ export const subscriptionListQuery = `query SubscriptionsList(
                     productType
                 }
                 customer {
+                    customerId
                     fullname
                     shortcode
                 }

package/src/theme/baseStyles/formFieldsBaseStyle.ts

@@ -10,7 +10,6 @@ export const getFormFieldsBaseStyle = ({ theme }: WfoThemeHelpers) => {
       backgroundColor: theme.colors.backgroundBaseNeutral,
       boxShadow: `0 0 0 1px ${theme.colors.primary}`,
     },
-    // boxShadow: `0 0 0 1px ${theme.colors.borderBaseSubdued} !important`,
   });
 
   return {

package/src/types/search.ts

@@ -24,7 +24,7 @@ export interface SearchResult {
   entity_title: string;
   score: number;
   perfect_match: number;
-  matching_field?: MatchingField | null;
+  matching_fields?: MatchingField[] | null;
   response_columns: Record<string, string | number | null>;
 }
 
@@ -211,3 +211,6 @@ export type ExportArtifact = {
   download_url: string;
   description: string;
 };
+
+export type ResultColumToPropertyMap<T> = Map<string, keyof T>;
+export type FieldToOperatorMap = Map<string, string[]>;

package/src/types/types.ts

@@ -471,7 +471,7 @@ export type Subscription = {
   status: SubscriptionStatus;
   product: Pick<ProductDefinition, 'name' | 'tag' | 'productType'>;
   productBlockInstances: ProductBlockInstance[];
-  customer: Pick<Customer, 'fullname' | 'shortcode'>;
+  customer: Pick<Customer, 'customerId' | 'fullname' | 'shortcode'>;
   metadata: object;
 };
 

package/src/utils/getDefaultTableConfig.ts

@@ -95,7 +95,12 @@ export const getDefaultTableConfig = <T>(storageKey: string) => {
       return getTableConfig<T>(completedTasksColumns as (keyof T)[]);
     }
     case SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY: {
-      const subscriptionColumns: (keyof SubscriptionListItem)[] = ['productName', 'customerFullname', 'metadata'];
+      const subscriptionColumns: (keyof SubscriptionListItem)[] = [
+        'productName',
+        'customerId',
+        'customerFullname',
+        'metadata',
+      ];
       return getTableConfig<T>(subscriptionColumns as (keyof T)[]);
     }
     default:

package/src/utils/index.ts

@@ -10,6 +10,7 @@ export * from './getProductNamesFromProcess';
 export * from './getQueryVariablesForExport';
 export * from './getStatusBadgeColor';
 export * from './getTypedFieldFromObject';
+export * from './integer';
 export * from './onlyUnique';
 export * from './optionalArray';
 export * from './resultFlattener';

package/src/utils/integer.spec.ts

@@ -0,0 +1,20 @@
+import { toPercentage } from './integer';
+
+describe('toPercentage()', () => {
+  it('converts a fraction to a percentage string with one decimal', () => {
+    expect(toPercentage(0.5)).toEqual('50.0%');
+  });
+  it('converts 1 to 100.0%', () => {
+    expect(toPercentage(1)).toEqual('100.0%');
+  });
+  it('converts 0 to 0.0%', () => {
+    expect(toPercentage(0)).toEqual('0.0%');
+  });
+  it('rounds to one decimal place', () => {
+    expect(toPercentage(0.12345)).toEqual('12.3%');
+    expect(toPercentage(0.6789)).toEqual('67.9%');
+  });
+  it('handles fractions greater than 1', () => {
+    expect(toPercentage(1.5)).toEqual('150.0%');
+  });
+});

package/src/utils/integer.ts

@@ -0,0 +1,3 @@
+export const toPercentage = (fraction: number): string => {
+  return `${(fraction * 100).toFixed(1)}%`;
+};