Merge branch 'test-form-file-input' of github.com:nasa/openmct into test-form-file-input

Bumps [plotly.js-gl2d-dist](https://github.com/plotly/plotly.js) from 2.14.0 to 2.17.1.
- [Release notes](https://github.com/plotly/plotly.js/releases)
- [Changelog](https://github.com/plotly/plotly.js/blob/master/CHANGELOG.md)
- [Commits](https://github.com/plotly/plotly.js/compare/v2.14.0...v2.17.1)

---
updated-dependencies:
- dependency-name: plotly.js-gl2d-dist
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Shefali Joshi <simplyrender@gmail.com>

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.1
 executors:
   pw-focal-development:
     docker:
-      - image: mcr.microsoft.com/playwright:v1.25.2-focal
+      - image: mcr.microsoft.com/playwright:v1.29.0-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

.github/workflows/e2e-couchdb.yml

@@ -23,7 +23,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: '16'
-      - run: npx playwright@1.25.2 install
+      - run: npx playwright@1.29.0 install
       - run: npm install
       - run: sh src/plugins/persistence/couch/replace-localstorage-with-couchdb-indexhtml.sh
       - run: npm run test:e2e:couchdb

.github/workflows/e2e-pr.yml

@@ -30,7 +30,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: '16'
-      - run: npx playwright@1.25.2 install
+      - run: npx playwright@1.29.0 install
       - run: npx playwright install chrome-beta
       - run: npm install
       - run: npm run test:e2e:full

.webpack/webpack.common.js

@@ -0,0 +1,175 @@
+/* global __dirname module */
+
+/*
+This is the OpenMCT common webpack file. It is imported by the other three webpack configurations:
+ - webpack.prod.js - the production configuration for OpenMCT (default)
+ - webpack.dev.js - the development configuration for OpenMCT
+ - webpack.coverage.js - imports webpack.dev.js and adds code coverage
+There are separate npm scripts to use these configurations, though simply running `npm install`
+will use the default production configuration.
+*/
+const path = require("path");
+const packageDefinition = require("../package.json");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const webpack = require("webpack");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const { VueLoaderPlugin } = require("vue-loader");
+let gitRevision = "error-retrieving-revision";
+let gitBranch = "error-retrieving-branch";
+
+try {
+    gitRevision = require("child_process")
+        .execSync("git rev-parse HEAD")
+        .toString()
+        .trim();
+    gitBranch = require("child_process")
+        .execSync("git rev-parse --abbrev-ref HEAD")
+        .toString()
+        .trim();
+} catch (err) {
+    console.warn(err);
+}
+
+const projectRootDir = path.resolve(__dirname, "..");
+
+/** @type {import('webpack').Configuration} */
+const config = {
+    context: projectRootDir,
+    entry: {
+        openmct: "./openmct.js",
+        generatorWorker: "./example/generator/generatorWorker.js",
+        couchDBChangesFeed:
+            "./src/plugins/persistence/couch/CouchChangesFeed.js",
+        inMemorySearchWorker: "./src/api/objects/InMemorySearchWorker.js",
+        espressoTheme: "./src/plugins/themes/espresso-theme.scss",
+        snowTheme: "./src/plugins/themes/snow-theme.scss"
+    },
+    output: {
+        globalObject: "this",
+        filename: "[name].js",
+        path: path.resolve(projectRootDir, "dist"),
+        library: "openmct",
+        libraryTarget: "umd",
+        publicPath: "",
+        hashFunction: "xxhash64",
+        clean: true
+    },
+    resolve: {
+        alias: {
+            "@": path.join(projectRootDir, "src"),
+            legacyRegistry: path.join(projectRootDir, "src/legacyRegistry"),
+            saveAs: "file-saver/src/FileSaver.js",
+            csv: "comma-separated-values",
+            EventEmitter: "eventemitter3",
+            bourbon: "bourbon.scss",
+            "plotly-basic": "plotly.js-basic-dist",
+            "plotly-gl2d": "plotly.js-gl2d-dist",
+            "d3-scale": path.join(
+                projectRootDir,
+                "node_modules/d3-scale/dist/d3-scale.min.js"
+            ),
+            printj: path.join(
+                projectRootDir,
+                "node_modules/printj/dist/printj.min.js"
+            ),
+            styles: path.join(projectRootDir, "src/styles"),
+            MCT: path.join(projectRootDir, "src/MCT"),
+            testUtils: path.join(projectRootDir, "src/utils/testUtils.js"),
+            objectUtils: path.join(
+                projectRootDir,
+                "src/api/objects/object-utils.js"
+            ),
+            utils: path.join(projectRootDir, "src/utils")
+        }
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            __OPENMCT_VERSION__: `'${packageDefinition.version}'`,
+            __OPENMCT_BUILD_DATE__: `'${new Date()}'`,
+            __OPENMCT_REVISION__: `'${gitRevision}'`,
+            __OPENMCT_BUILD_BRANCH__: `'${gitBranch}'`
+        }),
+        new VueLoaderPlugin(),
+        new CopyWebpackPlugin({
+            patterns: [
+                {
+                    from: "src/images/favicons",
+                    to: "favicons"
+                },
+                {
+                    from: "./index.html",
+                    transform: function (content) {
+                        return content.toString().replace(/dist\//g, "");
+                    }
+                },
+                {
+                    from: "src/plugins/imagery/layers",
+                    to: "imagery"
+                }
+            ]
+        }),
+        new MiniCssExtractPlugin({
+            filename: "[name].css",
+            chunkFilename: "[name].css"
+        })
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.(sc|sa|c)ss$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: "css-loader"
+                    },
+                    {
+                        loader: "resolve-url-loader"
+                    },
+                    {
+                        loader: "sass-loader",
+                        options: { sourceMap: true }
+                    }
+                ]
+            },
+            {
+                test: /\.vue$/,
+                use: "vue-loader"
+            },
+            {
+                test: /\.html$/,
+                type: "asset/source"
+            },
+            {
+                test: /\.(jpg|jpeg|png|svg)$/,
+                type: "asset/resource",
+                generator: {
+                    filename: "images/[name][ext]"
+                }
+            },
+            {
+                test: /\.ico$/,
+                type: "asset/resource",
+                generator: {
+                    filename: "icons/[name][ext]"
+                }
+            },
+            {
+                test: /\.(woff|woff2?|eot|ttf)$/,
+                type: "asset/resource",
+                generator: {
+                    filename: "fonts/[name][ext]"
+                }
+            }
+        ]
+    },
+    stats: "errors-warnings",
+    performance: {
+        // We should eventually consider chunking to decrease
+        // these values
+        maxEntrypointSize: 25000000,
+        maxAssetSize: 25000000
+    }
+};
+
+module.exports = config;

.webpack/webpack.coverage.js

@@ -6,9 +6,9 @@ OpenMCT Continuous Integration servers use this configuration to add code covera
 information to pull requests.
 */
 
-const config = require('./webpack.dev');
+const config = require("./webpack.dev");
 // eslint-disable-next-line no-undef
-const CI = process.env.CI === 'true';
+const CI = process.env.CI === "true";
 
 config.devtool = CI ? false : undefined;
 
@@ -18,13 +18,18 @@ config.module.rules.push({
     test: /\.js$/,
     exclude: /(Spec\.js$)|(node_modules)/,
     use: {
-        loader: 'babel-loader',
+        loader: "babel-loader",
         options: {
             retainLines: true,
             // eslint-disable-next-line no-undef
-            plugins: [['babel-plugin-istanbul', {
-                extension: ['.js', '.vue']
-            }]]
+            plugins: [
+                [
+                    "babel-plugin-istanbul",
+                    {
+                        extension: [".js", ".vue"]
+                    }
+                ]
+            ]
         }
     }
 });

