702 Moves subscription detail graphql query to RTK client

.changeset/famous-scissors-shop.md

@@ -0,0 +1,5 @@
+---
+"@orchestrator-ui/orchestrator-ui-components": minor
+---
+
+702 Moves subscriptionDetail to RTK

packages/orchestrator-ui-components/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 = ({

packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscription.tsx

@@ -9,19 +9,21 @@ import {
     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 +49,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 (
         <>

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

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

@@ -1,3 +1,2 @@
 export * from './productsQuery';
-export * from './subscriptionDetailQuery';
 export * from './subscriptionsDropdownOptionsQuery';

packages/orchestrator-ui-components/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];
 };

packages/orchestrator-ui-components/src/rtk/api.ts

@@ -15,9 +15,10 @@ export enum BaseQueryTypes {
 
 export enum CacheTags {
     engineStatus = 'engineStatus',
-    subscriptionList = 'subscriptionList',
     processList = 'processList',
     processListSummary = 'processListSummary',
+    subscription = 'subscription',
+    subscriptionList = 'subscriptionList',
 }
 
 type ExtraOptions = {
@@ -69,5 +70,6 @@ export const orchestratorApi = createApi({
         CacheTags.processList,
         CacheTags.processListSummary,
         CacheTags.subscriptionList,
+        CacheTags.subscription,
     ],
 });

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

@@ -1,9 +1,10 @@
 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';

packages/orchestrator-ui-components/src/graphqlQueries/subscriptionDetailQuery.ts → packages/orchestrator-ui-components/src/rtk/endpoints/subscriptionDetail.ts

@@ -1,14 +1,11 @@
-import { parse } from 'graphql';
-import { gql } from 'graphql-request';
-
-import { TypedDocumentNode } from '@graphql-typed-document-node/core';
-
-import { SubscriptionDetailResult } from '../types';
-
-export const GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY: TypedDocumentNode<
+import { CacheTags, orchestratorApi } from '@/rtk';
+import {
+    BaseGraphQlResult,
+    SubscriptionDetail,
     SubscriptionDetailResult,
-    { subscriptionId: string }
-> = parse(gql`
+} from '@/types';
+
+export const subscriptionDetailQuery = `
     query SubscriptionDetail($subscriptionId: String!) {
         subscriptions(
             filterBy: { value: $subscriptionId, field: "subscriptionId" }
@@ -60,4 +57,41 @@ export const GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY: TypedDocumentNode<
             }
         }
     }
-`);
+`;
+
+export type SubscriptionDetailResponse = {
+    subscription: SubscriptionDetail;
+} & BaseGraphQlResult;
+
+const subscriptionDetailApi = orchestratorApi.injectEndpoints({
+    endpoints: (builder) => ({
+        getSubscriptionDetail: builder.query<
+            SubscriptionDetailResponse,
+            { subscriptionId: string }
+        >({
+            query: (variables) => ({
+                document: subscriptionDetailQuery,
+                variables,
+            }),
+            transformResponse: (
+                response: SubscriptionDetailResult,
+            ): SubscriptionDetailResponse => {
+                const subscription = response.subscriptions.page[0] || [];
+                const pageInfo = response.subscriptions.pageInfo || {};
+
+                return {
+                    subscription,
+                    pageInfo,
+                };
+            },
+            providesTags: (result, error, arg) => [
+                {
+                    type: CacheTags.subscription,
+                    id: arg.subscriptionId,
+                },
+            ],
+        }),
+    }),
+});
+
+export const { useGetSubscriptionDetailQuery } = subscriptionDetailApi;