fix(#7524): Open in New Tab action from a sub-object in a layout (#7542)

* refactor: url tools use named exports

* fix: refactor method and remove customUrlParams

* test(e2e): verify bounds are preserved in data pivoting

* test: remove test as feature is no longer needed

- dataVisualization logic has moved from MMGIS plugin to the open source. As such, we can just use the time conductor bounds

* refactor: autoformat keeps changing this so i'mma just commit it

* refactor: remove unnecessary code

* refactor: simplify, add docs

* Revert "refactor: remove unnecessary code"

This reverts commit 87aef35.

* a11y: improve aria labels for ITC

* fix: simplify url method

* fix: update ITC app actions

* test: add test to generate test data for display layout w/ overlay plot + ITC enabled

* test(e2e): add suite + test for open in new tab from subobject

- needs cleanup

* a11y: various a11y improvement drivebys

* a11y: clock indicator needs to be quiet

* a11y: add `aria-live` to SuperMenu details

* a11y: greatly improve a11y of Menus and SuperMenus

* test(e2e): clean up test

* fix: improve a11y for context menus, fix test

* chore: remove nop-longer-recommended extension

* feat: provide one more bound option for example data viz

* fix: no need for `mount`, use dynamic rendering instead

* Revert "fix: simplify url method"

This reverts commit b24c7da.

* fix: correct time conductor bounds when opening in a new tab from a plot in the inspector

* test: fix e2e tests

* Revert "test: remove test as feature is no longer needed"

This reverts commit 759ebd4.

* test: move 2p annotation to test

* test: fix e2e

* fix: no words for the word god today

* test: fix e2e

* fix: e2e test

* test: fix test

* driveby: fix perf test

* fix: revert required prop change

---------

Co-authored-by: David Tsay <[email protected]>
Co-authored-by: John Hill <[email protected]>

Author: 3 people

.vscode/extensions.json

@@ -5,7 +5,6 @@
   // List of extensions which should be recommended for users of this workspace.
   "recommendations": [
     "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin",
     "dbaeumer.vscode-eslint",
     "rvest.vs-code-prettier-eslint"
   ],

e2e/appActions.js

@@ -505,15 +505,14 @@ async function setTimeConductorBounds(page, startDate, endDate) {
  * @param {string} startDate
  * @param {string} endDate
  */
-async function setIndependentTimeConductorBounds(page, startDate, endDate) {
-  // Activate Independent Time Conductor in Fixed Time Mode
-  await page.getByRole('switch').click();
+async function setIndependentTimeConductorBounds(page, { start, end }) {
+  // Activate Independent Time Conductor
+  await page.getByLabel('Enable Independent Time Conductor').click();
 
   // Bring up the time conductor popup
-  await page.click('.c-conductor-holder--compact .c-compact-tc');
+  await page.getByLabel('Independent Time Conductor Settings').click();
   await expect(page.locator('.itc-popout')).toBeInViewport();
-
-  await setTimeBounds(page, startDate, endDate);
+  await setTimeBounds(page, start, end);
 
   await page.keyboard.press('Enter');
 }

e2e/test-data/display_layout_with_child_overlay_plot.json

@@ -0,0 +1,26 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:8080",
+      "localStorage": [
+        {
+          "name": "mct",
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602140,\"created\":1732413600860,\"persisted\":1732413602140},\"29836e66-111a-45f8-81ed-f662661be9f9\":{\"identifier\":{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"},\"name\":\"Parent Display Layout\",\"type\":\"layout\",\"composition\":[{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"}],\"configuration\":{\"items\":[{\"width\":32,\"height\":18,\"x\":1,\"y\":1,\"identifier\":{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"},\"hasFrame\":true,\"fontSize\":\"default\",\"font\":\"default\",\"type\":\"subobject-view\",\"id\":\"022720f7-a6b5-40c3-b051-75f5d10a9042\"}],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413604780,\"location\":\"mine\",\"created\":1732413602140,\"persisted\":1732413604780},\"55cd0300-6e57-4992-b670-0c2880c0e6b2\":{\"identifier\":{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"},\"name\":\"Child Overlay Plot 1\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"ec13f652-4636-4763-8e88-898144cbc6f2\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"ec13f652-4636-4763-8e88-898144cbc6f2\",\"namespace\":\"\"}}],\"useIndependentTime\":true,\"timeOptions\":{\"clockOffsets\":{\"start\":-1800000,\"end\":30000},\"fixedOffsets\":{\"start\":1731438671000,\"end\":1731442271000},\"clock\":\"local\",\"mode\":\"fixed\"}},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413605500,\"location\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"created\":1732413603280,\"persisted\":1732413605500},\"ec13f652-4636-4763-8e88-898144cbc6f2\":{\"name\":\"Child SWG 1\",\"type\":\"generator\",\"identifier\":{\"key\":\"ec13f652-4636-4763-8e88-898144cbc6f2\",\"namespace\":\"\"},\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":0,\"infinityValues\":false,\"exceedFloat32\":false,\"staleness\":false},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413604440,\"location\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"created\":1732413604440,\"persisted\":1732413604440}}"
+        },
+        {
+          "name": "mct-tree-expanded",
+          "value": "[]"
+        },
+        {
+          "name": "tcHistory",
+          "value": "{\"utc\":[{\"start\":1731352271000,\"end\":1731355871000}]}"
+        },
+        {
+          "name": "mct-recent-objects",
+          "value": "[{\"objectPath\":[{\"identifier\":{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"},\"name\":\"Parent Display Layout\",\"type\":\"layout\",\"composition\":[{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"}],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413603280,\"location\":\"mine\",\"created\":1732413602140,\"persisted\":1732413603280},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602140,\"created\":1732413600860,\"persisted\":1732413602140},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/29836e66-111a-45f8-81ed-f662661be9f9\",\"domainObject\":{\"identifier\":{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"},\"name\":\"Parent Display Layout\",\"type\":\"layout\",\"composition\":[{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"}],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413603280,\"location\":\"mine\",\"created\":1732413602140,\"persisted\":1732413603280}},{\"objectPath\":[{\"identifier\":{\"key\":\"ec13f652-4636-4763-8e88-898144cbc6f2\",\"namespace\":\"\"},\"name\":\"Child SWG 1\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":0,\"infinityValues\":false,\"exceedFloat32\":false,\"staleness\":false},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413604440,\"location\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"created\":1732413604440,\"persisted\":1732413604440},{\"identifier\":{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"},\"name\":\"Child Overlay Plot 1\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"ec13f652-4636-4763-8e88-898144cbc6f2\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413604440,\"location\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"created\":1732413603280,\"persisted\":1732413604440},{\"identifier\":{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"},\"name\":\"Parent Display Layout\",\"type\":\"layout\",\"composition\":[{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"}],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413603280,\"location\":\"mine\",\"created\":1732413602140,\"persisted\":1732413603280},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602140,\"created\":1732413600860,\"persisted\":1732413602140},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/29836e66-111a-45f8-81ed-f662661be9f9/55cd0300-6e57-4992-b670-0c2880c0e6b2/ec13f652-4636-4763-8e88-898144cbc6f2\",\"domainObject\":{\"identifier\":{\"key\":\"ec13f652-4636-4763-8e88-898144cbc6f2\",\"namespace\":\"\"},\"name\":\"Child SWG 1\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":0,\"infinityValues\":false,\"exceedFloat32\":false,\"staleness\":false},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413604440,\"location\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"created\":1732413604440,\"persisted\":1732413604440}},{\"objectPath\":[{\"identifier\":{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"},\"name\":\"Child Overlay Plot 1\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"ec13f652-4636-4763-8e88-898144cbc6f2\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413604440,\"location\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"created\":1732413603280,\"persisted\":1732413604440},{\"identifier\":{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"},\"name\":\"Parent Display Layout\",\"type\":\"layout\",\"composition\":[{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"}],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413603280,\"location\":\"mine\",\"created\":1732413602140,\"persisted\":1732413603280},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602140,\"created\":1732413600860,\"persisted\":1732413602140},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/29836e66-111a-45f8-81ed-f662661be9f9/55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"domainObject\":{\"identifier\":{\"key\":\"55cd0300-6e57-4992-b670-0c2880c0e6b2\",\"namespace\":\"\"},\"name\":\"Child Overlay Plot 1\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"ec13f652-4636-4763-8e88-898144cbc6f2\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 1 child overlay plot\\nchrome\",\"modified\":1732413604440,\"location\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"created\":1732413603280,\"persisted\":1732413604440}},{\"objectPath\":[{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602140,\"created\":1732413600860,\"persisted\":1732413602140},{\"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\":\"29836e66-111a-45f8-81ed-f662661be9f9\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602140,\"created\":1732413600860,\"persisted\":1732413602140}}]"
+        }
+      ]
+    }
+  ]
+}

