refactor panes (#4125)

* remove router listeners
* remove some hard-coding

src/ui/layout/Layout.vue

@@ -53,7 +53,7 @@
             class="l-shell__pane-tree"
             handle="after"
             label="Browse"
-            collapsable
+            hide-param="hideTree"
             @start-resizing="onStartResizing"
             @end-resizing="onEndResizing"
         >
@@ -104,7 +104,7 @@
             class="l-shell__pane-inspector l-pane--holds-multipane"
             handle="before"
             label="Inspect"
-            collapsable
+            hide-param="hideInspector"
             @start-resizing="onStartResizing"
             @end-resizing="onEndResizing"
         >

src/ui/layout/LayoutSpec.js

@@ -0,0 +1,171 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import {
+    createOpenMct,
+    resetApplicationState
+} from 'utils/testing';
+import Vue from 'vue';
+import Layout from './Layout.vue';
+
+describe('Open MCT Layout:', () => {
+    let openmct;
+    let element;
+    let components;
+
+    beforeEach((done) => {
+        openmct = createOpenMct();
+        openmct.on('start', done);
+
+        // to silence error from BrowseBar.vue
+        spyOn(openmct.objectViews, 'get')
+            .and.callFake(() => []);
+
+        openmct.startHeadless();
+    });
+
+    afterEach(() => {
+        return resetApplicationState(openmct);
+    });
+
+    describe('the pane:', () => {
+        it('is displayed on layout load', async () => {
+            await createLayout();
+            await Vue.nextTick();
+
+            Object.entries(components).forEach(([name, component]) => {
+                expect(
+                    component.pane
+                ).toBeTruthy();
+
+                expect(
+                    isCollapsed(component.pane)
+                ).toBeFalse();
+            });
+        });
+
+        it('is collapsed on layout load if specified by a hide param', async () => {
+            setHideParams();
+
+            await createLayout();
+            await Vue.nextTick();
+
+            Object.entries(components).forEach(([name, component]) => {
+                expect(
+                    isCollapsed(component.pane)
+                ).toBeTrue();
+            });
+        });
+
+        it('on toggle collapses if expanded', async () => {
+            await createLayout();
+            toggleCollapseButtons();
+            await Vue.nextTick();
+
+            Object.entries(components).forEach(([name, component]) => {
+                expect(
+                    openmct.router.getSearchParam(component.param)
+                ).toEqual('true');
+
+                expect(
+                    isCollapsed(component.pane)
+                ).toBeTrue();
+            });
+        });
+
+        it('on toggle expands if collapsed', async () => {
+            setHideParams();
+
+            await createLayout();
+            toggleExpandButtons();
+            await Vue.nextTick();
+
+            Object.entries(components).forEach(([name, component]) => {
+                expect(
+                    openmct.router.getSearchParam(component.param)
+                ).not.toEqual('true');
+
+                expect(
+                    isCollapsed(component.pane)
+                ).toBeFalse();
+            });
+        });
+    });
+
+    async function createLayout() {
+        const el = document.createElement('div');
+        const child = document.createElement('div');
+        el.appendChild(child);
+
+        element = await new Vue({
+            el,
+            components: {
+                Layout
+            },
+            provide: {
+                openmct
+            },
+            template: `<Layout ref="layout"/>`
+        }).$mount().$el;
+
+        setComponents();
+    }
+
+    function setComponents() {
+        components = {
+            tree: {
+                param: 'hideTree',
+                pane: element.querySelector('.l-shell__pane-tree'),
+                collapseButton: element.querySelector('.l-shell__pane-tree .l-pane__collapse-button'),
+                expandButton: element.querySelector('.l-shell__pane-tree .l-pane__expand-button')
+            },
+            inspector: {
+                param: 'hideInspector',
+                pane: element.querySelector('.l-shell__pane-inspector'),
+                collapseButton: element.querySelector('.l-shell__pane-inspector .l-pane__collapse-button'),
+                expandButton: element.querySelector('.l-shell__pane-inspector .l-pane__expand-button')
+            }
+        };
+    }
+
+    function isCollapsed(el) {
+        return el.classList.contains('l-pane--collapsed');
+    }
+
+    function setHideParams() {
+        Object.entries(components).forEach(([name, component]) => {
+            openmct.router.setSearchParam(component.param, true);
+        });
+    }
+
+    function toggleCollapseButtons() {
+        Object.entries(components).forEach(([name, component]) => {
+            component.collapseButton.click();
+        });
+    }
+
+    function toggleExpandButtons() {
+        Object.entries(components).forEach(([name, component]) => {
+            component.expandButton.click();
+        });
+    }
+});

src/ui/layout/pane.vue

@@ -41,10 +41,6 @@
 
 <script>
 const COLLAPSE_THRESHOLD_PX = 40;
-const HIDE_TREE_PARAM = 'hideTree';
-const HIDE_INSPECTOR_PARAM = 'hideInspector';
-const PANE_INSPECTOR = 'Inspect';
-const PANE_TREE = 'Browse';
 
 export default {
     inject: ['openmct'],
@@ -56,13 +52,13 @@ export default {
                 return ['', 'before', 'after'].indexOf(value) !== -1;
             }
         },
-        collapsable: {
-            type: Boolean,
-            default: false
-        },
         label: {
             type: String,
             default: ''
+        },
+        hideParam: {
+            type: String,
+            default: ''
         }
     },
     data() {
@@ -71,6 +67,11 @@ export default {
             resizing: false
         };
     },
