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);
+  });
+});