Merge pull request #91 from arenadata/feature/ADH-4865

feature/ADH-4865 create/reapeat rule/action dialog keep opent until s…
arenadata · Aug 15, 2024 · ef8f9ac · ef8f9ac
2 parents b15fa28 + 7a7a3ba
commit ef8f9ac
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 8 deletions.
diff --git a/smart-frontend/app/src/components/pages/ActionsPage/ActionsDialogs/ActionCreateDialog.tsx b/smart-frontend/app/src/components/pages/ActionsPage/ActionsDialogs/ActionCreateDialog.tsx
@@ -19,10 +19,12 @@ import React, { useEffect, useState } from 'react';
 import { useDispatch, useStore } from '@hooks';
 import { closeCreateActionDialog, createActionWithUpdate } from '@store/adh/actions/actionsActionsSlice';
 import { FooterDialog, MultilineInput } from '@uikit';
+import { SpinnerPanel } from '@uikit/Spinner/Spinner';
 
 const ActionCreateDialog: React.FC = () => {
   const dispatch = useDispatch();
   const isOpen = useStore(({ adh }) => adh.actionsActions.createDialog.isOpen);
+  const isActionInProgress = useStore(({ adh }) => adh.actionsActions.isActionInProgress);
 
   const [actionText, setActionText] = useState('');
 
@@ -53,7 +55,8 @@ const ActionCreateDialog: React.FC = () => {
       actionButtonLabel="Run"
       onAction={handleRun}
     >
-      <MultilineInput value={actionText} onChange={handleChange} />
+      <MultilineInput value={actionText} onChange={handleChange} disabled={isActionInProgress} />
+      {isActionInProgress && <SpinnerPanel />}
     </FooterDialog>
   );
 };

diff --git a/smart-frontend/app/src/components/pages/ActionsPage/ActionsDialogs/ActionRepeatDialog.tsx b/smart-frontend/app/src/components/pages/ActionsPage/ActionsDialogs/ActionRepeatDialog.tsx
@@ -19,10 +19,12 @@ import React, { useEffect, useState } from 'react';
 import { useDispatch, useStore } from '@hooks';
 import { closeUpdateActionDialog, repeatActionWithUpdate } from '@store/adh/actions/actionsActionsSlice';
 import { FooterDialog, MultilineInput } from '@uikit';
+import { SpinnerPanel } from '@uikit/Spinner/Spinner';
 
 const ActionRepeatDialog: React.FC = () => {
   const dispatch = useDispatch();
   const action = useStore(({ adh }) => adh.actionsActions.updateDialog.action);
+  const isActionInProgress = useStore(({ adh }) => adh.actionsActions.isActionInProgress);
   const isOpen = !!action;
 
   const [actionText, setActionText] = useState('');
@@ -59,6 +61,7 @@ const ActionRepeatDialog: React.FC = () => {
       onAction={handleRun}
     >
       <MultilineInput value={actionText} onChange={handleChange} />
+      {isActionInProgress && <SpinnerPanel />}
     </FooterDialog>
   );
 };

