From 042535f12615b659092e3098381d15b90fbb56bb Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Tue, 15 Aug 2023 15:58:07 -0700
Subject: [PATCH 1/7] fix: restore reactivity of config settings

- move initialization steps to `created()` hook

- remove unnecessary `:key` binds

- fix comments
---
 .../components/flexibleLayout.vue             | 36 +++++++++----------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/plugins/flexibleLayout/components/flexibleLayout.vue b/src/plugins/flexibleLayout/components/flexibleLayout.vue
index 247cdc2d73e..0412d8a14dc 100644
--- a/src/plugins/flexibleLayout/components/flexibleLayout.vue
+++ b/src/plugins/flexibleLayout/components/flexibleLayout.vue
@@ -37,7 +37,6 @@
       <template v-for="(container, index) in containers" :key="`component-${container.id}`">
         <drop-hint
           v-if="index === 0 && containers.length > 1"
-          :key="`hint-top-${container.id}`"
           class="c-fl-frame__drop-hint"
           :index="-1"
           :allow-drop="allowContainerDrop"
@@ -59,7 +58,6 @@
 
         <resize-handle
           v-if="index !== containers.length - 1"
-          :key="`handle-${container.id}`"
           :index="index"
           :orientation="rowsLayout ? 'vertical' : 'horizontal'"
           :is-editing="isEditing"
@@ -70,7 +68,6 @@
 
         <drop-hint
           v-if="containers.length > 1"
-          :key="`hint-bottom-${container.id}`"
           class="c-fl-frame__drop-hint"
           :index="index"
           :allow-drop="allowContainerDrop"
@@ -145,7 +142,9 @@ export default {
     return {
       domainObject: this.layoutObject,
       newFrameLocation: [],
-      identifierMap: {}
+      identifierMap: {},
+      containers: this.layoutObject.configuration.containers,
+      rowsLayout: this.layoutObject.configuration.rowsLayout,
     };
   },
   computed: {
@@ -156,23 +155,25 @@ export default {
         return 'Columns';
       }
     },
-    containers() {
-      return this.domainObject.configuration.containers;
-    },
-    rowsLayout() {
-      return this.domainObject.configuration.rowsLayout;
-    },
     allContainersAreEmpty() {
       return this.containers.every((container) => container.frames.length === 0);
     }
   },
