Add manage-status changes

Author: astleyz

client/src/api/index.js

@@ -5,16 +5,22 @@ import { clearAllState } from '../store/actions';
 const isDev = process.env.NODE_ENV === 'development';
 const apiUrl = isDev ? process.env.BACKEND_DEV_HOST : process.env.BACKEND_PROD_HOST;
 
+const clearState = async () => {
+  store.dispatch(clearAllState());
+  await persistor.purge();
+  localStorage.clear();
+};
+
 const instance = axios.create({
   baseURL: apiUrl,
   withCredentials: true,
 });
 
 instance.interceptors.response.use(
   response => response,
-  err => {
+  async err => {
     if (err?.response?.status === 401) {
-      store.dispatch(clearAllState());
+      await clearState();
     }
     throw err;
   }
@@ -35,8 +41,7 @@ export const api = Object.freeze({
     },
     logout: async () => {
       await instance.get('/auth/jwt/logout');
-      await persistor.purge();
-      localStorage.clear();
+      await clearState();
     },
     loginStatus: async () => {
       const response = await instance.get('/auth/jwt/login-status');
@@ -51,8 +56,7 @@ export const api = Object.freeze({
     },
     logout: async () => {
       await instance.get('/auth/passport/logout');
-      await persistor.purge();
-      localStorage.clear();
+      await clearState();
     },
     callbackExecute: async code => {
       const response = await instance.get(`/auth/passport/callback?code=${code}`);
@@ -80,7 +84,7 @@ export const api = Object.freeze({
         const response = await instance.put(`/workflows/${workflow.id}/instances/${workflow.instanceId}/cancel`);
         return response;
       } catch (error) {
-        console.log(error);
+        return error.response;
       }
     },
     publishWorkflow: async workflowId => {
@@ -96,6 +100,7 @@ export const api = Object.freeze({
             return published;
           } catch (error) {
             console.log(error);
+            return error.response;
           }
         }
 

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

@@ -35,14 +35,25 @@ const WorkflowDefinitionCreation = ({ message }) => {
       return;
     }
 
+    if (workflow?.status === 400 && workflow?.data?.errorMessage.includes('limit (5)')) {
+      dispatch(
+        showErrorTextInPopup(
+          'Publish workflow was unsuccessful',
+          "You've used all your 5 available workflows on the account. Delete active workflows to make space.",
+          null
+        )
+      );
+      dispatch(closeLoadingCircleInPopup());
+      return;
+    }
+
     dispatch(
       showErrorTextInPopup(
         'Publish workflow was unsuccessful',
         'The Docusign server returned an error during the workflow publishing. Try again later.',
         null
       )
     );
-
     dispatch(closeLoadingCircleInPopup());
   };
 

client/src/components/Popups/WorkflowTriggerResult/WorkflowTriggerResult.module.css

@@ -39,8 +39,7 @@
 
 .popupContainer a:hover {
   color: var(--white-main);
-  background-color: var(--primary-dark);
-  box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.5);
+  background-color: var(--secondary-main);
 }
 
 .popupContainer div {

client/src/components/TriggerForm/TriggerForm.jsx

@@ -42,16 +42,14 @@ const TriggerForm = ({ workflowId }) => {
     setWorkflowInstanceUrl(triggeredWorkflow.workflowInstanceUrl);
 
     // Update workflowDefinitions. "...workflow" creates new workflow-object to avoid mutation in redux
-    const updatedWorkflowDefinitions = workflows.map(workflow => {
-      if (workflow.id === workflowId) {
-        return {
-          ...workflow,
-          instanceId: triggeredWorkflow.instanceId,
-          isTriggered: true,
-        };
-      }
-
-      return { ...workflow };
+    const updatedWorkflowDefinitions = workflows.map(w => {
+      if (w.id !== workflowId) return { ...w };
+
+      return {
+        ...w,
+        instanceId: triggeredWorkflow.instanceId,
+        isTriggered: true,
+      };
     });
 
     dispatch(updateWorkflowDefinitions(updatedWorkflowDefinitions));
@@ -97,8 +95,9 @@ const TriggerForm = ({ workflowId }) => {
         </div>
 
         <div className={styles.divider} />
-        <button type="submit" disabled={isDataSending}>
-          {textContent.buttons.continue}
+        <button className="btn btn-primary" type="submit" disabled={isDataSending}>
+          <span className="sr-only">{textContent.buttons.continue}</span>
+          {isDataSending ? <span className="spinner-border spinner-border-sm" /> : null}
         </button>
       </form>
       {isPopupOpened && (

client/src/components/TriggerForm/TriggerForm.module.css

@@ -55,7 +55,7 @@ label {
 }
 
 .triggerForm label:after {
-  content: " *";
+  content: ' *';
   color: var(--secondary-main);
 }
 
@@ -84,7 +84,11 @@ label {
 }
 
 .triggerForm button:disabled {
+  display: flex;
+  justify-content: space-around;
+  padding: 0;
+  align-items: center;
   background-color: var(--grey-main);
-  color: var(--black-extraextralight);
+  color: var(--black-extralight);
   cursor: not-allowed;
 }

client/src/components/WorkflowList/StatusLoader/StatusLoader.jsx

@@ -0,0 +1,15 @@
+import styles from './StatusLoader.module.css';
+
+const StatusLoader = () => {
+  return (
+    <div className={styles.loader}>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  );
+};
+
+export default StatusLoader;

client/src/components/WorkflowList/StatusLoader/StatusLoader.module.css

@@ -0,0 +1,46 @@
+.loader {
+  --size: 4px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: calc(var(--size));
+  height: calc(var(--size) * 5);
+  width: 80px;
+}
+
+.loader div {
+  width: var(--size);
+  height: var(--size);
+  border-radius: var(--size);
+  background-color: #ffd700;
+  animation: wave 2s infinite ease-in-out;
+}
+
+@keyframes wave {
+  25% {
+    height: calc(var(--size) * 5);
+    background-color: #fc00ff;
+  }
+
+  50% {
+    height: var(--size);
+    background-color: #9c73f8;
+  }
+}
+
+.loader :nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.loader :nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+.loader :nth-child(4) {
+  animation-delay: 0.6s;
+}
+
+.loader :nth-child(5) {
+  animation-delay: 0.8s;
+}

client/src/components/WorkflowList/WorkflowList.jsx

@@ -2,56 +2,77 @@ import { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import styles from './WorkflowList.module.css';
-import WorkflowStatusPill from '../WorkflowStatusPill/WorkflowStatusPill.jsx';
+import WorkflowStatusPill from './WorkflowStatusPill/WorkflowStatusPill.jsx';
 import Loader from '../Loader/Loader.jsx';
 import dropdownSvg from '../../assets/img/dropdown.svg';
-import { ROUTE, WorkflowItemsInteractionType } from '../../constants.js';
+import { ROUTE, WorkflowItemsInteractionType, WorkflowStatus } from '../../constants.js';
 import textContent from '../../assets/text.json';
 import { api } from '../../api';
 import { cancelTriggeredWorkflow, updateWorkflowDefinitions } from '../../store/actions';
+import StatusLoader from './StatusLoader/StatusLoader.jsx';
 
 const WorkflowList = ({ items, interactionType, isLoading }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const workflows = useSelector(state => state.workflows.workflows);
-  const [isOptionsOpen, setOptionsOpen] = useState(false);
-  const [dropdownIdx, setDropdownIdx] = useState(null);
+  const [loadingWorkflow, setLoadingWorkflow] = useState({ id: '', isLoading: false });
+  const [dropdownOptions, setDropdownOptions] = useState({ id: '', isOpen: false });
 
   const handleFocusDropdown = idx => {
     setTimeout(() => {
-      setDropdownIdx(idx);
-      setOptionsOpen(true);
+      setDropdownOptions({ id: idx, isOpen: true });
     }, 120);
   };
 
   const handleBlurDropdown = () => {
     setTimeout(() => {
-      setDropdownIdx(null);
-      setOptionsOpen(false);
+      setDropdownOptions({ id: '', isOpen: false });
     }, 100);
   };
 
   const handleUpdateWorkflowStatus = async workflow => {
+    setLoadingWorkflow({ id: workflow.id, isLoading: true });
     const { data: workflowInstance } = await api.workflows.getWorkflowInstance(workflow);
-    if (workflowInstance.instanceState === workflow.instanceState) return;
 
-    const updatedWorkflows = workflows.map(workflowDefinition => {
-      if (workflowDefinition.id === workflow.id) {
-        return { ...workflowDefinition, instanceState: workflowInstance.instanceState };
-      }
-      return { ...workflowDefinition };
-    });
+    if (workflowInstance.instanceState !== workflow.instanceState) {
+      const updatedWorkflows = workflows.map(w => {
+        if (w.id !== workflow.id) return { ...w };
+        return { ...w, instanceState: workflowInstance.instanceState };
+      });
+      dispatch(updateWorkflowDefinitions(updatedWorkflows));
+    }
 
-    dispatch(updateWorkflowDefinitions(updatedWorkflows));
-    setOptionsOpen(false);
+    setLoadingWorkflow({ id: '', isLoading: false });
+    setDropdownOptions({ id: '', isOpen: false });
   };
 
   const handleCancelWorkflow = async workflow => {
+    setLoadingWorkflow({ id: workflow.id, isLoading: true });
     const { status } = await api.workflows.cancelWorkflowInstance(workflow);
-    if (status !== 200) return;
+    if (status !== 200) {
+      setLoadingWorkflow({ id: '', isLoading: false });
+      return;
+    }
+
+    const updatedWorkflows = await Promise.all(
+      workflows.map(async w => {
+        if (w.id !== workflow.id) return { ...w };
+
+        const { data } = await api.workflows.getWorkflowInstances(workflow.id);
+        const relevantInstanceState = data.length > 0 ? data[data.length - 1].instanceState : WorkflowStatus.NotRun;
+        return {
+          ...workflow,
+          instanceState: relevantInstanceState,
+        };
+      })
+    );
 
+    // // Update workflow statuses
+    dispatch(updateWorkflowDefinitions(updatedWorkflows));
     dispatch(cancelTriggeredWorkflow(workflow.id));
-    setOptionsOpen(false);
+
+    setLoadingWorkflow({ id: '', isLoading: false });
+    setDropdownOptions({ id: '', isOpen: false });
   };
 
   const listStyles = {
@@ -109,7 +130,11 @@ const WorkflowList = ({ items, interactionType, isLoading }) => {
           {items.map((item, idx) => (
             <div key={`${item.name}${idx}`} className="list-group-item list-group-item-action">
               <div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
-                <WorkflowStatusPill status={item.instanceState} />
+                {loadingWorkflow.isLoading && loadingWorkflow.id === item.id ? (
+                  <StatusLoader />
+                ) : (
+                  <WorkflowStatusPill status={item.instanceState} />
+                )}
                 <h4>{WorkflowItemsInteractionType.TRIGGER ? item.name : item.instanceName}</h4>
               </div>
               <p>{item.type}</p>
@@ -139,7 +164,7 @@ const WorkflowList = ({ items, interactionType, isLoading }) => {
                   </button>
                   <div
                     className={`dropdown-menu dropdown-menu-right ${styles.dropdownMenu}`}
-                    style={isOptionsOpen && dropdownIdx === idx ? { display: 'block' } : {}}
+                    style={dropdownOptions.isOpen && dropdownOptions.id === idx ? { display: 'block' } : {}}
                   >
                     <a
                       className={`dropdown-item ${styles.dropdownItem}`}

client/src/components/WorkflowList/WorkflowList.module.css

@@ -132,7 +132,6 @@
 }
 
 .dropdownItem {
-  cursor: pointer;
   height: 100%;
   width: 100%;
   max-height: 32px;
@@ -141,6 +140,11 @@
   background-color: var(--white-main);
 }
 
+.dropdownItem:hover {
+  cursor: pointer;
+  background-color: var(--blue-light);
+}
+
 .dropdownItem:active {
   background-color: var(--primary-main);
 }