@orchestrator-ui/orchestrator-ui-components 0.2.6 → 0.3.0

package/src/messages/nl-NL.json

@@ -1,15 +1,26 @@
 {
     "main": {
+        "metadata": "Metadata",
+        "metadataProducts": "Products",
+        "metadataProductblocks": "Product blocks",
+        "metadataResourceTypes": "Resource types",
+        "metadataWorkflows": "Workflows",
+        "mobileTitle": "Hoofdmenu",
+        "settings": "Settings",
+        "start": "Start",
+        "subscriptions": "Subscriptions",
+        "tasks": "Taken",
         "title": "Voorbeeld Orchestrator UI",
-        "mobileTitle": "Hoofd menu"
+        "welcome": "Welkom",
+        "workflows": "Workflows"
     },
     "common": {
-        "addToFavorites": "Favoriet",
         "product": "Produkt",
         "deselect": "Deselecteer",
         "close": "Sluiten",
+        "editColumns": "Wijzig kolommen",
         "newSubscription": "Nieuwe subscription",
-        "newTask": "Nieuwe taak",
+        "newTask": "Nieuwe task",
         "noFailedTasks": "Geen gefaalde taken!",
         "search": "Zoeken"
     },
@@ -26,6 +37,9 @@
         "start_workflow_title": "Start workflow"
     },
     "errors": {
+        "invalidQueryParts": "De query bevat ongeldige onderdelen",
+        "notAllowedWhenEngineIsNotRunningMessage": "Deze actie is niet toegestaan als de Workflow Engine niet is gestart.",
+        "notAllowedWhenEngineIsNotRunningTitle": "Workflow Engine is niet gestart.",
         "retrieve_stored_settings": "Er ging iets fout tijdens het laden van de instellingen. Hersteld naar standaard waardes",
         "retrieve_stored_settings_title": "Fout tijdens het ophalen van instellingen."
     },
@@ -34,16 +48,12 @@
             "cancel": "Annuleren",
             "submit": "Verstuur",
             "previous": "Vorige",
-            "runProcess": "Start workflow",
-            "cancelProcess": "Annuleren"
-        },
-        "fields": {
-            "bfd": {
-                "description": "Bidirectional Forwarding Detection",
-                "title": "BFD"
-            },
-            "esi_service_ports_add": "Endpoint Toevoegen",
-            "esi_service_ports_del": "Endpoint Verwijderen"
+            "startTask": "Start taak",
+            "previousQuestion": "Weet je zeker dat je deze pagina wilt verlaten? Ingevulde velden worden niet opgeslagen",
+            "startWorkflow": "Start workflow",
+            "resumeTask": "Hervat task",
+            "resumeWorkflow": "Hervat workflow",
+            "inputFieldsHaveValidationErrors": "{nrOfValidationErrors} input veldn(en) hebben validatie errors"
         },
         "widgets": {
             "organisation": {
@@ -53,7 +63,7 @@
                 "placeholder": "Naam placeholder"
             },
             "node_select": {
-                "nodes_loading": "Nodes laden",
+                "nodes_loading": "Nodes laden...",
                 "select_node": "Selecteer node",
                 "no_nodes_placeholder": "Geen nodes"
             },
@@ -78,11 +88,18 @@
                 "invalidVlan": "Invalid VLAN - Voer een range of geldige [2-4094] VLAN integers in, bijvoorbeeld: '2, 5-6, 1048-1052'",
                 "untaggedPortInUse": "Deze service port is al in gebruik en kan niet worden gekozen",
                 "taggedOnly": "VLAN is alleen relevant SN7, MSP of SN8 SP in tagged mode, niet voor link_member of untagged ports.",
-                "loadingIms": "VLAN informatie aan het laden uit IMS"
+                "loadingIms": "VLAN informatie aan het laden uit IMS..."
             },
             "subscription": {
                 "placeholder": "Kies een subscription",
                 "loading": "Subscriptions ophalen..."
+            },
+            "nodePort": {
+                "loadingNodes": "Node subscriptions laden...",
+                "loadingPorts": "IMS poorten laden...",
+                "selectNode": "Selecteer node",
+                "selectPort": "Selecteer poort",
+                "selectNodeFirst": "Selecteer eerst een node"
             }
         }
     },
