removed status fields, fixed redirects and added text to create workflow to the config

Author: annahileta

client/src/App.jsx

@@ -32,7 +32,7 @@ function App() {
 
       const { data: userInfo } = await api.acg.callbackExecute(code);
       dispatch(authorizeUser(LoginStatus.ACG, userInfo.name, userInfo.email));
-      navigate(ROUTE.HOME);
+      navigate(ROUTE.TRIGGER);
       dispatch(closePopupWindow());
       dispatch(closeLoadingCircleInPopup());
     };
@@ -43,9 +43,7 @@ function App() {
   return (
     <Routes>
       <Route path={ROUTE.ROOT} element={<Hero />} />
-      <Route path={ROUTE.HOME} element={<HomeAuthenticated />} />
       <Route path={ROUTE.TRIGGER} element={<TriggerWorkflowAuthenticated />} />
-      <Route path={ROUTE.MANAGE} element={<ManageWorkflowAuthenticated />} />
       <Route path={`${ROUTE.TRIGGERFORM}/:workflowId`} element={<TriggerWorkflowFormAuthenticated />} />
     </Routes>
   );

client/src/assets/text.json

@@ -76,7 +76,7 @@
       "mainDescription": "This scenario gets a list of published workflow definitions, gets the status of the last workflow instance triggered from each workflow definition, and triggers a new workflow instance.",
       "step1Description": "Display all of the workflow definitions in the user's account by calling the WorkflowManagment: getWorkflowDefinitions endpoint. Each row on this page represents a workflow definition.",
       "step2Description": "After the user chooses a workflow to trigger, the next step is to get the workflow definition by calling the WorkflowMangement: getWorkflowDefinition endpoint. The response for this API call includes a triggerURL property that will be used in the next step.",
-  "step3Description": "Finally, call the WorkflowTrigger: triggerWorkflow endpoint to trigger the workflow instance. The response of this call includes the workflowInstanceUrl where the workflow participant can complete the workflow steps."
+      "step3Description": "Finally, call the WorkflowTrigger: triggerWorkflow endpoint to trigger the workflow instance. The response of this call includes the workflowInstanceUrl where the workflow participant can complete the workflow steps."
     },
     "manageWorkflow": {
       "mainDescription": "This scenario displays a list of workflow instances, the status of those instances, and the option to cancel them.",
@@ -87,6 +87,7 @@
   },
   "workflowList": {
     "doNotHaveWorkflow": "You do not have any workflows in your account",
+    "pleaseCreateWorkflow": "Please <a href=''>manually create a workflow</a> in your account before using the sample app.",
     "columns": {
       "lastRunStatus": "Status of last run",
       "workflowName": "Workflow name",
@@ -137,4 +138,4 @@
     "createsandbox": "https://go.docusign.com/o/sandbox/",
     "learnmore": "https://developers.docusign.com/docs/maestro-api/"
   }
- }
+}

client/src/components/Header/Header.jsx

