add untracked files

* discrete steps

* update script to remove couchdb

* address comments and add shellcheck linting

---------

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

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.1
 executors:
   pw-focal-development:
     docker:
-      - image: mcr.microsoft.com/playwright:v1.32.3-focal
+      - image: mcr.microsoft.com/playwright:v1.36.2-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
@@ -94,6 +94,7 @@ jobs:
       - build_and_install:
           node-version: <<parameters.node-version>>
       - run: npm run lint
+      - run: npm run lint:spelling
       - generate_and_store_version_and_filesystem_artifacts
   unit-test:
     parameters:
@@ -162,7 +163,7 @@ jobs:
     steps:
       - build_and_install:
           node-version: <<parameters.node-version>>
-      - run: npx playwright@1.32.3 install #Necessary for bare ubuntu machine
+      - run: npx playwright@1.36.2 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
@@ -213,11 +214,13 @@ jobs:
     parameters:
       node-version:
         type: string
+      suite:
+        type: string # ci or full
     executor: pw-focal-development
     steps:
       - build_and_install:
           node-version: <<parameters.node-version>>
-      - run: npm run test:e2e:visual
+      - run: npm run test:e2e:visual:<<parameters.suite>>
       - store_test_results:
           path: test-results/results.xml
       - store_artifacts:
@@ -245,6 +248,8 @@ workflows:
       - perf-test:
           node-version: lts/hydrogen
       - visual-test:
+          name: visual-test-ci
+          suite: ci
           node-version: lts/hydrogen
 
   the-nightly: #These jobs do not run on PRs, but against master at night
@@ -264,6 +269,8 @@ workflows:
       - perf-test:
           node-version: lts/hydrogen
       - visual-test:
+          name: visual-test-nightly
+          suite: full
           node-version: lts/hydrogen
       - e2e-couchdb:
           node-version: lts/hydrogen

.cspell.json

@@ -0,0 +1,495 @@
+{
+  "version": "0.2",
+  "language": "en,en-us",
+  "words": [
+    "gress",
+    "doctoc",
+    "minmax",
+    "openmct",
+    "datasources",
+    "recieved",
+    "evalute",
+    "Sinewave",
+    "deregistration",
+    "unregisters",
+    "configutation",
+    "configuation",
+    "codecov",
+    "carryforward",
+    "Chacon",
+    "Straub",
+    "OWASP",
+    "Testathon",
+    "exploratorily",
+    "Testathons",
+    "testathon",
+    "npmjs",
+    "publishj",
+    "treeitem",
+    "timespan",
+    "Timespan",
+    "spinbutton",
+    "popout",
+    "textbox",
+    "tablist",
+    "Telem",
+    "codecoverage",
+    "browserless",
+    "networkidle",
+    "nums",
+    "mgmt",
+    "faultname",
+    "gantt",
+    "sharded",
+    "perfromance",
+    "MMOC",
+    "deploysentinel",
+    "codegen",
+    "Unfortuantely",
+    "viewports",
+    "updatesnapshots",
+    "excercised",
+    "Circel",
+    "browsercontexts",
+    "miminum",
+    "testcase",
+    "testsuite",
+    "domcontentloaded",
+    "Tracefile",
+    "lcov",
+    "linecov",
+    "Browserless",
+    "webserver",
+    "yamcs",
+    "quickstart",
+    "subobject",
+    "autosize",
+    "Horz",
+    "vehicula",
+    "Praesent",
+    "pharetra",
+    "Duis",
+    "eget",
+    "arcu",
+    "elementum",
+    "mauris",
+    "Donec",
+    "nunc",
+    "quis",
+    "Proin",
+    "elit",
+    "Nunc",
+    "Aenean",
+    "mollis",
+    "hendrerit",
+    "Vestibulum",
+    "placerat",
+    "velit",
+    "augue",
+    "Quisque",
+    "mattis",
+    "lectus",
+    "rutrum",
+    "Fusce",
+    "tincidunt",
+    "nibh",
+    "blandit",
+    "urna",
+    "Nullam",
+    "congue",
+    "enim",
+    "Morbi",
+    "bibendum",
+    "Vivamus",
+    "imperdiet",
+    "Pellentesque",
+    "cursus",
+    "Aliquam",
+    "orci",
+    "Suspendisse",
+    "amet",
+    "justo",
+    "Etiam",
+    "vestibulum",
+    "ullamcorper",
+    "Cras",
+    "aliquet",
+    "Mauris",
+    "Nulla",
+    "scelerisque",
+    "viverra",
+    "metus",
+    "condimentum",
+    "varius",
+    "nulla",
+    "sapien",
+    "Curabitur",
+    "tristique",
+    "Nonsectetur",
+    "convallis",
+    "accumsan",
+    "lacus",
+    "posuere",
+    "turpis",
+    "egestas",
+    "feugiat",
+    "tortor",
+    "faucibus",
+    "euismod",
+    "pratices",
+    "pathing",
+    "pases",
+    "testcases",
+    "Noneditable",
+    "listitem",
+    "Gantt",
+    "timelist",
+    "timestrip",
+    "networkevents",
+    "fetchpriority",
+    "persistable",
+    "Persistable",
+    "persistability",
+    "Persistability",
+    "testdata",
+    "Testdata",
+    "metdata",
+    "timeconductor",
+    "contenteditable",
+    "autoscale",
+    "Autoscale",
+    "prepan",
+    "sinewave",
+    "cyanish",
+    "driv",
+    "searchbox",
+    "datetime",
+    "timeframe",
+    "recents",
+    "recentobjects",
+    "gsearch",
+    "Disp",
+    "Cloc",
+    "noselect",
+    "requestfailed",
+    "viewlarge",
+    "Imageurl",
+    "thumbstrip",
+    "checkmark",
+    "Unshelve",
+    "autosized",
+    "chacskaylo",
+    "numberfield",
+    "OPENMCT",
+    "Autoflow",
+    "Timelist",
+    "faultmanagement",
+    "GEOSPATIAL",
+    "geospatial",
+    "plotspatial",
+    "annnotation",
+    "keystrings",
+    "undelete",
+    "sometag",
+    "containee",
+    "composability",
+    "mutables",
+    "Mutables",
+    "composee",
+    "handleoutsideclick",
+    "Datetime",
+    "Perc",
+    "autodismiss",
+    "filetree",
+    "deeptailor",
+    "keystring",
+    "reindex",
+    "unlisten",
+    "symbolsfont",
+    "ellipsize",
+    "dismissable",
+    "TIMESYSTEM",
+    "Metadatas",
+    "stalenes",
+    "receieves",
+    "unsub",
+    "callbacktwo",
+    "unsubscribetwo",
+    "telem",
+    "Telemetery",
+    "unemitted",
+    "granually",
+    "timesystem",
+    "metadatas",
+    "iteratees",
+    "metadatum",
+    "printj",
+    "sprintf",
+    "unlisteners",
+    "amts",
+    "reregistered",
+    "hudsonfoo",
+    "onclone",
+    "autoflow",
+    "xdescribe",
+    "mockmct",
+    "Autoflowed",
+    "plotly",
+    "relayout",
+    "Plotly",
+    "Yaxis",
+    "showlegend",
+    "textposition",
+    "xaxis",
+    "automargin",
+    "fixedrange",
+    "yaxis",
+    "Axistype",
+    "showline",
+    "bglayer",
+    "autorange",
+    "hoverinfo",
+    "dotful",
+    "Dotful",
+    "cartesianlayer",
+    "scatterlayer",
+    "textfont",
+    "ampm",
+    "cdef",
+    "horz",
+    "STYLEABLE",
+    "styleable",
+    "afff",
+    "shdw",
+    "braintree",
+    "vals",
+    "Subobject",
+    "Shdw",
+    "Movebar",
+    "inspectable",
+    "Stringformatter",
+    "sclk",
+    "Objectpath",
+    "Keystring",
+    "duplicatable",
+    "composees",
+    "Composees",
+    "Composee",
+    "callthrough",
+    "objectpath",
+    "createable",
+    "noneditable",
+    "Classname",
+    "classname",
+    "selectedfaults",
+    "accum",
+    "newpersisted",
+    "Metadatum",
+    "MCWS",
+    "YAMCS",
+    "frameid",
+    "containerid",
+    "mmgis",
+    "PERC",
+    "curval",
+    "viewbox",
+    "mutablegauge",
+    "Flatbush",
+    "flatbush",
+    "Indicies",
+    "Marqueed",
+    "NSEW",
+    "nsew",
+    "vrover",
+    "gimbled",
+    "Pannable",
+    "unsynced",
+    "Unsynced",
+    "pannable",
+    "autoscroll",
+    "TIMESTRIP",
+    "TWENTYFOUR",
+    "FULLSIZE",
+    "intialize",
+    "Timestrip",
+    "spyon",
+    "Unlistener",
+    "multipane",
+    "DATESTRING",
+    "akhenry",
+    "Niklas",
+    "Hertzen",
+    "Kash",
+    "Nouroozi",
+    "Bostock",
+    "BOSTOCK",
+    "Arnout",
+    "Kazemier",
+    "Karolis",
+    "Narkevicius",
+    "Ashkenas",
+    "Madhavan",
+    "Iskren",
+    "Ivov",
+    "Chernev",
+    "Borshchov",
+    "painterro",
+    "sheetjs",
+    "Yuxi",
+    "ACITON",
+    "localstorage",
+    "Linkto",
+    "Painterro",
+    "Editability",
+    "filteredsnapshots",
+    "Fromimage",
+    "muliple",
+    "notebookstorage",
+    "Andpage",
+    "pixelize",
+    "Quickstart",
+    "indexhtml",
+    "youradminpassword",
+    "chttpd",
+    "sourcefiles",
+    "USERPASS",
+    "XPUT",
+    "adipiscing",
+    "eiusmod",
+    "tempor",
+    "incididunt",
+    "labore",
+    "dolore",
+    "aliqua",
+    "perspiciatis",
+    "iteree",
+    "submodels",
+    "symlog",
+    "Plottable",
+    "antisymlog",
+    "docstrings",
+    "webglcontextlost",
+    "gridlines",
+    "Xaxis",
+    "Crosshairs",
+    "telemetrylimit",
+    "xscale",
+    "yscale",
+    "untracks",
+    "swatched",
+    "NULLVALUE",
+    "unobserver",
+    "unsubscriber",
+    "drap",
+    "Averager",
+    "averager",
+    "movecolumnfromindex",
+    "callout",
+    "Konqueror",
+    "unmark",
+    "hitarea",
+    "Hitarea",
+    "Unmark",
+    "controlbar",
+    "reactified",
+    "perc",
+    "DHMS",
+    "timespans",
+    "timeframes",
+    "Timesystems",
+    "Hilite",
+    "datetimes",
+    "momentified",
+    "ucontents",
+    "TIMELIST",
+    "Timeframe",
+    "Guirk",
+    "resizeable",
+    "iframing",
+    "Btns",
+    "Ctrls",
+    "Chakra",
+    "Petch",
+    "propor",
+    "phoneandtablet",
+    "desktopandtablet",
+    "Imgs",
+    "UNICODES",
+    "datatable",
+    "csvg",
+    "cpath",
+    "cellipse",
+    "xlink",
+    "cstyle",
+    "bfill",
+    "ctitle",
+    "eicon",
+    "interactability",
+    "AFFORDANCES",
+    "affordance",
+    "scrollcontainer",
+    "Icomoon",
+    "icomoon",
+    "configurability",
+    "btns",
+    "AUTOFLOW",
+    "DATETIME",
+    "infobubble",
+    "thumbsbubble",
+    "codehilite",
+    "vscroll",
+    "bgsize",
+    "togglebutton",
+    "Hacskaylo",
+    "noie",
+    "fullscreen",
+    "horiz",
+    "menubutton",
+    "SNAPSHOTTING",
+    "snapshotting",
+    "PAINTERRO",
+    "ptro",
+    "PLOTLY",
+    "gridlayer",
+    "xtick",
+    "ytick",
+    "subobjects",
+    "Ucontents",
+    "Userand",
+    "Userbefore",
+    "brdr",
+    "pushs",
+    "ALPH",
+    "Recents",
+    "Qbert",
+    "Infobubble",
+    "haslink",
+    "VPID",
+    "vpid",
+    "updatedtest",
+    "KHTML",
+    "Chromezilla",
+    "Safarifox",
+    "deregistering",
+    "hundredtized",
+    "dhms",
+    "unthrottled",
+    "Codecov",
+    "dont",
+    "mediump",
+    "sinonjs",
+    "generatedata",
+    "grandsearch"
+  ],
+  "dictionaries": ["npm", "softwareTerms", "node", "html", "css", "bash", "en_US"],
+  "ignorePaths": [
+    "package.json",
+    "dist/**",
+    "package-lock.json",
+    "node_modules",
+    "coverage",
+    "*.log",
+    "html-test-results",
+    "test-results"
+  ]
+}

.eslintrc.js

@@ -13,7 +13,7 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:compat/recommended',
-    'plugin:vue/recommended',
+    'plugin:vue/vue3-recommended',
     'plugin:you-dont-need-lodash-underscore/compatible',
     'plugin:prettier/recommended'
   ],
