@orchestrator-ui/orchestrator-ui-components 8.6.0 → 8.7.1

package/src/pages/WfoSearchPocPage.tsx

@@ -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,
@@ -56,6 +56,7 @@ const getDataFromResponse = <T extends object>(
   data: PaginatedSearchResults,
   resultColumToPropertyMap: ResultColumToPropertyMap<T>,
   uniqueRowId: keyof T,
+  selectedTab: WfoSubscriptionListTab,
 ): {
   items: T[];
   rowExpandingConfiguration?: WfoTableProps<T>['rowExpandingConfiguration'];
@@ -72,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) => {
@@ -203,7 +209,7 @@ export const WfoSearchPocPage = () => {
   // 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(),
@@ -453,7 +459,9 @@ 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;
@@ -465,6 +473,7 @@ export const WfoSearchPocPage = () => {
       exportResult,
       resultColumToPropertyMap,
       'subscriptionId',
+      selectedTab,
     );
     if (!exportItems.length) {
       return;

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>;
 }
 

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)}%`;
+};