@@ -30,7 +30,7 @@ const Header = () => {
   return (
     <header className={styles.Header} role="banner">
       <nav className={styles.navBar}>
-        <Link className={styles.logo} to={ROUTE.ROOT}>
+        <Link className={styles.logo} to={ROUTE.ROOT} onClick={handleLogOut}>
           <img src={logo} alt="logo" />
         </Link>
         <div className={styles.headerEnd}>

client/src/components/LoginForm/LoginForm.jsx

@@ -26,7 +26,7 @@ const LoginForm = ({ togglePopup }) => {
       if (authType === LoginStatus.JWT) {
         const { data: userInfo } = await api.jwt.login();
         dispatch(authorizeUser(authType, userInfo.name, userInfo.email));
-        navigate(ROUTE.HOME);
+        navigate(ROUTE.TRIGGER);
         dispatch(closePopupWindow());
         dispatch(closeLoadingCircleInPopup());
       }

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

@@ -13,7 +13,7 @@ const WorkflowTriggerResult = ({ workflowInstanceUrl }) => {
 
   const handleFinishTrigger = async () => {
     dispatch(closePopupWindow());
-    navigate(ROUTE.HOME);
+    navigate(ROUTE.TRIGGER);
   };
 
   return (

client/src/components/TriggerForm/TriggerForm.jsx

@@ -58,7 +58,7 @@ const TriggerForm = ({ workflowId, templateType }) => {
 
   const handleCloseTriggerPopup = () => {
     dispatch(closePopupWindow());
-    navigate(ROUTE.HOME);
+    navigate(ROUTE.TRIGGER);
   };
 
   const handleSubmit = async event => {

client/src/components/WorkflowDescription/WorkflowDescription.jsx

@@ -2,12 +2,9 @@ import { Link } from 'react-router-dom';
 import styles from './WorkflowDescription.module.css';
 import textContent from '../../assets/text.json';
 
-const WorkflowDescription = ({ title, behindTheScenesComponent, backRoute }) => {
+const WorkflowDescription = ({ title, behindTheScenesComponent }) => {
   return (
     <div className={styles.descriptionContainer}>
-      <Link to={backRoute}>
-        <button className={styles.backButton}>{textContent.buttons.backHome}</button>
-      </Link>
       <h2>{title}</h2>
       <div className={`dropdown ${styles.dropDown}`}>
         <button

client/src/components/WorkflowList/WorkflowList.jsx

@@ -91,14 +91,8 @@ const WorkflowList = ({ items, interactionType, isLoading }) => {
     return (
       <div className={`list-group ${styles.listGroup}`}>
         <div className={styles.emptyListContainer}>
-          <h1>{textContent.workflowList.doNotHaveWorkflow}</h1>
-          <Link to={ROUTE.HOME}>
-            <button className={styles.defaultButton} type="button">
-              {interactionType === WorkflowItemsInteractionType.TRIGGER
-                ? textContent.buttons.createWorkflow
-                : textContent.buttons.triggerNewWorkflow}
-            </button>
-          </Link>
+          <h2>{textContent.workflowList.doNotHaveWorkflow}</h2>
+          <h4 className={styles.resetStyle} dangerouslySetInnerHTML={{ __html: textContent.workflowList.pleaseCreateWorkflow }}></h4>
         </div>
       </div>
     );
@@ -109,7 +103,6 @@ const WorkflowList = ({ items, interactionType, isLoading }) => {
         {interactionType === WorkflowItemsInteractionType.TRIGGER && (
           <div className={styles.headerRow}>
             <div>
-              <p>{textContent.workflowList.columns.lastRunStatus}</p>
               <p>{textContent.workflowList.columns.workflowName}</p>
             </div>
             <div className={styles.typeHeader}>
@@ -118,66 +111,20 @@ const WorkflowList = ({ items, interactionType, isLoading }) => {
           </div>
         )}
 
-        {interactionType === WorkflowItemsInteractionType.MANAGE && (
-          <div className={styles.headerAction}>
-            <button type="button" onClick={() => navigate(ROUTE.TRIGGER)}>
-              {textContent.buttons.triggerNewWorkflow}
-            </button>
-          </div>
-        )}
-
         <div className={styles.list} style={items.length >= 2 ? listStyles : {}}>
           {items.map((item, idx) => (
             <div key={`${item.name}${idx}`} className={`list-group-item list-group-item-action ${styles.listRow}`}>
               <div className={styles.cell1}>
-                {loadingWorkflow.isLoading && loadingWorkflow.id === item.id ? (
-                  <StatusLoader />
-                ) : (
-                  <WorkflowStatusPill status={item.instanceState} />
-                )}
                 <h4>{WorkflowItemsInteractionType.TRIGGER ? item.name : item.instanceName}</h4>
               </div>
+
               <p>{item.type}</p>
 
               {interactionType === WorkflowItemsInteractionType.TRIGGER && (
-                <button onClick={() => navigate(`${ROUTE.TRIGGERFORM}/${item.id}?type=${item.type}`)}>
+                <button className={styles.cell3} onClick={() => navigate(`${ROUTE.TRIGGERFORM}/${item.id}?type=${item.type}`)}>
                   {textContent.buttons.triggerWorkflow}
                 </button>
               )}
-
-              {interactionType === WorkflowItemsInteractionType.MANAGE && (
-                <div
-                  className="dropdown"
-                  style={{ position: 'relative !important' }}
-                  onFocus={() => handleFocusDropdown(idx)}
-                  onBlur={() => handleBlurDropdown(idx)}
-                >
-                  <button
-                    className={styles.dropdownButton}
-                    type="button"
-                    id="dropdownMenuButton"
-                    data-toggle="dropdown"
-                    aria-haspopup="true"
-                    aria-expanded="false"
-                  >
-                    <img src={dropdownSvg} alt="More actions" />
-                  </button>
-                  <div
-                    className={`dropdown-menu dropdown-menu-right ${styles.dropdownMenu}`}
-                    style={dropdownOptions.isOpen && dropdownOptions.id === idx ? { display: 'block' } : {}}
-                  >
-                    <a
-                      className={`dropdown-item ${styles.dropdownItem}`}
-                      onClick={() => handleUpdateWorkflowStatus(item)}
-                    >
-                      {textContent.buttons.updateWorkflow}
-                    </a>
-                    <a className={`dropdown-item ${styles.dropdownItem}`} onClick={() => handleCancelWorkflow(item)}>
-                      {textContent.buttons.cancelWorkflow}
-                    </a>
-                  </div>
-                </div>
-              )}
             </div>
           ))}
         </div>

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

@@ -88,6 +88,11 @@
   display: flex;
   flex-direction: row;
   gap: 16px;
+  margin-left: 10px;
+}
+
+.listRow .cell3 {
+  margin-right: 10px;
 }
 
 .headerRow {
@@ -180,10 +185,12 @@
   display: flex;
   flex-direction: column;
   justify-items: center;
-  align-items: center;
   padding-top: 15rem;
   padding-left: 5rem;
-  width: 80%;
+}
+
+.resetStyle {
+  all: unset;
 }
 
 .loaderContainer {

client/src/pages/Hero/Hero.jsx

@@ -23,11 +23,11 @@ const Hero = () => {
 
     if (authType === LoginStatus.ACG) {
       const isLoggedIn = await api.acg.loginStatus();
-      isLoggedIn && navigate(ROUTE.HOME);
+      isLoggedIn && navigate(ROUTE.TRIGGER);
     }
     if (authType === LoginStatus.JWT) {
       const isLoggedIn = await api.jwt.loginStatus();
-      isLoggedIn && navigate(ROUTE.HOME);
+      isLoggedIn && navigate(ROUTE.TRIGGER);
     }
   };