@orchestrator-ui/orchestrator-ui-components 5.2.0 → 5.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "5.2.0",
+    "version": "5.2.3",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -48,7 +48,7 @@
         "next-query-params": "^5.0.0",
         "object-hash": "^3.0.0",
         "prism-themes": "^1.9.0",
-        "pydantic-forms": "^0.3.1",
+        "pydantic-forms": "^0.3.3",
         "react-diff-view": "^3.2.0",
         "react-draggable": "^4.4.6",
         "react-redux": "^9.1.2",

package/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<string, unknown>;
-    useQuery: UseQuery<SubscriptionListResponse, Subscription>;
+    endpointName: string | undefined;
+    subscription: SubscriptionListItem;
 }
 
 export const WfoSubscriptionNoteEdit: FC<WfoSubscriptionNoteEditProps> = ({
-    subscriptionId,
     onlyShowOnHover = false,
     queryVariables,
-    useQuery,
+    endpointName,
+    subscription,
 }) => {
-    const { selectedItem } = useQuery(queryVariables, {
-        selectFromResult: (result: ApiResult<SubscriptionListResponse>) => ({
-            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<WfoSubscriptionNoteEditProps> = ({
 
         updateSub({
             queryName: endpointName ?? '',
-            subscriptionId: subscriptionId,
+            subscriptionId: subscription.subscriptionId,
             graphQlQueryVariables: queryVariables,
             note: note,
         });
@@ -54,8 +45,8 @@ export const WfoSubscriptionNoteEdit: FC<WfoSubscriptionNoteEditProps> = ({
     return (
         <WfoInlineEdit
             value={
-                selectedItem?.note?.trim()
-                    ? selectedItem.note
+                subscription?.note?.trim()
+                    ? subscription.note
                     : INVISIBLE_CHARACTER
             }
             onlyShowOnHover={onlyShowOnHover}

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -22,14 +22,12 @@ 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,
     useLazyGetSubscriptionListQuery,
 } from '@/rtk/endpoints/subscriptionList';
 import { mapRtkErrorToWfoError } from '@/rtk/utils';
-import { GraphqlQueryVariables, SortOrder, Subscription } from '@/types';
+import { GraphqlQueryVariables, SortOrder } from '@/types';
 import {
     getQueryVariablesForExport,
     getTypedFieldFromObject,
@@ -78,6 +76,22 @@ 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 +169,10 @@ 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}
+                            subscription={row}
                         />
                     );
                 },
@@ -182,19 +191,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,35 +213,46 @@ 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 tableConfig = 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={tableConfig}
             defaultHiddenColumns={hiddenColumns}
             dataSorting={[dataSorting]}
             isLoading={isFetching}
@@ -253,18 +260,8 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             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}
         />
     );

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

package/src/components/WfoSummary/WfoMyWorkflowsSummaryCard.tsx

@@ -37,7 +37,7 @@ export const WfoMyWorkflowsSummaryCard: FC<WfoMyWorkflowsSummaryCardProps> = ({
     const queryParams = {
         [WfoQueryParams.ACTIVE_TAB]: WfoWorkflowsListTabType.COMPLETED,
         [WfoQueryParams.SORT_BY]: 'field-lastModifiedAt_order-DESC',
-        [WfoQueryParams.QUERY_STRING]: `createdBy:${username}`,
+        [WfoQueryParams.QUERY_STRING]: `createdBy:"${username}"`,
     };
 
     return (

package/src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoWorkflowStepList.tsx

@@ -47,7 +47,10 @@ export const WfoProcessSubscriptionDelta = ({
         data?.current_state?.subscription?.subscription_id ?? '';
     const newText = data?.current_state?.subscription ?? null;
     const oldSubscriptions = data?.current_state?.__old_subscriptions__ || {};
-    const oldSubscription = subscriptionId in oldSubscriptions;
+    const oldSubscription =
+        subscriptionId in oldSubscriptions
+            ? oldSubscriptions[subscriptionId]
+            : null;
     const oldText = oldSubscription || null;
 
     return isFetching ? (

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.2.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.2.3';