New action to reload an individual view and all of its children (#7362)

* add reload action plugin

* checking for domain object before reloading

* check if objects are equal before refreshing

* add test

* lint

* change to label

* ensure object styles are initialized

* resubscribe to staleness too

* add better labels for tabels

* ensure tab uses exact for label now due to table aria changes

* fix table tests

* make tabs exact

* update conflicts

---------

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>

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

@@ -0,0 +1,125 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { createDomainObjectWithDefaults, expandEntireTree } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Reload action', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const displayLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout'
+    });
+
+    const alphaTable = await createDomainObjectWithDefaults(page, {
+      type: 'Telemetry Table',
+      name: 'Alpha Table'
+    });
+
+    const betaTable = await createDomainObjectWithDefaults(page, {
+      type: 'Telemetry Table',
+      name: 'Beta Table'
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: alphaTable.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.001'
+      }
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: betaTable.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.001'
+      }
+    });
+
+    await page.goto(displayLayout.url);
+
+    // Expand all folders
+    await expandEntireTree(page);
+
+    await page.getByLabel('Edit Object', { exact: true }).click();
+
+    await page.dragAndDrop(`text='Alpha Table'`, '.l-layout__grid-holder', {
+      targetPosition: { x: 0, y: 0 }
+    });
+
+    await page.dragAndDrop(`text='Beta Table'`, '.l-layout__grid-holder', {
+      targetPosition: { x: 0, y: 250 }
+    });
+
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+  });
+
+  test('can reload display layout and its children', async ({ page }) => {
+    const beforeReloadAlphaTelemetryValue = await page
+      .getByLabel('Alpha Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+    const beforeReloadBetaTelemetryValue = await page
+      .getByLabel('Beta Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+    // reload alpha
+    await page.getByTitle('View menu items').first().click();
+    await page.getByRole('menuitem', { name: /Reload/ }).click();
+
+    const afterReloadAlphaTelemetryValue = await page
+      .getByLabel('Alpha Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+    const afterReloadBetaTelemetryValue = await page
+      .getByLabel('Beta Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+
+    expect(beforeReloadAlphaTelemetryValue).not.toEqual(afterReloadAlphaTelemetryValue);
+    expect(beforeReloadBetaTelemetryValue).toEqual(afterReloadBetaTelemetryValue);
+
+    // now reload parent
+    await page.getByTitle('More actions').click();
+    await page.getByRole('menuitem', { name: /Reload/ }).click();
+
+    const fullReloadAlphaTelemetryValue = await page
+      .getByLabel('Alpha Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+    const fullReloadBetaTelemetryValue = await page
+      .getByLabel('Beta Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+
+    expect(fullReloadAlphaTelemetryValue).not.toEqual(afterReloadAlphaTelemetryValue);
+    expect(fullReloadBetaTelemetryValue).not.toEqual(afterReloadBetaTelemetryValue);
+  });
+});

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

@@ -50,7 +50,7 @@ test.describe('Tabs View', () => {
     page.goto(tabsView.url);
 
     // select first tab
-    await page.getByLabel(`${table.name} tab`).click();
+    await page.getByLabel(`${table.name} tab`, { exact: true }).click();
     // ensure table header visible
     await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
 
@@ -58,7 +58,7 @@ test.describe('Tabs View', () => {
     await expect(page.locator('canvas[id=webglContext]')).toBeHidden();
 
     // select second tab
-    await page.getByLabel(`${notebook.name} tab`).click();
+    await page.getByLabel(`${notebook.name} tab`, { exact: true }).click();
 
     // ensure notebook visible
     await expect(page.locator('.c-notebook__drag-area')).toBeVisible();
@@ -67,7 +67,7 @@ test.describe('Tabs View', () => {
     await expect(page.locator('canvas[id=webglContext]')).toBeHidden();
 
     // select third tab
-    await page.getByLabel(`${sineWaveGenerator.name} tab`).click();
+    await page.getByLabel(`${sineWaveGenerator.name} tab`, { exact: true }).click();
 
     // expect sine wave generator visible
     await expect(page.locator('.c-plot')).toBeVisible();
@@ -78,7 +78,7 @@ test.describe('Tabs View', () => {
     await expect(page.locator('canvas').nth(1)).toBeVisible();
 
     // now try to select the first tab again
-    await page.getByLabel(`${table.name} tab`).click();
+    await page.getByLabel(`${table.name} tab`, { exact: true }).click();
     // ensure table header visible
     await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
 

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

@@ -64,10 +64,9 @@ test.describe('Telemetry Table', () => {
 
     // Get the most recent telemetry date
     const latestTelemetryDate = await page
-      .locator('table.c-telemetry-table__body > tbody > tr')
+      .getByLabel('table content')
+      .getByLabel('utc table cell')
       .last()
-      .locator('td')
-      .nth(1)
       .getAttribute('title');
 
     // Verify that it is <= our new end bound
@@ -91,7 +90,7 @@ test.describe('Telemetry Table', () => {
     await page.getByRole('searchbox', { name: 'message filter input' }).click();
     await page.getByRole('searchbox', { name: 'message filter input' }).fill('Roger');
 
-    let cells = await page.getByRole('cell', { name: /Roger/ }).all();
+    let cells = await page.getByRole('cell').getByText(/Roger/).all();
     // ensure we've got more than one cell
     expect(cells.length).toBeGreaterThan(1);
     // ensure the text content of each cell contains the search term
@@ -103,7 +102,10 @@ test.describe('Telemetry Table', () => {
     await page.getByRole('searchbox', { name: 'message filter input' }).click();
     await page.getByRole('searchbox', { name: 'message filter input' }).fill('Dodger');
 
-    cells = await page.getByRole('cell', { name: /Dodger/ }).all();
+    cells = await page
+      .getByRole('cell')
+      .getByText(/Dodger/)
+      .all();
     // ensure we've got more than one cell
     expect(cells.length).toBe(0);
     // ensure the text content of each cell contains the search term
@@ -135,7 +137,7 @@ test.describe('Telemetry Table', () => {
     await page.getByRole('searchbox', { name: 'message filter input' }).click();
     await page.getByRole('searchbox', { name: 'message filter input' }).fill('/[Rr]oger/');
 
-    let cells = await page.getByRole('cell', { name: /Roger/ }).all();
+    let cells = await page.getByRole('cell').getByText(/Roger/).all();
     // ensure we've got more than one cell
     expect(cells.length).toBeGreaterThan(1);
     // ensure the text content of each cell contains the search term
@@ -147,7 +149,10 @@ test.describe('Telemetry Table', () => {
     await page.getByRole('searchbox', { name: 'message filter input' }).click();
     await page.getByRole('searchbox', { name: 'message filter input' }).fill('/[Dd]oger/');
 
-    cells = await page.getByRole('cell', { name: /Dodger/ }).all();
+    cells = await page
+      .getByRole('cell')
+      .getByText(/Dodger/)
+      .all();
     // ensure we've got more than one cell
     expect(cells.length).toBe(0);
     // ensure the text content of each cell contains the search term