@orchestrator-ui/orchestrator-ui-components 8.0.0 → 8.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "8.0.0",
+  "version": "8.1.1",
   "license": "Apache-2.0",
   "description": "Library of UI Components used to display the workflow orchestrator frontend",
   "author": {
@@ -34,10 +34,10 @@
     "dev": "tsup --watch"
   },
   "dependencies": {
-    "@ag-ui/client": "^0.0.47",
-    "@copilotkit/react-core": "1.54.0",
-    "@copilotkit/react-ui": "1.54.0",
-    "@copilotkit/runtime": "1.54.0",
+    "@ag-ui/client": "^0.0.53",
+    "@copilotkit/react-core": "^1.57.0",
+    "@copilotkit/react-ui": "^1.57.0",
+    "@copilotkit/runtime": "^1.57.0",
     "@elastic/charts": "^64.1.0",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
@@ -64,7 +64,7 @@
     "use-query-params": "^2.2.2"
   },
   "devDependencies": {
-    "@elastic/eui": "^113.1.0",
+    "@elastic/eui": "^113.3.0",
     "@orchestrator-ui/eslint-config-custom": "*",
     "@orchestrator-ui/jest-config": "*",
     "@reduxjs/toolkit": "^2.0.1",

package/src/components/WfoBadges/WfoProductStatusBadge/WfoProductStatusBadge.tsx

@@ -8,13 +8,16 @@ export type WfoProductStatusBadgeProps = {
   status: ProductLifecycleStatus;
 };
 
+const normalizedStatus = (status: ProductLifecycleStatus): string => status.toLowerCase().replace(/_/g, ' ');
+
 export const WfoProductStatusBadge: FC<WfoProductStatusBadgeProps> = ({ status }) => {
   const { theme, toSecondaryColor } = useOrchestratorTheme();
 
-  const getBadgeColorFromStatus = (status: string) => {
+  const productLifeCycleStatus = normalizedStatus(status);
+  const getBadgeColorFromStatus = () => {
     const { primary, borderBaseSubdued, textPrimary, textParagraph, success, textSuccess } = theme.colors;
 
-    switch (status.toLowerCase()) {
+    switch (productLifeCycleStatus) {
       case ProductLifecycleStatus.ACTIVE:
         return {
           badgeColor: toSecondaryColor(success),
@@ -34,11 +37,11 @@ export const WfoProductStatusBadge: FC<WfoProductStatusBadgeProps> = ({ status }
     }
   };
 
-  const { badgeColor, textColor } = getBadgeColorFromStatus(status);
+  const { badgeColor, textColor } = getBadgeColorFromStatus();
 
   return (
     <WfoBadge textColor={textColor} color={badgeColor}>
-      {status.toLowerCase()}
+      {productLifeCycleStatus}
     </WfoBadge>
   );
 };

package/src/components/WfoBadges/WfoVersionIncompatibleBadge/WfoVersionIncompatibleBadge.tsx

@@ -21,7 +21,7 @@ export const WfoVersionIncompatibleBadge: FC<WfoVersionIncompatibleBadgeProps> =
   orchestratorCoreVersion,
 }) => {
   const t = useTranslations('main');
-  const { theme } = useOrchestratorTheme();
+  const { theme, isDarkModeActive } = useOrchestratorTheme();
   const mappedVersions: MappedVersion[] = versionCompatibility;
   const isReady = orchestratorCoreVersion && orchestratorUiVersion;
 
@@ -50,10 +50,11 @@ export const WfoVersionIncompatibleBadge: FC<WfoVersionIncompatibleBadgeProps> =
     >
       <WfoHeaderBadge
         color="danger"
-        textColor={theme.colors.textGhost}
+        textColor={isDarkModeActive ? theme.colors.textGhost : theme.colors.textInk}
         css={{
           marginLeft: theme.size.s,
-          display: minimumOrchestratorCoreVersion ? 'block' : 'none',
+          display: minimumOrchestratorCoreVersion ? 'flex' : 'none',
+          cursor: 'default',
         }}
       >
         {t('incompatibleVersion')}

package/src/components/WfoInlineNoteEdit/WfoProcessListNoteEdit.tsx

@@ -0,0 +1,31 @@
+import type { FC } from 'react';
+import React, { useEffect, useState } from 'react';
+
+import { usePatchProcessMutation } from '@/rtk';
+import { ProcessDetail } from '@/types';
+
+import { WfoInlineEdit } from '../WfoInlineEdit';
+
+interface WfoProcessDetailNoteEditProps {
+  processId: ProcessDetail['processId'];
+  note: ProcessDetail['note'];
+}
+
+export const WfoProcessListNoteEdit: FC<WfoProcessDetailNoteEditProps> = ({ processId, note }) => {
+  const [patchProcess] = usePatchProcessMutation();
+  const [noteValue, setNoteValue] = useState(note);
+
+  useEffect(() => {
+    if (note !== noteValue) {
+      setNoteValue(note);
+    }
+  }, [note, noteValue]);
+
+  const onSaveNote = async (note: string) => {
+    const noteModifyPayload = { id: processId, note: note };
+    patchProcess(noteModifyPayload);
+    return note;
+  };
+
+  return <WfoInlineEdit value={noteValue?.trim() || ''} onSave={onSaveNote} />;
+};

package/src/components/WfoInlineNoteEdit/index.ts

@@ -1,2 +1,3 @@
 export * from './WfoSubscriptionNoteEdit';
 export * from './WfoSubscriptionDetailNoteEdit';
+export * from './WfoProcessListNoteEdit';

package/src/components/WfoInlineNoteEdit/styles.ts

@@ -0,0 +1,11 @@
+import { css } from '@emotion/react';
+
+export const getStyles = () => {
+  const getProcessDetailPageNoteStyle = css({
+    paddingBottom: '10px',
+  });
+
+  return {
+    getProcessDetailPageNoteStyle,
+  };
+};

package/src/components/WfoMetadata/WfoMetadataStatusField.tsx

@@ -0,0 +1,48 @@
+import React, { FC, useState } from 'react';
+
+import { EuiButtonEmpty } from '@elastic/eui';
+
+import { ProductLifecycleStatus } from '@/types';
+
+import { WfoProductStatusBadge } from '../WfoBadges';
+import { WfoPopover } from '../WfoPopover';
+
+interface WfoMetadataStatusFieldProps {
+  onSave: (updatedStatus: ProductLifecycleStatus) => void;
+  currentStatus: ProductLifecycleStatus;
+}
+
+export const WfoMetadataStatusField: FC<WfoMetadataStatusFieldProps> = ({ onSave, currentStatus }) => {
+  const [isPopoverOpen, setPopover] = useState<boolean>(false);
+  const onButtonClick = () => setPopover(!isPopoverOpen);
+  const button = (
+    <EuiButtonEmpty iconType="arrowDown" iconSide="right" onClick={onButtonClick} color={'text'}>
+      <WfoProductStatusBadge status={currentStatus} />
+    </EuiButtonEmpty>
+  );
+
+  const handleOnSelectOption = (updatedStatus: ProductLifecycleStatus) => {
+    setPopover(false);
+    onSave(updatedStatus);
+  };
+
+  const setNewStatusBadges = () =>
+    Object.values(ProductLifecycleStatus).map((productStatus) => (
+      <EuiButtonEmpty onClick={() => handleOnSelectOption(productStatus)}>
+        <WfoProductStatusBadge status={productStatus} />
+      </EuiButtonEmpty>
+    ));
+
+  return (
+    <WfoPopover
+      id={'productStatusPopover'}
+      isLoading={false}
+      button={button}
+      isPopoverOpen={isPopoverOpen}
+      closePopover={() => setPopover(false)}
+      PopoverContent={setNewStatusBadges}
+    />
+  );
+};
+
+export default WfoMetadataStatusField;

package/src/components/WfoMetadata/index.ts

@@ -0,0 +1,2 @@
+export * from './WfoMetadataDescriptionField';
+export * from './WfoMetadataStatusField';

package/src/components/WfoProcessList/WfoProcessesList.tsx

@@ -8,6 +8,7 @@ import {
   FilterQuery,
   PATH_WORKFLOWS,
   WfoDateTime,
+  WfoProcessListNoteEdit,
   WfoProcessStatusBadge,
   WfoWorkflowTargetBadge,
   getPageIndexChangeHandler,
@@ -53,6 +54,7 @@ export type ProcessListItem = Pick<
   | 'assignee'
   | 'processId'
   | 'subscriptions'
+  | 'note'
 > & {
   startedAt: Date;
   lastModifiedAt: Date;
@@ -138,6 +140,12 @@ export const WfoProcessesList = ({
       label: t('customerAbbreviation'),
       width: '125px',
     },
+    note: {
+      columnType: ColumnType.DATA,
+      label: t('note'),
+      width: '250px',
+      renderData: (note, { processId }) => <WfoProcessListNoteEdit processId={processId} note={note} />,
+    },
     subscriptions: {
       columnType: ColumnType.DATA,
       label: t('subscriptions'),

package/src/components/WfoProcessList/processListObjectMappers.ts

@@ -23,6 +23,7 @@ export const mapGraphQlProcessListResultToProcessListItems = (processes: Process
       product,
       customer,
       isTask,
+      note,
     } = process;
 
     return {
@@ -41,6 +42,7 @@ export const mapGraphQlProcessListResultToProcessListItems = (processes: Process
       tag: product?.tag,
       customer: customer.fullname,
       customerAbbreviation: customer.shortcode,
+      note,
     };
   });
 
@@ -62,6 +64,7 @@ export const mapGraphQlProcessListExportResultToProcessListItems = (
       product,
       customer,
       isTask,
+      note,
     } = process;
 
     return {
@@ -83,6 +86,7 @@ export const mapGraphQlProcessListExportResultToProcessListItems = (
       productTag: product?.tag,
       customer: customer.fullname,
       customerAbbreviation: customer.shortcode,
+      note,
     };
   });
 

package/src/components/WfoSubscription/WfoProcessesTimeline.tsx

@@ -9,6 +9,7 @@ import {
   PATH_TASKS,
   PATH_WORKFLOWS,
   WfoLoading,
+  WfoProcessListNoteEdit,
   WfoRadioDropdown,
   WfoRadioDropdownOption,
   sortProcessesByDate,
@@ -54,6 +55,12 @@ const WfoProcessCard = ({ subscriptionDetailProcess }: WfoProcessCardProps) => {
       label: t('startedBy'),
       content: subscriptionDetailProcess.createdBy,
     },
+    {
+      label: t('note'),
+      content: (
+        <WfoProcessListNoteEdit processId={subscriptionDetailProcess.processId} note={subscriptionDetailProcess.note} />
+      ),
+    },
   ];
 
   return (

package/src/components/WfoSubscription/utils/utils.spec.ts

@@ -171,6 +171,7 @@ const testProcess: SubscriptionDetailProcess = {
   processId: 'testProcessId 1',
   startedAt: '2021-01-01T00:00:00Z',
   isTask: false,
+  note: 'testNote',
 };
 
 describe('getLastUncompletedProcess', () => {

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.0.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.1.1';

package/src/hooks/useAgentPlanEvents.ts

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 
 import type { AgentSubscriber } from '@ag-ui/client';
-// @ts-expect-error - v2 subpath exists but TypeScript moduleResolution doesn't recognize it
 import { useAgent } from '@copilotkit/react-core/v2';
 
 /** AG-UI custom event names emitted by the backend agent. */

package/src/messages/en-GB.json

@@ -249,7 +249,8 @@
       "lastModified": "Last modified",
       "workflowTarget": "Target",
       "productTag": "Product tag",
-      "showAllRelatedSubscriptions": "Show all related subscriptions"
+      "showAllRelatedSubscriptions": "Show all related subscriptions",
+      "note": "Note"
     },
     "detail": {
       "retry": "Retry",
@@ -409,7 +410,8 @@
         "id": "ID",
         "status": "Status",
         "startedAt": "Started at",
-        "startedBy": "Started by"
+        "startedBy": "Started by",
+        "note": "Note"
       },
       "showAll": "Show all",
       "hideAll": "Hide all",

package/src/messages/nl-NL.json

@@ -248,7 +248,8 @@
       "lastModified": "Aangepast op",
       "workflowTarget": "Target",
       "productTag": "Product tag",
-      "showAllRelatedSubscriptions": "Toon alle gerelateerde subscriptions"
+      "showAllRelatedSubscriptions": "Toon alle gerelateerde subscriptions",
+      "note": "Note"
     },
     "detail": {
       "retry": "Probeer opnieuw",
@@ -408,7 +409,8 @@
         "id": "ID",
         "status": "Status",
         "startedAt": "Started at",
-        "startedBy": "Started by"
+        "startedBy": "Started by",
+        "note": "Note"
       },
       "showAll": "Toon alles",
       "hideAll": "Verberg alles",

package/src/pages/metadata/WfoProductsPage.tsx

@@ -15,10 +15,10 @@ import {
   StoredTableConfig,
   WfoDateTime,
   WfoProductBlockBadge,
-  WfoProductStatusBadge,
   getDataSortHandler,
   getQueryStringHandler,
 } from '@/components';
+import { WfoMetadataStatusField } from '@/components/WfoMetadata';
 import { WfoMetadataDescriptionField } from '@/components/WfoMetadata/WfoMetadataDescriptionField';
 import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
 import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
@@ -26,10 +26,15 @@ import { WfoFirstPartUUID } from '@/components/WfoTable/WfoFirstPartUUID';
 import { ColumnType, Pagination } from '@/components/WfoTable/WfoTable';
 import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import { useDataDisplayParams, useShowToastMessage, useStoredTableConfig } from '@/hooks';
-import { useGetProductsQuery, useLazyGetProductsQuery, useUpdateProductMutation } from '@/rtk';
+import {
+  useGetProductsQuery,
+  useLazyGetProductsQuery,
+  useUpdateProductDescriptionMutation,
+  useUpdateProductStatusMutation,
+} from '@/rtk';
 import { ProductsResponse } from '@/rtk';
 import { mapRtkErrorToWfoError } from '@/rtk/utils';
-import type { GraphqlQueryVariables, ProductDefinition } from '@/types';
+import type { GraphqlQueryVariables, ProductDefinition, ProductLifecycleStatus } from '@/types';
 import { BadgeType, SortOrder } from '@/types';
 import {
   getConcatenatedResult,
@@ -56,7 +61,8 @@ export const WfoProductsPage = () => {
   const [tableDefaults, setTableDefaults] = useState<StoredTableConfig<ProductDefinition>>();
 
   const getStoredTableConfig = useStoredTableConfig<ProductDefinition>(METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY);
-  const [updateProduct] = useUpdateProductMutation();
+  const [updateProductDescription] = useUpdateProductDescriptionMutation();
+  const [updateProductStatus] = useUpdateProductStatusMutation();
 
   useEffect(() => {
     const storedConfig = getStoredTableConfig();
@@ -106,7 +112,7 @@ export const WfoProductsPage = () => {
       renderData: (value, row) => (
         <WfoMetadataDescriptionField
           onSave={(updatedNote) =>
-            updateProduct({
+            updateProductDescription({
               id: row.productId,
               description: updatedNote,
             })
@@ -123,8 +129,18 @@ export const WfoProductsPage = () => {
     status: {
       columnType: ColumnType.DATA,
       label: t('status'),
-      width: '90px',
-      renderData: (value) => <WfoProductStatusBadge status={value} />,
+      width: '150px',
+      renderData: (value, row) => (
+        <WfoMetadataStatusField
+          onSave={(updatedStatus: ProductLifecycleStatus) =>
+            updateProductStatus({
+              id: row.productId,
+              status: updatedStatus,
+            })
+          }
+          currentStatus={value}
+        />
+      ),
     },
     fixedInputs: {
       columnType: ColumnType.DATA,

package/src/pages/processes/WfoProcessDetail.tsx

@@ -11,6 +11,7 @@ import {
   TimelineItem,
   WfoIsAllowedToRender,
   WfoLoading,
+  WfoProcessListNoteEdit,
   WfoTimeline,
   WfoTitleWithWebsocketBadge,
 } from '@/components';
@@ -182,7 +183,13 @@ export const WfoProcessDetail = ({
       <WfoContentHeader
         title={<WfoTitleWithWebsocketBadge title={pageTitle} />}
         subtitle={
-          <WfoProductInformationWithLink productNames={productNames} workflowName={processDetail?.workflowName ?? ''} />
+          <>
+            <WfoProcessListNoteEdit processId={processDetail?.processId || ''} note={processDetail?.note || ''} />
+            <WfoProductInformationWithLink
+              productNames={productNames}
+              workflowName={processDetail?.workflowName ?? ''}
+            />
+          </>
         }
       >
         <WfoIsAllowedToRender resource={PolicyResource.PROCESS_RETRY}>

package/src/rtk/api.ts

@@ -165,6 +165,7 @@ export const orchestratorApi = createApi({
     CacheTagType.processStatusCounts,
     CacheTagType.subscriptions,
     CacheTagType.scheduledTasks,
+    CacheTagType.metadataProducts,
   ],
   keepUnusedDataFor: process.env.NEXT_PUBLIC_DISABLE_CACHE === 'true' ? 0 : 60 * 60 * 1000,
 });

package/src/rtk/endpoints/metadata/products.ts

@@ -2,11 +2,14 @@ import { METADATA_PRODUCT_ENDPOINT } from '@/configuration/constants';
 import { BaseQueryTypes, orchestratorApi } from '@/rtk';
 import {
   BaseGraphQlResult,
+  CacheTagType,
   GraphqlQueryVariables,
   MetadataDescriptionParams,
+  MetadataStatusParams,
   ProductDefinition,
   ProductDefinitionsResult,
 } from '@/types';
+import { getCacheTag } from '@/utils';
 
 export const products = `
     query MetadataProducts(
@@ -66,6 +69,7 @@ const productsApi = orchestratorApi.injectEndpoints({
           pageInfo,
         };
       },
+      providesTags: getCacheTag(CacheTagType.metadataProducts),
     }),
   }),
 });
@@ -74,7 +78,7 @@ export const { useGetProductsQuery, useLazyGetProductsQuery } = productsApi;
 
 const productRestApi = orchestratorApi.injectEndpoints({
   endpoints: (build) => ({
-    updateProduct: build.mutation<null, MetadataDescriptionParams>({
+    updateProductDescription: build.mutation<null, MetadataDescriptionParams>({
       query: (product) => ({
         url: `${METADATA_PRODUCT_ENDPOINT}/${product.id}`,
         method: 'PATCH',
@@ -88,8 +92,25 @@ const productRestApi = orchestratorApi.injectEndpoints({
       extraOptions: {
         baseQueryType: BaseQueryTypes.fetch,
       },
+      invalidatesTags: getCacheTag(CacheTagType.metadataProducts),
+    }),
+    updateProductStatus: build.mutation<null, MetadataStatusParams>({
+      query: (product) => ({
+        url: `${METADATA_PRODUCT_ENDPOINT}/${product.id}`,
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: {
+          status: product.status,
+        },
+      }),
+      extraOptions: {
+        baseQueryType: BaseQueryTypes.fetch,
+      },
+      invalidatesTags: getCacheTag(CacheTagType.metadataProducts),
     }),
   }),
 });
 
-export const { useUpdateProductMutation } = productRestApi;
+export const { useUpdateProductDescriptionMutation, useUpdateProductStatusMutation } = productRestApi;

package/src/rtk/endpoints/processDetail.ts

@@ -5,7 +5,13 @@ import {
   PROCESS_RESUME_ENDPOINT,
 } from '@/configuration';
 import { BaseQueryTypes, orchestratorApi } from '@/rtk';
-import { CacheTagType, ProcessDetail, ProcessDetailResultRaw, ProcessesDetailResult } from '@/types';
+import {
+  CacheTagType,
+  ProcessDetail,
+  ProcessDetailResultRaw,
+  ProcessPatchParams,
+  ProcessesDetailResult,
+} from '@/types';
 import { getCacheTag } from '@/utils/cacheTag';
 
 export const processDetailQuery = `query ProcessDetail($processId: String!) {
@@ -21,6 +27,7 @@ export const processDetailQuery = `query ProcessDetail($processId: String!) {
                 isTask
                 form
                 traceback
+                note
                 userPermissions {
                     retryAllowed
                     resumeAllowed
@@ -130,6 +137,22 @@ const processDetailApi = orchestratorApi.injectEndpoints({
       },
       invalidatesTags: getCacheTag(CacheTagType.processes),
     }),
+    patchProcess: builder.mutation<void, ProcessPatchParams>({
+      query: (process) => ({
+        url: `${PROCESSES_ENDPOINT}/${process.id}`,
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: {
+          note: process.note,
+        },
+      }),
+      extraOptions: {
+        baseQueryType: BaseQueryTypes.fetch,
+      },
+      invalidatesTags: [CacheTagType.processes, CacheTagType.subscriptions],
+    }),
   }),
 });
 
@@ -140,4 +163,5 @@ export const {
   useRetryProcessMutation,
   useDeleteProcessMutation,
   useAbortProcessMutation,
+  usePatchProcessMutation,
 } = processDetailApi;

package/src/rtk/endpoints/processList.ts

@@ -50,6 +50,7 @@ export const processListQuery = `
                         description
                     }
                 }
+                note
             }
             pageInfo {
                 hasNextPage

package/src/rtk/endpoints/subscriptionDetail.ts

@@ -57,6 +57,7 @@ fragment SubscriptionDetail on SubscriptionInterface {
             workflowTarget
             workflowName
             isTask
+            note
         }
     }
 }

package/src/types/types.ts

@@ -164,6 +164,7 @@ export type Process = {
   subscriptions: {
     page: Pick<Subscription, 'subscriptionId' | 'description'>[];
   };
+  note: string | null;
 };
 
 // These step statusses match the ones in the backend
@@ -204,6 +205,7 @@ export interface ProcessDetail {
   customer: {
     fullname: string;
   };
+  note: string | null;
 }
 
 // From backend
@@ -501,10 +503,15 @@ export type MetadataDescriptionParams = {
   description: string;
 };
 
-// export type Workflow = {
-//     workflow_id: string;
-//     description: string;
-// };
+export type ProcessPatchParams = {
+  id: string;
+  note: string | null;
+};
+
+export type MetadataStatusParams = {
+  id: string;
+  status: ProductLifecycleStatus;
+};
 
 export type SubscriptionDetail = {
   subscriptionId: string;
@@ -535,7 +542,7 @@ export type SubscriptionDetail = {
 
 export type SubscriptionDetailProcess = Pick<
   Process,
-  'processId' | 'lastStatus' | 'startedAt' | 'createdBy' | 'workflowTarget' | 'workflowName' | 'isTask'
+  'processId' | 'lastStatus' | 'startedAt' | 'createdBy' | 'workflowTarget' | 'workflowName' | 'isTask' | 'note'
 >;
 
 export type RelatedSubscription = Pick<
@@ -622,6 +629,7 @@ export enum CacheTagType {
   processStatusCounts = 'processStatusCounts',
   subscriptions = 'subscriptions',
   scheduledTasks = 'scheduledTags',
+  metadataProducts = 'metadataProducts',
 }
 
 export interface MappedVersion {

package/src/utils/getProductNamesFromProcess.spec.ts

@@ -12,6 +12,7 @@ const getProcessDetail = (data: Partial<ProcessDetail> = {}): ProcessDetail => {
     workflowName: 'workflowName',
     isTask: false,
     traceback: null,
+    note: 'note',
     userPermissions: {
       retryAllowed: true,
       resumeAllowed: true,