+    computed: {
+        collapsable() {
+            return this.hideParam && this.hideParam.length;
+        }
+    },
     beforeMount() {
         this.type = this.$parent.type;
         this.styleProp = (this.type === 'horizontal') ? 'width' : 'height';
@@ -78,39 +79,25 @@ export default {
     async mounted() {
         await this.$nextTick();
         // Hide tree and/or inspector pane if specified in URL
-        this.handleHideUrl();
-        this.openmct.router.on('change:params', this.handleHideUrl);
-    },
-    beforeDestroy() {
-        this.openmct.router.off('change:params', this.handleHideUrl);
+        if (this.collapsable) {
+            this.handleHideUrl();
+        }
     },
     methods: {
         toggleCollapse: function (e) {
-            let target = this.label === PANE_TREE ? HIDE_TREE_PARAM : HIDE_INSPECTOR_PARAM;
-            this.collapsed = !this.collapsed;
             if (this.collapsed) {
-                this.handleCollapse();
-                this.addHideParam(target);
-            } else {
                 this.handleExpand();
-                this.removeHideParam(target);
+                this.removeHideParam(this.hideParam);
+            } else {
+                this.handleCollapse();
+                this.addHideParam(this.hideParam);
             }
         },
         handleHideUrl: function () {
-            if (!this.collapsable) {
-                return;
-            }
+            const hideParam = this.openmct.router.getSearchParam(this.hideParam);
 
-            let hideTreeParam = this.openmct.router.getSearchParam(HIDE_TREE_PARAM);
-            let hideInspectorParam = this.openmct.router.getSearchParam(HIDE_INSPECTOR_PARAM);
-            let hideTree = hideTreeParam === 'true' && this.label === PANE_TREE;
-            let hideInspector = hideInspectorParam === 'true' && this.label === PANE_INSPECTOR;
-            if (hideTree || hideInspector) {
-                this.collapsed = true;
+            if (hideParam === 'true') {
                 this.handleCollapse();
-            } else {
-                this.collapsed = false;
-                this.handleExpand();
             }
         },
         addHideParam: function (target) {
@@ -122,11 +109,13 @@ export default {
         handleCollapse: function () {
             this.currentSize = (this.dragCollapse === true) ? this.initial : this.$el.style[this.styleProp];
             this.$el.style[this.styleProp] = '';
+            this.collapsed = true;
         },
         handleExpand: function () {
             this.$el.style[this.styleProp] = this.currentSize;
             delete this.currentSize;
             delete this.dragCollapse;
+            this.collapsed = false;
         },
         trackSize: function () {
             if (!this.dragCollapse === true) {

src/ui/layout/paneSpec.js

@@ -1,90 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-import {
-    createOpenMct,
-    resetApplicationState
-} from 'utils/testing';
-
-describe("the pane", () => {
-    let openmct;
-    let appHolder;
-    let element;
-    let child;
-    let resolveFunction;
-
-    beforeEach((done) => {
-        openmct = createOpenMct();
-
-        appHolder = document.createElement('div');
-        appHolder.style.width = '640px';
-        appHolder.style.height = '480px';
-
-        openmct = createOpenMct();
-        openmct.install(openmct.plugins.MyItems());
-        openmct.install(openmct.plugins.LocalTimeSystem());
-        openmct.install(openmct.plugins.UTCTimeSystem());
-
-        element = document.createElement('div');
-        child = document.createElement('div');
-        element.appendChild(child);
-
-        openmct.on('start', done);
-        openmct.start(appHolder);
-
-        document.body.append(appHolder);
-
-    });
-
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
-    it('toggling tree will toggle tree hide params', (done) => {
-        document.querySelector('.l-shell__pane-tree .l-pane__collapse-button').click();
-        expect(openmct.router.getSearchParam('hideTree')).toBe('true');
-        done();
-    });
-
-    it('tree pane collapses when adding hide tree param in URL', () => {
-        openmct.router.setSearchParam('hideTree', 'true');
-        expect(document.querySelector('.l-shell__pane-tree.l-pane--collapsed')).toBeDefined();
-    });
-
-    it('inspector pane collapses when adding hide inspector param in URL', () => {
-        openmct.router.setSearchParam('hideInspector', 'true');
-        expect(document.querySelector('.l-shell__pane-inspector.l-pane--collapsed')).toBeDefined();
-    });
-
-    it('toggle inspector pane will toggle inspector hide param', (done) => {
-        // There's a short delay on addubg the param.
-        resolveFunction = () => {
-            setTimeout(() => {
-                expect(openmct.router.getSearchParam('hideInspector')).toBe('true');
-                done();
-            }, 500);
-        };
-
-        openmct.router.on('change:params', resolveFunction);
-        document.querySelector('.l-shell__pane-inspector .l-pane__collapse-button').click();
-    });
-
-});