Fix query error in WfoSubscriptionNoteEdit by using existing data

the component was re-fetching data without query variables which resulted in query errors.

- change WfoSubscriptionNoteEdit to use existing data
- clean WfoSubscriptionsList and move the subscription list fetch above the table columns so the list can be used in WfoSubscriptionNoteEdit.
- change subscriptionResultMappers to work with response or undefined and returns empty list when undefined.

Author: tjeerddie

packages/orchestrator-ui-components/src/components/WfoInlineNoteEdit/WfoSubscriptionNoteEdit.tsx

@@ -1,35 +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<string, unknown>;
-    useQuery: UseQuery<SubscriptionListResponse, Subscription>;
+    endpointName: string;
+    data: SubscriptionListItem[];
 }
 
 export const WfoSubscriptionNoteEdit: FC<WfoSubscriptionNoteEditProps> = ({
     subscriptionId,
     onlyShowOnHover = false,
     queryVariables,
-    useQuery,
+    endpointName,
+    data,
 }) => {
-    const { selectedItem } = useQuery(queryVariables, {
-        selectFromResult: (result: ApiResult<SubscriptionListResponse>) => ({
-            selectedItem: result?.data?.subscriptions?.find(
-                (sub) => sub.subscriptionId === subscriptionId,
-            ),
-        }),
-    });
-    const endpointName = useQuery().endpointName;
+    const selectedItem = data.find(
+        (sub) => sub.subscriptionId === subscriptionId,
+    );
     const [startProcess] = useStartProcessMutation();
     const [updateSub] = useUpdateSubscriptionNoteOptimisticMutation();
 
@@ -44,7 +41,7 @@ export const WfoSubscriptionNoteEdit: FC<WfoSubscriptionNoteEditProps> = ({
         });
 
         updateSub({
-            queryName: endpointName ?? '',
+            queryName: endpointName,
             subscriptionId: subscriptionId,
             graphQlQueryVariables: queryVariables,
             note: note,

packages/orchestrator-ui-components/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -22,7 +22,6 @@ import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedT
 import { ColumnType } from '@/components/WfoTable/WfoTable';
 import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import { DataDisplayParams, useShowToastMessage } from '@/hooks';
-import { UseQuery } from '@/rtk';
 import {
     SubscriptionListResponse,
     useGetSubscriptionListQuery,
@@ -78,6 +77,26 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
     const tError = useTranslations('errors');
     const { showToastMessage } = useShowToastMessage();
 
+    const { sortBy, queryString, pageIndex, pageSize } = dataDisplayParams;
+
+    const graphqlQueryVariables: GraphqlQueryVariables<SubscriptionListItem> = {
+        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<SubscriptionListItem> =
         {
             subscriptionId: {
@@ -155,15 +174,11 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
                 renderData: (cellValue, row) => {
                     return (
                         <WfoSubscriptionNoteEdit
-                            queryVariables={graphqlQueryVariables}
                             subscriptionId={row.subscriptionId}
                             onlyShowOnHover={true}
-                            useQuery={
-                                useGetSubscriptionListQuery as UseQuery<
-                                    SubscriptionListResponse,
-                                    Subscription
-                                >
-                            }
+                            endpointName={endpointName}
+                            queryVariables={graphqlQueryVariables}
+                            data={subscriptionList}
                         />
                     );
                 },
@@ -182,19 +197,6 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             },
         };
 
-    const { sortBy, queryString, pageIndex, pageSize } = dataDisplayParams;
-
-    const graphqlQueryVariables: GraphqlQueryVariables<SubscriptionListItem> = {
-        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,54 +219,55 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
     };
     const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {};
 
+    const pageChange =
+        getPageIndexChangeHandler<SubscriptionListItem>(setDataDisplayParam);
+    const pageSizeChange =
+        getPageSizeChangeHandler<SubscriptionListItem>(setDataDisplayParam);
+    const updateQuery =
+        getQueryStringHandler<SubscriptionListItem>(setDataDisplayParam);
+    const updateSorting =
+        getDataSortHandler<SubscriptionListItem>(setDataDisplayParam);
+
     const pagination: Pagination = {
         pageIndex: dataDisplayParams.pageIndex,
         pageSize: dataDisplayParams.pageSize,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ?? 0,
-        onChangePage:
-            getPageIndexChangeHandler<SubscriptionListItem>(
-                setDataDisplayParam,
-            ),
-        onChangeItemsPerPage:
-            getPageSizeChangeHandler<SubscriptionListItem>(setDataDisplayParam),
+        onChangePage: pageChange,
+        onChangeItemsPerPage: pageSizeChange,
     };
 
+    const exportData = csvDownloadHandler(
+        getSubscriptionListForExport,
+        mapGraphQlSubscriptionsResultToSubscriptionListItems,
+        mapGraphQlSubscriptionsResultToPageInfo,
+        Object.keys(tableColumnConfig),
+        getCsvFileNameWithDate('Subscriptions'),
+        showToastMessage,
+        tError,
+    );
+
+    const mapTableConfig = mapSortableAndFilterableValuesToTableColumnConfig(
+        tableColumnConfig,
+        sortFields,
+        filterFields,
+    );
+
     return (
         <WfoAdvancedTable
             queryString={dataDisplayParams.queryString}
-            onUpdateQueryString={getQueryStringHandler<SubscriptionListItem>(
-                setDataDisplayParam,
-            )}
-            data={
-                data
-                    ? mapGraphQlSubscriptionsResultToSubscriptionListItems(data)
-                    : []
-            }
-            tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
-                tableColumnConfig,
-                sortFields,
-                filterFields,
-            )}
+            onUpdateQueryString={updateQuery}
+            data={subscriptionList}
+            tableColumnConfig={mapTableConfig}
             defaultHiddenColumns={hiddenColumns}
             dataSorting={[dataSorting]}
             isLoading={isFetching}
             localStorageKey={SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY}
             detailModalTitle={'Details - Subscription'}
             pagination={pagination}
             error={mapRtkErrorToWfoError(error)}
-            onUpdateDataSorting={getDataSortHandler<SubscriptionListItem>(
-                setDataDisplayParam,
-            )}
-            onExportData={csvDownloadHandler(
-                getSubscriptionListForExport,
-                mapGraphQlSubscriptionsResultToSubscriptionListItems,
-                mapGraphQlSubscriptionsResultToPageInfo,
-                Object.keys(tableColumnConfig),
-                getCsvFileNameWithDate('Subscriptions'),
-                showToastMessage,
-                tError,
-            )}
+            onUpdateDataSorting={updateSorting}
+            onExportData={exportData}
             exportDataIsLoading={isFetchingCsv}
         />
     );

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,
         };
     });
+};