Repository: ProcessMaker/modeler
Pull request #1552 (2023-05-16 20:50:37)

FOUR-8582: Explorer Rail can be toggled with Add button on bottom rail
## Solution
- The nodeStore has been used to toggle the explorer state across files like `explorer.vue` and `Controls.vue`.

## How to Test
Test the steps above

## Related Tickets & Packages
- [8582](https://processmaker.atlassian.net/browse/FOUR-8582)

## Code Review Checklist
- [ ] I have pulled this code locally and tested it on my instance, along with any associated packages.
- [ ] This code adheres to [ProcessMaker Coding Guidelines](https://github.com/ProcessMaker/processmaker/wiki/Coding-Guidelines).
- [ ] This code includes a unit test or an E2E test that tests its functionality, or is covered by an existing test.
- [ ] This solution fixes the bug reported in the original ticket.
- [ ] This solution does not alter the expected output of a component in a way that would break existing Processes.
- [ ] This solution does not implement any breaking changes that would invalidate documentation or cause existing Processes to fail.
- [ ] This solution has been tested with enterprise packages that rely on its functionality and does not introduce bugs in those packages.
- [ ] This code does not duplicate functionality that already exists in the framework or in ProcessMaker.
- [ ] This ticket conforms to the PRD associated with this part of ProcessMaker.

ci:deploy



Patch:
diff --git a/src/components/railBottom/controls/Controls.vue b/src/components/railBottom/controls/Controls.vue
index 2efd23a5..d8c6b395 100644
--- a/src/components/railBottom/controls/Controls.vue
+++ b/src/components/railBottom/controls/Controls.vue
@@ -6,7 +6,12 @@
     </li>
 
     <li class="control-item">
-      <div class="control-add" :title="$t('Add')" v-b-tooltip.hover>
+      <div
+        :class="{'control-add': true, 'control-active': explorerOpen}"
+        :title="$t('Add')"
+        v-b-tooltip.hover
+        @click="toggleExplorer"
+      >
         <img :src="plusIcon" :alt="$t('Add')">
       </div>
     </li>
@@ -15,6 +20,8 @@
 
 <script>
 import SubmenuPopper from './SubmenuPopper/SubmenuPopper.vue';
+import nodeTypesStore from '@/nodeTypesStore';
+
 export default ({
   components: {
     SubmenuPopper,
@@ -188,6 +195,17 @@ export default ({
       plusIcon: require('@/assets/railBottom/plus-lg-light.svg'),
     };
   },
+  methods: {
+    toggleExplorer() {
+      nodeTypesStore.commit('toggleExplorer');
+      nodeTypesStore.commit('clearFilteredNodes');
+    },
+  },
+  computed: {
+    explorerOpen() {
+      return nodeTypesStore.getters.getExplorerOpen;
+    },
+  },
 });
 
 </script>
diff --git a/src/components/railBottom/railBottom.scss b/src/components/railBottom/railBottom.scss
index 767d4148..f2d8562c 100644
--- a/src/components/railBottom/railBottom.scss
+++ b/src/components/railBottom/railBottom.scss
@@ -1,7 +1,8 @@
 .rail {
   &-container {
-    position: relative;
-    bottom: 126px;
+    position: absolute;
+    bottom: 20px;
+    left: 0;
     display: flex;
     align-items: center;
     width: 100%;
diff --git a/src/components/rails/explorer-rail/explorer-rail.scss b/src/components/rails/explorer-rail/explorer-rail.scss
index 61783510..624cc706 100644
--- a/src/components/rails/explorer-rail/explorer-rail.scss
+++ b/src/components/rails/explorer-rail/explorer-rail.scss
@@ -7,11 +7,13 @@ $secondary-color-nav: #6c757d;
 	max-width: $controls-column-max-width;
 	background-color: white;
 	width: 100%;
+	height: 80%;
 	transition: all $controls-transition ease-out;
 	z-index: 2;
 	border-radius: 4px;
 	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
 	padding-left: 1rem;
+	overflow-y: auto;
 }
 
 .rail-menu {
diff --git a/src/components/rails/explorer-rail/explorer.vue b/src/components/rails/explorer-rail/explorer.vue
index 0029ebf2..c6a8240f 100644
--- a/src/components/rails/explorer-rail/explorer.vue
+++ b/src/components/rails/explorer-rail/explorer.vue
@@ -22,8 +22,6 @@ export default {
   },
   data() {
     return {
-      // TODO set to false when the bottom control rail is merged
-      expanded: true,
       tabs: [{
         idx: 0,
         label: 'Add Object',
@@ -44,8 +42,8 @@ export default {
     filteredNodes() {
       return nodeTypesStore.getters.getFilteredNodeTypes;
     },
-    unpinnedObjects() {
-      return this.objects.filter((obj) => !this.pinnedObjects.includes(obj));
+    explorerOpen() {
+      return nodeTypesStore.getters.getExplorerOpen;
     },
   },
   created() {
@@ -55,21 +53,28 @@ export default {
     faTimes() {
       return faTimes;
     },
+    /**
+     * @param {string} idx
+     * @return void
+     */
     setTabIndex(idx) {
+      if (this.tabIndex === idx) return;
       this.tabIndex = idx;
-    },
-    toggleRail() {
-      this.expanded = !this.expanded;
+      this.clearPinnedObjects();
     },
     closeRail() {
-      this.expanded = false;
+      nodeTypesStore.commit('closeExplorer');
+      this.clearPinnedObjects();
+    },
+    clearPinnedObjects() {
+      nodeTypesStore.commit('clearFilteredNodes');
     },
   },
 };
 </script>
 
 <template>
-  <div id="explorer-rail" data-test="explorer-rail" v-if="expanded">
+  <div id="explorer-rail" data-test="explorer-rail" v-if="explorerOpen">
     <div class="rail-menu">
       <b-tabs class="tabs--container" :no-nav-style="true">
         <template v-for="tab in tabs">
diff --git a/src/nodeTypesStore.js b/src/nodeTypesStore.js
index 4e75e9ac..7bb6b34c 100644
--- a/src/nodeTypesStore.js
+++ b/src/nodeTypesStore.js
@@ -10,11 +10,13 @@ export default new Vuex.Store({
     nodeTypes: [],
     pinnedNodeTypes: [],
     filteredNodeTypes: [],
+    explorerOpen: false,
   },
   getters: {
     getNodeTypes: state => state.nodeTypes,
     getPinnedNodeTypes: state => state.pinnedNodeTypes,
     getFilteredNodeTypes: state => state.filteredNodeTypes,
+    getExplorerOpen: state => state.explorerOpen,
   },
   mutations: {
     setNodeTypes(state, nodeTypes) {
@@ -47,6 +49,12 @@ export default new Vuex.Store({
     clearFilteredNodes(state) {
       state.filteredNodeTypes = [];
     },
+    closeExplorer(state) {
+      state.explorerOpen = false;
+    },
+    toggleExplorer(state) {
+      state.explorerOpen = !state.explorerOpen;
+    },
   },
   actions: {
     // eslint-disable-next-line no-unused-vars


Test patch:
diff --git a/tests/unit/rails/__snapshots__/explorer.spec.js.snap b/tests/unit/rails/__snapshots__/explorer.spec.js.snap
index c89de17d..2c880f2d 100644
--- a/tests/unit/rails/__snapshots__/explorer.spec.js.snap
+++ b/tests/unit/rails/__snapshots__/explorer.spec.js.snap
@@ -1,46 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Explorer Rail should render the component 1`] = `
-<div
-  data-test="explorer-rail"
-  id="explorer-rail"
->
-  <div
-    class="rail-menu"
-  >
-    <b-tabs-stub
-      class="tabs--container"
-      nonavstyle="true"
-      tag="div"
-    >
-      <b-tab-stub
-        active="true"
-        tag="div"
-      />
-      <b-tab-stub
-        tag="div"
-      />
-    </b-tabs-stub>
-     
-    <div
-      class="close--container"
-    >
-      <font-awesome-icon-stub
-        icon="[object Object]"
-      />
-    </div>
-  </div>
-   
-  <div
-    class="node-types__container"
-  >
-    <filter-node-types-stub />
-     
-    <node-types-loop-stub />
-  </div>
-   
-  <div
-    class="pm-blocks__container"
-  />
-</div>
-`;
+exports[`Explorer Rail should render the component 1`] = `<!---->`;
diff --git a/tests/unit/rails/explorer.spec.js b/tests/unit/rails/explorer.spec.js
index 3cf395b9..ab6762cf 100644
--- a/tests/unit/rails/explorer.spec.js
+++ b/tests/unit/rails/explorer.spec.js
@@ -32,8 +32,6 @@ describe('Explorer Rail', () => {
     expect(wrapper.vm.$el).toMatchSnapshot();
   });
   it('should check for vdata defaults', () => {
-    // TODO uncomment the code when the bottom rail has been merged
-    // expect(wrapper.vm.expanded).toBe(false);
     expect(wrapper.vm.tabs).toHaveLength(2);
     expect(wrapper.vm.tabIndex).toBe(0);
   });
@@ -41,13 +39,11 @@ describe('Explorer Rail', () => {
     wrapper.vm.setTabIndex(1);
     expect(wrapper.vm.tabIndex).toBe(1);
   });
-  // TODO replace the xit with it when bottom rail has been merged
   xit('should toggle the rail', () => {
     expect(wrapper.vm.expanded).toBe(false);
     wrapper.vm.toggleRail();
     expect(wrapper.vm.expanded).toBe(true);
   });
-  // TODO replace the xit with it when bottom rail has been merged
   xit('should close the rail', () => {
     // toggling the rail to be opened
     wrapper.vm.toggleRail();