-  mounted() {
+  created() {
     this.buildIdentifierMap();
     this.composition = this.openmct.composition.get(this.domainObject);
     this.composition.on('remove', this.removeChildObject);
     this.composition.on('add', this.addFrame);
     this.composition.load();
   },
+  mounted() {
+    this.openmct.objects.observe(this.domainObject, 'configuration.containers', (containers) => {
+      this.containers = containers;
+    });
+    this.openmct.objects.observe(this.domainObject, 'configuration.rowsLayout', (rowsLayout) => {
+      this.rowsLayout = rowsLayout;
+    });
+  },
   beforeUnmount() {
     this.composition.off('remove', this.removeChildObject);
     this.composition.off('add', this.addFrame);
@@ -211,20 +212,17 @@ export default {
       let container = this.containers.filter((c) => c.id === containerId)[0];
       let containerIndex = this.containers.indexOf(container);
 
-      /*
-                remove associated domainObjects from composition
-            */
+      // remove associated domainObjects from composition
       container.frames.forEach((f) => {
         this.removeFromComposition(f.domainObjectIdentifier);
       });
 
       this.containers.splice(containerIndex, 1);
 
-      /*
-                add a container when there are no containers in the FL,
-                to prevent user from not being able to add a frame via
-                drag and drop.
-            */
+      
+      // add a container when there are no containers in the FL,
+      // to prevent user from not being able to add a frame via
+      // drag and drop.
       if (this.containers.length === 0) {
         this.containers.push(new Container(100));
       }

From bb00b45eb3e674ae4490effbefb0775193c52301 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Tue, 15 Aug 2023 15:58:17 -0700
Subject: [PATCH 2/7] refactor: clean up

---
 src/plugins/flexibleLayout/flexibleLayoutViewProvider.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/plugins/flexibleLayout/flexibleLayoutViewProvider.js b/src/plugins/flexibleLayout/flexibleLayoutViewProvider.js
index 6f11257768c..ef231c42215 100644
--- a/src/plugins/flexibleLayout/flexibleLayoutViewProvider.js
+++ b/src/plugins/flexibleLayout/flexibleLayoutViewProvider.js
@@ -50,12 +50,11 @@ export default class FlexibleLayoutViewProvider {
       show: function (element, isEditing) {
         const { vNode, destroy } = mount(
           {
-            el: element,
             components: {
               FlexibleLayoutComponent
             },
             provide: {
-              openmct: openmct,
+              openmct,
               objectPath,
               layoutObject: domainObject
             },
@@ -75,7 +74,7 @@ export default class FlexibleLayoutViewProvider {
         component = vNode.componentInstance;
         _destroy = destroy;
       },
-      getSelectionContext: function () {
+      getSelectionContext() {
         return {
           item: domainObject,
           addContainer: component.$refs.flexibleLayout.addContainer,
@@ -84,10 +83,10 @@ export default class FlexibleLayoutViewProvider {
           type: 'flexible-layout'
         };
       },
-      onEditModeChange: function (isEditing) {
+      onEditModeChange(isEditing) {
         component.isEditing = isEditing;
       },
-      destroy: function (element) {
+      destroy() {
         if (_destroy) {
           _destroy();
           component = null;

From 7a171ec8694d1396ac9d9dc77bb699468f2a6526 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Tue, 15 Aug 2023 15:58:25 -0700
Subject: [PATCH 3/7] refactor: clean up

---
 src/plugins/displayLayout/components/SubobjectView.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/plugins/displayLayout/components/SubobjectView.vue b/src/plugins/displayLayout/components/SubobjectView.vue
index a3887877d21..faa7bceae23 100644
--- a/src/plugins/displayLayout/components/SubobjectView.vue
+++ b/src/plugins/displayLayout/components/SubobjectView.vue
@@ -20,14 +20,14 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <layout-frame
+  <LayoutFrame
     :item="item"
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="(gridDelta) => $emit('move', gridDelta)"
     @endMove="() => $emit('endMove')"
   >
-    <object-frame
+    <ObjectFrame
       v-if="domainObject"
       ref="objectFrame"
       :domain-object="domainObject"
@@ -37,7 +37,7 @@
       :layout-font-size="item.fontSize"
       :layout-font="item.font"
     />
-  </layout-frame>
+</LayoutFrame>
 </template>
 
 <script>

From 5fe1aeae73210b2677c087331d6d6f03e5bf2af1 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Tue, 15 Aug 2023 16:58:52 -0700
Subject: [PATCH 4/7] refactor: lint:fix

---
 src/plugins/displayLayout/components/SubobjectView.vue   | 2 +-
 src/plugins/flexibleLayout/components/flexibleLayout.vue | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/plugins/displayLayout/components/SubobjectView.vue b/src/plugins/displayLayout/components/SubobjectView.vue
index faa7bceae23..d40b626a698 100644
--- a/src/plugins/displayLayout/components/SubobjectView.vue
+++ b/src/plugins/displayLayout/components/SubobjectView.vue
@@ -37,7 +37,7 @@
       :layout-font-size="item.fontSize"
       :layout-font="item.font"
     />
-</LayoutFrame>
+  </LayoutFrame>
 </template>
 
 <script>
diff --git a/src/plugins/flexibleLayout/components/flexibleLayout.vue b/src/plugins/flexibleLayout/components/flexibleLayout.vue
index 0412d8a14dc..bd9aba7ac47 100644
--- a/src/plugins/flexibleLayout/components/flexibleLayout.vue
+++ b/src/plugins/flexibleLayout/components/flexibleLayout.vue
@@ -144,7 +144,7 @@ export default {
       newFrameLocation: [],
       identifierMap: {},
       containers: this.layoutObject.configuration.containers,
-      rowsLayout: this.layoutObject.configuration.rowsLayout,
+      rowsLayout: this.layoutObject.configuration.rowsLayout
     };
   },
   computed: {
@@ -219,7 +219,6 @@ export default {
 
       this.containers.splice(containerIndex, 1);
 
-      
       // add a container when there are no containers in the FL,
       // to prevent user from not being able to add a frame via
       // drag and drop.

From 4f831b30948f518b4cefbf6f43ef6a80ef7a4c47 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Tue, 15 Aug 2023 16:59:07 -0700
Subject: [PATCH 5/7] test(e2e): add regression test and cleanup suite

---
 .../flexibleLayout/flexibleLayout.e2e.spec.js | 134 ++++++++++++------
 1 file changed, 93 insertions(+), 41 deletions(-)

diff --git a/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js b/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js
index f81b5298a04..e813ececff5 100644
--- a/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js
+++ b/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js
@@ -29,6 +29,10 @@ const {
 test.describe('Flexible Layout', () => {
   let sineWaveObject;
   let clockObject;
+  let treePane;
+  let sineWaveGeneratorTreeItem;
+  let clockTreeItem;
+  let flexibleLayout;
   test.beforeEach(async ({ page }) => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
@@ -41,23 +45,27 @@ test.describe('Flexible Layout', () => {
     clockObject = await createDomainObjectWithDefaults(page, {
       type: 'Clock'
     });
-  });
-  test('panes have the appropriate draggable attribute while in Edit and Browse modes', async ({
-    page
-  }) => {
-    const treePane = page.getByRole('tree', {
+
+    // Create a Flexible Layout
+    flexibleLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout'
+    });
+
+    // Define the Sine Wave Generator and Clock tree items
+    treePane = page.getByRole('tree', {
       name: 'Main Tree'
     });
-    const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+    sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
       name: new RegExp(sineWaveObject.name)
     });
-    const clockTreeItem = treePane.getByRole('treeitem', {
+    clockTreeItem = treePane.getByRole('treeitem', {
       name: new RegExp(clockObject.name)
     });
-    // Create a Flexible Layout
-    await createDomainObjectWithDefaults(page, {
-      type: 'Flexible Layout'
-    });
+  });
+  test('panes have the appropriate draggable attribute while in Edit and Browse modes', async ({
+    page
+  }) => {
+    await page.goto(flexibleLayout.url);
     // Edit Flexible Layout
     await page.locator('[title="Edit"]').click();
 
@@ -78,19 +86,79 @@ test.describe('Flexible Layout', () => {
     dragWrapper = page.locator('.c-fl-container__frames-holder .c-fl-frame__drag-wrapper').first();
     await expect(dragWrapper).toHaveAttribute('draggable', 'false');
   });
-  test('items in a flexible layout can be removed with object tree context menu when viewing the flexible layout', async ({
+  test('changing toolbar settings in edit mode is immediately reflected and persists upon save', async ({
     page
   }) => {
-    const treePane = page.getByRole('tree', {
-      name: 'Main Tree'
-    });
-    const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
-      name: new RegExp(sineWaveObject.name)
-    });
-    // Create a Display Layout
-    await createDomainObjectWithDefaults(page, {
-      type: 'Flexible Layout'
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6942'
     });
+
+    await page.goto(flexibleLayout.url);
+
+    // 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 sineWaveGeneratorTreeItem.dragTo(page.locator('.c-fl__container.is-empty').first());
+    await clockTreeItem.dragTo(page.locator('.c-fl__container.is-empty'));
+
+    // Click on the first frame to select it
+    await page.locator('.c-fl-container__frame').first().click();
+    await expect(page.locator('.c-fl-container__frame > .c-frame').first()).toHaveAttribute(
+      's-selected',
+      ''
+    );
+
+    // Assert the toolbar is visible
+    await expect(page.locator('.c-toolbar')).toBeInViewport();
+
+    // Assert the layout is in columns orientation
+    expect(await page.locator('.c-fl--rows').count()).toEqual(0);
+
+    // Change the layout to rows orientation
+    await page.getByTitle('Columns layout').click();
+
+    // Assert the layout is in rows orientation
+    expect(await page.locator('.c-fl--rows').count()).toBeGreaterThan(0);
+
+    // Assert the frame of the first item is visible
+    await expect(page.locator('.c-so-view').first()).not.toHaveClass(/c-so-view--no-frame/);
+
+    // Hide the frame of the first item
+    await page.getByTitle('Frame visible').click();
+
+    // Assert the frame is hidden
+    await expect(page.locator('.c-so-view').first()).toHaveClass(/c-so-view--no-frame/);
+
+    // Assert there are 2 containers
+    expect(await page.locator('.c-fl-container').count()).toEqual(2);
+
+    // Add a container
+    await page.getByTitle('Add Container').click();
+
+    // Assert there are 3 containers
+    expect(await page.locator('.c-fl-container').count()).toEqual(3);
+
+    // Save Flexible Layout
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Nav away and back
+    await page.goto(sineWaveObject.url);
+    await page.goto(flexibleLayout.url);
+
+    // Wait for the first frame to be visible so we know the layout has loaded
+    await expect(page.locator('.c-fl-container').nth(0)).toBeInViewport();
+
+    // Assert the settings have persisted
+    expect(await page.locator('.c-fl-container').count()).toEqual(3);
+    expect(await page.locator('.c-fl--rows').count()).toBeGreaterThan(0);
+    await expect(page.locator('.c-so-view').first()).toHaveClass(/c-so-view--no-frame/);
+  });
+  test('items in a flexible layout can be removed with object tree context menu when viewing the flexible layout', async ({
+    page
+  }) => {
+    await page.goto(flexibleLayout.url);
     // Edit Flexible Layout
     await page.locator('[title="Edit"]').click();
 
@@ -121,17 +189,7 @@ test.describe('Flexible Layout', () => {
       type: 'issue',
       description: 'https://github.com/nasa/openmct/issues/3117'
     });
-    const treePane = page.getByRole('tree', {
-      name: 'Main Tree'
-    });
-    const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
-      name: new RegExp(sineWaveObject.name)
-    });
-
-    // Create a Flexible Layout
-    const flexibleLayout = await createDomainObjectWithDefaults(page, {
-      type: 'Flexible Layout'
-    });
+    await page.goto(flexibleLayout.url);
     // Edit Flexible Layout
     await page.locator('[title="Edit"]').click();
 
@@ -167,19 +225,13 @@ test.describe('Flexible Layout', () => {
     const exampleImageryObject = await createDomainObjectWithDefaults(page, {
       type: 'Example Imagery'
     });
-    // Create a Flexible Layout
-    await createDomainObjectWithDefaults(page, {
-      type: 'Flexible Layout'
-    });
-    // Edit Display Layout
+
+    await page.goto(flexibleLayout.url);
+    // 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').click();
-    // Add the Sine Wave Generator to the Flexible Layout and save changes
-    const treePane = page.getByRole('tree', {
-      name: 'Main Tree'
-    });
     const exampleImageryTreeItem = treePane.getByRole('treeitem', {
       name: new RegExp(exampleImageryObject.name)
     });

From 3bbf2b95802c66f1c98f77679a511fb1e7aed710 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Tue, 15 Aug 2023 17:04:01 -0700
Subject: [PATCH 6/7] refactor: consistency is key!

---
 src/plugins/flexibleLayout/flexibleLayoutViewProvider.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/flexibleLayout/flexibleLayoutViewProvider.js b/src/plugins/flexibleLayout/flexibleLayoutViewProvider.js
index ef231c42215..7294772ab4d 100644
--- a/src/plugins/flexibleLayout/flexibleLayoutViewProvider.js
+++ b/src/plugins/flexibleLayout/flexibleLayoutViewProvider.js
@@ -47,7 +47,7 @@ export default class FlexibleLayoutViewProvider {
     let component = null;
 
     return {
-      show: function (element, isEditing) {
+      show(element, isEditing) {
         const { vNode, destroy } = mount(
           {
             components: {

From 2ec5911b882812e4c117f707a4b897debe31dce4 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Wed, 16 Aug 2023 10:34:13 -0700
Subject: [PATCH 7/7] test(fix): fix unit tests, further cleanup

---
 src/plugins/flexibleLayout/components/flexibleLayout.vue | 9 +++------
 src/plugins/flexibleLayout/flexibleLayoutViewProvider.js | 2 +-
 src/plugins/flexibleLayout/pluginSpec.js                 | 8 ++++++++
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/plugins/flexibleLayout/components/flexibleLayout.vue b/src/plugins/flexibleLayout/components/flexibleLayout.vue
index bd9aba7ac47..2932946c706 100644
--- a/src/plugins/flexibleLayout/components/flexibleLayout.vue
+++ b/src/plugins/flexibleLayout/components/flexibleLayout.vue
@@ -134,17 +134,16 @@ export default {
     ResizeHandle,
     DropHint
   },
-  inject: ['openmct', 'objectPath', 'layoutObject'],
+  inject: ['openmct', 'objectPath', 'domainObject'],
   props: {
     isEditing: Boolean
   },
   data() {
     return {
-      domainObject: this.layoutObject,
       newFrameLocation: [],
       identifierMap: {},
-      containers: this.layoutObject.configuration.containers,
-      rowsLayout: this.layoutObject.configuration.rowsLayout
+      containers: this.domainObject.configuration.containers,
+      rowsLayout: this.domainObject.configuration.rowsLayout
     };
   },
   computed: {
@@ -165,8 +164,6 @@ export default {
     this.composition.on('remove', this.removeChildObject);
     this.composition.on('add', this.addFrame);
     this.composition.load();
-  },
-  mounted() {
     this.openmct.objects.observe(this.domainObject, 'configuration.containers', (containers) => {
       this.containers = containers;
     });
diff --git a/src/plugins/flexibleLayout/flexibleLayoutViewProvider.js b/src/plugins/flexibleLayout/flexibleLayoutViewProvider.js
index 7294772ab4d..ef31d925c5f 100644
--- a/src/plugins/flexibleLayout/flexibleLayoutViewProvider.js
+++ b/src/plugins/flexibleLayout/flexibleLayoutViewProvider.js
@@ -56,7 +56,7 @@ export default class FlexibleLayoutViewProvider {
             provide: {
               openmct,
               objectPath,
-              layoutObject: domainObject
+              domainObject
             },
             data() {
               return {
diff --git a/src/plugins/flexibleLayout/pluginSpec.js b/src/plugins/flexibleLayout/pluginSpec.js
index c6db935bc4b..293c16cb1d8 100644
--- a/src/plugins/flexibleLayout/pluginSpec.js
+++ b/src/plugins/flexibleLayout/pluginSpec.js
@@ -33,6 +33,10 @@ describe('the plugin', function () {
   let mockComposition;
 
   const testViewObject = {
+    identifier: {
+      namespace: '',
+      key: 'test-object'
+    },
     id: 'test-object',
     type: 'flexible-layout',
     configuration: {
@@ -116,6 +120,10 @@ describe('the plugin', function () {
 
     beforeEach(() => {
       flexibleLayoutItem = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
         id: 'test-object',
         type: 'flexible-layout',
         configuration: {