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 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 f4d60f9ac..000000000 --- a/packages/orchestrator-ui-components/src/graphqlQueries/productsQuery.ts +++ /dev/null @@ -1,85 +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'; - -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; - -export const getProductsQuery = (): TypedDocumentNode< - ProductDefinitionsResult, - GraphqlQueryVariables -> => GET_PRODUCTS_GRAPHQL_QUERY; 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/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 8d8dc77cd..4fe80460f 100644 --- a/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts +++ b/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts @@ -1,12 +1,12 @@ export * from './customers'; -export * from './processList'; -export * from './settings'; -export * from './streamMessages'; export * from './inSync'; -export * from './processSteps'; -export * from './processListSummary'; export * from './metadata'; +export * from './processList'; +export * from './processListSummary'; +export * from './processSteps'; +export * from './products'; +export * from './productsSummary'; +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..936cba051 --- /dev/null +++ b/packages/orchestrator-ui-components/src/rtk/endpoints/products.ts @@ -0,0 +1,76 @@ +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, + }; + }, + }), + }), +}); + +export const { useGetProductsQuery, useLazyGetProductsQuery } = productsApi; 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',