@orchestrator-ui/orchestrator-ui-components 5.7.0 → 5.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "5.7.0",
+    "version": "5.8.0",
     "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.0",
+        "pydantic-forms": "^0.9.1",
         "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/fields/WfoLabel.tsx

@@ -16,7 +16,7 @@ export const WfoLabel: PydanticFormElement = ({ pydanticFormField }) => {
                 }}
                 id={pydanticFormField.id}
             >
-                {pydanticFormField.title}
+                {pydanticFormField.default || pydanticFormField.title}
             </label>
         </div>
     );

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.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.8.0';

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

package/src/types/types.ts

@@ -145,6 +145,7 @@ export enum WorkflowTarget {
     TERMINATE = 'terminate',
     SYSTEM = 'system',
     VALIDATE = 'validate',
+    RECONCILE = 'reconcile',
 }
 
 export type Process = {
@@ -621,6 +622,7 @@ export type SubscriptionActions = {
     terminate: SubscriptionAction[];
     system: SubscriptionAction[];
     validate: SubscriptionAction[];
+    reconcile: SubscriptionAction[];
 };
 
 export enum CacheTagType {