fix: enable devtools in prod

.circleci/config.yml

@@ -5,7 +5,7 @@ orbs:
 executors:
   pw-focal-development:
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.0-focal
+      - image: mcr.microsoft.com/playwright:v1.42.1-focal
     environment:
       NODE_ENV: development # Needed to ensure 'dist' folder created and devDependencies installed
       PERCY_POSTINSTALL_BROWSER: 'true' # Needed to store the percy browser in cache deps
@@ -159,7 +159,7 @@ jobs:
     steps:
       - build_and_install:
           node-version: lts/hydrogen
-      - run: npx playwright@1.44.0 install #Necessary for bare ubuntu machine
+      - run: npx playwright@1.42.1 install #Necessary for bare ubuntu machine
       - run: |
           export $(cat src/plugins/persistence/couch/.env.ci | xargs)
           docker-compose -f src/plugins/persistence/couch/couchdb-compose.yaml up --detach

.github/workflows/e2e-couchdb.yml

@@ -37,7 +37,7 @@ jobs:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      - run: npx playwright@1.44.0 install
+      - run: npx playwright@1.42.1 install
 
       - name: Start CouchDB Docker Container and Init with Setup Scripts
         run: |

.github/workflows/e2e-flakefinder.yml

@@ -30,7 +30,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - run: npx playwright@1.44.0 install
+      - run: npx playwright@1.42.1 install
       - run: npm ci --no-audit --progress=false
 
       - name: Run E2E Tests (Repeated 10 Times)

.github/workflows/e2e-perf.yml

@@ -28,7 +28,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - run: npx playwright@1.44.0 install
+      - run: npx playwright@1.42.1 install
       - run: npm ci --no-audit --progress=false
       - run: npm run test:perf:localhost
       - run: npm run test:perf:contract

.github/workflows/e2e-pr.yml

@@ -33,7 +33,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - run: npx playwright@1.44.0 install
+      - run: npx playwright@1.42.1 install
       - run: npx playwright install chrome-beta
       - run: npm ci --no-audit --progress=false
       - run: npm run test:e2e:full -- --max-failures=40

.webpack/webpack.common.mjs