@@ -28,6 +28,8 @@ module.exports = {
     }
   },
   rules: {
+    'vue/no-deprecated-dollar-listeners-api': 'warn',
+    'vue/no-deprecated-events-api': 'warn',
     'vue/no-v-for-template-key': 'off',
     'vue/no-v-for-template-key-on-child': 'error',
     'prettier/prettier': 'error',

.github/workflows/e2e-couchdb.yml

@@ -28,15 +28,16 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
       
-      - run: npm install --cache ~/.npm --prefer-offline --no-audit --progress=false
+      - run: npm install --cache ~/.npm --no-audit --progress=false
 
       - name: Login to DockerHub
-        uses: docker/login-action@v2 
+        uses: docker/login-action@v2
+        continue-on-error: true
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
       
-      - run: npx playwright@1.32.3 install
+      - run: npx playwright@1.36.2 install
 
       - name: Start CouchDB Docker Container and Init with Setup Scripts
         run: |

.github/workflows/e2e-pr.yml

@@ -33,9 +33,9 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
             
-      - run: npx playwright@1.32.3 install
+      - run: npx playwright@1.36.2 install
       - run: npx playwright install chrome-beta
-      - run: npm install --cache ~/.npm --prefer-offline --no-audit --progress=false
+      - run: npm install --cache ~/.npm --no-audit --progress=false
       - run: npm run test:e2e:full -- --max-failures=40
       - run: npm run cov:e2e:report || true
       - shell: bash

.github/workflows/pr-platform.yml

@@ -45,7 +45,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-${{ matrix.node_version }}-
 
-      - run: npm install --cache ~/.npm --prefer-offline --no-audit --progress=false
+      - run: npm install --cache ~/.npm --no-audit --progress=false
       
       - run: npm test
       

.npmrc

@@ -1,4 +1,7 @@
 loglevel=warn
 
 #Prevent folks from ignoring an important error when building from source
-engine-strict=true
+engine-strict=true
+
+# Dont include lockfile
+package-lock=false

.nvmrc

@@ -0,0 +1 @@
+lts/*

README.md

@@ -18,11 +18,12 @@ Building and running Open MCT in your local dev environment is very easy. Be sur
 
  `git clone https://github.com/nasa/openmct.git`
 
-2. Install development dependencies. Note: Check the package.json engine for our tested and supported node versions.
+2. (Optionally) Install the correct node version using [nvm](https://github.com/nvm-sh/nvm) (`nvm install`)
+3. Install development dependencies. Note: Check the package.json engine for our tested and supported node versions.
 
  `npm install`
 
-3. Run a local development server
+4. Run a local development server
 
  `npm start`
 
@@ -51,6 +52,8 @@ For more on developing with Open MCT, see our documentation for a guide on [Deve
 
 This is a fast moving project and we do our best to test and support the widest possible range of browsers, operating systems, and nodejs APIs. We have a published list of support available in our package.json's `browserslist` key.
 
+The project uses `nvm` to ensure the node and npm version used, is coherent in all projects. Install nvm (non-windows), [here](https://github.com/nvm-sh/nvm) or the windows equivalent [here](https://github.com/coreybutler/nvm-windows)
+
 If you encounter an issue with a particular browser, OS, or nodejs API, please file a [GitHub issue](https://github.com/nasa/openmct/issues/new/choose)
 
 ## Plugins
@@ -95,10 +98,10 @@ To run the performance tests:
 
 `npm run test:perf`
 
-The test suite is configured to all tests localed in `e2e/tests/` ending in `*.e2e.spec.js`. For more about the e2e test suite, please see the [README](./e2e/README.md)
+The test suite is configured to all tests located in `e2e/tests/` ending in `*.e2e.spec.js`. For more about the e2e test suite, please see the [README](./e2e/README.md)
 
 ### Security Tests
-Each commit is analyzed for known security vulnerabilities using [CodeQL](https://codeql.github.com/docs/codeql-language-guides/codeql-library-for-javascript/). The list of CWE coverage items is avaiable in the [CodeQL docs](https://codeql.github.com/codeql-query-help/javascript-cwe/). The CodeQL workflow is specified in the [CodeQL analysis file](./.github/workflows/codeql-analysis.yml) and the custom [CodeQL config](./.github/codeql/codeql-config.yml).
+Each commit is analyzed for known security vulnerabilities using [CodeQL](https://codeql.github.com/docs/codeql-language-guides/codeql-library-for-javascript/). The list of CWE coverage items is available in the [CodeQL docs](https://codeql.github.com/codeql-query-help/javascript-cwe/). The CodeQL workflow is specified in the [CodeQL analysis file](./.github/workflows/codeql-analysis.yml) and the custom [CodeQL config](./.github/codeql/codeql-config.yml).
 
 ### Test Reporting and Code Coverage
 

docs/src/process/version.md

@@ -53,7 +53,7 @@ requirements.
 
 Additionally, the following project-specific standards will be used:
 
-* During development, a "-SNAPSHOT" suffix shall be appended to the
+* During development, a "-next" suffix shall be appended to the
   version number. The version number before the suffix shall reflect
   the next expected version number for release.
 * Prior to a 1.0.0 release, the _minor_ version will be incremented
@@ -93,7 +93,7 @@ numbers by the following process:
 
 1. Update version number in `package.json`
   1. Checkout branch created for the last sprint that has been successfully tested.
-  2. Remove a `-SNAPSHOT` suffix from the version in `package.json`.
+  2. Remove a `-next` suffix from the version in `package.json`.
   3. Verify that resulting version number meets semantic versioning
      requirements relative to previous stable version. Increment the 
      version number if necessary.
@@ -138,7 +138,7 @@ numbers by the following process:
   1. Create a new branch off the `master` branch.
   2. Remove any suffix from the version number, 
      or increment the _patch_ version if there is no suffix.
-  3. Append a `-SNAPSHOT` suffix.
+  3. Append a `-next` suffix.
   4. Commit changes to `package.json` on the `master` branch.
      The commit message should reference the sprint being opened,
      preferably by a URL reference to the associated Milestone in
@@ -150,6 +150,6 @@ numbers by the following process:
 Projects dependent on Open MCT being co-developed by the Open MCT
 team should follow a similar process, except that they should
 additionally update their dependency on Open MCT to point to the
-latest archive when removing their `-SNAPSHOT` status, and
+latest archive when removing their `-next` status, and
 that they should be pointed back to the `master` branch after
 this has completed.

e2e/.percy.ci.yml

@@ -0,0 +1,17 @@
+version: 2
+snapshot:
+  widths: [1024]
+  min-height: 1440 # px
+  percyCSS: |
+    .t-indicator-clock > .label {
+      opacity: 0 !important;
+    }
+    .c-input--datetime {
+      opacity: 0 !important;
+    }
+    div.c-conductor-axis.c-conductor__ticks > svg {
+      opacity: 0 !important;
+    }
+    div.c-inspector__properties.c-inspect-properties > ul > li:nth-child(3) {
+      display: none !important;
+    }

e2e/.percy.nightly.yml

@@ -0,0 +1,17 @@
+version: 2
+snapshot:
+  widths: [1024, 2000]
+  min-height: 1440 # px
+  percyCSS: |
+    .t-indicator-clock > .label {
+      opacity: 0 !important;
+    }
+    .c-input--datetime {
+      opacity: 0 !important;
+    }
+    div.c-conductor-axis.c-conductor__ticks > svg {
+      opacity: 0 !important;
+    }
+    div.c-inspector__properties.c-inspect-properties > ul > li:nth-child(3) {
+      display: none !important;
+    }

e2e/.percy.yml

@@ -1,6 +0,0 @@
-version: 2
-snapshot:
-  widths: [1024, 2000]
-  min-height: 1440 # px
-discovery:
-  concurrency: 2 # https://github.com/percy/cli/discussions/1067

e2e/README.md

@@ -72,11 +72,15 @@ Visual Testing is an essential part of our e2e strategy as it ensures that the a
 For a better understanding of the visual issues which affect Open MCT, please see our bug tracker with the `label:visual` filter applied [here](https://github.com/nasa/openmct/issues?q=label%3Abug%3Avisual+)
 To read about how to write a good visual test, please see [How to write a great Visual Test](#how-to-write-a-great-visual-test).
 
-`npm run test:e2e:visual` will run all of the visual tests against a local instance of Open MCT. If no `PERCY_TOKEN` API key is found in the terminal or command line environment variables, no visual comparisons will be made.
+`npm run test:e2e:visual` commands will run all of the visual tests against a local instance of Open MCT. If no `PERCY_TOKEN` API key is found in the terminal or command line environment variables, no visual comparisons will be made.
 
+ - `npm run test:e2e:visual:ci` will run against every commit and PR.
+ - `npm run test:e2e:visual:full` will run every night with additional comparisons made for Larger Displays and with the `snow` theme.
 #### Percy.io
 
-To make this possible, we're leveraging a 3rd party service, [Percy](https://percy.io/). This service maintains a copy of all changes, users, scm-metadata, and baselines to verify that the application looks and feels the same _unless approved by a Open MCT developer_. To request a Percy API token, please reach out to the Open MCT Dev team on GitHub. For more information, please see the official [Percy documentation](https://docs.percy.io/docs/visual-testing-basics)
+To make this possible, we're leveraging a 3rd party service, [Percy](https://percy.io/). This service maintains a copy of all changes, users, scm-metadata, and baselines to verify that the application looks and feels the same _unless approved by a Open MCT developer_. To request a Percy API token, please reach out to the Open MCT Dev team on GitHub. For more information, please see the official [Percy documentation](https://docs.percy.io/docs/visual-testing-basics).
+
+At present, we are using percy with two configuration files: `./e2e/.percy.nightly.yml` and `./e2e/.percy.ci.yml`. This is mainly to reduce the number of snapshots. 
 
 ### (Advanced) Snapshot Testing
 
@@ -133,7 +137,7 @@ These tests are expected to become blocking and gating with assertions as we ext
 
 ## Test Architecture and CI
 
-### Architecture (TODO)
+### Architecture
 
 ### File Structure
 
@@ -182,6 +186,7 @@ Current list of test tags:
 |`@snapshot` | Uses Playwright's snapshot functionality to record a copy of the DOM for direct comparison. Must be run inside of the playwright container.|
 |`@unstable` | A new test or test which is known to be flaky.|
 |`@2p` | Indicates that multiple users are involved, or multiple tabs/pages are used. Useful for testing multi-user interactivity.|
+|`@generatedata` | Indicates that a test is used to generate testdata or test the generated test data. Usually to be associated with localstorage, but this may grow over time.|
 
 ### Continuous Integration
 
@@ -200,6 +205,7 @@ CircleCI
 - Stable e2e tests against ubuntu and chrome
 - Performance tests against ubuntu and chrome
 - e2e tests are linted
+- Visual tests are run in a single resolution on the default `espresso` theme
 
 #### 2. Per-Merge Testing
 
@@ -207,18 +213,19 @@ Github Actions / Workflow
 
 - Full suite against all browsers/projects. Triggered with Github Label Event 'pr:e2e'
 - CouchDB Tests. Triggered on PR Create and again with Github Label Event 'pr:e2e:couchdb'
-- Visual Tests. Triggered with Github Label Event 'pr:visual'
 
 #### 3. Scheduled / Batch Testing
 
 Nightly Testing in Circle CI
 
-- Full e2e suite against ubuntu and chrome
+- Full e2e suite against ubuntu and chrome, firefox, and an MMOC resolution profile
 - Performance tests against ubuntu and chrome
+- CouchDB suite
+- Visual Tests are run in the full profile
 
 Github Actions / Workflow
 
-- Visual Test baseline generation.
+- None at the moment
 
 #### Parallelism and Fast Feedback
 
@@ -250,7 +257,7 @@ A testcase and testsuite are to be unmarked as @unstable when:
 
 #### **What's supported:**
 
-We are leveraging the `browserslist` project to declare our supported list of browsers.
+We are leveraging the `browserslist` project to declare our supported list of browsers. We support macOS, Windows, and ubuntu 20+.
 
 #### **Where it's tested:**
 
@@ -264,11 +271,17 @@ We also have the need to execute our e2e tests across this published list of bro
   - A stable version of Chromium from the official chromium channels. This is always at least 1 version ahead of desktop chrome.
 - `playwright-chrome`
   - The stable channel of Chrome from the official chrome channels. This is always 2 versions behind chromium.
+- `playwright-firefox`
+  - Firefox Latest Stable. Modified slightly by the playwright team to support a CDP Shim.
+
+In terms of operating system testing, we're only limited by what the CI providers are able to support. The bulk of our testing is performed on the official playwright container which is based on ubuntu. Github Actions allows us to use `windows-latest` and `mac-latest` and is run as needed.
 
 #### **Mobile**
 
 We have the Mission-need to support iPad. To run our iPad suite, please see our `playwright-*.config.js` with the 'iPad' project.
 
+In general, our test suite is not designed to run against mobile devices as the mobile experience is a focused version of the application. Core functionality is missing (chiefly the 'Create' button) and so this will likely turn into a separate suite.
+
 #### **Skipping or executing tests based on browser, os, and/os browser version:**
 
 Conditionally skipping tests based on browser (**RECOMMENDED**):
@@ -314,7 +327,7 @@ Skipping based on browser version (Rarely used): <https://github.com/microsoft/p
     - Initial navigation should _almost_ always use the `{ waitUntil: 'domcontentloaded' }` option.
   - Avoid repeated setup to test to test a single assertion. Write longer tests with multiple soft assertions.
 
-### How to write a great test (WIP)
+### How to write a great test
 
 - Use our [App Actions](./appActions.js) for performing common actions whenever applicable.
   - Use `waitForPlotsToRender()` before asserting against anything that is dependent upon plot series data being loaded and drawn.
@@ -328,7 +341,26 @@ Skipping based on browser version (Rarely used): <https://github.com/microsoft/p
   await notesInput.fill(testNotes);
   ```
 
-#### How to write a great visual test (TODO)
+#### How to write a great visual test
+
+ - Generally speaking, you should avoid being "specific" in what you hope to find in the diff. Visual tests are best suited for finding unknown unknowns.
+ - These should only use functional expect statements to verify assumptions about the state
+in a test and not for functional verification of correctness. Visual tests are not supposed
+to "fail" on assertions. Instead, they should be used to detect changes between builds or branches.
+ - A great visual test controls for the variation inherent to working with time-based telemetry and clocks. We do our best to remove this variation by using `percyCSS` to ignore all possible time-based components. For more, please see our [percyCSS file](./.percy.ci.yml).
+ - Additionally, you should try the following:
+   - Use fixed-time mode of Open MCT
+   - Use the `createExampleTelemetryObject` appAction to source telemetry
+   - When using the `createDomainObjectWithDefaults` appAction, make sure to specify a `name` which is explicit to avoid the autogenerated name
+ - Very likely, your test will not need to compare changes on the tree. Keep it out of the comparison with the following
+   - `await page.goto('./#/browse/mine')` will go to the root of the main view with the tree collapsed.
+ - If you only want to compare changes on a specific component, use the /visual/component/ folder and limit the scope of the comparison to the object like so:
+   - ```
+      await percySnapshot(page, `Tree Pane w/ single level expanded (theme: ${theme})`, {
+            scope: treePane
+        });
+    ```js
+ - The `scope` variable can be any valid css selector
 
 #### How to write a great network test
 

e2e/appActions.js

@@ -35,6 +35,7 @@
  * @property {string} type the type of domain object to create (e.g.: "Sine Wave Generator").
  * @property {string} [name] the desired name of the created domain object.
  * @property {string | import('../src/api/objects/ObjectAPI').Identifier} [parent] the Identifier or uuid of the parent object.
+ * @property {Object<string, string>} [customParameters] any additional parameters to be passed to the domain object's form. E.g. '[aria-label="Data Rate (hz)"]': {'0.1'}
  */
 
 /**
@@ -65,7 +66,10 @@ const { expect } = require('@playwright/test');
  * @param {CreateObjectOptions} options
  * @returns {Promise<CreatedObjectInfo>} An object containing information about the newly created domain object.
  */
-async function createDomainObjectWithDefaults(page, { type, name, parent = 'mine' }) {
+async function createDomainObjectWithDefaults(
+  page,
+  { type, name, parent = 'mine', customParameters = {} }
+) {
   if (!name) {
     name = `${type}:${genUuid()}`;
   }
@@ -94,6 +98,13 @@ async function createDomainObjectWithDefaults(page, { type, name, parent = 'mine
     await notesInput.fill(page.testNotes);
   }
 
+  // If there are any further parameters, fill them in
+  for (const [key, value] of Object.entries(customParameters)) {
+    const input = page.locator(`form[name="mctForm"] ${key}`);
+    await input.fill('');
+    await input.fill(value);
+  }
+
   // Click OK button and wait for Navigate event
   await Promise.all([
     page.waitForLoadState(),
@@ -177,7 +188,7 @@ async function createPlanFromJSON(page, { name, json, parent = 'mine' }) {
   await page.click(`li:text("Plan")`);
 
   // Modify the name input field of the domain object to accept 'name'
-  const nameInput = page.locator('form[name="mctForm"] .first input[type="text"]');
+  const nameInput = page.getByLabel('Title', { exact: true });
   await nameInput.fill('');
   await nameInput.fill(name);
 
@@ -208,6 +219,64 @@ async function createPlanFromJSON(page, { name, json, parent = 'mine' }) {
   };
 }
 
+/**
+ * Create a standardized Telemetry Object (Sine Wave Generator) for use in visual tests
+ * and tests against plotting telemetry (e.g. logPlot tests).
+ * @param {import('@playwright/test').Page} page
+ * @param {string | import('../src/api/objects/ObjectAPI').Identifier} [parent] the uuid or identifier of the parent object. Defaults to 'mine'
+ * @returns {Promise<CreatedObjectInfo>} An object containing information about the telemetry object.
+ */
+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}?hideTree=true`);
+
+  await page.locator('button:has-text("Create")').click();
+
+  await page.locator('li:has-text("Sine Wave Generator")').click();
+
+  await nameInputLocator.fill(name);
+
+  // Fill out the fields with default values
+  await page.getByRole('spinbutton', { name: 'Period' }).fill('10');
+  await page.getByRole('spinbutton', { name: 'Amplitude' }).fill('1');
+  await page.getByRole('spinbutton', { name: 'Offset' }).fill('0');
+  await page.getByRole('spinbutton', { name: 'Data Rate (hz)' }).fill('1');
+  await page.getByRole('spinbutton', { name: 'Phase (radians)' }).fill('0');
+  await page.getByRole('spinbutton', { name: 'Randomness' }).fill('0');
+  await page.getByRole('spinbutton', { name: 'Loading Delay (ms)' }).fill('0');
+
+  await page.getByRole('button', { name: 'Save' }).click();
+
+  // Wait until the URL is updated
+  await page.waitForURL(`**/${parent}/*`);
+
+  const uuid = await getFocusedObjectUuid(page);
+  const url = await getHashUrlToDomainObject(page, uuid);
+
+  return {
+    name,
+    uuid,
+    url
+  };
+}
+
+/**
+ * Navigates directly to a given object url, in fixed time mode, with the given start and end bounds.
+ * @param {import('@playwright/test').Page} page
+ * @param {string} url The url to the domainObject
+ * @param {string | number} start The starting time bound in milliseconds since epoch
+ * @param {string | number} end The ending time bound in milliseconds since epoch
+ */
+async function navigateToObjectWithFixedTimeBounds(page, url, start, end) {
+  await page.goto(
+    `${url}?tc.mode=fixed&tc.timeSystem=utc&tc.startBound=${start}&tc.endBound=${end}`
+  );
+}
+
 /**
  * Open the given `domainObject`'s context menu from the object tree.
  * Expands the path to the object and scrolls to it if necessary.
@@ -271,13 +340,13 @@ async function getFocusedObjectUuid(page) {
  * URLs returned will be of the form `'./browse/#/mine/<uuid0>/<uuid1>/...'`
  *
  * @param {import('@playwright/test').Page} page
- * @param {string} uuid the uuid of the object to get the url for
+ * @param {string | import('../src/api/objects/ObjectAPI').Identifier} identifier the uuid or identifier of the object to get the url for
  * @returns {Promise<string>} the url of the object
  */
-async function getHashUrlToDomainObject(page, uuid) {
-  await page.waitForLoadState('load'); //Add some determinism
-  const hashUrl = await page.evaluate(async (objectUuid) => {
-    const path = await window.openmct.objects.getOriginalPath(objectUuid);
+async function getHashUrlToDomainObject(page, identifier) {
+  await page.waitForLoadState('load');
+  const hashUrl = await page.evaluate(async (objectIdentifier) => {
+    const path = await window.openmct.objects.getOriginalPath(objectIdentifier);
     let url =
       './#/browse/' +
       [...path]
@@ -291,7 +360,7 @@ async function getHashUrlToDomainObject(page, uuid) {
     }
 
     return url;
-  }, uuid);
+  }, identifier);
 
   return hashUrl;
 }
@@ -300,6 +369,7 @@ async function getHashUrlToDomainObject(page, uuid) {
  * Utilizes the OpenMCT API to detect if the UI is in Edit mode.
  * @private
  * @param {import('@playwright/test').Page} page
+ * @param {string | import('../src/api/objects/ObjectAPI').Identifier} identifier
  * @return {Promise<boolean>} true if the Open MCT is in Edit Mode
  */
 async function _isInEditMode(page, identifier) {
@@ -410,8 +480,18 @@ async function setEndOffset(page, offset) {
   await setTimeConductorOffset(page, offset);
 }
 
+/**
+ * Set the time conductor bounds in fixed time mode
+ *
+ * NOTE: Unless explicitly testing the Time Conductor itself, it is advised to instead
+ * navigate directly to the object with the desired time bounds using `navigateToObjectWithFixedTimeBounds()`.
+ * @param {import('@playwright/test').Page} page
+ * @param {string} startDate
+ * @param {string} endDate
+ */
 async function setTimeConductorBounds(page, startDate, endDate) {
   // Bring up the time conductor popup
+  expect(await page.locator('.l-shell__time-conductor.c-compact-tc').count()).toBe(1);
   await page.click('.l-shell__time-conductor.c-compact-tc');
 
   await setTimeBounds(page, startDate, endDate);
@@ -419,20 +499,31 @@ async function setTimeConductorBounds(page, startDate, endDate) {
   await page.keyboard.press('Enter');
 }
 
+/**
+ * Set the independent time conductor bounds in fixed time mode
+ * @param {import('@playwright/test').Page} page
+ * @param {string} startDate
+ * @param {string} endDate
+ */
 async function setIndependentTimeConductorBounds(page, startDate, endDate) {
   // Activate Independent Time Conductor in Fixed Time Mode
   await page.getByRole('switch').click();
 
   // Bring up the time conductor popup
   await page.click('.c-conductor-holder--compact .c-compact-tc');
-
-  await expect(page.locator('.itc-popout')).toBeVisible();
+  await expect(page.locator('.itc-popout')).toBeInViewport();
 
   await setTimeBounds(page, startDate, endDate);
 
   await page.keyboard.press('Enter');
 }
 
+/**
+ * Set the bounds of the visible conductor in fixed time mode
+ * @param {import('@playwright/test').Page} page
+ * @param {string} startDate
+ * @param {string} endDate
+ */
 async function setTimeBounds(page, startDate, endDate) {
   if (startDate) {
     // Fill start time
@@ -549,9 +640,25 @@ async function getCanvasPixels(page, canvasSelector) {
   return getTelemValuePromise;
 }
 
+/**
+ * @param {import('@playwright/test').Page} page
+ * @param {string} myItemsFolderName
+ * @param {string} url
+ * @param {string} newName
+ */
+async function renameObjectFromContextMenu(page, url, newName) {
+  await openObjectTreeContextMenu(page, url);
+  await page.click('li:text("Edit Properties")');
+  const nameInput = page.getByLabel('Title', { exact: true });
+  await nameInput.fill('');
+  await nameInput.fill(newName);
+  await page.click('[aria-label="Save"]');
+}
+
 // eslint-disable-next-line no-undef
 module.exports = {
   createDomainObjectWithDefaults,
+  createExampleTelemetryObject,
   createNotification,
   createPlanFromJSON,
   expandEntireTree,
@@ -559,6 +666,7 @@ module.exports = {
   getCanvasPixels,
   getHashUrlToDomainObject,
   getFocusedObjectUuid,
+  navigateToObjectWithFixedTimeBounds,
   openObjectTreeContextMenu,
   setFixedTimeMode,
   setRealTimeMode,
@@ -567,5 +675,6 @@ module.exports = {
   setTimeConductorBounds,
   setIndependentTimeConductorBounds,
   selectInspectorTab,
-  waitForPlotsToRender
+  waitForPlotsToRender,
+  renameObjectFromContextMenu
 };

e2e/baseFixtures.js

@@ -72,8 +72,13 @@ exports.test = base.test.extend({
   /**
    * This allows the test to manipulate the browser clock. This is useful for Visual and Snapshot tests which need
    * the Time Indicator Clock to be in a specific state.
+   *
+   * Warning: Has many limitations and secondary side effects in Open MCT.
+   * 1. The tree component does not render.
+   * 2. page.WaitForNavigation does not trigger.
+   *
    * Usage:
-   * ```
+   * ```js
    * test.use({
    *   clockOptions: {
    *       now: 0,
@@ -85,6 +90,7 @@ exports.test = base.test.extend({
    *
    * @see {@link https://github.com/microsoft/playwright/issues/6347 Github RFE}
    * @see {@link https://github.com/sinonjs/fake-timers/#var-clock--faketimersinstallconfig SinonJS FakeTimers Config}
+   * @type {import('@types/sinonjs__fake-timers').FakeTimerInstallOpts}
    */
   clockOptions: [undefined, { option: true }],
   overrideClock: [
@@ -143,7 +149,24 @@ exports.test = base.test.extend({
    * Extends the base page class to enable console log error detection.
    * @see {@link https://github.com/microsoft/playwright/discussions/11690 Github Discussion}
    */
-  page: async ({ page, failOnConsoleError }, use) => {
+  page: async ({ page, failOnConsoleError, clockOptions }, use) => {
+    // If overriding the clock, we must also override the Date.now()
+    // function in the generatorWorker context. This is necessary
+    // to ensure that example telemetry data is generated for the new clock time.
+    if (clockOptions?.now !== undefined) {
+      page.on(
+        'worker',
+        (worker) => {
+          if (worker.url().includes('generatorWorker')) {
+            worker.evaluate((time) => {
+              self.Date.now = () => time;
+            });
+          }
+        },
+        clockOptions.now
+      );
+    }
+
     // Capture any console errors during test execution
     const messages = [];
     page.on('console', (msg) => messages.push(msg));

e2e/constants.js

@@ -0,0 +1,9 @@
+/**
+ * Constants which may be used across all e2e tests.
+ */
+
+/**
+ * Time Constants
+ * - 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)

e2e/helper/notebookUtils.js

@@ -20,9 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { createDomainObjectWithDefaults } = require('../appActions');
+const { selectInspectorTab, createDomainObjectWithDefaults } = require('../appActions');
 
 const NOTEBOOK_DROP_AREA = '.c-notebook__drag-area';
+const CUSTOM_NAME = 'CUSTOM_NAME';
+const path = require('path');
 
 /**
  * @param {import('@playwright/test').Page} page
@@ -62,8 +64,86 @@ async function commitEntry(page) {
   await page.locator('.c-ne__save-button > button').click();
 }
 
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function startAndAddRestrictedNotebookObject(page) {
+  // eslint-disable-next-line no-undef
+  await page.addInitScript({ path: path.join(__dirname, 'addInitRestrictedNotebook.js') });
+  await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+  return createDomainObjectWithDefaults(page, {
+    type: CUSTOM_NAME,
+    name: 'Restricted Test Notebook'
+  });
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function lockPage(page) {
+  const commitButton = page.locator('button:has-text("Commit Entries")');
+  await commitButton.click();
+
+  //Wait until Lock Banner is visible
+  await page.locator('text=Lock Page').click();
+}
+
+/**
+ * Creates a notebook object and adds an entry.
+ * @param {import('@playwright/test').Page} - page to load
+ * @param {number} [iterations = 1] - the number of entries to create
+ */
+async function createNotebookAndEntry(page, iterations = 1) {
+  const notebook = createDomainObjectWithDefaults(page, { type: 'Notebook' });
+
+  for (let iteration = 0; iteration < iterations; iteration++) {
+    await enterTextEntry(page, `Entry ${iteration}`);
+  }
+
+  return notebook;
+}
+
+/**
+ * Creates a notebook object, adds an entry, and adds a tag.
+ * @param {import('@playwright/test').Page} page
+ * @param {number} [iterations = 1] - the number of entries (and tags) to create
+ */
+async function createNotebookEntryAndTags(page, iterations = 1) {
+  const notebook = await createNotebookAndEntry(page, iterations);
+  await selectInspectorTab(page, 'Annotations');
+
+  for (let iteration = 0; iteration < iterations; iteration++) {
+    // Hover and click "Add Tag" button
+    // Hover is needed here to "slow down" the actions while running in headless mode
+    await page.locator(`[aria-label="Notebook Entry"] >> nth = ${iteration}`).click();
+    await page.hover(`button:has-text("Add Tag")`);
+    await page.locator(`button:has-text("Add Tag")`).click();
+
+    // Click inside the tag search input
+    await page.locator('[placeholder="Type to select tag"]').click();
+    // Select the "Driving" tag
+    await page.locator('[aria-label="Autocomplete Options"] >> text=Driving').click();
+
+    // Hover and click "Add Tag" button
+    // Hover is needed here to "slow down" the actions while running in headless mode
+    await page.hover(`button:has-text("Add Tag")`);
+    await page.locator(`button:has-text("Add Tag")`).click();
+    // Click inside the tag search input
+    await page.locator('[placeholder="Type to select tag"]').click();
+    // Select the "Science" tag
+    await page.locator('[aria-label="Autocomplete Options"] >> text=Science').click();
+  }
+
+  return notebook;
+}
+
 // eslint-disable-next-line no-undef
 module.exports = {
   enterTextEntry,
-  dragAndDropEmbed
+  dragAndDropEmbed,
+  startAndAddRestrictedNotebookObject,
+  lockPage,
+  createNotebookEntryAndTags,
+  createNotebookAndEntry
 };

e2e/pluginFixtures.js

@@ -45,8 +45,6 @@ const path = require('path');
 // const createdObjects = new Map();
 
 /**
- * **NOTE: This feature is a work-in-progress and should not currently be used.**
- *
  * This action will create a domain object for the test to reference and return the uuid. If an object
  * of a given name already exists, it will return the uuid of that object to the test instead of creating
  * a new file. The intent is to move object creation out of test suites which are not explicitly worried
@@ -65,10 +63,7 @@ const path = require('path');
 
 //     await createDomainObjectWithDefaults(page, type, name);
 
-//     // Once object is created, get the uuid from the url
-//     const uuid = await page.evaluate(() => {
-//         return window.location.href.match(/[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/)[0];
-//     });
+//     const uuid = getHashUrlToDomainObject(page);
 
 //     createdObjects.set(objectName, uuid);
 
@@ -146,6 +141,7 @@ exports.test = test.extend({
     await use({ myItemsFolderName });
   }
 });
+
 exports.expect = expect;
 exports.request = request;
 

e2e/test-data/VisualTestData_storage.json

@@ -1,22 +0,0 @@
-{
-  "cookies": [],
-  "origins": [
-    {
-      "origin": "http://localhost:8080",
-      "localStorage": [
-        {
-          "name": "tcHistory",
-          "value": "{\"utc\":[{\"start\":1658617611983,\"end\":1658619411983}]}"
-        },
-        {
-          "name": "mct",
-          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"7fa5749b-8969-494c-9d85-c272516d333c\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1658619412848,\"modified\":1658619412848},\"7fa5749b-8969-494c-9d85-c272516d333c\":{\"identifier\":{\"key\":\"7fa5749b-8969-494c-9d85-c272516d333c\",\"namespace\":\"\"},\"name\":\"Unnamed Overlay Plot\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"67cbb9fc-af46-4148-b9e5-aea11179ae4b\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"67cbb9fc-af46-4148-b9e5-aea11179ae4b\",\"namespace\":\"\"}}]},\"modified\":1658619413566,\"location\":\"mine\",\"persisted\":1658619413567},\"67cbb9fc-af46-4148-b9e5-aea11179ae4b\":{\"name\":\"Unnamed Sine Wave Generator\",\"type\":\"generator\",\"identifier\":{\"key\":\"67cbb9fc-af46-4148-b9e5-aea11179ae4b\",\"namespace\":\"\"},\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":\"5000\"},\"modified\":1658619413552,\"location\":\"7fa5749b-8969-494c-9d85-c272516d333c\",\"persisted\":1658619413552}}"
-        },
-        {
-          "name": "mct-tree-expanded",
-          "value": "[\"/browse/mine\"]"
-        }
-      ]
-    }
-  ]
-}

e2e/test-data/overlay_plot_storage.json

@@ -0,0 +1,26 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:8080",
+      "localStorage": [
+        {
+          "name": "mct",
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"8c863964-4640-4db1-8a98-0e546c3c271d\",\"namespace\":\"\"},{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741852556,\"created\":1678741830859,\"persisted\":1678741852557},\"8c863964-4640-4db1-8a98-0e546c3c271d\":{\"identifier\":{\"key\":\"8c863964-4640-4db1-8a98-0e546c3c271d\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}}]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with Telemetry Object\\nchrome\",\"modified\":1678741862011,\"location\":\"mine\",\"created\":1678741839461,\"persisted\":1678741862011},\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\":{\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"identifier\":{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"},\"telemetry\":{\"period\":\"1\",\"amplitude\":\"1\",\"offset\":\"0\",\"dataRateInHz\":\"1\",\"phase\":\"0\",\"randomness\":\"0\",\"loadDelay\":\"0\",\"infinityValues\":false,\"staleness\":false},\"modified\":1678741852553,\"location\":\"mine\",\"created\":1678741852553,\"persisted\":1678741852553}}"
+        },
+        {
+          "name": "mct-tree-expanded",
+          "value": "[]"
+        },
+        {
+          "name": "tcHistory",
+          "value": "{\"utc\":[{\"start\":1678740030748,\"end\":1678741830748}]}"
+        },
+        {
+          "name": "mct-recent-objects",
+          "value": "[{\"objectPath\":[{\"identifier\":{\"key\":\"8c863964-4640-4db1-8a98-0e546c3c271d\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with Telemetry Object\\nchrome\",\"modified\":1678741860389,\"location\":\"mine\",\"created\":1678741839461,\"persisted\":1678741860389},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"8c863964-4640-4db1-8a98-0e546c3c271d\",\"namespace\":\"\"},{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741852556,\"created\":1678741830859,\"persisted\":1678741852557},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/8c863964-4640-4db1-8a98-0e546c3c271d\",\"domainObject\":{\"identifier\":{\"key\":\"8c863964-4640-4db1-8a98-0e546c3c271d\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with Telemetry Object\\nchrome\",\"modified\":1678741860389,\"location\":\"mine\",\"created\":1678741839461,\"persisted\":1678741860389}},{\"objectPath\":[{\"identifier\":{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"},\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"telemetry\":{\"period\":\"1\",\"amplitude\":\"1\",\"offset\":\"0\",\"dataRateInHz\":\"1\",\"phase\":\"0\",\"randomness\":\"0\",\"loadDelay\":\"0\",\"infinityValues\":false,\"staleness\":false},\"modified\":1678741852553,\"location\":\"mine\",\"created\":1678741852553,\"persisted\":1678741852553},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"8c863964-4640-4db1-8a98-0e546c3c271d\",\"namespace\":\"\"},{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741852556,\"created\":1678741830859,\"persisted\":1678741852557},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"domainObject\":{\"identifier\":{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"},\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"telemetry\":{\"period\":\"1\",\"amplitude\":\"1\",\"offset\":\"0\",\"dataRateInHz\":\"1\",\"phase\":\"0\",\"randomness\":\"0\",\"loadDelay\":\"0\",\"infinityValues\":false,\"staleness\":false},\"modified\":1678741852553,\"location\":\"mine\",\"created\":1678741852553,\"persisted\":1678741852553}},{\"objectPath\":[{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"8c863964-4640-4db1-8a98-0e546c3c271d\",\"namespace\":\"\"},{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741852556,\"created\":1678741830859,\"persisted\":1678741852557},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine\",\"domainObject\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"8c863964-4640-4db1-8a98-0e546c3c271d\",\"namespace\":\"\"},{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741852556,\"created\":1678741830859,\"persisted\":1678741852557}}]"
+        }
+      ]
+    }
+  ]
+}

e2e/test-data/overlay_plot_with_delay_storage.json

@@ -0,0 +1,26 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:8080",
+      "localStorage": [
+        {
+          "name": "mct",
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741890986,\"created\":1678741885545,\"persisted\":1678741890987},\"db9fb115-7a72-4c45-81a4-1f6021156b4e\":{\"identifier\":{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"namespace\":\"\"}}]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with 5s Delay\\nchrome\",\"modified\":1678741904378,\"location\":\"mine\",\"created\":1678741890983,\"persisted\":1678741904385},\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\":{\"name\":\"Unnamed Sine Wave Generator\",\"type\":\"generator\",\"identifier\":{\"key\":\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"namespace\":\"\"},\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":\"5000\",\"infinityValues\":false,\"staleness\":false},\"modified\":1678741896800,\"location\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"created\":1678741896800,\"persisted\":1678741896800}}"
+        },
+        {
+          "name": "mct-tree-expanded",
+          "value": "[]"
+        },
+        {
+          "name": "tcHistory",
+          "value": "{\"utc\":[{\"start\":1678740085436,\"end\":1678741885436}]}"
+        },
+        {
+          "name": "mct-recent-objects",
+          "value": "[{\"objectPath\":[{\"identifier\":{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with 5s Delay\\nchrome\",\"modified\":1678741896803,\"location\":\"mine\",\"created\":1678741890983,\"persisted\":1678741896803},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741890986,\"created\":1678741885545,\"persisted\":1678741890987},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"domainObject\":{\"identifier\":{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with 5s Delay\\nchrome\",\"modified\":1678741896803,\"location\":\"mine\",\"created\":1678741890983,\"persisted\":1678741896803}},{\"objectPath\":[{\"identifier\":{\"key\":\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"namespace\":\"\"},\"name\":\"Unnamed Sine Wave Generator\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":\"5000\",\"infinityValues\":false,\"staleness\":false},\"modified\":1678741896800,\"location\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"created\":1678741896800,\"persisted\":1678741896800},{\"identifier\":{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with 5s Delay\\nchrome\",\"modified\":1678741896803,\"location\":\"mine\",\"created\":1678741890983,\"persisted\":1678741896803},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741890986,\"created\":1678741885545,\"persisted\":1678741890987},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/db9fb115-7a72-4c45-81a4-1f6021156b4e/4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"domainObject\":{\"identifier\":{\"key\":\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"namespace\":\"\"},\"name\":\"Unnamed Sine Wave Generator\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":\"5000\",\"infinityValues\":false,\"staleness\":false},\"modified\":1678741896800,\"location\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"created\":1678741896800,\"persisted\":1678741896800}},{\"objectPath\":[{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741890986,\"created\":1678741885545,\"persisted\":1678741890987},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine\",\"domainObject\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741890986,\"created\":1678741885545,\"persisted\":1678741890987}}]"
+        }
+      ]
+    }
+  ]
+}

e2e/tests/framework/exampleTemplate.e2e.spec.js

@@ -117,6 +117,35 @@ test.describe('Renaming Timer Object', () => {
   });
 });
 
+/**
+ * The next most important concept in our testing is working with telemetry objects. Telemetry is at the core of Open MCT
+ * and we have developed a great pattern for working with it.
+ */
+test.describe('Advanced: Working with telemetry objects', () => {
+  let displayLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a Display Layout with a meaningful name
+    displayLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Display Layout with Embedded SWG'
+    });
+    // Create Telemetry object within the parent object created above
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Telemetry',
+      parent: displayLayout.uuid //reference the display layout in the creation process
+    });
+  });
+  test('Can directly navigate to a Display Layout with embedded telemetry', async ({ page }) => {
+    //Now you can directly navigate to the displayLayout created in the beforeEach with the embedded telemetry
+    await page.goto(displayLayout.url);
+    //Expect the created Telemetry Object to be visible when directly navigating to the displayLayout
+    await expect(page.getByTitle('Sine')).toBeVisible();
+  });
+});
+
 /**
  * Structure:
  * Custom functions should be declared last.

e2e/tests/framework/generateLocalStorageData.e2e.spec.js

@@ -0,0 +1,260 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+/* global __dirname */
+/**
+ * This test suite is dedicated to generating LocalStorage via Session Storage to be used
+ * in some visual test suites like controlledClock.visual.spec.js. This suite should run to completion
+ * and generate an artifact in ./e2e/test-data/<name>_storage.json . This will run
+ * on every commit to ensure that this object still loads into tests correctly and will retain the
+ * *.e2e.spec.js suffix.
+ *
+ * TODO: Provide additional validation of object properties as it grows.
+ * Verification of object properties happens in this file before the test-data is generated,
+ * and is additionally verified in the validation test suites below.
+ */
+
+const { test, expect } = require('../../pluginFixtures.js');
+const {
+  createDomainObjectWithDefaults,
+  createExampleTelemetryObject,
+  selectInspectorTab
+} = require('../../appActions.js');
+const { MISSION_TIME } = require('../../constants.js');
+const path = require('path');
+
+const overlayPlotName = 'Overlay Plot with Telemetry Object';
+
+test.describe('Generate Visual Test Data @localStorage @generatedata', () => {
+  test.use({
+    clockOptions: {
+      now: MISSION_TIME,
+      shouldAdvanceTime: true
+    }
+  });
+
+  test.beforeEach(async ({ page }) => {
+    // Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+  });
+
+  // TODO: Visual test for the generated object here
+  // - Move to using appActions to create the overlay plot
+  //   and embedded standard telemetry object
+  test('Generate Overlay Plot with Telemetry Object', async ({ page, context }) => {
+    // Create Overlay Plot
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      name: overlayPlotName
+    });
+
+    // Create Telemetry Object
+    const exampleTelemetry = await createExampleTelemetryObject(page);
+
+    // Make Link from Telemetry Object to Overlay Plot
+    await page.locator('button[title="More options"]').click();
+
+    // Select 'Create Link' from dropdown
+    await page.getByRole('menuitem', { name: ' Create Link' }).click();
+
+    // Search and Select for overlay Plot within Create Modal
+    await page.getByRole('dialog').getByRole('searchbox', { name: 'Search Input' }).click();
+    await page
+      .getByRole('dialog')
+      .getByRole('searchbox', { name: 'Search Input' })
+      .fill(overlayPlot.name);
+    await page
+      .getByRole('treeitem', { name: new RegExp(overlayPlot.name) })
+      .locator('a')
+      .click();
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    await page.goto(overlayPlot.url);
+
+    // TODO: Flesh Out Assertions against created Objects
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(overlayPlotName);
+    await selectInspectorTab(page, 'Config');
+    await page
+      .getByRole('list', { name: 'Plot Series Properties' })
+      .locator('span')
+      .first()
+      .click();
+
+    // TODO: Modify the Overlay Plot to use fixed Scaling
+    // TODO: Verify Autoscaling.
+
+    // TODO: Fix accessibility of Plot Series Properties tables
+    // Assert that the Plot Series properties have the correct values
+    await expect(
+      page.locator('[role=cell]:has-text("Value")~[role=cell]:has-text("sin")')
+    ).toBeVisible();
+    await expect(
+      page.locator(
+        '[role=cell]:has-text("Line Method")~[role=cell]:has-text("Linear interpolation")'
+      )
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Markers")~[role=cell]:has-text("Point: 2px")')
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Alarm Markers")~[role=cell]:has-text("Enabled")')
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Limit Lines")~[role=cell]:has-text("Disabled")')
+    ).toBeVisible();
+
+    await page.goto(exampleTelemetry.url);
+    await selectInspectorTab(page, 'Properties');
+
+    // TODO: assert Example Telemetry property values
+    // await page.goto(exampleTelemetry.url);
+
+    // Save localStorage for future test execution
+    await context.storageState({
+      path: path.join(__dirname, '../../../e2e/test-data/overlay_plot_storage.json')
+    });
+  });
+  // TODO: Merge this with previous test. Edit object created in previous test.
+  test('Generate Overlay Plot with 5s Delay', async ({ page, context }) => {
+    // add overlay plot with defaults
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      name: 'Overlay Plot with 5s Delay'
+    });
+
+    const swgWith5sDelay = await createExampleTelemetryObject(page, overlayPlot.uuid);
+
+    await page.goto(swgWith5sDelay.url);
+    await page.getByTitle('More options').click();
+    await page.getByRole('menuitem', { name: ' Edit Properties...' }).click();
+
+    //Edit Example Telemetry Object to include 5s loading Delay
+    await page.locator('[aria-label="Loading Delay \\(ms\\)"]').fill('5000');
+
+    await Promise.all([
+      page.waitForNavigation(),
+      page.locator('text=OK').click(),
+      //Wait for Save Banner to appear
+      page.waitForSelector('.c-message-banner__message')
+    ]);
+
+    // focus the overlay plot
+    await page.goto(overlayPlot.url);
+
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(overlayPlot.name);
+
+    // Clear Recently Viewed
+    await page.getByRole('button', { name: 'Clear Recently Viewed' }).click();
+    await page.getByRole('button', { name: 'OK' }).click();
+    //Save localStorage for future test execution
+    await context.storageState({
+      path: path.join(__dirname, '../../../e2e/test-data/overlay_plot_with_delay_storage.json')
+    });
+  });
+});
+
+test.describe('Validate Overlay Plot with Telemetry Object @localStorage @generatedata', () => {
+  test.use({
+    storageState: path.join(__dirname, '../../../e2e/test-data/overlay_plot_storage.json')
+  });
+  test('Validate Overlay Plot with Telemetry Object', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    await page.locator('a').filter({ hasText: overlayPlotName }).click();
+    // TODO: Flesh Out Assertions against created Objects
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(overlayPlotName);
+    await selectInspectorTab(page, 'Config');
+    await page
+      .getByRole('list', { name: 'Plot Series Properties' })
+      .locator('span')
+      .first()
+      .click();
+
+    // TODO: Modify the Overlay Plot to use fixed Scaling
+    // TODO: Verify Autoscaling.
+
+    // TODO: Fix accessibility of Plot Series Properties tables
+    // Assert that the Plot Series properties have the correct values
+    await expect(
+      page.locator('[role=cell]:has-text("Value")~[role=cell]:has-text("sin")')
+    ).toBeVisible();
+    await expect(
+      page.locator(
+        '[role=cell]:has-text("Line Method")~[role=cell]:has-text("Linear interpolation")'
+      )
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Markers")~[role=cell]:has-text("Point: 2px")')
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Alarm Markers")~[role=cell]:has-text("Enabled")')
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Limit Lines")~[role=cell]:has-text("Disabled")')
+    ).toBeVisible();
+  });
+});
+
+test.describe('Validate Overlay Plot with 5s Delay Telemetry Object @localStorage @generatedata', () => {
+  test.use({
+    storageState: path.join(
+      __dirname,
+      '../../../e2e/test-data/overlay_plot_with_delay_storage.json'
+    )
+  });
+  test('Validate Overlay Plot with Telemetry Object', async ({ page }) => {
+    const plotName = 'Overlay Plot with 5s Delay';
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    await page.locator('a').filter({ hasText: plotName }).click();
+    // TODO: Flesh Out Assertions against created Objects
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(plotName);
+    await selectInspectorTab(page, 'Config');
+    await page
+      .getByRole('list', { name: 'Plot Series Properties' })
+      .locator('span')
+      .first()
+      .click();
+
+    // TODO: Modify the Overlay Plot to use fixed Scaling
+    // TODO: Verify Autoscaling.
+
+    // TODO: Fix accessibility of Plot Series Properties tables
+    // Assert that the Plot Series properties have the correct values
+    await expect(
+      page.locator('[role=cell]:has-text("Value")~[role=cell]:has-text("sin")')
+    ).toBeVisible();
+    await expect(
+      page.locator(
+        '[role=cell]:has-text("Line Method")~[role=cell]:has-text("Linear interpolation")'
+      )
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Markers")~[role=cell]:has-text("Point: 2px")')
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Alarm Markers")~[role=cell]:has-text("Enabled")')
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Limit Lines")~[role=cell]:has-text("Disabled")')
+    ).toBeVisible();
+  });
+});

e2e/tests/framework/generateVisualTestData.e2e.spec.js

@@ -1,64 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-/*
-This test suite is dedicated to generating LocalStorage via Session Storage to be used
-in some visual test suites like controlledClock.visual.spec.js. This suite should run to completion
-and generate an artifact named ./e2e/test-data/VisualTestData_storage.json . This will run
-on every Commit to ensure that this object still loads into tests correctly and will retain the
-.e2e.spec.js suffix.
-
-TODO: Provide additional validation of object properties as it grows.
-
-*/
-
-const { createDomainObjectWithDefaults } = require('../../appActions.js');
-const { test, expect } = require('../../pluginFixtures.js');
-
-test('Generate Visual Test Data @localStorage', async ({ page, context }) => {
-  //Go to baseURL
-  await page.goto('./', { waitUntil: 'domcontentloaded' });
-  const overlayPlot = await createDomainObjectWithDefaults(page, { type: 'Overlay Plot' });
-
-  // click create button
-  await page.locator('button:has-text("Create")').click();
-
-  // add sine wave generator with defaults
-  await page.locator('li[role="menuitem"]:has-text("Sine Wave Generator")').click();
-
-  //Add a 5000 ms Delay
-  await page.locator('[aria-label="Loading Delay \\(ms\\)"]').fill('5000');
-
-  await Promise.all([
-    page.waitForNavigation(),
-    page.locator('button:has-text("OK")').click(),
-    //Wait for Save Banner to appear
-    page.waitForSelector('.c-message-banner__message')
-  ]);
-
-  // focus the overlay plot
-  await page.goto(overlayPlot.url);
-
-  await expect(page.locator('.l-browse-bar__object-name')).toContainText(overlayPlot.name);
-  //Save localStorage for future test execution
-  await context.storageState({ path: './e2e/test-data/VisualTestData_storage.json' });
-});

e2e/tests/functional/couchdb.e2e.spec.js

@@ -80,7 +80,7 @@ test.describe('CouchDB Status Indicator with mocked responses @couchdb', () => {
 test.describe('CouchDB initialization with mocked responses @couchdb', () => {
   test.use({ failOnConsoleError: false });
   test("'My Items' folder is created if it doesn't exist", async ({ page }) => {
-    const mockedMissingObjectResponsefromCouchDB = {
+    const mockedMissingObjectResponseFromCouchDB = {
       status: 404,
       contentType: 'application/json',
       body: JSON.stringify({})
@@ -92,7 +92,7 @@ test.describe('CouchDB initialization with mocked responses @couchdb', () => {
     await page.route(
       '**/mine',
       (route) => {
-        route.fulfill(mockedMissingObjectResponsefromCouchDB);
+        route.fulfill(mockedMissingObjectResponseFromCouchDB);
       },
       { times: 1 }
     );

e2e/tests/functional/example/eventGenerator.e2e.spec.js

@@ -46,7 +46,7 @@ test.describe('Example Event Generator CRUD Operations', () => {
   });
 });
 
-test.describe('Example Event Generator Telemetry Event Verficiation', () => {
+test.describe('Example Event Generator Telemetry Event Verification', () => {
   test.fixme('telemetry is coming in for test event', async ({ page }) => {
     // Go to object created in step one
     // Verify the telemetry table is filled with > 1 row

e2e/tests/functional/moveAndLinkObjects.e2e.spec.js

@@ -292,7 +292,7 @@ test.describe('Move & link item tests', () => {
 });
 
 test.fixme(
-  'Cannot move a previously created domain object to non-peristable object in Move Modal',
+  'Cannot move a previously created domain object to non-persistable object in Move Modal',
   async ({ page }) => {
     //Create a domain object
     //Save Domain object

e2e/tests/functional/planning/timestrip.e2e.spec.js

@@ -73,7 +73,7 @@ const testPlan = {
 };
 
 test.describe('Time Strip', () => {
-  test('Create two Time Strips, add a single Plan to both, and verify they can have separate Indepdenent Time Contexts @unstable', async ({
+  test('Create two Time Strips, add a single Plan to both, and verify they can have separate Independent Time Contexts @unstable', async ({
     page
   }) => {
     test.info().annotations.push({

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

@@ -22,12 +22,15 @@
 
 /*
 This test suite is dedicated to tests which verify the basic operations surrounding conditionSets. Note: this
-suite is sharing state between tests which is considered an anti-pattern. Implimenting in this way to
+suite is sharing state between tests which is considered an anti-pattern. Implementing in this way to
 demonstrate some playwright for test developers. This pattern should not be re-used in other CRUD suites.
 */
 
 const { test, expect } = require('../../../../pluginFixtures.js');
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
+const {
+  createDomainObjectWithDefaults,
+  createExampleTelemetryObject
+} = require('../../../../appActions');
 
 let conditionSetUrl;
 let getConditionSetIdentifierFromUrl;
@@ -127,7 +130,7 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
     // Verify Inspector Details has updated Name property
     expect.soft(page.locator('text=Renamed Condition Set').nth(2)).toBeTruthy();
 
-    // Verify Tree reflects updated Name proprety
+    // Verify Tree reflects updated Name property
     // Expand Tree
     await page.locator(`text=Open MCT ${myItemsFolderName} >> span >> nth=3`).click();
     // Verify Condition Set Object is renamed in Tree
@@ -150,7 +153,7 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
     // Verify Inspector Details has updated Name property
     expect.soft(page.locator('text=Renamed Condition Set').nth(2)).toBeTruthy();
 
-    // Verify Tree reflects updated Name proprety
+    // Verify Tree reflects updated Name property
     // Expand Tree
     await page.locator(`text=Open MCT ${myItemsFolderName} >> span >> nth=3`).click();
     // Verify Condition Set Object is renamed in Tree
@@ -205,23 +208,31 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
 });
 
 test.describe('Basic Condition Set Use', () => {
+  let conditionSet;
+
   test.beforeEach(async ({ page }) => {
     // Open a browser, navigate to the main page, and wait until all network events to resolve
     await page.goto('./', { waitUntil: 'domcontentloaded' });
-  });
-  test('Can add a condition', async ({ page }) => {
     // Create a new condition set
-    await createDomainObjectWithDefaults(page, {
+    conditionSet = await createDomainObjectWithDefaults(page, {
       type: 'Condition Set',
       name: 'Test Condition Set'
     });
+  });
+  test('Creating a condition defaults the condition name to "Unnamed Condition"', async ({
+    page
+  }) => {
+    await page.goto(conditionSet.url);
+
     // Change the object to edit mode
     await page.locator('[title="Edit"]').click();
 
     // Click Add Condition button
     await page.locator('#addCondition').click();
     // Check that the new Unnamed Condition section appears
-    const numOfUnnamedConditions = await page.locator('text=Unnamed Condition').count();
+    const numOfUnnamedConditions = await page
+      .locator('.c-condition__name', { hasText: 'Unnamed Condition' })
+      .count();
     expect(numOfUnnamedConditions).toEqual(1);
   });
   test('ConditionSet should display appropriate view options', async ({ page }) => {
@@ -238,16 +249,13 @@ test.describe('Basic Condition Set Use', () => {
       type: 'Sine Wave Generator',
       name: 'Beta Sine Wave Generator'
     });
-    const conditionSet1 = await createDomainObjectWithDefaults(page, {
-      type: 'Condition Set',
-      name: 'Test Condition Set'
-    });
+
+    await page.goto(conditionSet.url);
 
     // Change the object to edit mode
     await page.locator('[title="Edit"]').click();
 
     // Expand the 'My Items' folder in the left tree
-    await page.goto(conditionSet1.url);
     page.click('button[title="Show selected item in tree"]');
     // Add the Alpha & Beta Sine Wave Generator to the Condition Set and save changes
     const treePane = page.getByRole('tree', {
@@ -264,9 +272,9 @@ test.describe('Basic Condition Set Use', () => {
     await alphaGeneratorTreeItem.dragTo(conditionCollection);
     await betaGeneratorTreeItem.dragTo(conditionCollection);
 
-    const saveButtonLocator = page.locator('button[title="Save"]');
-    await saveButtonLocator.click();
+    await page.locator('button[title="Save"]').click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
     await page.click('button[title="Change the current view"]');
 
     await expect(page.getByRole('menuitem', { name: /Lad Table/ })).toBeHidden();
@@ -274,95 +282,89 @@ test.describe('Basic Condition Set Use', () => {
     await expect(page.getByRole('menuitem', { name: /Plot/ })).toBeVisible();
     await expect(page.getByRole('menuitem', { name: /Telemetry Table/ })).toBeVisible();
   });
-  test('ConditionSet should output blank instead of the default value', async ({ page }) => {
-    //Navigate to baseURL
-    await page.goto('./', { waitUntil: 'domcontentloaded' });
+  test('ConditionSet has correct outputs when telemetry is and is not available', async ({
+    page
+  }) => {
+    const exampleTelemetry = await createExampleTelemetryObject(page);
 
-    //Click the Create button
-    await page.click('button:has-text("Create")');
-
-    // Click the object specified by 'type'
-    await page.click(`li[role='menuitem']:text("Sine Wave Generator")`);
-    await page.getByRole('spinbutton', { name: 'Loading Delay (ms)' }).fill('8000');
-    const nameInput = page.locator('form[name="mctForm"] .first input[type="text"]');
-    await nameInput.fill('Delayed Sine Wave Generator');
-
-    // Click OK button and wait for Navigate event
-    await Promise.all([
-      page.waitForLoadState(),
-      page.click('[aria-label="Save"]'),
-      // Wait for Save Banner to appear
-      page.waitForSelector('.c-message-banner__message')
-    ]);
-
-    // Create a new condition set
-    await createDomainObjectWithDefaults(page, {
-      type: 'Condition Set',
-      name: 'Test Blank Output of Condition Set'
-    });
+    await page.getByTitle('Show selected item in tree').click();
+    await page.goto(conditionSet.url);
     // Change the object to edit mode
     await page.locator('[title="Edit"]').click();
 
-    // Click Add Condition button twice
+    // Create two conditions
     await page.locator('#addCondition').click();
     await page.locator('#addCondition').click();
     await page.locator('#conditionCollection').getByRole('textbox').nth(0).fill('First Condition');
     await page.locator('#conditionCollection').getByRole('textbox').nth(1).fill('Second Condition');
 
-    // Expand the 'My Items' folder in the left tree
-    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').first().click();
-    // Add the Sine Wave Generator to the Condition Set and save changes
-    const treePane = page.getByRole('tree', {
-      name: 'Main Tree'
-    });
-    const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
-      name: 'Delayed Sine Wave Generator'
-    });
-    const conditionCollection = await page.locator('#conditionCollection');
-
+    // Add Telemetry to ConditionSet
+    const sineWaveGeneratorTreeItem = page
+      .getByRole('tree', {
+        name: 'Main Tree'
+      })
+      .getByRole('treeitem', {
+        name: exampleTelemetry.name
+      });
+    const conditionCollection = page.locator('#conditionCollection');
     await sineWaveGeneratorTreeItem.dragTo(conditionCollection);
 
-    const firstCriterionTelemetry = await page.locator(
+    // Modify First Criterion
+    const firstCriterionTelemetry = page.locator(
       '[aria-label="Criterion Telemetry Selection"] >> nth=0'
     );
-    firstCriterionTelemetry.selectOption({ label: 'Delayed Sine Wave Generator' });
-
-    const secondCriterionTelemetry = await page.locator(
-      '[aria-label="Criterion Telemetry Selection"] >> nth=1'
-    );
-    secondCriterionTelemetry.selectOption({ label: 'Delayed Sine Wave Generator' });
-
-    const firstCriterionMetadata = await page.locator(
+    firstCriterionTelemetry.selectOption({ label: exampleTelemetry.name });
+    const firstCriterionMetadata = page.locator(
       '[aria-label="Criterion Metadata Selection"] >> nth=0'
     );
     firstCriterionMetadata.selectOption({ label: 'Sine' });
+    const firstCriterionComparison = page.locator(
+      '[aria-label="Criterion Comparison Selection"] >> nth=0'
+    );
+    firstCriterionComparison.selectOption({ label: 'is greater than or equal to' });
+    const firstCriterionInput = page.locator('[aria-label="Criterion Input"] >> nth=0');
+    await firstCriterionInput.fill('0');
 
-    const secondCriterionMetadata = await page.locator(
+    // Modify First Criterion
+    const secondCriterionTelemetry = page.locator(
+      '[aria-label="Criterion Telemetry Selection"] >> nth=1'
+    );
+    secondCriterionTelemetry.selectOption({ label: exampleTelemetry.name });
+
+    const secondCriterionMetadata = page.locator(
       '[aria-label="Criterion Metadata Selection"] >> nth=1'
     );
     secondCriterionMetadata.selectOption({ label: 'Sine' });
 
-    const firstCriterionComparison = await page.locator(
-      '[aria-label="Criterion Comparison Selection"] >> nth=0'
-    );
-    firstCriterionComparison.selectOption({ label: 'is greater than or equal to' });
-
-    const secondCriterionComparison = await page.locator(
+    const secondCriterionComparison = page.locator(
       '[aria-label="Criterion Comparison Selection"] >> nth=1'
     );
     secondCriterionComparison.selectOption({ label: 'is less than' });
 
-    const firstCriterionInput = await page.locator('[aria-label="Criterion Input"] >> nth=0');
-    await firstCriterionInput.fill('0');
-
-    const secondCriterionInput = await page.locator('[aria-label="Criterion Input"] >> nth=1');
+    const secondCriterionInput = page.locator('[aria-label="Criterion Input"] >> nth=1');
     await secondCriterionInput.fill('0');
 
-    const saveButtonLocator = page.locator('button[title="Save"]');
-    await saveButtonLocator.click();
+    // Save ConditionSet
+    await page.locator('button[title="Save"]').click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
-    const outputValue = await page.locator('[aria-label="Current Output Value"]');
+    // Validate that the condition set is evaluating and outputting
+    // the correct value when the underlying telemetry subscription is active.
+    let outputValue = page.locator('[aria-label="Current Output Value"]');
+    await expect(outputValue).toHaveText('false');
+
+    await page.goto(exampleTelemetry.url);
+
+    // Edit SWG to add 8 second loading delay to simulate the case
+    // where telemetry is not available.
+    await page.getByTitle('More options').click();
+    await page.getByRole('menuitem', { name: 'Edit Properties...' }).click();
+    await page.getByRole('spinbutton', { name: 'Loading Delay (ms)' }).fill('8000');
+    await page.getByLabel('Save').click();
+
+    // Expect that the output value is blank or '---' if the
+    // underlying telemetry subscription is not active.
+    await page.goto(conditionSet.url);
     await expect(outputValue).toHaveText('---');
   });
 });

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

@@ -260,6 +260,7 @@ test.describe('Display Layout', () => {
   test('When multiple plots are contained in a layout, we only ask for annotations once @couchdb', async ({
     page
   }) => {
+    await setFixedTimeMode(page);
     // Create another Sine Wave Generator
     const anotherSineWaveObject = await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator'
@@ -316,10 +317,20 @@ test.describe('Display Layout', () => {
 
     // wait for annotations requests to be batched and requested
     await page.waitForLoadState('networkidle');
-
     // Network requests for the composite telemetry with multiple items should be:
     // 1.  a single batched request for annotations
     expect(networkRequests.length).toBe(1);
+
+    await setRealTimeMode(page);
+    networkRequests = [];
+
+    await page.reload();
+
+    // wait for annotations to not load (if we have any, we've got a problem)
+    await page.waitForLoadState('networkidle');
+
+    // In real time mode, we don't fetch annotations at all
+    expect(networkRequests.length).toBe(0);
   });
 });
 

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

@@ -29,6 +29,10 @@ const {
 test.describe('Flexible Layout', () => {
   let sineWaveObject;
   let clockObject;
+  let treePane;
+  let sineWaveGeneratorTreeItem;
+  let clockTreeItem;
+  let flexibleLayout;
   test.beforeEach(async ({ page }) => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
@@ -41,23 +45,27 @@ test.describe('Flexible Layout', () => {
     clockObject = await createDomainObjectWithDefaults(page, {
       type: 'Clock'
     });
+
+    // Create a Flexible Layout
+    flexibleLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout'
+    });
+
+    // Define the Sine Wave Generator and Clock tree items
+    treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(sineWaveObject.name)
+    });
+    clockTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(clockObject.name)
+    });
   });
   test('panes have the appropriate draggable attribute while in Edit and Browse modes', async ({
     page
   }) => {
-    const treePane = page.getByRole('tree', {
-      name: 'Main Tree'
-    });
-    const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
-      name: new RegExp(sineWaveObject.name)
-    });
-    const clockTreeItem = treePane.getByRole('treeitem', {
-      name: new RegExp(clockObject.name)
-    });
-    // Create a Flexible Layout
-    await createDomainObjectWithDefaults(page, {
-      type: 'Flexible Layout'
-    });
+    await page.goto(flexibleLayout.url);
     // Edit Flexible Layout
     await page.locator('[title="Edit"]').click();
 
@@ -78,19 +86,79 @@ test.describe('Flexible Layout', () => {
     dragWrapper = page.locator('.c-fl-container__frames-holder .c-fl-frame__drag-wrapper').first();
     await expect(dragWrapper).toHaveAttribute('draggable', 'false');
   });
+  test('changing toolbar settings in edit mode is immediately reflected and persists upon save', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6942'
+    });
+
+    await page.goto(flexibleLayout.url);
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').first().click();
+    // Add the Sine Wave Generator and Clock to the Flexible Layout
+    await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-fl__container.is-empty').first());
+    await clockTreeItem.dragTo(page.locator('.c-fl__container.is-empty'));
+
+    // Click on the first frame to select it
+    await page.locator('.c-fl-container__frame').first().click();
+    await expect(page.locator('.c-fl-container__frame > .c-frame').first()).toHaveAttribute(
+      's-selected',
+      ''
+    );
+
+    // Assert the toolbar is visible
+    await expect(page.locator('.c-toolbar')).toBeInViewport();
+
+    // Assert the layout is in columns orientation
+    expect(await page.locator('.c-fl--rows').count()).toEqual(0);
+
+    // Change the layout to rows orientation
+    await page.getByTitle('Columns layout').click();
+
+    // Assert the layout is in rows orientation
+    expect(await page.locator('.c-fl--rows').count()).toBeGreaterThan(0);
+
+    // Assert the frame of the first item is visible
+    await expect(page.locator('.c-so-view').first()).not.toHaveClass(/c-so-view--no-frame/);
+
+    // Hide the frame of the first item
+    await page.getByTitle('Frame visible').click();
+
+    // Assert the frame is hidden
+    await expect(page.locator('.c-so-view').first()).toHaveClass(/c-so-view--no-frame/);
+
+    // Assert there are 2 containers
+    expect(await page.locator('.c-fl-container').count()).toEqual(2);
+
+    // Add a container
+    await page.getByTitle('Add Container').click();
+
+    // Assert there are 3 containers
+    expect(await page.locator('.c-fl-container').count()).toEqual(3);
+
+    // Save Flexible Layout
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Nav away and back
+    await page.goto(sineWaveObject.url);
+    await page.goto(flexibleLayout.url);
+
+    // Wait for the first frame to be visible so we know the layout has loaded
+    await expect(page.locator('.c-fl-container').nth(0)).toBeInViewport();
+
+    // Assert the settings have persisted
+    expect(await page.locator('.c-fl-container').count()).toEqual(3);
+    expect(await page.locator('.c-fl--rows').count()).toBeGreaterThan(0);
+    await expect(page.locator('.c-so-view').first()).toHaveClass(/c-so-view--no-frame/);
+  });
   test('items in a flexible layout can be removed with object tree context menu when viewing the flexible layout', async ({
     page
   }) => {
-    const treePane = page.getByRole('tree', {
-      name: 'Main Tree'
-    });
-    const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
-      name: new RegExp(sineWaveObject.name)
-    });
-    // Create a Display Layout
-    await createDomainObjectWithDefaults(page, {
-      type: 'Flexible Layout'
-    });
+    await page.goto(flexibleLayout.url);
     // Edit Flexible Layout
     await page.locator('[title="Edit"]').click();
 
@@ -121,17 +189,7 @@ test.describe('Flexible Layout', () => {
       type: 'issue',
       description: 'https://github.com/nasa/openmct/issues/3117'
     });
-    const treePane = page.getByRole('tree', {
-      name: 'Main Tree'
-    });
-    const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
-      name: new RegExp(sineWaveObject.name)
-    });
-
-    // Create a Flexible Layout
-    const flexibleLayout = await createDomainObjectWithDefaults(page, {
-      type: 'Flexible Layout'
-    });
+    await page.goto(flexibleLayout.url);
     // Edit Flexible Layout
     await page.locator('[title="Edit"]').click();
 
@@ -167,19 +225,13 @@ test.describe('Flexible Layout', () => {
     const exampleImageryObject = await createDomainObjectWithDefaults(page, {
       type: 'Example Imagery'
     });
-    // Create a Flexible Layout
-    await createDomainObjectWithDefaults(page, {
-      type: 'Flexible Layout'
-    });
-    // Edit Display Layout
+
+    await page.goto(flexibleLayout.url);
+    // Edit Flexible Layout
     await page.locator('[title="Edit"]').click();
 
     // Expand the 'My Items' folder in the left tree
     await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
-    // Add the Sine Wave Generator to the Flexible Layout and save changes
-    const treePane = page.getByRole('tree', {
-      name: 'Main Tree'
-    });
     const exampleImageryTreeItem = treePane.getByRole('treeitem', {
       name: new RegExp(exampleImageryObject.name)
     });

e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js

@@ -79,25 +79,25 @@ test.describe('Example Imagery Object', () => {
     // Test independent fixed time with global fixed time
     // flip on independent time conductor
     await page.getByRole('switch', { name: 'Enable Independent Time Conductor' }).click();
+
+    // Adding in delay to address flakiness of ITC test-- button event handlers not registering in time
+    await expect(page.locator('#independentTCToggle')).toBeChecked();
+    await expect(page.locator('.c-compact-tc').first()).toBeVisible();
+
     await page.getByRole('button', { name: 'Independent Time Conductor Settings' }).click();
-    await page.getByRole('textbox', { name: 'Start date' }).fill('');
+
     await page.getByRole('textbox', { name: 'Start date' }).fill('2021-12-30');
     await page.keyboard.press('Tab');
-    await page.getByRole('textbox', { name: 'Start time' }).fill('');
-    await page.getByRole('textbox', { name: 'Start time' }).type('01:01:00');
+    await page.getByRole('textbox', { name: 'Start time' }).fill('01:01:00');
     await page.keyboard.press('Tab');
-    await page.getByRole('textbox', { name: 'End date' }).fill('');
-    await page.getByRole('textbox', { name: 'End date' }).type('2021-12-30');
+    await page.getByRole('textbox', { name: 'End date' }).fill('2021-12-30');
     await page.keyboard.press('Tab');
-    await page.getByRole('textbox', { name: 'End time' }).fill('');
-    await page.getByRole('textbox', { name: 'End time' }).type('01:11:00');
+    await page.getByRole('textbox', { name: 'End time' }).fill('01:11:00');
     await page.keyboard.press('Tab');
     await page.keyboard.press('Enter');
-    // expect(await page.getByRole('button', { name: 'Submit time bounds' }).isEnabled()).toBe(true);
-    // await page.getByRole('button', { name: 'Submit time bounds' }).click();
 
     // check image date
-    await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
+    await expect(page.getByText('2021-12-30 01:01:00.000Z').first()).toBeVisible();
 
     // flip it off
     await page.getByRole('switch', { name: 'Disable Independent Time Conductor' }).click();
@@ -106,9 +106,12 @@ test.describe('Example Imagery Object', () => {
 
     // Test independent fixed time with global realtime
     await setRealTimeMode(page);
+    await expect(
+      page.getByRole('switch', { name: 'Enable Independent Time Conductor' })
+    ).toBeEnabled();
     await page.getByRole('switch', { name: 'Enable Independent Time Conductor' }).click();
     // check image date to be in the past
-    await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
+    await expect(page.getByText('2021-12-30 01:01:00.000Z').first()).toBeVisible();
     // flip it off
     await page.getByRole('switch', { name: 'Disable Independent Time Conductor' }).click();
     // timestamp shouldn't be in the past anymore
@@ -211,7 +214,7 @@ test.describe('Example Imagery Object', () => {
     await page.mouse.up();
     await Promise.all(tagHotkey.map((x) => page.keyboard.up(x)));
 
-    //Wait for canvas to stablize.
+    //Wait for canvas to stabilize.
     await canvas.hover({ trial: true });
 
     // add some tags
@@ -391,7 +394,7 @@ test.describe('Example Imagery in Display Layout', () => {
   /**
    * Toggle layer visibility checkbox by clicking on checkbox label
    * - should toggle checkbox and layer visibility for that image view
-   * - should NOT toggle checkbox and layer visibity for the first image view in display
+   * - should NOT toggle checkbox and layer visibility for the first image view in display
    */
   test('Toggle layer visibility by clicking on label', async ({ page }) => {
     test.info().annotations.push({

e2e/tests/functional/plugins/importAndExportAsJSON/exportAsJson.e2e.spec.js

@@ -48,12 +48,12 @@ test.describe('ExportAsJSON', () => {
   test.fixme('Verify that a nested Object can be exported as JSON', async ({ page }) => {
     // Create 2 objects with hierarchy
     // Export as JSON
-    // Verify Hiearchy
+    // Verify Hierarchy
   });
   test.fixme(
     'Verify that the ExportAsJSON dropdown does not appear for the item X',
     async ({ page }) => {
-      // Other than non-persistible objects
+      // Other than non-persistable objects
     }
   );
 });

e2e/tests/functional/plugins/importAndExportAsJSON/importAsJson.e2e.spec.js

@@ -48,7 +48,7 @@ test.describe('ExportAsJSON', () => {
   test.fixme(
     'Verify that the ImportAsJSON dropdown does not appear for the item X',
     async ({ page }) => {
-      // Other than non-persistible objects
+      // Other than non-persistable objects
     }
   );
 });

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

@@ -39,7 +39,7 @@ test.describe('Notebook CRUD Operations', () => {
   test.fixme('Can update a Notebook Object', async ({ page }) => {});
   test.fixme('Can view a perviously created Notebook Object', async ({ page }) => {});
   test.fixme('Can Delete a Notebook Object', async ({ page }) => {
-    // Other than non-persistible objects
+    // Other than non-persistable objects
   });
 });
 

e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js

@@ -35,7 +35,7 @@ test.describe('Snapshot Menu tests', () => {
       // There should be no default notebook
       // Clear default notebook if exists using `localStorage.setItem('notebook-storage', null);`
       // refresh page
-      // Click on 'Notebook Snaphot Menu'
+      // Click on 'Notebook Snapshot Menu'
       // 'save to Notebook Snapshots' should be only option there
     }
   );
@@ -62,7 +62,7 @@ test.describe('Snapshot Menu tests', () => {
   });
   test.fixme('Snapshots adjust time conductor', async ({ page }) => {
     // Create Telemetry object
-    // Set Telemetry object's timeconductor to Fixed time with Start and Endtimes are recorded
+    // Set Telemetry object's timeconductor to Fixed time with Start and End times are recorded
     // Embed Telemetry object into notebook
     // Set Time Conductor to Local clock
     // Click into embedded telemetry object and verify object appears with same fixed time from record

e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js

@@ -19,18 +19,18 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* global __dirname */
+
 const { test, expect, streamToString } = require('../../../../pluginFixtures');
+const { openObjectTreeContextMenu } = require('../../../../appActions');
 const {
-  openObjectTreeContextMenu,
-  createDomainObjectWithDefaults
-} = require('../../../../appActions');
-const path = require('path');
-const nbUtils = require('../../../../helper/notebookUtils');
+  lockPage,
+  dragAndDropEmbed,
+  enterTextEntry,
+  startAndAddRestrictedNotebookObject
+} = require('../../../../helper/notebookUtils');
 
 const TEST_TEXT = 'Testing text for entries.';
 const TEST_TEXT_NAME = 'Test Page';
-const CUSTOM_NAME = 'CUSTOM_NAME';
 
 test.describe('Restricted Notebook', () => {
   let notebook;
@@ -68,7 +68,7 @@ test.describe('Restricted Notebook', () => {
   });
 
   test('Can be locked if at least one page has one entry @addInit', async ({ page }) => {
-    await nbUtils.enterTextEntry(page, TEST_TEXT);
+    await enterTextEntry(page, TEST_TEXT);
 
     const commitButton = page.locator('button:has-text("Commit Entries")');
     expect(await commitButton.count()).toEqual(1);
@@ -79,7 +79,7 @@ test.describe('Restricted Notebook with at least one entry and with the page loc
   let notebook;
   test.beforeEach(async ({ page }) => {
     notebook = await startAndAddRestrictedNotebookObject(page);
-    await nbUtils.enterTextEntry(page, TEST_TEXT);
+    await enterTextEntry(page, TEST_TEXT);
     await lockPage(page);
 
     // open sidebar
@@ -125,7 +125,7 @@ test.describe('Restricted Notebook with at least one entry and with the page loc
     expect.soft(newPageCount).toEqual(1);
 
     // enter test text
-    await nbUtils.enterTextEntry(page, TEST_TEXT);
+    await enterTextEntry(page, TEST_TEXT);
 
     // expect new page to be lockable
     const commitButton = page.getByRole('button', { name: ' Commit Entries' });
@@ -136,7 +136,7 @@ test.describe('Restricted Notebook with at least one entry and with the page loc
     // Delete the page
     await page.getByRole('menuitem', { name: 'Delete Page' }).click();
     // Click OK button
-    await page.getByRole('button', { name: 'Ok' }).click();
+    await page.getByRole('button', { name: 'Ok', exact: true }).click();
 
     // deleted page, should no longer exist
     const deletedPageElement = page.getByText(TEST_TEXT_NAME);
@@ -147,12 +147,12 @@ test.describe('Restricted Notebook with at least one entry and with the page loc
 test.describe('Restricted Notebook with a page locked and with an embed @addInit', () => {
   test.beforeEach(async ({ page }) => {
     const notebook = await startAndAddRestrictedNotebookObject(page);
-    await nbUtils.dragAndDropEmbed(page, notebook);
+    await dragAndDropEmbed(page, notebook);
   });
 
   test('Allows embeds to be deleted if page unlocked @addInit', async ({ page }) => {
-    // Click .c-ne__embed__name .c-popup-menu-button
-    await page.locator('.c-ne__embed__name .c-icon-button').click(); // embed popup menu
+    // Click embed popup menu
+    await page.locator('.c-ne__embed__name .c-icon-button').click();
 
     const embedMenu = page.locator('body >> .c-menu');
     await expect(embedMenu).toContainText('Remove This Embed');
@@ -160,8 +160,8 @@ test.describe('Restricted Notebook with a page locked and with an embed @addInit
 
   test('Disallows embeds to be deleted if page locked @addInit', async ({ page }) => {
     await lockPage(page);
-    // Click .c-ne__embed__name .c-popup-menu-button
-    await page.locator('.c-ne__embed__name .c-icon-button').click(); // embed popup menu
+    // Click embed popup menu
+    await page.locator('.c-ne__embed__name .c-icon-button').click();
 
     const embedMenu = page.locator('body >> .c-menu');
     await expect(embedMenu).not.toContainText('Remove This Embed');
@@ -174,7 +174,7 @@ test.describe('can export restricted notebook as text', () => {
   });
 
   test('basic functionality ', async ({ page }) => {
-    await nbUtils.enterTextEntry(page, `Foo bar entry`);
+    await enterTextEntry(page, `Foo bar entry`);
     // Click on 3 Dot Menu
     await page.locator('button[title="More options"]').click();
     const downloadPromise = page.waitForEvent('download');
@@ -182,6 +182,8 @@ test.describe('can export restricted notebook as text', () => {
     await page.getByRole('menuitem', { name: /Export Notebook as Text/ }).click();
 
     await page.getByRole('button', { name: 'Save' }).click();
+
+    //Verify exported text as a stream of text instead of a file read from the filesystem
     const download = await downloadPromise;
     const readStream = await download.createReadStream();
     const exportedText = await streamToString(readStream);
@@ -193,26 +195,3 @@ test.describe('can export restricted notebook as text', () => {
   test.fixme('can export all notebook tags', async ({ page }) => {});
   test.fixme('can export all notebook snapshots', async ({ page }) => {});
 });
-
-/**
- * @param {import('@playwright/test').Page} page
- */
-async function startAndAddRestrictedNotebookObject(page) {
-  await page.addInitScript({
-    path: path.join(__dirname, '../../../../helper/', 'addInitRestrictedNotebook.js')
-  });
-  await page.goto('./', { waitUntil: 'domcontentloaded' });
-
-  return createDomainObjectWithDefaults(page, { type: CUSTOM_NAME });
-}
-
-/**
- * @param {import('@playwright/test').Page} page
- */
-async function lockPage(page) {
-  const commitButton = page.locator('button:has-text("Commit Entries")');
-  await commitButton.click();
-
-  //Wait until Lock Banner is visible
-  await page.locator('text=Lock Page').click();
-}

e2e/tests/functional/plugins/notebook/tags.e2e.spec.js

@@ -26,56 +26,11 @@ This test suite is dedicated to tests which verify notebook tag functionality.
 
 const { test, expect } = require('../../../../pluginFixtures');
 const { createDomainObjectWithDefaults, selectInspectorTab } = require('../../../../appActions');
-const nbUtils = require('../../../../helper/notebookUtils');
-
-/**
- * Creates a notebook object and adds an entry.
- * @param {import('@playwright/test').Page} - page to load
- * @param {number} [iterations = 1] - the number of entries to create
- */
-async function createNotebookAndEntry(page, iterations = 1) {
-  const notebook = createDomainObjectWithDefaults(page, { type: 'Notebook' });
-
-  for (let iteration = 0; iteration < iterations; iteration++) {
-    await nbUtils.enterTextEntry(page, `Entry ${iteration}`);
-  }
-
-  return notebook;
-}
-
-/**
- * Creates a notebook object, adds an entry, and adds a tag.
- * @param {import('@playwright/test').Page} page
- * @param {number} [iterations = 1] - the number of entries (and tags) to create
- */
-async function createNotebookEntryAndTags(page, iterations = 1) {
-  const notebook = await createNotebookAndEntry(page, iterations);
-  await selectInspectorTab(page, 'Annotations');
-
-  for (let iteration = 0; iteration < iterations; iteration++) {
-    // Hover and click "Add Tag" button
-    // Hover is needed here to "slow down" the actions while running in headless mode
-    await page.locator(`[aria-label="Notebook Entry"] >> nth = ${iteration}`).click();
-    await page.hover(`button:has-text("Add Tag")`);
-    await page.locator(`button:has-text("Add Tag")`).click();
-
-    // Click inside the tag search input
-    await page.locator('[placeholder="Type to select tag"]').click();
-    // Select the "Driving" tag
-    await page.locator('[aria-label="Autocomplete Options"] >> text=Driving').click();
-
-    // Hover and click "Add Tag" button
-    // Hover is needed here to "slow down" the actions while running in headless mode
-    await page.hover(`button:has-text("Add Tag")`);
-    await page.locator(`button:has-text("Add Tag")`).click();
-    // Click inside the tag search input
-    await page.locator('[placeholder="Type to select tag"]').click();
-    // Select the "Science" tag
-    await page.locator('[aria-label="Autocomplete Options"] >> text=Science').click();
-  }
-
-  return notebook;
-}
+const {
+  enterTextEntry,
+  createNotebookAndEntry,
+  createNotebookEntryAndTags
+} = require('../../../../helper/notebookUtils');
 
 test.describe('Tagging in Notebooks @addInit', () => {
   test.beforeEach(async ({ page }) => {
@@ -112,7 +67,7 @@ test.describe('Tagging in Notebooks @addInit', () => {
     await createDomainObjectWithDefaults(page, { type: 'Notebook' });
     await selectInspectorTab(page, 'Annotations');
 
-    await nbUtils.enterTextEntry(page, '');
+    await enterTextEntry(page, '');
     await page.hover(`button:has-text("Add Tag")`);
     await page.locator(`button:has-text("Add Tag")`).click();
 

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

@@ -157,6 +157,6 @@ test.describe('Operator Status', () => {
   });
 
   test.fixme('iterate through all possible response values', async ({ page }) => {
-    // test all possible respone values for the poll
+    // test all possible response values for the poll
   });
 });

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

@@ -24,7 +24,7 @@
 Testsuite for plot autoscale.
 */
 
-const { selectInspectorTab, setTimeConductorBounds } = require('../../../../appActions');
+const { selectInspectorTab, createDomainObjectWithDefaults } = require('../../../../appActions');
 const { test, expect } = require('../../../../pluginFixtures');
 test.use({
   viewport: {
@@ -34,17 +34,26 @@ test.use({
 });
 
 test.describe('Autoscale', () => {
-  test('User can set autoscale with a valid range @snapshot', async ({ page, openmctConfig }) => {
-    const { myItemsFolderName } = openmctConfig;
-
+  test('User can set autoscale with a valid range @snapshot', async ({ page }) => {
     //This is necessary due to the size of the test suite.
     test.slow();
 
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
-    await setTimeRange(page);
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      name: 'Test Overlay Plot',
+      type: 'Overlay Plot'
+    });
+    await createDomainObjectWithDefaults(page, {
+      name: 'Test Sine Wave Generator',
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
 
-    await createSinewaveOverlayPlot(page, myItemsFolderName);
+    // Switch to fixed time, start: 2022-03-28 22:00:00.000 UTC, end: 2022-03-28 22:00:30.000 UTC
+    await page.goto(
+      `${overlayPlot.url}?tc.mode=fixed&tc.startBound=1648591200000&tc.endBound=1648591230000&tc.timeSystem=utc&view=plot-overlay`
+    );
 
     await testYTicks(page, ['-1.00', '-0.50', '0.00', '0.50', '1.00']);
 
@@ -67,7 +76,7 @@ test.describe('Autoscale', () => {
     await page.locator('.c-message-banner__close-button').click();
     await page.waitForSelector('.c-message-banner__message', { state: 'detached' });
 
-    // Make sure that after turning off autoscale, the user entered range values are reflexted in the ticks.
+    // Make sure that after turning off autoscale, the user entered range values are reflected in the ticks.
     await testYTicks(page, [
       '-2.00',
       '-1.50',
@@ -109,7 +118,7 @@ test.describe('Autoscale', () => {
     // Ensure the drag worked.
     await testYTicks(page, ['-0.50', '0.00', '0.50', '1.00', '1.50', '2.00', '2.50', '3.00']);
 
-    //Wait for canvas to stablize.
+    //Wait for canvas to stabilize.
     await canvas.hover({ trial: true });
 
     expect
@@ -118,72 +127,6 @@ test.describe('Autoscale', () => {
   });
 });
 
-/**
- * @param {import('@playwright/test').Page} page
- * @param {string} start
- * @param {string} end
- */
-async function setTimeRange(
-  page,
-  start = '2022-03-29 22:00:00.000Z',
-  end = '2022-03-29 22:00:30.000Z'
-) {
-  // Set a specific time range for consistency, otherwise it will change
-  // on every test to a range based on the current time.
-
-  await setTimeConductorBounds(page, start, end);
-}
-
-/**
- * @param {import('@playwright/test').Page} page
- * @param {string} myItemsFolderName
- */
-async function createSinewaveOverlayPlot(page, myItemsFolderName) {
-  // click create button
-  await page.locator('button:has-text("Create")').click();
-
-  // add overlay plot with defaults
-  await page.locator('li[role="menuitem"]:has-text("Overlay Plot")').click();
-  await Promise.all([
-    page.waitForNavigation(),
-    page.locator('button:has-text("OK")').click(),
-    //Wait for Save Banner to appear1
-    page.waitForSelector('.c-message-banner__message')
-  ]);
-  //Wait until Save Banner is gone
-  await page.locator('.c-message-banner__close-button').click();
-  await page.waitForSelector('.c-message-banner__message', { state: 'detached' });
-
-  // save (exit edit mode)
-  await page
-    .locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button')
-    .nth(1)
-    .click();
-  await page.locator('text=Save and Finish Editing').click();
-
-  // click create button
-  await page.locator('button:has-text("Create")').click();
-
-  // add sine wave generator with defaults
-  await page.locator('li[role="menuitem"]:has-text("Sine Wave Generator")').click();
-  await Promise.all([
-    page.waitForNavigation(),
-    page.locator('button:has-text("OK")').click(),
-    //Wait for Save Banner to appear1
-    page.waitForSelector('.c-message-banner__message')
-  ]);
-  //Wait until Save Banner is gone
-  await page.locator('.c-message-banner__close-button').click();
-  await page.waitForSelector('.c-message-banner__message', { state: 'detached' });
-
-  // focus the overlay plot
-  await page.locator(`text=Open MCT ${myItemsFolderName} >> span`).nth(3).click();
-  await Promise.all([
-    page.waitForNavigation(),
-    page.locator('text=Unnamed Overlay Plot').first().click()
-  ]);
-}
-
 /**
  * @param {import('@playwright/test').Page} page
  */

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

@@ -29,10 +29,11 @@ const {
   createDomainObjectWithDefaults,
   setRealTimeMode,
   setFixedTimeMode,
-  waitForPlotsToRender
+  waitForPlotsToRender,
+  selectInspectorTab
 } = require('../../../../appActions');
 
-test.describe.fixme('Plot Tagging', () => {
+test.describe('Plot Tagging', () => {
   /**
    * Given a canvas and a set of points, tags the points on the canvas.
    * @param {import('@playwright/test').Page} page
@@ -41,7 +42,7 @@ test.describe.fixme('Plot Tagging', () => {
    * @param {Number} yEnd a telemetry item with a plot
    * @returns {Promise}
    */
-  async function createTags({ page, canvas, xEnd, yEnd }) {
+  async function createTags({ page, canvas, xEnd = 700, yEnd = 480 }) {
     await canvas.hover({ trial: true });
 
     //Alt+Shift Drag Start to select some points to tag
@@ -63,7 +64,7 @@ test.describe.fixme('Plot Tagging', () => {
     await page.keyboard.up('Alt');
     await page.keyboard.up('Shift');
 
-    //Wait for canvas to stablize.
+    //Wait for canvas to stabilize.
     await canvas.hover({ trial: true });
 
     // add some tags
@@ -90,15 +91,17 @@ test.describe.fixme('Plot Tagging', () => {
     await expect(page.getByText('No tags to display for this item')).toBeVisible();
 
     const canvas = page.locator('canvas').nth(1);
+    //Wait for canvas to stabilize.
+    await waitForPlotsToRender(page);
 
-    //Wait for canvas to stablize.
+    await expect(canvas).toBeInViewport();
     await canvas.hover({ trial: true });
 
     // click on the tagged plot point
     await canvas.click({
       position: {
-        x: 325,
-        y: 377
+        x: 100,
+        y: 100
       }
     });
 
@@ -146,7 +149,10 @@ test.describe.fixme('Plot Tagging', () => {
     // wait for plots to load
     await waitForPlotsToRender(page);
 
-    await page.getByText('Annotations').click();
+    await expect(page.getByRole('tab', { name: 'Annotations' })).not.toHaveClass(/is-current/);
+    await selectInspectorTab(page, 'Annotations');
+    await expect(page.getByRole('tab', { name: 'Annotations' })).toHaveClass(/is-current/);
+
     await expect(page.getByText('No tags to display for this item')).toBeVisible();
 
     const canvas = page.locator('canvas').nth(1);
@@ -167,12 +173,11 @@ test.describe.fixme('Plot Tagging', () => {
   });
 
   test('Tags work with Overlay Plots', async ({ page }) => {
+    test.slow();
     test.info().annotations.push({
       type: 'issue',
       description: 'https://github.com/nasa/openmct/issues/6822'
     });
-    //Test.slow decorator is currently broken. Needs to be fixed in https://github.com/nasa/openmct/issues/5374
-    test.slow();
 
     const overlayPlot = await createDomainObjectWithDefaults(page, {
       type: 'Overlay Plot'
@@ -181,13 +186,19 @@ test.describe.fixme('Plot Tagging', () => {
     const alphaSineWave = await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
       name: 'Alpha Sine Wave',
-      parent: overlayPlot.uuid
+      parent: overlayPlot.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.01'
+      }
     });
 
     await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
       name: 'Beta Sine Wave',
-      parent: overlayPlot.uuid
+      parent: overlayPlot.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.02'
+      }
     });
 
     await page.goto(overlayPlot.url);
@@ -200,9 +211,7 @@ test.describe.fixme('Plot Tagging', () => {
 
     await createTags({
       page,
-      canvas,
-      xEnd: 700,
-      yEnd: 480
+      canvas
     });
 
     await setFixedTimeMode(page);
@@ -232,15 +241,15 @@ test.describe.fixme('Plot Tagging', () => {
 
   test('Tags work with Plot View of telemetry items', async ({ page }) => {
     await createDomainObjectWithDefaults(page, {
-      type: 'Sine Wave Generator'
+      type: 'Sine Wave Generator',
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.01'
+      }
     });
-
     const canvas = page.locator('canvas').nth(1);
     await createTags({
       page,
-      canvas,
-      xEnd: 700,
-      yEnd: 480
+      canvas
     });
     await basicTagsTests(page);
   });
@@ -253,13 +262,19 @@ test.describe.fixme('Plot Tagging', () => {
     const alphaSineWave = await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
       name: 'Alpha Sine Wave',
-      parent: stackedPlot.uuid
+      parent: stackedPlot.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.01'
+      }
     });
 
     await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
       name: 'Beta Sine Wave',
-      parent: stackedPlot.uuid
+      parent: stackedPlot.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.02'
+      }
     });
 
     await page.goto(stackedPlot.url);

e2e/tests/functional/recentObjects.e2e.spec.js

@@ -59,59 +59,57 @@ test.describe('Recent Objects', () => {
     await page.mouse.move(0, 100);
     await page.mouse.up();
   });
-  test.fixme(
-    'Navigated objects show up in recents, object renames and deletions are reflected',
-    async ({ page }) => {
-      test.info().annotations.push({
-        type: 'issue',
-        description: 'https://github.com/nasa/openmct/issues/6818'
-      });
+  test('Navigated objects show up in recents, object renames and deletions are reflected', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6818'
+    });
 
-      // Verify that both created objects appear in the list and are in the correct order
-      await assertInitialRecentObjectsListState();
+    // Verify that both created objects appear in the list and are in the correct order
+    await assertInitialRecentObjectsListState();
 
-      // Navigate to the folder by clicking on the main object name in the recent objects list item
-      await page.getByRole('listitem', { name: folderA.name }).getByText(folderA.name).click();
-      await page.waitForURL(`**/${folderA.uuid}?*`);
-      expect(recentObjectsList.getByRole('listitem').nth(0).getByText(folderA.name)).toBeTruthy();
+    // Navigate to the folder by clicking on the main object name in the recent objects list item
+    await page.getByRole('listitem', { name: folderA.name }).getByText(folderA.name).click();
+    await page.waitForURL(`**/${folderA.uuid}?*`);
+    expect(recentObjectsList.getByRole('listitem').nth(0).getByText(folderA.name)).toBeTruthy();
 
-      // Rename
-      folderA.name = `${folderA.name}-NEW!`;
-      await page.locator('.l-browse-bar__object-name').fill('');
-      await page.locator('.l-browse-bar__object-name').fill(folderA.name);
-      await page.keyboard.press('Enter');
+    // Rename
+    folderA.name = `${folderA.name}-NEW!`;
+    await page.locator('.l-browse-bar__object-name').fill('');
+    await page.locator('.l-browse-bar__object-name').fill(folderA.name);
+    await page.keyboard.press('Enter');
 
-      // Verify rename has been applied in recent objects list item and objects paths
-      expect(
-        await page
-          .getByRole('navigation', {
-            name: clock.name
-          })
-          .locator('a')
-          .filter({
-            hasText: folderA.name
-          })
-          .count()
-      ).toBeGreaterThan(0);
-      expect(recentObjectsList.getByRole('listitem', { name: folderA.name })).toBeTruthy();
-
-      // Delete
-      await page.click('button[title="Show selected item in tree"]');
-      // Delete the folder via the left tree pane treeitem context menu
+    // Verify rename has been applied in recent objects list item and objects paths
+    expect(
       await page
-        .getByRole('treeitem', { name: new RegExp(folderA.name) })
+        .getByRole('navigation', {
+          name: clock.name
+        })
         .locator('a')
-        .click({
-          button: 'right'
-        });
-      await page.getByRole('menuitem', { name: /Remove/ }).click();
-      await page.getByRole('button', { name: 'OK' }).click();
+        .filter({
+          hasText: folderA.name
+        })
+        .count()
+    ).toBeGreaterThan(0);
+    expect(recentObjectsList.getByRole('listitem', { name: folderA.name })).toBeTruthy();
 
-      // Verify that the folder and clock are no longer in the recent objects list
-      await expect(recentObjectsList.getByRole('listitem', { name: folderA.name })).toBeHidden();
-      await expect(recentObjectsList.getByRole('listitem', { name: clock.name })).toBeHidden();
-    }
-  );
+    await page.click('button[title="Show selected item in tree"]');
+    // Delete the folder via the left tree pane treeitem context menu
+    await page
+      .getByRole('treeitem', { name: new RegExp(folderA.name) })
+      .locator('a')
+      .click({
+        button: 'right'
+      });
+    await page.getByRole('menuitem', { name: /Remove/ }).click();
+    await page.getByRole('button', { name: 'OK' }).click();
+
+    // Verify that the folder and clock are no longer in the recent objects list
+    await expect(recentObjectsList.getByRole('listitem', { name: folderA.name })).toBeHidden();
+    await expect(recentObjectsList.getByRole('listitem', { name: clock.name })).toBeHidden();
+  });
 
   test('Clicking on an object in the path of a recent object navigates to the object', async ({
     page,

e2e/tests/functional/renaming.e2e.spec.js

@@ -0,0 +1,78 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests for renaming objects, and their global application effects.
+*/
+
+const { test, expect } = require('../../baseFixtures.js');
+const {
+  createDomainObjectWithDefaults,
+  renameObjectFromContextMenu
+} = require('../../appActions.js');
+
+test.describe('Renaming objects', () => {
+  test.beforeEach(async ({ page }) => {
+    // Go to baseURL
+    await page.goto('./', { waitUntil: 'networkidle' });
+  });
+
+  test('When renaming objects, the browse bar and various components all update', async ({
+    page
+  }) => {
+    const folder = await createDomainObjectWithDefaults(page, {
+      type: 'Folder'
+    });
+    // Create a new 'Clock' object with default settings
+    const clock = await createDomainObjectWithDefaults(page, {
+      type: 'Clock',
+      parent: folder.uuid
+    });
+
+    // Rename
+    clock.name = `${clock.name}-NEW!`;
+    await renameObjectFromContextMenu(page, clock.url, clock.name);
+    // check inspector for new name
+    const titleValue = await page
+      .getByLabel('Title inspector properties')
+      .getByLabel('inspector property value')
+      .textContent();
+    expect(titleValue).toBe(clock.name);
+    // check browse bar for new name
+    await expect(page.locator(`.l-browse-bar >> text=${clock.name}`)).toBeVisible();
+    // check tree item for new name
+    await expect(
+      page.getByRole('listitem', {
+        name: clock.name
+      })
+    ).toBeVisible();
+    // check recent objects for new name
+    await expect(
+      page.getByRole('navigation', {
+        name: clock.name
+      })
+    ).toBeVisible();
+    // check title for new name
+    const title = await page.title();
+    expect(title).toBe(clock.name);
+  });
+});

e2e/tests/functional/tree.e2e.spec.js

@@ -23,7 +23,7 @@
 const { test, expect } = require('../../pluginFixtures.js');
 const {
   createDomainObjectWithDefaults,
-  openObjectTreeContextMenu
+  renameObjectFromContextMenu
 } = require('../../appActions.js');
 
 test.describe('Main Tree', () => {
@@ -249,18 +249,3 @@ async function expandTreePaneItemByName(page, name) {
   });
   await treeItem.locator('.c-disclosure-triangle').click();
 }
-
-/**
- * @param {import('@playwright/test').Page} page
- * @param {string} myItemsFolderName
- * @param {string} url
- * @param {string} newName
- */
-async function renameObjectFromContextMenu(page, url, newName) {
-  await openObjectTreeContextMenu(page, url);
-  await page.click('li:text("Edit Properties")');
-  const nameInput = page.locator('form[name="mctForm"] .first input[type="text"]');
-  await nameInput.fill('');
-  await nameInput.fill(newName);
-  await page.click('[aria-label="Save"]');
-}

e2e/tests/performance/tagging.perf.spec.js

@@ -0,0 +1,273 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/*
+Tests to verify plot tagging performance.
+*/
+
+const { test, expect } = require('../../pluginFixtures');
+const {
+  createDomainObjectWithDefaults,
+  setRealTimeMode,
+  setFixedTimeMode,
+  waitForPlotsToRender
+} = require('../../appActions');
+
+test.describe.fixme('Plot Tagging Performance', () => {
+  /**
+   * Given a canvas and a set of points, tags the points on the canvas.
+   * @param {import('@playwright/test').Page} page
+   * @param {HTMLCanvasElement} canvas a telemetry item with a plot
+   * @param {Number} xEnd a telemetry item with a plot
+   * @param {Number} yEnd a telemetry item with a plot
+   * @returns {Promise}
+   */
+  async function createTags({ page, canvas, xEnd = 700, yEnd = 480 }) {
+    await canvas.hover({ trial: true });
+
+    //Alt+Shift Drag Start to select some points to tag
+    await page.keyboard.down('Alt');
+    await page.keyboard.down('Shift');
+
+    await canvas.dragTo(canvas, {
+      sourcePosition: {
+        x: 1,
+        y: 1
+      },
+      targetPosition: {
+        x: xEnd,
+        y: yEnd
+      }
+    });
+
+    //Alt Drag End
+    await page.keyboard.up('Alt');
+    await page.keyboard.up('Shift');
+
+    //Wait for canvas to stabilize.
+    await canvas.hover({ trial: true });
+
+    // add some tags
+    await page.getByText('Annotations').click();
+    await page.getByRole('button', { name: /Add Tag/ }).click();
+    await page.getByPlaceholder('Type to select tag').click();
+    await page.getByText('Driving').click();
+
+    await page.getByRole('button', { name: /Add Tag/ }).click();
+    await page.getByPlaceholder('Type to select tag').click();
+    await page.getByText('Science').click();
+  }
+
+  /**
+   * Given a telemetry item (e.g., a Sine Wave Generator) with a plot, tests that the plot can be tagged.
+   * @param {import('@playwright/test').Page} page
+   * @param {import('../../../../appActions').CreatedObjectInfo} telemetryItem a telemetry item with a plot
+   * @returns {Promise}
+   */
+  async function testTelemetryItem(page, telemetryItem) {
+    // Check that telemetry item also received the tag
+    await page.goto(telemetryItem.url);
+
+    await expect(page.getByText('No tags to display for this item')).toBeVisible();
+
+    const canvas = page.locator('canvas').nth(1);
+
+    //Wait for canvas to stabilize.
+    await canvas.hover({ trial: true });
+
+    // click on the tagged plot point
+    await canvas.click({
+      position: {
+        x: 100,
+        y: 100
+      }
+    });
+
+    await expect(page.getByText('Science')).toBeVisible();
+    await expect(page.getByText('Driving')).toBeHidden();
+  }
+
+  /**
+   * Given a page, tests that tags are searchable, deletable, and persist across reloads.
+   * @param {import('@playwright/test').Page} page
+   * @returns {Promise}
+   */
+  async function basicTagsTests(page) {
+    // Search for Driving
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+
+    // Clicking elsewhere should cause annotation selection to be cleared
+    await expect(page.getByText('No tags to display for this item')).toBeVisible();
+
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('driv');
+    // click on the search result
+    await page
+      .getByRole('searchbox', { name: 'OpenMCT Search' })
+      .getByText(/Sine Wave/)
+      .first()
+      .click();
+
+    // Delete Driving
+    await page.hover('[aria-label="Tag"]:has-text("Driving")');
+    await page.locator('[aria-label="Remove tag Driving"]').click();
+
+    // Search for Science
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('sc');
+    await expect(page.locator('[aria-label="Search Result"]').nth(0)).toContainText('Science');
+    await expect(page.locator('[aria-label="Search Result"]').nth(0)).not.toContainText('Drilling');
+
+    // Search for Driving
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('driv');
+    await expect(page.getByText('No results found')).toBeVisible();
+
+    //Reload Page
+    await page.reload({ waitUntil: 'domcontentloaded' });
+    // wait for plots to load
+    await waitForPlotsToRender(page);
+
+    await page.getByText('Annotations').click();
+    await expect(page.getByText('No tags to display for this item')).toBeVisible();
+
+    const canvas = page.locator('canvas').nth(1);
+    // click on the tagged plot point
+    await canvas.click({
+      position: {
+        x: 100,
+        y: 100
+      }
+    });
+
+    await expect(page.getByText('Science')).toBeVisible();
+    await expect(page.getByText('Driving')).toBeHidden();
+  }
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Tags work with Overlay Plots', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6822'
+    });
+    //Test.slow decorator is currently broken. Needs to be fixed in https://github.com/nasa/openmct/issues/5374
+    test.slow();
+
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot'
+    });
+
+    const alphaSineWave = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Alpha Sine Wave',
+      parent: overlayPlot.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Beta Sine Wave',
+      parent: overlayPlot.uuid
+    });
+
+    await page.goto(overlayPlot.url);
+
+    let canvas = page.locator('canvas').nth(1);
+
+    // Switch to real-time mode
+    // Adding tags should pause the plot
+    await setRealTimeMode(page);
+
+    await createTags({
+      page,
+      canvas
+    });
+
+    await setFixedTimeMode(page);
+
+    await basicTagsTests(page);
+    await testTelemetryItem(page, alphaSineWave);
+
+    // set to real time mode
+    await setRealTimeMode(page);
+
+    // Search for Science
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('sc');
+    // click on the search result
+    await page
+      .getByRole('searchbox', { name: 'OpenMCT Search' })
+      .getByText('Alpha Sine Wave')
+      .first()
+      .click();
+    // wait for plots to load
+    await expect(page.locator('.js-series-data-loaded')).toBeVisible();
+    // expect plot to be paused
+    await expect(page.locator('[title="Resume displaying real-time data"]')).toBeVisible();
+
+    await setFixedTimeMode(page);
+  });
+
+  test('Tags work with Plot View of telemetry items', async ({ page }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator'
+    });
+    const canvas = page.locator('canvas').nth(1);
+    await createTags({
+      page,
+      canvas
+    });
+    await basicTagsTests(page);
+  });
+
+  test('Tags work with Stacked Plots', async ({ page }) => {
+    const stackedPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot'
+    });
+
+    const alphaSineWave = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Alpha Sine Wave',
+      parent: stackedPlot.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Beta Sine Wave',
+      parent: stackedPlot.uuid
+    });
+
+    await page.goto(stackedPlot.url);
+
+    const canvas = page.locator('canvas').nth(1);
+
+    await createTags({
+      page,
+      canvas,
+      xEnd: 700,
+      yEnd: 215
+    });
+    await basicTagsTests(page);
+    await testTelemetryItem(page, alphaSineWave);
+  });
+});

e2e/tests/visual/addInit.visual.spec.js

@@ -1,63 +0,0 @@
-/* eslint-disable no-undef */
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/* global __dirname */
-/*
-Collection of Visual Tests set to run with modified init scripts to inject plugins not otherwise available in the default contexts.
-
-These should only use functional expect statements to verify assumptions about the state
-in a test and not for functional verification of correctness. Visual tests are not supposed
-to "fail" on assertions. Instead, they should be used to detect changes between builds or branches.
-
-Note: Larger testsuite sizes are OK due to the setup time associated with these tests.
-*/
-
-// eslint-disable-next-line no-unused-vars
-const { test, expect } = require('../../pluginFixtures');
-const { createDomainObjectWithDefaults } = require('../../appActions');
-const percySnapshot = require('@percy/playwright');
-const path = require('path');
-
-const CUSTOM_NAME = 'CUSTOM_NAME';
-
-test.describe('Visual - addInit', () => {
-  test.use({
-    clockOptions: {
-      now: 0, //Set browser clock to UNIX Epoch
-      shouldAdvanceTime: false //Don't advance the clock
-    }
-  });
-
-  test('Restricted Notebook is visually correct @addInit @unstable', async ({ page, theme }) => {
-    await page.addInitScript({
-      path: path.join(__dirname, '../../helper', './addInitRestrictedNotebook.js')
-    });
-    //Go to baseURL
-    await page.goto('./#/browse/mine', { waitUntil: 'networkidle' });
-    await page.getByTitle('Collapse Browse Pane').click();
-
-    await createDomainObjectWithDefaults(page, { type: CUSTOM_NAME });
-
-    // Take a snapshot of the newly created CUSTOM_NAME notebook
-    await percySnapshot(page, `Restricted Notebook with CUSTOM_NAME (theme: '${theme}')`);
-  });
-});

e2e/tests/visual/components/about.visual.spec.js

@@ -0,0 +1,52 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/*
+Tests the branding associated with the default deployment. At least the about modal for now
+*/
+
+const { test, expect } = require('../../../pluginFixtures');
+const percySnapshot = require('@percy/playwright');
+
+test.describe('Visual - Branding', () => {
+  test.beforeEach(async ({ page }) => {
+    //Go to baseURL and Hide Tree
+    await page.goto('./#/browse/mine?hideTree=true', { waitUntil: 'networkidle' });
+  });
+
+  test('Visual - About Modal', async ({ page, theme }) => {
+    // Click About button
+    await page.click('.l-shell__app-logo');
+
+    // Modify the Build information in 'about' to be consistent run-over-run
+    const versionInformationLocator = page.locator('ul.t-info.l-info.s-info').first();
+    await expect(versionInformationLocator).toBeEnabled();
+    await versionInformationLocator.evaluate(
+      (node) =>
+        (node.innerHTML =
+          '<li>Version: visual-snapshot</li> <li>Build Date: Mon Nov 15 2021 08:07:51 GMT-0800 (Pacific Standard Time)</li> <li>Revision: 93049cdbc6c047697ca204893db9603b864b8c9f</li> <li>Branch: master</li>')
+    );
+
+    // Take a snapshot of the About modal
+    await percySnapshot(page, `About (theme: '${theme}')`);
+  });
+});

e2e/tests/visual/components/tree.visual.spec.js

@@ -21,7 +21,10 @@
  *****************************************************************************/
 
 const { test } = require('../../../pluginFixtures.js');
-const { createDomainObjectWithDefaults } = require('../../../appActions.js');
+const {
+  expandTreePaneItemByName,
+  createDomainObjectWithDefaults
+} = require('../../../appActions.js');
 
 const percySnapshot = require('@percy/playwright');
 
@@ -88,14 +91,3 @@ test.describe('Visual - Tree Pane', () => {
     });
   });
 });
-
-/**
- * @param {import('@playwright/test').Page} page
- * @param {string} name
- */
-async function expandTreePaneItemByName(page, name) {
-  const treePane = page.getByTestId('tree-pane');
-  const treeItem = treePane.locator(`role=treeitem[expanded=false][name=/${name}/]`);
-  const expandTriangle = treeItem.locator('.c-disclosure-triangle');
-  await expandTriangle.click();
-}

e2e/tests/visual/controlledClock.visual.spec.js

@@ -21,20 +21,21 @@
  *****************************************************************************/
 
 /*
-Collection of Visual Tests set to run in a default context. The tests within this suite
-are only meant to run against openmct started by `npm start` within the
-`./e2e/playwright-visual.config.js` file.
-
+Collection of Visual Tests set to run with browser clock manipulate made possible with the
+clockOptions plugin fixture.
 */
 
 const { test, expect } = require('../../pluginFixtures');
 const percySnapshot = require('@percy/playwright');
 
-test.describe('Visual - Controlled Clock @localStorage', () => {
+test.describe('Visual - Controlled Clock', () => {
+  test.beforeEach(async ({ page }) => {
+    //Go to baseURL and Hide Tree
+    await page.goto('./#/browse/mine?hideTree=true', { waitUntil: 'networkidle' });
+  });
   test.use({
-    storageState: './e2e/test-data/VisualTestData_storage.json',
+    storageState: './e2e/test-data/overlay_plot_with_delay_storage.json',
     clockOptions: {
-      now: 0, //Set browser clock to UNIX Epoch
       shouldAdvanceTime: false //Don't advance the clock
     }
   });
@@ -43,10 +44,14 @@ test.describe('Visual - Controlled Clock @localStorage', () => {
     // Go to baseURL
     await page.goto('./#/browse/mine', { waitUntil: 'networkidle' });
     await page.getByTitle('Collapse Browse Pane').click();
-
-    await page.locator('a:has-text("Unnamed Overlay Plot Overlay Plot")').click();
+    await page
+      .locator('a')
+      .filter({ hasText: 'Overlay Plot with Telemetry Object Overlay Plot' })
+      .click();
     //Ensure that we're on the Unnamed Overlay Plot object
-    await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Overlay Plot');
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(
+      'Overlay Plot with Telemetry Object'
+    );
 
     //Wait for canvas to be rendered and stop animating
     await page.locator('canvas >> nth=1').hover({ trial: true });

e2e/tests/visual/default.visual.spec.js

@@ -1,173 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-/*
-Collection of Visual Tests set to run in a default context. The tests within this suite
-are only meant to run against openmct started by `npm start` within the
-`./e2e/playwright-visual.config.js` file.
-
-These should only use functional expect statements to verify assumptions about the state
-in a test and not for functional verification of correctness. Visual tests are not supposed
-to "fail" on assertions. Instead, they should be used to detect changes between builds or branches.
-
-Note: Larger testsuite sizes are OK due to the setup time associated with these tests.
-*/
-
-const { test, expect } = require('../../pluginFixtures');
-const percySnapshot = require('@percy/playwright');
-const { createDomainObjectWithDefaults } = require('../../appActions');
-
-test.describe('Visual - Default', () => {
-  test.beforeEach(async ({ page }) => {
-    //Go to baseURL and Hide Tree
-    await page.goto('./#/browse/mine', { waitUntil: 'networkidle' });
-    await page.getByTitle('Collapse Browse Pane').click();
-  });
-  test.use({
-    clockOptions: {
-      now: 0, //Set browser clock to UNIX Epoch
-      shouldAdvanceTime: false //Don't advance the clock
-    }
-  });
-
-  test('Visual - Root and About', async ({ page, theme }) => {
-    // Verify that Create button is actionable
-    await expect(page.locator('button:has-text("Create")')).toBeEnabled();
-
-    // Take a snapshot of the Dashboard
-    await percySnapshot(page, `Root (theme: '${theme}')`);
-
-    // Click About button
-    await page.click('.l-shell__app-logo');
-
-    // Modify the Build information in 'about' to be consistent run-over-run
-    const versionInformationLocator = page.locator('ul.t-info.l-info.s-info').first();
-    await expect(versionInformationLocator).toBeEnabled();
-    await versionInformationLocator.evaluate(
-      (node) =>
-        (node.innerHTML =
-          '<li>Version: visual-snapshot</li> <li>Build Date: Mon Nov 15 2021 08:07:51 GMT-0800 (Pacific Standard Time)</li> <li>Revision: 93049cdbc6c047697ca204893db9603b864b8c9f</li> <li>Branch: master</li>')
-    );
-
-    // Take a snapshot of the About modal
-    await percySnapshot(page, `About (theme: '${theme}')`);
-  });
-
-  test('Visual - Default Condition Set @unstable', async ({ page, theme }) => {
-    await createDomainObjectWithDefaults(page, { type: 'Condition Set' });
-
-    // Take a snapshot of the newly created Condition Set object
-    await percySnapshot(page, `Default Condition Set (theme: '${theme}')`);
-  });
-
-  test('Visual - Default Condition Widget @unstable', async ({ page, theme }) => {
-    test.info().annotations.push({
-      type: 'issue',
-      description: 'https://github.com/nasa/openmct/issues/5349'
-    });
-
-    await createDomainObjectWithDefaults(page, { type: 'Condition Widget' });
-
-    // Take a snapshot of the newly created Condition Widget object
-    await percySnapshot(page, `Default Condition Widget (theme: '${theme}')`);
-  });
-
-  test('Visual - Time Conductor start time is less than end time', async ({ page, theme }) => {
-    const year = new Date().getFullYear();
-
-    let startDate = 'xxxx-01-01 01:00:00.000Z';
-    startDate = year + startDate.substring(4);
-
-    let endDate = 'xxxx-01-01 02:00:00.000Z';
-    endDate = year + endDate.substring(4);
-
-    await page.getByRole('button', { name: 'Time Conductor Settings' }).click();
-
-    await page.locator('input[type="text"]').nth(1).fill(endDate.toString());
-    await page.locator('input[type="text"]').first().fill(startDate.toString());
-
-    //  verify no error msg
-    await percySnapshot(page, `Default Time conductor (theme: '${theme}')`);
-
-    startDate = year + 1 + startDate.substring(4);
-    await page.locator('input[type="text"]').first().fill(startDate.toString());
-    await page.locator('input[type="text"]').nth(1).click();
-
-    //  verify error msg for start time (unable to capture snapshot of popup)
-    await percySnapshot(page, `Start time error (theme: '${theme}')`);
-
-    startDate = year - 1 + startDate.substring(4);
-    await page.locator('input[type="text"]').first().fill(startDate.toString());
-
-    endDate = year - 2 + endDate.substring(4);
-    await page.locator('input[type="text"]').nth(1).fill(endDate.toString());
-
-    await page.locator('input[type="text"]').first().click();
-
-    //  verify error msg for end time (unable to capture snapshot of popup)
-    await percySnapshot(page, `End time error (theme: '${theme}')`);
-  });
-
-  test('Visual - Sine Wave Generator Form', async ({ page, theme }) => {
-    //Click the Create button
-    await page.click('button:has-text("Create")');
-
-    // Click text=Sine Wave Generator
-    await page.click('text=Sine Wave Generator');
-
-    await percySnapshot(page, `Default Sine Wave Generator Form (theme: '${theme}')`);
-
-    await page.locator('.field.control.l-input-sm input').first().click();
-    await page.locator('.field.control.l-input-sm input').first().fill('');
-
-    // Validate red x mark
-    await percySnapshot(page, `removed amplitude property value (theme: '${theme}')`);
-  });
-
-  test('Visual - Save Successful Banner @unstable', async ({ page, theme }) => {
-    await createDomainObjectWithDefaults(page, { type: 'Timer' });
-
-    await page.locator('.c-message-banner__message').hover({ trial: true });
-    await percySnapshot(page, `Banner message shown (theme: '${theme}')`);
-
-    //Wait until Save Banner is gone
-    await page.locator('.c-message-banner__close-button').click();
-    await page.waitForSelector('.c-message-banner__message', { state: 'detached' });
-    await percySnapshot(page, `Banner message gone (theme: '${theme}')`);
-  });
-
-  test('Visual - Display Layout Icon is correct', async ({ page, theme }) => {
-    //Click the Create button
-    await page.click('button:has-text("Create")');
-
-    //Hover on Display Layout option.
-    await page.locator('text=Display Layout').hover();
-    await percySnapshot(page, `Display Layout Create Menu (theme: '${theme}')`);
-  });
-
-  test('Visual - Default Gauge is correct @unstable', async ({ page, theme }) => {
-    await createDomainObjectWithDefaults(page, { type: 'Gauge' });
-
-    // Take a snapshot of the newly created Gauge object
-    await percySnapshot(page, `Default Gauge (theme: '${theme}')`);
-  });
-});

e2e/tests/visual/defaultPlugins.visual.spec.js

@@ -0,0 +1,101 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/*
+Collection of Visual Tests set to run in a default context with default Plugins. The tests within this suite
+are only meant to run against openmct's app.js started by `npm run start` within the
+`./e2e/playwright-visual.config.js` file.
+*/
+
+const { test, expect } = require('../../pluginFixtures');
+const percySnapshot = require('@percy/playwright');
+const { createDomainObjectWithDefaults } = require('../../appActions');
+
+test.describe('Visual - Default', () => {
+  test.beforeEach(async ({ page }) => {
+    //Go to baseURL and Hide Tree
+    await page.goto('./#/browse/mine?hideTree=true', { waitUntil: 'networkidle' });
+  });
+
+  test('Visual - Default Dashboard', async ({ page, theme }) => {
+    // Verify that Create button is actionable
+    await expect(page.locator('button:has-text("Create")')).toBeEnabled();
+
+    // Take a snapshot of the Dashboard
+    await percySnapshot(page, `Default Dashboard (theme: '${theme}')`);
+  });
+
+  test('Visual - Default Condition Set', async ({ page, theme }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Condition Set',
+      name: 'Default Condition Set'
+    });
+
+    // Take a snapshot of the newly created Condition Set object
+    await percySnapshot(page, `Default Condition Set (theme: '${theme}')`);
+  });
+
+  test('Visual - Default Condition Widget', async ({ page, theme }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Condition Widget',
+      name: 'Default Condition Widget'
+    });
+
+    // Take a snapshot of the newly created Condition Widget object
+    await percySnapshot(page, `Default Condition Widget (theme: '${theme}')`);
+  });
+
+  test('Visual - Sine Wave Generator Form', async ({ page, theme }) => {
+    //Click the Create button
+    await page.click('button:has-text("Create")');
+
+    // Click text=Sine Wave Generator
+    await page.click('text=Sine Wave Generator');
+
+    await percySnapshot(page, `Default Sine Wave Generator Form (theme: '${theme}')`);
+
+    await page.locator('.field.control.l-input-sm input').first().click();
+    await page.locator('.field.control.l-input-sm input').first().fill('');
+
+    // Validate red x mark
+    await percySnapshot(page, `removed amplitude property value (theme: '${theme}')`);
+  });
+
+  test('Visual - Display Layout Icon is correct in Create Menu', async ({ page, theme }) => {
+    // Click the Create button
+    await page.click('button:has-text("Create")');
+
+    // Hover on Display Layout option.
+    await page.locator('text=Display Layout').hover();
+    await percySnapshot(page, `Display Layout Create Menu (theme: '${theme}')`);
+  });
+
+  test('Visual - Default Gauge', async ({ page, theme }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Gauge',
+      name: 'Default Gauge'
+    });
+
+    // Take a snapshot of the newly created Gauge object
+    await percySnapshot(page, `Default Gauge (theme: '${theme}')`);
+  });
+});

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

@@ -26,12 +26,12 @@ const percySnapshot = require('@percy/playwright');
 
 const utils = require('../../helper/faultUtils');
 
-test.describe('The Fault Management Plugin Visual Test', () => {
+test.describe('Fault Management Visual Tests', () => {
   test('icon test', async ({ page, theme }) => {
     await page.addInitScript({
       path: path.join(__dirname, '../../helper/', 'addInitFaultManagementPlugin.js')
     });
-    await page.goto('./', { waitUntil: 'networkidle' });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
 
     await percySnapshot(page, `Fault Management icon appears in tree (theme: '${theme}')`);
   });
@@ -46,7 +46,7 @@ test.describe('The Fault Management Plugin Visual Test', () => {
 
     await percySnapshot(
       page,
-      `Acknowledged faults, have a checkmark on the fault icon and appear in the acknowldeged view (theme: '${theme}')`
+      `Acknowledged faults, have a checkmark on the fault icon and appear in the acknowledged view (theme: '${theme}')`
     );
   });
 

e2e/tests/visual/notebook.visual.spec.js

@@ -22,14 +22,35 @@
 
 const { test } = require('../../pluginFixtures');
 const percySnapshot = require('@percy/playwright');
-const { expandTreePaneItemByName, createDomainObjectWithDefaults } = require('../../appActions');
+const {
+  selectInspectorTab,
+  expandTreePaneItemByName,
+  createDomainObjectWithDefaults
+} = require('../../appActions');
+const {
+  startAndAddRestrictedNotebookObject,
+  enterTextEntry
+} = require('../../helper/notebookUtils');
+
+test.describe('Visual - Restricted Notebook', () => {
+  test.beforeEach(async ({ page }) => {
+    await startAndAddRestrictedNotebookObject(page);
+  });
+
+  test('Restricted Notebook is visually correct @addInit', async ({ page, theme }) => {
+    // Take a snapshot of the newly created CUSTOM_NAME notebook
+    await percySnapshot(page, `Restricted Notebook with CUSTOM_NAME (theme: '${theme}')`);
+  });
+});
 
 test.describe('Visual - Notebook', () => {
+  test.beforeEach(async ({ page }) => {
+    //Go to baseURL and Hide Tree
+    await page.goto('./#/browse/mine?hideTree=true', { waitUntil: 'networkidle' });
+  });
   test('Accepts dropped objects as embeds @unstable', async ({ page, theme, openmctConfig }) => {
     const { myItemsFolderName } = openmctConfig;
-    await page.goto('./#/browse/mine', { waitUntil: 'networkidle' });
 
-    // Create Notebook
     const notebook = await createDomainObjectWithDefaults(page, {
       type: 'Notebook',
       name: 'Embed Test Notebook'
@@ -43,8 +64,36 @@ test.describe('Visual - Notebook', () => {
     await expandTreePaneItemByName(page, myItemsFolderName);
 
     await page.goto(notebook.url);
+
     await page.dragAndDrop('role=treeitem[name=/Dropped Overlay Plot/]', '.c-notebook__drag-area');
 
     await percySnapshot(page, `Notebook w/ dropped embed (theme: ${theme})`);
   });
+  test("Blur 'Add tag' on Notebook", async ({ page, theme }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Notebook',
+      name: 'Add Tag Test Notebook'
+    });
+    await enterTextEntry(page, 'Entry 0');
+
+    // Click on Annotations tab
+    await selectInspectorTab(page, 'Annotations');
+
+    // Take snapshot of the notebook with the Annotations tab opened
+    await percySnapshot(page, `Notebook Annotation (theme: '${theme}')`);
+
+    await page.locator('button:has-text("Add Tag")').click();
+
+    // Take snapshot of the notebook with the AutoComplete field visible
+    await percySnapshot(page, `Notebook Add Tag (theme: '${theme}')`);
+
+    // Click inside the AutoComplete field
+    await page.locator('[placeholder="Type to select tag"]').click();
+
+    // Click on the "Tags" header (simulating a click outside the autocomplete field)
+    await page.locator('div.c-inspect-properties__header:has-text("Tags")').click();
+
+    // Take snapshot of the notebook with the AutoComplete field hidden and with the "Add Tag" button visible
+    await percySnapshot(page, `Notebook Annotation de-select blur (theme: '${theme}')`);
+  });
 });

e2e/tests/visual/notification.visual.spec.js

@@ -39,7 +39,10 @@ test.describe("Visual - Check Notification Info Banner of 'Save successful'", ()
     theme
   }) => {
     // Create a clock domain object
-    await createDomainObjectWithDefaults(page, { type: 'Clock' });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Clock',
+      name: 'Default Clock'
+    });
     // Verify there is a button with aria-label="Review 1 Notification"
     expect(await page.locator('button[aria-label="Review 1 Notification"]').isVisible()).toBe(true);
     // Verify there is a button with aria-label="Clear all notifications"
@@ -52,12 +55,14 @@ test.describe("Visual - Check Notification Info Banner of 'Save successful'", ()
     expect(await page.locator('div[role="dialog"]').isVisible()).toBe(true);
     // Verify the div with role="dialog" contains text "Save successful"
     expect(await page.locator('div[role="dialog"]').innerText()).toContain('Save successful');
-    await percySnapshot(page, `Notification banner - ${theme}`);
+    await percySnapshot(page, `Notification banner shows Save successful (theme: '${theme}')`);
     // Verify there is a button with text "Dismiss"
     expect(await page.locator('button:has-text("Dismiss")').isVisible()).toBe(true);
+    await percySnapshot(page, `Notification banner shows Dismiss (theme: '${theme}')`);
     // Click on button with text "Dismiss"
     await page.locator('button:has-text("Dismiss")').click();
     // Verify there is no div with role="dialog"
     expect(await page.locator('div[role="dialog"]').isVisible()).toBe(false);
+    await percySnapshot(page, `Notification banner dismissed (theme: '${theme}')`);
   });
 });

e2e/tests/visual/search.visual.spec.js

@@ -30,60 +30,72 @@ const { createDomainObjectWithDefaults } = require('../../appActions');
 const percySnapshot = require('@percy/playwright');
 
 test.describe('Grand Search', () => {
+  let clock;
+  let displayLayout;
   test.beforeEach(async ({ page, theme }) => {
-    //Go to baseURL and Hide Tree
-    await page.goto('./#/browse/mine', { waitUntil: 'networkidle' });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
     await page.getByTitle('Collapse Browse Pane').click();
+
+    displayLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Visual Test Display Layout'
+    });
+
+    clock = await createDomainObjectWithDefaults(page, {
+      type: 'Clock',
+      name: 'Visual Test Clock',
+      parent: displayLayout.uuid
+    });
   });
-  test.use({
-    clockOptions: {
-      now: 0, //Set browser clock to UNIX Epoch
-      shouldAdvanceTime: false //Don't advance the clock
-    }
-  });
-  //This needs to be rewritten to use a non clock or non display layout object
-  test('Can search for objects, and subsequent search dropdown behaves properly @unstable', async ({
+
+  test('Can search for folder object, and subsequent search dropdown behaves properly', async ({
     page,
     theme
   }) => {
-    // await createDomainObjectWithDefaults(page, 'Display Layout');
-    // await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
-    // await page.locator('text=Save and Finish Editing').click();
-    const folder1 = 'Folder1';
-    await createDomainObjectWithDefaults(page, {
-      type: 'Folder',
-      name: folder1
-    });
+    const searchInput = page.getByRole('searchbox', { name: 'Search Input' });
+    const searchResults = page.getByRole('searchbox', { name: 'OpenMCT Search' });
+    // Navigate to display layout
+    await page.goto(displayLayout.url);
 
-    // Click [aria-label="OpenMCT Search"] input[type="search"]
-    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
-    // Fill [aria-label="OpenMCT Search"] input[type="search"]
-    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill(folder1);
-    await expect(page.locator('[aria-label="Search Result"]')).toContainText(folder1);
-    await percySnapshot(page, 'Searching for Folder Object');
+    // Search for the clock object
+    await searchInput.click();
+    await searchInput.fill(clock.name);
+    await expect(searchResults.getByText('Visual Test Clock')).toBeVisible();
+
+    //Searching for an object returns that object in the grandsearch
+    await percySnapshot(page, `Searching for Clock Object (theme: '${theme}')`);
+
+    // Enter Edit mode on the Display Layout
+    await page.getByRole('button', { name: 'Edit' }).click();
+
+    // Navigate to the clock object while in edit mode on the display layout
+    await searchInput.click();
+    await searchResults.getByText('Visual Test Clock').click();
 
-    await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').click();
-    await page.locator('[aria-label="Unnamed Clock clock result"] >> text=Unnamed Clock').click();
     await percySnapshot(
       page,
-      'Preview for clock should display when editing enabled and search item clicked'
+      `Preview for clock should display when editing enabled and search item clicked (theme: '${theme}')`
     );
 
-    await page.locator('[aria-label="Close"]').click();
-    await percySnapshot(page, 'Search should still be showing after preview closed');
+    // Close the preview
+    await page.getByRole('button', { name: 'Close' }).click();
+    await percySnapshot(
+      page,
+      `Search should still be showing after preview closed (theme: '${theme}')`
+    );
 
-    await page
-      .locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button')
-      .nth(1)
-      .click();
+    // Save and finish editing the Display Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
-    await page.locator('text=Save and Finish Editing').click();
+    // Search for the clock object
+    await searchInput.click();
+    await searchInput.fill(clock.name);
+    await expect(searchResults.getByText('Visual Test Clock')).toBeVisible();
 
-    await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').click();
+    // Navigate to the clock object while not in edit mode on the display layout
+    await searchResults.getByText('Visual Test Clock').click();
 
-    await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').fill('Cl');
-
-    await Promise.all([page.waitForNavigation(), page.locator('text=Unnamed Clock').click()]);
     await percySnapshot(
       page,
       `Clicking on search results should navigate to them if not editing (theme: '${theme}')`

example/eventGenerator/plugin.js

@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import EventTelmetryProvider from './EventTelemetryProvider';
+import EventTelemetryProvider from './EventTelemetryProvider';
 import EventMetadataProvider from './EventMetadataProvider';
 
 export default function EventGeneratorPlugin(options) {
@@ -36,7 +36,7 @@ export default function EventGeneratorPlugin(options) {
         };
       }
     });
-    openmct.telemetry.addProvider(new EventTelmetryProvider());
+    openmct.telemetry.addProvider(new EventTelemetryProvider());
     openmct.telemetry.addProvider(new EventMetadataProvider());
   };
 }

example/generator/WorkerInterface.js

@@ -88,10 +88,10 @@ define(['uuid'], function ({ v4: uuid }) {
   };
 
   WorkerInterface.prototype.subscribe = function (request, cb) {
-    const id = request.id;
+    const { id, loadDelay } = request;
     const messageId = this.dispatch('subscribe', request, (message) => {
       if (!this.staleTelemetryIds[id]) {
-        cb(message.data);
+        setTimeout(() => cb(message.data), Math.max(loadDelay, 0));
       }
     });
 

example/imagery/plugin.js

@@ -40,8 +40,8 @@ const DEFAULT_IMAGE_SAMPLES = [
   'https://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg',
   'https://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg'
 ];
-const DEFAULT_IMAGE_LOAD_DELAY_IN_MILISECONDS = 20000;
-const MIN_IMAGE_LOAD_DELAY_IN_MILISECONDS = 5000;
+const DEFAULT_IMAGE_LOAD_DELAY_IN_MILLISECONDS = 20000;
+const MIN_IMAGE_LOAD_DELAY_IN_MILLISECONDS = 5000;
 
 let openmctInstance;
 
@@ -58,7 +58,7 @@ export default function () {
       initialize: (object) => {
         object.configuration = {
           imageLocation: '',
-          imageLoadDelayInMilliSeconds: DEFAULT_IMAGE_LOAD_DELAY_IN_MILISECONDS,
+          imageLoadDelayInMilliSeconds: DEFAULT_IMAGE_LOAD_DELAY_IN_MILLISECONDS,
           imageSamples: [],
           layers: []
         };
@@ -188,20 +188,20 @@ function getImageLoadDelay(domainObject) {
     openmctInstance.objects.mutate(
       domainObject,
       'configuration.imageLoadDelayInMilliSeconds',
-      DEFAULT_IMAGE_LOAD_DELAY_IN_MILISECONDS
+      DEFAULT_IMAGE_LOAD_DELAY_IN_MILLISECONDS
     );
 
-    return DEFAULT_IMAGE_LOAD_DELAY_IN_MILISECONDS;
+    return DEFAULT_IMAGE_LOAD_DELAY_IN_MILLISECONDS;
   }
 
-  if (imageLoadDelay < MIN_IMAGE_LOAD_DELAY_IN_MILISECONDS) {
+  if (imageLoadDelay < MIN_IMAGE_LOAD_DELAY_IN_MILLISECONDS) {
     openmctInstance.objects.mutate(
       domainObject,
       'configuration.imageLoadDelayInMilliSeconds',
-      MIN_IMAGE_LOAD_DELAY_IN_MILISECONDS
+      MIN_IMAGE_LOAD_DELAY_IN_MILLISECONDS
     );
 
-    return MIN_IMAGE_LOAD_DELAY_IN_MILISECONDS;
+    return MIN_IMAGE_LOAD_DELAY_IN_MILLISECONDS;
   }
 
   return imageLoadDelay;

index.html

@@ -28,7 +28,7 @@
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no"
     />
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    <title></title>
+    <title>Open MCT</title>
     <script src="dist/openmct.js"></script>
     <link
       rel="icon"
@@ -51,7 +51,7 @@
       sizes="16x16"
       type="image/x-icon"
     />
-    <style type="text/css">
+    <style>
       @keyframes splash-spinner {
         0% {
           transform: translate(-50%, -50%) rotate(0deg);

karma.conf.js

@@ -45,7 +45,7 @@ module.exports = (config) => {
     basePath: '',
     frameworks: ['jasmine', 'webpack'],
     files: [
-      'indexTest.js',
+      'index-test.js',
       // included means: should the files be included in the browser using <script> tag?
       // We don't want them as a <script> because the shared worker source
       // needs loaded remotely by the shared worker process.
@@ -102,7 +102,7 @@ module.exports = (config) => {
       failFast: false
     },
     preprocessors: {
-      'indexTest.js': ['webpack', 'sourcemap']
+      'index-test.js': ['webpack', 'sourcemap']
     },
     webpack: webpackConfig,
     webpackMiddleware: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "3.0.0-SNAPSHOT",
+  "version": "3.1.0-next",
   "description": "The Open MCT core platform",
   "devDependencies": {
     "@babel/eslint-parser": "7.22.5",
@@ -8,7 +8,7 @@
     "@deploysentinel/playwright": "0.3.4",
     "@percy/cli": "1.26.0",
     "@percy/playwright": "1.0.4",
-    "@playwright/test": "1.32.3",
+    "@playwright/test": "1.36.2",
     "@types/eventemitter3": "1.2.0",
     "@types/jasmine": "4.3.4",
     "@types/lodash": "4.14.192",
@@ -19,6 +19,7 @@
     "codecov": "3.8.3",
     "comma-separated-values": "3.6.4",
     "copy-webpack-plugin": "11.0.0",
+    "cspell": "6.31.2",
     "css-loader": "6.8.1",
     "d3-axis": "3.0.0",
     "d3-scale": "3.3.0",
@@ -55,7 +56,6 @@
     "moment-timezone": "0.5.41",
     "nyc": "15.1.0",
     "painterro": "1.2.78",
-    "playwright-core": "1.32.3",
     "plotly.js-basic-dist": "2.20.0",
     "plotly.js-gl2d-dist": "2.20.0",
     "prettier": "2.8.7",
@@ -78,10 +78,11 @@
   },
   "scripts": {
     "clean": "rm -rf ./dist ./node_modules ./package-lock.json ./coverage ./html-test-results ./test-results ./.nyc_output ",
-    "clean-test-lint": "npm run clean; npm install; npm run test; npm run lint",
+    "clean-test-lint": "npm run clean; npm install; npm run test; npm run lint; npm run lint:spelling",
     "start": "npx webpack serve --config ./.webpack/webpack.dev.js",
     "start:coverage": "npx webpack serve --config ./.webpack/webpack.coverage.js",
-    "lint": "eslint example src e2e --ext .js,.vue openmct.js --max-warnings=0",
+    "lint": "eslint example src e2e --ext .js openmct.js --max-warnings=0 && eslint example src --ext .vue",
+    "lint:spelling": "cspell \"**/*.{js,md,vue}\" --show-context --gitignore",
     "lint:fix": "eslint example src e2e --ext .js,.vue openmct.js --fix",
     "build:prod": "webpack --config ./.webpack/webpack.prod.js",
     "build:dev": "webpack --config ./.webpack/webpack.dev.js",
@@ -92,11 +93,13 @@
     "test:debug": "KARMA_DEBUG=true karma start",
     "test:e2e": "npx playwright test",
     "test:e2e:couchdb": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @couchdb --workers=1",
-    "test:e2e:stable": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep-invert \"@unstable|@couchdb\"",
+    "test:e2e:stable": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep-invert \"@unstable|@couchdb|@generatedata\"",
     "test:e2e:unstable": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @unstable",
     "test:e2e:local": "npx playwright test --config=e2e/playwright-local.config.js --project=chrome",
+    "test:e2e:generatedata": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @generatedata",
     "test:e2e:updatesnapshots": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @snapshot --update-snapshots",
-    "test:e2e:visual": "percy exec --config ./e2e/.percy.yml -- npx playwright test --config=e2e/playwright-visual.config.js --grep-invert @unstable",
+    "test:e2e:visual:ci": "percy exec --config ./e2e/.percy.ci.yml --partial -- npx playwright test --config=e2e/playwright-visual.config.js --project=chrome --grep-invert @unstable",
+    "test:e2e:visual:full": "percy exec --config ./e2e/.percy.nightly.yml -- npx playwright test --config=e2e/playwright-visual.config.js --grep-invert @unstable",
     "test:e2e:full": "npx playwright test --config=e2e/playwright-ci.config.js --grep-invert @couchdb",
     "test:e2e:watch": "npx playwright test --ui --config=e2e/playwright-ci.config.js",
     "test:perf": "npx playwright test --config=e2e/playwright-performance.config.js",
@@ -108,6 +111,7 @@
     "cov:unit:publish": "codecov --disable=gcov -f ./coverage/unit/lcov.info -F unit",
     "prepare": "npm run build:prod && npx tsc"
   },
+  "homepage": "https://nasa.github.io/openmct",
   "repository": {
     "type": "git",
     "url": "https://github.com/nasa/openmct.git"
@@ -123,6 +127,12 @@
     "ios_saf >= 16",
     "Safari >= 16"
   ],
-  "author": "",
-  "license": "Apache-2.0"
+  "author": {
+    "name": "National Aeronautics and Space Administration",
+    "url": "https://www.nasa.gov"
+  },
+  "license": "Apache-2.0",
+  "keywords": [
+    "nasa"
+  ]
 }

src/api/annotation/AnnotationAPISpec.js

@@ -168,7 +168,7 @@ describe('The Annotation API', () => {
           targetDomainObjects: [mockDomainObject],
           targets: { fooTarget: {} }
         };
-        openmct.annotation.setNamespaceToSaveAnnotations('nameespaceThatDoesNotExist');
+        openmct.annotation.setNamespaceToSaveAnnotations('namespaceThatDoesNotExist');
         await openmct.annotation.create(annotationCreationArguments);
       } catch (error) {
         expect(error).toBeDefined();

src/api/forms/FormsAPI.js

@@ -39,7 +39,7 @@ export default class FormsAPI {
    *   This function accepts element, model and onChange function
    *   element - html element (place holder) to render a row view
    *   model - row data for rendering name, value etc for given row type
-   *   onChange - an onChange event callback funtion to keep track of any change in value
+   *   onChange - an onChange event callback function to keep track of any change in value
    * @property {function} destroy a callback function when a vue component gets destroyed
    */
 

src/api/forms/components/FormRow.vue

@@ -22,9 +22,9 @@
 
 <template>
   <div class="form-row c-form__row" :class="[{ first: first }, cssClass]" @onChange="onChange">
-    <div class="c-form-row__label" :title="row.description">
+    <label class="c-form-row__label" :title="row.description" :for="`form-${row.key}`">
       {{ row.name }}
-    </div>
+    </label>
     <div class="c-form-row__state-indicator" :class="reqClass"></div>
     <div v-if="row.control" ref="rowElement" class="c-form-row__controls"></div>
   </div>

src/api/forms/components/controls/TextField.vue

@@ -23,7 +23,14 @@
 <template>
   <span class="form-control shell">
     <span class="field control" :class="model.cssClass">
-      <input v-model="field" type="text" :size="model.size" @input="updateText()" />
+      <input
+        :id="`form-${model.key}`"
+        v-model="field"
+        :name="model.key"
+        type="text"
+        :size="model.size"
+        @input="updateText()"
+      />
     </span>
   </span>
 </template>

src/api/notifications/NotificationAPISpec.js

@@ -22,7 +22,7 @@
 
 import NotificationAPI from './NotificationAPI';
 
-describe('The Notifiation API', () => {
+describe('The Notification API', () => {
   let notificationAPIInstance;
   let defaultTimeout = 4000;
 
@@ -108,7 +108,7 @@ describe('The Notifiation API', () => {
     });
   });
 
-  describe('the error method notificiation', () => {
+  describe('the error method notification', () => {
     let message = 'Minimized error message';
 
     afterAll(() => {

src/api/objects/ObjectAPI.js

@@ -103,6 +103,10 @@ export default class ObjectAPI {
     this.errors = {
       Conflict: ConflictError
     };
+    this.calls = {
+      get: {},
+      makeKeyString: {}
+    };
   }
 
   /**
@@ -177,6 +181,31 @@ export default class ObjectAPI {
    *          has been updated, or be rejected if it cannot be saved
    */
 
+  addCall(type, identifier) {
+    let keyString;
+
+    if (!identifier) {
+      throw new Error('Cannot make key string from null identifier logging');
+    }
+
+    if (typeof identifier === 'string') {
+      keyString = identifier;
+    } else if (!identifier.namespace) {
+      keyString = identifier.key;
+    } else {
+      keyString = [identifier.namespace.replace(/:/g, '\\:'), identifier.key].join(':');
+    }
+
+    
+    if (this.calls[type][keyString]) {
+      this.calls[type][keyString]++;
+    } else {
+      this.calls[type][keyString] = 1;
+    }
+
+    Object.entries(this.calls.get).forEach(([key, value]) => console.log(`get: ${key}: ${value}`));
+    Object.entries(this.calls.makeKeyString).forEach(([key, value]) => console.log(`makeKeyString: ${key}: ${value}`));
+  }
   /**
    * Delete this domain object.
    *
@@ -199,6 +228,7 @@ export default class ObjectAPI {
    *          has been saved, or be rejected if it cannot be saved
    */
   get(identifier, abortSignal, forceRemote = false) {
+    this.addCall('get', identifier);
     let keystring = this.makeKeyString(identifier);
 
     if (!forceRemote) {
@@ -520,7 +550,7 @@ export default class ObjectAPI {
   }
 
   /**
-   * Inovke interceptors if applicable for a given domain object.
+   * Invoke interceptors if applicable for a given domain object.
    * @private
    */
   applyGetInterceptors(identifier, domainObject) {
@@ -554,28 +584,34 @@ export default class ObjectAPI {
    */
   async getTelemetryPath(identifier, telemetryIdentifier) {
     const objectDetails = await this.get(identifier);
-    const telemetryPath = [];
-    if (objectDetails.composition && !['folder'].includes(objectDetails.type)) {
-      let sourceTelemetry = objectDetails.composition[0];
+    let telemetryPath = [];
+    if (objectDetails?.type === 'folder') {
+      return telemetryPath;
+    }
+
+    let sourceTelemetry = null;
+    if (telemetryIdentifier && utils.identifierEquals(identifier, telemetryIdentifier)) {
+      sourceTelemetry = identifier;
+    } else if (objectDetails.composition) {
+      sourceTelemetry = objectDetails.composition[0];
       if (telemetryIdentifier) {
-        sourceTelemetry = objectDetails.composition.find(
-          (telemetrySource) =>
-            this.makeKeyString(telemetrySource) === this.makeKeyString(telemetryIdentifier)
+        sourceTelemetry = objectDetails.composition.find((telemetrySource) =>
+          utils.identifierEquals(telemetrySource, telemetryIdentifier)
         );
       }
-      const compositionElement = await this.get(sourceTelemetry);
-      if (!['yamcs.telemetry', 'generator'].includes(compositionElement.type)) {
-        return telemetryPath;
-      }
-      const telemetryKey = compositionElement.identifier.key;
-      const telemetryPathObjects = await this.getOriginalPath(telemetryKey);
-      telemetryPathObjects.forEach((pathObject) => {
-        if (pathObject.type === 'root') {
-          return;
-        }
-        telemetryPath.unshift(pathObject.name);
-      });
     }
+
+    const compositionElement = await this.get(sourceTelemetry);
+    if (!['yamcs.telemetry', 'generator', 'yamcs.aggregate'].includes(compositionElement.type)) {
+      return telemetryPath;
+    }
+
+    const telemetryPathObjects = await this.getOriginalPath(compositionElement.identifier);
+    telemetryPath = telemetryPathObjects
+      .reverse()
+      .filter((pathObject) => pathObject.type !== 'root')
+      .map((pathObject) => pathObject.name);
+
     return telemetryPath;
   }
 
@@ -723,6 +759,7 @@ export default class ObjectAPI {
    * @returns {string} A string representation of the given identifier, including namespace and key
    */
   makeKeyString(identifier) {
+    this.addCall('makeKeyString', identifier);
     return utils.makeKeyString(identifier);
   }
 

src/api/objects/ObjectAPISpec.js

@@ -125,7 +125,7 @@ describe('The Object API', () => {
         await objectAPI.save(mockDomainObject);
         expect(mockDomainObject.createdBy).toBe(USERNAME);
       });
-      it("Sets the current user for 'modifedBy' on existing objects", async () => {
+      it("Sets the current user for 'modifiedBy' on existing objects", async () => {
         mockDomainObject.persisted = Date.now() - FIFTEEN_MINUTES;
         mockDomainObject.modified = Date.now();
 

src/api/telemetry/TelemetryAPI.js

@@ -230,7 +230,7 @@ export default class TelemetryAPI {
 
   /**
    * Register a request interceptor that transforms a request via module:openmct.TelemetryAPI.request
-   * The request will be modifyed when it is received and will be returned in it's modified state
+   * The request will be modified when it is received and will be returned in it's modified state
    * The request will be transformed only if the interceptor is applicable to that domain object as defined by the RequestInterceptorDef
    *
    * @param {module:openmct.RequestInterceptorDef} requestInterceptorDef the request interceptor definition to add
@@ -269,7 +269,7 @@ export default class TelemetryAPI {
   }
 
   /**
-   * Get or set greedy LAD. For stategy "latest" telemetry in
+   * Get or set greedy LAD. For strategy "latest" telemetry in
    * realtime mode the start bound will be ignored if true and
    * there is no new data to replace the existing data.
    * defaults to true

src/api/telemetry/TelemetryMetadataManager.js

@@ -92,7 +92,7 @@ define(['lodash'], function (_) {
   };
 
   /**
-   * Get an array of valueMetadatas that posess all hints requested.
+   * Get an array of valueMetadatas that possess all hints requested.
    * Array is sorted based on hint priority.
    *
    */

src/api/time/TimeContext.js

@@ -42,6 +42,7 @@ class TimeContext extends EventEmitter {
     this.activeClock = undefined;
     this.offsets = undefined;
     this.mode = undefined;
+    this.warnCounts = {};
 
     this.tick = this.tick.bind(this);
   }
@@ -648,6 +649,17 @@ class TimeContext extends EventEmitter {
   }
 
   #warnMethodDeprecated(method, newMethod) {
+    const MAX_CALLS = 1; // Only warn once per unique method and newMethod combination
+
+    const key = `${method}.${newMethod}`;
+    const currentWarnCount = this.warnCounts[key] || 0;
+
+    if (currentWarnCount >= MAX_CALLS) {
+      return; // Don't warn if already warned once
+    }
+
+    this.warnCounts[key] = currentWarnCount + 1;
+
     let message = `[DEPRECATION WARNING]: The ${method} API method is deprecated and will be removed in a future version of Open MCT.`;
 
     if (newMethod) {

src/api/tooltips/ToolTipAPI.js

@@ -57,13 +57,22 @@ class TooltipAPI {
    * @private for platform-internal use
    */
   showTooltip(tooltip) {
+    this.removeAllTooltips();
+    this.activeToolTips.push(tooltip);
+    tooltip.show();
+  }
+
+  /**
+   * API method to allow for removing all tooltips
+   */
+  removeAllTooltips() {
+    if (!this.activeToolTips?.length) {
+      return;
+    }
     for (let i = this.activeToolTips.length - 1; i > -1; i--) {
       this.activeToolTips[i].destroy();
       this.activeToolTips.splice(i, 1);
     }
-    this.activeToolTips.push(tooltip);
-
-    tooltip.show();
   }
 
   /**

src/api/tooltips/components/tooltip-component.scss

@@ -3,6 +3,7 @@
   height: auto;
   width: auto;
   padding: $interiorMargin;
+  overflow-wrap: break-word;
 }
 
 .c-tooltip {

src/api/types/Type.js

@@ -24,7 +24,7 @@
  * A Type describes a kind of domain object that may appear or be
  * created within Open MCT.
  *
- * @param {module:opemct.TypeRegistry~TypeDefinition} definition
+ * @param {module:openmct.TypeRegistry~TypeDefinition} definition
  * @class Type
  * @memberof module:openmct
  */

src/api/user/UserAPI.js

@@ -43,7 +43,7 @@ class UserAPI extends EventEmitter {
 
   /**
    * Set the user provider for the user API. This allows you
-   *  to specifiy ONE user provider to be used with Open MCT.
+   *  to specify ONE user provider to be used with Open MCT.
    * @method setProvider
    * @memberof module:openmct.UserAPI#
    * @param {module:openmct.UserAPI~UserProvider} provider the new

src/api/user/UserAPISpec.js

@@ -74,7 +74,7 @@ describe('The User API', () => {
       provider.autoLogin(USERNAME);
     });
 
-    it('to check if a user (not specific) is loged in', (done) => {
+    it('to check if a user (not specific) is logged in', (done) => {
       expect(openmct.user.isLoggedIn()).toBeFalse();
 
       openmct.user.on('providerAdded', () => {

src/exporters/ImageExporterSpec.js

@@ -35,8 +35,8 @@ describe('The Image Exporter', () => {
     return resetApplicationState(openmct);
   });
 
-  describe('basic instatation', () => {
-    it('can be instatiated', () => {
+  describe('basic instantiation', () => {
+    it('can be instantiated', () => {
       imageExporter = new ImageExporter(openmct);
 
       expect(imageExporter).not.toEqual(null);

src/plugins/LADTable/components/LADRow.vue

@@ -65,7 +65,7 @@ export default {
     },
     hasUnits: {
       type: Boolean,
-      requred: true
+      required: true
     },
     isStale: {
       type: Boolean,

src/plugins/LADTable/pluginSpec.js

@@ -127,7 +127,7 @@ describe('The LAD Table', () => {
       }).not.toThrow();
     });
 
-    it('should reject non-telemtry producing objects', () => {
+    it('should reject non-telemetry producing objects', () => {
       expect(() => {
         ladTableCompositionCollection.add(mockObj.ladTable);
       }).toThrow();
@@ -254,10 +254,10 @@ describe('The LAD Table', () => {
 
     it('should show aggregate telemetry type with blank data', async () => {
       await Vue.nextTick();
-      const lastestData = parent
+      const latestData = parent
         .querySelectorAll(TABLE_BODY_ROWS)[1]
         .querySelectorAll('td')[2].innerText;
-      expect(lastestData).toBe('---');
+      expect(latestData).toBe('---');
       const dataType = parent
         .querySelectorAll(TABLE_BODY_ROWS)[1]
         .querySelector('.js-type-data').innerText;

src/plugins/autoflow/AutoflowTabularRowController.js

@@ -68,7 +68,12 @@ define([], function () {
       this.updateRowData.bind(this)
     );
 
-    this.openmct.telemetry.request(this.domainObject, { size: 1 }).then(
+    const options = {
+      size: 1,
+      strategy: 'latest',
+      timeContext: this.openmct.time.getContextForView([])
+    };
+    this.openmct.telemetry.request(this.domainObject, options).then(
       function (history) {
         if (!this.initialized && history.length > 0) {
           this.updateRowData(history[history.length - 1]);

src/plugins/charts/bar/BarGraphView.vue

@@ -158,7 +158,7 @@ export default {
       this.composition.remove(telemetryObject);
     },
     addTelemetryObject(telemetryObject) {
-      // grab information we need from the added telmetry object
+      // grab information we need from the added telemetry object
       const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
       this.telemetryObjects[key] = telemetryObject;
       const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
@@ -188,7 +188,7 @@ export default {
         );
       }
 
-      // ask for the current telemetry data, then subcribe for changes
+      // ask for the current telemetry data, then subscribe for changes
       this.requestDataFor(telemetryObject);
       this.subscribeToObject(telemetryObject);
     },

src/plugins/charts/scatter/ScatterPlotView.vue

@@ -122,7 +122,7 @@ export default {
       this.composition.remove(telemetryObject);
     },
     addTelemetryObject(telemetryObject) {
-      // grab information we need from the added telmetry object
+      // grab information we need from the added telemetry object
       const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
       this.telemetryObjects[key] = telemetryObject;
       const metadata = this.openmct.telemetry.getMetadata(telemetryObject);

src/plugins/charts/scatter/plugin.js

@@ -98,9 +98,11 @@ export default function () {
   };
 
   function getScatterPlotFormControl(openmct) {
+    let destroyComponent;
+
     return {
       show(element, model, onChange) {
-        const { vNode } = mount(
+        const { vNode, destroy } = mount(
           {
             el: element,
             components: {
@@ -122,8 +124,12 @@ export default function () {
             element
           }
         );
+        destroyComponent = destroy;
 
         return vNode;
+      },
+      destroy() {
+        destroyComponent();
       }
     };
   }

src/plugins/clearData/plugin.js

@@ -30,7 +30,7 @@ export default function plugin(appliesToObjects, options = { indicator: true })
 
   return function install(openmct) {
     if (installIndicator) {
-      const { vNode } = mount(
+      const { vNode, destroy } = mount(
         {
           components: {
             GlobalClearIndicator
@@ -49,7 +49,8 @@ export default function plugin(appliesToObjects, options = { indicator: true })
       let indicator = {
         element: vNode.el,
         key: 'global-clear-indicator',
-        priority: openmct.priority.DEFAULT
+        priority: openmct.priority.DEFAULT,
+        destroy: destroy
       };
 
       openmct.indicators.add(indicator);

src/plugins/condition/ConditionManager.js

@@ -399,7 +399,7 @@ export default class ConditionManager extends EventEmitter {
   }
 
   shouldEvaluateNewTelemetry(currentTimestamp) {
-    return this.openmct.time.bounds().end >= currentTimestamp;
+    return this.openmct.time.getBounds().end >= currentTimestamp;
   }
 
   telemetryReceived(endpoint, datum) {

src/plugins/condition/criterion/AllTelemetryCriterion.js

@@ -201,9 +201,11 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
   }
 
   requestLAD(telemetryObjects, requestOptions) {
+    //We pass in the global time context here
     let options = {
       strategy: 'latest',
-      size: 1
+      size: 1,
+      timeContext: this.openmct.time.getContextForView([])
     };
 
     if (requestOptions !== undefined) {

src/plugins/condition/criterion/TelemetryCriterion.js

@@ -189,9 +189,11 @@ export default class TelemetryCriterion extends EventEmitter {
   }
 
   requestLAD(telemetryObjects, requestOptions) {
+    //We pass in the global time context here
     let options = {
       strategy: 'latest',
-      size: 1
+      size: 1,
+      timeContext: this.openmct.time.getContextForView([])
     };
 
     if (requestOptions !== undefined) {

src/plugins/condition/criterion/TelemetryCriterionSpec.js

@@ -83,13 +83,19 @@ describe('The telemetry criterion', function () {
     });
     openmct.telemetry.getMetadata.and.returnValue(testTelemetryObject.telemetry);
 
-    openmct.time = jasmine.createSpyObj('timeAPI', ['timeSystem', 'bounds', 'getAllTimeSystems']);
+    openmct.time = jasmine.createSpyObj('timeAPI', [
+      'timeSystem',
+      'bounds',
+      'getAllTimeSystems',
+      'getContextForView'
+    ]);
     openmct.time.timeSystem.and.returnValue({ key: 'system' });
     openmct.time.bounds.and.returnValue({
       start: 0,
       end: 1
     });
     openmct.time.getAllTimeSystems.and.returnValue([{ key: 'system' }]);
+    openmct.time.getContextForView.and.returnValue({});
 
     testCriterionDefinition = {
       id: 'test-criterion-id',

src/plugins/displayLayout/components/SubobjectView.vue

@@ -20,14 +20,14 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <layout-frame
+  <LayoutFrame
     :item="item"
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="(gridDelta) => $emit('move', gridDelta)"
     @endMove="() => $emit('endMove')"
   >
-    <object-frame
+    <ObjectFrame
       v-if="domainObject"
       ref="objectFrame"
       :domain-object="domainObject"
@@ -37,7 +37,7 @@
       :layout-font-size="item.fontSize"
       :layout-font="item.font"
     />
-  </layout-frame>
+  </LayoutFrame>
 </template>
 
 <script>

src/plugins/displayLayout/pluginSpec.js

@@ -141,7 +141,7 @@ describe('the plugin', function () {
       };
       displayLayoutItem = {
         composition: [
-          // no item in compostion, but item in configuration items
+          // no item in composition, but item in configuration items
         ],
         configuration: {
           items: [item],
@@ -165,7 +165,7 @@ describe('the plugin', function () {
       Vue.nextTick(done);
     });
 
-    it('will sync compostion and layout items', () => {
+    it('will sync composition and layout items', () => {
       expect(displayLayoutItem.configuration.items.length).toBe(0);
     });
   });

src/plugins/duplicate/DuplicateTask.js

@@ -221,6 +221,8 @@ export default class DuplicateTask {
       // parse reviver to replace identifiers
       clonedParent = JSON.parse(clonedParent, (key, value) => {
         if (
+          value !== null &&
+          value !== undefined &&
           Object.prototype.hasOwnProperty.call(value, 'key') &&
           Object.prototype.hasOwnProperty.call(value, 'namespace') &&
           value.key === oldId.key &&

src/plugins/exportAsJSONAction/ExportAsJSONActionSpec.js

@@ -73,7 +73,7 @@ describe('Export as JSON plugin', () => {
     expect(exportAsJSONAction.appliesTo([domainObject])).toEqual(true);
   });
 
-  it('ExportAsJSONAction does not applie to non-persistable objects', () => {
+  it('ExportAsJSONAction does not apply to non-persistable objects', () => {
     domainObject = {
       identifier: {
         key: 'export-testing',
@@ -212,7 +212,7 @@ describe('Export as JSON plugin', () => {
     const parent = {
       composition: [
         {
-          key: 'infinteChild',
+          key: 'infiniteChild',
           namespace: ''
         }
       ],
@@ -235,7 +235,7 @@ describe('Export as JSON plugin', () => {
         }
       ],
       identifier: {
-        key: 'infinteChild',
+        key: 'infiniteChild',
         namespace: ''
       },
       name: 'child',
@@ -265,7 +265,7 @@ describe('Export as JSON plugin', () => {
         Object.prototype.hasOwnProperty.call(completedTree.openmct, 'infiniteParent')
       ).toBeTruthy();
       expect(
-        Object.prototype.hasOwnProperty.call(completedTree.openmct, 'infinteChild')
+        Object.prototype.hasOwnProperty.call(completedTree.openmct, 'infiniteChild')
       ).toBeTruthy();
 
       done();

src/plugins/faultManagement/FaultManagementInspector.vue

@@ -25,7 +25,7 @@
     <div class="c-inspect-properties__header">Fault Details</div>
     <ul class="c-inspect-properties__section">
       <DetailText :detail="sourceDetails" />
-      <DetailText :detail="occuredDetails" />
+      <DetailText :detail="occurredDetails" />
       <DetailText :detail="criticalityDetails" />
       <DetailText :detail="descriptionDetails" />
     </ul>
@@ -72,9 +72,9 @@ export default {
         value: this.selectedFault?.shortDescription
       };
     },
-    occuredDetails() {
+    occurredDetails() {
       return {
-        name: 'Occured',
+        name: 'Occurred',
         value: this.selectedFault?.triggerTime
       };
     },

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -37,7 +37,6 @@
       <template v-for="(container, index) in containers" :key="`component-${container.id}`">
         <drop-hint
           v-if="index === 0 && containers.length > 1"
-          :key="`hint-top-${container.id}`"
           class="c-fl-frame__drop-hint"
           :index="-1"
           :allow-drop="allowContainerDrop"
@@ -59,7 +58,6 @@
 
         <resize-handle
           v-if="index !== containers.length - 1"
-          :key="`handle-${container.id}`"
           :index="index"
           :orientation="rowsLayout ? 'vertical' : 'horizontal'"
           :is-editing="isEditing"
@@ -70,7 +68,6 @@
 
         <drop-hint
           v-if="containers.length > 1"
-          :key="`hint-bottom-${container.id}`"
           class="c-fl-frame__drop-hint"
           :index="index"
           :allow-drop="allowContainerDrop"
@@ -137,15 +134,16 @@ export default {
     ResizeHandle,
     DropHint
   },
-  inject: ['openmct', 'objectPath', 'layoutObject'],
+  inject: ['openmct', 'objectPath', 'domainObject'],
   props: {
     isEditing: Boolean
   },
   data() {
     return {
-      domainObject: this.layoutObject,
       newFrameLocation: [],
-      identifierMap: {}
+      identifierMap: {},
+      containers: this.domainObject.configuration.containers,
+      rowsLayout: this.domainObject.configuration.rowsLayout
     };
   },
   computed: {
@@ -156,22 +154,22 @@ export default {
         return 'Columns';
       }
     },
-    containers() {
-      return this.domainObject.configuration.containers;
-    },
-    rowsLayout() {
-      return this.domainObject.configuration.rowsLayout;
-    },
     allContainersAreEmpty() {
       return this.containers.every((container) => container.frames.length === 0);
     }
   },
-  mounted() {
+  created() {
     this.buildIdentifierMap();
     this.composition = this.openmct.composition.get(this.domainObject);
     this.composition.on('remove', this.removeChildObject);
     this.composition.on('add', this.addFrame);
     this.composition.load();
+    this.openmct.objects.observe(this.domainObject, 'configuration.containers', (containers) => {
+      this.containers = containers;
+    });
+    this.openmct.objects.observe(this.domainObject, 'configuration.rowsLayout', (rowsLayout) => {
+      this.rowsLayout = rowsLayout;
+    });
   },
   beforeUnmount() {
     this.composition.off('remove', this.removeChildObject);
@@ -211,20 +209,16 @@ export default {
       let container = this.containers.filter((c) => c.id === containerId)[0];
       let containerIndex = this.containers.indexOf(container);
 
-      /*
-                remove associated domainObjects from composition
-            */
+      // remove associated domainObjects from composition
       container.frames.forEach((f) => {
         this.removeFromComposition(f.domainObjectIdentifier);
       });
 
       this.containers.splice(containerIndex, 1);
 
-      /*
-                add a container when there are no containers in the FL,
-                to prevent user from not being able to add a frame via
-                drag and drop.
-            */
+      // add a container when there are no containers in the FL,
+      // to prevent user from not being able to add a frame via
+      // drag and drop.
       if (this.containers.length === 0) {
         this.containers.push(new Container(100));
       }

src/plugins/flexibleLayout/flexibleLayoutViewProvider.js

@@ -47,17 +47,16 @@ export default class FlexibleLayoutViewProvider {
     let component = null;
 
     return {
-      show: function (element, isEditing) {
+      show(element, isEditing) {
         const { vNode, destroy } = mount(
           {
-            el: element,
             components: {
               FlexibleLayoutComponent
             },
             provide: {
-              openmct: openmct,
+              openmct,
               objectPath,
-              layoutObject: domainObject
+              domainObject
             },
             data() {
               return {
@@ -75,7 +74,7 @@ export default class FlexibleLayoutViewProvider {
         component = vNode.componentInstance;
         _destroy = destroy;
       },
-      getSelectionContext: function () {
+      getSelectionContext() {
         return {
           item: domainObject,
           addContainer: component.$refs.flexibleLayout.addContainer,
@@ -84,10 +83,10 @@ export default class FlexibleLayoutViewProvider {
           type: 'flexible-layout'
         };
       },
-      onEditModeChange: function (isEditing) {
+      onEditModeChange(isEditing) {
         component.isEditing = isEditing;
       },
-      destroy: function (element) {
+      destroy() {
         if (_destroy) {
           _destroy();
           component = null;

src/plugins/flexibleLayout/pluginSpec.js

@@ -33,6 +33,10 @@ describe('the plugin', function () {
   let mockComposition;
 
   const testViewObject = {
+    identifier: {
+      namespace: '',
+      key: 'test-object'
+    },
     id: 'test-object',
     type: 'flexible-layout',
     configuration: {
@@ -116,6 +120,10 @@ describe('the plugin', function () {
 
     beforeEach(() => {
       flexibleLayoutItem = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
         id: 'test-object',
         type: 'flexible-layout',
         configuration: {

src/plugins/gauge/GaugePlugin.js

@@ -167,9 +167,11 @@ export default function () {
   };
 
   function getGaugeFormController(openmct) {
+    let destroyComponent;
+
     return {
       show(element, model, onChange) {
-        const { vNode } = mount(
+        const { vNode, destroy } = mount(
           {
             el: element,
             components: {
@@ -191,8 +193,12 @@ export default function () {
             element
           }
         );
+        destroyComponent = destroy;
 
         return vNode.componentInstance;
+      },
+      destroy() {
+        destroyComponent();
       }
     };
   }

src/plugins/gauge/components/Gauge.vue

@@ -638,7 +638,11 @@ export default {
 
       this.valueKey = this.metadata.valuesForHints(['range'])[0].source;
 
-      this.openmct.telemetry.request(domainObject, { strategy: 'latest' }).then((values) => {
+      const options = {
+        strategy: 'latest',
+        timeContext: this.openmct.time.getContextForView([])
+      };
+      this.openmct.telemetry.request(domainObject, options).then((values) => {
         const length = values.length;
         this.updateValue(values[length - 1]);
       });