@orchestrator-ui/orchestrator-ui-components 1.3.0 → 1.4.0

package/src/components/WfoSubscriptionsList/subscriptionResultMappers.ts

@@ -1,5 +1,6 @@
-import { Subscription, SubscriptionsResult } from '../../types';
-import { parseDate } from '../../utils';
+import { SubscriptionListResponse } from '@/rtk/endpoints/subscriptionList';
+import { Subscription } from '@/types';
+import { parseDate } from '@/utils';
 
 export type SubscriptionListItem = Pick<
     Subscription,
@@ -13,16 +14,14 @@ export type SubscriptionListItem = Pick<
     customerShortcode: string;
 };
 
-export function mapGraphQlSubscriptionsResultToPageInfo(
-    graphqlResponse: SubscriptionsResult,
-) {
-    return graphqlResponse.subscriptions.pageInfo;
-}
+export const mapGraphQlSubscriptionsResultToPageInfo = (
+    graphqlResponse: SubscriptionListResponse,
+) => graphqlResponse.pageInfo;
 
-export function mapGraphQlSubscriptionsResultToSubscriptionListItems(
-    graphqlResponse: SubscriptionsResult,
-): SubscriptionListItem[] {
-    return graphqlResponse.subscriptions.page.map((subscription) => {
+export const mapGraphQlSubscriptionsResultToSubscriptionListItems = (
+    graphqlResponse: SubscriptionListResponse,
+): SubscriptionListItem[] =>
+    graphqlResponse.subscriptions.map((subscription) => {
         const {
             description,
             insync,
@@ -53,4 +52,3 @@ export function mapGraphQlSubscriptionsResultToSubscriptionListItems(
             customerShortcode,
         };
     });
-}

package/src/components/index.ts

@@ -12,7 +12,6 @@ export * from './WfoTimeline';
 export * from './WfoLoading';
 export * from './WfoToastsList';
 export * from './WfoForms';
-export * from './WfoStartTaskButtonComboBox';
 export * from './WfoDateTime';
 export * from './WfoAuth';
 export * from './WfoDropdownButton';
@@ -25,3 +24,5 @@ export * from './WfoInsyncIcon';
 export * from './WfoError';
 export * from './WfoErrorBoundary';
 export * from './WfoWorkflowSteps';
+export * from './WfoNoResults';
+export * from './WfoStartButton';

package/src/configuration/constants.ts

@@ -1 +1,4 @@
 export const MAXIMUM_ITEMS_FOR_BULK_FETCHING = 1000;
+
+// Graphql typically returns items paginated, this number represents "all items"
+export const NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS = 1000000;

package/src/hooks/index.ts

@@ -1,5 +1,4 @@
 export * from './useCheckEngineStatus';
-export * from './useQueryWithGraphql';
 export * from './useMutateProcess';
 export * from './useOrchestratorConfig';
 export * from './useOrchestratorTheme';

package/src/hooks/surf/useGetSubscriptionDropdownOptions.ts

@@ -1,8 +1,7 @@
 import { isError } from 'react-query';
 
-import { getSubscriptionDropdownOptionsGraphQlQuery } from '../../graphqlQueries';
-import { GraphqlFilter, SubscriptionDropdownOption } from '../../types';
-import { useQueryWithGraphql } from '../useQueryWithGraphql';
+import { useGetSubscriptionsDropdownOptionsQuery } from '@/rtk';
+import { GraphqlFilter, SubscriptionDropdownOption } from '@/types';
 
 export const useGetSubscriptionDropdownOptions = (
     tags: string[] = [],
@@ -28,18 +27,12 @@ export const useGetSubscriptionDropdownOptions = (
         });
     }
 
-    const { data, isFetching, refetch } = useQueryWithGraphql(
-        getSubscriptionDropdownOptionsGraphQlQuery(),
-        {
-            filterBy: filters,
-        },
-        'subscriptionOptions',
-        { refetchOnWindowFocus: false },
-    );
+    const { data, isFetching, refetch } =
+        useGetSubscriptionsDropdownOptionsQuery({ filterBy: filters });
 
     const subscriptions = (() => {
-        if (!isFetching && !isError(data) && data && data.subscriptions.page) {
-            return data.subscriptions.page;
+        if (!isFetching && !isError(data) && data) {
+            return data.subscriptionDropdownOptions;
         }
         return [];
     })();

package/src/hooks/surf/useIsTaggedPort.ts

@@ -1,18 +1,15 @@
 import {
     subscriptionHasTaggedPortModeInstanceValue,
     subscriptionHasTaggedProduct,
-} from '../../components/WfoForms/formFields/utils';
-import { GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY } from '../../graphqlQueries';
-import { useQueryWithGraphql } from '../useQueryWithGraphql';
+} from '@/components/WfoForms/formFields/utils';
+import { useGetSubscriptionDetailQuery } from '@/rtk/endpoints/subscriptionDetail';
 
 export const useIsTaggedPort = (subscriptionId: string): [boolean, boolean] => {
-    const { data, isFetched } = useQueryWithGraphql(
-        GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY,
+    const { data, isFetching } = useGetSubscriptionDetailQuery(
         { subscriptionId },
-        `subscription-${subscriptionId}`,
-        { enabled: !!subscriptionId },
+        { skip: !subscriptionId },
     );
-    const subscriptionDetail = data?.subscriptions.page[0];
+    const subscriptionDetail = data?.subscription;
 
     // The ports portMode is tagged (with a vlan) when:
     // - The subscription contains a productBlockInstance with a productBlockInstanceValue with  the property port_mode and
@@ -24,5 +21,5 @@ export const useIsTaggedPort = (subscriptionId: string): [boolean, boolean] => {
           subscriptionHasTaggedProduct(subscriptionDetail)
         : false;
 
-    return [isFetched, portIsTagged];
+    return [!isFetching, portIsTagged];
 };

package/src/index.ts

@@ -2,7 +2,6 @@ export * from './api';
 export * from './components';
 export * from './configuration';
 export * from './contexts';
-export * from './graphqlQueries';
 export * from './hooks';
 export * from './icons';
 export * from './messages';

package/src/messages/en-GB.json

@@ -348,7 +348,9 @@
             "pauseEngine": "Pause workflow engine",
             "runningProcesses": "Running processes",
             "selectSettings": "Select cache",
-            "startEngine": "Start workflow engine"
+            "startEngine": "Start workflow engine",
+            "resetTextSearchIndex": "Reset text search index",
+            "resetTextSearchIndexButton": "Reset"
         }
     },
     "startPage": {

package/src/messages/nl-NL.json

@@ -347,7 +347,9 @@
             "pauseEngine": "Pauseer  workflow engine",
             "runningProcesses": "Lopende processen",
             "selectSettings": "Kies cache",
-            "startEngine": "Start workflow engine"
+            "startEngine": "Start workflow engine",
+            "resetTextSearchIndex": "Reset text search index",
+            "resetTextSearchIndexButton": "Reset"
         }
     },
     "startPage": {

package/src/pages/metadata/WfoProductBlocksPage.tsx

@@ -5,50 +5,43 @@ import { useTranslations } from 'next-intl';
 import { EuiBadgeGroup } from '@elastic/eui';
 import type { Pagination } from '@elastic/eui/src/components';
 
-import {
-    csvDownloadHandler,
-    getCsvFileNameWithDate,
-} from '@/utils/csvDownload';
-
 import {
     DEFAULT_PAGE_SIZE,
     DEFAULT_PAGE_SIZES,
     METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY,
-} from '../../components';
-import {
+    StoredTableConfig,
+    WfoDataSorting,
+    WfoDateTime,
+    WfoFirstPartUUID,
     WfoProductBlockBadge,
     WfoProductStatusBadge,
+    WfoTableColumns,
     WfoTableWithFilter,
-} from '../../components';
-import {
     getDataSortHandler,
     getPageChangeHandler,
     getQueryStringHandler,
-} from '../../components';
-import type { WfoDataSorting, WfoTableColumns } from '../../components';
-import type { StoredTableConfig } from '../../components';
-import '../../components/WfoBadges/WfoProductStatusBadge';
-import { WfoDateTime } from '../../components/WfoDateTime/WfoDateTime';
-import { WfoFirstPartUUID } from '../../components/WfoTable/WfoFirstPartUUID';
-import { mapSortableAndFilterableValuesToTableColumnConfig } from '../../components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
-import { GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY } from '../../graphqlQueries';
+    mapSortableAndFilterableValuesToTableColumnConfig,
+} from '@/components';
 import {
     useDataDisplayParams,
-    useQueryWithGraphql,
-    useQueryWithGraphqlLazy,
     useShowToastMessage,
     useStoredTableConfig,
-} from '../../hooks';
-import type {
+} from '@/hooks';
+import { useGetProductBlocksQuery, useLazyGetProductBlocksQuery } from '@/rtk';
+import {
+    BadgeType,
     GraphqlQueryVariables,
     ProductBlockDefinition,
-} from '../../types';
-import { BadgeType, SortOrder } from '../../types';
+    SortOrder,
+} from '@/types';
 import {
+    csvDownloadHandler,
+    getCsvFileNameWithDate,
     getQueryVariablesForExport,
     parseDateToLocaleDateTimeString,
     parseIsoString,
-} from '../../utils';
+} from '@/utils';
+
 import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
 
 const PRODUCT_BLOCK_FIELD_ID: keyof ProductBlockDefinition = 'productBlockId';