diff --git a/...app/src/components/pages/ActionsPage/ActionsTable/ActionActionsCell/ActionActionsCell.tsx b/...app/src/components/pages/ActionsPage/ActionsTable/ActionActionsCell/ActionActionsCell.tsx
@@ -36,7 +36,7 @@ const ActionActionsCell: React.FC<ActionActionsCellProps> = ({ action }) => {
   return (
     <TableCell align="center" data-qa="actions">
       <FlexGroup gap="4px">
-        <IconButton icon="refresh" title="Delete action" onClick={handleReset} data-qa="action-refresh" />
+        <IconButton icon="refresh" title="Repeat action" onClick={handleReset} data-qa="action-refresh" />
       </FlexGroup>
     </TableCell>
   );

diff --git a/smart-frontend/app/src/components/pages/RulesPage/RulesDialogs/RuleCreateDialog.tsx b/smart-frontend/app/src/components/pages/RulesPage/RulesDialogs/RuleCreateDialog.tsx
@@ -19,10 +19,12 @@ import React, { useEffect, useState } from 'react';
 import { useDispatch, useStore } from '@hooks';
 import { closeCreateRuleDialog, createRuleWithUpdate } from '@store/adh/rules/rulesActionsSlice';
 import { FooterDialog, MultilineInput } from '@uikit';
+import { SpinnerPanel } from '@uikit/Spinner/Spinner';
 
 const RuleCreateDialog: React.FC = () => {
   const dispatch = useDispatch();
   const isOpen = useStore(({ adh }) => adh.rulesActions.createDialog.isOpen);
+  const isActionInProgress = useStore(({ adh }) => adh.rulesActions.isActionInProgress);
 
   const [ruleText, setRuleText] = useState('');
 
@@ -53,7 +55,8 @@ const RuleCreateDialog: React.FC = () => {
       actionButtonLabel="Create"
       onAction={handleCreate}
     >
-      <MultilineInput value={ruleText} onChange={handleChange} />
+      <MultilineInput value={ruleText} onChange={handleChange} disabled={isActionInProgress} />
+      {isActionInProgress && <SpinnerPanel />}
     </FooterDialog>
   );
 };

diff --git a/smart-frontend/app/src/components/pages/RulesPage/RulesDialogs/RuleDeleteDialog.tsx b/smart-frontend/app/src/components/pages/RulesPage/RulesDialogs/RuleDeleteDialog.tsx
@@ -18,15 +18,15 @@
 import React from 'react';
 import { Dialog } from '@uikit';
 import { useDispatch, useStore } from '@hooks';
-import { closeCreateRuleDialog, deleteRuleWithUpdate } from '@store/adh/rules/rulesActionsSlice';
+import { closeDeleteRuleDialog, deleteRuleWithUpdate } from '@store/adh/rules/rulesActionsSlice';
 
 const RuleDeleteDialog: React.FC = () => {
   const dispatch = useDispatch();
   const rule = useStore(({ adh }) => adh.rulesActions.deleteDialog.rule);
   const isOpen = !!rule;
 
   const closeDialog = () => {
-    dispatch(closeCreateRuleDialog());
+    dispatch(closeDeleteRuleDialog());
   };
   const handleDelete = () => {
     if (rule) {

diff --git a/smart-frontend/app/src/store/adh/actions/actionsActionsSlice.ts b/smart-frontend/app/src/store/adh/actions/actionsActionsSlice.ts
@@ -27,10 +27,10 @@ import { AdhActionsApi } from '@api';
 
 const createAction = createAsyncThunk('adh/actionsActions/createAction', async (text: string, thunkAPI) => {
   thunkAPI.dispatch(setIsActionInProgress(true));
-  thunkAPI.dispatch(closeCreateActionDialog());
   try {
     await AdhActionsApi.createAction(text);
     thunkAPI.dispatch(showSuccess({ message: 'New action was performed successfully' }));
+    thunkAPI.dispatch(closeCreateActionDialog());
   } catch (error) {
     thunkAPI.dispatch(showError({ message: getErrorMessage(error as RequestError) }));
     return thunkAPI.rejectWithValue(error);
@@ -41,11 +41,11 @@ const createAction = createAsyncThunk('adh/actionsActions/createAction', async (
 
 const repeatAction = createAsyncThunk('adh/actionsActions/repeatAction', async (text: string, thunkAPI) => {
   thunkAPI.dispatch(setIsActionInProgress(true));
-  thunkAPI.dispatch(closeUpdateActionDialog());
   try {
     // in really, repeat action is recreate new action
     await AdhActionsApi.createAction(text);
     thunkAPI.dispatch(showSuccess({ message: 'Action was repeated successfully' }));
+    thunkAPI.dispatch(closeUpdateActionDialog());
   } catch (error) {
     thunkAPI.dispatch(showError({ message: getErrorMessage(error as RequestError) }));
     return thunkAPI.rejectWithValue(error);

diff --git a/smart-frontend/app/src/store/adh/rules/rulesActionsSlice.ts b/smart-frontend/app/src/store/adh/rules/rulesActionsSlice.ts
@@ -29,9 +29,9 @@ import type { PayloadAction } from '@reduxjs/toolkit';
 
 const createRule = createAsyncThunk('adh/rulesActions/createRule', async (text: string, thunkAPI) => {
   thunkAPI.dispatch(setIsActionInProgress(true));
-  thunkAPI.dispatch(closeCreateRuleDialog());
   try {
     await AdhRulesApi.createRule(text);
+    thunkAPI.dispatch(closeCreateRuleDialog());
     thunkAPI.dispatch(showSuccess({ message: 'New rule was created and applied successfully' }));
   } catch (error) {
     thunkAPI.dispatch(showError({ message: getErrorMessage(error as RequestError) }));