added dynamic inputs and adding minor fixes

Author: annahileta

client/src/api/index.js

@@ -126,7 +126,7 @@ export const api = Object.freeze({
     },
     getWorkflowTriggerRequirements: async workflowId => {
       try {
-        const response = await instance.put(`/workflows/${workflowId}/requirements`);
+        const response = await instance.get(`/workflows/${workflowId}/requirements`);
         return response;
       } catch (error) {
         return error.response;

client/src/assets/text.json

@@ -20,6 +20,7 @@
   },
   "triggerForm": {
     "formTitle": "Fill in details",
+    "formTitleWithoutInputs": "This workflow does not require additional fields",
     "formName": "Participant Information",
     "fieldsI9": {
       "field1": "Preparer name",

client/src/components/TriggerForm/TriggerForm.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import styles from './TriggerForm.module.css';
@@ -15,45 +15,62 @@ const TriggerForm = ({ workflowId, templateType }) => {
   const workflows = useSelector(state => state.workflows.workflows);
   const [isDataSending, setDataSending] = useState(false);
   const [workflowInstanceUrl, setWorkflowInstanceUrl] = useState('');
-  const [i9Form, setI9Form] = useState([
+  const i9Form = [
     { fieldHeader: triggerForm.fieldsI9.field1, fieldName: 'preparerName', value: '' },
     { fieldHeader: triggerForm.fieldsI9.field2, fieldName: 'preparerEmail', value: '' },
     { fieldHeader: triggerForm.fieldsI9.field3, fieldName: 'employeeName', value: '' },
     { fieldHeader: triggerForm.fieldsI9.field4, fieldName: 'employeeEmail', value: '' },
     { fieldHeader: triggerForm.fieldsI9.field5, fieldName: 'hrApproverName', value: '' },
     { fieldHeader: triggerForm.fieldsI9.field6, fieldName: 'hrApproverEmail', value: '' },
-  ]);
-  const [offerLetterForm, setOfferLetterForm] = useState([
+  ];
+  const offerLetterForm = [
     { fieldHeader: triggerForm.fieldsOffer.field1, fieldName: 'hrManagerName', value: '' },
     { fieldHeader: triggerForm.fieldsOffer.field2, fieldName: 'hrManagerEmail', value: '' },
     { fieldHeader: triggerForm.fieldsOffer.field3, fieldName: 'Company', value: '' },
-  ]);
-  const [ndaForm, setNdaForm] = useState([
+  ];
+  const ndaForm = [
     { fieldHeader: triggerForm.fieldsNda.field1, fieldName: 'hrManagerName', value: '' },
     { fieldHeader: triggerForm.fieldsNda.field2, fieldName: 'hrManagerEmail', value: '' },
-  ]);
-
-  let relevantFormFields = [];
-  let relevantSetter = null;
-  switch (templateType) {
-    case TemplateType.I9.type:
-      relevantFormFields = i9Form;
-      relevantSetter = setI9Form;
-      break;
-    case TemplateType.OFFER.type:
-      relevantFormFields = offerLetterForm;
-      relevantSetter = setOfferLetterForm;
-      break;
-    case TemplateType.NDA.type:
-      relevantFormFields = ndaForm;
-      relevantSetter = setNdaForm;
-      break;
-  }
+  ];
+
+  let [relevantFormFields, setRelevantFormFields] = useState([]);
+
+  useEffect(() => {
+    switch (templateType) {
+      case TemplateType.I9.type:
+        setRelevantFormFields(i9Form);
+        break;
+      case TemplateType.OFFER.type:
+        setRelevantFormFields(offerLetterForm);
+        break;
+      case TemplateType.NDA.type:
+        setRelevantFormFields(ndaForm);
+        break;
+      case "-":
+        try {
+          api.workflows.getWorkflowTriggerRequirements(workflowId).then(data => {
+            console.log(data.data.trigger_input_schema);
+            setRelevantFormFields(generateDynamicForm(data.data.trigger_input_schema, 'Custom'));
+          });
+        } catch (error) {
+          console.error("Failed to fetch trigger requirements:", error);
+        }
+        break;
+    }
+  }, [])
+
+  const generateDynamicForm = (fieldNames) => {
+    return fieldNames.map((field) => ({
+      fieldHeader: field.field_name,
+      fieldName: field.field_name,
+      value: '',
+    }));
+  };
 
   const handleChange = (idx, event) => {
     const newRelevantForm = [...relevantFormFields];
     newRelevantForm[idx].value = event.target.value;
-    relevantSetter(newRelevantForm);
+    setRelevantFormFields(newRelevantForm);
   };
 
   const handleCloseTriggerPopup = () => {
@@ -76,7 +93,7 @@ const TriggerForm = ({ workflowId, templateType }) => {
 
     setDataSending(true);
     const { data: triggeredWorkflow } = await api.workflows.triggerWorkflow(workflowId, templateType, body);
-    setWorkflowInstanceUrl(triggeredWorkflow.workflowInstanceUrl);
+    setWorkflowInstanceUrl(triggeredWorkflow.instance_url);
 
     // Update workflowDefinitions. "...workflow" creates new workflow-object to avoid mutation in redux
     const updatedWorkflowDefinitions = workflows.map(w => {
@@ -93,6 +110,22 @@ const TriggerForm = ({ workflowId, templateType }) => {
     setDataSending(false);
     dispatch(openPopupWindow());
   };
+  if (!relevantFormFields.length)
+    return (
+      <div className={styles.formContainer}>
+      <h2>{triggerForm.formTitleWithoutInputs}</h2>
+      
+      <form className={styles.triggerForm} onSubmit={handleSubmit}>
+        <button className="btn btn-primary" type="submit" disabled={isDataSending}>
+          <span className="sr-only">{buttons.triggerWorkflow}</span>
+          {isDataSending ? <span className="spinner-border spinner-border-sm" /> : null}
+        </button>
+      </form>
+      {isPopupOpened && (
+        <WorkflowTriggerResultPopup workflowInstanceUrl={workflowInstanceUrl} togglePopup={handleCloseTriggerPopup} />
+      )}
+    </div>
+    );
 
   return (
     <div className={styles.formContainer}>

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

@@ -69,7 +69,6 @@ label {
 
 .triggerForm button {
   margin: 0.5rem 2.5rem 0 0;
-  width: 120px;
   height: 40px;
   border-radius: 2px;
   color: var(--white-main);

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

@@ -11,7 +11,6 @@
 .listGroup a {
   width: 100%;
   height: 60px;
-  display: flex;
   flex-direction: row;
   border-radius: 1px !important;
   justify-content: space-between;

client/src/pages/TriggerWorkflow/TriggerWorkflow.jsx

@@ -9,7 +9,7 @@ import withAuth from '../../hocs/withAuth/withAuth.jsx';
 import WorkflowList from '../../components/WorkflowList/WorkflowList.jsx';
 import WorkflowDescription from '../../components/WorkflowDescription/WorkflowDescription.jsx';
 import TriggerBehindTheScenes from '../../components/WorkflowDescription/BehindTheScenes/TriggerBehindTheScenes.jsx';
-import { ROUTE, TemplateType, WorkflowItemsInteractionType, WorkflowStatus } from '../../constants.js';
+import { LoginStatus, TemplateType, WorkflowItemsInteractionType } from '../../constants.js';
 import { api } from '../../api';
 import { updateWorkflowDefinitions } from '../../store/actions';
 
@@ -18,13 +18,13 @@ const TriggerWorkflow = () => {
   const location = useLocation();
   const [isWorkflowListLoading, setWorkflowListLoading] = useState(false);
   const workflows = useSelector(state => state.workflows.workflows);
+  const authType = useSelector(state => state.auth.authType);
 
   useEffect(() => {
     const getWorkflowDefinitions = async () => {
       setWorkflowListLoading(true);
       const definitionsResponse = await api.workflows.getWorkflowDefinitions();
-
-      const workflowDefinitions = definitionsResponse.data.value
+      const workflowDefinitions = definitionsResponse.data.data.workflows.filter(definition => definition.status !== 'inactive')
         .map(definition => {
           if (workflows.length) {
             const foundWorkflow = workflows.find(workflow => workflow.id === definition.id);
@@ -33,7 +33,16 @@ const TriggerWorkflow = () => {
 
           const templateKeys = Object.keys(TemplateType);
           const foundKey = templateKeys.find(key => definition.name.startsWith(TemplateType[key].name));
-          if (!foundKey) return null;
+          if (!foundKey) {
+            if(authType === LoginStatus.JWT)
+              return null;
+
+            return {
+              id: definition.id,
+              name: definition.name,
+              type: "-",
+            };
+          }
 
           return {
             id: definition.id,
@@ -43,20 +52,7 @@ const TriggerWorkflow = () => {
         })
         .filter(definition => !!definition);
 
-      const workflowsWithState = await Promise.all(
-        workflowDefinitions.map(async definition => {
-          const { data } = await api.workflows.getWorkflowInstances(definition.id);
-          const relevantInstanceState = data.length > 0 ? data[data.length - 1].instanceState : WorkflowStatus.NotRun;
-
-          return {
-            ...definition,
-            instanceState: relevantInstanceState,
-          };
-        })
-      );
-
-      // Set workflow definitions with their statuses downloaded from docusign server
-      dispatch(updateWorkflowDefinitions(workflowsWithState));
+      dispatch(updateWorkflowDefinitions(workflowDefinitions));
       setWorkflowListLoading(false);
     };