.webpack/webpack.dev.js

@@ -5,28 +5,29 @@ This configuration should be used for development purposes. It contains full sou
 devServer (which be invoked using by `npm start`), and a non-minified Vue.js distribution.
 If OpenMCT is to be used for a production server, use webpack.prod.js instead.
 */
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common');
+const path = require("path");
+const webpack = require("webpack");
+const { merge } = require("webpack-merge");
 
-const path = require('path');
-const webpack = require('webpack');
+const common = require("./webpack.common");
+const projectRootDir = path.resolve(__dirname, "..");
 
 module.exports = merge(common, {
-    mode: 'development',
+    mode: "development",
     watchOptions: {
         // Since we use require.context, webpack is watching the entire directory.
         // We need to exclude any files we don't want webpack to watch.
         // See: https://webpack.js.org/configuration/watch/#watchoptions-exclude
         ignored: [
-            '**/{node_modules,dist,docs,e2e}', // All files in node_modules, dist, docs, e2e,
-            '**/{*.yml,Procfile,webpack*.js,babel*.js,package*.json,tsconfig.json}', // Config files
-            '**/*.{sh,md,png,ttf,woff,svg}', // Non source files
-            '**/.*' // dotfiles and dotfolders
+            "**/{node_modules,dist,docs,e2e}", // All files in node_modules, dist, docs, e2e,
+            "**/{*.yml,Procfile,webpack*.js,babel*.js,package*.json,tsconfig.json}", // Config files
+            "**/*.{sh,md,png,ttf,woff,svg}", // Non source files
+            "**/.*" // dotfiles and dotfolders
         ]
     },
     resolve: {
         alias: {
-            "vue": path.join(__dirname, "node_modules/vue/dist/vue.js")
+            vue: path.join(projectRootDir, "node_modules/vue/dist/vue.js")
         }
     },
     plugins: [
@@ -34,20 +35,20 @@ module.exports = merge(common, {
             __OPENMCT_ROOT_RELATIVE__: '"dist/"'
         })
     ],
-    devtool: 'eval-source-map',
+    devtool: "eval-source-map",
     devServer: {
         devMiddleware: {
             writeToDisk: (filePathString) => {
                 const filePath = path.parse(filePathString);
-                const shouldWrite = !(filePath.base.includes('hot-update'));
+                const shouldWrite = !filePath.base.includes("hot-update");
 
                 return shouldWrite;
             }
         },
-        watchFiles: ['**/*.css'],
+        watchFiles: ["**/*.css"],
         static: {
-            directory: path.join(__dirname, '/dist'),
-            publicPath: '/dist',
+            directory: path.join(__dirname, "..", "/dist"),
+            publicPath: "/dist",
             watch: false
         },
         client: {

.webpack/webpack.prod.js

@@ -4,17 +4,18 @@
 This configuration should be used for production installs.
 It is the default webpack configuration.
 */
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common');
+const path = require("path");
+const webpack = require("webpack");
+const { merge } = require("webpack-merge");
 
-const path = require('path');
-const webpack = require('webpack');
+const common = require("./webpack.common");
+const projectRootDir = path.resolve(__dirname, "..");
 
 module.exports = merge(common, {
-    mode: 'production',
+    mode: "production",
     resolve: {
         alias: {
-            "vue": path.join(__dirname, "node_modules/vue/dist/vue.min.js")
+            vue: path.join(projectRootDir, "node_modules/vue/dist/vue.min.js")
         }
     },
     plugins: [
@@ -22,5 +23,5 @@ module.exports = merge(common, {
             __OPENMCT_ROOT_RELATIVE__: '""'
         })
     ],
-    devtool: 'source-map'
+    devtool: "source-map"
 });

e2e/README.md

@@ -8,7 +8,7 @@ This document is designed to capture on the What, Why, and How's of writing and
 
 1. [Getting Started](#getting-started)
 2. [Types of Testing](#types-of-e2e-testing)
-3. [Architecture](#architecture)
+3. [Architecture](#test-architecture-and-ci)
 
 ## Getting Started
 
@@ -400,3 +400,23 @@ A single e2e test in Open MCT is extended to run:
 - Tests won't start because 'Error: <http://localhost:8080/># is already used...'
 This error will appear when running the tests locally. Sometimes, the webserver is left in an orphaned state and needs to be cleaned up. To clear up the orphaned webserver, execute the following from your Terminal:
 ```lsof -n -i4TCP:8080 | awk '{print$2}' | tail -1 | xargs kill -9```
+
+### Upgrading Playwright
+
+In order to upgrade from one version of Playwright to another, the version should be updated in several places in both `openmct` and `openmct-yamcs` repos. An easy way to identify these locations is to search for the current version in all files and find/replace.
+
+For reference, all of the locations where the version should be updated are listed below:
+
+#### **In `openmct`:**
+
+- `package.json`
+  - Both packages `@playwright/test` and `playwright-core` should be updated to the same target version.
+- `.circleci/config.yml`
+- `.github/workflows/e2e-couchdb.yml`
+- `.github/workflows/e2e-pr.yml`
+
+#### **In `openmct-yamcs`:**
+
+- `package.json`
+  - `@playwright/test` should be updated to the target version.
+- `.github/workflows/yamcs-quickstart-e2e.yml`

e2e/appActions.js

@@ -45,6 +45,14 @@
  * @property {string} url the relative url to the object (for use with `page.goto()`)
  */
 
+/**
+ * Defines parameters to be used in the creation of a notification.
+ * @typedef {Object} CreateNotificationOptions
+ * @property {string} message the message
+ * @property {'info' | 'alert' | 'error'} severity the severity
+ * @property {import('../src/api/notifications/NotificationAPI').NotificationOptions} [notificationOptions] additional options
+ */
+
 const Buffer = require('buffer').Buffer;
 const genUuid = require('uuid').v4;
 
@@ -112,6 +120,25 @@ async function createDomainObjectWithDefaults(page, { type, name, parent = 'mine
     };
 }
 
+/**
+ * Generate a notification with the given options.
+ * @param {import('@playwright/test').Page} page
+ * @param {CreateNotificationOptions} createNotificationOptions
+ */
+async function createNotification(page, createNotificationOptions) {
+    await page.evaluate((_createNotificationOptions) => {
+        const { message, severity, options } = _createNotificationOptions;
+        const notificationApi = window.openmct.notifications;
+        if (severity === 'info') {
+            notificationApi.info(message, options);
+        } else if (severity === 'alert') {
+            notificationApi.alert(message, options);
+        } else {
+            notificationApi.error(message, options);
+        }
+    }, createNotificationOptions);
+}
+
 /**
  * @param {import('@playwright/test').Page} page
  * @param {string} name
@@ -333,6 +360,7 @@ async function setEndOffset(page, offset) {
 // eslint-disable-next-line no-undef
 module.exports = {
     createDomainObjectWithDefaults,
+    createNotification,
     expandTreePaneItemByName,
     createPlanFromJSON,
     openObjectTreeContextMenu,

e2e/helper/addInitFileInputObject.js

@@ -0,0 +1,76 @@
+class DomainObjectViewProvider {
+    constructor(openmct) {
+        this.key = 'doViewProvider';
+        this.name = 'Domain Object View Provider';
+        this.openmct = openmct;
+    }
+
+    canView(domainObject) {
+        return domainObject.type === 'imageFileInput'
+            || domainObject.type === 'jsonFileInput';
+    }
+
+    view(domainObject, objectPath) {
+        let content;
+
+        return {
+            show: function (element) {
+                const body = domainObject.selectFile.body;
+                const type = typeof body;
+
+                content = document.createElement('div');
+                content.id = 'file-input-type';
+                content.textContent = JSON.stringify(type);
+                element.appendChild(content);
+            },
+            destroy: function (element) {
+                element.removeChild(content);
+                content = undefined;
+            }
+        };
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const openmct = window.openmct;
+
+    openmct.types.addType('jsonFileInput', {
+        key: 'jsonFileInput',
+        name: "JSON File Input Object",
+        creatable: true,
+        form: [
+            {
+                name: 'Upload File',
+                key: 'selectFile',
+                control: 'file-input',
+                required: true,
+                text: 'Select File...',
+                type: 'application/json',
+                property: [
+                    "selectFile"
+                ]
+            }
+        ]
+    });
+
+    openmct.types.addType('imageFileInput', {
+        key: 'imageFileInput',
+        name: "Image File Input Object",
+        creatable: true,
+        form: [
+            {
+                name: 'Upload File',
+                key: 'selectFile',
+                control: 'file-input',
+                required: true,
+                text: 'Select File...',
+                type: 'image/*',
+                property: [
+                    "selectFile"
+                ]
+            }
+        ]
+    });
+
+    openmct.objectViews.addProvider(new DomainObjectViewProvider(openmct));
+});

e2e/tests/framework/appActions.e2e.spec.js

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 const { test, expect } = require('../../pluginFixtures.js');
-const { createDomainObjectWithDefaults } = require('../../appActions.js');
+const { createDomainObjectWithDefaults, createNotification } = require('../../appActions.js');
 
 test.describe('AppActions', () => {
     test('createDomainObjectsWithDefaults', async ({ page }) => {
@@ -85,4 +85,28 @@ test.describe('AppActions', () => {
             expect(folder3.url).toBe(`${e2eFolder.url}/${folder1.uuid}/${folder2.uuid}/${folder3.uuid}`);
         });
     });
+    test("createNotification", async ({ page }) => {
+        await page.goto('./', { waitUntil: 'networkidle' });
+        await createNotification(page, {
+            message: 'Test info notification',
+            severity: 'info'
+        });
+        await expect(page.locator('.c-message-banner__message')).toHaveText('Test info notification');
+        await expect(page.locator('.c-message-banner')).toHaveClass(/info/);
+        await page.locator('[aria-label="Dismiss"]').click();
+        await createNotification(page, {
+            message: 'Test alert notification',
+            severity: 'alert'
+        });
+        await expect(page.locator('.c-message-banner__message')).toHaveText('Test alert notification');
+        await expect(page.locator('.c-message-banner')).toHaveClass(/alert/);
+        await page.locator('[aria-label="Dismiss"]').click();
+        await createNotification(page, {
+            message: 'Test error notification',
+            severity: 'error'
+        });
+        await expect(page.locator('.c-message-banner__message')).toHaveText('Test error notification');
+        await expect(page.locator('.c-message-banner')).toHaveClass(/error/);
+        await page.locator('[aria-label="Dismiss"]').click();
+    });
 });

e2e/tests/functional/forms.e2e.spec.js

@@ -30,6 +30,8 @@ const genUuid = require('uuid').v4;
 const path = require('path');
 
 const TEST_FOLDER = 'test folder';
+const jsonFilePath = 'e2e/test-data/ExampleLayouts.json';
+const imageFilePath = 'e2e/test-data/rick.jpg';
 
 test.describe('Form Validation Behavior', () => {
     test('Required Field indicators appear if title is empty and can be corrected', async ({ page }) => {
@@ -68,6 +70,41 @@ test.describe('Form Validation Behavior', () => {
     });
 });
 
+test.describe('Form File Input Behavior', () => {
+    test.beforeEach(async ({ page }) => {
+        // eslint-disable-next-line no-undef
+        await page.addInitScript({ path: path.join(__dirname, '../../helper', 'addInitFileInputObject.js') });
+    });
+
+    test('Can select a JSON file type', async ({ page }) => {
+        await page.goto('./', { waitUntil: 'networkidle' });
+
+        await page.getByRole('button', { name: ' Create ' }).click();
+        await page.getByRole('menuitem', { name: 'JSON File Input Object' }).click();
+
+        await page.setInputFiles('#fileElem', jsonFilePath);
+
+        await page.getByRole('button', { name: 'Save' }).click();
+
+        const type = await page.locator('#file-input-type').textContent();
+        await expect(type).toBe(`"string"`);
+    });
+
+    test('Can select an image file type', async ({ page }) => {
+        await page.goto('./', { waitUntil: 'networkidle' });
+
+        await page.getByRole('button', { name: ' Create ' }).click();
+        await page.getByRole('menuitem', { name: 'Image File Input Object' }).click();
+
+        await page.setInputFiles('#fileElem', imageFilePath);
+
+        await page.getByRole('button', { name: 'Save' }).click();
+
+        const type = await page.locator('#file-input-type').textContent();
+        await expect(type).toBe(`"object"`);
+    });
+});
+
 test.describe('Persistence operations @addInit', () => {
     // add non persistable root item
     test.beforeEach(async ({ page }) => {

e2e/tests/functional/notification.e2e.spec.js

@@ -0,0 +1,39 @@
+/*****************************************************************************
+ * 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 which verify Open MCT's Notification functionality
+*/
+
+// FIXME: Remove this eslint exception once tests are implemented
+// eslint-disable-next-line no-unused-vars
+const { test, expect } = require('../../pluginFixtures');
+
+test.describe('Notifications List', () => {
+    test.fixme('Notifications can be dismissed individually', async ({ page }) => {
+        // Create some persistent notifications
+        // Verify that they are present in the notifications list
+        // Dismiss one of the notifications
+        // Verify that it is no longer present in the notifications list
+        // Verify that the other notifications are still present in the notifications list
+    });
+});

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

@@ -44,6 +44,7 @@ async function createNotebookAndEntry(page, iterations = 1) {
         const entryLocator = `[aria-label="Notebook Entry Input"] >> nth = ${iteration}`;
         await page.locator(entryLocator).click();
         await page.locator(entryLocator).fill(`Entry ${iteration}`);
+        await page.locator(entryLocator).press('Enter');
     }
 
     return notebook;

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

@@ -0,0 +1,58 @@
+/*****************************************************************************
+ * 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 is dedicated to test notification banner functionality and its accessibility attributes.
+ */
+
+const { test, expect } = require('../../pluginFixtures');
+const percySnapshot = require('@percy/playwright');
+const { createDomainObjectWithDefaults } = require('../../appActions');
+
+test.describe('Visual - Check Notification Info Banner of \'Save successful\'', () => {
+    test.beforeEach(async ({ page }) => {
+        // Go to baseURL and Hide Tree
+        await page.goto('./', { waitUntil: 'networkidle' });
+    });
+
+    test('Create a clock, click on \'Save successful\' banner and dismiss it', async ({ page }) => {
+        // Create a clock domain object
+        await createDomainObjectWithDefaults(page, { type: '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"
+        expect(await page.locator('button[aria-label="Clear all notifications"]').isVisible()).toBe(true);
+        // Click on the div with role="alert" that has "Save successful" text
+        await page.locator('div[role="alert"]:has-text("Save successful")').click();
+        // Verify there is a div with role="dialog"
+        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');
+        // Verify there is a button with text "Dismiss"
+        expect(await page.locator('button:has-text("Dismiss")').isVisible()).toBe(true);
+        // 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);
+    });
+});

karma.conf.js

@@ -28,12 +28,12 @@ module.exports = (config) => {
     let singleRun;
 
     if (process.env.KARMA_DEBUG) {
-        webpackConfig = require('./webpack.dev.js');
-        browsers = ['ChromeDebugging'];
+        webpackConfig = require("./.webpack/webpack.dev.js");
+        browsers = ["ChromeDebugging"];
         singleRun = false;
     } else {
-        webpackConfig = require('./webpack.coverage.js');
-        browsers = ['ChromeHeadless'];
+        webpackConfig = require("./.webpack/webpack.coverage.js");
+        browsers = ["ChromeHeadless"];
         singleRun = true;
     }
 
@@ -42,28 +42,28 @@ module.exports = (config) => {
     delete webpackConfig.entry;
 
     config.set({
-        basePath: '',
-        frameworks: ['jasmine', 'webpack'],
+        basePath: "",
+        frameworks: ["jasmine", "webpack"],
         files: [
-            'indexTest.js',
+            "indexTest.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.
             {
-                pattern: 'dist/couchDBChangesFeed.js*',
+                pattern: "dist/couchDBChangesFeed.js*",
                 included: false
             },
             {
-                pattern: 'dist/inMemorySearchWorker.js*',
+                pattern: "dist/inMemorySearchWorker.js*",
                 included: false
             },
             {
-                pattern: 'dist/generatorWorker.js*',
+                pattern: "dist/generatorWorker.js*",
                 included: false
             }
         ],
         port: 9876,
-        reporters: ['spec', 'junit', 'coverage-istanbul'],
+        reporters: ["spec", "junit", "coverage-istanbul"],
         browsers,
         client: {
             jasmine: {
@@ -73,8 +73,8 @@ module.exports = (config) => {
         },
         customLaunchers: {
             ChromeDebugging: {
-                base: 'Chrome',
-                flags: ['--remote-debugging-port=9222'],
+                base: "Chrome",
+                flags: ["--remote-debugging-port=9222"],
                 debug: true
             }
         },
@@ -90,7 +90,7 @@ module.exports = (config) => {
             fixWebpackSourcePaths: true,
             skipFilesWithNoCoverage: true,
             dir: "coverage/unit", //Sets coverage file to be consumed by codecov.io
-            reports: ['lcovonly']
+            reports: ["lcovonly"]
         },
         specReporter: {
             maxLogLines: 5,
@@ -102,11 +102,11 @@ module.exports = (config) => {
             failFast: false
         },
         preprocessors: {
-            'indexTest.js': ['webpack', 'sourcemap']
+            "indexTest.js": ["webpack", "sourcemap"]
         },
         webpack: webpackConfig,
         webpackMiddleware: {
-            stats: 'errors-warnings'
+            stats: "errors-warnings"
         },
         concurrency: 1,
         singleRun,

package.json

@@ -1,13 +1,14 @@
 {
   "name": "openmct",
-  "version": "2.1.5-SNAPSHOT",
+  "version": "2.1.6-SNAPSHOT",
   "description": "The Open MCT core platform",
   "devDependencies": {
     "@babel/eslint-parser": "7.18.9",
     "@braintree/sanitize-url": "6.0.2",
-    "@percy/cli": "1.16.0",
+    "@percy/cli": "1.17.0",
     "@percy/playwright": "1.0.4",
-    "@playwright/test": "1.25.2",
+    "@playwright/test": "1.29.0",
+    "@types/eventemitter3": "1.2.0",
     "@types/jasmine": "4.3.1",
     "@types/lodash": "4.14.191",
     "babel-loader": "9.1.0",
@@ -15,14 +16,14 @@
     "codecov": "3.8.3",
     "comma-separated-values": "3.6.4",
     "copy-webpack-plugin": "11.0.0",
-    "css-loader": "6.7.1",
+    "css-loader": "6.7.3",
     "d3-axis": "3.0.0",
     "d3-scale": "3.3.0",
     "d3-selection": "3.0.0",
-    "eslint": "8.30.0",
+    "eslint": "8.32.0",
     "eslint-plugin-compat": "4.0.2",
     "eslint-plugin-playwright": "0.11.2",
-    "eslint-plugin-vue": "9.8.0",
+    "eslint-plugin-vue": "9.9.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "6.12.0",
     "eventemitter3": "1.2.0",
     "file-saver": "2.0.5",
@@ -38,7 +39,7 @@
     "karma-jasmine": "5.1.0",
     "karma-junit-reporter": "2.0.1",
     "karma-sourcemap-loader": "0.3.8",
-    "karma-spec-reporter": "0.0.34",
+    "karma-spec-reporter": "0.0.36",
     "karma-webpack": "5.0.0",
     "location-bar": "3.0.1",
     "lodash": "4.17.21",
@@ -48,13 +49,13 @@
     "moment-timezone": "0.5.40",
     "nyc": "15.1.0",
     "painterro": "1.2.78",
-    "playwright-core": "1.25.2",
-    "plotly.js-basic-dist": "2.14.0",
-    "plotly.js-gl2d-dist": "2.14.0",
+    "playwright-core": "1.29.0",
+    "plotly.js-basic-dist": "2.17.0",
+    "plotly.js-gl2d-dist": "2.17.1",
     "printj": "1.3.1",
     "resolve-url-loader": "5.0.0",
-    "sass": "1.56.1",
-    "sass-loader": "13.0.2",
+    "sass": "1.57.1",
+    "sass-loader": "13.2.0",
     "sinon": "15.0.1",
     "style-loader": "^3.3.1",
     "typescript": "4.9.4",
@@ -71,14 +72,14 @@
   "scripts": {
     "clean": "rm -rf ./dist ./node_modules ./package-lock.json",
     "clean-test-lint": "npm run clean; npm install; npm run test; npm run lint",
-    "start": "npx webpack serve --config ./webpack.dev.js",
-    "start:coverage": "npx webpack serve --config ./webpack.coverage.js",
+    "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:fix": "eslint example src e2e --ext .js,.vue openmct.js --fix",
-    "build:prod": "webpack --config webpack.prod.js",
-    "build:dev": "webpack --config webpack.dev.js",
-    "build:coverage": "webpack --config webpack.coverage.js",
-    "build:watch": "webpack --config webpack.dev.js --watch",
+    "build:prod": "webpack --config ./.webpack/webpack.prod.js",
+    "build:dev": "webpack --config ./.webpack/webpack.dev.js",
+    "build:coverage": "webpack --config ./.webpack/webpack.coverage.js",
+    "build:watch": "webpack --config ./.webpack/webpack.dev.js --watch",
     "info": "npx envinfo --system --browsers --npmPackages --binaries --languages --markdown",
     "test": "karma start",
     "test:debug": "KARMA_DEBUG=true karma start",

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

@@ -30,7 +30,7 @@
             id="fileElem"
             ref="fileInput"
             type="file"
-            accept=".json"
+            :accept="acceptableFileTypes"
             style="display:none"
         >
         <button
@@ -72,6 +72,13 @@ export default {
         },
         removable() {
             return (this.fileInfo || this.model.value) && this.model.removable;
+        },
+        acceptableFileTypes() {
+            if (this.model.type) {
+                return this.model.type;
+            }
+
+            return 'application/json';
         }
     },
     mounted() {
@@ -80,7 +87,13 @@ export default {
     methods: {
         handleFiles() {
             const fileList = this.$refs.fileInput.files;
-            this.readFile(fileList[0]);
+            const file = fileList[0];
+
+            if (this.acceptableFileTypes === 'application/json') {
+                this.readFile(file);
+            } else {
+                this.handleRawFile(file);
+            }
         },
         readFile(file) {
             const self = this;
@@ -104,6 +117,21 @@ export default {
 
             fileReader.readAsText(file);
         },
+        handleRawFile(file) {
+            const fileInfo = {
+                name: file.name,
+                body: file
+            };
+
+            this.fileInfo = Object.assign({}, fileInfo);
+
+            const data = {
+                model: this.model,
+                value: fileInfo
+            };
+
+            this.$emit('onChange', data);
+        },
         selectFile() {
             this.$refs.fileInput.click();
         },

src/api/notifications/NotificationAPI.js

@@ -31,7 +31,31 @@
  * @namespace platform/api/notifications
  */
 import moment from 'moment';
-import EventEmitter from 'EventEmitter';
+import EventEmitter from 'eventemitter3';
+
+/**
+ * @typedef {object} NotificationProperties
+ * @property {function} dismiss Dismiss the notification
+ * @property {NotificationModel} model The Notification model
+ * @property {(progressPerc: number, progressText: string) => void} [progress] Update the progress of the notification
+ */
+
+/**
+ * @typedef {EventEmitter & NotificationProperties} Notification
+ */
+
+/**
+ * @typedef {object} NotificationLink
+ * @property {function} onClick The function to be called when the link is clicked
+ * @property {string} cssClass A CSS class name to style the link
+ * @property {string} text The text to be displayed for the link
+ */
+
+/**
+ * @typedef {object} NotificationOptions
+ * @property {number} [autoDismissTimeout] Milliseconds to wait before automatically dismissing the notification
+ * @property {NotificationLink} [link] A link for the notification
+ */
 
 /**
  * A representation of a banner notification. Banner notifications
@@ -40,13 +64,17 @@ import EventEmitter from 'EventEmitter';
  * dialogs so that the same information can be provided in a dialog
  * and then minimized to a banner notification if needed, or vice-versa.
  *
+ * @see DialogModel
  * @typedef {object} NotificationModel
  * @property {string} message The message to be displayed by the notification
  * @property {number | 'unknown'} [progress] The progress of some ongoing task. Should be a number between 0 and 100, or
  * with the string literal 'unknown'.
  * @property {string} [progressText] A message conveying progress of some ongoing task.
-
- * @see DialogModel
+ * @property {string} [severity] The severity of the notification. Should be one of 'info', 'alert', or 'error'.
+ * @property {string} [timestamp] The time at which the notification was created. Should be a string in ISO 8601 format.
+ * @property {boolean} [minimized] Whether or not the notification has been minimized
+ * @property {boolean} [autoDismiss] Whether the notification should be automatically dismissed after a short period of time.
+ * @property {NotificationOptions} options The notification options
  */
 
 const DEFAULT_AUTO_DISMISS_TIMEOUT = 3000;
@@ -55,18 +83,19 @@ const MINIMIZE_ANIMATION_TIMEOUT = 300;
 /**
  * The notification service is responsible for informing the user of
  * events via the use of banner notifications.
- * @memberof ui/notification
- * @constructor */
-
+*/
 export default class NotificationAPI extends EventEmitter {
     constructor() {
         super();
+        /** @type {Notification[]} */
         this.notifications = [];
+        /** @type {{severity: "info" | "alert" | "error"}} */
         this.highest = { severity: "info" };
 
-        /*
+        /**
         * A context in which to hold the active notification and a
         * handle to its timeout.
+        * @type {Notification | undefined}
         */
         this.activeNotification = undefined;
     }
@@ -75,16 +104,12 @@ export default class NotificationAPI extends EventEmitter {
      * Info notifications are low priority informational messages for the user. They will be auto-destroy after a brief
      * period of time.
      * @param {string} message The message to display to the user
-     * @param {Object} [options] object with following properties
-     *      autoDismissTimeout: {number} in miliseconds to automatically dismisses notification
-     *      link: {Object} Add a link to notifications for navigation
-     *              onClick: callback function
-     *              cssClass: css class name to add style on link
-     *              text: text to display for link
-     * @returns {InfoNotification}
+     * @param {NotificationOptions} [options] The notification options
+     * @returns {Notification}
      */
     info(message, options = {}) {
-        let notificationModel = {
+        /** @type {NotificationModel} */
+        const notificationModel = {
             message: message,
             autoDismiss: true,
             severity: "info",
@@ -97,7 +122,7 @@ export default class NotificationAPI extends EventEmitter {
     /**
      * Present an alert to the user.
      * @param {string} message The message to display to the user.
-     * @param {Object} [options] object with following properties
+     * @param {NotificationOptions} [options] object with following properties
      *      autoDismissTimeout: {number} in milliseconds to automatically dismisses notification
      *      link: {Object} Add a link to notifications for navigation
      *              onClick: callback function
@@ -106,7 +131,7 @@ export default class NotificationAPI extends EventEmitter {
      * @returns {Notification}
      */
     alert(message, options = {}) {
-        let notificationModel = {
+        const notificationModel = {
             message: message,
             severity: "alert",
             options
@@ -147,7 +172,8 @@ export default class NotificationAPI extends EventEmitter {
             message: message,
             progressPerc: progressPerc,
             progressText: progressText,
-            severity: "info"
+            severity: "info",
+            options: {}
         };
 
         return this._notify(notificationModel);
@@ -165,8 +191,13 @@ export default class NotificationAPI extends EventEmitter {
      * dismissed.
      *
      * @private
+     * @param {Notification | undefined} notification
      */
     _minimize(notification) {
+        if (!notification) {
+            return;
+        }
+
         //Check this is a known notification
         let index = this.notifications.indexOf(notification);
 
@@ -204,8 +235,13 @@ export default class NotificationAPI extends EventEmitter {
      * dismiss
      *
      * @private
+     * @param {Notification | undefined} notification
      */
     _dismiss(notification) {
+        if (!notification) {
+            return;
+        }
+
         //Check this is a known notification
         let index = this.notifications.indexOf(notification);
 
@@ -236,10 +272,11 @@ export default class NotificationAPI extends EventEmitter {
      * dismiss or minimize where appropriate.
      *
      * @private
+     * @param {Notification | undefined} notification
      */
     _dismissOrMinimize(notification) {
-        let model = notification.model;
-        if (model.severity === "info") {
+        let model = notification?.model;
+        if (model?.severity === "info") {
             this._dismiss(notification);
         } else {
             this._minimize(notification);
@@ -251,10 +288,11 @@ export default class NotificationAPI extends EventEmitter {
      */
     _setHighestSeverity() {
         let severity = {
-            "info": 1,
-            "alert": 2,
-            "error": 3
+            info: 1,
+            alert: 2,
+            error: 3
         };
+
         this.highest.severity = this.notifications.reduce((previous, notification) => {
             if (severity[notification.model.severity] > severity[previous]) {
                 return notification.model.severity;
@@ -312,8 +350,11 @@ export default class NotificationAPI extends EventEmitter {
 
     /**
      * @private
+     * @param {NotificationModel} notificationModel
+     * @returns {Notification}
      */
     _createNotification(notificationModel) {
+        /** @type {Notification} */
         let notification = new EventEmitter();
         notification.model = notificationModel;
         notification.dismiss = () => {
@@ -333,6 +374,7 @@ export default class NotificationAPI extends EventEmitter {
 
     /**
      * @private
+     * @param {Notification | undefined} notification
      */
     _setActiveNotification(notification) {
         this.activeNotification = notification;

src/api/objects/ObjectAPI.js

@@ -193,23 +193,27 @@ export default class ObjectAPI {
      * @memberof module:openmct.ObjectProvider#
      * @param {string} key the key for the domain object to load
      * @param {AbortController.signal} abortSignal (optional) signal to abort fetch requests
+     * @param {boolean} forceRemote defaults to false. If true, will skip cached and
+     *          dirty/in-transaction objects use and the provider.get method
      * @returns {Promise} a promise which will resolve when the domain object
      *          has been saved, or be rejected if it cannot be saved
      */
-    get(identifier, abortSignal) {
+    get(identifier, abortSignal, forceRemote = false) {
         let keystring = this.makeKeyString(identifier);
 
-        if (this.cache[keystring] !== undefined) {
-            return this.cache[keystring];
-        }
+        if (!forceRemote) {
+            if (this.cache[keystring] !== undefined) {
+                return this.cache[keystring];
+            }
 
-        identifier = utils.parseKeyString(identifier);
+            identifier = utils.parseKeyString(identifier);
 
-        if (this.isTransactionActive()) {
-            let dirtyObject = this.transaction.getDirtyObject(identifier);
+            if (this.isTransactionActive()) {
+                let dirtyObject = this.transaction.getDirtyObject(identifier);
 
-            if (dirtyObject) {
-                return Promise.resolve(dirtyObject);
+                if (dirtyObject) {
+                    return Promise.resolve(dirtyObject);
+                }
             }
         }
 
@@ -391,7 +395,6 @@ export default class ObjectAPI {
                 lastPersistedTime = domainObject.persisted;
                 const persistedTime = Date.now();
                 this.#mutate(domainObject, 'persisted', persistedTime);
-
                 savedObjectPromise = provider.update(domainObject);
             }
 
@@ -399,7 +402,7 @@ export default class ObjectAPI {
                 savedObjectPromise.then(response => {
                     savedResolve(response);
                 }).catch((error) => {
-                    if (lastPersistedTime !== undefined) {
+                    if (!isNewObject) {
                         this.#mutate(domainObject, 'persisted', lastPersistedTime);
                     }
 
@@ -412,11 +415,12 @@ export default class ObjectAPI {
 
         return result.catch(async (error) => {
             if (error instanceof this.errors.Conflict) {
-                this.openmct.notifications.error(`Conflict detected while saving ${this.makeKeyString(domainObject.identifier)}`);
+                // Synchronized objects will resolve their own conflicts
+                if (this.SYNCHRONIZED_OBJECT_TYPES.includes(domainObject.type)) {
+                    this.openmct.notifications.info(`Conflict detected while saving "${this.makeKeyString(domainObject.name)}", attempting to resolve`);
+                } else {
+                    this.openmct.notifications.error(`Conflict detected while saving ${this.makeKeyString(domainObject.identifier)}`);
 
-                // Synchronized objects will resolve their own conflicts, so
-                // bypass the refresh here and throw the error.
-                if (!this.SYNCHRONIZED_OBJECT_TYPES.includes(domainObject.type)) {
                     if (this.isTransactionActive()) {
                         this.endTransaction();
                     }

src/api/overlays/components/OverlayComponent.vue

@@ -15,6 +15,8 @@
             ref="element"
             class="c-overlay__contents js-notebook-snapshot-item-wrapper"
             tabindex="0"
+            aria-modal="true"
+            role="dialog"
         ></div>
         <div
             v-if="buttons"

src/plugins/imagery/components/ImageryView.vue

@@ -788,7 +788,7 @@ export default {
             }
         },
         persistVisibleLayers() {
-            if (this.domainObject.configuration) {
+            if (this.domainObject.configuration && this.openmct.objects.supportsMutation(this.domainObject.identifier)) {
                 this.openmct.objects.mutate(this.domainObject, 'configuration.layers', this.layers);
             }
 

src/plugins/imagery/components/RelatedTelemetry/RelatedTelemetry.js

@@ -28,6 +28,7 @@ function copyRelatedMetadata(metadata) {
     return copiedMetadata;
 }
 
+import IndependentTimeContext from "@/api/time/IndependentTimeContext";
 export default class RelatedTelemetry {
 
     constructor(openmct, domainObject, telemetryKeys) {
@@ -88,9 +89,31 @@ export default class RelatedTelemetry {
             this[key].historicalDomainObject = await this._openmct.objects.get(this[key].historical.telemetryObjectId);
 
             this[key].requestLatestFor = async (datum) => {
-                const options = {
+                // We need to create a throwaway time context and pass it along
+                // as a request option. We do this to "trick" the Time API
+                // into thinking we are in fixed time mode in order to bypass this logic:
+                // https://github.com/akhenry/openmct-yamcs/blob/1060d42ebe43bf346dac0f6a8068cb288ade4ba4/src/providers/historical-telemetry-provider.js#L59
+                // Context: https://github.com/akhenry/openmct-yamcs/pull/217
+                const ephemeralContext = new IndependentTimeContext(
+                    this._openmct,
+                    this._openmct.time,
+                    [this[key].historicalDomainObject]
+                );
+
+                // Stop following the global context, stop the clock,
+                // and set bounds.
+                ephemeralContext.resetContext();
+                const newBounds = {
                     start: this._openmct.time.bounds().start,
-                    end: this._parseTime(datum),
+                    end: this._parseTime(datum)
+                };
+                ephemeralContext.stopClock();
+                ephemeralContext.bounds(newBounds);
+
+                const options = {
+                    start: newBounds.start,
+                    end: newBounds.end,
+                    timeContext: ephemeralContext,
                     strategy: 'latest'
                 };
                 let results = await this._openmct.telemetry

src/plugins/notebook/components/Notebook.vue

@@ -50,7 +50,7 @@
         <Sidebar
             ref="sidebar"
             class="c-notebook__nav c-sidebar c-drawer c-drawer--align-left"
-            :class="[{'is-expanded': showNav}, {'c-drawer--push': !sidebarCoversEntries}, {'c-drawer--overlays': sidebarCoversEntries}]"
+            :class="sidebarClasses"
             :default-page-id="defaultPageId"
             :selected-page-id="getSelectedPageId()"
             :default-section-id="defaultSectionId"
@@ -123,6 +123,7 @@
             </div>
             <div
                 v-if="selectedPage && !selectedPage.isLocked"
+                :class="{ 'disabled': activeTransaction }"
                 class="c-notebook__drag-area icon-plus"
                 @click="newEntry()"
                 @dragover="dragOver"
@@ -133,6 +134,11 @@
                     To start a new entry, click here or drag and drop any object
                 </span>
             </div>
+            <progress-bar
+                v-if="savingTransaction"
+                class="c-telemetry-table__progress-bar"
+                :model="{ progressPerc: undefined }"
+            />
             <div
                 v-if="selectedPage && selectedPage.isLocked"
                 class="c-notebook__page-locked"
@@ -183,6 +189,7 @@ import NotebookEntry from './NotebookEntry.vue';
 import Search from '@/ui/components/search.vue';
 import SearchResults from './SearchResults.vue';
 import Sidebar from './Sidebar.vue';
+import ProgressBar from '../../../ui/components/ProgressBar.vue';
 import { clearDefaultNotebook, getDefaultNotebook, setDefaultNotebook, setDefaultNotebookSectionId, setDefaultNotebookPageId } from '../utils/notebook-storage';
 import { addNotebookEntry, createNewEmbed, getEntryPosById, getNotebookEntries, mutateObject } from '../utils/notebook-entries';
 import { saveNotebookImageDomainObject, updateNamespaceOfDomainObject } from '../utils/notebook-image';
@@ -200,7 +207,8 @@ export default {
         NotebookEntry,
         Search,
         SearchResults,
-        Sidebar
+        Sidebar,
+        ProgressBar
     },
     inject: ['agent', 'openmct', 'snapshotContainer'],
     props: {
@@ -225,7 +233,9 @@ export default {
             showNav: false,
             sidebarCoversEntries: false,
             filteredAndSortedEntries: [],
-            notebookAnnotations: {}
+            notebookAnnotations: {},
+            activeTransaction: false,
+            savingTransaction: false
         };
     },
     computed: {
@@ -270,6 +280,20 @@ export default {
 
             return this.sections[0];
         },
+        sidebarClasses() {
+            let sidebarClasses = [];
+            if (this.showNav) {
+                sidebarClasses.push('is-expanded');
+            }
+
+            if (this.sidebarCoversEntries) {
+                sidebarClasses.push('c-drawer--overlays');
+            } else {
+                sidebarClasses.push('c-drawer--push');
+            }
+
+            return sidebarClasses;
+        },
         showLockButton() {
             const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
 
@@ -297,6 +321,8 @@ export default {
         this.formatSidebar();
         this.setSectionAndPageFromUrl();
 
+        this.transaction = null;
+
         window.addEventListener('orientationchange', this.formatSidebar);
         window.addEventListener('hashchange', this.setSectionAndPageFromUrl);
         this.filterAndSortEntries();
@@ -749,6 +775,7 @@ export default {
             return section.id;
         },
         async newEntry(embed = null) {
+            this.startTransaction();
             this.resetSearch();
             const notebookStorage = this.createNotebookStorageObject();
             this.updateDefaultNotebook(notebookStorage);
@@ -891,20 +918,34 @@ export default {
         },
         startTransaction() {
             if (!this.openmct.objects.isTransactionActive()) {
+                this.activeTransaction = true;
                 this.transaction = this.openmct.objects.startTransaction();
             }
         },
         async saveTransaction() {
-            if (this.transaction !== undefined) {
-                await this.transaction.commit();
-                this.openmct.objects.endTransaction();
+            if (this.transaction !== null) {
+                this.savingTransaction = true;
+                try {
+                    await this.transaction.commit();
+                } finally {
+                    this.endTransaction();
+                }
             }
         },
         async cancelTransaction() {
-            if (this.transaction !== undefined) {
-                await this.transaction.cancel();
-                this.openmct.objects.endTransaction();
+            if (this.transaction !== null) {
+                try {
+                    await this.transaction.cancel();
+                } finally {
+                    this.endTransaction();
+                }
             }
+        },
+        endTransaction() {
+            this.openmct.objects.endTransaction();
+            this.transaction = null;
+            this.savingTransaction = false;
+            this.activeTransaction = false;
         }
     }
 };

src/plugins/notebook/monkeyPatchObjectAPIForNotebooks.js

@@ -74,19 +74,22 @@ async function resolveNotebookTagConflicts(localAnnotation, openmct) {
 
 async function resolveNotebookEntryConflicts(localMutable, openmct) {
     if (localMutable.configuration.entries) {
+        const FORCE_REMOTE = true;
         const localEntries = structuredClone(localMutable.configuration.entries);
-        const remoteMutable = await openmct.objects.getMutable(localMutable.identifier);
-        applyLocalEntries(remoteMutable, localEntries, openmct);
-        openmct.objects.destroyMutable(remoteMutable);
+        const remoteObject = await openmct.objects.get(localMutable.identifier, undefined, FORCE_REMOTE);
+
+        return applyLocalEntries(remoteObject, localEntries, openmct);
     }
 
     return true;
 }
 
-function applyLocalEntries(mutable, entries, openmct) {
+function applyLocalEntries(remoteObject, entries, openmct) {
+    let shouldSave = false;
+
     Object.entries(entries).forEach(([sectionKey, pagesInSection]) => {
         Object.entries(pagesInSection).forEach(([pageKey, localEntries]) => {
-            const remoteEntries = mutable.configuration.entries[sectionKey][pageKey];
+            const remoteEntries = remoteObject.configuration.entries[sectionKey][pageKey];
             const mergedEntries = [].concat(remoteEntries);
             let shouldMutate = false;
 
@@ -110,8 +113,13 @@ function applyLocalEntries(mutable, entries, openmct) {
             });
 
             if (shouldMutate) {
-                openmct.objects.mutate(mutable, `configuration.entries.${sectionKey}.${pageKey}`, mergedEntries);
+                shouldSave = true;
+                openmct.objects.mutate(remoteObject, `configuration.entries.${sectionKey}.${pageKey}`, mergedEntries);
             }
         });
     });
+
+    if (shouldSave) {
+        return openmct.objects.save(remoteObject);
+    }
 }

src/plugins/notificationIndicator/components/NotificationIndicator.vue

@@ -5,10 +5,16 @@
     :class="[severityClass]"
 >
     <span class="c-indicator__label">
-        <button @click="toggleNotificationsList(true)">
+        <button
+            :aria-label="'Review ' + notificationsCountMessage(notifications.length)"
+            @click="toggleNotificationsList(true)"
+        >
             {{ notificationsCountMessage(notifications.length) }}
         </button>
-        <button @click="dismissAllNotifications()">
+        <button
+            aria-label="Clear all notifications"
+            @click="dismissAllNotifications()"
+        >
             Clear All
         </button>
     </span>

src/plugins/notificationIndicator/components/NotificationMessage.vue

@@ -1,6 +1,7 @@
 <template>
 <div
     class="c-message"
+    role="listitem"
     :class="'message-severity-' + notification.model.severity"
 >
     <div class="c-ne__time-and-content">
@@ -20,6 +21,11 @@
                 </div>
             </div>
         </div>
+        <button
+            :aria-label="'Dismiss notification of ' + notification.model.message"
+            class="c-click-icon c-overlay__close-button icon-x"
+            @click="dismiss()"
+        ></button>
         <div class="c-overlay__button-bar">
             <button
                 v-for="(dialogOption, index) in notification.model.options"
@@ -52,6 +58,14 @@ export default {
         notification: {
             type: Object,
             required: true
+        },
+        closeOverlay: {
+            type: Function,
+            required: true
+        },
+        notificationsCount: {
+            type: Number,
+            required: true
         }
     },
     data() {
@@ -79,6 +93,12 @@ export default {
         updateProgressBar(progressPerc, progressText) {
             this.progressPerc = progressPerc;
             this.progressText = progressText;
+        },
+        dismiss() {
+            this.notification.dismiss();
+            if (this.notificationsCount === 1) {
+                this.closeOverlay();
+            }
         }
     }
 };

src/plugins/notificationIndicator/components/NotificationsList.vue

@@ -6,11 +6,16 @@
             {{ notificationsCountDisplayMessage(notifications.length) }}
         </div>
     </div>
-    <div class="w-messages c-overlay__messages">
+    <div
+        role="list"
+        class="w-messages c-overlay__messages"
+    >
         <notification-message
             v-for="notification in notifications"
             :key="notification.model.timestamp"
+            :close-overlay="closeOverlay"
             :notification="notification"
+            :notifications-count="notifications.length"
         />
     </div>
 </div>
@@ -57,6 +62,9 @@ export default {
                 }
             });
         },
+        closeOverlay() {
+            this.overlay.dismiss();
+        },
         notificationsCountDisplayMessage(count) {
             if (count > 1 || count === 0) {
                 return `Displaying ${count} notifications`;

src/plugins/objectMigration/plugin.js

@@ -36,8 +36,8 @@ export default function () {
         }
 
         let wrappedFunction = openmct.objects.get;
-        openmct.objects.get = function migrate(identifier) {
-            return wrappedFunction.apply(openmct.objects, [identifier])
+        openmct.objects.get = function migrate() {
+            return wrappedFunction.apply(openmct.objects, [...arguments])
                 .then(function (object) {
                     if (needsMigration(object)) {
                         migrateObject(object)

src/plugins/persistence/couch/CouchChangesFeed.js

@@ -28,6 +28,7 @@
                 connected = false;
                 // stop listening for events
                 couchEventSource.removeEventListener('message', self.onCouchMessage);
+                couchEventSource.close();
                 console.debug('🚪 Closed couch connection 🚪');
 
                 return;

src/plugins/persistence/couch/CouchObjectProvider.js

@@ -96,8 +96,13 @@ class CouchObjectProvider {
             let keyString = this.openmct.objects.makeKeyString(objectIdentifier);
             //TODO: Optimize this so that we don't 'get' the object if it's current revision (from this.objectQueue) is the same as the one we already have.
             let observersForObject = this.observers[keyString];
+            let isInTransaction = false;
 
-            if (observersForObject) {
+            if (this.openmct.objects.isTransactionActive()) {
+                isInTransaction = this.openmct.objects.transaction.getDirtyObject(objectIdentifier);
+            }
+
+            if (observersForObject && !isInTransaction) {
                 observersForObject.forEach(async (observer) => {
                     const updatedObject = await this.get(objectIdentifier);
                     if (this.isSynchronizedObject(updatedObject)) {
@@ -219,7 +224,12 @@ class CouchObjectProvider {
                 console.error(error.message);
                 throw new Error(`CouchDB Error - No response"`);
             } else {
-                console.error(error.message);
+                if (body?.model && isNotebookOrAnnotationType(body.model)) {
+                    // warn since we handle conflicts for notebooks
+                    console.warn(error.message);
+                } else {
+                    console.error(error.message);
+                }
 
                 throw error;
             }

src/ui/components/TimeSystemAxis.vue

@@ -101,7 +101,8 @@ export default {
                 if (nowMarker) {
                     nowMarker.classList.remove('hidden');
                     nowMarker.style.height = this.contentHeight + 'px';
-                    const now = this.xScale(Date.now());
+                    const nowTimeStamp = this.openmct.time.clock().currentValue();
+                    const now = this.xScale(nowTimeStamp);
                     nowMarker.style.left = now + this.offset + 'px';
                 }
             }

src/ui/layout/status-bar/NotificationBanner.vue

@@ -20,6 +20,8 @@
 <div
     v-if="activeModel.message"
     class="c-message-banner"
+    role="alert"
+    :aria-live="activeModel.severity === 'error' ? 'assertive' : 'polite'"
     :class="[
         activeModel.severity,
         {
@@ -42,6 +44,7 @@
     />
     <button
         class="c-message-banner__close-button c-click-icon icon-x-in-circle"
+        aria-label="Dismiss"
         @click.stop="dismiss()"
     ></button>
 </div>

webpack.common.js

@@ -1,160 +0,0 @@
-/* global __dirname module */
-
-/*
-This is the OpenMCT common webpack file. It is imported by the other three webpack configurations:
- - webpack.prod.js - the production configuration for OpenMCT (default)
- - webpack.dev.js - the development configuration for OpenMCT
- - webpack.coverage.js - imports webpack.dev.js and adds code coverage
-There are separate npm scripts to use these configurations, though simply running `npm install`
-will use the default production configuration.
-*/
-const path = require('path');
-const packageDefinition = require('./package.json');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const webpack = require('webpack');
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-
-const {VueLoaderPlugin} = require('vue-loader');
-let gitRevision = 'error-retrieving-revision';
-let gitBranch = 'error-retrieving-branch';
-
-try {
-    gitRevision = require('child_process')
-        .execSync('git rev-parse HEAD')
-        .toString().trim();
-    gitBranch = require('child_process')
-        .execSync('git rev-parse --abbrev-ref HEAD')
-        .toString().trim();
-} catch (err) {
-    console.warn(err);
-}
-
-/** @type {import('webpack').Configuration} */
-const config = {
-    entry: {
-        openmct: './openmct.js',
-        generatorWorker: './example/generator/generatorWorker.js',
-        couchDBChangesFeed: './src/plugins/persistence/couch/CouchChangesFeed.js',
-        inMemorySearchWorker: './src/api/objects/InMemorySearchWorker.js',
-        espressoTheme: './src/plugins/themes/espresso-theme.scss',
-        snowTheme: './src/plugins/themes/snow-theme.scss',
-    },
-    output: {
-        globalObject: 'this',
-        filename: '[name].js',
-        path: path.resolve(__dirname, 'dist'),
-        library: 'openmct',
-        libraryTarget: 'umd',
-        publicPath: '',
-        hashFunction: 'xxhash64',
-        clean: true
-    },
-    resolve: {
-        alias: {
-            "@": path.join(__dirname, "src"),
-            "legacyRegistry": path.join(__dirname, "src/legacyRegistry"),
-            "saveAs": "file-saver/src/FileSaver.js",
-            "csv": "comma-separated-values",
-            "EventEmitter": "eventemitter3",
-            "bourbon": "bourbon.scss",
-            "plotly-basic": "plotly.js-basic-dist",
-            "plotly-gl2d": "plotly.js-gl2d-dist",
-            "d3-scale": path.join(__dirname, "node_modules/d3-scale/dist/d3-scale.min.js"),
-            "printj": path.join(__dirname, "node_modules/printj/dist/printj.min.js"),
-            "styles": path.join(__dirname, "src/styles"),
-            "MCT": path.join(__dirname, "src/MCT"),
-            "testUtils": path.join(__dirname, "src/utils/testUtils.js"),
-            "objectUtils": path.join(__dirname, "src/api/objects/object-utils.js"),
-            "utils": path.join(__dirname, "src/utils")
-        }
-    },
-    plugins: [
-        new webpack.DefinePlugin({
-            __OPENMCT_VERSION__: `'${packageDefinition.version}'`,
-            __OPENMCT_BUILD_DATE__: `'${new Date()}'`,
-            __OPENMCT_REVISION__: `'${gitRevision}'`,
-            __OPENMCT_BUILD_BRANCH__: `'${gitBranch}'`
-        }),
-        new VueLoaderPlugin(),
-        new CopyWebpackPlugin({
-            patterns: [
-                {
-                    from: 'src/images/favicons',
-                    to: 'favicons'
-                },
-                {
-                    from: './index.html',
-                    transform: function (content) {
-                        return content.toString().replace(/dist\//g, '');
-                    }
-                },
-                {
-                    from: 'src/plugins/imagery/layers',
-                    to: 'imagery'
-                }
-            ]
-        }),
-        new MiniCssExtractPlugin({
-            filename: '[name].css',
-            chunkFilename: '[name].css'
-        })
-    ],
-    module: {
-        rules: [
-            {
-                test: /\.(sc|sa|c)ss$/,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    {
-                        loader: 'css-loader'
-                    },
-                    {
-                        loader: 'resolve-url-loader'
-                    },
-                    {
-                        loader: 'sass-loader',
-                        options: {sourceMap: true }
-                    }
-                ]
-            },
-            {
-                test: /\.vue$/,
-                use: 'vue-loader'
-            },
-            {
-                test: /\.html$/,
-                type: 'asset/source'
-            },
-            {
-                test: /\.(jpg|jpeg|png|svg)$/,
-                type: 'asset/resource',
-                generator: {
-                    filename: 'images/[name][ext]'
-                }
-            },
-            {
-                test: /\.ico$/,
-                type: 'asset/resource',
-                generator: {
-                    filename: 'icons/[name][ext]'
-                }
-            },
-            {
-                test: /\.(woff|woff2?|eot|ttf)$/,
-                type: 'asset/resource',
-                generator: {
-                    filename: 'fonts/[name][ext]'
-                }
-            }
-        ]
-    },
-    stats: 'errors-warnings',
-    performance: {
-        // We should eventually consider chunking to decrease
-        // these values
-        maxEntrypointSize: 25000000,
-        maxAssetSize: 25000000
-    }
-};
-
-module.exports = config;