From fc655f7d6d1b0890ca6c7706685aea0c296068aa Mon Sep 17 00:00:00 2001 From: Ricardo van der Heijden <20791917+ricardovdheijden@users.noreply.github.com> Date: Mon, 11 Mar 2024 15:46:43 +0100 Subject: [PATCH 1/7] 702 Adds subscriptionDetail endpoint to RTK Client --- .../WfoSubscription/WfoSubscription.tsx | 31 +++--- .../src/components/WfoSubscription/index.ts | 10 +- .../orchestrator-ui-components/src/rtk/api.ts | 4 +- .../src/rtk/endpoints/subscriptionDetail.ts | 97 +++++++++++++++++++ 4 files changed, 121 insertions(+), 21 deletions(-) create mode 100644 packages/orchestrator-ui-components/src/rtk/endpoints/subscriptionDetail.ts diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscription.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscription.tsx index 2008a9fd9..69169e6c8 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscription.tsx +++ b/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,18 +49,15 @@ 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 subscriptionResult = data && data.subscriptions; const subscriptionDetail = subscriptionResult ? subscriptionResult[0] : null; diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/index.ts b/packages/orchestrator-ui-components/src/components/WfoSubscription/index.ts index a0bf56b47..0cf0dba6e 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/index.ts +++ b/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'; diff --git a/packages/orchestrator-ui-components/src/rtk/api.ts b/packages/orchestrator-ui-components/src/rtk/api.ts index 65d4357de..503c8d45c 100644 --- a/packages/orchestrator-ui-components/src/rtk/api.ts +++ b/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 ], }); diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/subscriptionDetail.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/subscriptionDetail.ts new file mode 100644 index 000000000..ade2c2ba5 --- /dev/null +++ b/packages/orchestrator-ui-components/src/rtk/endpoints/subscriptionDetail.ts @@ -0,0 +1,97 @@ +import { CacheTags, orchestratorApi } from '@/rtk'; +import { + BaseGraphQlResult, + SubscriptionDetail, + SubscriptionDetailResult, +} from '@/types'; + +export const subscriptionDetailQuery = ` + query SubscriptionDetail($subscriptionId: String!) { + subscriptions( + filterBy: { value: $subscriptionId, field: "subscriptionId" } + ) { + page { + subscriptionId + description + fixedInputs + insync + note + product { + createdAt + name + status + endDate + description + tag + productType + productId + } + endDate + startDate + status + customerId + customer { + fullname + customerId + shortcode + } + productBlockInstances { + id + ownerSubscriptionId + parent + productBlockInstanceValues + subscriptionInstanceId + inUseByRelations + } + processes(sortBy: { field: "startedAt", order: ASC }) { + page { + processId + lastStatus + startedAt + createdBy + workflowTarget + workflowName + isTask + } + } + } + } + } +`; + +export type SubscriptionDetailResponse = { + subscriptions: SubscriptionDetail[]; +} & BaseGraphQlResult; + +const subscriptionDetailApi = orchestratorApi.injectEndpoints({ + endpoints: (builder) => ({ + getSubscriptionDetail: builder.query< + SubscriptionDetailResponse, + { subscriptionId: string } + >({ + query: (variables) => ({ + document: subscriptionDetailQuery, + variables, + }), + transformResponse: ( + response: SubscriptionDetailResult, + ): SubscriptionDetailResponse => { + const subscriptions = response.subscriptions.page || []; + const pageInfo = response.subscriptions.pageInfo || {}; + + return { + subscriptions, + pageInfo, + }; + }, + providesTags: (result, error, arg) => [ + { + type: CacheTags.subscription, + id: arg.subscriptionId, + }, + ], + }), + }), +}); + +export const { useGetSubscriptionDetailQuery } = subscriptionDetailApi; From a9bdf38bc898a8574e30e3d1dcaf40fa0ba7436d Mon Sep 17 00:00:00 2001 From: Ricardo van der Heijden <20791917+ricardovdheijden@users.noreply.github.com> Date: Mon, 11 Mar 2024 15:53:32 +0100 Subject: [PATCH 2/7] 702 uses RTK Client version of the graphql call to fetch subscription details --- .../formFields/SubscriptionSummaryField.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx index d04ed4945..5787a5b64 100644 --- a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx +++ b/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/endpoints/subscriptionDetail'; + import { FieldProps } from './types'; export type SubscriptionSummaryFieldProps = FieldProps; @@ -33,12 +32,10 @@ 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, + }); + const subscriptionDetail = data?.subscriptions[0]; return ( (subscriptionDetail && ( From 9048278ebe0639e77e74914951af102f02dac2ac Mon Sep 17 00:00:00 2001 From: Ricardo van der Heijden <20791917+ricardovdheijden@users.noreply.github.com> Date: Mon, 11 Mar 2024 16:05:26 +0100 Subject: [PATCH 3/7] 702 uses RTK Client version of the graphql call to fetch subscription details in the useIsTaggedPort hook. Removes unused subscriptionDetailQuery from graphqlQueries --- .../src/graphqlQueries/index.ts | 1 - .../graphqlQueries/subscriptionDetailQuery.ts | 63 ------------------- .../src/hooks/surf/useIsTaggedPort.ts | 19 +++--- 3 files changed, 9 insertions(+), 74 deletions(-) delete mode 100644 packages/orchestrator-ui-components/src/graphqlQueries/subscriptionDetailQuery.ts diff --git a/packages/orchestrator-ui-components/src/graphqlQueries/index.ts b/packages/orchestrator-ui-components/src/graphqlQueries/index.ts index 4dd812548..3505480f7 100644 --- a/packages/orchestrator-ui-components/src/graphqlQueries/index.ts +++ b/packages/orchestrator-ui-components/src/graphqlQueries/index.ts @@ -1,3 +1,2 @@ export * from './productsQuery'; -export * from './subscriptionDetailQuery'; export * from './subscriptionsDropdownOptionsQuery'; diff --git a/packages/orchestrator-ui-components/src/graphqlQueries/subscriptionDetailQuery.ts b/packages/orchestrator-ui-components/src/graphqlQueries/subscriptionDetailQuery.ts deleted file mode 100644 index e5a19e992..000000000 --- a/packages/orchestrator-ui-components/src/graphqlQueries/subscriptionDetailQuery.ts +++ /dev/null @@ -1,63 +0,0 @@ -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< - SubscriptionDetailResult, - { subscriptionId: string } -> = parse(gql` - query SubscriptionDetail($subscriptionId: String!) { - subscriptions( - filterBy: { value: $subscriptionId, field: "subscriptionId" } - ) { - page { - subscriptionId - description - fixedInputs - insync - note - product { - createdAt - name - status - endDate - description - tag - productType - productId - } - endDate - startDate - status - customerId - customer { - fullname - customerId - shortcode - } - productBlockInstances { - id - ownerSubscriptionId - parent - productBlockInstanceValues - subscriptionInstanceId - inUseByRelations - } - processes(sortBy: { field: "startedAt", order: ASC }) { - page { - processId - lastStatus - startedAt - createdBy - workflowTarget - workflowName - isTask - } - } - } - } - } -`); diff --git a/packages/orchestrator-ui-components/src/hooks/surf/useIsTaggedPort.ts b/packages/orchestrator-ui-components/src/hooks/surf/useIsTaggedPort.ts index 2101770ee..24240ea26 100644 --- a/packages/orchestrator-ui-components/src/hooks/surf/useIsTaggedPort.ts +++ b/packages/orchestrator-ui-components/src/hooks/surf/useIsTaggedPort.ts @@ -1,18 +1,17 @@ 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, - { subscriptionId }, - `subscription-${subscriptionId}`, - { enabled: !!subscriptionId }, + const { data, isFetching } = useGetSubscriptionDetailQuery( + { + subscriptionId, + }, + { skip: !subscriptionId }, ); - const subscriptionDetail = data?.subscriptions.page[0]; + const subscriptionDetail = data?.subscriptions[0]; // 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 +23,5 @@ export const useIsTaggedPort = (subscriptionId: string): [boolean, boolean] => { subscriptionHasTaggedProduct(subscriptionDetail) : false; - return [isFetched, portIsTagged]; + return [!isFetching, portIsTagged]; }; From b55e4863626efc258d83f23aae620ead8ee530af Mon Sep 17 00:00:00 2001 From: Ricardo van der Heijden <20791917+ricardovdheijden@users.noreply.github.com> Date: Mon, 11 Mar 2024 16:08:21 +0100 Subject: [PATCH 4/7] 702 minor code style fix --- .../src/hooks/surf/useIsTaggedPort.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/orchestrator-ui-components/src/hooks/surf/useIsTaggedPort.ts b/packages/orchestrator-ui-components/src/hooks/surf/useIsTaggedPort.ts index 24240ea26..4f135de17 100644 --- a/packages/orchestrator-ui-components/src/hooks/surf/useIsTaggedPort.ts +++ b/packages/orchestrator-ui-components/src/hooks/surf/useIsTaggedPort.ts @@ -6,9 +6,7 @@ import { useGetSubscriptionDetailQuery } from '@/rtk/endpoints/subscriptionDetai export const useIsTaggedPort = (subscriptionId: string): [boolean, boolean] => { const { data, isFetching } = useGetSubscriptionDetailQuery( - { - subscriptionId, - }, + { subscriptionId }, { skip: !subscriptionId }, ); const subscriptionDetail = data?.subscriptions[0]; From 0443a06de7e7d09b023dab022f6974641a550186 Mon Sep 17 00:00:00 2001 From: Ricardo van der Heijden <20791917+ricardovdheijden@users.noreply.github.com> Date: Tue, 12 Mar 2024 16:51:56 +0100 Subject: [PATCH 5/7] 702 Fixes imports --- .../WfoForms/formFields/SubscriptionSummaryField.tsx | 2 +- packages/orchestrator-ui-components/src/rtk/api.ts | 2 +- .../orchestrator-ui-components/src/rtk/endpoints/index.ts | 5 +++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx index 5787a5b64..8153d5ff3 100644 --- a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx @@ -19,7 +19,7 @@ import { connectField, filterDOMProps } from 'uniforms'; import { EuiFormRow, EuiText } from '@elastic/eui'; import { WfoLoading, WfoSubscriptionGeneral } from '@/components'; -import { useGetSubscriptionDetailQuery } from '@/rtk/endpoints/subscriptionDetail'; +import { useGetSubscriptionDetailQuery } from '@/rtk'; import { FieldProps } from './types'; diff --git a/packages/orchestrator-ui-components/src/rtk/api.ts b/packages/orchestrator-ui-components/src/rtk/api.ts index 503c8d45c..59b67b9ab 100644 --- a/packages/orchestrator-ui-components/src/rtk/api.ts +++ b/packages/orchestrator-ui-components/src/rtk/api.ts @@ -70,6 +70,6 @@ export const orchestratorApi = createApi({ CacheTags.processList, CacheTags.processListSummary, CacheTags.subscriptionList, - CacheTags.subscription + CacheTags.subscription, ], }); diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts index 32af3808d..57ca7f387 100644 --- a/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts +++ b/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'; From dc080c7d4b305eead7d4b148f8b3b2484f66d309 Mon Sep 17 00:00:00 2001 From: Ricardo van der Heijden <20791917+ricardovdheijden@users.noreply.github.com> Date: Tue, 12 Mar 2024 17:48:57 +0100 Subject: [PATCH 6/7] 702 Moves the logic to get the first item from results into the transform section of the service cal --- .../WfoForms/formFields/SubscriptionSummaryField.tsx | 11 +++++------ .../components/WfoSubscription/WfoSubscription.tsx | 6 +----- .../src/hooks/surf/useIsTaggedPort.ts | 2 +- .../src/rtk/endpoints/subscriptionDetail.ts | 6 +++--- 4 files changed, 10 insertions(+), 15 deletions(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx index 8153d5ff3..79d551806 100644 --- a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx @@ -35,13 +35,12 @@ const SubscriptionSummaryDisplay = ({ const { data } = useGetSubscriptionDetailQuery({ subscriptionId, }); - const subscriptionDetail = data?.subscriptions[0]; - return ( - (subscriptionDetail && ( - - )) || - ); + if (!data) { + return ; + } + + return ; }; const SubscriptionSummary = ({ diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscription.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscription.tsx index 69169e6c8..7dc940b48 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscription.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscription.tsx @@ -56,11 +56,7 @@ export const WfoSubscription = ({ subscriptionId }: WfoSubscriptionProps) => { const onSelectedTabChanged = (tab: SubscriptionDetailTab) => { setActiveTab(tab); }; - - const subscriptionResult = data && data.subscriptions; - const subscriptionDetail = subscriptionResult - ? subscriptionResult[0] - : null; + const subscriptionDetail = data?.subscription; return ( <> diff --git a/packages/orchestrator-ui-components/src/hooks/surf/useIsTaggedPort.ts b/packages/orchestrator-ui-components/src/hooks/surf/useIsTaggedPort.ts index 4f135de17..c3c04b768 100644 --- a/packages/orchestrator-ui-components/src/hooks/surf/useIsTaggedPort.ts +++ b/packages/orchestrator-ui-components/src/hooks/surf/useIsTaggedPort.ts @@ -9,7 +9,7 @@ export const useIsTaggedPort = (subscriptionId: string): [boolean, boolean] => { { subscriptionId }, { skip: !subscriptionId }, ); - const subscriptionDetail = data?.subscriptions[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 diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/subscriptionDetail.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/subscriptionDetail.ts index ade2c2ba5..baf34eaf2 100644 --- a/packages/orchestrator-ui-components/src/rtk/endpoints/subscriptionDetail.ts +++ b/packages/orchestrator-ui-components/src/rtk/endpoints/subscriptionDetail.ts @@ -60,7 +60,7 @@ export const subscriptionDetailQuery = ` `; export type SubscriptionDetailResponse = { - subscriptions: SubscriptionDetail[]; + subscription: SubscriptionDetail; } & BaseGraphQlResult; const subscriptionDetailApi = orchestratorApi.injectEndpoints({ @@ -76,11 +76,11 @@ const subscriptionDetailApi = orchestratorApi.injectEndpoints({ transformResponse: ( response: SubscriptionDetailResult, ): SubscriptionDetailResponse => { - const subscriptions = response.subscriptions.page || []; + const subscription = response.subscriptions.page[0] || []; const pageInfo = response.subscriptions.pageInfo || {}; return { - subscriptions, + subscription, pageInfo, }; }, From 9edaae629faf206ef445f0986e98453fffcc706f Mon Sep 17 00:00:00 2001 From: Ricardo van der Heijden <20791917+ricardovdheijden@users.noreply.github.com> Date: Tue, 12 Mar 2024 17:50:31 +0100 Subject: [PATCH 7/7] 702 Adds changeset --- .changeset/famous-scissors-shop.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/famous-scissors-shop.md diff --git a/.changeset/famous-scissors-shop.md b/.changeset/famous-scissors-shop.md new file mode 100644 index 000000000..3c15ce856 --- /dev/null +++ b/.changeset/famous-scissors-shop.md @@ -0,0 +1,5 @@ +--- +"@orchestrator-ui/orchestrator-ui-components": minor +--- + +702 Moves subscriptionDetail to RTK