From f42cb155c6fc7175f9807170393ebdb06991f97f Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Tue, 12 Mar 2024 13:55:03 +0100 Subject: [PATCH 1/3] 702: Add relatedSubscriptions RTK endpoint --- .../relatedSubscriptionsQuery.ts | 65 ------------- .../src/rtk/endpoints/index.ts | 4 +- .../src/rtk/endpoints/relatedSubscriptions.ts | 92 +++++++++++++++++++ 3 files changed, 95 insertions(+), 66 deletions(-) delete mode 100644 packages/orchestrator-ui-components/src/graphqlQueries/relatedSubscriptionsQuery.ts create mode 100644 packages/orchestrator-ui-components/src/rtk/endpoints/relatedSubscriptions.ts diff --git a/packages/orchestrator-ui-components/src/graphqlQueries/relatedSubscriptionsQuery.ts b/packages/orchestrator-ui-components/src/graphqlQueries/relatedSubscriptionsQuery.ts deleted file mode 100644 index b240884d6..000000000 --- a/packages/orchestrator-ui-components/src/graphqlQueries/relatedSubscriptionsQuery.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { parse } from 'graphql'; -import { gql } from 'graphql-request'; - -import { TypedDocumentNode } from '@graphql-typed-document-node/core'; - -import { - GraphqlFilter, - GraphqlQueryVariables, - RelatedSubscription, - RelatedSubscriptionsResult, - Subscription, -} from '../types'; - -export const GET_RELATED_SUBSCRIPTIONS_GRAPHQL_QUERY: TypedDocumentNode< - RelatedSubscriptionsResult, - GraphqlQueryVariables & - Pick & { - terminatedSubscriptionFilter?: GraphqlFilter; - } -> = parse(gql` - 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 - } - } - } - } - } -`); diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts index 57ca7f387..8d8dc77cd 100644 --- a/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts +++ b/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts @@ -1,6 +1,7 @@ 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'; @@ -8,3 +9,4 @@ export * from './metadata'; export * from './settings'; export * from './streamMessages'; export * from './subscriptionDetail'; +export * from './relatedSubscriptions'; diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/relatedSubscriptions.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/relatedSubscriptions.ts new file mode 100644 index 000000000..4282adb2b --- /dev/null +++ b/packages/orchestrator-ui-components/src/rtk/endpoints/relatedSubscriptions.ts @@ -0,0 +1,92 @@ +import { + BaseGraphQlResult, + 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; + +const relatedSubscriptionsApi = orchestratorApi.injectEndpoints({ + endpoints: (build) => ({ + getRelatedSubscriptions: build.query< + RelatedSubscriptionsResponse, + Subscription['subscriptionId'] + >({ + query: (processName) => ({ + document: RelatedSubscriptionsQuery, + variables: { processName }, + }), + 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; From bf6851e7905125ab850e746bd6e86927c5191e06 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Tue, 12 Mar 2024 14:24:26 +0100 Subject: [PATCH 2/3] 702: Use relatedSubscriptions RTK hook --- .../WfoRelatedSubscriptions.tsx | 66 +++++++++---------- .../src/components/index.ts | 1 + .../src/rtk/endpoints/relatedSubscriptions.ts | 13 +++- 3 files changed, 41 insertions(+), 39 deletions(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoRelatedSubscriptions.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoRelatedSubscriptions.tsx index cbf98a0ce..85a46d1e6 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoRelatedSubscriptions.tsx +++ b/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 = { subscriptionId: { field: 'subscriptionId', diff --git a/packages/orchestrator-ui-components/src/components/index.ts b/packages/orchestrator-ui-components/src/components/index.ts index 776c7b170..9e5c62b28 100644 --- a/packages/orchestrator-ui-components/src/components/index.ts +++ b/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'; diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/relatedSubscriptions.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/relatedSubscriptions.ts index 4282adb2b..7ed990624 100644 --- a/packages/orchestrator-ui-components/src/rtk/endpoints/relatedSubscriptions.ts +++ b/packages/orchestrator-ui-components/src/rtk/endpoints/relatedSubscriptions.ts @@ -1,5 +1,7 @@ import { BaseGraphQlResult, + GraphqlFilter, + GraphqlQueryVariables, RelatedSubscription, RelatedSubscriptionsResult, Subscription, @@ -58,15 +60,20 @@ export type RelatedSubscriptionsResponse = { relatedSubscriptions: RelatedSubscription[]; } & BaseGraphQlResult; +type RelatedSubscriptionVariables = GraphqlQueryVariables & + Pick & { + terminatedSubscriptionFilter?: GraphqlFilter; + }; + const relatedSubscriptionsApi = orchestratorApi.injectEndpoints({ endpoints: (build) => ({ getRelatedSubscriptions: build.query< RelatedSubscriptionsResponse, - Subscription['subscriptionId'] + RelatedSubscriptionVariables >({ - query: (processName) => ({ + query: (variables) => ({ document: RelatedSubscriptionsQuery, - variables: { processName }, + variables, }), transformResponse: ( result: RelatedSubscriptionsResult, From c66c452239709ede79055883994283c9a78c08cc Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Tue, 12 Mar 2024 14:25:35 +0100 Subject: [PATCH 3/3] 702: Add changeset --- .changeset/old-kangaroos-give.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/old-kangaroos-give.md diff --git a/.changeset/old-kangaroos-give.md b/.changeset/old-kangaroos-give.md new file mode 100644 index 000000000..682230e3e --- /dev/null +++ b/.changeset/old-kangaroos-give.md @@ -0,0 +1,5 @@ +--- +"@orchestrator-ui/orchestrator-ui-components": patch +--- + +Uses relatedSubscriptions RTK Query