fix(#7234): 'Remove Container' button not working in Flexible Layout toolbar (#7240)

* refactor: rename prop for clarity

- `orientation` -> `dragOrientation`

* fix(#7234): fix event name for flexible layout toolbar action

* test(e2e): add tests for flexible layout toolbar actions

* test: add `@localStorage` tags

e2e/tests/framework/generateLocalStorageData.e2e.spec.js

@@ -91,6 +91,31 @@ test.describe('Generate Visual Test Data @localStorage @generatedata', () => {
     });
   });
 
+  test('Generate flexible layout with 2 child display layouts', async ({ page, context }) => {
+    // Create Display Layout
+    const parent = await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout',
+      name: 'Parent Flexible Layout'
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Child Layout 1',
+      parent: parent.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Child Layout 2',
+      parent: parent.uuid
+    });
+
+    await page.goto(parent.url);
+
+    //Save localStorage for future test execution
+    await context.storageState({
+      path: path.join(__dirname, '../../../e2e/test-data/flexible_layout_with_child_layouts.json')
+    });
+  });
+
   // TODO: Visual test for the generated object here
   // - Move to using appActions to create the overlay plot
   //   and embedded standard telemetry object

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

@@ -37,7 +37,7 @@ const LOCALSTORAGE_PATH = path.resolve(
 const TINY_IMAGE_BASE64 =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII';
 
-test.describe('Display Layout Toolbar Actions', () => {
+test.describe('Display Layout Toolbar Actions @localStorage', () => {
   const PARENT_DISPLAY_LAYOUT_NAME = 'Parent Display Layout';
   const CHILD_DISPLAY_LAYOUT_NAME1 = 'Child Layout 1';
   test.beforeEach(async ({ page }) => {

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

@@ -19,12 +19,19 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/* global __dirname */
 
 const { test, expect } = require('../../../../pluginFixtures');
 const {
   createDomainObjectWithDefaults,
   setIndependentTimeConductorBounds
 } = require('../../../../appActions');
+const path = require('path');
+
+const LOCALSTORAGE_PATH = path.resolve(
+  __dirname,
+  '../../../../test-data/flexible_layout_with_child_layouts.json'
+);
 
 test.describe('Flexible Layout', () => {
   let sineWaveObject;
@@ -257,3 +264,40 @@ test.describe('Flexible Layout', () => {
     await expect(page.getByText('2021-12-30 01:11:00.000Z')).toBeHidden();
   });
 });
+
+test.describe('Flexible Layout Toolbar Actions @localStorage', () => {
+  test.use({
+    storageState: path.resolve(__dirname, LOCALSTORAGE_PATH)
+  });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await page
+      .locator('a')
+      .filter({ hasText: 'Parent Flexible Layout Flexible Layout' })
+      .first()
+      .click();
+    await page.getByLabel('Edit').click();
+  });
+  test('Add/Remove Container', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7234'
+    });
+    await page.locator('div:nth-child(5) > .c-fl-container__frames-holder').click();
+    expect(await page.locator('.c-fl-container').count()).toEqual(2);
+    await page.getByTitle('Add Container').click();
+    expect(await page.locator('.c-fl-container').count()).toEqual(3);
+    await page.getByTitle('Remove Container').click();
+    await page.getByRole('button', { name: 'OK' }).click();
+    expect(await page.locator('.c-fl-container').count()).toEqual(2);
+  });
+  test('Columns/Rows Layout Toggle', async ({ page }) => {
+    await page.locator('div:nth-child(5) > .c-fl-container__frames-holder').click();
+    expect(await page.locator('.c-fl--rows').count()).toEqual(0);
+    await page.getByTitle('Columns layout').click();
+    expect(await page.locator('.c-fl--rows').count()).toEqual(1);
+    await page.getByTitle('Rows layout').click();
+    expect(await page.locator('.c-fl--rows').count()).toEqual(0);
+  });
+});

src/plugins/flexibleLayout/components/ContainerComponent.vue

@@ -63,7 +63,7 @@
         <resize-handle
           v-if="i !== frames.length - 1"
           :index="i"
-          :orientation="rowsLayout ? 'horizontal' : 'vertical'"
+          :drag-orientation="rowsLayout ? 'horizontal' : 'vertical'"
           :is-editing="isEditing"
           @init-move="startFrameResizing"
           @move="frameResizing"

src/plugins/flexibleLayout/components/FlexibleLayout.vue

@@ -59,7 +59,7 @@
         <resize-handle
           v-if="index !== containers.length - 1"
           :index="index"
-          :orientation="rowsLayout ? 'vertical' : 'horizontal'"
+          :drag-orientation="rowsLayout ? 'vertical' : 'horizontal'"
           :is-editing="isEditing"
           @init-move="startContainerResizing"
           @move="containerResizing"

src/plugins/flexibleLayout/components/ResizeHandle.vue

@@ -24,7 +24,7 @@
   <div
     v-show="isEditing && !isDragging"
     class="c-fl-frame__resize-handle"
-    :class="[orientation]"
+    :class="[dragOrientation]"
     @mousedown="mousedown"
   ></div>
 </template>
@@ -32,7 +32,7 @@
 <script>
 export default {
   props: {
-    orientation: {
+    dragOrientation: {
       type: String,
       required: true
     },
@@ -78,7 +78,7 @@ export default {
       let mousePos;
       let delta;
 
-      if (this.orientation === 'horizontal') {
+      if (this.dragOrientation === 'horizontal') {
         elSize = this.$el.getBoundingClientRect().x;
         mousePos = event.clientX;
       } else {

src/plugins/flexibleLayout/toolbarProvider.js

@@ -46,6 +46,12 @@ function ToolbarProvider(openmct) {
       let deleteContainer;
       let addContainer;
       let toggleFrame;
+      const primaryKeyString =
+        primary?.context?.item?.identifier &&
+        openmct.objects.makeKeyString(primary.context.item.identifier);
+      const tertiaryKeyString =
+        tertiary?.context?.item?.identifier &&
+        openmct.objects.makeKeyString(tertiary.context.item.identifier);
 
       toggleContainer = {
         control: 'toggle-button',
@@ -84,8 +90,6 @@ function ToolbarProvider(openmct) {
         let containerIndex = containers.indexOf(container);
         let frame = container && container.frames.filter((f) => f.id === frameId)[0];
         let frameIndex = container && container.frames.indexOf(frame);
-        const primaryKeyString = openmct.objects.makeKeyString(primary.context.item.identifier);
-        const tertiaryKeyString = openmct.objects.makeKeyString(tertiary.context.item.identifier);
         deleteFrame = {
           control: 'button',
           domainObject: primary.context.item,
@@ -169,7 +173,11 @@ function ToolbarProvider(openmct) {
                   label: 'OK',
                   emphasis: 'true',
                   callback: function () {
-                    openmct.objectViews.emit('contextAction', 'deleteContainer', containerId);
+                    openmct.objectViews.emit(
+                      `contextAction:${primaryKeyString}`,
+                      'deleteContainer',
+                      containerId
+                    );
                     prompt.dismiss();
                   }
                 },