@@ -90,7 +90,7 @@ const config = {
       __OPENMCT_REVISION__: `'${gitRevision}'`,
       __OPENMCT_BUILD_BRANCH__: `'${gitBranch}'`,
       __VUE_OPTIONS_API__: true, // enable/disable Options API support, default: true
-      __VUE_PROD_DEVTOOLS__: false // enable/disable devtools support in production, default: false
+      __VUE_PROD_DEVTOOLS__: true // enable/disable devtools support in production, default: false
     }),
     new VueLoaderPlugin(),
     new CopyWebpackPlugin({

e2e/appActions.js

@@ -275,17 +275,6 @@ async function navigateToObjectWithFixedTimeBounds(page, url, start, end) {
   );
 }
 
-/**
- * Navigates directly to a given object url, in real-time mode.
- * @param {import('@playwright/test').Page} page
- * @param {string} url The url to the domainObject
- */
-async function navigateToObjectWithRealTime(page, url, start = '1800000', end = '30000') {
-  await page.goto(
-    `${url}?tc.mode=local&tc.startDelta=${start}&tc.endDelta=${end}&tc.timeSystem=utc`
-  );
-}
-
 /**
  * Open the given `domainObject`'s context menu from the object tree.
  * Expands the path to the object and scrolls to it if necessary.
@@ -667,7 +656,6 @@ export {
   getFocusedObjectUuid,
   getHashUrlToDomainObject,
   navigateToObjectWithFixedTimeBounds,
-  navigateToObjectWithRealTime,
   openObjectTreeContextMenu,
   renameObjectFromContextMenu,
   setEndOffset,

e2e/package.json

@@ -18,7 +18,7 @@
     "@types/sinonjs__fake-timers": "8.1.5",
     "@percy/cli": "1.27.4",
     "@percy/playwright": "1.0.4",
-    "@playwright/test": "1.44.0",
+    "@playwright/test": "1.42.1",
     "@axe-core/playwright": "4.8.5",
     "sinon": "17.0.0"
   },

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

@@ -371,7 +371,7 @@ test.describe('Basic Condition Set Use', () => {
 
     // Validate that the condition set is evaluating and outputting
     // the correct value when the underlying telemetry subscription is active.
-    let outputValue = page.getByLabel('Current Output Value');
+    let outputValue = page.locator('[aria-label="Current Output Value"]');
     await expect(outputValue).toHaveText('false');
 
     await page.goto(exampleTelemetry.url);
@@ -462,7 +462,7 @@ test.describe('Basic Condition Set Use', () => {
 
     // Validate that the condition set is evaluating and outputting
     // the correct value when the underlying telemetry subscription is active.
-    let outputValue = page.getByLabel('Current Output Value');
+    let outputValue = page.locator('[aria-label="Current Output Value"]');
     await expect(outputValue).toHaveText('false');
 
     await page.goto(exampleTelemetry.url);
@@ -475,81 +475,3 @@ test.describe('Basic Condition Set Use', () => {
     });
   });
 });
-
-test.describe('Condition Set Composition', () => {
-  let conditionSet;
-  let exampleTelemetry;
-
-  test.beforeEach(async ({ page }) => {
-    await page.goto('./', { waitUntil: 'domcontentloaded' });
-
-    // Create Condition Set
-    conditionSet = await createDomainObjectWithDefaults(page, {
-      type: 'Condition Set'
-    });
-
-    // Create Telemetry Object as child to Condition Set
-    exampleTelemetry = await createExampleTelemetryObject(page, conditionSet.uuid);
-
-    // Edit Condition Set
-    await page.goto(conditionSet.url);
-    await page.getByRole('button', { name: 'Edit Object' }).click();
-
-    // Add Condition to Condition Set
-    await page.getByRole('button', { name: 'Add Condition' }).click();
-
-    // Enter Condition Output
-    await page.getByLabel('Condition Name Input').first().fill('Negative');
-    await page.getByLabel('Condition Output Type').first().selectOption({ value: 'string' });
-    await page.getByLabel('Condition Output String').first().fill('Negative');
-
-    // Condition Trigger default is okay so no change needed to form
-
-    // Enter Condition Criterion
-    await page.getByLabel('Criterion Telemetry Selection').first().selectOption({ value: 'all' });
-    await page.getByLabel('Criterion Metadata Selection').first().selectOption({ value: 'sin' });
-    await page
-      .locator('select[aria-label="Criterion Comparison Selection"]')
-      .first()
-      .selectOption({ value: 'lessThan' });
-    await page.getByLabel('Criterion Input').first().fill('0');
-
-    // Save the Condition Set
-    await page.getByRole('button', { name: 'Save' }).click();
-    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
-  });
-
-  test('You can remove telemetry from a condition set with existing conditions', async ({
-    page
-  }) => {
-    test.info().annotations.push({
-      type: 'issue',
-      description: 'https://github.com/nasa/openmct/issues/7710'
-    });
-
-    await page.getByLabel('Expand My Items folder').click();
-    await page.getByLabel(`Expand ${conditionSet.name} conditionSet`).click();
-
-    await page
-      .getByLabel(`Navigate to ${exampleTelemetry.name}`, { exact: false })
-      .click({ button: 'right' });
-
-    await page
-      .getByLabel(`${exampleTelemetry.name} Context Menu`)
-      .getByRole('menuitem', { name: 'Remove' })
-      .click();
-    await page.getByRole('button', { name: 'OK', exact: true }).click();
-
-    await page
-      .getByLabel(`Navigate to ${conditionSet.name} conditionSet Object`, { exact: true })
-      .click();
-    await page.getByRole('button', { name: 'Edit Object' }).click();
-    await page.getByRole('tab', { name: 'Elements' }).click();
-    expect(
-      await page
-        .getByRole('tabpanel', { name: 'Inspector Views' })
-        .getByRole('listitem', { name: exampleTelemetry.name })
-        .count()
-    ).toEqual(0);
-  });
-});

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

@@ -22,8 +22,8 @@
 
 import {
   createDomainObjectWithDefaults,
-  navigateToObjectWithRealTime,
-  setTimeConductorBounds
+  setTimeConductorBounds,
+  setTimeConductorMode
 } from '../../../../appActions.js';
 import { expect, test } from '../../../../pluginFixtures.js';
 
@@ -39,52 +39,12 @@ test.describe('Telemetry Table', () => {
       type: 'Sine Wave Generator',
       parent: table.uuid
     });
-    await navigateToObjectWithRealTime(page, table.url);
+    await page.goto(table.url);
+    await setTimeConductorMode(page, false);
     const rows = page.getByLabel('table content').getByLabel('Table Row');
     await expect(rows).toHaveCount(50);
   });
 
-  test('on load, auto scrolls to top for descending, and to bottom for ascending', async ({
-    page
-  }) => {
-    const sineWaveGenerator = await createDomainObjectWithDefaults(page, {
-      type: 'Sine Wave Generator',
-      parent: table.uuid
-    });
-
-    // verify in telemetry table object view
-    await navigateToObjectWithRealTime(page, table.url);
-
-    expect(await getScrollPosition(page)).toBe(0);
-
-    // verify in telemetry table view
-    await page.goto(sineWaveGenerator.url);
-    await page.getByLabel('Open the View Switcher Menu').click();
-    await page.getByText('Telemetry Table', { exact: true }).click();
-
-    expect(await getScrollPosition(page)).toBe(0);
-
-    // navigate back to table
-    await page.goto(table.url);
-
-    // go into edit mode
-    await page.getByLabel('Edit Object').click();
-
-    // change sort direction
-    await page.locator('thead div').filter({ hasText: 'Time' }).click();
-
-    // save view
-    await page.getByRole('button', { name: 'Save' }).click();
-    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
-
-    // navigate away and back
-    await page.goto(sineWaveGenerator.url);
-    await page.goto(table.url);
-
-    // verify scroll position
-    expect(await getScrollPosition(page, false)).toBeLessThan(1);
-  });
-
   test('unpauses and filters data when paused by button and user changes bounds', async ({
     page
   }) => {
@@ -223,42 +183,3 @@ test.describe('Telemetry Table', () => {
     await page.click('button[title="Pause"]');
   });
 });
-
-async function getScrollPosition(page, top = true) {
-  const tableBody = page.locator('.c-table__body-w');
-
-  // Wait for the scrollbar to appear
-  await tableBody.evaluate((node) => {
-    return new Promise((resolve) => {
-      function checkScroll() {
-        if (node.scrollHeight > node.clientHeight) {
-          resolve();
-        } else {
-          setTimeout(checkScroll, 100);
-        }
-      }
-      checkScroll();
-    });
-  });
-
-  // make sure there are rows
-  const rows = page.getByLabel('table content').getByLabel('Table Row');
-  await rows.first().waitFor();
-
-  // Using this to allow for rows to come and go, so we can truly test the scroll position
-  // eslint-disable-next-line playwright/no-wait-for-timeout
-  await page.waitForTimeout(1000);
-
-  const { scrollTop, clientHeight, scrollHeight } = await tableBody.evaluate((node) => ({
-    scrollTop: node.scrollTop,
-    clientHeight: node.clientHeight,
-    scrollHeight: node.scrollHeight
-  }));
-
-  // eslint-disable-next-line playwright/no-conditional-in-test
-  if (top) {
-    return scrollTop;
-  } else {
-    return Math.abs(scrollHeight - (scrollTop + clientHeight));
-  }
-}

example/exampleUser/ExampleUserProvider.js

@@ -141,7 +141,7 @@ export default class ExampleUserProvider extends EventEmitter {
   }
 
   getPossibleRoles() {
-    return this.loginPromise.then(() => this.user.getRoles());
+    return this.user.getRoles();
   }
 
   getPossibleMissionActions() {

example/exampleUser/plugin.js

@@ -24,11 +24,12 @@ import ExampleUserProvider from './ExampleUserProvider.js';
 const AUTO_LOGIN_USER = 'mct-user';
 const STATUS_ROLES = ['flight', 'driver'];
 
-export default function ExampleUserPlugin(options = {}) {
-  const {
-    autoLoginUser = AUTO_LOGIN_USER,
-    statusRoles = STATUS_ROLES
-  } = options;
+export default function ExampleUserPlugin(
+  { autoLoginUser, statusRoles } = {
+    autoLoginUser: AUTO_LOGIN_USER,
+    statusRoles: STATUS_ROLES
+  }
+) {
   return function install(openmct) {
     const userProvider = new ExampleUserProvider(openmct, {
       statusRoles

package-lock.json

@@ -104,7 +104,7 @@
         "@axe-core/playwright": "4.8.5",
         "@percy/cli": "1.27.4",
         "@percy/playwright": "1.0.4",
-        "@playwright/test": "1.44.0",
+        "@playwright/test": "1.42.1",
         "@types/sinonjs__fake-timers": "8.1.5",
         "sinon": "17.0.0"
       }
@@ -1559,12 +1559,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.0.tgz",
-      "integrity": "sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==",
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.42.1.tgz",
+      "integrity": "sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.44.0"
+        "playwright": "1.42.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8833,12 +8833,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.0.tgz",
-      "integrity": "sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==",
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.1.tgz",
+      "integrity": "sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.44.0"
+        "playwright-core": "1.42.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8851,9 +8851,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.0.tgz",
-      "integrity": "sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==",
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.1.tgz",
+      "integrity": "sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"

src/plugins/condition/ConditionManager.js

@@ -46,6 +46,14 @@ export default class ConditionManager extends EventEmitter {
       applied: false
     };
     this.initialize();
+
+    this.stopObservingForChanges = this.openmct.objects.observe(
+      this.conditionSetDomainObject,
+      '*',
+      (newDomainObject) => {
+        this.conditionSetDomainObject = newDomainObject;
+      }
+    );
   }
 
   async requestLatestValue(endpoint) {
@@ -510,6 +518,10 @@ export default class ConditionManager extends EventEmitter {
     Object.values(this.subscriptions).forEach((unsubscribe) => unsubscribe());
     delete this.subscriptions;
 
+    if (this.stopObservingForChanges) {
+      this.stopObservingForChanges();
+    }
+
     this.conditions.forEach((condition) => {
       condition.destroy();
     });

src/plugins/condition/components/ConditionCollection.vue

@@ -21,11 +21,7 @@
 -->
 
 <template>
-  <section
-    id="conditionCollection"
-    :class="{ 'is-expanded': expanded }"
-    aria-label="Condition Set Condition Collection"
-  >
+  <section id="conditionCollection" :class="{ 'is-expanded': expanded }">
     <div class="c-cs__header c-section__header">
       <span
         class="c-disclosure-triangle c-tree__item__view-control is-enabled"

src/plugins/condition/components/ConditionItem.vue

@@ -24,7 +24,6 @@
   <div
     class="c-condition-h"
     :class="{ 'is-drag-target': draggingOver }"
-    aria-label="Condition Set Condition"
     @dragover.prevent
     @drop.prevent="dropCondition($event, conditionIndex)"
     @dragenter="dragEnter($event, conditionIndex)"
@@ -84,7 +83,6 @@
           <input
             v-model="condition.configuration.name"
             class="t-condition-input__name"
-            aria-label="Condition Name Input"
             type="text"
             @change="persist"
           />
@@ -93,11 +91,7 @@
         <span class="c-cdef__label">Output</span>
         <span class="c-cdef__controls">
           <span class="c-cdef__control">
-            <select
-              v-model="selectedOutputSelection"
-              aria-label="Condition Output Type"
-              @change="setOutputValue"
-            >
+            <select v-model="selectedOutputSelection" @change="setOutputValue">
               <option v-for="option in outputOptions" :key="option" :value="option">
                 {{ initCap(option) }}
               </option>
@@ -107,7 +101,6 @@
             <input
               v-if="selectedOutputSelection === outputOptions[2]"
               v-model="condition.configuration.output"
-              aria-label="Condition Output String"
               class="t-condition-name-input"
               type="text"
               @change="persist"

src/plugins/condition/components/ConditionSet.vue

@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <div class="c-cs" :class="{ 'is-stale': isStale }" aria-label="Condition Set">
+  <div class="c-cs" :class="{ 'is-stale': isStale }">
     <section class="c-cs__current-output c-section">
       <div class="c-cs__content c-cs__current-output-value">
         <span class="c-cs__current-output-value__label">Current Output</span>

src/plugins/condition/components/TestData.vue

@@ -21,12 +21,7 @@
 -->
 
 <template>
-  <section
-    v-show="isEditing"
-    id="test-data"
-    :class="{ 'is-expanded': expanded }"
-    aria-label="Condition Set Test Data"
-  >
+  <section v-show="isEditing" id="test-data" :class="{ 'is-expanded': expanded }">
     <div class="c-cs__header c-section__header">
       <span
         class="c-disclosure-triangle c-tree__item__view-control is-enabled"

src/plugins/telemetryTable/components/TableComponent.vue

@@ -561,9 +561,6 @@ export default {
 
     this.table.initialize();
     this.rescaleToContainer();
-
-    // Scroll to the top of the table after loading
-    this.addToAfterLoadActions(this.scroll);
   },
   beforeUnmount() {
     this.table.off('object-added', this.addObject);