@@ -113,13 +130,13 @@
             "resourceTypes": "Resource types",
             "dependingProductBlocks": "Onderliggende product blocks",
             "createdAt": "Aangemaakt",
-            "endDate": "Eind datum",
+            "endDate": "Einddatum",
             "parentIds": "Parents"
         },
         "resourceTypes": {
             "type": "Resource type",
             "description": "Resource type beschrijving",
-            "resourceId": "Resource Id",
+            "resourceId": "Resource ID",
             "usedInProductBlocks": "Gebruikt in product blocks"
         },
         "workflows": {
@@ -131,35 +148,35 @@
         }
     },
     "processes": {
-        "tabs": {
-            "active": "Actief",
-            "completed": "Voltooid"
-        },
         "index": {
             "workflowName": "Workflow naam",
-            "step": "Laatste stap",
+            "step": "Huidige stap",
             "status": "Status",
             "product": "Product",
             "customer": "Klant",
-            "customerAbbreviation": "Klant afkorting",
+            "customerAbbreviation": "Klantafkorting",
             "subscriptions": "Subscriptions",
             "createdBy": "Gecreëerd door",
             "assignee": "Assignee",
-            "processId": "PID",
+            "processId": "Proces ID",
             "started": "Gestart",
             "lastModified": "Aangepast op",
-            "workflowTarget": "Doel",
-            "productTag": "Tag"
+            "workflowTarget": "Target",
+            "productTag": "Product tag"
         },
         "detail": {
             "retry": "Probeer opnieuw",
             "resume": "Ga verder",
             "abort": "Stop",
             "delete": "Verwijder",
-            "deleteQuestion": "Weet je zeker dat je de taak {workflowName} wilt verwijderen?",
+            "deleteQuestion": "Weet je zeker dat je de {workflowName} taak wilt verwijderen?",
+            "abortTaskQuestion": "Weet je zeker dat je de {workflowName} taak wilt stoppen?",
+            "abortWorkflowQuestion": "Weet je zeker dat je de {workflowName} workflow wilt stoppen?",
+            "retryTaskQuestion": "Weet je zeker dat je de {workflowName} taak opnieuw wilt proberen?",
+            "retryWorkflowQuestion": "Weet je zeker dat je de {workflowName} workflow opnieuw wilt proberen?",
             "status": "Status",
             "startedBy": "Gestart door",
-            "lastStep": "Laatste stap",
+            "lastStep": "Huidige stap",
             "startedOn": "Gestart op",
             "lastUpdate": "Laatste update",
             "relatedSubscriptions": "Gerelateerde subscriptions",
@@ -168,45 +185,59 @@
         },
         "steps": {
             "steps": "Workflow stappen",
-            "showDelta": "Toon subscription verschil",
-            "viewOptions": "Scherm options",
+            "showDelta": "Toon subscription delta",
+            "hideDelta": "Verberg subscription delta",
+            "viewOptions": "Opties",
             "expandAll": "klap alles uit",
             "collapseAll": "klap alles in",
             "duration": "Looptijd",
             "userInput": "Invoer gebruiker",
-            "submitFormLabel": "Vul de inputvelden en verstuur het formulier om de workflow te starten"
+            "submitTaskFormLabel": "Verstuur het formulier om deze workflow te starten",
+            "submitWorkflowFormLabel": "Verstuur het formulier om deze task te starten"
+        },
+        "delta": {
+            "title": "Subscription delta"
+        }
+    },
+    "workflows": {
+        "tabs": {
+            "active": "Actief",
+            "completed": "Voltooid"
+        },
+        "index": {
+            "title": "Workflows"
         }
     },
     "subscriptions": {
         "tabs": {
             "active": "Actief",
-            "terminated": "Beeindigd",
-            "transient": "Tijdelijk",
+            "terminated": "Beëindigd",
+            "transient": "In uitvoering",
             "all": "Alles"
         },
         "index": {
             "id": "ID",
             "description": "Beschrijving",
             "status": "Status",
-            "insync": "In Sync",
+            "insync": "In sync",
             "product": "Produkt",
             "tag": "Tag",
-            "startDate": "Start datum",
-            "endDate": "Eind Datum",
-            "note": "Notitite"
+            "startDate": "Startdatum",
+            "endDate": "Einddatum",
+            "note": "Notitie"
         },
         "detail": {
             "tabs": {
                 "general": "Algemeen",
                 "serviceConfiguration": "Service configuratie",
-                "processes": "Processen",
-                "relatedSubscriptions": "Geralateerde subscripties"
+                "workflows": "Workflows",
+                "relatedSubscriptions": "Gerelateerde subscriptions"
             },
             "loadingStatus": "Laden",
             "actions": {
                 "create": "Create workflow",
                 "modify": "Modify workflow",
-                "system": "System workflow",
+                "tasks": "Taken",
                 "terminate": "Terminate workflow",
                 "actions": "Acties",
                 "subscription": {
@@ -238,33 +269,49 @@
             "status": "Status",
             "id": "ID",
             "blockTitleSubscriptionDetails": "Subscription details",
-            "blockTitleFixedInputs": "Fixed Inputs",
-            "blockTitleProductInfo": "Produkt Info",
+            "blockTitleFixedInputs": "Fixed inputs",
+            "blockTitleProductInfo": "Produktinfo",
             "subscriptionId": "Subscription ID",
             "description": "Beschrijving",
-            "startDate": "Start datum",
+            "startDate": "Startdatum",
             "insync": "In sync",
             "customer": "Klant",
             "customerUuid": "Klant UUID",
             "name": "Naam",
-            "productType": "Produkt type",
+            "productType": "Produkttype",
             "tag": "Tag",
             "created": "Aangemaakt",
-            "endDate": "Eind datum",
+            "endDate": "Einddatum",
             "note": "Notitie",
             "noRelatedSubscriptions": "Geen gerelateerde subscriptions gevonden",
-            "hideTerminatedRelatedSubscriptions": "Verberg terminated related subscriptions",
+            "hideTerminatedRelatedSubscriptions": "Verberg beëindigde subscriptions",
             "processDetail": {
                 "id": "ID",
                 "status": "Status",
                 "startedAt": "Started at",
                 "startedBy": "Started by"
-            }
+            },
+            "showAll": "Toon alles",
+            "hideAll": "Verberg alles"
         }
     },
     "tasks": {
         "page": {
-            "rerunAll": "Alles opnieuw uitvoeren"
+            "taskName": "Taak",
+            "rerunAll": "Alles opnieuw uitvoeren",
+            "rerunAllQuestion": "Weet u zeker dat u alle gefaalde taken opnieuw wilt uitvoeren?"
+        }
+    },
+    "settings": {
+        "page": {
+            "engineStatus": "Workflow engine status",
+            "flushButton": "Flush",
+            "flushCacheSettingsTitle": "Flush cache instellingen",
+            "modifyEngine": "Wijzig engine status",
+            "pauseEngine": "Pauseer  workflow engine",
+            "runningProcesses": "Lopende processen",
+            "selectSettings": "Kies cache",
+            "startEngine": "Start workflow engine"
         }
     }
 }

