User Task Forms UI and data fetching

src/main/resources/public/js/task-form.js

@@ -1,44 +1,23 @@
 let currentForm;
 
-function showTaskModal(formKey, jobKey) {
-  const processInstanceKey = getProcessInstanceKey();
-
-  queryVariablesByProcessInstance(processInstanceKey).done(function (response) {
-    const processInstance = response.data.processInstance;
-    const variables = processInstance.variables.reduce(
+function showTaskModal(jobKey) {
+  queryVariablesByUserTask(jobKey).then(function (response) {
+    const variables = response.data.userTask.elementInstance.variables.reduce(
       (variables, { name, value }) => {
         variables[name] = JSON.parse(value);
         return variables;
       },
       {}
     );
 
-    const formId = formKey.split(":").pop();
-    const processElement = bpmnViewer
-      .get("elementRegistry")
-      .filter(
-        ({ businessObject }) =>
-          businessObject.$instanceOf("bpmn:Process") ||
-          businessObject.processRef?.$instanceOf("bpmn:Process")
-      )
-      .map(
-        (element) => element.businessObject.processRef || element.businessObject
-      )
-      .find((e) =>
-        e.extensionElements?.values.some((extension) => extension.id === formId)
-      );
-    const formContent = JSON.parse(
-      processElement.extensionElements.values.find(
-        (extension) => extension.id === formId
-      ).$body
-    );
+    const form = JSON.parse(response.data.userTask.form.resource);
 
     // clear modal from previous form
     const container = document.querySelector("#task-form-modal .modal-body");
     container.innerHTML = "";
 
     currentForm = new FormViewer.Form({ container });
-    currentForm.importSchema(formContent, variables);
+    currentForm.importSchema(form, variables);
     currentForm.on(
       "submit",
       function handleFormSubmit(event, { data, errors }) {
@@ -58,15 +37,3 @@ function showTaskModal(formKey, jobKey) {
 function completeTaskForm() {
   currentForm.submit();
 }
-
-function getFormKeyForElement(elementId) {
-  const element = bpmnViewer
-    .get("elementRegistry")
-    .get(elementId).businessObject;
-  const isUserTask = element.$instanceOf("bpmn:UserTask");
-  if (isUserTask) {
-    return element.extensionElements?.values?.find((extension) =>
-      extension.$instanceOf("zeebe:formDefinition")
-    )?.formKey;
-  }
-}

src/main/resources/public/js/view-bpmn.js

@@ -195,32 +195,45 @@ function onBpmnElementClick(callback) {
   });
 }
 
-function makeTaskPlayable(elementId, jobKey) {
-  const formKey = getFormKeyForElement(elementId);
-
-  let primaryAction = `completeJob(${jobKey}, '{}');`;
-  if(formKey) {
-    primaryAction = `showTaskModal('${formKey}', ${jobKey})`;
+function makeTaskPlayable(elementId, jobKey, {isUserTask, taskForm} = {}) {
+  const fillModalAction = function (type) {
+    return 'fillJobModal(\'' + jobKey + '\', \'' + type + '\');';
   }
 
-  let fillModalAction = function (type) {
-    return 'fillJobModal(\'' + jobKey + '\', \'' + type + '\');';
+  let primaryAction = `completeJob(${jobKey}, '{}');`;
+  let icon = '<svg class="bi" width="18" height="18" fill="white"><use xlink:href="/img/bootstrap-icons.svg#check"/></svg>';
+  let tooltipText = 'Complete Job';
+  let dropdownContent;
+  if (taskForm) {
+    primaryAction = `showTaskModal(${jobKey})`;
+    icon = '<img width="18" height="18" style="margin-top:-4px;" src="/img/edit-form.svg" />';
+    tooltipText = 'Fill form';
+
+    dropdownContent = `<li><a class="dropdown-item" href="#" onclick="completeJob(${jobKey}, '{}');">
+    <svg class="bi" width="18" height="18" fill="black"><use xlink:href="/img/bootstrap-icons.svg#check"/></svg>
+    Complete with default response
+  </a></li>`;
+  } else {
+    dropdownContent = '<li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#complete-job-modal" href="#" onclick="' + fillModalAction('complete') + '">'
+      + '<svg class="bi" width="18" height="18" fill="black"><use xlink:href="/img/bootstrap-icons.svg#filetype-json"/></svg> Complete with variables</a></li>';
+
+      if (!isUserTask) {
+        dropdownContent += '<li><hr class="dropdown-divider"></li>'
+        + '<li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#fail-job-modal" href="#" onclick="' + fillModalAction('fail') + '">'
+        + '<svg class="bi" width="18" height="18" fill="black"><use xlink:href="/img/bootstrap-icons.svg#x"/></svg>' + ' Fail' + '</a></li>'
+        + '<li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#throw-error-job-modal" href="#" onclick="' + fillModalAction('throw-error') + '">'
+        + '<svg class="bi" width="18" height="18" fill="black"><use xlink:href="/img/bootstrap-icons.svg#lightning"/></svg>' + ' Throw Error' + '</a></li>';
+      }
   }
 
-  const content = '<div class="btn-group">'
-      + '<button type="button" class="btn btn-sm btn-primary overlay-button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Complete job" onclick="' + primaryAction + '">'
-      + '<svg class="bi" width="18" height="18" fill="white"><use xlink:href="/img/bootstrap-icons.svg#check"/></svg>'
+  let content = '<div class="btn-group">'
+      + `<button type="button" class="btn btn-sm btn-primary overlay-button completeButton-${jobKey}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="${tooltipText}" onclick="${primaryAction}">`
+      + icon
       + '</button>'
       + '<button type="button" class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>'
       + '<ul class="dropdown-menu">'
-      + '<li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#complete-job-modal" href="#" onclick="' + fillModalAction('complete') + '">with variables</a></li>'
-      + '<li><hr class="dropdown-divider"></li>'
-      + '<li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#fail-job-modal" href="#" onclick="' + fillModalAction('fail') + '">'
-      + '<svg class="bi" width="18" height="18" fill="black"><use xlink:href="/img/bootstrap-icons.svg#x"/></svg>' + ' Fail' + '</a></li>'
-      + '<li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#throw-error-job-modal" href="#" onclick="' + fillModalAction('throw-error') + '">'
-      + '<svg class="bi" width="18" height="18" fill="black"><use xlink:href="/img/bootstrap-icons.svg#lightning"/></svg>' + ' Throw Error' + '</a></li>'
-      + '</ul>'
-      + '</div>';
+      + dropdownContent
+      + '</ul></div>';
 
   overlays.add(elementId, 'job-marker', {
     position: {
@@ -229,6 +242,14 @@ function makeTaskPlayable(elementId, jobKey) {
     },
     html: content
   });
+
+  $(`.completeButton-${jobKey}`).tooltip();
+
+  // We have to remove the tooltip manually when removing the element that triggers it
+  // see https://github.com/twbs/bootstrap/issues/3084#issuecomment-5207780
+  $(`.completeButton-${jobKey}`).on('click', () => {
+    $(`[data-bs-toggle="tooltip"]`).tooltip('hide');
+  });
 }
 
 function removeTaskPlayableMarker(elementId) {

src/main/resources/public/js/view-process-instance.js

@@ -592,7 +592,7 @@ function loadUserTasksOfProcessInstance() {
 
           const isActiveTask = userTask.state === "CREATED";
           if (isActiveTask) {
-            makeTaskPlayable(elementId, userTask.key);
+            makeTaskPlayable(elementId, userTask.key, {isUserTask: true, taskForm: userTask.form?.resource});
           }
         });
 

src/main/resources/public/js/zeeqs-client.js

@@ -543,6 +543,20 @@ const messagesQuery = `query Messages($perPage: Int!, $page: Int!, $zoneId: Stri
 
   }`;
 
+const variablesByUserTaskQuery = `query VariablesOfUserTask($key: ID!) {  
+  userTask(key: $key) {
+    form {
+      resource
+    }
+    elementInstance {
+      variables(localOnly: false) {
+        name
+        value
+      }
+    }
+  }
+}`;
+
 function fetchData(query, variables) {
 
   return $.ajax({
@@ -753,3 +767,7 @@ function queryErrorByProcessInstanceKey(processInstanceKey) {
     key: processInstanceKey
   });
 }
+
+function queryVariablesByUserTask(userTask) {
+  return fetchData(variablesByUserTaskQuery, {key: userTask});
+}