Repository: ProcessMaker/modeler (js)

Issue:
Advanced Accordion always last
The advanced accordion should always be the last accordion in the inspector panel:

<img width="284" alt="Screen Shot 2019-09-30 at 11 18 43 AM" src="https://user-images.githubusercontent.com/7561061/65892326-146e5f80-e374-11e9-8cb0-b4f8bac53849.png">

In some cases, the advanced accordion does not appear last, like for the task component:
<img width="291" alt="Screen Shot 2019-09-30 at 11 19 20 AM" src="https://user-images.githubusercontent.com/7561061/65892392-37990f00-e374-11e9-8a2c-0fdab0704184.png">

This occurs because calls to `registerInspectorExtension` does not maintain the order of the inspector accordions.

Pull request:
Fix accordion sorting
Fixes #709.


Patch:
diff --git a/src/components/InspectorExtensionManager.js b/src/components/InspectorExtensionManager.js
index ccff948b..637cddf8 100644
--- a/src/components/InspectorExtensionManager.js
+++ b/src/components/InspectorExtensionManager.js
@@ -1,16 +1,15 @@
 export default function registerInspectorExtension(node, config) {
   const inspectorItems = getInspectorItems(node, config);
   addInspectorItem(inspectorItems, config);
-  inspectorItems.sort(moveAdvancedAccordionToBottom);
+  node.inspectorConfig[0].items.sort(moveAdvancedAccordionToBottom);
 }
 
-function moveAdvancedAccordionToBottom(inspectorItemA, inspectorItemB) {
-  const isAdvancedAccordion = (inspectorItem) => inspectorItem.label === 'Advanced';
-  if (isAdvancedAccordion(inspectorItemA)) {
+function moveAdvancedAccordionToBottom(accordionA, accordionB) {
+  if (isAdvancedAccordion(accordionA)) {
     return 1;
   }
 
-  if (isAdvancedAccordion(inspectorItemB)) {
+  if (isAdvancedAccordion(accordionB)) {
     return -1;
   }
 
@@ -34,3 +33,7 @@ function getInspectorItems(node, config) {
   }
   return node.inspectorConfig[0].items[0].items;
 }
+
+function isAdvancedAccordion(accordion) {
+  return accordion.config && accordion.config.label === 'Advanced';
+}
diff --git a/src/components/controls.vue b/src/components/controls.vue
index 04ef26e5..313e488a 100644
--- a/src/components/controls.vue
+++ b/src/components/controls.vue
@@ -106,6 +106,8 @@ export default {
 </script>
 
 <style lang="scss">
+$border-color: rgba(0, 0, 0, 0.125);
+
 .card-header {
   background: #f7f7f7;
 }
@@ -114,6 +116,14 @@ export default {
   border-top: 0;
 }
 
+.controls-column {
+  .list-group {
+    &:last-child {
+      border-bottom: 1px solid $border-color;
+    }
+  }
+}
+
 .tool {
   cursor: grab;
   user-select: none;


Test patch:
diff --git a/src/setup/extensions/testTaskInspectorExtension.js b/src/setup/extensions/testTaskInspectorExtension.js
index bff5f459..1612520d 100644
--- a/src/setup/extensions/testTaskInspectorExtension.js
+++ b/src/setup/extensions/testTaskInspectorExtension.js
@@ -1,6 +1,4 @@
-import {
-  task,
-} from '@/components/nodes';
+import { task } from '@/components/nodes';
 
 window.ProcessMaker.EventBus.$on('modeler-init', ({ registerInspectorExtension }) => {
 
@@ -17,6 +15,7 @@ window.ProcessMaker.EventBus.$on('modeler-init', ({ registerInspectorExtension }
       validation: 'numeric|min:1',
     },
   });
+
   registerInspectorExtension(task, {
     id: 'pm-assigned-users',
     component: 'FormSelect',
@@ -32,4 +31,25 @@ window.ProcessMaker.EventBus.$on('modeler-init', ({ registerInspectorExtension }
       ],
     },
   });
+
+  registerInspectorExtension(task, {
+    component: 'FormAccordion',
+    container: true,
+    config: {
+      initiallyOpen: false,
+      label: 'Assignment Rules',
+      icon: 'users',
+      name: 'assignmentRules',
+    },
+    items: [
+      {
+        component: 'FormInput',
+        config: {
+          label: 'Task Assignment',
+          helper: '',
+          name: 'taskAssignment',
+        },
+      },
+    ],
+  });
 });
diff --git a/tests/unit/inspectorExtensionManager.spec.js b/tests/unit/inspectorExtensionManager.spec.js
index 93f50c51..8053d308 100644
--- a/tests/unit/inspectorExtensionManager.spec.js
+++ b/tests/unit/inspectorExtensionManager.spec.js
@@ -17,32 +17,31 @@ describe('Inspector Extension Manager', function() {
         ],
       }],
     };
+
     config = {
       id: 5,
       container: true,
       name: 'inspector-accordion',
-      label: 'Advanced',
+      config: {
+        label: 'Advanced',
+      },
     };
   });
 
   it('should always sort the advanced accordion to the end when the config is a container', function() {
     registerInspectorExtension(node, config);
+    registerInspectorExtension(node, {
+      id: 'no-advanced-accordion',
+      container: true,
+      config: {
+        label: 'Non-advanced',
+      },
+    });
 
     const [lastItem] = node.inspectorConfig[0].items.slice(-1);
     expect(lastItem).toBe(config);
   });
 
-  it('should always sort the advanced accordion to the end when the config is not a container', function() {
-    delete config.container;
-    const items = node.inspectorConfig[0].items;
-    node.inspectorConfig[0].items = [{ items }];
-
-    registerInspectorExtension(node, config);
-
-    const [lastItem] = node.inspectorConfig[0].items[0].items.slice(-1);
-    expect(lastItem).toBe(config);
-  });
-
   it('should update items that have the same id', function() {
     config.id = 1;