package/src/messages/useGetTranslationMessages.ts

@@ -0,0 +1,51 @@
+import { useContext } from 'react';
+
+import { AbstractIntlMessages } from 'next-intl';
+
+import { OrchestratorConfigContext } from '@/contexts';
+import { useQueryWithFetch } from '@/hooks';
+import { Locale } from '@/types';
+
+import enGB from './en-GB.json';
+import nlNL from './nl-NL.json';
+
+export type TranslationMessagesMap = Map<Locale, AbstractIntlMessages>;
+
+type BackendTranslationsResponse = {
+    forms: {
+        fields: Record<string, string>;
+    };
+};
+
+export const useGetTranslationMessages = (locale: string | undefined) => {
+    const { orchestratorApiBaseUrl } = useContext(OrchestratorConfigContext);
+    const translationsUrl = `${orchestratorApiBaseUrl}/translations/${locale}`;
+    const { isLoading, data } = useQueryWithFetch<
+        BackendTranslationsResponse,
+        Record<never, never>
+    >(translationsUrl, {}, 'backendTranslations');
+
+    const backendMessages = isLoading ? {} : data?.forms?.fields || {};
+
+    const getLocalMessages = () => {
+        switch (locale) {
+            case Locale.enGB:
+                return enGB;
+            case Locale.nlNL:
+                return nlNL;
+
+            default:
+                return enGB;
+        }
+    };
+
+    const localMessages = getLocalMessages();
+
+    return {
+        ...localMessages,
+        pydanticForms: {
+            ...localMessages.pydanticForms,
+            backendTranslations: backendMessages,
+        },
+    };
+};

