feat(#7394): Incorporate Status Indicators into the main Vue app (#7395)

* feat(IndicatorAPI): accept Vue components

- Adds a new property to Indicators, `component`, which is a synchronous or asynchronous Vue component.
- Adds `wrapHtmlElement` utility function to create anonymous Vue components out of `HTMLElement`s (for backwards compatibility)
- Refactors StatusIndicators.vue to use dynamic components, allowing us to dynamically render indicators (and keep it all within Vue's ecosystem).

* refactor(indicators): use dynamic Vue components instead of `mount()`

- Refactors some indicators to use Vue components directly as async components

* refactor: use Vue reactivity for timestamps in clock indicator

* fix(test): fix unit tests and remove some console logs

* test(e2e): stabilize ladSet e2e test

* test: mix in some Vue indicators in indicatorSpec

* refactor: cleanup variable names

* docs: update IndicatorAPI docs

* fix(e2e): wait for async status bar components to load before snapshot

* a11y(e2e): add aria-labels and wait for status bar to load

* test(e2e): add exact: true

* fix: initializing indicators

* fix(typo): uhhh.. how did that get there? O_o

* fix: use synchronous components for default indicators

* test: clean up, remove unnecessary `nextTick()`s

* test: remove more `nextTick()`s

* refactor: lint:fix

* fix: `on` -> `off`

* test(e2e): stabilize tabs test

* test(e2e): attempt to stabilize limit lines tests with `toHaveCount()` assertion

Author: ozyx

e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js

@@ -260,9 +260,9 @@ async function assertLimitLinesExistAndAreVisible(page) {
   await waitForPlotsToRender(page);
   // Wait for limit lines to be created
   await page.waitForSelector('.js-limit-area', { state: 'attached' });
-  const limitLineCount = await page.locator('.c-plot-limit-line').count();
   // There should be 10 limit lines created by default
-  expect(await page.locator('.c-plot-limit-line').count()).toBe(10);
+  await expect(page.locator('.c-plot-limit-line')).toHaveCount(10);
+  const limitLineCount = await page.locator('.c-plot-limit-line').count();
   for (let i = 0; i < limitLineCount; i++) {
     await expect(page.locator('.c-plot-limit-line').nth(i)).toBeVisible();
   }

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

@@ -55,7 +55,7 @@ test.describe('Tabs View', () => {
     await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
 
     // no canvas (i.e., sine wave generator) in the document should be visible
-    await expect(page.locator('canvas')).toBeHidden();
+    await expect(page.locator('canvas[id=webglContext]')).toBeHidden();
 
     // select second tab
     await page.getByLabel(`${notebook.name} tab`).click();
@@ -64,7 +64,7 @@ test.describe('Tabs View', () => {
     await expect(page.locator('.c-notebook__drag-area')).toBeVisible();
 
     // no canvas (i.e., sine wave generator) in the document should be visible
-    await expect(page.locator('canvas')).toBeHidden();
+    await expect(page.locator('canvas[id=webglContext]')).toBeHidden();
 
     // select third tab
     await page.getByLabel(`${sineWaveGenerator.name} tab`).click();
@@ -83,6 +83,6 @@ test.describe('Tabs View', () => {
     await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
 
     // no canvas (i.e., sine wave generator) in the document should be visible
-    await expect(page.locator('canvas')).toBeHidden();
+    await expect(page.locator('canvas[id=webglContext]')).toBeHidden();
   });
 });

e2e/tests/functional/search.e2e.spec.js

@@ -99,7 +99,7 @@ test.describe('Grand Search', () => {
       page.waitForNavigation(),
       page.getByLabel('OpenMCT Search').getByText('Clock A').click()
     ]);
-    await expect(page.getByRole('status', { name: 'Clock' })).toBeVisible();
+    await expect(page.getByRole('status', { name: 'Clock', exact: true })).toBeVisible();
 
     await grandSearchInput.fill('Disp');
     await expect(page.getByLabel('Object Search Result').first()).toContainText(

e2e/tests/visual-a11y/components/header.visual.spec.js

@@ -36,6 +36,22 @@ test.describe('Visual - Header @a11y', () => {
   test.beforeEach(async ({ page }) => {
     //Go to baseURL and Hide Tree
     await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+    // Wait for status bar to load
+    await expect(
+      page.getByRole('status', {
+        name: 'Clock Indicator'
+      })
+    ).toBeInViewport();
+    await expect(
+      page.getByRole('status', {
+        name: 'Global Clear Indicator'
+      })
+    ).toBeInViewport();
+    await expect(
+      page.getByRole('status', {
+        name: 'Snapshot Indicator'
+      })
+    ).toBeInViewport();
   });
 
   test('header sizing', async ({ page, theme }) => {

e2e/tests/visual-a11y/faultManagement.visual.spec.js

@@ -23,7 +23,7 @@ import percySnapshot from '@percy/playwright';
 import { fileURLToPath } from 'url';
 
 import * as utils from '../../helper/faultUtils.js';
-import { test } from '../../pluginFixtures.js';
+import { expect, test } from '../../pluginFixtures.js';
 
 test.describe('Fault Management Visual Tests', () => {
   test('icon test', async ({ page, theme }) => {
@@ -32,6 +32,23 @@ test.describe('Fault Management Visual Tests', () => {
     });
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
+    // Wait for status bar to load
+    await expect(
+      page.getByRole('status', {
+        name: 'Clock Indicator'
+      })
+    ).toBeInViewport();
+    await expect(
+      page.getByRole('status', {
+        name: 'Global Clear Indicator'
+      })
+    ).toBeInViewport();
+    await expect(
+      page.getByRole('status', {
+        name: 'Snapshot Indicator'
+      })
+    ).toBeInViewport();
+
     await percySnapshot(page, `Fault Management icon appears in tree (theme: '${theme}')`);
   });
 

src/api/indicators/IndicatorAPI.js

@@ -22,9 +22,12 @@
 
 import EventEmitter from 'EventEmitter';
 
+import vueWrapHtmlElement from '../../utils/vueWrapHtmlElement.js';
 import SimpleIndicator from './SimpleIndicator.js';
 
 class IndicatorAPI extends EventEmitter {
+  /** @type {import('../../../openmct.js').OpenMCT} */
+  openmct;
   constructor(openmct) {
     super();
 
@@ -42,6 +45,18 @@ class IndicatorAPI extends EventEmitter {
     return new SimpleIndicator(this.openmct);
   }
 
+  /**
+   * @typedef {import('vue').Component} VueComponent
+   */
+
+  /**
+   * @typedef {Object} Indicator
+   * @property {HTMLElement} [element]
+   * @property {VueComponent|Promise<VueComponent>} [vueComponent]
+   * @property {string} key
+   * @property {number} priority
+   */
+
   /**
    * Accepts an indicator object, which is a simple object
    * with a two attributes: 'element' which has an HTMLElement
@@ -62,11 +77,20 @@ class IndicatorAPI extends EventEmitter {
    * myIndicator.text("Hello World!");
    * myIndicator.iconClass("icon-info");
    *
+   * If you would like to use a Vue component, you can pass it in
+   * directly as the 'vueComponent' attribute of the indicator object.
+   * This accepts a Vue component or a promise that resolves to a Vue component (for asynchronous
+   * rendering).
+   *
+   * @param {Indicator} indicator
    */
   add(indicator) {
     if (!indicator.priority) {
       indicator.priority = this.openmct.priority.DEFAULT;
     }
+    if (!indicator.vueComponent) {
+      indicator.vueComponent = vueWrapHtmlElement(indicator.element);
+    }
 
     this.indicatorObjects.push(indicator);
 

src/api/indicators/IndicatorAPISpec.js

@@ -19,6 +19,8 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import { defineComponent } from 'vue';
+
 import { createOpenMct, resetApplicationState } from '../../utils/testing.js';
 import SimpleIndicator from './SimpleIndicator.js';
 
@@ -33,7 +35,7 @@ describe('The Indicator API', () => {
     return resetApplicationState(openmct);
   });
 
-  function generateIndicator(className, label, priority) {
+  function generateHTMLIndicator(className, label, priority) {
     const element = document.createElement('div');
     element.classList.add(className);
     const textNode = document.createTextNode(label);
@@ -46,46 +48,66 @@ describe('The Indicator API', () => {
     return testIndicator;
   }
 
-  it('can register an indicator', () => {
-    const testIndicator = generateIndicator('test-indicator', 'This is a test indicator', 2);
+  function generateVueIndicator(priority) {
+    return {
+      vueComponent: defineComponent({
+        template: '<div class="test-indicator">This is a test indicator</div>'
+      }),
+      priority
+    };
+  }
+
+  it('can register an HTML indicator', () => {
+    const testIndicator = generateHTMLIndicator('test-indicator', 'This is a test indicator', 2);
+    openmct.indicators.add(testIndicator);
+    expect(openmct.indicators.indicatorObjects).toBeDefined();
+    // notifier indicator is installed by default
+    expect(openmct.indicators.indicatorObjects.length).toBe(2);
+  });
+
+  it('can register a Vue indicator', () => {
+    const testIndicator = generateVueIndicator(2);
     openmct.indicators.add(testIndicator);
     expect(openmct.indicators.indicatorObjects).toBeDefined();
     // notifier indicator is installed by default
     expect(openmct.indicators.indicatorObjects.length).toBe(2);
   });
 
   it('can order indicators based on priority', () => {
-    const testIndicator1 = generateIndicator(
+    const testIndicator1 = generateHTMLIndicator(
       'test-indicator-1',
       'This is a test indicator',
       openmct.priority.LOW
     );
     openmct.indicators.add(testIndicator1);
 
-    const testIndicator2 = generateIndicator(
+    const testIndicator2 = generateHTMLIndicator(
       'test-indicator-2',
       'This is another test indicator',
       openmct.priority.DEFAULT
     );
     openmct.indicators.add(testIndicator2);
 
-    const testIndicator3 = generateIndicator(
+    const testIndicator3 = generateHTMLIndicator(
       'test-indicator-3',
       'This is yet another test indicator',
       openmct.priority.LOW
     );
     openmct.indicators.add(testIndicator3);
 
-    const testIndicator4 = generateIndicator(
+    const testIndicator4 = generateHTMLIndicator(
       'test-indicator-4',
       'This is yet another test indicator',
       openmct.priority.HIGH
     );
     openmct.indicators.add(testIndicator4);
 
-    expect(openmct.indicators.indicatorObjects.length).toBe(5);
+    const testIndicator5 = generateVueIndicator(openmct.priority.DEFAULT);
+    openmct.indicators.add(testIndicator5);
+
+    expect(openmct.indicators.indicatorObjects.length).toBe(6);
     const indicatorObjectsByPriority = openmct.indicators.getIndicatorObjectsByPriority();
-    expect(indicatorObjectsByPriority.length).toBe(5);
+    expect(indicatorObjectsByPriority.length).toBe(6);
     expect(indicatorObjectsByPriority[2].priority).toBe(openmct.priority.DEFAULT);
   });
 

src/plugins/clearData/components/GlobalClearIndicator.vue

@@ -20,7 +20,10 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div class="c-indicator c-indicator--clickable icon-clear-data s-status-caution">
+  <div
+    aria-label="Global Clear Indicator"
+    class="c-indicator c-indicator--clickable icon-clear-data s-status-caution"
+  >
     <span class="label c-indicator__label">
       <button @click="globalClearEmit">Clear Data</button>
     </span>

src/plugins/clearData/plugin.js

@@ -19,8 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import mount from 'utils/mount';
-
 import ClearDataAction from './ClearDataAction.js';
 import GlobalClearIndicator from './components/GlobalClearIndicator.vue';
 
@@ -31,27 +29,10 @@ export default function plugin(appliesToObjects, options = { indicator: true })
 
   return function install(openmct) {
     if (installIndicator) {
-      const { vNode, destroy } = mount(
-        {
-          components: {
-            GlobalClearIndicator
-          },
-          provide: {
-            openmct
-          },
-          template: '<GlobalClearIndicator></GlobalClearIndicator>'
-        },
-        {
-          app: openmct.app,
-          element: document.createElement('div')
-        }
-      );
-
       let indicator = {
-        element: vNode.el,
+        vueComponent: GlobalClearIndicator,
         key: 'global-clear-indicator',
-        priority: openmct.priority.DEFAULT,
-        destroy: destroy
+        priority: openmct.priority.DEFAULT
       };
 
       openmct.indicators.add(indicator);

src/plugins/clearData/pluginSpec.js

@@ -21,7 +21,6 @@
  *****************************************************************************/
 
 import { createMouseEvent, createOpenMct, resetApplicationState } from 'utils/testing';
-import { nextTick } from 'vue';
 
 import ClearDataPlugin from './plugin.js';
 
@@ -208,12 +207,11 @@ describe('The Clear Data Plugin:', () => {
     it('installs', () => {
       const globalClearIndicator = openmct.indicators.indicatorObjects.find(
         (indicator) => indicator.key === 'global-clear-indicator'
-      ).element;
+      ).vueComponent;
       expect(globalClearIndicator).toBeDefined();
     });
 
-    it('renders its major elements', async () => {
-      await nextTick();
+    it('renders its major elements', () => {
       const indicatorClass = appHolder.querySelector('.c-indicator');
       const iconClass = appHolder.querySelector('.icon-clear-data');
       const indicatorLabel = appHolder.querySelector('.c-indicator__label');
@@ -228,10 +226,7 @@ describe('The Clear Data Plugin:', () => {
       const indicatorLabel = appHolder.querySelector('.c-indicator__label');
       const buttonElement = indicatorLabel.querySelector('button');
       const clickEvent = createMouseEvent('click');
-      openmct.objectViews.on('clearData', () => {
-        // when we click the button, this event should fire
-        done();
-      });
+      openmct.objectViews.on('clearData', done);
       buttonElement.dispatchEvent(clickEvent);
     });
   });

src/plugins/clock/components/ClockIndicator.vue

@@ -22,6 +22,7 @@
 
 <template>
   <div
+    aria-label="Clock Indicator"
     class="c-indicator t-indicator-clock icon-clock no-minify c-indicator--not-clickable"
     role="complementary"
   >
@@ -40,27 +41,32 @@ export default {
   props: {
     indicatorFormat: {
       type: String,
-      required: true
+      default: 'YYYY/MM/DD HH:mm:ss'
     }
   },
   data() {
     return {
-      timeTextValue: this.openmct.time.getClock() ? this.openmct.time.now() : undefined
+      timestamp: this.openmct.time.getClock() ? this.openmct.time.now() : undefined
     };
   },
+  computed: {
+    timeTextValue() {
+      return `${moment.utc(this.timestamp).format(this.indicatorFormat)} ${
+        this.openmct.time.getTimeSystem().name
+      }`;
+    }
+  },
   mounted() {
     this.tick = raf(this.tick);
     this.openmct.time.on('tick', this.tick);
-    this.tick(this.timeTextValue);
+    this.tick(this.timestamp);
   },
   beforeUnmount() {
     this.openmct.time.off('tick', this.tick);
   },
   methods: {
     tick(timestamp) {
-      this.timeTextValue = `${moment.utc(timestamp).format(this.indicatorFormat)} ${
-        this.openmct.time.getTimeSystem().name
-      }`;
+      this.timestamp = timestamp;
     }
   }
 };