702 related subscriptions

.changeset/old-kangaroos-give.md

@@ -0,0 +1,5 @@
+---
+"@orchestrator-ui/orchestrator-ui-components": patch
+---
+
+Uses relatedSubscriptions RTK Query

packages/orchestrator-ui-components/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',

packages/orchestrator-ui-components/src/components/index.ts

@@ -25,3 +25,4 @@ export * from './WfoInsyncIcon';
 export * from './WfoError';
 export * from './WfoErrorBoundary';
 export * from './WfoWorkflowSteps';
+export * from './WfoNoResults';

packages/orchestrator-ui-components/src/rtk/endpoints/index.ts

@@ -1,10 +1,12 @@
 export * from './customers';
 export * from './processList';
-export * from './metadata/productBlocks';
+export * from './settings';
+export * from './streamMessages';
 export * from './inSync';
 export * from './processSteps';
 export * from './processListSummary';
 export * from './metadata';
 export * from './settings';
 export * from './streamMessages';
 export * from './subscriptionDetail';
+export * from './relatedSubscriptions';

packages/orchestrator-ui-components/src/rtk/endpoints/relatedSubscriptions.ts

@@ -0,0 +1,99 @@
+import {
+    BaseGraphQlResult,
+    GraphqlFilter,
+    GraphqlQueryVariables,
+    RelatedSubscription,
+    RelatedSubscriptionsResult,
+    Subscription,
+} from '@/types';
+
+import { orchestratorApi } from '../api';
+
+export const RelatedSubscriptionsQuery = `
+query RelatedSubscriptions(
+    $subscriptionId: String!
+    $first: Int!
+    $after: Int!
+    $sortBy: [GraphqlSort!]
+    $terminatedSubscriptionFilter: [GraphqlFilter!]
+) {
+    subscriptions(
+        filterBy: { value: $subscriptionId, field: "subscriptionId" }
+    ) {
+        page {
+            subscriptionId
+            inUseBySubscriptions(
+                first: $first
+                after: $after
+                sortBy: $sortBy
+                filterBy: $terminatedSubscriptionFilter
+            ) {
+                page {
+                    subscriptionId
+                    customer {
+                        fullname
+                    }
+                    description
+                    insync
+                    startDate
+                    status
+                    product {
+                        tag
+                    }
+                }
+                pageInfo {
+                    endCursor
+                    hasNextPage
+                    hasPreviousPage
+                    startCursor
+                    totalItems
+                    sortFields
+                    filterFields
+                }
+            }
+        }
+    }
+}
+`;
+
+export type RelatedSubscriptionsResponse = {
+    relatedSubscriptions: RelatedSubscription[];
+} & BaseGraphQlResult;
+
+type RelatedSubscriptionVariables = GraphqlQueryVariables<RelatedSubscription> &
+    Pick<Subscription, 'subscriptionId'> & {
+        terminatedSubscriptionFilter?: GraphqlFilter<RelatedSubscription>;
+    };
+
+const relatedSubscriptionsApi = orchestratorApi.injectEndpoints({
+    endpoints: (build) => ({
+        getRelatedSubscriptions: build.query<
+            RelatedSubscriptionsResponse,
+            RelatedSubscriptionVariables
+        >({
+            query: (variables) => ({
+                document: RelatedSubscriptionsQuery,
+                variables,
+            }),
+            transformResponse: (
+                result: RelatedSubscriptionsResult,
+            ): RelatedSubscriptionsResponse => {
+                const relatedSubscriptionResultForSubscription =
+                    result.subscriptions.page[0] || [];
+                const relatedSubscriptions =
+                    relatedSubscriptionResultForSubscription
+                        .inUseBySubscriptions.page || [];
+                const pageInfo =
+                    relatedSubscriptionResultForSubscription
+                        .inUseBySubscriptions.pageInfo || {};
+
+                return {
+                    relatedSubscriptions,
+                    pageInfo,
+                };
+            },
+        }),
+    }),
+});
+
+export const { useGetRelatedSubscriptionsQuery } = relatedSubscriptionsApi;