Management of rule action groups (#680)

src/components/AppRouter.tsx

@@ -112,10 +112,14 @@ import ConditionGroupDetails from './_pages/condition-groups/details';
 import ConditionGroupForm from './_pages/condition-groups/form';
 import ConditionGroupsList from './_pages/condition-groups/list';
 
+import ActionGroupForm from './_pages/action-groups/form';
+import ActionGroupsList from './_pages/action-groups/list';
+
+import RuleDetails from './_pages/rules/detail';
 import RulesForm from './_pages/rules/form';
 import RulesList from './_pages/rules/list';
 
-import RuleDetails from './_pages/rules/detail';
+import ActionGroupsDetails from './_pages/action-groups/details';
 import SchedulerJobDetail from './_pages/scheduler/detail';
 import SchedulerJobsList from './_pages/scheduler/list';
 import Layout from './Layout';
@@ -332,6 +336,12 @@ export default function AppRouter() {
                     <Route path={`/rules/add`} element={<RulesForm />} />
                     <Route path={`/rules`} 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={`/approvals`} element={<ApprovalsList />} />
                 </Route>
 
                 {/*

src/components/ConditionFormFilter/index.tsx

@@ -1,6 +1,8 @@
 import { ApiClients } from 'api';
 import cx from 'classnames';
 import FilterWidget from 'components/FilterWidget';
+import FilterWidgetRuleAction from 'components/FilterWidgetRuleAction';
+import { ActionGroupFormValues } from 'components/_pages/action-groups/form';
 import { EntityType, actions as filterActions } from 'ducks/filters';
 import { actions as rulesActions, selectors as rulesSelectors } from 'ducks/rules';
 import { useEffect, useMemo, useState } from 'react';
@@ -11,8 +13,7 @@ import { Resource } from 'types/openapi';
 import { conditionGroupToFilter, filterToConditionGroup } from 'utils/rules';
 import { ConditionGroupFormValues } from '../_pages/condition-groups/form';
 import styles from './conditionGroupForm.module.scss';
-type FormType = 'rules' | 'conditionGroup';
-
+type FormType = 'rules' | 'conditionGroup' | 'actionGroup';
 interface ConditionGroupFormFilterProps {
     resource: Resource;
     formType: FormType;
@@ -24,6 +25,7 @@ const ConditionFormFilter = ({ resource, formType }: ConditionGroupFormFilterPro
     const [hasEffectRun, setHasEffectRun] = useState(false);
 
     const form = useForm<ConditionGroupFormValues>();
+    const actionGroupForm = useForm<ActionGroupFormValues>();
     const conditionGroupsDetails = useSelector(rulesSelectors.conditionGroupDetails);
     const ruleDetails = useSelector(rulesSelectors.ruleDetails);
 
@@ -33,9 +35,15 @@ const ConditionFormFilter = ({ resource, formType }: ConditionGroupFormFilterPro
         if (!id) return;
         if (formType === 'rules') {
             dispatch(rulesActions.getRule({ ruleUuid: id }));
-        } else {
+        }
+
+        if (formType === 'conditionGroup') {
             dispatch(rulesActions.getConditionGroup({ conditionGroupUuid: id }));
         }
+
+        if (formType === 'actionGroup') {
+            dispatch(rulesActions.getActionGroup({ actionGroupUuid: id }));
+        }
     }, [id, dispatch, formType]);
 
     useEffect(() => {
@@ -62,7 +70,23 @@ const ConditionFormFilter = ({ resource, formType }: ConditionGroupFormFilterPro
         };
     }, [dispatch]);
     const renderFilterWidget = useMemo(() => {
-        return (
+        return formType === 'actionGroup' ? (
+            <div className={cx({ [styles.disabled]: resource === Resource.None })}>
+                <FilterWidgetRuleAction
+                    entity={EntityType.ACTIONS}
+                    title={'Actions'}
+                    getAvailableFiltersApi={(apiClients: ApiClients) =>
+                        apiClients.resources.listResourceRuleFilterFields({
+                            resource,
+                            settable: true,
+                        })
+                    }
+                    onActionsUpdate={(currentActions) => {
+                        actionGroupForm.change('actions', currentActions);
+                    }}
+                />
+            </div>
+        ) : (
             <div className={cx({ [styles.disabled]: resource === Resource.None })}>
                 <FilterWidget
                     entity={EntityType.CONDITIONS}
@@ -79,7 +103,7 @@ const ConditionFormFilter = ({ resource, formType }: ConditionGroupFormFilterPro
                 />
             </div>
         );
-    }, [resource, form]);
+    }, [resource, form, formType, actionGroupForm]);
 
     return (
         <>

src/components/ConditionsViewer/index.tsx

@@ -1,14 +1,15 @@
 import { ApiClients } from 'api';
 import ConditionsGroupsList from 'components/ConditionGroupsList';
 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, filterToConditionGroup } from 'utils/rules';
-type FormType = 'rules' | 'conditionGroup';
+type FormType = 'rules' | 'conditionGroup' | 'actionGroup';
 
 interface ConditionGroupFormFilterProps {
     resource: Resource;
@@ -21,6 +22,7 @@ const ConditionsViewer = ({ resource, formType }: ConditionGroupFormFilterProps)
 
     const conditionGroupsDetails = useSelector(rulesSelectors.conditionGroupDetails);
     const ruleDetails = useSelector(rulesSelectors.ruleDetails);
+    const actionGroupDetails = useSelector(rulesSelectors.actionGroupDetails);
 
     const [hasEffectRun, setHasEffectRun] = useState(false);
 
@@ -39,7 +41,11 @@ const ConditionsViewer = ({ resource, formType }: ConditionGroupFormFilterProps)
         if (formType === 'conditionGroup' && id !== conditionGroupsDetails?.uuid) {
             dispatch(rulesActions.getConditionGroup({ conditionGroupUuid: id }));
         }
-    }, [id, dispatch, formType, ruleDetails, conditionGroupsDetails]);
+
+        if (formType === 'actionGroup' && id !== actionGroupDetails?.uuid) {
+            dispatch(rulesActions.getActionGroup({ actionGroupUuid: id }));
+        }
+    }, [id, dispatch, formType, ruleDetails?.uuid, conditionGroupsDetails?.uuid, actionGroupDetails?.uuid]);
 
     useEffect(() => {
         if (!hasEffectRun && editMode && id) {
@@ -132,16 +138,49 @@ const ConditionsViewer = ({ resource, formType }: ConditionGroupFormFilterProps)
         );
     }, [resource, dispatch, formType, id, conditionGroupsDetails]);
 
+    const renderFilterWidgetForActionGroup = useMemo(() => {
+        if (formType !== 'actionGroup' || !id || !actionGroupDetails) return null;
+
+        return (
+            <div>
+                <FilterWidgetRuleAction
+                    entity={EntityType.ACTIONS}
+                    title={'Actions'}
+                    getAvailableFiltersApi={(apiClients: ApiClients) =>
+                        apiClients.resources.listResourceRuleFilterFields({
+                            resource,
+                            settable: true,
+                        })
+                    }
+                    actionsList={actionGroupDetails.actions}
+                    onActionsUpdate={(currentActions) => {
+                        dispatch(
+                            rulesActions.updateActionGroup({
+                                actionGroupUuid: id,
+                                actionGroup: {
+                                    actions: currentActions,
+                                },
+                            }),
+                        );
+                    }}
+                />
+            </div>
+        );
+    }, [resource, dispatch, formType, id, actionGroupDetails]);
+
     const renderWidgetConditionViewer = useMemo(() => {
         switch (formType) {
             case 'conditionGroup':
                 return renderFilterWidgetForConditionGroups;
             case 'rules':
                 return renderFilterWidgetForRules;
+
+            case 'actionGroup':
+                return renderFilterWidgetForActionGroup;
             default:
                 return null;
         }
-    }, [formType, renderFilterWidgetForConditionGroups, renderFilterWidgetForRules]);
+    }, [formType, renderFilterWidgetForConditionGroups, renderFilterWidgetForRules, renderFilterWidgetForActionGroup]);
 
     return <div>{renderWidgetConditionViewer}</div>;
 };

src/components/FilterWidgetRuleAction/FilterWidgetRuleAction.module.scss

@@ -0,0 +1,27 @@
+.filterBadge {
+    border: 1px solid rgb(78, 78, 78) !important;
+    font-weight: 500;
+    margin-right: 5px;
+    margin-bottom: 5px;
+    padding: 5px 5px;
+    cursor: pointer;
+}
+
+.filterBadge:hover {
+    box-shadow: 0 0 5px #b5bdc5;
+}
+
+.filterBadgeSpan {
+    cursor: pointer;
+    font-size: medium;
+    color: #b5bdc5;
+    padding-left: 5px;
+    padding-right: 2px;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.filterBadgeSpan:hover {
+    color: red;
+    font-weight: 700;
+}