Defer rendering for inactive tabs in open mct tabbed view (#7149)

* simple prototype

* add a few examples

* revert to original

* only check first element

* only print when we're firing

* need to return status

* ignore polling logic if not visible

* convert to es6 classes

* add private variables

* remove debug code

* revert on this branch webgl changes

* fix draw loader import

* do not use v-model for search component

* remove flakey unit tests and add e2e tests for same behavior

* remove fdescribe

* add test word

* add simple functional test for tabs

* add performance test for tabs

* make tab selection more explict

* better describe expects

* lint

* switch back to fixed time

* fix perf test for webpacked version

* lint

* relax condition

* relax condition

* resolve PR comments

* address PR review comments

* typo on role vs locator

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

@@ -0,0 +1,74 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+const { createDomainObjectWithDefaults } = require('../../../../appActions');
+const { test, expect } = require('../../../../pluginFixtures');
+
+test.describe('Tabs View', () => {
+  test('Renders tabbed elements', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const tabsView = await createDomainObjectWithDefaults(page, {
+      type: 'Tabs View'
+    });
+    const table = await createDomainObjectWithDefaults(page, {
+      type: 'Telemetry Table',
+      parent: tabsView.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Event Message Generator',
+      parent: table.uuid
+    });
+    const notebook = await createDomainObjectWithDefaults(page, {
+      type: 'Notebook',
+      parent: tabsView.uuid
+    });
+    const sineWaveGenerator = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: tabsView.uuid
+    });
+
+    page.goto(tabsView.url);
+
+    // select first tab
+    await page.getByLabel(`${table.name} tab`).click();
+    // ensure table header visible
+    await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
+
+    // select second tab
+    await page.getByLabel(`${notebook.name} tab`).click();
+
+    // ensure notebook visible
+    await expect(page.locator('.c-notebook__drag-area')).toBeVisible();
+
+    // select third tab
+    await page.getByLabel(`${sineWaveGenerator.name} tab`).click();
+
+    // expect sine wave generator visible
+    expect(await page.locator('.c-plot').isVisible()).toBe(true);
+
+    // now try to select the first tab again
+    await page.getByLabel(`${table.name} tab`).click();
+    // ensure table header visible
+    await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
+  });
+});

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

@@ -78,4 +78,85 @@ test.describe('Telemetry Table', () => {
     const endBoundMilliseconds = Date.parse(endDate);
     expect(latestMilliseconds).toBeLessThanOrEqual(endBoundMilliseconds);
   });
+
+  test('Supports filtering telemetry by regular text search', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const table = await createDomainObjectWithDefaults(page, { type: 'Telemetry Table' });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Event Message Generator',
+      parent: table.uuid
+    });
+
+    // focus the Telemetry Table
+    await page.goto(table.url);
+
+    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();
+    // ensure we've got more than one cell
+    expect(cells.length).toBeGreaterThan(1);
+    // ensure the text content of each cell contains the search term
+    for (const cell of cells) {
+      const text = await cell.textContent();
+      expect(text).toContain('Roger');
+    }
+
+    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();
+    // ensure we've got more than one cell
+    expect(cells.length).toBe(0);
+    // ensure the text content of each cell contains the search term
+    for (const cell of cells) {
+      const text = await cell.textContent();
+      expect(text).not.toContain('Dodger');
+    }
+
+    // Click pause button
+    await page.click('button[title="Pause"]');
+  });
+
+  test('Supports filtering using Regex', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const table = await createDomainObjectWithDefaults(page, { type: 'Telemetry Table' });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Event Message Generator',
+      parent: table.uuid
+    });
+
+    // focus the Telemetry Table
+    page.goto(table.url);
+    await page.getByRole('searchbox', { name: 'message filter input' }).hover();
+    await page.getByLabel('Message filter header').getByRole('button', { name: '/R/' }).click();
+    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();
+    // ensure we've got more than one cell
+    expect(cells.length).toBeGreaterThan(1);
+    // ensure the text content of each cell contains the search term
+    for (const cell of cells) {
+      const text = await cell.textContent();
+      expect(text).toContain('Roger');
+    }
+
+    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();
+    // ensure we've got more than one cell
+    expect(cells.length).toBe(0);
+    // ensure the text content of each cell contains the search term
+    for (const cell of cells) {
+      const text = await cell.textContent();
+      expect(text).not.toContain('Dodger');
+    }
+
+    // Click pause button
+    await page.click('button[title="Pause"]');
+  });
 });