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

package/src/hooks/useSearch.ts

@@ -25,7 +25,7 @@ export const useSearch = (
 ) => {
   const [results, setResults] = useState<PaginatedSearchResults>({ ...emptyResult });
 
-  const [triggerSearch, { isLoading, isError }] = useLazySearchQuery();
+  const [triggerSearch, { isFetching, isError }] = useLazySearchQuery();
 
   useEffect(() => {
     const queryText = typeof query === 'string' ? query : query.text?.trim() || '';
@@ -75,7 +75,7 @@ export const useSearch = (
 
   return {
     results,
-    loading: isLoading,
+    loading: isFetching,
     error: isError ? 'Search failed' : null,
     setResults,
   };

package/src/hooks/useStoredTableConfig.ts

@@ -24,6 +24,7 @@ export const useStoredTableConfig = <T>(localeStorageKey: string) => {
         tableConfig.hiddenColumns = storedConfig.hiddenColumns;
         tableConfig.selectedPageSize = storedConfig.selectedPageSize;
         tableConfig.showMatchDetails = storedConfig.showMatchDetails;
+        tableConfig.advancedNestedSearch = storedConfig.advancedNestedSearch;
       }
       return tableConfig;
     } catch {

package/src/messages/en-GB.json

@@ -1,11 +1,13 @@
 {
   "common": {
+    "advancedNestedSearch": "Advanced nested search",
     "applyFilter": "Apply filter",
     "createFilter": "Create a filter",
     "deselect": "Deselect",
     "editColumns": "Edit columns",
     "errorMessage": "An error occurred",
     "export": "Export",
+    "exportRows": "Export {numberOfRows, plural, one {# row} other {# rows}}",
     "insyncFalse": "out-of-sync",
     "insyncTrue": "in-sync",
     "loadMore": "Load more",

package/src/messages/nl-NL.json

@@ -1,11 +1,13 @@
 {
   "common": {
+    "advancedNestedSearch": "Geavanceerd genest zoeken",
     "applyFilter": "Pas filter toe",
     "createFilter": "Filter",
     "deselect": "Deselecteer",
     "editColumns": "Wijzig kolommen",
     "errorMessage": "Er is een fout opgetreden",
     "export": "Exporteren",
+    "exportRows": "Exporteer {numberOfRows, plural, one {# rij} other {# rijen}}",
     "insyncFalse": "out-of-sync",
     "insyncTrue": "in-sync",
     "loadMore": "Meer laden",

package/src/pages/WfoSearchPocPage.tsx

@@ -33,6 +33,7 @@ import {
 } from '@/components';
 import { parseCelToRuleGroup } from '@/components/WfoTable/WfoStructuredSearchTable/utils';
 import { ColumnType, WfoTableProps } from '@/components/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import { useStoredTableConfig } from '@/hooks';
 import { SearchPayload, useLazySearchQuery, useSearchQuery } from '@/rtk';
 import {
@@ -179,8 +180,7 @@ export const WfoSearchPocPage = () => {
   );
   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 [pageSize, setPageSize] = useState<number>(DEFAULT_PAGE_SIZE);
   const [pageCursor, setPageCursor] = useState<{ cursor: string; searchKey: string } | undefined>(undefined);
   const [dataSorting, setDataSorting] = useState<WfoDataSorting<SubscriptionListItem>>({
     field: 'subscriptionId',
@@ -214,7 +214,7 @@ export const WfoSearchPocPage = () => {
     };
     return {
       query: committedSearchQuery,
-      limit,
+      limit: pageSize,
       entity_type: EntityKind.SUBSCRIPTION,
       response_columns: Array.from(resultColumToPropertyMap.keys()),
       order_by,
@@ -222,17 +222,19 @@ export const WfoSearchPocPage = () => {
       ...(filters && { filters }),
       ...(cursor && { cursor }),
     };
-  }, [committedSearchQuery, committedRuleGroup, selectedTab, retrieverType, limit, dataSorting, cursor]);
+  }, [committedSearchQuery, committedRuleGroup, selectedTab, retrieverType, pageSize, dataSorting, cursor]);
 
   const { data, isFetching } = useSearchQuery(searchPayload);
 
   const [getSubscriptionListTrigger] = useLazySearchQuery();
-  const getSubscriptionListForExport = () => getSubscriptionListTrigger(searchPayload).unwrap();
+  const getSubscriptionListForExport = (exportLimit: number) =>
+    getSubscriptionListTrigger({ ...searchPayload, limit: exportLimit, cursor: undefined }).unwrap();
 
   useEffect(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
+      setPageSize(storedConfig.selectedPageSize);
     }
   }, [getStoredTableConfig]);
 
@@ -249,8 +251,6 @@ export const WfoSearchPocPage = () => {
       renderData: (value) => <WfoFirstPartUUID UUID={value} />,
       renderDetails: (value) => value,
       renderTooltip: (value) => value,
-      isSortable: true,
-      isFilterable: true,
     },
     description: {
       columnType: ColumnType.DATA,
@@ -258,44 +258,37 @@ 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,
@@ -305,7 +298,6 @@ export const WfoSearchPocPage = () => {
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
       renderTooltip: (cellValue) => cellValue?.toString(),
-      isFilterable: true,
     },
     endDate: {
       columnType: ColumnType.DATA,
@@ -315,7 +307,6 @@ export const WfoSearchPocPage = () => {
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
       renderTooltip: (cellValue) => cellValue?.toString(),
-      isFilterable: true,
     },
     note: {
       columnType: ColumnType.DATA,
@@ -332,7 +323,6 @@ export const WfoSearchPocPage = () => {
           />
         );
       },
-      isFilterable: true,
     },
     metadata: {
       columnType: ColumnType.DATA,
@@ -341,10 +331,18 @@ 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 sortableAndFilterableFieldNames = Object.keys(tableColumnConfig).filter((fieldName) => fieldName !== 'actions');
+  const isSortingAllowed = queryText === '';
+  const tableColumnConfigWithSortingAndFiltering =
+    mapSortableAndFilterableValuesToTableColumnConfig<SubscriptionListItem>(
+      tableColumnConfig,
+      isSortingAllowed ? sortableAndFilterableFieldNames : [],
+      sortableAndFilterableFieldNames,
+    );
+
   const handleApplyFilter = (searchParams?: SearchParams) => {
     const ruleGroupParam = searchParams?.ruleGroup;
     // Use an explicitly passed rule group when provided (e.g. a column-header search), a cleared filter
@@ -382,7 +380,6 @@ export const WfoSearchPocPage = () => {
 
   const handleChangeTab = (updatedTab: WfoSubscriptionListTab) => {
     setActiveTab(updatedTab);
-    setLimit(pageSize);
     setPageCursor(undefined);
   };
 
@@ -468,7 +465,7 @@ export const WfoSearchPocPage = () => {
   const nextPageCursor = data?.page_info?.next_page_cursor ?? undefined;
 
   const exportData = async () => {
-    const exportResult = await getSubscriptionListForExport();
+    const exportResult = await getSubscriptionListForExport(totalItems || pageSize);
     const { items: exportItems } = getDataFromResponse<SubscriptionListItem>(
       exportResult,
       resultColumToPropertyMap,
@@ -489,7 +486,14 @@ export const WfoSearchPocPage = () => {
 
   const onUpdateDataSorting = ({ field, sortOrder }: WfoDataSorting<SubscriptionListItem>) => {
     setDataSorting({ field, sortOrder });
-    setLimit(pageSize);
+    setPageCursor(undefined);
+  };
+
+  const onUpdatePageSize = (updatedPageSize: number) => {
+    if (updatedPageSize === pageSize) {
+      return;
+    }
+    setPageSize(updatedPageSize);
     setPageCursor(undefined);
   };
 
@@ -508,6 +512,7 @@ export const WfoSearchPocPage = () => {
         rowExpandingConfiguration={rowExpandingConfiguration}
         defaultHiddenColumns={tableDefaults?.hiddenColumns}
         defaultShowMatchDetails={tableDefaults?.showMatchDetails}
+        defaultAdvancedNestedSearch={tableDefaults?.advancedNestedSearch}
         filterString={filterString}
         handleSearch={handleApplyFilter}
         isLoading={isFetching}
@@ -523,11 +528,11 @@ export const WfoSearchPocPage = () => {
         queryBuilderRuleGroup={queryBuilderRuleGroup}
         queryText={queryText}
         retrieverType={retrieverType}
-        tableColumnConfig={tableColumnConfig}
+        tableColumnConfig={tableColumnConfigWithSortingAndFiltering}
         getColumnSearchFieldName={(field) => getKeyByValueFromMap(resultColumToPropertyMap, field)}
         pageSize={pageSize}
         onUpdateDataSorting={onUpdateDataSorting}
-        setPageSize={setPageSize}
+        setPageSize={onUpdatePageSize}
         totalItems={totalItems}
         hasNextPage={hasNextPage}
         prefilledFieldOptions={prefilledFieldOptions}

package/src/pages/processes/WfoProductInformationWithLink.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import { EuiButtonIcon, EuiFlexGroup, EuiText, EuiToolTip } from '@elastic/eui';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiToolTip } from '@elastic/eui';
 
-import { useGetOrchestratorConfig } from '@/hooks';
+import { useGetOrchestratorConfig, useOrchestratorTheme } from '@/hooks';
 
 interface WfoProductInformationWithLinkProps {
   workflowName: string;
@@ -15,8 +15,10 @@ export const WfoProductInformationWithLink = ({ workflowName, productNames }: Wf
   const { workflowInformationLinkUrl, showWorkflowInformationLink } = useGetOrchestratorConfig();
   const t = useTranslations('processes.detail');
   const docsUrl = workflowInformationLinkUrl + workflowName;
+  const { theme } = useOrchestratorTheme();
+
   return (
-    <EuiFlexGroup gutterSize={'s'} alignItems={'center'}>
+    <EuiFlexGroup css={{ paddingBottom: theme.size.xs }} gutterSize={'s'} alignItems={'center'}>
       {showWorkflowInformationLink && (
         <EuiToolTip content={t('openWorkflowTaskInfo')}>
           <a href={docsUrl} target="_blank">
@@ -24,7 +26,10 @@ export const WfoProductInformationWithLink = ({ workflowName, productNames }: Wf
           </a>
         </EuiToolTip>
       )}
-      <EuiText size="s">{productNames}</EuiText>
+      <EuiFlexItem>
+        <EuiSpacer size={'xs'} />
+        <EuiText size="m">{productNames}</EuiText>
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };

package/src/types/search.ts

@@ -214,3 +214,11 @@ export type ExportArtifact = {
 
 export type ResultColumToPropertyMap<T> = Map<string, keyof T>;
 export type FieldToOperatorMap = Map<string, string[]>;
+
+export type WfoQueryBuilderContext = {
+  onFieldSelected: (field: string, operators: string[], pathInfo?: PathInfo) => void;
+  prefilledFieldOptions: FieldToOperatorMap;
+  fieldPathInfoMap: Map<string, PathInfo>;
+  onValueEditorEnter: () => void;
+  useAdvancedNestedSearch: boolean;
+};