From f18a6c4d45380ec34efcf8fa9882f7e21fe8b23a Mon Sep 17 00:00:00 2001 From: Ricardo van der Heijden <20791917+ricardovdheijden@users.noreply.github.com> Date: Tue, 12 Mar 2024 16:00:57 +0100 Subject: [PATCH 1/3] 702 Moves metadata-products to rtk client --- .../src/graphqlQueries/productsQuery.ts | 2 + .../src/pages/metadata/WfoProductsPage.tsx | 27 +++---- .../src/rtk/endpoints/index.ts | 9 +-- .../src/rtk/endpoints/products.ts | 77 +++++++++++++++++++ 4 files changed, 94 insertions(+), 21 deletions(-) create mode 100644 packages/orchestrator-ui-components/src/rtk/endpoints/products.ts diff --git a/packages/orchestrator-ui-components/src/graphqlQueries/productsQuery.ts b/packages/orchestrator-ui-components/src/graphqlQueries/productsQuery.ts index f4d60f9ac..f5651bacb 100644 --- a/packages/orchestrator-ui-components/src/graphqlQueries/productsQuery.ts +++ b/packages/orchestrator-ui-components/src/graphqlQueries/productsQuery.ts @@ -10,6 +10,7 @@ import { SubscriptionsResult, } from '../types'; +// Todo remove export const GET_PRODUCTS_GRAPHQL_QUERY = parse(gql` query MetadataProducts( $first: Int! @@ -79,6 +80,7 @@ export const getProductsSummaryQuery = (): TypedDocumentNode< GraphqlQueryVariables > => GET_PRODUCTS_SUMMARY_GRAPHQL_QUERY; +// Todo remove export const getProductsQuery = (): TypedDocumentNode< ProductDefinitionsResult, GraphqlQueryVariables diff --git a/packages/orchestrator-ui-components/src/pages/metadata/WfoProductsPage.tsx b/packages/orchestrator-ui-components/src/pages/metadata/WfoProductsPage.tsx index 9522df883..faaeb8de2 100644 --- a/packages/orchestrator-ui-components/src/pages/metadata/WfoProductsPage.tsx +++ b/packages/orchestrator-ui-components/src/pages/metadata/WfoProductsPage.tsx @@ -20,14 +20,12 @@ import { } from '@/components'; import { WfoFirstPartUUID } from '@/components/WfoTable/WfoFirstPartUUID'; import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig'; -import { getProductsQuery } from '@/graphqlQueries'; import { useDataDisplayParams, - useQueryWithGraphql, - useQueryWithGraphqlLazy, useShowToastMessage, useStoredTableConfig, } from '@/hooks'; +import { useGetProductsQuery, useLazyGetProductsQuery } from '@/rtk'; import type { GraphqlQueryVariables, ProductDefinition } from '@/types'; import { BadgeType, SortOrder } from '@/types'; import { @@ -170,20 +168,17 @@ export const WfoProductsPage = () => { sortBy: sortBy, query: queryString || undefined, }; - const { data, isFetching, isError } = useQueryWithGraphql( - getProductsQuery(), + const { data, isFetching, isError } = useGetProductsQuery( graphqlQueryVariables, - ['products', 'listPage'], ); - const { getData: getProductsForExport, isFetching: isFetchingCsv } = - useQueryWithGraphqlLazy( - getProductsQuery(), + const [getProductsTrigger, { isFetching: isFetchingCsv }] = + useLazyGetProductsQuery(); + const getProductsForExport = () => + getProductsTrigger( getQueryVariablesForExport(graphqlQueryVariables), - ['products', 'export'], - ); + ).unwrap(); - const { totalItems, sortFields, filterFields } = - data?.products?.pageInfo ?? {}; + const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {}; const pagination: Pagination = { pageSize: pageSize, @@ -200,7 +195,7 @@ export const WfoProductsPage = () => { return ( - data={data ? data.products.page : []} + data={data?.products ?? []} tableColumns={mapSortableAndFilterableValuesToTableColumnConfig( tableColumns, sortFields, @@ -224,8 +219,8 @@ export const WfoProductsPage = () => { localStorageKey={METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY} onExportData={csvDownloadHandler( getProductsForExport, - (data) => data.products.page, - (data) => data.products.pageInfo, + (data) => data?.products ?? [], + (data) => data?.pageInfo || {}, Object.keys(tableColumns), getCsvFileNameWithDate('Products'), showToastMessage, diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts index 8d8dc77cd..4bce0306c 100644 --- a/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts +++ b/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts @@ -1,12 +1,11 @@ export * from './customers'; -export * from './processList'; -export * from './settings'; -export * from './streamMessages'; export * from './inSync'; +export * from './metadata'; export * from './processSteps'; +export * from './processList'; export * from './processListSummary'; -export * from './metadata'; +export * from './products'; +export * from './relatedSubscriptions'; export * from './settings'; export * from './streamMessages'; export * from './subscriptionDetail'; -export * from './relatedSubscriptions'; diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/products.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/products.ts new file mode 100644 index 000000000..7f9b228d3 --- /dev/null +++ b/packages/orchestrator-ui-components/src/rtk/endpoints/products.ts @@ -0,0 +1,77 @@ +import { orchestratorApi } from '@/rtk'; +import { + BaseGraphQlResult, + GraphqlQueryVariables, + ProductDefinition, + ProductDefinitionsResult, +} from '@/types'; + +export const products = ` + query MetadataProducts( + $first: Int! + $after: Int! + $sortBy: [GraphqlSort!] + $query: String + ) { + products(first: $first, after: $after, sortBy: $sortBy, query: $query) { + page { + productId + name + description + tag + createdAt + productType + status + productBlocks { + name + } + fixedInputs { + name + value + } + endDate + } + pageInfo { + endCursor + hasNextPage + hasPreviousPage + startCursor + totalItems + sortFields + filterFields + } + } + } +`; + +export type ProductsResponse = { + products: ProductDefinition[]; +} & BaseGraphQlResult; + +const productsApi = orchestratorApi.injectEndpoints({ + endpoints: (builder) => ({ + getProducts: builder.query< + ProductsResponse, + GraphqlQueryVariables + >({ + query: (variables) => ({ + document: products, + variables, + }), + transformResponse: ( + response: ProductDefinitionsResult, + ): ProductsResponse => { + const products = response.products.page || []; + const pageInfo = response.products.pageInfo || {}; + + return { + products, + pageInfo, + }; + }, + // todo cache tags + }), + }), +}); + +export const { useGetProductsQuery, useLazyGetProductsQuery } = productsApi; From f92fa3e672602098f3870412770fc591800eb942 Mon Sep 17 00:00:00 2001 From: Ricardo van der Heijden <20791917+ricardovdheijden@users.noreply.github.com> Date: Tue, 12 Mar 2024 16:35:18 +0100 Subject: [PATCH 2/3] 702 Moves the productsSummary query to RTK --- .../src/graphqlQueries/index.ts | 1 - .../src/graphqlQueries/productsQuery.ts | 87 ------------------- .../src/pages/startPage/WfoStartPage.tsx | 32 +++---- .../src/rtk/endpoints/index.ts | 3 +- .../src/rtk/endpoints/products.ts | 1 - .../src/rtk/endpoints/productsSummary.ts | 62 +++++++++++++ .../src/types/types.ts | 3 + 7 files changed, 80 insertions(+), 109 deletions(-) delete mode 100644 packages/orchestrator-ui-components/src/graphqlQueries/productsQuery.ts create mode 100644 packages/orchestrator-ui-components/src/rtk/endpoints/productsSummary.ts diff --git a/packages/orchestrator-ui-components/src/graphqlQueries/index.ts b/packages/orchestrator-ui-components/src/graphqlQueries/index.ts index 3505480f7..6c791ed1d 100644 --- a/packages/orchestrator-ui-components/src/graphqlQueries/index.ts +++ b/packages/orchestrator-ui-components/src/graphqlQueries/index.ts @@ -1,2 +1 @@ -export * from './productsQuery'; export * from './subscriptionsDropdownOptionsQuery'; diff --git a/packages/orchestrator-ui-components/src/graphqlQueries/productsQuery.ts b/packages/orchestrator-ui-components/src/graphqlQueries/productsQuery.ts deleted file mode 100644 index f5651bacb..000000000 --- a/packages/orchestrator-ui-components/src/graphqlQueries/productsQuery.ts +++ /dev/null @@ -1,87 +0,0 @@ -import { parse } from 'graphql'; -import { gql } from 'graphql-request'; - -import type { TypedDocumentNode } from '@graphql-typed-document-node/core'; - -import { - GraphqlQueryVariables, - ProductDefinition, - ProductDefinitionsResult, - SubscriptionsResult, -} from '../types'; - -// Todo remove -export const GET_PRODUCTS_GRAPHQL_QUERY = parse(gql` - query MetadataProducts( - $first: Int! - $after: Int! - $sortBy: [GraphqlSort!] - $query: String - ) { - products(first: $first, after: $after, sortBy: $sortBy, query: $query) { - page { - productId - name - description - tag - createdAt - productType - status - productBlocks { - name - } - fixedInputs { - name - value - } - endDate - } - pageInfo { - endCursor - hasNextPage - hasPreviousPage - startCursor - totalItems - sortFields - filterFields - } - } - } -`); - -export const GET_PRODUCTS_SUMMARY_GRAPHQL_QUERY = parse(gql` - query MetadataProducts( - $first: Int! - $after: Int! - $sortBy: [GraphqlSort!] - ) { - products(first: $first, after: $after, sortBy: $sortBy) { - page { - name - subscriptions { - pageInfo { - totalItems - } - } - } - pageInfo { - totalItems - startCursor - endCursor - } - } - } -`); - -export const getProductsSummaryQuery = (): TypedDocumentNode< - ProductDefinitionsResult< - Pick & SubscriptionsResult - >, - GraphqlQueryVariables -> => GET_PRODUCTS_SUMMARY_GRAPHQL_QUERY; - -// Todo remove -export const getProductsQuery = (): TypedDocumentNode< - ProductDefinitionsResult, - GraphqlQueryVariables -> => GET_PRODUCTS_GRAPHQL_QUERY; diff --git a/packages/orchestrator-ui-components/src/pages/startPage/WfoStartPage.tsx b/packages/orchestrator-ui-components/src/pages/startPage/WfoStartPage.tsx index 5b26788f4..db76f7c80 100644 --- a/packages/orchestrator-ui-components/src/pages/startPage/WfoStartPage.tsx +++ b/packages/orchestrator-ui-components/src/pages/startPage/WfoStartPage.tsx @@ -10,14 +10,13 @@ import { SummaryCardStatus, WfoSummaryCards, } from '@/components/WfoSummary/WfoSummaryCards'; -import { getProductsSummaryQuery } from '@/graphqlQueries'; -import { useQueryWithGraphql } from '@/hooks'; +import { useGetProductsSummaryQuery } from '@/rtk'; import { useGetProcessListSummaryQuery } from '@/rtk'; import { useGetSubscriptionSummaryListQuery } from '@/rtk/endpoints/subscriptionListSummary'; import { GraphqlQueryVariables, Process, - ProductDefinition, + ProductsSummary, SortOrder, Subscription, } from '@/types'; @@ -51,11 +50,7 @@ export const WfoStartPage = () => { const { data: productsSummaryResult, isLoading: productsSummaryIsFetching, - } = useQueryWithGraphql( - getProductsSummaryQuery(), - productsSummaryQueryVariables, - 'productSummary', - ); + } = useGetProductsSummaryQuery(productsSummaryQueryVariables); const latestActiveSubscriptionsSummaryCard: SummaryCard = { headerTitle: t('activeSubscriptions.headerTitle'), @@ -134,11 +129,11 @@ export const WfoStartPage = () => { const productsSummaryCard: SummaryCard = { headerTitle: t('products.headerTitle'), - headerValue: productsSummaryResult?.products.pageInfo.totalItems ?? 0, + headerValue: productsSummaryResult?.pageInfo.totalItems ?? 0, headerStatus: SummaryCardStatus.Neutral, listTitle: t('products.listTitle'), listItems: - productsSummaryResult?.products.page + productsSummaryResult?.products .sort( (left, right) => (right.subscriptions.pageInfo.totalItems ?? 0) - @@ -259,12 +254,11 @@ const taskListSummaryQueryVariables: GraphqlQueryVariables = { ], }; -const productsSummaryQueryVariables: GraphqlQueryVariables = - { - first: 1000, - after: 0, - sortBy: { - field: 'name', - order: SortOrder.ASC, - }, - }; +const productsSummaryQueryVariables: GraphqlQueryVariables = { + first: 1000, + after: 0, + sortBy: { + field: 'name', + order: SortOrder.ASC, + }, +}; diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts index 4bce0306c..4fe80460f 100644 --- a/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts +++ b/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts @@ -1,10 +1,11 @@ export * from './customers'; export * from './inSync'; export * from './metadata'; -export * from './processSteps'; export * from './processList'; export * from './processListSummary'; +export * from './processSteps'; export * from './products'; +export * from './productsSummary'; export * from './relatedSubscriptions'; export * from './settings'; export * from './streamMessages'; diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/products.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/products.ts index 7f9b228d3..936cba051 100644 --- a/packages/orchestrator-ui-components/src/rtk/endpoints/products.ts +++ b/packages/orchestrator-ui-components/src/rtk/endpoints/products.ts @@ -69,7 +69,6 @@ const productsApi = orchestratorApi.injectEndpoints({ pageInfo, }; }, - // todo cache tags }), }), }); diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/productsSummary.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/productsSummary.ts new file mode 100644 index 000000000..9b64e2112 --- /dev/null +++ b/packages/orchestrator-ui-components/src/rtk/endpoints/productsSummary.ts @@ -0,0 +1,62 @@ +import { orchestratorApi } from '@/rtk'; +import { + BaseGraphQlResult, + GraphqlQueryVariables, + ProductDefinitionsResult, + ProductsSummary, +} from '@/types'; + +export const productsSummary = ` + query MetadataProducts( + $first: Int! + $after: Int! + $sortBy: [GraphqlSort!] + ) { + products(first: $first, after: $after, sortBy: $sortBy) { + page { + name + subscriptions { + pageInfo { + totalItems + } + } + } + pageInfo { + totalItems + startCursor + endCursor + } + } + } +`; + +export type ProductsSummaryResponse = { + products: ProductsSummary[]; +} & BaseGraphQlResult; + +const productsSummaryApi = orchestratorApi.injectEndpoints({ + endpoints: (builder) => ({ + getProductsSummary: builder.query< + ProductsSummaryResponse, + GraphqlQueryVariables + >({ + query: (variables) => ({ + document: productsSummary, + variables, + }), + transformResponse: ( + response: ProductDefinitionsResult, + ): ProductsSummaryResponse => { + const products = response.products.page || []; + const pageInfo = response.products.pageInfo || {}; + + return { + products, + pageInfo, + }; + }, + }), + }), +}); + +export const { useGetProductsSummaryQuery } = productsSummaryApi; diff --git a/packages/orchestrator-ui-components/src/types/types.ts b/packages/orchestrator-ui-components/src/types/types.ts index f4c5fa88e..7f4656a1b 100644 --- a/packages/orchestrator-ui-components/src/types/types.ts +++ b/packages/orchestrator-ui-components/src/types/types.ts @@ -109,6 +109,9 @@ export interface ProductDefinition { fixedInputs: Pick[]; } +export type ProductsSummary = Pick & + SubscriptionsResult; + export enum WorkflowTarget { CREATE = 'create', MODIFY = 'modify', From 5a729e3dfeb0c17d3d5505ee87cda2b0f830df1f Mon Sep 17 00:00:00 2001 From: Ricardo van der Heijden <20791917+ricardovdheijden@users.noreply.github.com> Date: Tue, 12 Mar 2024 16:37:17 +0100 Subject: [PATCH 3/3] 702 Adds changeset --- .changeset/mean-suits-matter.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/mean-suits-matter.md diff --git a/.changeset/mean-suits-matter.md b/.changeset/mean-suits-matter.md new file mode 100644 index 000000000..299e181d8 --- /dev/null +++ b/.changeset/mean-suits-matter.md @@ -0,0 +1,5 @@ +--- +"@orchestrator-ui/orchestrator-ui-components": minor +--- + +702 Moves products and productsSummary to RTK