package/src/pages/metadata/WfoProductBlocksPage.tsx

@@ -18,8 +18,8 @@ import {
 } from '../../components';
 import {
     getDataSortHandler,
-    getEsQueryStringHandler,
     getPageChangeHandler,
+    getQueryStringHandler,
 } from '../../components';
 import type { WfoDataSorting, WfoTableColumns } from '../../components';
 import type { StoredTableConfig } from '../../components';
@@ -178,12 +178,14 @@ export const WfoProductBlocksPage = () => {
         },
     };
 
+    const { pageSize, pageIndex, sortBy, queryString } = dataDisplayParams;
     const { data, isFetching } = useQueryWithGraphql(
         GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY,
         {
-            first: dataDisplayParams.pageSize,
-            after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
-            sortBy: dataDisplayParams.sortBy,
+            first: pageSize,
+            after: pageIndex * pageSize,
+            sortBy: sortBy,
+            query: queryString,
         },
         'productBlocks',
     );
@@ -193,16 +195,16 @@ export const WfoProductBlocksPage = () => {
     }
 
     const dataSorting: WfoDataSorting<ProductBlockDefinition> = {
-        field: dataDisplayParams.sortBy?.field ?? PRODUCT_BLOCK_FIELD_NAME,
-        sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
+        field: sortBy?.field ?? PRODUCT_BLOCK_FIELD_NAME,
+        sortOrder: sortBy?.order ?? SortOrder.ASC,
     };
 
     const { totalItems, sortFields, filterFields } =
         data.productBlocks.pageInfo;
 
     const pagination: Pagination = {
-        pageSize: dataDisplayParams.pageSize,
-        pageIndex: dataDisplayParams.pageIndex,
+        pageSize: pageSize,
+        pageIndex: pageIndex,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
     };
