Add cancel workflow

Add update workflow status on Manage page
Add store changes
Code refactoring

Author: astleyz

client/src/App.jsx

@@ -5,9 +5,9 @@ import Hero from './pages/Hero/Hero.jsx';
 import HomeAuthenticated from './pages/Home/Home.jsx';
 import ManageWorkflowAuthenticated from './pages/ManageWorkflow/ManageWorkflow.jsx';
 import TriggerWorkflowAuthenticated from './pages/TriggerWorkflow/TriggerWorkflow.jsx';
+import TriggerWorkflowFormAuthenticated from './pages/TriggerWorkflowForm/TriggerWorkflowForm.jsx';
 import { LoginStatus, ROUTE } from './constants.js';
 import { api } from './api';
-import TriggerWorkflowFormAuthenticated from './pages/TriggerWorkflowForm/TriggerWorkflowForm.jsx';
 
 function App() {
   const location = useLocation();
@@ -19,10 +19,10 @@ function App() {
   useEffect(() => {
     const fetchCallback = async () => {
       if (code && code.length > 0) {
-        const res = await api.acg.callbackExecute(code);
+        const { data: userInfo } = await api.acg.callbackExecute(code);
         dispatch({
           type: 'LOGIN',
-          payload: { authType: LoginStatus.ACG, userName: res.data.name, userEmail: res.data.email },
+          payload: { authType: LoginStatus.ACG, userName: userInfo.name, userEmail: userInfo.email },
         });
         navigate(ROUTE.HOME);
         dispatch({ type: 'CLOSE_POPUP' });
@@ -39,7 +39,7 @@ function App() {
       <Route path={ROUTE.HOME} element={<HomeAuthenticated />} />
       <Route path={ROUTE.TRIGGER} element={<TriggerWorkflowAuthenticated />} />
       <Route path={ROUTE.MANAGE} element={<ManageWorkflowAuthenticated />} />
-      <Route path={`${ROUTE.TRIGGERFORM}/:definitionId`} element={<TriggerWorkflowFormAuthenticated />} />
+      <Route path={`${ROUTE.TRIGGERFORM}/:workflowId`} element={<TriggerWorkflowFormAuthenticated />} />
     </Routes>
   );
 }

client/src/api/index.js

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { store } from '../store/store';
+import { persistor, store } from '../store/store';
 
 const apiUrl = process.env.BACKEND_API;
 
@@ -22,22 +22,23 @@ export const api = Object.freeze({
   jwt: {
     // Login by JSON Web Token
     login: async () => {
-      const res = await instance.get('/auth/jwt/login');
+      const response = await instance.get('/auth/jwt/login');
       // If user has never logged in before, redirect to consent screen
-      if (res.status === 210) {
-        window.location = res.data;
+      if (response.status === 210) {
+        window.location = response.data;
         return;
       }
 
-      return res;
+      return response;
     },
     logout: async () => {
       await instance.get('/auth/jwt/logout');
+      await persistor.purge();
       localStorage.clear();
     },
     loginStatus: async () => {
-      const res = await instance.get('/auth/jwt/login-status');
-      return JSON.parse(res.data); // response boolean
+      const response = await instance.get('/auth/jwt/login-status');
+      return JSON.parse(response.data); // response boolean
     },
   },
   acg: {
@@ -48,23 +49,23 @@ export const api = Object.freeze({
     },
     logout: async () => {
       await instance.get('/auth/passport/logout');
+      await persistor.purge();
       localStorage.clear();
     },
     callbackExecute: async code => {
-      const res = await instance.get(`/auth/passport/callback?code=${code}`);
-      return res;
+      const response = await instance.get(`/auth/passport/callback?code=${code}`);
+      return response;
     },
     loginStatus: async () => {
-      const res = await instance.get('/auth/passport/login-status');
-      return JSON.parse(res.data); // response boolean
+      const response = await instance.get('/auth/passport/login-status');
+      return JSON.parse(response.data); // response boolean
     },
   },
   workflows: {
-    // YES
     createWorkflowDefinition: async templateType => {
       try {
-        const res = await instance.post('/workflows/create', { templateType: templateType });
-        return res;
+        const response = await instance.post('/workflows/create', { templateType: templateType });
+        return response;
       } catch (error) {
         if (error.response && error.response.status === 400) {
           return error.response;
@@ -74,22 +75,18 @@ export const api = Object.freeze({
     },
     cancelWorkflowInstance: async workflow => {
       try {
-        const res = await instance.put(`/workflows/${workflow.definitionId}/instances/${workflow.dacId}/cancel`);
-        return res;
+        const response = await instance.put(`/workflows/${workflow.id}/instances/${workflow.instanceId}/cancel`);
+        return response;
       } catch (error) {
-        if (error.response && error.response.status === 400) {
-          return error.response;
-        }
-        throw error;
+        console.log(error);
       }
     },
-    // YES
     publishWorkflow: async workflowId => {
-      const res = await instance.post('/workflows/publish', { workflowId });
+      const response = await instance.post('/workflows/publish', { workflowId });
 
-      if (res.status === 210) {
+      if (response.status === 210) {
         try {
-          window.open(res.data, 'newTab', 'width=800,height=600');
+          window.open(response.data, 'newTab', 'width=800,height=600');
           await new Promise(r => setTimeout(r, 3000));
 
           const published = await instance.post('/workflows/publish', { workflowId });
@@ -99,32 +96,28 @@ export const api = Object.freeze({
         }
       }
 
-      return res;
+      return response;
     },
-    // YES
     triggerWorkflow: async (workflowId, body) => {
       try {
-        const res = await instance.put(`/workflows/${workflowId}/trigger`, body);
-        return res;
+        const response = await instance.put(`/workflows/${workflowId}/trigger`, body);
+        return response;
       } catch (error) {
         console.log(error);
       }
     },
-    // YES
     getWorkflowDefinitions: async () => {
-      const res = await instance.get(`/workflows/definitions`);
-      return res;
+      const response = await instance.get(`/workflows/definitions`);
+      return response;
     },
     getWorkflowInstance: async workflow => {
-      const res = await instance.get(`/workflows/${workflow.definitionId}/instances/${workflow.dacId}`);
-      return res;
+      const response = await instance.get(`/workflows/${workflow.id}/instances/${workflow.instanceId}`);
+      return response;
     },
-    // YES
-    getWorkflowInstances: async definitionId => {
-      const res = await instance.get(`/workflows/${definitionId}/instances`);
-      return res;
+    getWorkflowInstances: async workflowId => {
+      const response = await instance.get(`/workflows/${workflowId}/instances`);
+      return response;
     },
-    // YES
     downloadWorkflowTemplate: async templateName => {
       try {
         const response = await fetch(`/workflows/download/${templateName}`);

client/src/components/Card/Card.jsx

@@ -1,10 +1,10 @@
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
 import styles from './Card.module.css';
 import Dropdown from '../Dropdown/Dropdown.jsx';
 import { WorkflowOptions } from '../../constants.js';
-import { useDispatch, useSelector } from 'react-redux';
 import CreateWorkflowMoreinfoPopup from '../Popups/CreateWorkflowMoreInfo/CreateWorkflowMoreInfo.jsx';
-import { useState } from 'react';
 
 const Card = props => {
   const [isBtsOpened, setBtsOpened] = useState(false);
@@ -31,10 +31,14 @@ const Card = props => {
         ) : (
           <div>
             <div className={styles.buttonGroup}>
-              {props.moreInfo ? <button className={styles.moreInfo} onClick={togglePopup}>More Info</button> : null}
+              {props.moreInfo && (
+                <button className={styles.moreInfo} onClick={togglePopup}>
+                  More Info
+                </button>
+              )}
               <Dropdown options={WorkflowOptions} />
             </div>
-            {isBtsOpened && (<CreateWorkflowMoreinfoPopup togglePopup={togglePopup}/>)}
+            {isBtsOpened && <CreateWorkflowMoreinfoPopup togglePopup={togglePopup} />}
           </div>
         )}
       </div>

client/src/components/Dropdown/Dropdown.jsx

@@ -27,7 +27,7 @@ const Dropdown = ({ options }) => {
       return;
     }
 
-    dispatch({ type: 'CREATED_WORKFLOW', payload: { workflowDefinitionId: data.workflowDefinitionId } });
+    dispatch({ type: 'CREATED_WORKFLOW', payload: { workflowId: data.workflowDefinitionId } });
     dispatch({ type: 'LOADED_POPUP' });
   };
 

client/src/components/LoginForm/LoginForm.jsx

@@ -17,8 +17,8 @@ const LoginForm = ({ togglePopup, setLoading }) => {
 
     try {
       if (authType === LoginStatus.JWT) {
-        const res = await api.jwt.login();
-        dispatch({ type: 'LOGIN', payload: { authType, userName: res.data.name, userEmail: res.data.email } });
+        const { data: userInfo } = await api.jwt.login();
+        dispatch({ type: 'LOGIN', payload: { authType, userName: userInfo.name, userEmail: userInfo.email } });
         navigate(ROUTE.HOME);
         dispatch({ type: 'CLOSE_POPUP' });
         dispatch({ type: 'LOADED_POPUP' });
@@ -54,8 +54,9 @@ const LoginForm = ({ togglePopup, setLoading }) => {
               />
               {LoginStatus.ACG}
             </label>
-            <label className={styles.subLabel}>This authentication type provides functionality of creating, triggering
-              and managing workflows.</label>
+            <label className={styles.subLabel}>
+              This authentication type provides functionality of creating, triggering and managing workflows.
+            </label>
           </div>
           <div className={styles.radioButtonWrapper}>
             <label className={styles.label}>
@@ -68,7 +69,9 @@ const LoginForm = ({ togglePopup, setLoading }) => {
               />
               {LoginStatus.JWT}
             </label>
-            <label className={styles.subLabel}>This authentication type provides functionality of only triggering and managing workflows.</label>
+            <label className={styles.subLabel}>
+              This authentication type provides functionality of only triggering and managing workflows.
+            </label>
           </div>
         </div>
         <div className={styles.formButtons}>

client/src/components/Popups/WorkflowDefinitionCreation/WorkflowDefinitionCreation.jsx

@@ -21,7 +21,7 @@ const WorkflowDefinitionCreation = ({ message }) => {
     dispatch({ type: 'LOADING_POPUP' });
     const workflow = await api.workflows.publishWorkflow(lastCreatedWorkflow.id);
 
-    if (workflow.status === 200) {
+    if (workflow?.status === 200) {
       dispatch({ type: 'PUBLISHED_LAST_WORKFLOW' });
     }
 

client/src/components/Popups/WorkflowTriggerResult/WorkflowTriggerResult.jsx

@@ -1,9 +1,9 @@
+import { useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 import styles from './WorkflowTriggerResult.module.css';
 import withPopup from '../../../hocs/withPopup/withPopup.jsx';
 import imgSuccess from '../../../assets/img/success.svg';
-import { useNavigate } from 'react-router-dom';
 import { ROUTE } from '../../../constants.js';
-import { useDispatch } from 'react-redux';
 
 const WorkflowTriggerResult = ({ workflowInstanceUrl }) => {
   const navigate = useNavigate();

client/src/components/TriggerForm/TriggerForm.jsx

@@ -4,10 +4,10 @@ import styles from './TriggerForm.module.css';
 import WorkflowTriggerResultPopup from '../Popups/WorkflowTriggerResult/WorkflowTriggerResult.jsx';
 import { api } from '../../api';
 
-const TriggerForm = ({ definitionId }) => {
+const TriggerForm = ({ workflowId }) => {
   const dispatch = useDispatch();
   const isOpened = useSelector(state => state.popup.isOpened);
-  const workflowDefinitions = useSelector(state => state.workflows.workflowDefinitions);
+  const workflows = useSelector(state => state.workflows.workflows);
   const [instanceName, setInstanceName] = useState('');
   const [signerName, setSignerName] = useState('');
   const [signerEmail, setSignerEmail] = useState('');
@@ -19,47 +19,32 @@ const TriggerForm = ({ definitionId }) => {
   const handleSubmit = async event => {
     event.preventDefault();
 
-    // const body = {
-    //   instanceName,
-    //   signerEmail,
-    //   signerName,
-    //   ccEmail,
-    //   ccName,
-    // };
-
     const body = {
-      instanceName: 'Contract for Rent 2024',
-      signerEmail: '[email protected]',
-      signerName: 'Bob Swager',
-      ccEmail: '[email protected]',
-      ccName: 'My Name (John Doe)',
+      instanceName,
+      signerEmail,
+      signerName,
+      ccEmail,
+      ccName,
     };
 
     setDataSending(true);
-    const { data } = await api.workflows.triggerWorkflow(definitionId, body);
-    setWorkflowInstanceUrl(data.workflowInstanceUrl);
+    const { data: triggeredWorkflow } = await api.workflows.triggerWorkflow(workflowId, body);
+    setWorkflowInstanceUrl(triggeredWorkflow.workflowInstanceUrl);
 
     // Update workflowDefinitions. ...workflow creates new workflow-object to avoid mutation in redux
-    const updatedWorkflowDefinitions = workflowDefinitions.map(workflow => {
-      if (workflow.definitionId === definitionId) {
+    const updatedWorkflowDefinitions = workflows.map(workflow => {
+      if (workflow.id === workflowId) {
         return {
           ...workflow,
-          instanceId: data.instanceId,
+          instanceId: triggeredWorkflow.instanceId,
           isTriggered: true,
         };
-      } else {
-        return {
-          ...workflow,
-          instanceId: undefined,
-          isTriggered: false,
-        };
       }
-    });
 
-    dispatch({
-      type: 'UPDATE_WORKFLOW_DEFINITIONS',
-      payload: { workflowDefinitions: updatedWorkflowDefinitions },
+      return { ...workflow };
     });
+
+    dispatch({ type: 'UPDATE_WORKFLOWS', payload: { workflows: updatedWorkflowDefinitions } });
     setDataSending(false);
 
     setInstanceName('');