diff --git a/packages/orchestrator-ui-components/src/components/WfoInlineNoteEdit/WfoSubscriptionNoteEdit.tsx b/packages/orchestrator-ui-components/src/components/WfoInlineNoteEdit/WfoSubscriptionNoteEdit.tsx index f22e9662c..9de00e2d0 100644 --- a/packages/orchestrator-ui-components/src/components/WfoInlineNoteEdit/WfoSubscriptionNoteEdit.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoInlineNoteEdit/WfoSubscriptionNoteEdit.tsx @@ -1,41 +1,32 @@ import type { FC } from 'react'; import React from 'react'; -import { ApiResult, SubscriptionListResponse, UseQuery } from '@/rtk'; import { useStartProcessMutation } from '@/rtk/endpoints/forms'; import { useUpdateSubscriptionNoteOptimisticMutation } from '@/rtk/endpoints/subscriptionListMutation'; -import { Subscription } from '@/types'; import { INVISIBLE_CHARACTER } from '@/utils'; import { WfoInlineEdit } from '../WfoInlineEdit'; +import { SubscriptionListItem } from '../WfoSubscriptionsList'; interface WfoSubscriptionNoteEditProps { - subscriptionId: Subscription['subscriptionId']; onlyShowOnHover?: boolean; queryVariables: Record; - useQuery: UseQuery; + endpointName: string | undefined; + subscription: SubscriptionListItem; } export const WfoSubscriptionNoteEdit: FC = ({ - subscriptionId, onlyShowOnHover = false, queryVariables, - useQuery, + endpointName, + subscription, }) => { - const { selectedItem } = useQuery(queryVariables, { - selectFromResult: (result: ApiResult) => ({ - selectedItem: result?.data?.subscriptions?.find( - (sub) => sub.subscriptionId === subscriptionId, - ), - }), - }); - const endpointName = useQuery().endpointName; const [startProcess] = useStartProcessMutation(); const [updateSub] = useUpdateSubscriptionNoteOptimisticMutation(); const triggerNoteModifyWorkflow = (note: string) => { const noteModifyPayload = [ - { subscription_id: subscriptionId }, + { subscription_id: subscription.subscriptionId }, { note: note === INVISIBLE_CHARACTER ? '' : note }, ]; startProcess({ @@ -45,7 +36,7 @@ export const WfoSubscriptionNoteEdit: FC = ({ updateSub({ queryName: endpointName ?? '', - subscriptionId: subscriptionId, + subscriptionId: subscription.subscriptionId, graphQlQueryVariables: queryVariables, note: note, }); @@ -54,8 +45,8 @@ export const WfoSubscriptionNoteEdit: FC = ({ return ( = ({ const tError = useTranslations('errors'); const { showToastMessage } = useShowToastMessage(); + const { sortBy, queryString, pageIndex, pageSize } = dataDisplayParams; + + const graphqlQueryVariables: GraphqlQueryVariables = { + first: pageSize, + after: pageIndex * pageSize, + sortBy, + filterBy: alwaysOnFilters, + query: queryString || undefined, + }; + + const { data, isFetching, error, endpointName } = + useGetSubscriptionListQuery(graphqlQueryVariables); + + const subscriptionList = + mapGraphQlSubscriptionsResultToSubscriptionListItems(data); + const tableColumnConfig: WfoAdvancedTableColumnConfig = { subscriptionId: { @@ -155,15 +169,10 @@ export const WfoSubscriptionsList: FC = ({ renderData: (cellValue, row) => { return ( - } + endpointName={endpointName} + queryVariables={graphqlQueryVariables} + subscription={row} /> ); }, @@ -182,19 +191,6 @@ export const WfoSubscriptionsList: FC = ({ }, }; - const { sortBy, queryString, pageIndex, pageSize } = dataDisplayParams; - - const graphqlQueryVariables: GraphqlQueryVariables = { - first: pageSize, - after: pageIndex * pageSize, - sortBy, - filterBy: alwaysOnFilters, - query: queryString || undefined, - }; - - const { data, isFetching, error } = useGetSubscriptionListQuery( - graphqlQueryVariables, - ); const [getSubscriptionListTrigger, { isFetching: isFetchingCsv }] = useLazyGetSubscriptionListQuery(); const getSubscriptionListForExport = () => @@ -217,35 +213,46 @@ export const WfoSubscriptionsList: FC = ({ }; const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {}; + const pageChange = + getPageIndexChangeHandler(setDataDisplayParam); + const pageSizeChange = + getPageSizeChangeHandler(setDataDisplayParam); + const updateQuery = + getQueryStringHandler(setDataDisplayParam); + const updateSorting = + getDataSortHandler(setDataDisplayParam); + const pagination: Pagination = { pageIndex: dataDisplayParams.pageIndex, pageSize: dataDisplayParams.pageSize, pageSizeOptions: DEFAULT_PAGE_SIZES, totalItemCount: totalItems ?? 0, - onChangePage: - getPageIndexChangeHandler( - setDataDisplayParam, - ), - onChangeItemsPerPage: - getPageSizeChangeHandler(setDataDisplayParam), + onChangePage: pageChange, + onChangeItemsPerPage: pageSizeChange, }; + const exportData = csvDownloadHandler( + getSubscriptionListForExport, + mapGraphQlSubscriptionsResultToSubscriptionListItems, + mapGraphQlSubscriptionsResultToPageInfo, + Object.keys(tableColumnConfig), + getCsvFileNameWithDate('Subscriptions'), + showToastMessage, + tError, + ); + + const tableConfig = mapSortableAndFilterableValuesToTableColumnConfig( + tableColumnConfig, + sortFields, + filterFields, + ); + return ( ( - setDataDisplayParam, - )} - data={ - data - ? mapGraphQlSubscriptionsResultToSubscriptionListItems(data) - : [] - } - tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig( - tableColumnConfig, - sortFields, - filterFields, - )} + onUpdateQueryString={updateQuery} + data={subscriptionList} + tableColumnConfig={tableConfig} defaultHiddenColumns={hiddenColumns} dataSorting={[dataSorting]} isLoading={isFetching} @@ -253,18 +260,8 @@ export const WfoSubscriptionsList: FC = ({ detailModalTitle={'Details - Subscription'} pagination={pagination} error={mapRtkErrorToWfoError(error)} - onUpdateDataSorting={getDataSortHandler( - setDataDisplayParam, - )} - onExportData={csvDownloadHandler( - getSubscriptionListForExport, - mapGraphQlSubscriptionsResultToSubscriptionListItems, - mapGraphQlSubscriptionsResultToPageInfo, - Object.keys(tableColumnConfig), - getCsvFileNameWithDate('Subscriptions'), - showToastMessage, - tError, - )} + onUpdateDataSorting={updateSorting} + onExportData={exportData} exportDataIsLoading={isFetchingCsv} /> ); diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscriptionsList/subscriptionResultMappers.ts b/packages/orchestrator-ui-components/src/components/WfoSubscriptionsList/subscriptionResultMappers.ts index 590b084c1..ee87d06f2 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscriptionsList/subscriptionResultMappers.ts +++ b/packages/orchestrator-ui-components/src/components/WfoSubscriptionsList/subscriptionResultMappers.ts @@ -20,9 +20,10 @@ export const mapGraphQlSubscriptionsResultToPageInfo = ( ) => graphqlResponse.pageInfo; export const mapGraphQlSubscriptionsResultToSubscriptionListItems = ( - graphqlResponse: SubscriptionListResponse, -): SubscriptionListItem[] => - graphqlResponse.subscriptions.map((subscription) => { + graphqlResponse: SubscriptionListResponse | undefined, +): SubscriptionListItem[] => { + if (!graphqlResponse) return []; + return graphqlResponse.subscriptions.map((subscription) => { const { description, insync, @@ -55,3 +56,4 @@ export const mapGraphQlSubscriptionsResultToSubscriptionListItems = ( metadata: Object.keys(metadata).length > 0 ? metadata : null, }; }); +};