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
nasa · Nov 16, 2023 · cdd772a · cdd772a
1 parent 7f8262b
commit cdd772a
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 9 deletions.
diff --git a/e2e/test-data/flexible_layout_with_child_layouts.json b/e2e/test-data/flexible_layout_with_child_layouts.json
@@ -0,0 +1,22 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:8080",
+      "localStorage": [
+        {
+          "name": "mct",
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601740,\"created\":1732413600580,\"persisted\":1732413601740},\"42d6300a-3059-4631-ae88-5e25b917f578\":{\"identifier\":{\"key\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"namespace\":\"\"},\"name\":\"Parent Flexible Layout\",\"type\":\"flexible-layout\",\"configuration\":{\"containers\":[{\"id\":\"0bc070f3-244c-426a-8422-6ac8267d2401\",\"frames\":[{\"id\":\"f20a0b6f-b43c-4cd7-890b-619a212027ae\",\"domainObjectIdentifier\":{\"key\":\"e4960148-418f-4737-ab43-95ba8c207d27\",\"namespace\":\"\"},\"size\":100,\"noFrame\":false}],\"size\":50},{\"id\":\"da6cfd90-4736-468e-9a50-1904a010ac90\",\"frames\":[],\"size\":50}],\"rowsLayout\":false},\"composition\":[{\"key\":\"e4960148-418f-4737-ab43-95ba8c207d27\",\"namespace\":\"\"},{\"key\":\"ea011f46-0465-4dfb-83f9-561bdb5596ef\",\"namespace\":\"\"}],\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413604320,\"location\":\"mine\",\"created\":1732413601740,\"persisted\":1732413604320},\"e4960148-418f-4737-ab43-95ba8c207d27\":{\"name\":\"Child Layout 1\",\"type\":\"layout\",\"identifier\":{\"key\":\"e4960148-418f-4737-ab43-95ba8c207d27\",\"namespace\":\"\"},\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413603180,\"location\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"created\":1732413603180,\"persisted\":1732413603180},\"ea011f46-0465-4dfb-83f9-561bdb5596ef\":{\"name\":\"Child Layout 2\",\"type\":\"layout\",\"identifier\":{\"key\":\"ea011f46-0465-4dfb-83f9-561bdb5596ef\",\"namespace\":\"\"},\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413604320,\"location\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"created\":1732413604320,\"persisted\":1732413604320}}"
+        },
+        {
+          "name": "mct-recent-objects",
+          "value": "[{\"objectPath\":[{\"identifier\":{\"key\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"namespace\":\"\"},\"name\":\"Parent Flexible Layout\",\"type\":\"flexible-layout\",\"configuration\":{\"containers\":[{\"id\":\"0bc070f3-244c-426a-8422-6ac8267d2401\",\"frames\":[{\"id\":\"f20a0b6f-b43c-4cd7-890b-619a212027ae\",\"domainObjectIdentifier\":{\"key\":\"e4960148-418f-4737-ab43-95ba8c207d27\",\"namespace\":\"\"},\"size\":100,\"noFrame\":false}],\"size\":50},{\"id\":\"da6cfd90-4736-468e-9a50-1904a010ac90\",\"frames\":[],\"size\":50}],\"rowsLayout\":false},\"composition\":[{\"key\":\"e4960148-418f-4737-ab43-95ba8c207d27\",\"namespace\":\"\"},{\"key\":\"ea011f46-0465-4dfb-83f9-561bdb5596ef\",\"namespace\":\"\"}],\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413604320,\"location\":\"mine\",\"created\":1732413601740,\"persisted\":1732413604320},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601740,\"created\":1732413600580,\"persisted\":1732413601740},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/42d6300a-3059-4631-ae88-5e25b917f578\",\"domainObject\":{\"identifier\":{\"key\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"namespace\":\"\"},\"name\":\"Parent Flexible Layout\",\"type\":\"flexible-layout\",\"configuration\":{\"containers\":[{\"id\":\"0bc070f3-244c-426a-8422-6ac8267d2401\",\"frames\":[{\"id\":\"f20a0b6f-b43c-4cd7-890b-619a212027ae\",\"domainObjectIdentifier\":{\"key\":\"e4960148-418f-4737-ab43-95ba8c207d27\",\"namespace\":\"\"},\"size\":100,\"noFrame\":false}],\"size\":50},{\"id\":\"da6cfd90-4736-468e-9a50-1904a010ac90\",\"frames\":[],\"size\":50}],\"rowsLayout\":false},\"composition\":[{\"key\":\"e4960148-418f-4737-ab43-95ba8c207d27\",\"namespace\":\"\"},{\"key\":\"ea011f46-0465-4dfb-83f9-561bdb5596ef\",\"namespace\":\"\"}],\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413604320,\"location\":\"mine\",\"created\":1732413601740,\"persisted\":1732413604320}},{\"objectPath\":[{\"identifier\":{\"key\":\"ea011f46-0465-4dfb-83f9-561bdb5596ef\",\"namespace\":\"\"},\"name\":\"Child Layout 2\",\"type\":\"layout\",\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413604320,\"location\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"created\":1732413604320,\"persisted\":1732413604320},{\"identifier\":{\"key\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"namespace\":\"\"},\"name\":\"Parent Flexible Layout\",\"type\":\"flexible-layout\",\"configuration\":{\"containers\":[{\"id\":\"0bc070f3-244c-426a-8422-6ac8267d2401\",\"frames\":[{\"id\":\"f20a0b6f-b43c-4cd7-890b-619a212027ae\",\"domainObjectIdentifier\":{\"key\":\"e4960148-418f-4737-ab43-95ba8c207d27\",\"namespace\":\"\"},\"size\":100,\"noFrame\":false}],\"size\":50},{\"id\":\"da6cfd90-4736-468e-9a50-1904a010ac90\",\"frames\":[],\"size\":50}],\"rowsLayout\":false},\"composition\":[{\"key\":\"e4960148-418f-4737-ab43-95ba8c207d27\",\"namespace\":\"\"},{\"key\":\"ea011f46-0465-4dfb-83f9-561bdb5596ef\",\"namespace\":\"\"}],\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413604320,\"location\":\"mine\",\"created\":1732413601740,\"persisted\":1732413604320},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601740,\"created\":1732413600580,\"persisted\":1732413601740},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/42d6300a-3059-4631-ae88-5e25b917f578/ea011f46-0465-4dfb-83f9-561bdb5596ef\",\"domainObject\":{\"identifier\":{\"key\":\"ea011f46-0465-4dfb-83f9-561bdb5596ef\",\"namespace\":\"\"},\"name\":\"Child Layout 2\",\"type\":\"layout\",\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413604320,\"location\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"created\":1732413604320,\"persisted\":1732413604320}},{\"objectPath\":[{\"identifier\":{\"key\":\"e4960148-418f-4737-ab43-95ba8c207d27\",\"namespace\":\"\"},\"name\":\"Child Layout 1\",\"type\":\"layout\",\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413603180,\"location\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"created\":1732413603180,\"persisted\":1732413603180},{\"identifier\":{\"key\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"namespace\":\"\"},\"name\":\"Parent Flexible Layout\",\"type\":\"flexible-layout\",\"configuration\":{\"containers\":[{\"id\":\"0bc070f3-244c-426a-8422-6ac8267d2401\",\"frames\":[{\"id\":\"f20a0b6f-b43c-4cd7-890b-619a212027ae\",\"domainObjectIdentifier\":{\"key\":\"e4960148-418f-4737-ab43-95ba8c207d27\",\"namespace\":\"\"},\"size\":100,\"noFrame\":false}],\"size\":50},{\"id\":\"da6cfd90-4736-468e-9a50-1904a010ac90\",\"frames\":[],\"size\":50}],\"rowsLayout\":false},\"composition\":[{\"key\":\"e4960148-418f-4737-ab43-95ba8c207d27\",\"namespace\":\"\"},{\"key\":\"ea011f46-0465-4dfb-83f9-561bdb5596ef\",\"namespace\":\"\"}],\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413604320,\"location\":\"mine\",\"created\":1732413601740,\"persisted\":1732413604320},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601740,\"created\":1732413600580,\"persisted\":1732413601740},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/42d6300a-3059-4631-ae88-5e25b917f578/e4960148-418f-4737-ab43-95ba8c207d27\",\"domainObject\":{\"identifier\":{\"key\":\"e4960148-418f-4737-ab43-95ba8c207d27\",\"namespace\":\"\"},\"name\":\"Child Layout 1\",\"type\":\"layout\",\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413603180,\"location\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"created\":1732413603180,\"persisted\":1732413603180}},{\"objectPath\":[{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601740,\"created\":1732413600580,\"persisted\":1732413601740},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine\",\"domainObject\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"42d6300a-3059-4631-ae88-5e25b917f578\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601740,\"created\":1732413600580,\"persisted\":1732413601740}}]"
+        },
+        {
+          "name": "mct-tree-expanded",
+          "value": "[]"
+        }
+      ]
+    }
+  ]
+}
diff --git a/e2e/tests/framework/generateLocalStorageData.e2e.spec.js b/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

diff --git a/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js b/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 }) => {

diff --git a/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js b/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);
+  });
+});
diff --git a/src/plugins/flexibleLayout/components/ContainerComponent.vue b/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"

diff --git a/src/plugins/flexibleLayout/components/FlexibleLayout.vue b/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"

diff --git a/src/plugins/flexibleLayout/components/ResizeHandle.vue b/src/plugins/flexibleLayout/components/ResizeHandle.vue
@@ -24,15 +24,15 @@
   <div
     v-show="isEditing && !isDragging"
     class="c-fl-frame__resize-handle"
-    :class="[orientation]"
+    :class="[dragOrientation]"
     @mousedown="mousedown"
   ></div>
 </template>
 
 <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 {

diff --git a/src/plugins/flexibleLayout/toolbarProvider.js b/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();
                   }
                 },