diff --git a/e2e/test-data/flexible_layout_with_child_layouts.json b/e2e/test-data/flexible_layout_with_child_layouts.json new file mode 100644 index 00000000000..21155194eee --- /dev/null +++ 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": "[]" + } + ] + } + ] +} \ No newline at end of file diff --git a/e2e/tests/framework/generateLocalStorageData.e2e.spec.js b/e2e/tests/framework/generateLocalStorageData.e2e.spec.js index 9d180db0837..62de8b44e60 100644 --- 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 index aaa590764ea..2911b7bb9e2 100644 --- 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 index e813ececff5..534eb8b8ad0 100644 --- 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 index 15ae0823c73..46bf2e994a2 100644 --- a/src/plugins/flexibleLayout/components/ContainerComponent.vue +++ b/src/plugins/flexibleLayout/components/ContainerComponent.vue @@ -63,7 +63,7 @@ @@ -32,7 +32,7 @@