@@ -201,25 +194,22 @@ export const WfoProductBlocksPage = () => {
             sortBy: sortBy,
             query: queryString || undefined,
         };
-    const { data, isFetching, isError } = useQueryWithGraphql(
-        GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY,
+    const { data, isFetching, isError } = useGetProductBlocksQuery(
         graphqlQueryVariables,
-        ['productBlocks', 'listPage'],
     );
-    const { getData: getProductBlocksForExport, isFetching: isFetchingCsv } =
-        useQueryWithGraphqlLazy(
-            GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY,
+    const [getProductBlocksTrigger, { isFetching: isFetchingCsv }] =
+        useLazyGetProductBlocksQuery();
+    const getProductBlocksForExport = () =>
+        getProductBlocksTrigger(
             getQueryVariablesForExport(graphqlQueryVariables),
-            ['productBlocks', 'export'],
-        );
+        ).unwrap();
 
     const dataSorting: WfoDataSorting<ProductBlockDefinition> = {
         field: sortBy?.field ?? PRODUCT_BLOCK_FIELD_NAME,
         sortOrder: sortBy?.order ?? SortOrder.ASC,
     };
 
-    const { totalItems, sortFields, filterFields } =
-        data?.productBlocks?.pageInfo ?? {};
+    const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {};
 
     const pagination: Pagination = {
         pageSize: pageSize,
@@ -231,7 +221,7 @@ export const WfoProductBlocksPage = () => {
     return (
         <WfoMetadataPageLayout>
             <WfoTableWithFilter<ProductBlockDefinition>
-                data={data?.productBlocks.page || []}
+                data={data?.productBlocks || []}
                 tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
@@ -257,8 +247,8 @@ export const WfoProductBlocksPage = () => {
                 }
                 onExportData={csvDownloadHandler(
                     getProductBlocksForExport,
-                    (data) => data.productBlocks.page,
-                    (data) => data.productBlocks.pageInfo,
+                    (data) => data.productBlocks,
+                    (data) => data.pageInfo,
                     Object.keys(tableColumns),
                     getCsvFileNameWithDate('ProductBlocks'),
                     showToastMessage,

package/src/pages/metadata/WfoProductsPage.tsx

@@ -20,14 +20,12 @@ import {
 } from '@/components';
 import { WfoFirstPartUUID } from '@/components/WfoTable/WfoFirstPartUUID';
 import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
-import { getProductsQuery } from '@/graphqlQueries';
 import {
     useDataDisplayParams,
-    useQueryWithGraphql,
-    useQueryWithGraphqlLazy,
     useShowToastMessage,
     useStoredTableConfig,
 } from '@/hooks';
+import { useGetProductsQuery, useLazyGetProductsQuery } from '@/rtk';
 import type { GraphqlQueryVariables, ProductDefinition } from '@/types';
 import { BadgeType, SortOrder } from '@/types';
 import {
@@ -170,20 +168,17 @@ export const WfoProductsPage = () => {
         sortBy: sortBy,
         query: queryString || undefined,
     };
-    const { data, isFetching, isError } = useQueryWithGraphql(
-        getProductsQuery(),
+    const { data, isFetching, isError } = useGetProductsQuery(
         graphqlQueryVariables,
-        ['products', 'listPage'],
     );
-    const { getData: getProductsForExport, isFetching: isFetchingCsv } =
-        useQueryWithGraphqlLazy(
-            getProductsQuery(),
+    const [getProductsTrigger, { isFetching: isFetchingCsv }] =
+        useLazyGetProductsQuery();
+    const getProductsForExport = () =>
+        getProductsTrigger(
             getQueryVariablesForExport(graphqlQueryVariables),
-            ['products', 'export'],
-        );
+        ).unwrap();
 
-    const { totalItems, sortFields, filterFields } =
-        data?.products?.pageInfo ?? {};
+    const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {};
 
     const pagination: Pagination = {
         pageSize: pageSize,
@@ -200,7 +195,7 @@ export const WfoProductsPage = () => {
     return (
         <WfoMetadataPageLayout>
             <WfoTableWithFilter<ProductDefinition>
-                data={data ? data.products.page : []}
+                data={data?.products ?? []}
                 tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
@@ -224,8 +219,8 @@ export const WfoProductsPage = () => {
                 localStorageKey={METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY}
                 onExportData={csvDownloadHandler(
                     getProductsForExport,
-                    (data) => data.products.page,
-                    (data) => data.products.pageInfo,
+                    (data) => data?.products ?? [],
+                    (data) => data?.pageInfo || {},
                     Object.keys(tableColumns),
                     getCsvFileNameWithDate('Products'),
                     showToastMessage,

package/src/pages/metadata/WfoResourceTypesPage.tsx

@@ -5,41 +5,41 @@ import { useTranslations } from 'next-intl';
 import { EuiBadgeGroup } from '@elastic/eui';
 import type { Pagination } from '@elastic/eui/src/components';
 
-import { getQueryVariablesForExport } from '@/utils';
-import {
-    csvDownloadHandler,
-    getCsvFileNameWithDate,
-} from '@/utils/csvDownload';
-
 import {
     DEFAULT_PAGE_SIZE,
     DEFAULT_PAGE_SIZES,
     METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY,
     WfoProductBlockBadge,
-} from '../../components';
-import type { WfoDataSorting, WfoTableColumns } from '../../components';
-import { WfoTableWithFilter } from '../../components';
-import {
+    WfoTableWithFilter,
     getDataSortHandler,
     getPageChangeHandler,
     getQueryStringHandler,
-} from '../../components';
-import type { StoredTableConfig } from '../../components';
-import { WfoFirstPartUUID } from '../../components/WfoTable/WfoFirstPartUUID';
-import { mapSortableAndFilterableValuesToTableColumnConfig } from '../../components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
-import { GET_RESOURCE_TYPES_GRAPHQL_QUERY } from '../../graphqlQueries';
+} from '@/components';
+import type {
+    StoredTableConfig,
+    WfoDataSorting,
+    WfoTableColumns,
+} from '@/components';
 import {
     useDataDisplayParams,
-    useQueryWithGraphql,
-    useQueryWithGraphqlLazy,
     useShowToastMessage,
     useStoredTableConfig,
-} from '../../hooks';
-import type {
+} from '@/hooks';
+import { useGetResourceTypesQuery, useLazyGetResourceTypesQuery } from '@/rtk';
+import {
+    BadgeType,
     GraphqlQueryVariables,
     ResourceTypeDefinition,
-} from '../../types';
-import { BadgeType, SortOrder } from '../../types';
+    SortOrder,
+} from '@/types';
+import { getQueryVariablesForExport } from '@/utils';
+import {
+    csvDownloadHandler,
+    getCsvFileNameWithDate,
+} from '@/utils/csvDownload';
+
+import { WfoFirstPartUUID } from '../../components/WfoTable/WfoFirstPartUUID';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '../../components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
 import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
 
 export const RESOURCE_TYPE_FIELD_ID: keyof ResourceTypeDefinition =
@@ -55,7 +55,6 @@ export const WfoResourceTypesPage = () => {
     const t = useTranslations('metadata.resourceTypes');
     const tError = useTranslations('errors');
     const { showToastMessage } = useShowToastMessage();
-
     const [tableDefaults, setTableDefaults] =
         useState<StoredTableConfig<ResourceTypeDefinition>>();
 
@@ -144,25 +143,24 @@ export const WfoResourceTypesPage = () => {
             sortBy: sortBy,
             query: queryString || undefined,
         };
-    const { data, isFetching, isError } = useQueryWithGraphql(
-        GET_RESOURCE_TYPES_GRAPHQL_QUERY,
+    const { data, isFetching, isError } = useGetResourceTypesQuery(
         graphqlQueryVariables,
-        ['resourceTypes', 'listPage'],
     );
-    const { getData: getResourceTypesForExport, isFetching: isFetchingCsv } =
-        useQueryWithGraphqlLazy(
-            GET_RESOURCE_TYPES_GRAPHQL_QUERY,
+
+    const [getResourceTypesTrigger, { isFetching: isFetchingCsv }] =
+        useLazyGetResourceTypesQuery();
+
+    const getResourceTypesForExport = () =>
+        getResourceTypesTrigger(
             getQueryVariablesForExport(graphqlQueryVariables),
-            ['resourceTypes', 'export'],
-        );
+        ).unwrap();
 
     const dataSorting: WfoDataSorting<ResourceTypeDefinition> = {
         field: sortBy?.field ?? RESOURCE_TYPE_FIELD_TYPE,
         sortOrder: sortBy?.order ?? SortOrder.ASC,
     };
 
-    const { totalItems, sortFields, filterFields } =
-        data?.resourceTypes?.pageInfo || {};
+    const { totalItems, sortFields, filterFields } = data?.pageInfo || {};
 
     const pagination: Pagination = {
         pageSize: pageSize,
@@ -174,7 +172,7 @@ export const WfoResourceTypesPage = () => {
     return (
         <WfoMetadataPageLayout>
             <WfoTableWithFilter<ResourceTypeDefinition>
-                data={data ? data.resourceTypes.page : []}
+                data={data ? data.resourceTypes : []}
                 tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
@@ -200,8 +198,8 @@ export const WfoResourceTypesPage = () => {
                 }
                 onExportData={csvDownloadHandler(
                     getResourceTypesForExport,
-                    (data) => data.resourceTypes.page,
-                    (data) => data.resourceTypes.pageInfo,
+                    (data) => data.resourceTypes,
+                    (data) => data.pageInfo,
                     Object.keys(tableColumns),
                     getCsvFileNameWithDate('ResourceTypes'),
                     showToastMessage,

package/src/pages/metadata/WfoWorkflowsPage.tsx

@@ -5,13 +5,26 @@ import { useTranslations } from 'next-intl';
 import { EuiBadgeGroup } from '@elastic/eui';
 import type { Pagination } from '@elastic/eui/src/components';
 
+import type { WfoDataSorting, WfoTableColumns } from '@/components';
+import {
+    DEFAULT_PAGE_SIZE,
+    DEFAULT_PAGE_SIZES,
+    METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY,
+    StoredTableConfig,
+    WfoDateTime,
+    WfoProductBlockBadge,
+    WfoTableWithFilter,
+    WfoWorkflowTargetBadge,
+    getDataSortHandler,
+    getPageChangeHandler,
+    getQueryStringHandler,
+} from '@/components';
 import {
     useDataDisplayParams,
-    useQueryWithGraphql,
-    useQueryWithGraphqlLazy,
     useShowToastMessage,
     useStoredTableConfig,
 } from '@/hooks';
+import { useGetWorkflowsQuery, useLazyGetWorkflowsQuery } from '@/rtk';
 import type { GraphqlQueryVariables, WorkflowDefinition } from '@/types';
 import { BadgeType, SortOrder } from '@/types';
 import {
@@ -25,24 +38,7 @@ import {
     getCsvFileNameWithDate,
 } from '@/utils/csvDownload';
 
-import {
-    DEFAULT_PAGE_SIZE,
-    DEFAULT_PAGE_SIZES,
-    METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY,
-    WfoProductBlockBadge,
-} from '../../components';
-import { WfoTableWithFilter } from '../../components';
-import {
-    getDataSortHandler,
-    getPageChangeHandler,
-    getQueryStringHandler,
-} from '../../components';
-import type { WfoDataSorting, WfoTableColumns } from '../../components';
-import { StoredTableConfig } from '../../components';
-import { WfoWorkflowTargetBadge } from '../../components/WfoBadges/WfoWorkflowTargetBadge';
-import { WfoDateTime } from '../../components/WfoDateTime/WfoDateTime';
 import { mapSortableAndFilterableValuesToTableColumnConfig } from '../../components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
-import { GET_WORKFLOWS_GRAPHQL_QUERY } from '../../graphqlQueries/workflows/workflowsQuery';
 import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
 import {
     graphQlWorkflowListMapper,
@@ -155,31 +151,31 @@ export const WfoWorkflowsPage = () => {
 
     const { pageSize, pageIndex, sortBy, queryString } = dataDisplayParams;
 
-    const graphqlQueryVariables: GraphqlQueryVariables<WorkflowDefinition> = {
-        first: pageSize,
-        after: pageIndex * pageSize,
-        sortBy: graphQlWorkflowListMapper(sortBy),
-        query: queryString || undefined,
-    };
-    const { data, isFetching, isError } = useQueryWithGraphql(
-        GET_WORKFLOWS_GRAPHQL_QUERY,
-        graphqlQueryVariables,
-        ['workflows', 'listPage'],
+    const workflowListQueryVariables: GraphqlQueryVariables<WorkflowDefinition> =
+        {
+            first: pageSize,
+            after: pageIndex * pageSize,
+            sortBy: graphQlWorkflowListMapper(sortBy),
+            query: queryString || undefined,
+        };
+    const { data, isFetching, isError } = useGetWorkflowsQuery(
+        workflowListQueryVariables,
     );
-    const { getData: getWorkflowsForExport, isFetching: isFetchingCsv } =
-        useQueryWithGraphqlLazy(
-            GET_WORKFLOWS_GRAPHQL_QUERY,
-            getQueryVariablesForExport(graphqlQueryVariables),
-            ['workflows', 'export'],
-        );
+
+    const [getWorkflowsTrigger, { isFetching: isFetchingCsv }] =
+        useLazyGetWorkflowsQuery();
+
+    const getWorkflowsForExport = () =>
+        getWorkflowsTrigger(
+            getQueryVariablesForExport(workflowListQueryVariables),
+        ).unwrap();
 
     const dataSorting: WfoDataSorting<WorkflowListItem> = {
         field: sortBy?.field ?? 'name',
         sortOrder: sortBy?.order ?? SortOrder.ASC,
     };
 
-    const { totalItems, sortFields, filterFields } =
-        data?.workflows?.pageInfo || {};
+    const { totalItems, sortFields, filterFields } = data?.pageInfo || {};
 
     const pagination: Pagination = {
         pageSize: pageSize,
@@ -191,7 +187,13 @@ export const WfoWorkflowsPage = () => {
     return (
         <WfoMetadataPageLayout>
             <WfoTableWithFilter<WorkflowListItem>
-                data={data ? mapWorkflowDefinitionToWorkflowListItem(data) : []}
+                data={
+                    data
+                        ? mapWorkflowDefinitionToWorkflowListItem(
+                              data.workflows,
+                          )
+                        : []
+                }
                 tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
@@ -215,8 +217,8 @@ export const WfoWorkflowsPage = () => {
                 localStorageKey={METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY}
                 onExportData={csvDownloadHandler(
                     getWorkflowsForExport,
-                    (data) => data.workflows.page,
-                    (data) => data.workflows.pageInfo,
+                    (data) => data.workflows,
+                    (data) => data.pageInfo,
                     Object.keys(tableColumns),
                     getCsvFileNameWithDate('Workflows'),
                     showToastMessage,

package/src/pages/metadata/workflowListObjectMapper.ts

@@ -1,14 +1,11 @@
-import {
-    GraphQLSort,
-    WorkflowDefinition,
-    WorkflowDefinitionsResult,
-} from '../../types';
+import { GraphQLSort, WorkflowDefinition } from '@/types';
+
 import { WorkflowListItem } from './WfoWorkflowsPage';
 
 export const mapWorkflowDefinitionToWorkflowListItem = (
-    workflowDefinitionResult: WorkflowDefinitionsResult,
+    workflows: WorkflowDefinition[],
 ): WorkflowListItem[] =>
-    workflowDefinitionResult.workflows.page.map((workflowDefinition) => {
+    workflows.map((workflowDefinition) => {
         const { name, target, description, createdAt, products } =
             workflowDefinition;