FOUR-20487: Display "Screen Interstitial" Option

src/components/inspectors/ElementDestination.vue

@@ -276,26 +276,54 @@ export default {
       this.setBpmnValues(event);
     },
     /**
-     * Handle interstitial for task source
-     *
-     * @param {String} newValue
+     * Handle interstitial behavior based on node type
+     * 
+     * @param {String} newValue - The new destination type value selected
+     * @returns {void}
      */
     handleInterstitial(newValue) {
-      const taskTypes = ['bpmn:Task', 'bpmn:ManualTask'];
+      const nodeType = this.node.$type;
+      const nodeId = this.node.id;
 
-      if (!taskTypes.includes(this.node.$type)) {
-        return;
-      }
-
-      let isDisabled = false;
+      const handlers = {
+        /**
+         * Handler for Start Event nodes
+         * Emits handle-interstitial event with node ID and disabled state
+         */
+        'bpmn:StartEvent': () => {
+          this.$root.$emit('handle-interstitial', {
+            nodeId,
+            isDisabled: newValue !== 'taskSource',
+          });
+        },
+        /**
+         * Handler for Task nodes
+         * Delegates to handleTaskInterstitial method
+         */
+        'bpmn:Task': () => this.handleTaskInterstitial(newValue, nodeId),
+        /**
+         * Handler for Manual Task nodes
+         * Delegates to handleTaskInterstitial method
+         */
+        'bpmn:ManualTask': () => this.handleTaskInterstitial(newValue, nodeId),
+      };
 
-      if (newValue !== 'taskSource') {
-        isDisabled = true;
+      const handler = handlers[nodeType];
+      if (handler) {
+        handler();
       }
+    },
 
-      this.$root.$emit('handle-interstitial', {
-        nodeId: this.node.id,
-        isDisabled,
+    /**
+     * Handle interstitial for task elements
+     * 
+     * @param {String} newValue - The new destination type value selected
+     * @param {String} nodeId - The ID of the task node being modified
+     */
+    handleTaskInterstitial(newValue, nodeId) {
+      this.$root.$emit('handle-task-interstitial', {
+        nodeId,
+        show: newValue === 'displayNextAssignedTask',
       });
     },
   },

src/components/inspectors/taskElementDestination.js

@@ -13,6 +13,7 @@ export default {
       { value: 'homepageDashboard', content: 'Welcome Screen' },
       { value: 'customDashboard', content: 'Custom Dashboard' },
       { value: 'externalURL', content: 'External URL' },
+      { value: 'displayNextAssignedTask', content: 'Display Next Assigned Task' },
     ],
   },
 };

tests/e2e/specs/DisplayNextAssignedTask.cy.js

@@ -0,0 +1,32 @@
+
+const { nodeTypes } = require('../support/constants');
+const {
+  clickAndDropElement,
+  waitToRenderAllShapes,
+  getElementAtPosition,
+  toggleInspector,
+} = require('../support/utils');
+
+// Test suite for Display Next Assigned Task functionality
+describe('Display Next Assigned Task', { scrollBehavior: false }, () => {
+
+  // Setup before each test
+  beforeEach(() => {
+    toggleInspector();
+  });
+
+  // Step 1: Test selecting Display Next Assigned Task option
+  it('should select Display Next Assigned Task as element destination type', () => {
+    const manualTaskPosition = { x: 300, y: 200 };
+    clickAndDropElement(nodeTypes.task, manualTaskPosition);
+    waitToRenderAllShapes();
+    getElementAtPosition(manualTaskPosition).click();
+
+    // Verify element destination dropdown exists and select option
+    cy.get('[data-test=element-destination-type]').should('exist').click();
+    cy.get('[id=option-1-6]').click();
+
+    // Verify selected option is displayed correctly
+    cy.get('[class=multiselect__single]').should('exist').contains('Display Next Assigned Task');
+  });
+});

tests/e2e/specs/Tasks.cy.js

@@ -73,19 +73,22 @@ describe('Tasks', () => {
     // Custom Dashboards
     cy.get('[data-test=element-destination-type]').should('exist');
     cy.get('[data-test=element-destination-type]').click();
-    cy.get('[id=option-1-5]').click();
+    cy.contains('External URL').click();
+    // cy.contains('Display Next Assigned Task').click();
     cy.get('[class=multiselect__single]').should('exist');
     cy.get('[class=multiselect__single]').contains('External URL');
     cy.get('[data-test=dashboard]').should('not.exist');
     cy.get('[data-test=external-url]').should('exist');
     cy.get('[data-test=downloadXMLBtn]').click();
-    // TODO need a new version of processmaker-bpmn-moddle [https://github.com/ProcessMaker/processmaker-bpmn-moddle/pull/58]
-    // const validXML = '<?xml version="1.0" encoding="UTF-8"?>\n<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:pm="http://processmaker.com/BPMN/2.0/Schema.xsd" id="Definitions_03dabax" targetNamespace="http://bpmn.io/schema/bpmn" exporter="ProcessMaker Modeler" exporterVersion="1.0">\n  <bpmn:process id="Process_1" isExecutable="true">\n    <bpmn:startEvent id="node_1" name="Start Event" />\n    <bpmn:task id="node_2" name="Form Task" pm:assignment="requester" elementDestination="{&#34;type&#34;:&#34;externalURL&#34;,&#34;value&#34;:null}" />\n  </bpmn:process>\n  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n      <bpmndi:BPMNShape id="node_1_di" bpmnElement="node_1">\n        <dc:Bounds x="150" y="210" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="node_2_di" bpmnElement="node_2">\n        <dc:Bounds x="340" y="310" width="116" height="76" />\n      </bpmndi:BPMNShape>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</bpmn:definitions>';
 
-    // cy.window()
-    //   .its('xml')
-    //   .then(xml => xml.trim())
-    //   .should('eq', validXML.trim());
+    // Display Next Assigned Task
+    cy.get('[data-test=element-destination-type]').should('exist');
+    cy.get('[data-test=element-destination-type]').click();
+    cy.contains('Display Next Assigned Task').click();
+    cy.get('[class=multiselect__single]').should('exist');
+    cy.get('[class=multiselect__single]').contains('Display Next Assigned Task');
+    cy.get('[data-test=dashboard]').should('not.exist');
+    cy.get('[data-test=external-url]').should('not.exist');
   });
 
   it('Correctly renders task after undo/redo', () => {