e2e/tests/framework/appActions.e2e.spec.js

@@ -174,6 +174,6 @@ test.describe('AppActions', () => {
       type: 'Folder'
     });
     await openObjectTreeContextMenu(page, folder.url);
-    await expect(page.getByLabel('Menu')).toBeVisible();
+    await expect(page.getByLabel(`${folder.name} Context Menu`)).toBeVisible();
   });
 });

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

@@ -33,7 +33,12 @@
 
 import { fileURLToPath } from 'url';
 
-import { createDomainObjectWithDefaults, createExampleTelemetryObject } from '../../appActions.js';
+import {
+  createDomainObjectWithDefaults,
+  createExampleTelemetryObject,
+  setIndependentTimeConductorBounds,
+  setTimeConductorBounds
+} from '../../appActions.js';
 import { MISSION_TIME } from '../../constants.js';
 import { expect, test } from '../../pluginFixtures.js';
 
@@ -89,6 +94,53 @@ test.describe('Generate Visual Test Data @localStorage @generatedata @clock', ()
     });
   });
 
+  test('Generate display layout with 1 child overlay plot', async ({ page, context }) => {
+    const parent = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Parent Display Layout'
+    });
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      name: 'Child Overlay Plot 1',
+      parent: parent.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Child SWG 1',
+      parent: overlayPlot.uuid
+    });
+
+    await page.goto(parent.url, { waitUntil: 'domcontentloaded' });
+
+    await setIndependentTimeConductorBounds(page, {
+      start: '2024-11-12 19:11:11.000Z',
+      end: '2024-11-12 20:11:11.000Z'
+    });
+
+    const NEW_GLOBAL_START_BOUNDS = '2024-11-11 19:11:11.000Z';
+    const NEW_GLOBAL_END_BOUNDS = '2024-11-11 20:11:11.000Z';
+
+    await setTimeConductorBounds(page, NEW_GLOBAL_START_BOUNDS, NEW_GLOBAL_END_BOUNDS);
+
+    // Verify that the global time conductor bounds have been updated
+    expect(
+      await page.getByLabel('Global Time Conductor').getByLabel('Start bounds').textContent()
+    ).toEqual(NEW_GLOBAL_START_BOUNDS);
+    expect(
+      await page.getByLabel('Global Time Conductor').getByLabel('End bounds').textContent()
+    ).toEqual(NEW_GLOBAL_END_BOUNDS);
+
+    //Save localStorage for future test execution
+    await context.storageState({
+      path: fileURLToPath(
+        new URL(
+          '../../../e2e/test-data/display_layout_with_child_overlay_plot.json',
+          import.meta.url
+        )
+      )
+    });
+  });
+
   test('Generate flexible layout with 2 child display layouts', async ({ page, context }) => {
     // Create Display Layout
     const parent = await createDomainObjectWithDefaults(page, {

e2e/tests/functional/planning/timestrip.e2e.spec.js

@@ -131,7 +131,10 @@ test.describe('Time Strip', () => {
       const startBoundString = new Date(startBound).toISOString().replace('T', ' ');
       const endBoundString = new Date(endBound).toISOString().replace('T', ' ');
 
-      await setIndependentTimeConductorBounds(page, startBoundString, endBoundString);
+      await setIndependentTimeConductorBounds(page, {
+        start: startBoundString,
+        end: endBoundString
+      });
       expect(await activityBounds.count()).toEqual(1);
     });
 
@@ -160,7 +163,10 @@ test.describe('Time Strip', () => {
       const startBoundString = new Date(startBound).toISOString().replace('T', ' ');
       const endBoundString = new Date(endBound).toISOString().replace('T', ' ');
 
-      await setIndependentTimeConductorBounds(page, startBoundString, endBoundString);
+      await setIndependentTimeConductorBounds(page, {
+        start: startBoundString,
+        end: endBoundString
+      });
 
       // Verify that two events are displayed
       expect(await activityBounds.count()).toEqual(2);

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

@@ -286,7 +286,7 @@ test.describe('Basic Condition Set Use', () => {
     await page.locator('button[title="Save"]').click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
-    await page.click('button[title="Change the current view"]');
+    await page.getByLabel('Open the View Switcher Menu').click();
 
     await expect(page.getByRole('menuitem', { name: /Lad Table/ })).toBeHidden();
     await expect(page.getByRole('menuitem', { name: /Conditions View/ })).toBeVisible();