Cleanup unused var

* Modify flexible layout pages to make them not draggable in browse mode and add e2e test

e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js

@@ -0,0 +1,66 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+
+const { test, expect } = require('../../../../pluginFixtures');
+const { createDomainObjectWithDefaults } = require('../../../../appActions');
+
+test.describe('Testing Flexible Layout @unstable', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto('./', { waitUntil: 'networkidle' });
+
+        // Create Sine Wave Generator
+        await createDomainObjectWithDefaults(page, {
+            type: 'Sine Wave Generator',
+            name: "Test Sine Wave Generator"
+        });
+
+        // Create Clock Object
+        await createDomainObjectWithDefaults(page, {
+            type: 'Clock',
+            name: "Test Clock"
+        });
+    });
+    test('panes have the appropriate draggable attribute while in Edit and Browse modes', async ({ page }) => {
+        // Create a Flexible Layout
+        await createDomainObjectWithDefaults(page, {
+            type: 'Flexible Layout',
+            name: "Test Flexible Layout"
+        });
+        // Edit Flexible Layout
+        await page.locator('[title="Edit"]').click();
+
+        // Expand the 'My Items' folder in the left tree
+        await page.locator('.c-tree__item__view-control.c-disclosure-triangle').first().click();
+        // Add the Sine Wave Generator and Clock to the Flexible Layout
+        await page.dragAndDrop('text=Test Sine Wave Generator', '.c-fl__container.is-empty');
+        await page.dragAndDrop('text=Test Clock', '.c-fl__container.is-empty');
+        // Check that panes can be dragged while Flexible Layout is in Edit mode
+        let dragWrapper = await page.locator('.c-fl-container__frames-holder .c-fl-frame__drag-wrapper').first();
+        await expect(dragWrapper).toHaveAttribute('draggable', 'true');
+        // Save Flexible Layout
+        await page.locator('button[title="Save"]').click();
+        await page.locator('text=Save and Finish Editing').click();
+        // Check that panes are not draggable while Flexible Layout is in Browse mode
+        dragWrapper = await page.locator('.c-fl-container__frames-holder .c-fl-frame__drag-wrapper').first();
+        await expect(dragWrapper).toHaveAttribute('draggable', 'false');
+    });
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "2.0.8",
+  "version": "2.1.0",
   "description": "The Open MCT core platform",
   "devDependencies": {
     "@babel/eslint-parser": "7.18.9",

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -281,6 +281,10 @@ export default {
                 return false;
             }
 
+            if (!this.isEditing) {
+                return false;
+            }
+
             let containerId = event.dataTransfer.getData('containerid');
             let container = this.containers.filter((c) => c.id === containerId)[0];
             let containerPos = this.containers.indexOf(container);

src/plugins/flexibleLayout/components/frame.vue

@@ -31,7 +31,7 @@
     <div
         ref="frame"
         class="c-frame c-fl-frame__drag-wrapper is-selectable u-inspectable is-moveable"
-        draggable="true"
+        :draggable="draggable"
         @dragstart="initDrag"
     >
         <object-frame
@@ -93,6 +93,9 @@ export default {
     computed: {
         hasFrame() {
             return !this.frame.noFrame;
+        },
+        draggable() {
+            return this.isEditing;
         }
     },
     mounted() {

src/plugins/timelist/Timelist.vue

@@ -110,7 +110,23 @@ export default {
     },
     mounted() {
         this.isEditing = this.openmct.editor.isEditing();
-        this.timestamp = Date.now();
+        this.timestamp = this.openmct.time.clock()?.currentValue;
+        this.openmct.time.on('clock', (newClock) => {
+            this.filterValue = this.domainObject.configuration.filter;
+            //newclock can be undefined
+            if (newClock === undefined) {
+                // Show everything for fixed time
+                this.hideAll = false;
+                this.showAll = true;
+                // clear also invokes listActivities
+                this.clearPreviousActivities();
+            } else {
+                this.setSort();
+                this.setViewBounds();
+                this.listActivities();
+            }
+        });
+
         this.getPlanDataAndSetConfig(this.domainObject);
 
         this.unlisten = this.openmct.objects.observe(this.domainObject, 'selectFile', this.planFileUpdated);
@@ -118,6 +134,7 @@ export default {
         this.removeStatusListener = this.openmct.status.observe(this.domainObject.identifier, this.setStatus);
         this.status = this.openmct.status.get(this.domainObject.identifier);
         this.unlistenTicker = ticker.listen(this.clearPreviousActivities);
+        this.openmct.time.on('bounds', this.updateTimestamp);
         this.openmct.editor.on('isEditing', this.setEditState);
 
         this.deferAutoScroll = _.debounce(this.deferAutoScroll, 500);
@@ -128,6 +145,16 @@ export default {
             this.composition.on('remove', this.removeItem);
             this.composition.load();
         }
+
+        // initialize the full view if fixed time
+        if (this.openmct.time.clock() === undefined) {
+            // Show everything
+            this.filterValue = this.domainObject.configuration.filter;
+            this.hideAll = false;
+            this.showAll = true;
+            this.listActivities();
+        }
+
     },
     beforeDestroy() {
         if (this.unlisten) {
@@ -147,6 +174,7 @@ export default {
         }
 
         this.openmct.editor.off('isEditing', this.setEditState);
+        this.openmct.time.off('bounds', this.updateTimestamp);
 
         this.$el.parentElement.removeEventListener('scroll', this.deferAutoScroll, true);
         if (this.clearAutoScrollDisabledTimer) {
@@ -159,6 +187,11 @@ export default {
         }
     },
     methods: {
+        updateTimestamp(bounds, isTick) {
+            if (isTick === true) {
+                this.timestamp = this.openmct.time.clock().currentValue();
+            }
+        },
         planFileUpdated(selectFile) {
             this.getPlanData({
                 selectFile,
@@ -377,7 +410,7 @@ export default {
                     activity.key = uuid();
                 }
 
-                activity.duration = activity.start - this.timestamp;
+                activity.duration = this.timestamp && activity.start ? activity.start - this.timestamp : undefined;
 
                 return activity;
             });
@@ -400,7 +433,7 @@ export default {
 
             this.firstCurrentActivityIndex = -1;
             this.currentActivitiesCount = 0;
-            this.$el.parentElement.scrollTo({top: 0});
+            this.$el.parentElement?.scrollTo({top: 0});
             this.autoScrolled = false;
         },
         setScrollTop() {