@@ -224,12 +226,12 @@ export const WfoProductBlocksPage = () => {
                 onUpdatePage={getPageChangeHandler<ProductBlockDefinition>(
                     setDataDisplayParam,
                 )}
-                onUpdateEsQueryString={getEsQueryStringHandler<ProductBlockDefinition>(
+                onUpdateQueryString={getQueryStringHandler<ProductBlockDefinition>(
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
                 isLoading={isFetching}
-                esQueryString={dataDisplayParams.esQueryString}
+                queryString={queryString}
                 localStorageKey={
                     METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY
                 }

package/src/pages/metadata/WfoProductsPage.tsx

@@ -4,36 +4,33 @@ import { useTranslations } from 'next-intl';
 
 import type { Pagination } from '@elastic/eui/src/components';
 
+import type { WfoDataSorting, WfoTableColumns } from '@/components';
 import {
     DEFAULT_PAGE_SIZE,
     DEFAULT_PAGE_SIZES,
     METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY,
+    StoredTableConfig,
+    WfoDateTime,
     WfoLoading,
-} from '../../components';
-import type { WfoDataSorting, WfoTableColumns } from '../../components';
-import {
     WfoProductBlockBadge,
     WfoProductStatusBadge,
     WfoTableWithFilter,
-} from '../../components';
-import {
     getDataSortHandler,
-    getEsQueryStringHandler,
     getPageChangeHandler,
-} from '../../components';
-import { StoredTableConfig } from '../../components';
-import { WfoDateTime } from '../../components/WfoDateTime/WfoDateTime';
-import { WfoFirstPartUUID } from '../../components/WfoTable/WfoFirstPartUUID';
-import { mapSortableAndFilterableValuesToTableColumnConfig } from '../../components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
-import { GET_PRODUCTS_GRAPHQL_QUERY } from '../../graphqlQueries';
+    getQueryStringHandler,
+} from '@/components';
+import { WfoFirstPartUUID } from '@/components/WfoTable/WfoFirstPartUUID';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
+import { GET_PRODUCTS_GRAPHQL_QUERY } from '@/graphqlQueries';
 import {
     useDataDisplayParams,
     useQueryWithGraphql,
     useStoredTableConfig,
-} from '../../hooks';
-import type { ProductDefinition } from '../../types';
-import { BadgeType, SortOrder } from '../../types';
-import { parseDateToLocaleDateTimeString, parseIsoString } from '../../utils';
+} from '@/hooks';
+import type { ProductDefinition } from '@/types';
+import { BadgeType, SortOrder } from '@/types';
+import { parseDateToLocaleDateTimeString, parseIsoString } from '@/utils';
+
 import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
 
 const PRODUCT_FIELD_PRODUCT_ID: keyof ProductDefinition = 'productId';
@@ -155,12 +152,14 @@ export const WfoProductsPage = () => {
         },
     };
 
+    const { pageSize, pageIndex, sortBy, queryString } = dataDisplayParams;
     const { data, isFetching } = useQueryWithGraphql(
         GET_PRODUCTS_GRAPHQL_QUERY,
         {
-            first: dataDisplayParams.pageSize,
-            after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
-            sortBy: dataDisplayParams.sortBy,
+            first: pageSize,
+            after: pageIndex * pageSize,
+            sortBy: sortBy,
+            query: queryString || undefined,
         },
         'products',
     );
@@ -172,15 +171,15 @@ export const WfoProductsPage = () => {
     const { totalItems, sortFields, filterFields } = data.products.pageInfo;
 
     const pagination: Pagination = {
-        pageSize: dataDisplayParams.pageSize,
-        pageIndex: dataDisplayParams.pageIndex,
+        pageSize: pageSize,
+        pageIndex: pageIndex,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
     };
 
     const dataSorting: WfoDataSorting<ProductDefinition> = {
-        field: dataDisplayParams.sortBy?.field ?? PRODUCT_FIELD_NAME,
-        sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
+        field: sortBy?.field ?? PRODUCT_FIELD_NAME,
+        sortOrder: sortBy?.order ?? SortOrder.ASC,
     };
 
     return (
@@ -200,12 +199,12 @@ export const WfoProductsPage = () => {
                 onUpdatePage={getPageChangeHandler<ProductDefinition>(
                     setDataDisplayParam,
                 )}
-                onUpdateEsQueryString={getEsQueryStringHandler<ProductDefinition>(
+                onUpdateQueryString={getQueryStringHandler<ProductDefinition>(
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
                 isLoading={isFetching}
-                esQueryString={dataDisplayParams.esQueryString}
+                queryString={queryString}
                 localStorageKey={METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY}
             />
         </WfoMetadataPageLayout>

package/src/pages/metadata/WfoResourceTypesPage.tsx

@@ -16,8 +16,8 @@ import type { WfoDataSorting, WfoTableColumns } from '../../components';
 import { WfoTableWithFilter } from '../../components';
 import {
     getDataSortHandler,
-    getEsQueryStringHandler,
     getPageChangeHandler,
+    getQueryStringHandler,
 } from '../../components';
 import type { StoredTableConfig } from '../../components';
 import { WfoFirstPartUUID } from '../../components/WfoTable/WfoFirstPartUUID';
@@ -124,12 +124,14 @@ export const WfoResourceTypesPage = () => {
         },
     };
 
+    const { pageSize, pageIndex, sortBy, queryString } = dataDisplayParams;
     const { data, isFetching } = useQueryWithGraphql(
         GET_RESOURCE_TYPES_GRAPHQL_QUERY,
         {
-            first: dataDisplayParams.pageSize,
-            after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
-            sortBy: dataDisplayParams.sortBy,
+            first: pageSize,
+            after: pageIndex * pageSize,
+            sortBy: sortBy,
+            query: queryString,
         },
         'resourceTypes',
     );
@@ -139,16 +141,16 @@ export const WfoResourceTypesPage = () => {
     }
 
     const dataSorting: WfoDataSorting<ResourceTypeDefinition> = {
-        field: dataDisplayParams.sortBy?.field ?? RESOURCE_TYPE_FIELD_TYPE,
-        sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
+        field: sortBy?.field ?? RESOURCE_TYPE_FIELD_TYPE,
+        sortOrder: sortBy?.order ?? SortOrder.ASC,
     };
 
     const { totalItems, sortFields, filterFields } =
         data.resourceTypes.pageInfo;
 
     const pagination: Pagination = {
-        pageSize: dataDisplayParams.pageSize,
-        pageIndex: dataDisplayParams.pageIndex,
+        pageSize: pageSize,
+        pageIndex: pageIndex,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
     };
@@ -170,12 +172,12 @@ export const WfoResourceTypesPage = () => {
                 onUpdatePage={getPageChangeHandler<ResourceTypeDefinition>(
                     setDataDisplayParam,
                 )}
-                onUpdateEsQueryString={getEsQueryStringHandler<ResourceTypeDefinition>(
+                onUpdateQueryString={getQueryStringHandler<ResourceTypeDefinition>(
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
                 isLoading={isFetching}
-                esQueryString={dataDisplayParams.esQueryString}
+                queryString={queryString}
                 localStorageKey={
                     METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY
                 }

package/src/pages/metadata/WfoWorkflowsPage.tsx

@@ -15,8 +15,8 @@ import {
 import { WfoTableWithFilter } from '../../components';
 import {
     getDataSortHandler,
-    getEsQueryStringHandler,
     getPageChangeHandler,
+    getQueryStringHandler,
 } from '../../components';
 import type { WfoDataSorting, WfoTableColumns } from '../../components';
 import { StoredTableConfig } from '../../components';
@@ -136,12 +136,14 @@ export const WfoWorkflowsPage = () => {
         },
     };
 
+    const { pageSize, pageIndex, sortBy, queryString } = dataDisplayParams;
     const { data, isFetching } = useQueryWithGraphql(
         GET_WORKFLOWS_GRAPHQL_QUERY,
         {
-            first: dataDisplayParams.pageSize,
-            after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
-            sortBy: graphQlWorkflowListMapper(dataDisplayParams.sortBy),
+            first: pageSize,
+            after: pageIndex * pageSize,
+            sortBy: graphQlWorkflowListMapper(sortBy),
+            query: queryString,
         },
         'workflows',
     );
@@ -151,15 +153,15 @@ export const WfoWorkflowsPage = () => {
     }
 
     const dataSorting: WfoDataSorting<WorkflowListItem> = {
-        field: dataDisplayParams.sortBy?.field ?? 'name',
-        sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
+        field: sortBy?.field ?? 'name',
+        sortOrder: sortBy?.order ?? SortOrder.ASC,
     };
 
     const { totalItems, sortFields, filterFields } = data.workflows.pageInfo;
 
     const pagination: Pagination = {
-        pageSize: dataDisplayParams.pageSize,
-        pageIndex: dataDisplayParams.pageIndex,
+        pageSize: pageSize,
+        pageIndex: pageIndex,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
     };
@@ -181,12 +183,12 @@ export const WfoWorkflowsPage = () => {
                 onUpdatePage={getPageChangeHandler<WorkflowListItem>(
                     setDataDisplayParam,
                 )}
-                onUpdateEsQueryString={getEsQueryStringHandler<WorkflowListItem>(
+                onUpdateQueryString={getQueryStringHandler<WorkflowListItem>(
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
                 isLoading={isFetching}
-                esQueryString={dataDisplayParams.esQueryString}
+                queryString={queryString}
                 localStorageKey={METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY}
             />
         </WfoMetadataPageLayout>