@orchestrator-ui/orchestrator-ui-components 5.3.4 → 5.4.0

package/src/components/WfoPydanticForm/fields/{Divider.tsx → WfoDivider.tsx}

@@ -6,10 +6,11 @@ import { EuiHorizontalRule } from '@elastic/eui';
 
 import { useOrchestratorTheme } from '@/hooks';
 
-export const Divider: PydanticFormElement = ({ pydanticFormField }) => {
+export const WfoDivider: PydanticFormElement = ({ pydanticFormField }) => {
     const { theme } = useOrchestratorTheme();
     return (
         <EuiHorizontalRule
+            data-testid={pydanticFormField.id}
             style={{ marginTop: theme.base }}
             id={pydanticFormField.id}
         />

package/src/components/WfoPydanticForm/fields/{Integer.tsx → WfoInteger.tsx}

@@ -22,7 +22,7 @@ const getFormFieldsBaseStyle = ({ theme }: WfoTheme) => {
     };
 };
 
-export const Integer: PydanticFormControlledElement = ({
+export const WfoInteger: PydanticFormControlledElement = ({
     pydanticFormField,
     onChange,
     value,
@@ -34,6 +34,7 @@ export const Integer: PydanticFormControlledElement = ({
 
     return (
         <EuiFieldNumber
+            data-testid={pydanticFormField.id}
             css={formFieldBaseStyle}
             name={pydanticFormField.id}
             onChange={(event) => onChange(parseInt(event.target.value))}

package/src/components/WfoPydanticForm/fields/{Label.tsx → WfoLabel.tsx}

@@ -4,11 +4,11 @@ import { PydanticFormElement } from 'pydantic-forms';
 
 import { useOrchestratorTheme } from '@/hooks';
 
-export const Label: PydanticFormElement = ({ pydanticFormField }) => {
+export const WfoLabel: PydanticFormElement = ({ pydanticFormField }) => {
     const { theme } = useOrchestratorTheme();
 
     return (
-        <div>
+        <div data-testid={pydanticFormField.id}>
             <label
                 css={{
                     color: theme.colors.text,

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

@@ -22,8 +22,14 @@ export const WfoObjectField = ({
     );
 
     return (
-        <EuiFlexGroup css={wfoObjectFieldStyles}>
-            <RenderFields pydanticFormComponents={components} />
+        <EuiFlexGroup
+            data-testid={pydanticFormField.id}
+            css={wfoObjectFieldStyles}
+        >
+            <RenderFields
+                pydanticFormComponents={components}
+                idPrefix={pydanticFormField.id}
+            />
         </EuiFlexGroup>
     );
 };

package/src/components/WfoPydanticForm/fields/{Radio.tsx → WfoRadio.tsx}

@@ -4,7 +4,7 @@ import type { PydanticFormControlledElement } from 'pydantic-forms';
 
 import { EuiRadioGroup } from '@elastic/eui';
 
-export const Radio: PydanticFormControlledElement = ({
+export const WfoRadio: PydanticFormControlledElement = ({
     pydanticFormField,
     onChange,
     value,
@@ -17,6 +17,7 @@ export const Radio: PydanticFormControlledElement = ({
 
     return (
         <EuiRadioGroup
+            data-testid={pydanticFormField.id}
             options={radioOptions}
             idSelected={value}
             onChange={(id) => onChange(id)}

package/src/components/WfoPydanticForm/fields/{Summary.tsx → WfoSummary.tsx}

@@ -52,7 +52,7 @@ export const getStyles = ({ theme }: WfoTheme) => {
     };
 };
 
-export const Summary: PydanticFormElement = ({ pydanticFormField }) => {
+export const WfoSummary: PydanticFormElement = ({ pydanticFormField }) => {
     const { summaryFieldStyle } = useWithOrchestratorTheme(getStyles);
     const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
 
@@ -103,7 +103,7 @@ export const Summary: PydanticFormElement = ({ pydanticFormField }) => {
         );
 
     return (
-        <EuiFlexItem css={[summaryFieldStyle, formRowStyle]}>
+        <EuiFlexItem data-testid={id} css={[summaryFieldStyle, formRowStyle]}>
             <section>
                 <EuiFormRow
                     label={description}

package/src/components/WfoPydanticForm/fields/{Text.tsx → WfoText.tsx}

@@ -7,10 +7,11 @@ import { EuiFieldText } from '@elastic/eui';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { getFormFieldsBaseStyle } from '@/theme';
 
-export const Text: PydanticFormControlledElement = ({
+export const WfoText: PydanticFormControlledElement = ({
     onChange,
     value,
     disabled,
+    pydanticFormField,
 }) => {
     const { formFieldBaseStyle } = useWithOrchestratorTheme(
         getFormFieldsBaseStyle,
@@ -18,6 +19,7 @@ export const Text: PydanticFormControlledElement = ({
 
     return (
         <EuiFieldText
+            data-testid={pydanticFormField.id}
             css={formFieldBaseStyle}
             disabled={disabled}
             onChange={(event) => onChange(event.target.value)}

package/src/components/WfoPydanticForm/fields/{TextArea.tsx → WfoTextArea.tsx}

@@ -4,7 +4,7 @@ import type { PydanticFormControlledElement } from 'pydantic-forms';
 
 import { EuiTextArea } from '@elastic/eui';
 
-export const TextArea: PydanticFormControlledElement = ({
+export const WfoTextArea: PydanticFormControlledElement = ({
     pydanticFormField,
     onChange,
     value,
@@ -12,6 +12,7 @@ export const TextArea: PydanticFormControlledElement = ({
 }) => {
     return (
         <EuiTextArea
+            data-testid={pydanticFormField.id}
             disabled={disabled}
             name={pydanticFormField.id}
             onChange={(event) => onChange(event.target.value)}

package/src/components/WfoPydanticForm/fields/index.ts

@@ -1,10 +1,10 @@
-export * from './TextArea';
-export * from './Text';
-export * from './Label';
-export * from './Divider';
-export * from './Checkbox';
-export * from './Summary';
+export * from './WfoTextArea';
+export * from './WfoText';
+export * from './WfoLabel';
+export * from './WfoDivider';
+export * from './WfoCheckbox';
+export * from './WfoSummary';
 export * from './WfoObjectField';
 export * from './WfoArrayField';
-export * from './Radio';
-export * from './Integer';
+export * from './WfoRadio';
+export * from './WfoInteger';

package/src/components/WfoPydanticForm/index.ts

@@ -2,3 +2,4 @@ export * from './WfoPydanticForm';
 export * from './fields';
 export * from './Row';
 export * from './Footer';
+export * from './Header';

package/src/components/WfoStartButton/WfoStartTaskComboBox.tsx

@@ -24,6 +24,7 @@ export const WfoStartTaskButtonComboBox = () => {
                 workflowName: option.name,
             },
             label: option.description ?? option.name,
+            disabled: option.isAllowed === false,
         }))
         .sort((taskA, taskB) => taskA.label.localeCompare(taskB.label));
 

package/src/components/WfoStartButton/WfoStartWorkflowComboBox.tsx

@@ -28,6 +28,7 @@ export const WfoStartWorkflowButtonComboBox = () => {
                 productId: option.productId,
             },
             label: option.productName || '',
+            disabled: option.isAllowed === false,
         }));
 
     const handleOptionChange = async (selectedProduct: StartComboBoxOption) => {

package/src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx

@@ -15,6 +15,7 @@ import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { WfoChevronDown, WfoChevronUp } from '@/icons';
 import type { EmailState } from '@/types';
 import { StepStatus } from '@/types';
+import { FormUserPermissions } from '@/types/forms';
 import { calculateTimeDifference, formatDate } from '@/utils';
 
 import { WfoStepStatusIcon } from '../WfoStepStatusIcon';
@@ -26,11 +27,13 @@ import { WfoStepForm } from './WfoStepForm';
 export interface WfoStepProps {
     stepListItem: StepListItem;
     startedAt: string;
+    completedAt: string;
     showHiddenKeys: boolean;
     onToggleStepDetail: () => void;
     isTask: boolean;
     isStartStep?: boolean;
     processId?: string;
+    userPermissions: FormUserPermissions;
 }
 
 export const WfoStep = React.forwardRef(
@@ -39,10 +42,12 @@ export const WfoStep = React.forwardRef(
             stepListItem,
             onToggleStepDetail,
             startedAt,
+            completedAt,
             showHiddenKeys,
             isStartStep = false,
             isTask,
             processId,
+            userPermissions,
         }: WfoStepProps,
         ref: LegacyRef<HTMLDivElement>,
     ) => {
@@ -130,13 +135,13 @@ export const WfoStep = React.forwardRef(
                             </EuiText>
                             <EuiText>
                                 {step.status}{' '}
-                                {step.executed &&
-                                    `- ${formatDate(step.executed)}`}
+                                {step.completed &&
+                                    `- ${formatDate(step.completed)}`}
                             </EuiText>
                         </EuiFlexItem>
 
                         <EuiFlexGroup css={stepRowStyle}>
-                            {step.executed && (
+                            {step.completed && (
                                 <>
                                     {isExpanded && (
                                         <EuiButton
@@ -165,7 +170,7 @@ export const WfoStep = React.forwardRef(
                                         <EuiText size="m">
                                             {calculateTimeDifference(
                                                 startedAt,
-                                                step.executed,
+                                                completedAt,
                                             )}
                                         </EuiText>
                                     </EuiFlexItem>
@@ -209,6 +214,7 @@ export const WfoStep = React.forwardRef(
                             userInputForm={userInputForm}
                             isTask={isTask}
                             processId={processId}
+                            userPermissions={userPermissions}
                         />
                     )}
                 </EuiPanel>

package/src/components/WfoWorkflowSteps/WfoStep/WfoStepForm.tsx

@@ -6,18 +6,20 @@ import { UserInputFormWizard, WfoError, WfoLoading } from '@/components';
 import { useOrchestratorTheme } from '@/hooks';
 import { HttpStatus } from '@/rtk';
 import { useResumeProcessMutation } from '@/rtk/endpoints/forms';
-import { InputForm } from '@/types/forms';
+import { FormUserPermissions, InputForm } from '@/types/forms';
 
 interface WfoStepFormProps {
     userInputForm: InputForm;
     isTask: boolean;
     processId?: string;
+    userPermissions: FormUserPermissions;
 }
 
 export const WfoStepForm = ({
     userInputForm,
     isTask,
     processId,
+    userPermissions,
 }: WfoStepFormProps) => {
     const [isProcessing, setIsProcessing] = useState<boolean>(false);
     const [hasError, setHasError] = useState<boolean>(false);
@@ -57,6 +59,7 @@ export const WfoStepForm = ({
                     hasNext={false}
                     isTask={isTask}
                     isResuming={true}
+                    allowSubmit={userPermissions.resumeAllowed}
                 />
             )}
         </EuiFlexItem>

package/src/components/WfoWorkflowSteps/WfoStepList/WfoStepList.tsx

@@ -3,6 +3,7 @@ import React, { Ref, useImperativeHandle, useRef } from 'react';
 import { getPageTemplateStyles } from '@/components/WfoPageTemplate/WfoPageTemplate/styles';
 import { getTimelineStyles } from '@/components/WfoTimeline/styles';
 import { useContentRef, useWithOrchestratorTheme } from '@/hooks';
+import { FormUserPermissions } from '@/types/forms';
 
 import { WfoStep } from '../WfoStep';
 import { getWorkflowStepsStyles } from '../styles';
@@ -15,11 +16,11 @@ export type WfoStepListRef = {
 export type WfoStepListProps = {
     stepListItems: StepListItem[];
     showHiddenKeys: boolean;
-    startedAt: string;
     onToggleExpandStepListItem: (stepListItem: StepListItem) => void;
     onTriggerExpandStepListItem: (stepListItem: StepListItem) => void;
     isTask: boolean;
     processId: string;
+    userPermissions: FormUserPermissions;
 };
 
 export const WfoStepList = React.forwardRef(
@@ -27,11 +28,11 @@ export const WfoStepList = React.forwardRef(
         {
             stepListItems,
             showHiddenKeys,
-            startedAt,
             onToggleExpandStepListItem,
             onTriggerExpandStepListItem,
             isTask,
             processId,
+            userPermissions,
         }: WfoStepListProps,
         reference: Ref<WfoStepListRef>,
     ) => {
@@ -52,8 +53,6 @@ export const WfoStepList = React.forwardRef(
 
         const { contentRef } = useContentRef();
 
-        let stepStartTime = startedAt;
-
         useImperativeHandle(reference, () => ({
             scrollToStep: async (stepId: string) => {
                 // Applied a promise construction to wait for the browser to expand the step before scrolling
@@ -103,32 +102,27 @@ export const WfoStepList = React.forwardRef(
 
         return (
             <>
-                {stepListItems.map((stepListItem, index) => {
-                    const stepComponent = (
-                        <div key={`step-${index}`}>
-                            {index !== 0 && <div css={stepSpacerStyle} />}
-                            <WfoStep
-                                ref={getReferenceCallbackForStepId(
-                                    stepListItem.step.stepId,
-                                )}
-                                onToggleStepDetail={() =>
-                                    onToggleExpandStepListItem(stepListItem)
-                                }
-                                stepListItem={stepListItem}
-                                startedAt={stepStartTime}
-                                showHiddenKeys={showHiddenKeys}
-                                isStartStep={index === 0}
-                                isTask={isTask}
-                                processId={processId}
-                            />
-                        </div>
-                    );
-
-                    if (index > 0) {
-                        stepStartTime = stepListItem.step.executed;
-                    }
-                    return stepComponent;
-                })}
+                {stepListItems.map((stepListItem, index) => (
+                    <div key={`step-${index}`}>
+                        {index !== 0 && <div css={stepSpacerStyle} />}
+                        <WfoStep
+                            ref={getReferenceCallbackForStepId(
+                                stepListItem.step.stepId,
+                            )}
+                            onToggleStepDetail={() =>
+                                onToggleExpandStepListItem(stepListItem)
+                            }
+                            stepListItem={stepListItem}
+                            startedAt={stepListItem.step.started}
+                            completedAt={stepListItem.step.completed}
+                            showHiddenKeys={showHiddenKeys}
+                            isStartStep={index === 0}
+                            isTask={isTask}
+                            processId={processId}
+                            userPermissions={userPermissions}
+                        />
+                    </div>
+                ))}
             </>
         );
     },

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

@@ -13,7 +13,7 @@ import WfoDiff from '@/components/WfoDiff/WfoDiff';
 import { WfoTraceback } from '@/components/WfoWorkflowSteps/WfoTraceback/WfoTraceback';
 import { useGetRawProcessDetailQuery } from '@/rtk/endpoints/processDetail';
 import { ProcessStatus, Step, StepStatus } from '@/types';
-import { InputForm } from '@/types/forms';
+import { FormUserPermissions, InputForm } from '@/types/forms';
 
 export type StepListItem = {
     step: Step;
@@ -29,6 +29,7 @@ export interface WfoWorkflowStepListProps {
     processId: string;
     isTask: boolean;
     userInputForm?: InputForm;
+    userPermissions: FormUserPermissions;
 }
 
 export const WfoProcessRawData = ({ processId }: { processId: string }) => {
@@ -70,10 +71,10 @@ export const WfoWorkflowStepList = React.forwardRef(
             steps = [],
             lastStatus,
             traceBack,
-            startedAt,
             processId,
             isTask,
             userInputForm,
+            userPermissions,
         }: WfoWorkflowStepListProps,
         reference: Ref<WfoStepListRef>,
     ) => {
@@ -206,7 +207,6 @@ export const WfoWorkflowStepList = React.forwardRef(
                     <WfoStepList
                         ref={reference}
                         stepListItems={stepListItems}
-                        startedAt={startedAt}
                         showHiddenKeys={showHiddenKeys}
                         isTask={isTask}
                         onToggleExpandStepListItem={
@@ -214,6 +214,7 @@ export const WfoWorkflowStepList = React.forwardRef(
                         }
                         processId={processId}
                         onTriggerExpandStepListItem={handleExpandStepListItem}
+                        userPermissions={userPermissions}
                     />
                 )}
             </>

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.3.4';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.4.0';

package/src/messages/en-GB.json

@@ -317,7 +317,8 @@
                     "no_validate_workflow": "This subscription can not be validated as the product has no validate workflows.",
                     "not_in_sync": "This subscription can not be modified because it is not in-sync. This means there is some error in the registration of the subscription or that it is being modified by another workflow.",
                     "relations_not_in_sync": "This subscription can not be modified because some related subscriptions are not in-sync. Locked subscriptions: {locked_relations}",
-                    "no_modify_subscription_in_use_by_others": "This subscription can not be modified because it is in use by one or more other subscriptions: {unterminated_parents}"
+                    "no_modify_subscription_in_use_by_others": "This subscription can not be modified because it is in use by one or more other subscriptions: {unterminated_parents}",
+                    "insufficient_workflow_permissions": "Insufficient user permissions to run this workflow"
                 }
             },
             "subscriptionInstanceId": "Instance ID",

package/src/messages/nl-NL.json

@@ -314,7 +314,8 @@
                     "no_validate_workflow": "Deze subscription kan niet worden gevalideerd omdat het product geen validate workflows heeft.",
                     "not_in_sync": "Deze subscription kan niet worden gewijzigd omdat het niet in-sync is. Dit betekent dat er een fout zit in de registratie van de subscription of dat het wordt gewijzigd door een andere workflow.",
                     "relations_not_in_sync": "Deze subscription kan niet worden gewijzigd omdat sommige gerelateerde subscriptions niet in-sync zijn. Geblokkeerde subscriptions: {locked_relations}",
-                    "no_modify_subscription_in_use_by_others": "Deze subscription kan niet worden gewijzigd omdat het in gebruik is door een of meer andere subscriptions: {unterminated_parents}"
+                    "no_modify_subscription_in_use_by_others": "Deze subscription kan niet worden gewijzigd omdat het in gebruik is door een of meer andere subscriptions: {unterminated_parents}",
+                    "insufficient_workflow_permissions": "Onvoldoende rechten om deze actie uit te kunnen voeren"
                 }
             },
             "subscriptionInstanceId": "Instance ID",

package/src/pages/processes/WfoProcessDetail.tsx

@@ -122,6 +122,7 @@ export const WfoProcessDetail = ({
 
     const retryButtonIsDisabled =
         buttonsAreDisabled ||
+        processDetail?.userPermissions!.retryAllowed === false ||
         !listIncludesStatus(
             [
                 ProcessStatus.FAILED,

package/src/pages/processes/WfoProcessDetailPage.tsx

@@ -87,6 +87,7 @@ export const WfoProcessDetailPage = ({
                         userInputForm={processDetail.form}
                         startedAt={processDetail.startedAt}
                         isTask={isTask}
+                        userPermissions={processDetail.userPermissions}
                     />
                 )) || <h1>Invalid processId</h1>}
         </WfoProcessDetail>

package/src/pages/processes/timelineUtils.spec.ts

@@ -7,7 +7,8 @@ import {
 } from './timelineUtils';
 
 const baseStep: Step = {
-    executed: 'testExecuted',
+    started: 'testStarted',
+    completed: 'testCompleted',
     name: 'tesName',
     state: {
         testKey: 'testValue',

package/src/rtk/endpoints/processDetail.ts

@@ -26,12 +26,17 @@ export const processDetailQuery = `query ProcessDetail($processId: String!) {
                 isTask
                 form
                 traceback
+                userPermissions {
+                    retryAllowed
+                    resumeAllowed
+                }
                 steps {
                     name
                     status
                     stepId
-                    executed
                     stateDelta
+                    started
+                    completed
                 }
                 customer {
                     fullname

package/src/rtk/endpoints/startOptions.ts

@@ -12,6 +12,7 @@ const workflowOptionsQuery = `
         workflows(first: 1000000, after: 0, filterBy: [{ field: "target", value: "${WorkflowTarget.CREATE}"}]) {
             page {
                 name
+                isAllowed
                 products {
                     productType
                     productId
@@ -28,6 +29,7 @@ const taskOptionsQuery = `
         workflows(first: 1000000, after: 0, filterBy: [{ field: "isTask", value: "true"}]) {
             page {
                 name
+                isAllowed
                 description
             }
         }
@@ -36,6 +38,7 @@ const taskOptionsQuery = `
 
 type WorkflowOption = {
     workflowName: WorkflowDefinition['name'];
+    isAllowed: WorkflowDefinition['isAllowed'];
     productName: ProductDefinition['name'];
     productId: ProductDefinition['productId'];
     productType: ProductDefinition['productType'];
@@ -44,6 +47,7 @@ type WorkflowOption = {
 
 type WorkflowOptionsResult = StartOptionsResult<{
     name: WorkflowDefinition['name'];
+    isAllowed: WorkflowDefinition['isAllowed'];
     products: {
         name: ProductDefinition['name'];
         productId: ProductDefinition['productId'];
@@ -56,7 +60,10 @@ export type StartOptionsResponse<StartOption> = {
     startOptions: StartOption[];
 };
 
-type TaskOption = Pick<WorkflowDefinition, 'name' | 'description'>;
+type TaskOption = Pick<
+    WorkflowDefinition,
+    'name' | 'isAllowed' | 'description'
+>;
 type TaskOptionsResult = StartOptionsResult<TaskOption>;
 
 const startButtonOptionsApi = orchestratorApi.injectEndpoints({
@@ -78,6 +85,7 @@ const startButtonOptionsApi = orchestratorApi.injectEndpoints({
                     workflow.products.forEach((product) => {
                         startOptions.push({
                             workflowName,
+                            isAllowed: workflow.isAllowed,
                             productName: product.name,
                             productId: product.productId,
                             productType: product.productType,
@@ -97,6 +105,7 @@ const startButtonOptionsApi = orchestratorApi.injectEndpoints({
                 return {
                     startOptions: response.workflows.page.map((option) => ({
                         name: option.name,
+                        isAllowed: option.isAllowed,
                         description: option.description,
                     })),
                 };

package/src/types/forms.ts

@@ -37,3 +37,8 @@ export type FormValidationError = {
     data: ValidationErrorData;
     status: HttpStatus;
 };
+
+export interface FormUserPermissions {
+    retryAllowed: boolean;
+    resumeAllowed: boolean;
+}

package/src/types/types.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 
-import { InputForm } from './forms';
+import { FormUserPermissions, InputForm } from './forms';
 
 export type Nullable<T> = T | null;
 
@@ -198,6 +198,7 @@ export interface ProcessDetail {
     isTask: boolean;
     steps: Step[];
     traceback: string | null;
+    userPermissions: FormUserPermissions;
     subscriptions: {
         page: {
             product: Pick<ProductDefinition, 'name'>;
@@ -251,9 +252,10 @@ export interface Step {
     name: string;
     status: StepStatus;
     stepId: string; // sic backend
-    executed: string;
     state: StepState | undefined;
     stateDelta: StepState;
+    started: string;
+    completed: string;
 }
 
 export interface WorkflowDefinition {
@@ -262,6 +264,7 @@ export interface WorkflowDefinition {
     description: string;
     target: WorkflowTarget;
     isTask: boolean;
+    isAllowed: boolean;
     products: Pick<ProductDefinition, 'tag' | 'productId' | 'name'>[];
     createdAt: string;
 }
@@ -405,6 +408,7 @@ export type StartComboBoxOption = {
         productId?: string;
     };
     label: string;
+    disabled?: boolean;
 };
 
 export interface GraphQlResultPage<T> {

package/src/utils/getProductNamesFromProcess.spec.ts

@@ -12,12 +12,17 @@ const getProcessDetail = (data: Partial<ProcessDetail> = {}): ProcessDetail => {
         workflowName: 'workflowName',
         isTask: false,
         traceback: null,
+        userPermissions: {
+            retryAllowed: true,
+            resumeAllowed: true,
+        },
         steps: [
             {
                 name: 'step name',
                 status: StepStatus.RUNNING,
                 stepId: 'step id',
-                executed: 'executed',
+                started: 'started',
+                completed: 'completed',
                 state: {},
                 stateDelta: {},
             },