Repository: ProcessMaker/modeler (js)

Issue:
Change order of components in the controls panel
<img width="256" alt="Screen Shot 2019-12-05 at 11 43 04 AM" src="https://user-images.githubusercontent.com/7561061/70255223-69ec3180-1754-11ea-8345-2194234a1620.png">

Modify the order of the elements so that the "grouped" elements (those with the new element select dropdown) are at the top. The order should be (from top to bottom):
 * Start Event
 * Intermediate Event
 * End Event
 * Task
 * Gateway
 * All other components ...

Pull request:
Add ordering for the controls panel
Closes #895 

This PR sorts controls in the control panel by a rank property. If a control has no rank it will be sorted lower than those that do.

Patch:
diff --git a/src/components/InspectorExtensionManager.js b/src/components/InspectorExtensionManager.js
index 83fb1c83..ccff948b 100644
--- a/src/components/InspectorExtensionManager.js
+++ b/src/components/InspectorExtensionManager.js
@@ -5,7 +5,7 @@ export default function registerInspectorExtension(node, config) {
 }
 
 function moveAdvancedAccordionToBottom(inspectorItemA, inspectorItemB) {
-  const isAdvancedAccordion = (inspectorItem) => inspectorItem.name === 'advanced';
+  const isAdvancedAccordion = (inspectorItem) => inspectorItem.label === 'Advanced';
   if (isAdvancedAccordion(inspectorItemA)) {
     return 1;
   }
diff --git a/src/components/Modeler.vue b/src/components/Modeler.vue
index fd5a5ae4..11191227 100644
--- a/src/components/Modeler.vue
+++ b/src/components/Modeler.vue
@@ -451,6 +451,22 @@ export default {
     registerBpmnExtension(namespace, extension) {
       this.extensions[namespace] = extension;
     },
+    addNodeToControls(nodeType) {
+      if (!nodeType.control) {
+        return;
+      }
+      const data = {
+        type: nodeType.id,
+        icon: nodeType.icon,
+        label: nodeType.label,
+        bpmnType: nodeType.bpmnType,
+        rank: nodeType.rank || Infinity,
+      };
+      const category = nodeType.category;
+      const categoryData = this.controls[category] || [];
+      categoryData.push(data);
+      this.controls[category] = categoryData;
+    },
     // This registers a node to use in the bpmn modeler
     registerNode(nodeType, customParser) {
       const defaultParser = () => nodeType.id;
@@ -464,20 +480,7 @@ export default {
       this.nodeRegistry[nodeType.id] = nodeType;
 
       Vue.component(nodeType.id, nodeType.component);
-
-      if (nodeType.control) {
-        // Register the control for our control palette
-        if (!this.controls[nodeType.category]) {
-          this.$set(this.controls, nodeType.category, []);
-        }
-
-        this.controls[nodeType.category].push({
-          type: nodeType.id,
-          icon: nodeType.icon,
-          label: nodeType.label,
-          bpmnType: nodeType.bpmnType,
-        });
-      }
+      this.addNodeToControls(nodeType);
 
       const types = Array.isArray(nodeType.bpmnType)
         ? nodeType.bpmnType
diff --git a/src/components/controls.vue b/src/components/controls.vue
index 07e3a85b..04ef26e5 100644
--- a/src/components/controls.vue
+++ b/src/components/controls.vue
@@ -56,7 +56,8 @@ export default {
   computed: {
     controlItems() {
       return flatten(Object.values(this.controls))
-        .filter(control => control.label.toLowerCase().includes(this.filterQuery.toLowerCase()));
+        .filter(control => control.label.toLowerCase().includes(this.filterQuery.toLowerCase()))
+        .sort((node1, node2) => node1.rank - node2.rank);
     },
   },
   methods: {
diff --git a/src/components/inspectors/InspectorPanel.vue b/src/components/inspectors/InspectorPanel.vue
index f1c5c9cf..0908867c 100644
--- a/src/components/inspectors/InspectorPanel.vue
+++ b/src/components/inspectors/InspectorPanel.vue
@@ -1,6 +1,7 @@
 <template>
   <b-card no-body class="inspector-container border-top-0 border-bottom-0 border-right-0 rounded-0" data-test="inspector-container">
     <vue-form-renderer
+      :key="config[0].name"
       v-if="highlightedNode"
       :data="data"
       @update="updateDefinition"
diff --git a/src/components/inspectors/process.js b/src/components/inspectors/process.js
index e337c4a9..6aa3434d 100644
--- a/src/components/inspectors/process.js
+++ b/src/components/inspectors/process.js
@@ -16,7 +16,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/association/index.js b/src/components/nodes/association/index.js
index defb974b..06ce9357 100644
--- a/src/components/nodes/association/index.js
+++ b/src/components/nodes/association/index.js
@@ -25,7 +25,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/boundaryEvent/index.js b/src/components/nodes/boundaryEvent/index.js
index 788dfe11..6c6aef29 100644
--- a/src/components/nodes/boundaryEvent/index.js
+++ b/src/components/nodes/boundaryEvent/index.js
@@ -37,7 +37,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -56,7 +56,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/boundarySignalEvent/index.js b/src/components/nodes/boundarySignalEvent/index.js
index 3234cd39..ed14c85e 100644
--- a/src/components/nodes/boundarySignalEvent/index.js
+++ b/src/components/nodes/boundarySignalEvent/index.js
@@ -39,7 +39,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/boundaryTimerEvent/index.js b/src/components/nodes/boundaryTimerEvent/index.js
index c2b13d65..6ec073db 100644
--- a/src/components/nodes/boundaryTimerEvent/index.js
+++ b/src/components/nodes/boundaryTimerEvent/index.js
@@ -82,7 +82,7 @@ export default merge(cloneDeep(boundaryEventConfig), {
         config: {
           label: 'Timing Control',
           icon: 'clock',
-          name: 'timing-control',
+          name: 'inspector-accordion',
         },
         items: [
           {
@@ -102,7 +102,7 @@ export default merge(cloneDeep(boundaryEventConfig), {
           initiallyOpen: false,
           label: 'Advanced',
           icon: 'cogs',
-          name: 'advanced',
+          name: 'inspector-accordion',
         },
         items: [
           {
diff --git a/src/components/nodes/endEvent/index.js b/src/components/nodes/endEvent/index.js
index cc4a90cb..94511732 100644
--- a/src/components/nodes/endEvent/index.js
+++ b/src/components/nodes/endEvent/index.js
@@ -10,6 +10,7 @@ export default {
   category: 'BPMN',
   icon: require('@/assets/toolpanel/end-event.svg'),
   label: 'End Event',
+  rank: 3,
   definition(moddle, $t) {
     return moddle.create('bpmn:EndEvent', {
       name: $t('End Event'),
@@ -39,7 +40,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -58,7 +59,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/eventBasedGateway/index.js b/src/components/nodes/eventBasedGateway/index.js
index d16b9a7e..66f10636 100644
--- a/src/components/nodes/eventBasedGateway/index.js
+++ b/src/components/nodes/eventBasedGateway/index.js
@@ -32,7 +32,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -52,7 +52,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/exclusiveGateway/index.js b/src/components/nodes/exclusiveGateway/index.js
index 448f72ba..b64da01f 100644
--- a/src/components/nodes/exclusiveGateway/index.js
+++ b/src/components/nodes/exclusiveGateway/index.js
@@ -9,6 +9,7 @@ export default {
   category: 'BPMN',
   icon: require('@/assets/toolpanel/generic-gateway.svg'),
   label: 'Gateway',
+  rank: 5,
   definition(moddle, $t) {
     return moddle.create('bpmn:ExclusiveGateway', {
       name: $t('New Exclusive Gateway'),
@@ -33,7 +34,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -53,7 +54,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/gateway/index.js b/src/components/nodes/gateway/index.js
index d165928c..fdf0b847 100644
--- a/src/components/nodes/gateway/index.js
+++ b/src/components/nodes/gateway/index.js
@@ -5,7 +5,7 @@ export default {
   id: 'processmaker-modeler-gateway',
   component,
   bpmnType: ['bpmn:ExclusiveGateway', 'bpmn:ParallelGateway', 'bpmn:InclusiveGateway'],
-  control: true,
+  control: false,
   category: 'BPMN',
   label: 'Gateway',
   definition(moddle, $t) {
@@ -32,7 +32,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/inclusiveGateway/index.js b/src/components/nodes/inclusiveGateway/index.js
index ad630f85..5ec99b35 100644
--- a/src/components/nodes/inclusiveGateway/index.js
+++ b/src/components/nodes/inclusiveGateway/index.js
@@ -35,7 +35,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -66,7 +66,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/intermediateMessageEvent/index.js b/src/components/nodes/intermediateMessageEvent/index.js
index 8b79d000..fb324fde 100644
--- a/src/components/nodes/intermediateMessageEvent/index.js
+++ b/src/components/nodes/intermediateMessageEvent/index.js
@@ -38,7 +38,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -57,7 +57,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/intermediateTimerEvent/index.js b/src/components/nodes/intermediateTimerEvent/index.js
index b7def9ef..0640db5f 100644
--- a/src/components/nodes/intermediateTimerEvent/index.js
+++ b/src/components/nodes/intermediateTimerEvent/index.js
@@ -13,6 +13,7 @@ export default {
   category: 'BPMN',
   icon: require('@/assets/toolpanel/generic-intermediate-event.svg'),
   label: 'Intermediate Event',
+  rank: 2,
   definition(moddle, $t) {
     return moddle.create('bpmn:IntermediateCatchEvent', {
       name: $t('Intermediate Timer Event'),
@@ -89,7 +90,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -107,7 +108,7 @@ export default {
           config: {
             label: 'Timing Control',
             icon: 'clock',
-            name: 'timing-control',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -127,7 +128,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/manualTask/index.js b/src/components/nodes/manualTask/index.js
index 40b60c7a..89127c7b 100644
--- a/src/components/nodes/manualTask/index.js
+++ b/src/components/nodes/manualTask/index.js
@@ -37,7 +37,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -56,7 +56,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/messageFlow/index.js b/src/components/nodes/messageFlow/index.js
index 76e03d66..d1721be5 100644
--- a/src/components/nodes/messageFlow/index.js
+++ b/src/components/nodes/messageFlow/index.js
@@ -22,7 +22,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/parallelGateway/index.js b/src/components/nodes/parallelGateway/index.js
index da5d49ea..35d8158f 100644
--- a/src/components/nodes/parallelGateway/index.js
+++ b/src/components/nodes/parallelGateway/index.js
@@ -34,7 +34,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -66,7 +66,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/pool/index.js b/src/components/nodes/pool/index.js
index 089282fa..325de14b 100644
--- a/src/components/nodes/pool/index.js
+++ b/src/components/nodes/pool/index.js
@@ -36,7 +36,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -55,7 +55,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/poolLane/index.js b/src/components/nodes/poolLane/index.js
index 13a3f688..418f64f3 100644
--- a/src/components/nodes/poolLane/index.js
+++ b/src/components/nodes/poolLane/index.js
@@ -30,7 +30,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -49,7 +49,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/scriptTask/index.js b/src/components/nodes/scriptTask/index.js
index db1b568a..0d23dda8 100644
--- a/src/components/nodes/scriptTask/index.js
+++ b/src/components/nodes/scriptTask/index.js
@@ -36,7 +36,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -55,7 +55,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/sequenceFlow/index.js b/src/components/nodes/sequenceFlow/index.js
index e51ce5cd..81450a5b 100644
--- a/src/components/nodes/sequenceFlow/index.js
+++ b/src/components/nodes/sequenceFlow/index.js
@@ -60,7 +60,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -80,7 +80,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/startEvent/index.js b/src/components/nodes/startEvent/index.js
index 10c647be..d7c5f6ec 100644
--- a/src/components/nodes/startEvent/index.js
+++ b/src/components/nodes/startEvent/index.js
@@ -11,6 +11,7 @@ export default {
   category: 'BPMN',
   icon: require('@/assets/toolpanel/start-event.svg'),
   label: 'Start Event',
+  rank: 1,
   definition(moddle, $t) {
     return moddle.create('bpmn:StartEvent', {
       name: $t('Start Event'),
@@ -45,7 +46,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -64,7 +65,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/startTimerEvent/index.js b/src/components/nodes/startTimerEvent/index.js
index 5ca89462..4f598711 100644
--- a/src/components/nodes/startTimerEvent/index.js
+++ b/src/components/nodes/startTimerEvent/index.js
@@ -84,7 +84,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -102,7 +102,7 @@ export default {
           config: {
             label: 'Timing Control',
             icon: 'clock',
-            name: 'timing-control',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -122,7 +122,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/subProcess/index.js b/src/components/nodes/subProcess/index.js
index dae7f583..d6a36fd4 100644
--- a/src/components/nodes/subProcess/index.js
+++ b/src/components/nodes/subProcess/index.js
@@ -53,7 +53,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -79,7 +79,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/task/index.js b/src/components/nodes/task/index.js
index 4ceddc28..a14c6f0b 100644
--- a/src/components/nodes/task/index.js
+++ b/src/components/nodes/task/index.js
@@ -11,6 +11,7 @@ export default {
   bpmnType: ['bpmn:Task', 'bpmn:UserTask', 'bpmn:GlobalTask', 'bpmn:SubProcess'],
   control: true,
   category: 'BPMN',
+  rank: 4,
   icon: require('@/assets/toolpanel/task.svg'),
   label: 'Task',
   definition(moddle, $t) {
@@ -37,7 +38,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -56,7 +57,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {
diff --git a/src/components/nodes/textAnnotation/index.js b/src/components/nodes/textAnnotation/index.js
index 5ea50f24..b91569db 100644
--- a/src/components/nodes/textAnnotation/index.js
+++ b/src/components/nodes/textAnnotation/index.js
@@ -1,5 +1,6 @@
 import component from './textAnnotation.vue';
 import idConfigSettings from '@/components/inspectors/idConfigSettings';
+
 export const id = 'processmaker-modeler-text-annotation';
 
 export default {
@@ -50,7 +51,7 @@ export default {
             initiallyOpen: true,
             label: 'Configuration',
             icon: 'cog',
-            name: 'configuration',
+            name: 'inspector-accordion',
           },
           items: [
             {
@@ -71,7 +72,7 @@ export default {
             initiallyOpen: false,
             label: 'Advanced',
             icon: 'cogs',
-            name: 'advanced',
+            name: 'inspector-accordion',
           },
           items: [
             {


Test patch:
diff --git a/tests/e2e/specs/Modeler.spec.js b/tests/e2e/specs/Modeler.spec.js
index 08d04e2b..1851ee9f 100644
--- a/tests/e2e/specs/Modeler.spec.js
+++ b/tests/e2e/specs/Modeler.spec.js
@@ -108,7 +108,7 @@ describe('Modeler', () => {
     const taskPosition = { x: 200, y: 200 };
     dragFromSourceToDest(nodeTypes.task, taskPosition);
     getElementAtPosition(taskPosition).click();
-    cy.get('#accordion-button-advanced').click();
+    cy.contains('Advanced').click();
 
     cy.get('[name=id]').should('have.value', 'node_2');
 
diff --git a/tests/e2e/specs/UndoRedo.spec.js b/tests/e2e/specs/UndoRedo.spec.js
index 6204f382..80bbb75a 100644
--- a/tests/e2e/specs/UndoRedo.spec.js
+++ b/tests/e2e/specs/UndoRedo.spec.js
@@ -224,7 +224,7 @@ describe('Undo/redo', () => {
 
     waitToRenderAllShapes();
     getElementAtPosition(startEventPosition).click();
-    cy.get('#accordion-button-advanced').click();
+    cy.contains('Advanced').click();
 
     const newId = '1234';
     const newName = 'foobar';
diff --git a/tests/unit/inspectorExtensionManager.spec.js b/tests/unit/inspectorExtensionManager.spec.js
index cb8cde96..93f50c51 100644
--- a/tests/unit/inspectorExtensionManager.spec.js
+++ b/tests/unit/inspectorExtensionManager.spec.js
@@ -20,7 +20,8 @@ describe('Inspector Extension Manager', function() {
     config = {
       id: 5,
       container: true,
-      name: 'advanced',
+      name: 'inspector-accordion',
+      label: 'Advanced',
     };
   });