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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.3.1",
+    "version": "1.4.0",
     "license": "MIT",
     "scripts": {
         "test": "jest",
@@ -14,10 +14,8 @@
     "dependencies": {
         "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.11.1",
-        "@graphql-typed-document-node/core": "3.2.0",
         "@rtk-query/graphql-request-base-query": "^2.3.1",
         "axios": "^1.6.5",
-        "graphql-request": "^6.1.0",
         "invariant": "^2.2.4",
         "moment": "^2.29.4",
         "moment-timezone": "^0.5.43",

package/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx

@@ -18,10 +18,9 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFormRow, EuiText } from '@elastic/eui';
 
-import { GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY } from '../../../graphqlQueries';
-import { useQueryWithGraphql } from '../../../hooks';
-import { WfoLoading } from '../../WfoLoading';
-import { WfoSubscriptionGeneral } from '../../WfoSubscription';
+import { WfoLoading, WfoSubscriptionGeneral } from '@/components';
+import { useGetSubscriptionDetailQuery } from '@/rtk';
+
 import { FieldProps } from './types';
 
 export type SubscriptionSummaryFieldProps = FieldProps<string>;
@@ -33,18 +32,15 @@ interface SubscriptionSummaryDisplayProps {
 const SubscriptionSummaryDisplay = ({
     subscriptionId,
 }: SubscriptionSummaryDisplayProps) => {
-    const { data } = useQueryWithGraphql(
-        GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY,
-        { subscriptionId },
-        `subscription-${subscriptionId}`,
-    );
-    const subscriptionDetail = data?.subscriptions.page[0];
+    const { data } = useGetSubscriptionDetailQuery({
+        subscriptionId,
+    });
 
-    return (
-        (subscriptionDetail && (
-            <WfoSubscriptionGeneral subscriptionDetail={subscriptionDetail} />
-        )) || <WfoLoading />
-    );
+    if (!data) {
+        return <WfoLoading />;
+    }
+
+    return <WfoSubscriptionGeneral subscriptionDetail={data.subscription} />;
 };
 
 const SubscriptionSummary = ({

package/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx

@@ -7,6 +7,7 @@ import { EuiSideNav, EuiSpacer } from '@elastic/eui';
 import { EuiSideNavItemType } from '@elastic/eui/src/components/side_nav/side_nav_types';
 
 import { WfoIsAllowedToRender } from '@/components';
+import { WfoStartWorkflowButtonComboBox } from '@/components/WfoStartButton/WfoStartWorkflowComboBox';
 import { PolicyResource } from '@/configuration/policy-resources';
 import { usePolicy } from '@/hooks';
 
@@ -23,7 +24,6 @@ import {
     PATH_WORKFLOWS,
 } from '../paths';
 import { WfoCopyright } from './WfoCopyright';
-import { WfoStartCreateWorkflowButtonComboBox } from './WfoStartCreateWorkflowButtonComboBox';
 
 export const renderEmptyElementWhenNotAllowedByPolicy = (isAllowed: boolean) =>
     isAllowed ? undefined : () => <></>;
@@ -171,7 +171,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
                     <WfoIsAllowedToRender
                         resource={PolicyResource.SUBSCRIPTION_CREATE}
                     >
-                        <WfoStartCreateWorkflowButtonComboBox />
+                        <WfoStartWorkflowButtonComboBox />
                     </WfoIsAllowedToRender>
                     <EuiSpacer size="m" />
                     <WfoCopyright />

package/src/components/WfoProcessList/WfoProcessesList.tsx

@@ -24,11 +24,14 @@ import {
     getQueryStringHandler,
     mapSortableAndFilterableValuesToTableColumnConfig,
 } from '@/components/WfoTable';
-import { getProcessListGraphQlQuery } from '@/graphqlQueries';
-import { useQueryWithGraphqlLazy, useShowToastMessage } from '@/hooks';
+import { useShowToastMessage } from '@/hooks';
 import { DataDisplayParams } from '@/hooks';
 import { WfoProcessListSubscriptionsCell } from '@/pages';
-import { useGetProcessListQuery } from '@/rtk';
+import {
+    ProcessListResponse,
+    useGetProcessListQuery,
+    useLazyGetProcessListQuery,
+} from '@/rtk';
 import { GraphqlQueryVariables, Process, SortOrder } from '@/types';
 import { parseDateToLocaleDateTimeString } from '@/utils';
 import { getQueryVariablesForExport } from '@/utils';
@@ -213,6 +216,9 @@ export const WfoProcessesList = ({
     const { data, isFetching, isError } =
         useGetProcessListQuery(processListQueryVars);
 
+    const [getProcessListTrigger, { isFetching: isFetchingCsv }] =
+        useLazyGetProcessListQuery();
+
     const { processes, pageInfo } = data || {};
 
     const pagination: Pagination = {
@@ -226,12 +232,10 @@ export const WfoProcessesList = ({
         sortOrder: sortBy?.order ?? SortOrder.ASC,
     };
 
-    const { getData: getProcessListForExport, isFetching: isFetchingCsv } =
-        useQueryWithGraphqlLazy(
-            getProcessListGraphQlQuery(),
+    const getProcessListForExport = () =>
+        getProcessListTrigger(
             getQueryVariablesForExport(processListQueryVars),
-            ['processes', 'export'],
-        );
+        ).unwrap();
 
     return (
         <WfoTableWithFilter<ProcessListItem>
@@ -258,7 +262,10 @@ export const WfoProcessesList = ({
             onUpdateQueryString={getQueryStringHandler(setDataDisplayParam)}
             onUpdatePage={getPageChangeHandler(setDataDisplayParam)}
             onUpdateDataSort={getDataSortHandler(setDataDisplayParam)}
-            onExportData={csvDownloadHandler(
+            onExportData={csvDownloadHandler<
+                ProcessListResponse,
+                ProcessListItem
+            >(
                 getProcessListForExport,
                 mapGraphQlProcessListExportResultToProcessListItems,
                 mapGraphQlProcessListResultToPageInfo,

package/src/components/WfoProcessList/processListObjectMappers.ts

@@ -1,15 +1,11 @@
-import {
-    GraphQLSort,
-    GraphqlFilter,
-    Process,
-    ProcessListResult,
-} from '@/types';
+import { ProcessListResponse } from '@/rtk';
+import { GraphQLSort, GraphqlFilter, Process } from '@/types';
 
 import { ProcessListItem } from './WfoProcessesList';
 
 export const mapGraphQlProcessListResultToPageInfo = (
-    processesResult: ProcessListResult,
-) => processesResult.processes.pageInfo;
+    processesResponse: ProcessListResponse,
+) => processesResponse.pageInfo;
 
 export const mapGraphQlProcessListResultToProcessListItems = (
     processes: Process[],
@@ -51,9 +47,9 @@ export const mapGraphQlProcessListResultToProcessListItems = (
     });
 
 export const mapGraphQlProcessListExportResultToProcessListItems = (
-    processesResult: ProcessListResult,
+    processesResponse: ProcessListResponse,
 ): ProcessListItem[] =>
-    processesResult.processes.page.map((process) => {
+    processesResponse.processes.map((process) => {
         const {
             workflowName,
             lastStep,

package/src/components/WfoSettings/WfoModifySettings.tsx

@@ -2,24 +2,40 @@ import React from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import { EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
 
 import { WfoEngineStatusButton } from './WfoEngineStatusButton';
+import { WfoResetTextSearchIndexButton } from './WfoResetTextSearchIndexButton';
 
 export const WfoModifySettings = () => {
     const t = useTranslations('settings.page');
     return (
-        <EuiPanel
-            hasShadow={false}
-            color="subdued"
-            paddingSize="l"
-            css={{ width: '50%' }}
-        >
-            <EuiText size="s">
-                <h4>{t('modifyEngine')}</h4>
-            </EuiText>
-            <EuiSpacer size="m"></EuiSpacer>
-            <WfoEngineStatusButton />
-        </EuiPanel>
+        <EuiFlexItem>
+            <EuiPanel
+                hasShadow={false}
+                color="subdued"
+                paddingSize="l"
+                css={{ width: '50%' }}
+            >
+                <EuiText size="s">
+                    <h4>{t('resetTextSearchIndex')}</h4>
+                </EuiText>
+                <EuiSpacer size="m"></EuiSpacer>
+                <WfoResetTextSearchIndexButton />
+            </EuiPanel>
+            <EuiSpacer />
+            <EuiPanel
+                hasShadow={false}
+                color="subdued"
+                paddingSize="l"
+                css={{ width: '50%' }}
+            >
+                <EuiText size="s">
+                    <h4>{t('modifyEngine')}</h4>
+                </EuiText>
+                <EuiSpacer size="m"></EuiSpacer>
+                <WfoEngineStatusButton />
+            </EuiPanel>
+        </EuiFlexItem>
     );
 };

package/src/components/WfoSettings/WfoResetTextSearchIndexButton.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiButton } from '@elastic/eui';
+
+import { useResetTextSearchIndexMutation } from '@/rtk';
+
+export const WfoResetTextSearchIndexButton = () => {
+    const [resetTextSearchIndex] = useResetTextSearchIndexMutation();
+
+    const t = useTranslations('settings.page');
+
+    return (
+        <EuiButton
+            onClick={() => resetTextSearchIndex(null)}
+            iconType="refresh"
+        >
+            {t('resetTextSearchIndexButton')}
+        </EuiButton>
+    );
+};

package/src/components/WfoSettings/index.ts

@@ -2,3 +2,4 @@ export * from './WfoFlushSettings';
 export * from './WfoEngineStatusButton';
 export * from './WfoModifySettings';
 export * from './WfoStatus';
+export * from './WfoResetTextSearchIndexButton';

package/src/components/{WfoButtonComboBox/WfoButtonComboBox.tsx → WfoStartButton/WfoStartButtonComboBox.tsx}

@@ -1,32 +1,26 @@
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 
 import { EuiButton, EuiPopover, EuiSelectable, EuiSpacer } from '@elastic/eui';
 
-import { useOrchestratorTheme } from '../../hooks';
-import { WfoPlusCircleFill } from '../../icons';
-import { getStyles } from './styles';
+import { useOrchestratorTheme } from '@/hooks';
+import { WfoPlusCircleFill } from '@/icons';
+import { StartComboBoxOption } from '@/types';
 
-export type WorkflowComboBoxOption = {
-    data: {
-        workflowName: string;
-        productId?: string;
-    };
-    label: string;
-};
+import { getStyles } from './styles';
 
-export type WfoButtonComboBoxProps = {
+export type WfoStartButtonComboBoxProps = {
     buttonText: string;
-    options: WorkflowComboBoxOption[];
-    onOptionChange: (selectedOption: WorkflowComboBoxOption) => void;
+    options: StartComboBoxOption[];
+    onOptionChange: (selectedOption: StartComboBoxOption) => void;
     isProcess: boolean;
 };
 
-export const WfoButtonComboBox: FC<WfoButtonComboBoxProps> = ({
+export const WfoStartButtonComboBox = ({
     buttonText,
     options,
     onOptionChange,
     isProcess,
-}) => {
+}: WfoStartButtonComboBoxProps) => {
     const [isPopoverOpen, setPopoverOpen] = useState(false);
     const { selectableStyle } = getStyles();
     const { theme } = useOrchestratorTheme();
@@ -55,7 +49,7 @@ export const WfoButtonComboBox: FC<WfoButtonComboBoxProps> = ({
             isOpen={isPopoverOpen}
             closePopover={() => setPopoverOpen(false)}
         >
-            <EuiSelectable<WorkflowComboBoxOption>
+            <EuiSelectable<StartComboBoxOption>
                 css={selectableStyle}
                 searchable
                 options={options}

package/src/components/WfoStartButton/WfoStartTaskComboBox.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/router';
+
+import { PATH_START_NEW_TASK } from '@/components';
+import { useCheckEngineStatus } from '@/hooks';
+import { useGetTaskOptionsQuery } from '@/rtk';
+import { StartComboBoxOption } from '@/types';
+
+import { WfoStartButtonComboBox } from './WfoStartButtonComboBox';
+
+export const WfoStartTaskButtonComboBox = () => {
+    const router = useRouter();
+    const t = useTranslations('common');
+    const { isEngineRunningNow } = useCheckEngineStatus();
+
+    const { data } = useGetTaskOptionsQuery();
+    const taskOptions = data?.startOptions || [];
+
+    const comboBoxOptions: StartComboBoxOption[] = taskOptions.map(
+        (option) => ({
+            data: {
+                workflowName: option.name,
+            },
+            label: option.description || '',
+        }),
+    );
+
+    const handleOptionChange = async (selectedProduct: StartComboBoxOption) => {
+        if (await isEngineRunningNow()) {
+            const { workflowName } = selectedProduct.data;
+            router.push({
+                pathname: `${PATH_START_NEW_TASK}/${workflowName}`,
+            });
+        }
+    };
+
+    return (
+        <WfoStartButtonComboBox
+            buttonText={t('newTask')}
+            options={comboBoxOptions}
+            onOptionChange={handleOptionChange}
+            isProcess={false}
+        />
+    );
+};

package/src/components/WfoStartButton/WfoStartWorkflowComboBox.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/router';
+
+import { useCheckEngineStatus } from '@/hooks';
+import { useGetWorkflowOptionsQuery } from '@/rtk';
+import { StartComboBoxOption } from '@/types';
+
+import { PATH_START_NEW_WORKFLOW } from '../WfoPageTemplate';
+import { WfoStartButtonComboBox } from './WfoStartButtonComboBox';
+
+export const WfoStartWorkflowButtonComboBox = () => {
+    const router = useRouter();
+    const t = useTranslations('common');
+    const { isEngineRunningNow } = useCheckEngineStatus();
+
+    const { data } = useGetWorkflowOptionsQuery();
+    const workflowOptions = data?.startOptions || [];
+
+    const comboBoxOptions: StartComboBoxOption[] = workflowOptions.map(
+        (option) => ({
+            data: {
+                workflowName: option.workflowName,
+                productId: option.productId,
+            },
+            label: option.productName || '',
+        }),
+    );
+
+    const handleOptionChange = async (selectedProduct: StartComboBoxOption) => {
+        if (await isEngineRunningNow()) {
+            const { workflowName, productId } = selectedProduct.data;
+            router.push({
+                pathname: `${PATH_START_NEW_WORKFLOW}/${workflowName}`,
+                query: { productId },
+            });
+        }
+    };
+
+    return (
+        <WfoStartButtonComboBox
+            buttonText={t('newSubscription')}
+            options={comboBoxOptions}
+            onOptionChange={handleOptionChange}
+            isProcess
+        />
+    );
+};

package/src/components/WfoStartButton/index.ts

@@ -0,0 +1,2 @@
+export * from './WfoStartTaskComboBox';
+export * from './WfoStartWorkflowComboBox';

package/src/components/WfoSubscription/WfoRelatedSubscriptions.tsx

@@ -6,31 +6,29 @@ import Link from 'next/link';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiSwitch } from '@elastic/eui';
 import type { Criteria, Pagination } from '@elastic/eui';
 
-import { GET_RELATED_SUBSCRIPTIONS_GRAPHQL_QUERY } from '../../graphqlQueries/relatedSubscriptionsQuery';
 import {
-    useDataDisplayParams,
-    useOrchestratorTheme,
-    useQueryWithGraphql,
-} from '../../hooks';
-import { WfoSearchStrikethrough } from '../../icons';
+    DEFAULT_PAGE_SIZE,
+    DEFAULT_PAGE_SIZES,
+    WfoBasicTable,
+    WfoDataSorting,
+    WfoFirstPartUUID,
+    WfoInsyncIcon,
+    WfoNoResults,
+    WfoSubscriptionStatusBadge,
+    WfoTableColumns,
+    getDataSortHandler,
+    getPageChangeHandler,
+} from '@/components';
+import { useDataDisplayParams, useOrchestratorTheme } from '@/hooks';
+import { WfoSearchStrikethrough } from '@/icons';
+import { useGetRelatedSubscriptionsQuery } from '@/rtk';
 import {
     GraphqlFilter,
     RelatedSubscription,
     SortOrder,
     SubscriptionStatus,
-} from '../../types';
-import { parseDate, parseDateToLocaleDateString } from '../../utils';
-import { WfoSubscriptionStatusBadge } from '../WfoBadges';
-import { WfoInsyncIcon } from '../WfoInsyncIcon/WfoInsyncIcon';
-import { WfoNoResults } from '../WfoNoResults';
-import {
-    WfoTableColumns,
-    getDataSortHandler,
-    getPageChangeHandler,
-} from '../WfoTable';
-import { WfoBasicTable, WfoDataSorting } from '../WfoTable';
-import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES } from '../WfoTable';
-import { WfoFirstPartUUID } from '../WfoTable/WfoFirstPartUUID';
+} from '@/types';
+import { parseDate, parseDateToLocaleDateString } from '@/utils';
 
 interface WfoRelatedSubscriptionsProps {
     subscriptionId: string;
@@ -58,23 +56,19 @@ export const WfoRelatedSubscriptions = ({
             },
         });
 
-    const { data, isFetching } = useQueryWithGraphql(
-        GET_RELATED_SUBSCRIPTIONS_GRAPHQL_QUERY,
-        {
-            first: dataDisplayParams.pageSize,
-            after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
-            subscriptionId: subscriptionId,
-            sortBy: dataDisplayParams.sortBy,
-            terminatedSubscriptionFilter: hideTerminatedSubscriptions
-                ? terminatedSubscriptionsFilter
-                : undefined,
-        },
-        'relatedSubscriptions',
-    );
-    const relatedSubscriptions =
-        data?.subscriptions.page[0].inUseBySubscriptions.page;
-    const relatedSubscriptionsPageInfo =
-        data?.subscriptions.page[0].inUseBySubscriptions.pageInfo;
+    const { data, isFetching } = useGetRelatedSubscriptionsQuery({
+        first: dataDisplayParams.pageSize,
+        after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
+        subscriptionId: subscriptionId,
+        sortBy: dataDisplayParams.sortBy,
+        terminatedSubscriptionFilter: hideTerminatedSubscriptions
+            ? terminatedSubscriptionsFilter
+            : undefined,
+    });
+
+    const relatedSubscriptions = data?.relatedSubscriptions;
+    const relatedSubscriptionsPageInfo = data?.pageInfo;
+
     const tableColumns: WfoTableColumns<RelatedSubscription> = {
         subscriptionId: {
             field: 'subscriptionId',

package/src/components/WfoSubscription/WfoSubscription.tsx

@@ -6,22 +6,25 @@ import {
     EuiBadgeGroup,
     EuiFlexGroup,
     EuiFlexItem,
+    EuiSpacer,
     EuiText,
 } from '@elastic/eui';
 
-import { GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY } from '@/graphqlQueries';
-import { useOrchestratorTheme, useQueryWithGraphql } from '@/hooks';
+import {
+    WfoFilterTabs,
+    WfoLoading,
+    WfoProcessesTimeline,
+    WfoRelatedSubscriptions,
+    WfoSubscriptionActions,
+    WfoSubscriptionDetailTree,
+    WfoSubscriptionGeneral,
+} from '@/components';
+import { useOrchestratorTheme } from '@/hooks';
+import { useGetSubscriptionDetailQuery } from '@/rtk/endpoints/subscriptionDetail';
 
 import { WfoSubscriptionStatusBadge } from '../WfoBadges';
 import { WfoSubscriptionSyncStatusBadge } from '../WfoBadges/WfoSubscriptionSyncStatusBadge';
 import { WfoError } from '../WfoError';
-import { WfoFilterTabs } from '../WfoFilterTabs';
-import { WfoLoading } from '../WfoLoading';
-import { WfoProcessesTimeline } from './WfoProcessesTimeline';
-import { WfoRelatedSubscriptions } from './WfoRelatedSubscriptions';
-import { WfoSubscriptionActions } from './WfoSubscriptionActions';
-import { WfoSubscriptionDetailTree } from './WfoSubscriptionDetailTree';
-import { WfoSubscriptionGeneral } from './WfoSubscriptionGeneral';
 import { subscriptionDetailTabs } from './subscriptionDetailTabs';
 import { SubscriptionDetailTab } from './utils';
 
@@ -47,21 +50,14 @@ export const WfoSubscription = ({ subscriptionId }: WfoSubscriptionProps) => {
         );
     })();
 
-    const { data, isLoading, isError } = useQueryWithGraphql(
-        GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY,
-        { subscriptionId },
-        `subscription-${subscriptionId}`,
-    );
+    const { data, isLoading, isError } = useGetSubscriptionDetailQuery({
+        subscriptionId,
+    });
 
     const onSelectedTabChanged = (tab: SubscriptionDetailTab) => {
         setActiveTab(tab);
     };
-
-    const subscriptionResult =
-        data && data.subscriptions && data.subscriptions.page;
-    const subscriptionDetail = subscriptionResult
-        ? subscriptionResult[0]
-        : null;
+    const subscriptionDetail = data?.subscription;
 
     return (
         <>
@@ -77,6 +73,7 @@ export const WfoSubscription = ({ subscriptionId }: WfoSubscriptionProps) => {
                                 <EuiText>
                                     <h2>{subscriptionDetail.description}</h2>
                                 </EuiText>
+                                <EuiSpacer size="xs" />
                                 <EuiBadgeGroup
                                     css={{ marginRight: multiplyByBaseUnit(1) }}
                                 >

package/src/components/WfoSubscription/index.ts

@@ -1,9 +1,11 @@
 export * from './utils';
+
+export * from './SubscriptionKeyValueBlock';
+export * from './WfoInSyncField';
 export * from './WfoProcessesTimeline';
-export * from './WfoSubscriptionProductBlock';
+export * from './WfoRelatedSubscriptions';
+export * from './WfoSubscription';
 export * from './WfoSubscriptionActions';
-export * from './SubscriptionKeyValueBlock';
+export * from './WfoSubscriptionProductBlock';
 export * from './WfoSubscriptionDetailTree';
 export * from './WfoSubscriptionGeneral';
-export * from './WfoSubscription';
-export * from './WfoInSyncField';

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -12,13 +12,11 @@ import {
     WfoInsyncIcon,
     WfoSubscriptionStatusBadge,
 } from '@/components';
-import { getSubscriptionsListGraphQlQuery } from '@/graphqlQueries';
+import { DataDisplayParams, useShowToastMessage } from '@/hooks';
 import {
-    DataDisplayParams,
-    useQueryWithGraphql,
-    useQueryWithGraphqlLazy,
-    useShowToastMessage,
-} from '@/hooks';
+    useGetSubscriptionListQuery,
+    useLazyGetSubscriptionListQuery,
+} from '@/rtk/endpoints/subscriptionList';
 import { GraphqlQueryVariables, SortOrder } from '@/types';
 import {
     getQueryVariablesForExport,
@@ -155,17 +153,16 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
         filterBy: alwaysOnFilters,
         query: queryString || undefined,
     };
-    const { data, isError, isFetching } = useQueryWithGraphql(
-        getSubscriptionsListGraphQlQuery<SubscriptionListItem>(),
+
+    const { data, isFetching, isError } = useGetSubscriptionListQuery(
         graphqlQueryVariables,
-        ['subscriptions', 'listPage'],
     );
-    const { getData: getSubscriptionListForExport, isFetching: isFetchingCsv } =
-        useQueryWithGraphqlLazy(
-            getSubscriptionsListGraphQlQuery<SubscriptionListItem>(),
+    const [getSubscriptionListTrigger, { isFetching: isFetchingCsv }] =
+        useLazyGetSubscriptionListQuery();
+    const getSubscriptionListForExport = () =>
+        getSubscriptionListTrigger(
             getQueryVariablesForExport(graphqlQueryVariables),
-            ['subscriptions', 'export'],
-        );
+        ).unwrap();
 
     const sortedColumnId = getTypedFieldFromObject(sortBy?.field, tableColumns);
     if (!sortedColumnId) {
@@ -177,8 +174,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
         field: sortedColumnId,
         sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
     };
-    const { totalItems, sortFields, filterFields } =
-        data?.subscriptions?.pageInfo ?? {};
+    const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {};
     const pagination: Pagination = {
         pageSize: dataDisplayParams.pageSize,
         pageIndex: dataDisplayParams.pageIndex,