Update of workflows UI for triggers, rules and actions

cypress/component/Attributes/AttributeEditor/mock-data.tsx

@@ -111,7 +111,6 @@ export const customAttributeEditorMockData: AttributeEditorProps = {
             content: [
                 {
                     data: {
-                        // code: 'PGgxPk9EUE9WRcSOPC9oMT4KPGRpdj5Qb8SNw610YW1lIGtvxL5rbyBjZXJ0aWZpa8OhdG92IHR1IGplLjwvZGl2PgoKPHVsPgogIDxsaT5TdWJqZWN0OiAke25vdGlmaWNhdGlvbkRhdGEuc3ViamVjdERufTwvbGk+CiAgPGxpPlNlcmlhbCBOdW1iZXI6ICR7bm90aWZpY2F0aW9uRGF0YS5zZXJpYWxOdW1iZXJ9PC9saT4KICA8bGk+SXNzdWVyOiAke25vdGlmaWNhdGlvbkRhdGEuaXNzdWVyRG59PC9saT4KPC91bD4=',
                         code: '',
                         language: ProgrammingLanguageEnum.Html,
                     },
@@ -133,11 +132,6 @@ export const customAttributeEditorMockData: AttributeEditorProps = {
                 list: false,
                 multiSelect: false,
             },
-            // content: [
-            //     {
-            //         data: '1.1',
-            //     },
-            // ],
         },
         {
             uuid: 'test-uuid-7',

cypress/component/Attributes/AttributeViewer/AttributeViewer.cy.tsx

@@ -151,7 +151,6 @@ describe('AttributeViewer with Metadata', () => {
 
     it(`should check if source object table is opened in modal`, () => {
         cy.get('.fa-caret-down').eq(0).click().wait(clickWait);
-        // cy.get('.fa-arrow-up').eq(1).click().wait(clickWait);
         cy.get('.fa-info').eq(0).click().wait(clickWait);
 
         cy.get('.modal-content').should('be.visible');

cypress/component/_pages/users/form/mock-data.ts

@@ -196,9 +196,7 @@ const userFormMockData = {
                     uuid: 'uuid-1234-text-custom-attribute',
                     name: 'Text Me',
                     label: 'Text Me',
-                    // type: 'custom',
                     type: AttributeType.Custom,
-                    // contentType: 'text',
                     contentType: AttributeContentType.Text,
                     content: [
                         {
@@ -211,7 +209,6 @@ const userFormMockData = {
                     name: 'SomeCustom',
                     label: 'SomeCustom',
                     type: AttributeType.Custom,
-                    // contentType: 'integer',
                     contentType: AttributeContentType.Integer,
 
                     content: [
@@ -225,7 +222,6 @@ const userFormMockData = {
                     name: 'DepartmentAssociation',
                     label: 'Department',
                     type: AttributeType.Custom,
-                    // contentType: 'string',
                     contentType: AttributeContentType.String,
                     content: [
                         {
@@ -299,7 +295,6 @@ const userFormMockData = {
                     name: 'Test Date',
                     label: 'Test Date',
                     type: AttributeType.Custom,
-                    // contentType: 'date',
                     contentType: AttributeContentType.Date,
                     content: [
                         {

cypress/support/commands.tsx

@@ -29,14 +29,3 @@ Cypress.Commands.add('mount', (component, options = {}, initialRoute = '/') => {
 
     return mount(wrapped, mountOptions);
 });
-
-// Cypress.Commands.add("mount", mount);
-
-// Cypress.Commands.add('mountWithRouter', (component, route) => {
-//     // Mount the component with the Router context
-//     cy.mount(component, {}, route);
-// });
-
-// Cypress.Commands.add('dataCy', (value) => {
-//     return cy.get(`[data-cy=${value}]`);
-// });

src/api.ts

@@ -27,13 +27,15 @@ import {
     RAProfileManagementApi,
     ResourceManagementApi,
     RoleManagementApi,
-    RulesManagementApi,
     SCEPProfileManagementApi,
     ScheduledJobsManagementApi,
     SettingsApi,
     StatisticsDashboardApi,
     TokenProfileManagementApi,
     UserManagementApi,
+    WorkflowActionsManagementApi,
+    WorkflowRulesManagementApi,
+    WorkflowTriggersManagementApi,
 } from 'types/openapi';
 import { TokenInstanceControllerApi } from 'types/openapi/apis/TokenInstanceControllerApi';
 import {
@@ -51,7 +53,10 @@ export interface ApiClients {
     auth: AuthenticationManagementApi;
     users: UserManagementApi;
     roles: RoleManagementApi;
-    rules: RulesManagementApi;
+    // rules: RulesManagementApi;
+    actions: WorkflowActionsManagementApi;
+    rules: WorkflowRulesManagementApi;
+    triggers: WorkflowTriggersManagementApi;
     auditLogs: AuditLogApi;
     raProfiles: RAProfileManagementApi;
     credentials: CredentialManagementApi;
@@ -93,7 +98,10 @@ export const backendClient: ApiClients = {
     auth: new AuthenticationManagementApi(configuration),
     users: new UserManagementApi(configuration),
     roles: new RoleManagementApi(configuration),
-    rules: new RulesManagementApi(configuration),
+    // rules: new RulesManagementApi(configuration),
+    actions: new WorkflowActionsManagementApi(configuration),
+    rules: new WorkflowRulesManagementApi(configuration),
+    triggers: new WorkflowTriggersManagementApi(configuration),
     certificates: new CertificateInventoryApi(configuration),
     auditLogs: new AuditLogApi(configuration),
     raProfiles: new RAProfileManagementApi(configuration),

src/components/AppRouter.tsx

@@ -108,12 +108,15 @@ import NotificationInstanceDetail from './_pages/notifications/notification-inst
 import NotificationInstanceForm from './_pages/notifications/notification-instance-form';
 import NotificationsSetting from './_pages/notifications/notifications-setting';
 
-import ConditionGroupDetails from './_pages/condition-groups/details';
-import ConditionGroupForm from './_pages/condition-groups/form';
-import ConditionGroupsList from './_pages/condition-groups/list';
+import ConditionDetails from './_pages/conditions/details';
+import ConditionForm from './_pages/conditions/form';
 
-import ActionGroupForm from './_pages/action-groups/form';
-import ActionGroupsList from './_pages/action-groups/list';
+import ExecutionDetails from './_pages/executions/details';
+import ExecutionForm from './_pages/executions/form';
+
+import ActionDetails from './_pages/actions/detail';
+import ActionForm from './_pages/actions/form';
+import ActionsList from './_pages/actions/list';
 
 import TriggerDetails from './_pages/triggers/details';
 import TriggerForm from './_pages/triggers/form';
@@ -123,7 +126,6 @@ import RuleDetails from './_pages/rules/detail';
 import RulesForm from './_pages/rules/form';
 import RulesList from './_pages/rules/list';
 
-import ActionGroupsDetails from './_pages/action-groups/details';
 import SchedulerJobDetail from './_pages/scheduler/detail';
 import SchedulerJobsList from './_pages/scheduler/list';
 import Layout from './Layout';
@@ -333,17 +335,19 @@ export default function AppRouter() {
                     <Route path={`/notificationinstances/add`} element={<NotificationInstanceForm />} />
                     <Route path={`/notificationinstances/edit/:id`} element={<NotificationInstanceForm />} />
 
-                    <Route path={`/conditiongroups`} element={<ConditionGroupsList />} />
-                    <Route path={`/conditiongroups/add`} element={<ConditionGroupForm />} />
-                    <Route path={`/conditiongroups/detail/:id`} element={<ConditionGroupDetails />} />
+                    <Route path={`/conditions/add`} element={<ConditionForm />} />
+                    <Route path={`/conditions/detail/:id`} element={<ConditionDetails />} />
 
                     <Route path={`/rules/add`} element={<RulesForm />} />
-                    <Route path={`/rules`} element={<RulesList />} />
+                    <Route path={`/rules/:tabIndex?`} element={<RulesList />} />
                     <Route path={`/rules/detail/:id`} element={<RuleDetails />} />
 
-                    <Route path={`/actionGroups/add`} element={<ActionGroupForm />} />
-                    <Route path={`/actionGroups`} element={<ActionGroupsList />} />
-                    <Route path={`/actionGroups/detail/:id`} element={<ActionGroupsDetails />} />
+                    <Route path={`/executions/add`} element={<ExecutionForm />} />
+                    <Route path={`/executions/detail/:id`} element={<ExecutionDetails />} />
+
+                    <Route path={`/actions/add`} element={<ActionForm />} />
+                    <Route path={`/actions/:tabIndex?`} element={<ActionsList />} />
+                    <Route path={`/actions/detail/:id`} element={<ActionDetails />} />
 
                     <Route path={`/triggers/add`} element={<TriggerForm />} />
                     <Route path={`/triggers`} element={<TriggerList />} />

src/components/ConditionAndExecutionItemsViewer/index.tsx

@@ -0,0 +1,157 @@
+import { ApiClients } from 'api';
+import FilterWidget from 'components/FilterWidget';
+import FilterWidgetRuleAction from 'components/FilterWidgetRuleAction';
+import { EntityType, actions as filterActions } from 'ducks/filters';
+import { actions as rulesActions, selectors as rulesSelectors } from 'ducks/rules';
+import { useEffect, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { Resource } from 'types/openapi';
+import { conditionGroupToFilter, filterToConditionItems } from 'utils/rules';
+type FormType = 'condtionItems' | 'executionItems';
+
+interface ConditionGroupFormFilterProps {
+    resource: Resource;
+    formType: FormType;
+}
+
+const ConditionAndExecutionItemsViewer = ({ resource, formType }: ConditionGroupFormFilterProps) => {
+    const { id } = useParams();
+    const editMode = useMemo(() => !!id, [id]);
+
+    const conditionDetails = useSelector(rulesSelectors.conditionDetails);
+    const isFetchingConditionDetails = useSelector(rulesSelectors.isFetchingConditionDetails);
+    const isUpdatingCondition = useSelector(rulesSelectors.isUpdatingCondition);
+
+    const executionDetails = useSelector(rulesSelectors.executionDetails);
+    const isFetchingExecutionDetails = useSelector(rulesSelectors.isFetchingExecutionDetails);
+    const isUpdatingExecution = useSelector(rulesSelectors.isUpdatingExecution);
+
+    const [hasEffectRun, setHasEffectRun] = useState(false);
+
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        dispatch(filterActions.setCurrentFilters({ currentFilters: [], entity: EntityType.CONDITIONS }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+        if (!id) return;
+
+        if (formType === 'condtionItems' && id !== conditionDetails?.uuid) {
+            dispatch(rulesActions.getCondition({ conditionUuid: id }));
+        }
+
+        if (formType === 'executionItems' && id !== executionDetails?.uuid) {
+            dispatch(rulesActions.getExecution({ executionUuid: id }));
+        }
+    }, [id, dispatch, formType, conditionDetails?.uuid, executionDetails?.uuid]);
+
+    useEffect(() => {
+        if (!hasEffectRun && editMode && id) {
+            if (formType == 'condtionItems') {
+                if (conditionDetails?.uuid !== id) return;
+                const currentConditions = conditionDetails?.items || [];
+
+                const currentFilters = conditionGroupToFilter(currentConditions);
+                setHasEffectRun(true);
+                dispatch(filterActions.setCurrentFilters({ currentFilters: currentFilters, entity: EntityType.CONDITIONS }));
+            }
+        }
+    }, [editMode, conditionDetails, hasEffectRun, dispatch, formType, id]);
+
+    useEffect(() => {
+        return () => {
+            dispatch(filterActions.setCurrentFilters({ currentFilters: [], entity: EntityType.CONDITIONS }));
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const renderFilterWidgetForConditionItems = useMemo(() => {
+        if (formType !== 'condtionItems' || !id || !conditionDetails) return null;
+        const disableBadgeRemove = conditionDetails.items.length === 1 || isFetchingConditionDetails || isUpdatingCondition;
+        const isBusy = isFetchingConditionDetails || isUpdatingCondition;
+        return (
+            <div>
+                <FilterWidget
+                    busyBadges={isBusy}
+                    entity={EntityType.CONDITIONS}
+                    title={'Conditions'}
+                    getAvailableFiltersApi={(apiClients: ApiClients) =>
+                        apiClients.resources.listResourceRuleFilterFields({
+                            resource,
+                        })
+                    }
+                    disableBadgeRemove={disableBadgeRemove}
+                    onFilterUpdate={(currentFilters) => {
+                        const currentCondition = filterToConditionItems(currentFilters);
+                        dispatch(
+                            rulesActions.updateCondition({
+                                conditionUuid: id,
+                                condition: {
+                                    items: currentCondition,
+                                    description: conditionDetails.description || '',
+                                },
+                            }),
+                        );
+                    }}
+                />
+            </div>
+        );
+    }, [resource, dispatch, formType, id, conditionDetails, isFetchingConditionDetails, isUpdatingCondition]);
+
+    const renderFilterWidgetForExecutionItems = useMemo(() => {
+        if (formType !== 'executionItems' || !id || !executionDetails) return null;
+        const disableBadgeRemove = executionDetails.items.length === 1 || isFetchingExecutionDetails || isUpdatingExecution;
+
+        const isBusy = isFetchingExecutionDetails || isUpdatingExecution;
+        return (
+            <div>
+                {
+                    <FilterWidgetRuleAction
+                        entity={EntityType.ACTIONS}
+                        title={'Actions'}
+                        busyBadges={isBusy}
+                        disableBadgeRemove={disableBadgeRemove}
+                        getAvailableFiltersApi={(apiClients: ApiClients) =>
+                            apiClients.resources.listResourceRuleFilterFields({
+                                resource,
+                                settable: true,
+                            })
+                        }
+                        ExecutionsList={executionDetails.items}
+                        onActionsUpdate={(currentExecutionItems) => {
+                            dispatch(
+                                rulesActions.updateExecution({
+                                    executionUuid: id,
+                                    execution: {
+                                        items: currentExecutionItems,
+                                        description: executionDetails.description,
+                                    },
+                                }),
+                            );
+                        }}
+                    />
+                }
+            </div>
+        );
+    }, [resource, dispatch, formType, id, executionDetails, isFetchingExecutionDetails, isUpdatingExecution]);
+
+    const renderWidgetConditionViewer = useMemo(() => {
+        switch (formType) {
+            case 'condtionItems':
+                return renderFilterWidgetForConditionItems;
+
+            case 'executionItems':
+                return renderFilterWidgetForExecutionItems;
+
+            default:
+                return null;
+        }
+    }, [formType, renderFilterWidgetForConditionItems, renderFilterWidgetForExecutionItems]);
+
+    return <div>{renderWidgetConditionViewer}</div>;
+};
+
+export default ConditionAndExecutionItemsViewer;