@orchestrator-ui/orchestrator-ui-components 5.7.1 → 5.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "5.7.1",
+    "version": "5.8.1",
     "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.9.1",
+        "pydantic-forms": "^0.9.2",
         "react-diff-view": "^3.2.0",
         "react-draggable": "^4.4.6",
         "react-redux": "^9.1.2",

package/src/components/WfoBadges/WfoWorkflowTargetBadge/WfoWorkflowTargetBadge.tsx

@@ -24,6 +24,8 @@ export const WfoWorkflowTargetBadge: FC<WfoWorkflowTargetBadgeProps> = ({
             successText,
             warning,
             warningText,
+            accent,
+            accentText,
         } = theme.colors;
 
         switch (_target?.toLowerCase()) {
@@ -48,6 +50,11 @@ export const WfoWorkflowTargetBadge: FC<WfoWorkflowTargetBadgeProps> = ({
                     badgeColor: toSecondaryColor(danger),
                     textColor: dangerText,
                 };
+            case WorkflowTarget.RECONCILE:
+                return {
+                    badgeColor: toSecondaryColor(accent),
+                    textColor: accentText,
+                };
             default:
                 return {
                     badgeColor: toSecondaryColor(primary),

package/src/components/WfoPydanticForm/WfoPydanticForm.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 
+import _ from 'lodash';
 import { AbstractIntlMessages, useMessages, useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
 import type {
@@ -168,7 +169,7 @@ export const useWfoPydanticFormConfig = () => {
                         // We are not using a radio button component to maintain being able to deselect options
                         return (
                             field.type === PydanticFormFieldType.STRING &&
-                            Array.isArray(field.options) &&
+                            _.isArray(field.options) &&
                             field.options.length > 0
                         );
                     },
@@ -193,6 +194,7 @@ export const useWfoPydanticFormConfig = () => {
                     matcher(field) {
                         return (
                             field.type === PydanticFormFieldType.ARRAY &&
+                            _.isArray(field.options) &&
                             field.options?.length > 0 &&
                             field.options?.length <= 5
                         );

package/src/components/WfoPydanticForm/fields/WfoDropdown.tsx

@@ -9,14 +9,14 @@ export const WfoDropdown: PydanticFormControlledElement = ({
     pydanticFormField,
     value,
 }) => {
-    const dropDownOptions = pydanticFormField.options.map((option) => ({
+    const dropDownOptions = pydanticFormField.options?.map((option) => ({
         value: option.value,
         label: option.label,
     }));
 
     return (
         <WfoReactSelect
-            options={dropDownOptions}
+            options={dropDownOptions || []}
             onChange={onChange}
             id={pydanticFormField.id}
             value={value}

package/src/components/WfoPydanticForm/fields/WfoInteger.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
+import _ from 'lodash';
 import type { PydanticFormControlledElement } from 'pydantic-forms';
+import { getFormFieldIdWithPath } from 'pydantic-forms';
 
 import { EuiFieldNumber } from '@elastic/eui';
 import { css } from '@emotion/react';
@@ -32,13 +34,21 @@ export const WfoInteger: PydanticFormControlledElement = ({
         getFormFieldsBaseStyle,
     );
 
+    // If the field is part of an array the value is passed in as an object with the field name as key
+    // this is imposed by react-hook-form. We try to detect this and extract the actual value
+    const fieldName = getFormFieldIdWithPath(pydanticFormField.id);
+    const fieldValue =
+        _.isObject(value) && _.has(value, fieldName)
+            ? _.get(value, fieldName)
+            : value;
+
     return (
         <EuiFieldNumber
             data-testid={pydanticFormField.id}
             css={formFieldBaseStyle}
             name={pydanticFormField.id}
             onChange={(event) => onChange(parseInt(event.target.value))}
-            value={value}
+            value={fieldValue}
             disabled={disabled}
         />
     );

package/src/components/WfoPydanticForm/fields/WfoMultiCheckboxField.tsx

@@ -35,7 +35,7 @@ export const WfoMultiCheckboxField: PydanticFormControlledElement = ({
 
     const { options, id } = pydanticFormField;
 
-    const checkboxes = options.map((option, index) => ({
+    const checkboxes = options?.map((option, index) => ({
         label: option.label,
         id: option.value,
         'data-test-id': `${id}-${index}`,
@@ -59,7 +59,7 @@ export const WfoMultiCheckboxField: PydanticFormControlledElement = ({
 
     return (
         <EuiCheckboxGroup
-            options={checkboxes}
+            options={checkboxes || []}
             idToSelectedMap={checkboxIdToSelectedMap}
             onChange={(id) => handleCheckboxChange(id)}
             data-testid={id}

package/src/components/WfoPydanticForm/fields/WfoRadio.tsx

@@ -10,7 +10,7 @@ export const WfoRadio: PydanticFormControlledElement = ({
     value,
     disabled,
 }) => {
-    const radioOptions = pydanticFormField.options.map((option) => ({
+    const radioOptions = pydanticFormField.options?.map((option) => ({
         id: option.value,
         label: option.label,
     }));
@@ -18,7 +18,7 @@ export const WfoRadio: PydanticFormControlledElement = ({
     return (
         <EuiRadioGroup
             data-testid={pydanticFormField.id}
-            options={radioOptions}
+            options={radioOptions || []}
             idSelected={value}
             onChange={(id) => onChange(id)}
             name={pydanticFormField.id}

package/src/components/WfoPydanticForm/fields/WfoReactSelect/WfoReactSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactSelect, { components } from 'react-select';
 import type { GroupBase, InputProps } from 'react-select';
 
@@ -13,7 +13,7 @@ import { getWfoReactSelectStyles } from './styles';
 interface WfoReactSelectProps<ValueType> {
     options: Option<ValueType>[];
     id: string;
-    onChange: (value: ValueType | undefined) => void;
+    onChange: (value: ValueType | undefined | null) => void;
     value: ValueType;
     disabled?: boolean;
     isLoading?: boolean;
@@ -33,19 +33,21 @@ export const WfoReactSelect = <ValueType,>({
     hasError = false,
     refetch,
 }: WfoReactSelectProps<ValueType>) => {
-    useEffect(() => {
-        const selectedValue = options.find(
-            (option: Option<ValueType>) => option.value === value,
-        );
-        setSelectedValue(selectedValue || null);
-    }, [options, value]);
-
     const initialValue = options.find(
         (option: Option<ValueType>) => option.value === value,
     );
 
     const [selectedValue, setSelectedValue] =
-        React.useState<Option<ValueType> | null>(initialValue || null);
+        useState<Option<ValueType> | null>(initialValue || null);
+
+    useEffect(() => {
+        const preSelectedValue = options.find(
+            (option: Option<ValueType>) => option.value === value,
+        );
+        if (preSelectedValue !== selectedValue) {
+            setSelectedValue(preSelectedValue || null);
+        }
+    }, [options, selectedValue, value]);
 
     // React select allows callbacks to supply style for innercomponents: https://react-select.com/styles#inner-components
     const {
@@ -89,12 +91,12 @@ export const WfoReactSelect = <ValueType,>({
                 id={id}
                 inputId={`${id}.search`}
                 onChange={(option) => {
+                    // By default reactSelect reverts to the initial option when cleared.
+                    // This is to make sure we can also deselect the value after it is
+                    // initialized from error state that sets it to the latest value.
                     if (option === null) {
-                        // By default reactSelect reverts to the initial option when cleared
-                        // this is to make sure we can also deselect the value after it is
-                        // initialized from error state for example.
                         setSelectedValue(null);
-                        onChange(undefined);
+                        onChange(null);
                     } else {
                         const selectedValue = option?.value;
                         setSelectedValue(option);

package/src/components/WfoPydanticForm/fields/WfoText.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
+import _ from 'lodash';
 import type { PydanticFormControlledElement } from 'pydantic-forms';
+import { getFormFieldIdWithPath } from 'pydantic-forms';
 
 import { EuiFieldText } from '@elastic/eui';
 
@@ -16,14 +18,20 @@ export const WfoText: PydanticFormControlledElement = ({
     const { formFieldBaseStyle } = useWithOrchestratorTheme(
         getFormFieldsBaseStyle,
     );
-
+    // If the field is part of an array the value is passed in as an object with the field name as key
+    // this is imposed by react-hook-form. We try to detect this and extract the actual value
+    const fieldName = getFormFieldIdWithPath(pydanticFormField.id);
+    const fieldValue =
+        _.isObject(value) && _.has(value, fieldName)
+            ? _.get(value, fieldName)
+            : value;
     return (
         <EuiFieldText
             data-testid={pydanticFormField.id}
             css={formFieldBaseStyle}
             disabled={disabled}
             onChange={(event) => onChange(event.target.value)}
-            value={value ?? ''}
+            value={fieldValue}
             fullWidth
         />
     );

package/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActions.tsx

@@ -6,8 +6,10 @@ import { useRouter } from 'next/router';
 
 import {
     EuiButton,
+    EuiButtonIcon,
     EuiContextMenuItem,
     EuiContextMenuPanel,
+    EuiLoadingSpinner,
     EuiPanel,
     EuiPopover,
     EuiTitle,
@@ -23,6 +25,7 @@ import {
     useWithOrchestratorTheme,
 } from '@/hooks';
 import { WfoXCircleFill } from '@/icons';
+import { WfoDotsHorizontal } from '@/icons/WfoDotsHorizontal';
 import { useGetSubscriptionActionsQuery } from '@/rtk/endpoints/subscriptionActions';
 import { SubscriptionAction, WorkflowTarget } from '@/types';
 
@@ -37,6 +40,7 @@ type MenuItemProps = {
     index: number;
     target: WorkflowTarget;
     isTask?: boolean;
+    isDisabled?: boolean;
 };
 
 type MenuBlockProps = {
@@ -51,11 +55,13 @@ const MenuBlock: FC<MenuBlockProps> = ({ title }) => (
 export type WfoSubscriptionActionsProps = {
     subscriptionId: string;
     isLoading?: boolean;
+    compactMode?: boolean;
 };
 
 export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
     subscriptionId,
     isLoading,
+    compactMode = false,
 }) => {
     const { theme } = useOrchestratorTheme();
     const {
@@ -69,35 +75,30 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
     const router = useRouter();
     const t = useTranslations('subscriptions.detail.actions');
     const [isPopoverOpen, setPopover] = useState(false);
-    const { data: subscriptionActions } = useGetSubscriptionActionsQuery(
-        {
-            subscriptionId,
-        },
-        { skip: isLoading },
+    const disableQuery = isLoading || (!isPopoverOpen && compactMode);
+    const {
+        data: subscriptionActions,
+        isLoading: subscriptionActionsIsLoading,
+    } = useGetSubscriptionActionsQuery(
+        { subscriptionId },
+        { skip: disableQuery },
     );
     const { isEngineRunningNow } = useCheckEngineStatus();
     const { isAllowed } = usePolicy();
 
-    const onButtonClick = () => {
-        setPopover(!isPopoverOpen);
-    };
-
-    const closePopover = () => {
-        setPopover(false);
-    };
+    const onButtonClick = () => setPopover(!isPopoverOpen);
+    const closePopover = () => setPopover(false);
 
     const MenuItem: FC<MenuItemProps> = ({
         action,
         target,
         isTask = false,
     }) => {
-        // Change icon to include x if there's a reason
-        // Add tooltip with reason
         const linkIt = (actionItem: React.ReactNode) => {
             const path = isTask ? PATH_START_NEW_TASK : PATH_START_NEW_WORKFLOW;
             const url = {
                 pathname: `${path}/${action.name}`,
-                query: { subscriptionId: subscriptionId },
+                query: { subscriptionId },
             };
 
             const handleLinkClick = async (e: React.MouseEvent) => {
@@ -116,35 +117,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
         };
 
         const tooltipIt = (actionItem: React.ReactNode) => {
-            /**
-              Whether an action is disabled is indicated by it having a reason property.
-              The value of the reason property is as a translation key that should
-              be part of the local translations under subscription.details.workflow.disableReasons
-              Some of these reasons may contain dynamic values. The values are passed as extra keys next to
-              the reason key. The complete reason object is passed to the translate function to make this work.
-              An extra variable passed in might be of type array, before passing it in arrays are flattened to ,
-              concatenated strings.
-
-              Example action item response for an action that is disabled
-              const reason = {
-                name: "...",
-                description: "...",
-                reason: "random_reason_translation_key" =>
-                  this maps to a key in subscription.details.workflow.disableReasons containing
-                  ".... {randomVar1} .... {randomVar2}  "
-                randomVar: [
-                  "array value 1",
-                  "array value 2"
-                ],
-                randomVar2: "flat string"
-
-              }
-
-              // Translation function invocation
-              t('randonReason', reason)
-            */
             if (!action.reason) return actionItem;
-
             const tooltipContent = t(action.reason, flattenArrayProps(action));
 
             return (
@@ -161,10 +134,10 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
             );
         };
 
-        const getIcon = () => {
-            return action.reason ? (
+        const getIcon = () =>
+            action.reason ? (
                 <div css={disabledIconStyle}>
-                    <WfoTargetTypeIcon target={target} disabled={true} />
+                    <WfoTargetTypeIcon target={target} disabled />
                     <div css={secondaryIconStyle}>
                         <WfoXCircleFill
                             width={20}
@@ -178,7 +151,6 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
                     <WfoTargetTypeIcon target={target} />
                 </div>
             );
-        };
 
         const ActionItem = () => (
             <EuiContextMenuItem icon={getIcon()} disabled={!!action.reason}>
@@ -191,7 +163,14 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
             : linkIt(<ActionItem />);
     };
 
-    const button = (
+    const button = compactMode ? (
+        <EuiButtonIcon
+            iconType={() => <WfoDotsHorizontal />}
+            onClick={onButtonClick}
+            aria-label="Row context menu"
+            isLoading={isLoading}
+        />
+    ) : (
         <EuiButton
             iconType="arrowDown"
             iconSide="right"
@@ -202,6 +181,83 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
         </EuiButton>
     );
 
+    const {
+        SUBSCRIPTION_VALIDATE,
+        SUBSCRIPTION_RECONCILE,
+        SUBSCRIPTION_MODIFY,
+        SUBSCRIPTION_TERMINATE,
+    } = PolicyResource;
+    const compactItems = (
+        <>
+            {isAllowed(SUBSCRIPTION_VALIDATE + subscriptionId) &&
+                subscriptionActions?.validate && (
+                    <>
+                        {!compactMode && <MenuBlock title={t('tasks')} />}
+                        {subscriptionActions.validate.map((action, index) => (
+                            <MenuItem
+                                key={`s_${index}`}
+                                action={action}
+                                index={index}
+                                target={WorkflowTarget.VALIDATE}
+                                isTask
+                            />
+                        ))}
+                    </>
+                )}
+
+            {isAllowed(SUBSCRIPTION_RECONCILE + subscriptionId) &&
+                (subscriptionActions?.reconcile?.length ?? 0) > 0 && (
+                    <>
+                        {!compactMode && <MenuBlock title={t('reconcile')} />}
+                        {subscriptionActions?.reconcile.map((action, index) => (
+                            <MenuItem
+                                key={`r_${index}`}
+                                action={action}
+                                index={index}
+                                target={WorkflowTarget.RECONCILE}
+                            />
+                        ))}
+                    </>
+                )}
+        </>
+    );
+
+    const fullItems = (
+        <>
+            {isAllowed(SUBSCRIPTION_MODIFY + subscriptionId) &&
+                subscriptionActions?.modify && (
+                    <>
+                        <MenuBlock title={t('modify')} />
+                        {subscriptionActions.modify.map((action, index) => (
+                            <MenuItem
+                                key={`m_${index}`}
+                                action={action}
+                                index={index}
+                                target={WorkflowTarget.MODIFY}
+                            />
+                        ))}
+                    </>
+                )}
+            {compactItems}
+            {isAllowed(SUBSCRIPTION_TERMINATE + subscriptionId) &&
+                subscriptionActions?.terminate && (
+                    <>
+                        <MenuBlock title={t('terminate')} />
+                        {subscriptionActions.terminate.map((action, index) => (
+                            <MenuItem
+                                key={`t_${index}`}
+                                action={action}
+                                index={index}
+                                target={WorkflowTarget.TERMINATE}
+                            />
+                        ))}
+                    </>
+                )}
+        </>
+    );
+
+    const MenuItemsList = () => (compactMode ? compactItems : fullItems);
+
     return (
         <EuiPopover
             id="subscriptionActionPopover"
@@ -213,68 +269,11 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
         >
             <EuiContextMenuPanel>
                 <EuiPanel color="transparent" paddingSize="s">
-                    {subscriptionActions &&
-                        isAllowed(
-                            PolicyResource.SUBSCRIPTION_MODIFY + subscriptionId,
-                        ) &&
-                        subscriptionActions.modify && (
-                            <>
-                                <MenuBlock title={t('modify')}></MenuBlock>
-                                {subscriptionActions.modify.map(
-                                    (action, index) => (
-                                        <MenuItem
-                                            key={`m_${index}`}
-                                            action={action}
-                                            index={index}
-                                            target={WorkflowTarget.MODIFY}
-                                        />
-                                    ),
-                                )}
-                            </>
-                        )}
-
-                    {subscriptionActions &&
-                        isAllowed(
-                            PolicyResource.SUBSCRIPTION_VALIDATE +
-                                subscriptionId,
-                        ) &&
-                        subscriptionActions.validate && (
-                            <>
-                                <MenuBlock title={t('tasks')}></MenuBlock>
-                                {subscriptionActions.validate.map(
-                                    (action, index) => (
-                                        <MenuItem
-                                            key={`s_${index}`}
-                                            action={action}
-                                            index={index}
-                                            target={WorkflowTarget.VALIDATE}
-                                            isTask={true}
-                                        />
-                                    ),
-                                )}
-                            </>
-                        )}
-
-                    {subscriptionActions &&
-                        isAllowed(
-                            PolicyResource.SUBSCRIPTION_TERMINATE +
-                                subscriptionId,
-                        ) &&
-                        subscriptionActions.terminate && (
-                            <>
-                                <MenuBlock title={t('terminate')}></MenuBlock>
-                                {subscriptionActions.terminate.map(
-                                    (action, index) => (
-                                        <MenuItem
-                                            key={`t_${index}`}
-                                            action={action}
-                                            index={index}
-                                            target={WorkflowTarget.TERMINATE}
-                                        />
-                                    ),
-                                )}
-                            </>
-                        )}
+                    {subscriptionActionsIsLoading ? (
+                        <EuiLoadingSpinner />
+                    ) : (
+                        <MenuItemsList />
+                    )}
                 </EuiPanel>
             </EuiContextMenuPanel>
         </EuiPopover>

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

@@ -74,6 +74,8 @@ export const getWorkflowTargetColor = (
         case WorkflowTarget.SYSTEM:
         case WorkflowTarget.VALIDATE:
             return theme.colors.warning;
+        case WorkflowTarget.RECONCILE:
+            return theme.colors.accent;
         case WorkflowTarget.TERMINATE:
             return theme.colors.danger;
     }
@@ -93,6 +95,8 @@ export const getWorkflowTargetIconContent = (
             return 'T';
         case WorkflowTarget.TERMINATE:
             return 'X';
+        case WorkflowTarget.RECONCILE:
+            return 'R';
         default:
             return 'M';
     }

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -15,6 +15,7 @@ import {
     WfoInlineJson,
     WfoInsyncIcon,
     WfoJsonCodeBlock,
+    WfoSubscriptionActions,
     WfoSubscriptionNoteEdit,
     WfoSubscriptionStatusBadge,
     getPageIndexChangeHandler,
@@ -178,6 +179,17 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
                     );
                 },
             },
+            actions: {
+                columnType: ColumnType.CONTROL,
+                label: t('actions'),
+                width: '80px',
+                renderControl: (row) => (
+                    <WfoSubscriptionActions
+                        compactMode={true}
+                        subscriptionId={row.subscriptionId}
+                    />
+                ),
+            },
             metadata: {
                 columnType: ColumnType.DATA,
                 label: t('metadata'),

package/src/configuration/policy-resources.ts

@@ -13,6 +13,7 @@ export enum PolicyResource {
     SUBSCRIPTION_CREATE = '/orchestrator/processes/create/process/menu',
     SUBSCRIPTION_MODIFY = '/orchestrator/subscriptions/modify/',
     SUBSCRIPTION_TERMINATE = '/orchestrator/subscriptions/terminate/',
+    SUBSCRIPTION_RECONCILE = '/orchestrator/subscriptions/reconcile/',
     SUBSCRIPTION_VALIDATE = '/orchestrator/subscriptions/validate/',
     TASKS_CREATE = '/orchestrator/processes/create/task',
     TASKS_RETRY_ALL = '/orchestrator/processes/all-tasks/retry',

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.7.1';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.8.1';

package/src/messages/en-GB.json

@@ -307,8 +307,13 @@
                 "modify": "Modify workflow",
                 "tasks": "Tasks",
                 "terminate": "Terminate workflow",
+                "reconcile": "Reconcile workflow",
                 "actions": "Actions",
                 "lockedBySubscriptions": "This action is locked by the following subscriptions:",
+                "notAvailable": "Not available",
+                "notAvailableForWorkflow": "Not available for this workflow",
+                "reconcileSubscription": "Reconcile subscription",
+                "validateSubscription": "Validate subscription",
                 "subscription": {
                     "no_modify_deleted_related_objects": "This subscription can not be modified because it contains references to other systems that are deleted.",
                     "no_modify_in_use_by_subscription": "This subscription can not be {action} as it is used in other subscriptions: {unterminated_in_use_by_subscriptions}",

package/src/messages/nl-NL.json

@@ -304,6 +304,11 @@
                 "modify": "Modify workflow",
                 "tasks": "Taken",
                 "terminate": "Terminate workflow",
+                "reconcile": "Reconcile workflow",
+                "notAvailable": "Niet beschikbaar",
+                "notAvailableForWorkflow": "Niet beschikbaar voor deze workflow",
+                "reconcileSubscription": "Reconcile subscription",
+                "validateSubscription": "Validate subscription",
                 "actions": "Acties",
                 "lockedBySubscriptions": "Deze actie is geblokkeerd door de volgende subscriptions:",
                 "subscription": {

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

@@ -35,7 +35,7 @@ query MetadataWorkflows(
         after: $after
         sortBy: $sortBy
         query: $query
-        filterBy: { field: "target", value: "CREATE|MODIFY|TERMINATE" }
+        filterBy: { field: "target", value: "CREATE|MODIFY|TERMINATE|RECONCILE" }
     ) {
         page {
             workflowId