Merge branch 'master' into dependabot/npm_and_yarn/typescript-5.2.2

.eslintrc.js

@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     _: 'readonly'
   },
-  plugins: ['prettier', 'simple-import-sort'],
+  plugins: ['prettier', 'unicorn', 'simple-import-sort'],
   extends: [
     'eslint:recommended',
     'plugin:compat/recommended',
@@ -145,6 +145,17 @@ module.exports = {
     'no-implicit-coercion': 'error',
     //https://eslint.org/docs/rules/no-unneeded-ternary
     'no-unneeded-ternary': 'error',
+    "unicorn/filename-case": [
+      "error",
+      {
+        "cases": {
+          "pascalCase": true
+        },
+        "ignore": [
+          "^.*\\.js$"
+        ]
+      }
+    ],
     'vue/first-attribute-linebreak': 'error',
     'vue/multiline-html-element-content-newline': 'off',
     'vue/singleline-html-element-content-newline': 'off',

.github/workflows/e2e-couchdb.yml

@@ -31,7 +31,7 @@ jobs:
       - run: npm install --cache ~/.npm --no-audit --progress=false
 
       - name: Login to DockerHub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         continue-on-error: true
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}

e2e/.percy.ci.yml

@@ -3,15 +3,22 @@ snapshot:
   widths: [1024]
   min-height: 1440 # px
   percyCSS: |
+    /* Clock indicator... your days are numbered  */
     .t-indicator-clock > .label {
       opacity: 0 !important;
     }
     .c-input--datetime {
       opacity: 0 !important;
     }
-    div.c-conductor-axis.c-conductor__ticks > svg {
+    /* Timer object text */
+    .c-ne__time-and-creator {
       opacity: 0 !important;
     }
-    div.c-inspector__properties.c-inspect-properties > ul > li:nth-child(3) {
-      display: none !important;
+    /* Time Conductor ticks */
+    div.c-conductor-axis.c-conductor__ticks > svg {
+      opacity: 0 !important;
     }
+    /* Embedded timestamp in notebooks */
+    .c-ne__embed__time{
+      opacity: 0 !important;
+    }

e2e/.percy.nightly.yml

@@ -3,15 +3,22 @@ snapshot:
   widths: [1024, 2000]
   min-height: 1440 # px
   percyCSS: |
+    /* Clock indicator... your days are numbered  */
     .t-indicator-clock > .label {
       opacity: 0 !important;
     }
     .c-input--datetime {
       opacity: 0 !important;
     }
-    div.c-conductor-axis.c-conductor__ticks > svg {
+    /* Timer object text */
+    .c-ne__time-and-creator {
       opacity: 0 !important;
     }
-    div.c-inspector__properties.c-inspect-properties > ul > li:nth-child(3) {
-      display: none !important;
+    /* Time Conductor ticks */
+    div.c-conductor-axis.c-conductor__ticks > svg {
+      opacity: 0 !important;
     }
+    /* Embedded timestamp in notebooks */
+    .c-ne__embed__time{
+      opacity: 0 !important;
+    }

e2e/README.md

@@ -373,7 +373,7 @@ By adhering to this principle, we can create tests that are both robust and refl
 
 4. **Control Variability**: Account for variations inherent in working with time-based telemetry and clocks.
   - Utilize `percyCSS` to ignore time-based elements. For more details, consult our [percyCSS file](./.percy.ci.yml).
-  - Use Open MCT's fixed-time mode.
+  - Use Open MCT's fixed-time mode unless explicitly testing realtime clock
   - Employ the `createExampleTelemetryObject` appAction to source telemetry and specify a `name` to avoid autogenerated names.
 
 5. **Hide the Tree and Inspector**: Generally, your test will not require comparisons involving the tree and inspector. These aspects are covered in component-specific tests (explained below). To exclude them from the comparison by default, navigate to the root of the main view with the tree and inspector hidden:
@@ -387,6 +387,16 @@ By adhering to this principle, we can create tests that are both robust and refl
     ```
     - Note: The `scope` variable can be any valid CSS selector.
 
+7. **Write many `percySnapshot` commands in a single test**: In line with our approach to longer functional tests, we recommend that many test percySnapshots are taken in a single test. For instance:
+    ```js
+    //<Some interesting state>
+    await percySnapshot(page, `Before object expanded (theme: ${theme})`);
+    //<Click on object>
+    await percySnapshot(page, `object expanded (theme: ${theme})`);
+    //Select from object
+    await percySnapshot(page, `object selected (theme: ${theme})`)
+    ```
+
 #### How to write a great network test
 
 - Where possible, it is best to mock out third-party network activity to ensure we are testing application behavior of Open MCT.

e2e/appActions.js

@@ -228,17 +228,15 @@ async function createPlanFromJSON(page, { name, json, parent = 'mine' }) {
  */
 async function createExampleTelemetryObject(page, parent = 'mine') {
   const parentUrl = await getHashUrlToDomainObject(page, parent);
-  // TODO: Make this field even more accessible
-  const name = 'VIPER Rover Heading';
-  const nameInputLocator = page.getByRole('dialog').locator('input[type="text"]');
 
   await page.goto(`${parentUrl}`);
 
   await page.locator('button:has-text("Create")').click();
 
   await page.locator('li:has-text("Sine Wave Generator")').click();
 
-  await nameInputLocator.fill(name);
+  const name = 'VIPER Rover Heading';
+  await page.getByRole('dialog').locator('input[type="text"]').fill(name);
 
   // Fill out the fields with default values
   await page.getByRole('spinbutton', { name: 'Period' }).fill('10');
@@ -520,6 +518,7 @@ async function setIndependentTimeConductorBounds(page, startDate, endDate) {
 
 /**
  * Set the bounds of the visible conductor in fixed time mode
+ * @private
  * @param {import('@playwright/test').Page} page
  * @param {string} startDate
  * @param {string} endDate
@@ -544,18 +543,6 @@ async function setTimeBounds(page, startDate, endDate) {
   }
 }
 
-/**
- * Selects an inspector tab based on the provided tab name
- *
- * @param {import('@playwright/test').Page} page
- * @param {String} name the name of the tab
- */
-async function selectInspectorTab(page, name) {
-  const inspectorTabs = page.getByRole('tablist');
-  const inspectorTab = inspectorTabs.getByTitle(name);
-  await inspectorTab.click();
-}
-
 /**
  * Waits and asserts that all plot series data on the page
  * is loaded and drawn.
@@ -674,7 +661,6 @@ module.exports = {
   setEndOffset,
   setTimeConductorBounds,
   setIndependentTimeConductorBounds,
-  selectInspectorTab,
   waitForPlotsToRender,
   renameObjectFromContextMenu
 };

e2e/baseFixtures.js

@@ -81,7 +81,7 @@ exports.test = base.test.extend({
    * ```js
    * test.use({
    *   clockOptions: {
-   *       now: 0,
+   *       now: MISSION_TIME,
    *       shouldAdvanceTime: true
    * ```
    * If clockOptions are provided, will override the default clock with fake timers provided by SinonJS.

e2e/constants.js

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 /**
  * Constants which may be used across all e2e tests.
  */
@@ -7,3 +8,11 @@
  * - Used for overriding the browser clock in tests.
  */
 export const MISSION_TIME = 1732413600000; // Saturday, November 23, 2024 6:00:00 PM GMT-08:00 (Thanksgiving Dinner Time)
+
+/**
+ * URL Constants
+ * - This is the URL that the browser will be directed to when running visual tests. This URL 
+ *    - hides the tree and inspector to prevent visual noise
+ *    - sets the time bounds to a fixed range
+ */
+export const VISUAL_URL = './#/browse/mine?tc.mode=fixed&tc.startBound=1693592063607&tc.endBound=1693593893607&tc.timeSystem=utc&view=grid&hideInspector=true&hideTree=true';

e2e/helper/notebookUtils.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { selectInspectorTab, createDomainObjectWithDefaults } = require('../appActions');
+const { createDomainObjectWithDefaults } = require('../appActions');
 
 const NOTEBOOK_DROP_AREA = '.c-notebook__drag-area';
 const CUSTOM_NAME = 'CUSTOM_NAME';
@@ -111,7 +111,7 @@ async function createNotebookAndEntry(page, iterations = 1) {
  */
 async function createNotebookEntryAndTags(page, iterations = 1) {
   const notebook = await createNotebookAndEntry(page, iterations);
-  await selectInspectorTab(page, 'Annotations');
+  await page.getByRole('tab', { name: 'Annotations' }).click();
 
   for (let iteration = 0; iteration < iterations; iteration++) {
     // Hover and click "Add Tag" button

e2e/helper/planningUtils.js

@@ -99,3 +99,14 @@ export async function setBoundsToSpanAllActivities(page, planJson, planObjectUrl
     `${planObjectUrl}?tc.mode=fixed&tc.startBound=${start}&tc.endBound=${end}&tc.timeSystem=utc&view=plan.view`
   );
 }
+
+/**
+ * Uses the Open MCT API to set the status of a plan to 'draft'.
+ * @param {import('@playwright/test').Page} page
+ * @param {import('../../appActions').CreatedObjectInfo} plan
+ */
+export async function setDraftStatusForPlan(page, plan) {
+  await page.evaluate(async (planObject) => {
+    await window.openmct.status.set(planObject.uuid, 'draft');
+  }, plan);
+}