found some more "destroyed" that needed to be "unmounted" and fixed conductor code

e2e/README.md

@@ -276,36 +276,14 @@ Skipping based on browser version (Rarely used): <https://github.com/microsoft/p
   - Leverage `await page.goto('./', { waitUntil: 'networkidle' });`
   - Avoid repeated setup to test to test a single assertion. Write longer tests with multiple soft assertions.
 
-### How to write a great test (WIP)
-
-- Use our [App Actions](./appActions.js) for performing common actions whenever applicable.
-- If you create an object outside of using the `createDomainObjectWithDefaults` App Action, make sure to fill in the 'Notes' section of your object with `page.testNotes`:
-
-  ```js
-  // Fill the "Notes" section with information about the
-  // currently running test and its project.
-  const { testNotes } = page;
-  const notesInput = page.locator('form[name="mctForm"] #notes-textarea');
-  await notesInput.fill(testNotes);
-  ```
+### How to write a great test (TODO)
 
 #### How to write a great visual test (TODO)
 
-#### How to write a great network test
-
-- Where possible, it is best to mock out third-party network activity to ensure we are testing application behavior of Open MCT.
-- It is best to be as specific as possible about the expected network request/response structures in creating your mocks.
-- Make sure to only mock requests which are relevant to the specific behavior being tested.
-- Where possible, network requests and responses should be treated in an order-agnostic manner, as the order in which certain requests/responses happen is dynamic and subject to change.
-
-Some examples of mocking network responses in regards to CouchDB can be found in our [couchdb.e2e.spec.js](./tests/functional/couchdb.e2e.spec.js) test file.
-
 ### Best Practices
 
 For now, our best practices exist as self-tested, living documentation in our [exampleTemplate.e2e.spec.js](./tests/framework/exampleTemplate.e2e.spec.js) file.
 
-For best practices with regards to mocking network responses, see our [couchdb.e2e.spec.js](./tests/functional/couchdb.e2e.spec.js) file.
-
 ### Tips & Tricks (TODO)
 
 The following contains a list of tips and tricks which don't exactly fit into a FAQ or Best Practices doc.

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

@@ -27,7 +27,7 @@
 
 const { test, expect } = require('../../pluginFixtures');
 
-test.describe("CouchDB Status Indicator with mocked responses @couchdb", () => {
+test.describe("CouchDB Status Indicator @couchdb", () => {
     test.use({ failOnConsoleError: false });
     //TODO BeforeAll Verify CouchDB Connectivity with APIContext
     test('Shows green if connected', async ({ page }) => {
@@ -71,41 +71,38 @@ test.describe("CouchDB Status Indicator with mocked responses @couchdb", () => {
     });
 });
 
-test.describe("CouchDB initialization with mocked responses @couchdb", () => {
+test.describe("CouchDB initialization @couchdb", () => {
     test.use({ failOnConsoleError: false });
     test("'My Items' folder is created if it doesn't exist", async ({ page }) => {
-        const mockedMissingObjectResponsefromCouchDB = {
-            status: 404,
-            contentType: 'application/json',
-            body: JSON.stringify({})
-        };
+        // Store any relevant PUT requests that happen on the page
+        const createMineFolderRequests = [];
+        page.on('request', req => {
+            // eslint-disable-next-line playwright/no-conditional-in-test
+            if (req.method() === 'PUT' && req.url().endsWith('openmct/mine')) {
+                createMineFolderRequests.push(req);
+            }
+        });
 
-        // Override the first request to GET openmct/mine to return a 404.
-        // This simulates the case of starting Open MCT with a fresh database
-        // and no "My Items" folder created yet.
-        await page.route('**/mine', route => {
-            route.fulfill(mockedMissingObjectResponsefromCouchDB);
+        // Override the first request to GET openmct/mine to return a 404
+        await page.route('**/openmct/mine', route => {
+            route.fulfill({
+                status: 404,
+                contentType: 'application/json',
+                body: JSON.stringify({})
+            });
         }, { times: 1 });
 
-        // Set up promise to verify that a PUT request to create "My Items"
-        // folder was made.
-        const putMineFolderRequest = page.waitForRequest(req =>
-            req.url().endsWith('/mine')
-            && req.method() === 'PUT');
-
-        // Set up promise to verify that a GET request to retrieve "My Items"
-        // folder was made.
-        const getMineFolderRequest = page.waitForRequest(req =>
-            req.url().endsWith('/mine')
-            && req.method() === 'GET');
-
-        // Go to baseURL.
+        // Go to baseURL
         await page.goto('./', { waitUntil: 'networkidle' });
 
-        // Wait for both requests to resolve.
-        await Promise.all([
-            putMineFolderRequest,
-            getMineFolderRequest
-        ]);
+        // Verify that error banner is displayed
+        const bannerMessage = await page.locator('.c-message-banner__message').innerText();
+        expect(bannerMessage).toEqual('Failed to retrieve object mine');
+
+        // Verify that a PUT request to create "My Items" folder was made
+        await expect.poll(() => createMineFolderRequests.length, {
+            message: 'Verify that PUT request to create "mine" folder was made',
+            timeout: 1000
+        }).toBeGreaterThanOrEqual(1);
     });
 });

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

@@ -24,9 +24,8 @@
 This test suite is dedicated to tests which verify form functionality in isolation
 */
 
-const { test, expect } = require('../../pluginFixtures');
+const { test, expect } = require('../../baseFixtures');
 const { createDomainObjectWithDefaults } = require('../../appActions');
-const genUuid = require('uuid').v4;
 const path = require('path');
 
 const TEST_FOLDER = 'test folder';
@@ -129,108 +128,6 @@ test.describe('Persistence operations @couchdb', () => {
             timeout: 1000
         }).toEqual(1);
     });
-    test('Can create an object after a conflict error @couchdb @2p', async ({ page }) => {
-        test.info().annotations.push({
-            type: 'issue',
-            description: 'https://github.com/nasa/openmct/issues/5982'
-        });
-
-        const page2 = await page.context().newPage();
-
-        // Both pages: Go to baseURL
-        await Promise.all([
-            page.goto('./', { waitUntil: 'networkidle' }),
-            page2.goto('./', { waitUntil: 'networkidle' })
-        ]);
-
-        // Both pages: Click the Create button
-        await Promise.all([
-            page.click('button:has-text("Create")'),
-            page2.click('button:has-text("Create")')
-        ]);
-
-        // Both pages: Click "Clock" in the Create menu
-        await Promise.all([
-            page.click(`li[role='menuitem']:text("Clock")`),
-            page2.click(`li[role='menuitem']:text("Clock")`)
-        ]);
-
-        // Generate unique names for both objects
-        const nameInput = page.locator('form[name="mctForm"] .first input[type="text"]');
-        const nameInput2 = page2.locator('form[name="mctForm"] .first input[type="text"]');
-
-        // Both pages: Fill in the 'Name' form field.
-        await Promise.all([
-            nameInput.fill(""),
-            nameInput.fill(`Clock:${genUuid()}`),
-            nameInput2.fill(""),
-            nameInput2.fill(`Clock:${genUuid()}`)
-        ]);
-
-        // Both pages: Fill the "Notes" section with information about the
-        // currently running test and its project.
-        const testNotes = page.testNotes;
-        const notesInput = page.locator('form[name="mctForm"] #notes-textarea');
-        const notesInput2 = page2.locator('form[name="mctForm"] #notes-textarea');
-        await Promise.all([
-            notesInput.fill(testNotes),
-            notesInput2.fill(testNotes)
-        ]);
-
-        // Page 2: Click "OK" to create the domain object and wait for navigation.
-        // This will update the composition of the parent folder, setting the
-        // conditions for a conflict error from the first page.
-        await Promise.all([
-            page2.waitForLoadState(),
-            page2.click('[aria-label="Save"]'),
-            // Wait for Save Banner to appear
-            page2.waitForSelector('.c-message-banner__message')
-        ]);
-
-        // Close Page 2, we're done with it.
-        await page2.close();
-
-        // Page 1: Click "OK" to create the domain object and wait for navigation.
-        // This will trigger a conflict error upon attempting to update
-        // the composition of the parent folder.
-        await Promise.all([
-            page.waitForLoadState(),
-            page.click('[aria-label="Save"]'),
-            // Wait for Save Banner to appear
-            page.waitForSelector('.c-message-banner__message')
-        ]);
-
-        // Page 1: Verify that the conflict has occurred and an error notification is displayed.
-        await expect(page.locator('.c-message-banner__message', {
-            hasText: "Conflict detected while saving mine"
-        })).toBeVisible();
-
-        // Page 1: Start logging console errors from this point on
-        let errors = [];
-        page.on('console', (msg) => {
-            if (msg.type() === 'error') {
-                errors.push(msg.text());
-            }
-        });
-
-        // Page 1: Try to create a clock with the page that received the conflict.
-        const clockAfterConflict = await createDomainObjectWithDefaults(page, {
-            type: 'Clock'
-        });
-
-        // Page 1: Wait for save progress dialog to appear/disappear
-        await page.locator('.c-message-banner__message', {
-            hasText: 'Do not navigate away from this page or close this browser tab while this message is displayed.',
-            state: 'visible'
-        }).waitFor({ state: 'hidden' });
-
-        // Page 1: Navigate to 'My Items' and verify that the second clock was created
-        await page.goto('./#/browse/mine');
-        await expect(page.locator(`.c-grid-item__name[title="${clockAfterConflict.name}"]`)).toBeVisible();
-
-        // Verify no console errors occurred
-        expect(errors).toHaveLength(0);
-    });
 });
 
 test.describe('Form Correctness by Object Type', () => {

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

@@ -26,7 +26,7 @@
 */
 
 const { test, expect } = require('../../../../pluginFixtures');
-const { createDomainObjectWithDefaults} = require('../../../../appActions');
+const { createDomainObjectWithDefaults } = require('../../../../appActions');
 
 test.describe('Plot Integrity Testing @unstable', () => {
     let sineWaveGeneratorObject;
@@ -40,6 +40,7 @@ test.describe('Plot Integrity Testing @unstable', () => {
     test('Plots do not re-request data when a plot is clicked', async ({ page }) => {
         //Navigate to Sine Wave Generator
         await page.goto(sineWaveGeneratorObject.url);
+        //Capture the number of plots points and store as const name numberOfPlotPoints
         //Click on the plot canvas
         await page.locator('canvas').nth(1).click();
         //No request was made to get historical data
@@ -50,90 +51,4 @@ test.describe('Plot Integrity Testing @unstable', () => {
         });
         expect(createMineFolderRequests.length).toEqual(0);
     });
-
-    test('Plot is rendered when infinity values exist', async ({ page }) => {
-        // Edit Plot
-        await editSineWaveToUseInfinityOption(page, sineWaveGeneratorObject);
-
-        //Get pixel data from Canvas
-        const plotPixelSize = await getCanvasPixelsWithData(page);
-        expect(plotPixelSize).toBeGreaterThan(0);
-    });
 });
-
-/**
- * This function edits a sine wave generator with the default options and enables the infinity values option.
- *
- * @param {import('@playwright/test').Page} page
- * @param {import('../../../../appActions').CreateObjectInfo} sineWaveGeneratorObject
- * @returns {Promise<CreatedObjectInfo>} An object containing information about the edited domain object.
- */
-async function editSineWaveToUseInfinityOption(page, sineWaveGeneratorObject) {
-    await page.goto(sineWaveGeneratorObject.url);
-    // Edit LAD table
-    await page.locator('[title="More options"]').click();
-    await page.locator('[title="Edit properties of this object."]').click();
-    // Modify the infinity option to true
-    const infinityInput = page.locator('[aria-label="Include Infinity Values"]');
-    await infinityInput.click();
-
-    // 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')
-    ]);
-
-    // FIXME: Changes to SWG properties should be reflected on save, but they're not?
-    // Thus, navigate away and back to the object.
-    await page.goto('./#/browse/mine');
-    await page.goto(sineWaveGeneratorObject.url);
-
-    await page.locator('c-progress-bar c-telemetry-table__progress-bar').waitFor({
-        state: 'hidden'
-    });
-
-    // FIXME: The progress bar disappears on series data load, not on plot render,
-    // so wait for a half a second before evaluating the canvas.
-    // eslint-disable-next-line playwright/no-wait-for-timeout
-    await page.waitForTimeout(500);
-}
-
-/**
- * @param {import('@playwright/test').Page} page
- */
-async function getCanvasPixelsWithData(page) {
-    const getTelemValuePromise = new Promise(resolve => page.exposeFunction('getCanvasValue', resolve));
-
-    await page.evaluate(() => {
-        // The document canvas is where the plot points and lines are drawn.
-        // The only way to access the canvas is using document (using page.evaluate)
-        let data;
-        let canvas;
-        let ctx;
-        canvas = document.querySelector('canvas');
-        ctx = canvas.getContext('2d');
-        data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
-        const imageDataValues = Object.values(data);
-        let plotPixels = [];
-        // Each pixel consists of four values within the ImageData.data array. The for loop iterates by multiples of four.
-        // The values associated with each pixel are R (red), G (green), B (blue), and A (alpha), in that order.
-        for (let i = 0; i < imageDataValues.length;) {
-            if (imageDataValues[i] > 0) {
-                plotPixels.push({
-                    startIndex: i,
-                    endIndex: i + 3,
-                    value: `rgb(${imageDataValues[i]}, ${imageDataValues[i + 1]}, ${imageDataValues[i + 2]}, ${imageDataValues[i + 3]})`
-                });
-            }
-
-            i = i + 4;
-
-        }
-
-        window.getCanvasValue(plotPixels.length);
-    });
-
-    return getTelemValuePromise;
-}

example/generator/GeneratorProvider.js

@@ -33,8 +33,7 @@ define([
         dataRateInHz: 1,
         randomness: 0,
         phase: 0,
-        loadDelay: 0,
-        infinityValues: false
+        loadDelay: 0
     };
 
     function GeneratorProvider(openmct) {
@@ -57,8 +56,7 @@ define([
             'dataRateInHz',
             'randomness',
             'phase',
-            'loadDelay',
-            'infinityValues'
+            'loadDelay'
         ];
 
         request = request || {};

example/generator/generatorWorker.js

@@ -76,10 +76,10 @@
                             name: data.name,
                             utc: nextStep,
                             yesterday: nextStep - 60 * 60 * 24 * 1000,
-                            sin: sin(nextStep, data.period, data.amplitude, data.offset, data.phase, data.randomness, data.infinityValues),
+                            sin: sin(nextStep, data.period, data.amplitude, data.offset, data.phase, data.randomness),
                             wavelengths: wavelengths(),
                             intensities: intensities(),
-                            cos: cos(nextStep, data.period, data.amplitude, data.offset, data.phase, data.randomness, data.infinityValues)
+                            cos: cos(nextStep, data.period, data.amplitude, data.offset, data.phase, data.randomness)
                         }
                     });
                     nextStep += step;
@@ -117,7 +117,6 @@
         var phase = request.phase;
         var randomness = request.randomness;
         var loadDelay = Math.max(request.loadDelay, 0);
-        var infinityValues = request.infinityValues;
 
         var step = 1000 / dataRateInHz;
         var nextStep = start - (start % step) + step;
@@ -128,10 +127,10 @@
             data.push({
                 utc: nextStep,
                 yesterday: nextStep - 60 * 60 * 24 * 1000,
-                sin: sin(nextStep, period, amplitude, offset, phase, randomness, infinityValues),
+                sin: sin(nextStep, period, amplitude, offset, phase, randomness),
                 wavelengths: wavelengths(),
                 intensities: intensities(),
-                cos: cos(nextStep, period, amplitude, offset, phase, randomness, infinityValues)
+                cos: cos(nextStep, period, amplitude, offset, phase, randomness)
             });
         }
 
@@ -156,20 +155,12 @@
         });
     }
 
-    function cos(timestamp, period, amplitude, offset, phase, randomness, infinityValues) {
-        if (infinityValues && Math.random() > 0.5) {
-            return Number.POSITIVE_INFINITY;
-        }
-
+    function cos(timestamp, period, amplitude, offset, phase, randomness) {
         return amplitude
             * Math.cos(phase + (timestamp / period / 1000 * Math.PI * 2)) + (amplitude * Math.random() * randomness) + offset;
     }
 
-    function sin(timestamp, period, amplitude, offset, phase, randomness, infinityValues) {
-        if (infinityValues && Math.random() > 0.5) {
-            return Number.POSITIVE_INFINITY;
-        }
-
+    function sin(timestamp, period, amplitude, offset, phase, randomness) {
         return amplitude
             * Math.sin(phase + (timestamp / period / 1000 * Math.PI * 2)) + (amplitude * Math.random() * randomness) + offset;
     }

example/generator/plugin.js

@@ -143,16 +143,6 @@ define([
                         "telemetry",
                         "loadDelay"
                     ]
-                },
-                {
-                    name: "Include Infinity Values",
-                    control: "toggleSwitch",
-                    cssClass: "l-input",
-                    key: "infinityValues",
-                    property: [
-                        "telemetry",
-                        "infinityValues"
-                    ]
                 }
             ],
             initialize: function (object) {
@@ -163,8 +153,7 @@ define([
                     dataRateInHz: 1,
                     phase: 0,
                     randomness: 0,
-                    loadDelay: 0,
-                    infinityValues: false
+                    loadDelay: 0
                 };
             }
         });

index.html

@@ -64,6 +64,7 @@
         </style>
     </head>
     <body>
+        <div></div>
     </body>
     <script>
         const THIRTY_SECONDS = 30 * 1000;
@@ -75,7 +76,8 @@
         const TWO_HOURS = ONE_HOUR * 2;
         const ONE_DAY = ONE_HOUR * 24;
 
-        openmct.install(openmct.plugins.LocalStorage());
+        // openmct.install(openmct.plugins.LocalStorage());
+        openmct.install(openmct.plugins.CouchDB("http://localhost:5984/openmct"));
 
         openmct.install(openmct.plugins.example.Generator());
         openmct.install(openmct.plugins.example.EventGeneratorPlugin());

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "2.1.5-SNAPSHOT",
+  "version": "2.1.4-SNAPSHOT",
   "description": "The Open MCT core platform",
   "devDependencies": {
     "@babel/eslint-parser": "7.18.9",
@@ -10,7 +10,7 @@
     "@playwright/test": "1.25.2",
     "@types/jasmine": "4.3.1",
     "@types/lodash": "4.14.191",
-    "babel-loader": "9.1.0",
+    "babel-loader": "9.0.0",
     "babel-plugin-istanbul": "6.1.1",
     "codecov": "3.8.3",
     "comma-separated-values": "3.6.4",
@@ -19,7 +19,7 @@
     "d3-axis": "3.0.0",
     "d3-scale": "3.3.0",
     "d3-selection": "3.0.0",
-    "eslint": "8.30.0",
+    "eslint": "8.29.0",
     "eslint-plugin-compat": "4.0.2",
     "eslint-plugin-playwright": "0.11.2",
     "eslint-plugin-vue": "9.8.0",
@@ -45,7 +45,7 @@
     "mini-css-extract-plugin": "2.7.2",
     "moment": "2.29.4",
     "moment-duration-format": "2.3.2",
-    "moment-timezone": "0.5.40",
+    "moment-timezone": "0.5.38",
     "nyc": "15.1.0",
     "painterro": "1.2.78",
     "playwright-core": "1.25.2",
@@ -55,14 +55,15 @@
     "resolve-url-loader": "5.0.0",
     "sass": "1.56.1",
     "sass-loader": "13.0.2",
-    "sinon": "15.0.1",
+    "sinon": "14.0.1",
     "style-loader": "^3.3.1",
-    "typescript": "4.9.4",
+    "typescript": "4.9.3",
     "uuid": "9.0.0",
-    "vue": "2.6.14",
+    "vue": "^3.1.0",
+    "@vue/compat": "^3.1.0",
     "vue-eslint-parser": "9.1.0",
-    "vue-loader": "15.9.8",
-    "vue-template-compiler": "2.6.14",
+    "vue-loader": "^16.0.0",
+    "@vue/compiler-sfc": "^3.1.0",
     "webpack": "5.74.0",
     "webpack-cli": "5.0.0",
     "webpack-dev-server": "4.11.1",

src/MCT.js

@@ -328,7 +328,7 @@ define([
      * @param {HTMLElement} [domElement] the DOM element in which to run
      *        MCT; if undefined, MCT will be run in the body of the document
      */
-    MCT.prototype.start = function (domElement = document.body, isHeadlessMode = false) {
+    MCT.prototype.start = function (domElement = document.body.firstElementChild, isHeadlessMode = false) {
         if (this.types.get('layout') === undefined) {
             this.install(this.plugins.DisplayLayout({
                 showAsView: ['summary-widget']
@@ -349,7 +349,7 @@ define([
          */
 
         if (!isHeadlessMode) {
-            const appLayout = new Vue({
+            const appLayout = Vue.createApp({
                 components: {
                     'Layout': Layout.default
                 },
@@ -358,9 +358,8 @@ define([
                 },
                 template: '<Layout ref="layout"></Layout>'
             });
-            domElement.appendChild(appLayout.$mount().$el);
-
-            this.layout = appLayout.$refs.layout;
+            appLayout.mount(domElement);
+            this.layout = appLayout._instance.refs.layout;
             Browse(this);
         }
 

src/api/Editor.js

@@ -73,10 +73,6 @@ export default class Editor extends EventEmitter {
 
         return new Promise((resolve, reject) => {
             const transaction = this.openmct.objects.getActiveTransaction();
-            if (!transaction) {
-                return resolve();
-            }
-
             transaction.cancel()
                 .then(resolve)
                 .catch(reject)

src/api/forms/components/FormRow.vue

@@ -109,7 +109,7 @@ export default {
 
         this.formControl.show(this.$refs.rowElement, this.row, this.onChange);
     },
-    destroyed() {
+    unmounted() {
         const destroy = this.formControl.destroy;
         if (destroy) {
             destroy();

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

@@ -173,7 +173,7 @@ export default {
             this.options = this.model.options;
         }
     },
-    destroyed() {
+    unmounted() {
         document.body.removeEventListener('click', this.handleOutsideClick);
     },
     methods: {

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

@@ -29,7 +29,6 @@
         <ToggleSwitch
             id="switchId"
             :checked="isChecked"
-            :name="model.name"
             @change="toggleCheckBox"
         />
     </span>

src/api/menu/components/Menu.vue

@@ -9,11 +9,9 @@
     >
         <template
             v-for="(actionGroups, index) in options.actions"
+            :key="index"
         >
-            <div
-                :key="index"
-                role="group"
-            >
+            <div role="group">
                 <li
                     v-for="action in actionGroups"
                     :key="action.name"

src/api/menu/components/SuperMenu.vue

@@ -10,11 +10,9 @@
     >
         <template
             v-for="(actionGroups, index) in options.actions"
+            :key="index"
         >
-            <div
-                :key="index"
-                role="group"
-            >
+            <div role="group">
                 <li
                     v-for="action in actionGroups"
                     :key="action.name"

src/api/objects/ObjectAPI.js

@@ -410,19 +410,9 @@ export default class ObjectAPI {
             }
         }
 
-        return result.catch(async (error) => {
+        return result.catch((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, so
-                // bypass the refresh here and throw the error.
-                if (!this.SYNCHRONIZED_OBJECT_TYPES.includes(domainObject.type)) {
-                    if (this.isTransactionActive()) {
-                        this.endTransaction();
-                    }
-
-                    await this.refresh(domainObject);
-                }
             }
 
             throw error;

src/plugins/LADTable/components/LADRow.vue

@@ -147,7 +147,7 @@ export default {
             this.setUnit();
         }
     },
-    destroyed() {
+    unmounted() {
         this.openmct.time.off('timeSystem', this.updateTimeSystem);
         this.telemetryCollection.off('add', this.setLatestValues);
         this.telemetryCollection.off('clear', this.resetValues);

src/plugins/LADTable/components/LADTable.vue

@@ -89,7 +89,7 @@ export default {
         this.composition.on('reorder', this.reorder);
         this.composition.load();
     },
-    destroyed() {
+    unmounted() {
         this.composition.off('add', this.addItem);
         this.composition.off('remove', this.removeItem);
         this.composition.off('reorder', this.reorder);

src/plugins/LADTable/components/LadTableSet.vue

@@ -33,11 +33,9 @@
     <tbody>
         <template
             v-for="ladTable in ladTableObjects"
+            :key="ladTable.key"
         >
-            <tr
-                :key="ladTable.key"
-                class="c-table__group-header js-lad-table-set__table-headers"
-            >
+            <tr class="c-table__group-header js-lad-table-set__table-headers">
                 <td colspan="10">
                     {{ ladTable.domainObject.name }}
                 </td>
@@ -104,7 +102,7 @@ export default {
         this.composition.on('reorder', this.reorderLadTables);
         this.composition.load();
     },
-    destroyed() {
+    unmounted() {
         this.composition.off('add', this.addLadTable);
         this.composition.off('remove', this.removeLadTable);
         this.composition.off('reorder', this.reorderLadTables);

src/plugins/autoflow/AutoflowTabularView.js

@@ -93,7 +93,7 @@ define([
                 rowCount: 'reflow'
             },
             template: autoflowTemplate,
-            destroyed: function () {
+            unmounted: function () {
                 controller.destroy();
 
                 if (interval) {

src/plugins/charts/bar/BarGraphPlot.vue

@@ -84,7 +84,7 @@ export default {
         });
         this.registerListeners();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.plotResizeObserver) {
             this.plotResizeObserver.unobserve(this.$refs.plotWrapper);
             clearTimeout(this.resizeTimer);

src/plugins/charts/bar/BarGraphView.vue

@@ -71,7 +71,7 @@ export default {
         this.unobserveInterpolation = this.openmct.objects.observe(this.domainObject, 'configuration.useInterpolation', this.refreshData);
         this.unobserveBar = this.openmct.objects.observe(this.domainObject, 'configuration.useBar', this.refreshData);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.stopFollowingTimeContext();
 
         this.removeAllSubscriptions();

src/plugins/charts/bar/inspector/BarGraphOptions.vue

@@ -209,7 +209,7 @@ export default {
         this.registerListeners();
         this.composition.load();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.openmct.editor.off('isEditing', this.setEditState);
         this.stopListening();
     },

src/plugins/charts/bar/inspector/SeriesOptions.vue

@@ -115,7 +115,7 @@ export default {
         this.initColorAndName();
         this.removeBarStylesListener = this.openmct.objects.observe(this.domainObject, `configuration.barStyles.series["${this.key}"]`, this.initColorAndName);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.removeBarStylesListener) {
             this.removeBarStylesListener();
         }

src/plugins/charts/scatter/ScatterPlotView.vue

@@ -69,7 +69,7 @@ export default {
         this.unobserve = this.openmct.objects.observe(this.domainObject, 'configuration.axes', this.reloadTelemetry);
         this.unobserveUnderlayRanges = this.openmct.objects.observe(this.domainObject, 'configuration.ranges', this.reloadTelemetry);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.stopFollowingTimeContext();
 
         if (!this.composition) {

src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue

@@ -91,7 +91,7 @@ export default {
 
         this.$refs.plot.on('plotly_relayout', this.zoom);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.$refs.plot && this.$refs.plot.off) {
             this.$refs.plot.off('plotly_relayout', this.zoom);
         }

src/plugins/charts/scatter/inspector/PlotOptions.vue

@@ -52,7 +52,7 @@ export default {
     mounted() {
         this.openmct.editor.on('isEditing', this.setEditState);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.openmct.editor.off('isEditing', this.setEditState);
     },
     methods: {

src/plugins/charts/scatter/inspector/PlotOptionsBrowse.vue

@@ -70,7 +70,7 @@ export default {
         this.registerListeners();
         this.composition.load();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.stopListening();
     },
     methods: {

src/plugins/charts/scatter/inspector/PlotOptionsEdit.vue

@@ -101,7 +101,7 @@ export default {
         this.registerListeners();
         this.composition.load();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.stopListening();
     },
     methods: {

src/plugins/clock/components/Clock.vue

@@ -85,7 +85,7 @@ export default {
     mounted() {
         this.unlisten = ticker.listen(this.tick);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.unlisten) {
             this.unlisten();
         }

src/plugins/clock/components/ClockIndicator.vue

@@ -48,7 +48,7 @@ export default {
     mounted() {
         this.unlisten = ticker.listen(this.tick);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.unlisten) {
             this.unlisten();
         }

src/plugins/condition/components/Condition.vue

@@ -295,7 +295,7 @@ export default {
             return false;
         }
     },
-    destroyed() {
+    unmounted() {
         this.destroy();
     },
     mounted() {

src/plugins/condition/components/ConditionCollection.vue

@@ -128,7 +128,7 @@ export default {
             deep: true
         }
     },
-    destroyed() {
+    unmounted() {
         this.composition.off('add', this.addTelemetryObject);
         this.composition.off('remove', this.removeTelemetryObject);
         if (this.conditionManager) {

src/plugins/condition/components/TestData.vue

@@ -180,7 +180,7 @@ export default {
             deep: true
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.resetApplied();
     },
     mounted() {

src/plugins/condition/components/inspector/StylesView.vue

@@ -253,7 +253,7 @@ export default {
             return this.styleableFontItems.length && this.allowEditing;
         }
     },
-    destroyed() {
+    unmounted() {
         this.removeListeners();
         this.openmct.editor.off('isEditing', this.setEditState);
         this.stylesManager.off('styleSelected', this.applyStyleToSelection);

src/plugins/conditionWidget/components/ConditionWidget.vue

@@ -75,7 +75,7 @@ export default {
             this.listenToConditionSetChanges();
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.conditionSetIdentifier = null;
 
         if (this.unlisten) {

src/plugins/displayLayout/components/AlphanumericFormat.vue

@@ -66,7 +66,7 @@ export default {
         this.openmct.selection.on('change', this.handleSelection);
         this.handleSelection(this.openmct.selection.get());
     },
-    destroyed() {
+    unmounted() {
         this.openmct.editor.off('isEditing', this.toggleEdit);
         this.openmct.selection.off('change', this.handleSelection);
     },

src/plugins/displayLayout/components/BoxView.vue

@@ -113,7 +113,7 @@ export default {
         this.removeSelectable = this.openmct.selection.selectable(
             this.$el, this.context, this.initSelect);
     },
-    destroyed() {
+    unmounted() {
         if (this.removeSelectable) {
             this.removeSelectable();
         }

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -225,7 +225,7 @@ export default {
 
         this.watchDisplayResize();
     },
-    destroyed: function () {
+    unmounted: function () {
         this.openmct.selection.off('change', this.setSelection);
         this.composition.off('add', this.addChild);
         this.composition.off('remove', this.removeChild);

src/plugins/displayLayout/components/EllipseView.vue

@@ -113,7 +113,7 @@ export default {
         this.removeSelectable = this.openmct.selection.selectable(
             this.$el, this.context, this.initSelect);
     },
-    destroyed() {
+    unmounted() {
         if (this.removeSelectable) {
             this.removeSelectable();
         }

src/plugins/displayLayout/components/ImageView.vue

@@ -120,7 +120,7 @@ export default {
         this.removeSelectable = this.openmct.selection.selectable(
             this.$el, this.context, this.initSelect);
     },
-    destroyed() {
+    unmounted() {
         if (this.removeSelectable) {
             this.removeSelectable();
         }

src/plugins/displayLayout/components/LineView.vue

@@ -269,7 +269,7 @@ export default {
         };
         this.removeSelectable = this.openmct.selection.selectable(this.$el, this.context, this.initSelect);
     },
-    destroyed() {
+    unmounted() {
         if (this.removeSelectable) {
             this.removeSelectable();
         }

src/plugins/displayLayout/components/SubobjectView.vue

@@ -138,7 +138,7 @@ export default {
                 .then(this.setObject);
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.removeSelectable) {
             this.removeSelectable();
         }

src/plugins/displayLayout/components/TelemetryView.vue

@@ -225,7 +225,7 @@ export default {
         this.status = this.openmct.status.get(this.item.identifier);
         this.removeStatusListener = this.openmct.status.observe(this.item.identifier, this.setStatus);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.removeStatusListener();
 
         if (this.removeSelectable) {

src/plugins/displayLayout/components/TextView.vue

@@ -122,7 +122,7 @@ export default {
         this.removeSelectable = this.openmct.selection.selectable(
             this.$el, this.context, this.initSelect);
     },
-    destroyed() {
+    unmounted() {
         if (this.removeSelectable) {
             this.removeSelectable();
         }

src/plugins/displayLayout/mixins/objectStyles-mixin.js

@@ -38,7 +38,7 @@ export default {
         this.objectStyle = this.getObjectStyleForItem(this.parentDomainObject.configuration.objectStyles);
         this.initObjectStyles();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.stopListeningObjectStyles) {
             this.stopListeningObjectStyles();
         }

src/plugins/faultManagement/FaultManagementView.vue

@@ -47,7 +47,7 @@ export default {
         this.unsubscribe = this.openmct.faults
             .subscribe(this.domainObject, this.updateFault);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.unsubscribe) {
             this.unsubscribe();
         }

src/plugins/filters/components/FilterField.vue

@@ -89,7 +89,7 @@ export default {
     mounted() {
         this.openmct.editor.on('isEditing', this.toggleIsEditing);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.openmct.editor.off('isEditing', this.toggleIsEditing);
     },
     methods: {

src/plugins/filters/components/FilterObject.vue

@@ -121,7 +121,7 @@ export default {
         this.objectCssClass = type.definition.cssClass;
         this.openmct.editor.on('isEditing', this.toggleIsEditing);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.openmct.editor.off('isEditing', this.toggleIsEditing);
     },
     methods: {

src/plugins/filters/components/FiltersView.vue

@@ -91,7 +91,7 @@ export default {
         this.unobserve = this.openmct.objects.observe(this.providedObject, 'configuration.filters', this.updatePersistedFilters);
         this.unobserveGlobalFilters = this.openmct.objects.observe(this.providedObject, 'configuration.globalFilters', this.updateGlobalFilters);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.composition.off('add', this.addChildren);
         this.composition.off('remove', this.removeChildren);
         this.unobserve();

src/plugins/flexibleLayout/components/container.vue

@@ -45,9 +45,9 @@
     <div class="c-fl-container__frames-holder">
         <template
             v-for="(frame, i) in frames"
+            :key="frame.id"
         >
             <frame-component
-                :key="frame.id"
                 class="c-fl-container__frame"
                 :frame="frame"
                 :index="i"
@@ -57,7 +57,6 @@
             />
 
             <drop-hint
-                :key="'hint-' + i"
                 class="c-fl-frame__drop-hint"
                 :index="i"
                 :allow-drop="allowDrop"
@@ -66,7 +65,6 @@
 
             <resize-handle
                 v-if="(i !== frames.length - 1)"
-                :key="'handle-' + i"
                 :index="i"
                 :orientation="rowsLayout ? 'horizontal' : 'vertical'"
                 :is-editing="isEditing"
@@ -134,7 +132,7 @@ export default {
 
         this.unsubscribeSelection = this.openmct.selection.selectable(this.$el, context, false);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.unsubscribeSelection();
     },
     methods: {

src/plugins/flexibleLayout/components/dropHint.vue

@@ -56,7 +56,7 @@ export default {
         document.addEventListener('dragend', this.dragend);
         document.addEventListener('drop', this.dragend);
     },
-    destroyed() {
+    unmounted() {
         document.removeEventListener('dragstart', this.dragstart);
         document.removeEventListener('dragend', this.dragend);
         document.removeEventListener('drop', this.dragend);

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -40,10 +40,12 @@
             'c-fl--rows': rowsLayout === true
         }"
     >
-        <template v-for="(container, index) in containers">
+        <template
+            v-for="(container, index) in containers"
+            :key="`hint-top-${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"
@@ -51,7 +53,6 @@
             />
 
             <container-component
-                :key="`component-${container.id}`"
                 class="c-fl__container"
                 :index="index"
                 :container="container"
@@ -66,7 +67,6 @@
 
             <resize-handle
                 v-if="index !== (containers.length - 1)"
-                :key="`handle-${container.id}`"
                 :index="index"
                 :orientation="rowsLayout ? 'vertical' : 'horizontal'"
                 :is-editing="isEditing"
@@ -77,7 +77,6 @@
 
             <drop-hint
                 v-if="containers.length > 1"
-                :key="`hint-bottom-${container.id}`"
                 class="c-fl-frame__drop-hint"
                 :index="index"
                 :allow-drop="allowContainerDrop"
@@ -180,7 +179,7 @@ export default {
         this.composition.on('add', this.addFrame);
         this.composition.load();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.composition.off('remove', this.removeChildObject);
         this.composition.off('add', this.addFrame);
     },

src/plugins/flexibleLayout/components/frame.vue

@@ -113,7 +113,7 @@ export default {
 
         this.dragGhost = document.getElementById('js-fl-drag-ghost');
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.domainObjectPromise) {
             this.domainObjectPromise.then(() => {
                 if (this?.domainObject?.isMutable) {

src/plugins/flexibleLayout/components/resizeHandle.vue

@@ -56,7 +56,7 @@ export default {
         document.addEventListener('dragend', this.unsetDragging);
         document.addEventListener('drop', this.unsetDragging);
     },
-    destroyed() {
+    unmounted() {
         document.removeEventListener('dragstart', this.setDragging);
         document.removeEventListener('dragend', this.unsetDragging);
         document.removeEventListener('drop', this.unsetDragging);

src/plugins/folderView/components/composition-loader.js

@@ -23,7 +23,7 @@ export default {
         this.composition.on('remove', this.remove);
         this.composition.load();
     },
-    destroyed() {
+    unmounted() {
         if (!this.composition) {
             return;
         }

src/plugins/folderView/components/status-listener.js

@@ -27,7 +27,7 @@ export default {
         this.status = this.openmct.status.get(identifier);
         this.removeStatusListener = this.openmct.status.observe(identifier, this.setStatus);
     },
-    destroyed() {
+    unmounted() {
         this.removeStatusListener();
     }
 };

src/plugins/formActions/CreateAction.js

@@ -73,21 +73,19 @@ export default class CreateAction extends PropertiesAction {
             title: 'Saving'
         });
 
-        try {
-            await this.openmct.objects.save(this.domainObject);
+        const success = await this.openmct.objects.save(this.domainObject);
+        if (success) {
             const compositionCollection = await this.openmct.composition.get(parentDomainObject);
             compositionCollection.add(this.domainObject);
 
             this._navigateAndEdit(this.domainObject, parentDomainObjectPath);
 
             this.openmct.notifications.info('Save successful');
-        } catch (err) {
-            console.error(err);
-            this.openmct.notifications.error(`Error saving objects: ${err}`);
-        } finally {
-            dialog.dismiss();
+        } else {
+            this.openmct.notifications.error('Error saving objects');
         }
 
+        dialog.dismiss();
     }
 
     /**

src/plugins/gauge/components/Gauge.vue

@@ -536,7 +536,7 @@ export default {
         this.openmct.time.on('bounds', this.refreshData);
         this.openmct.time.on('timeSystem', this.setTimeSystem);
     },
-    destroyed() {
+    unmounted() {
         this.composition.off('add', this.addedToComposition);
         this.composition.off('remove', this.removeTelemetryObject);
 

src/plugins/imagery/components/ImageControls.vue

@@ -159,7 +159,7 @@ export default {
         document.addEventListener('keyup', this.handleKeyUp);
         this.clearWheelZoom = _.debounce(this.clearWheelZoom, 600);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         document.removeEventListener('keydown', this.handleKeyDown);
         document.removeEventListener('keyup', this.handleKeyUp);
     },

src/plugins/imagery/components/ImageryTimeView.vue

@@ -93,7 +93,7 @@ export default {
 
         this.unlisten = this.openmct.objects.observe(this.domainObject, '*', this.observeForChanges);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.imageryStripResizeObserver) {
             this.imageryStripResizeObserver.disconnect();
         }

src/plugins/imagery/components/ImageryView.vue

@@ -25,7 +25,7 @@
     tabindex="0"
     class="c-imagery"
     @keyup="arrowUpHandler"
-    @keydown.prevent="arrowDownHandler"
+    @keydown="arrowDownHandler"
     @mouseover="focusElement"
 >
     <div
@@ -147,7 +147,7 @@
                     v-if="!isFixed"
                     class="c-button icon-pause pause-play"
                     :class="{'is-paused': isPaused}"
-                    @click="handlePauseButton(!isPaused)"
+                    @click="paused(!isPaused)"
                 ></button>
             </div>
         </div>
@@ -165,9 +165,6 @@
         <div
             ref="thumbsWrapper"
             class="c-imagery__thumbs-scroll-area"
-            :class="[{
-                'animate-scroll': animateThumbScroll
-            }]"
             @scroll="handleScroll"
         >
             <ImageThumbnail
@@ -178,14 +175,14 @@
                 :selected="focusedImageIndex === index && isPaused"
                 :real-time="!isFixed"
                 :viewable-area="focusedImageIndex === index ? viewableArea : null"
-                @click.native="thumbnailClicked(index)"
+                @click="thumbnailClicked(index)"
             />
         </div>
 
         <button
             class="c-imagery__auto-scroll-resume-button c-icon-button icon-play"
             title="Resume automatic scrolling of image thumbnails"
-            @click="scrollToRight"
+            @click="scrollToRight('reset')"
         ></button>
     </div>
 </div>
@@ -195,7 +192,6 @@
 import eventHelpers from '../lib/eventHelpers';
 import _ from 'lodash';
 import moment from 'moment';
-import Vue from 'vue';
 
 import RelatedTelemetry from './RelatedTelemetry/RelatedTelemetry';
 import Compass from './Compass/Compass.vue';
@@ -293,8 +289,7 @@ export default {
             pan: undefined,
             animateZoom: true,
             imagePanned: false,
-            forceShowThumbnails: false,
-            animateThumbScroll: false
+            forceShowThumbnails: false
         };
     },
     computed: {
@@ -398,12 +393,6 @@ export default {
 
             return disabled;
         },
-        isComposedInLayout() {
-            return (
-                this.currentView?.objectPath
-                && !this.openmct.router.isNavigatedObject(this.currentView.objectPath)
-            );
-        },
         focusedImage() {
             return this.imageHistory[this.focusedImageIndex];
         },
@@ -553,7 +542,7 @@ export default {
     },
     watch: {
         imageHistory: {
-            async handler(newHistory, oldHistory) {
+            handler(newHistory, _oldHistory) {
                 const newSize = newHistory.length;
                 let imageIndex = newSize > 0 ? newSize - 1 : undefined;
                 if (this.focusedImageTimestamp !== undefined) {
@@ -581,13 +570,10 @@ export default {
 
                 if (!this.isPaused) {
                     this.setFocusedImage(imageIndex);
+                    this.scrollToRight();
+                } else {
+                    this.scrollToFocused();
                 }
-
-                await this.scrollHandler();
-                if (oldHistory?.length > 0) {
-                    this.animateThumbScroll = true;
-                }
-
             },
             deep: true
         },
@@ -598,7 +584,7 @@ export default {
             this.getImageNaturalDimensions();
         },
         bounds() {
-            this.scrollHandler();
+            this.scrollToFocused();
         },
         isFixed(newValue) {
             const isRealTime = !newValue;
@@ -657,7 +643,7 @@ export default {
         this.listenTo(this.focusedImageWrapper, 'wheel', this.wheelZoom, this);
         this.loadVisibleLayers();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.persistVisibleLayers();
         this.stopFollowingTimeContext();
 
@@ -862,13 +848,6 @@ export default {
             const disableScroll = scrollWidth > Math.ceil(scrollLeft + clientWidth);
             this.autoScroll = !disableScroll;
         },
-        handlePauseButton(newState) {
-            this.paused(newState);
-            if (newState) {
-                // need to set the focused index or the paused focus will drift
-                this.thumbnailClicked(this.focusedImageIndex);
-            }
-        },
         paused(state) {
             this.isPaused = Boolean(state);
 
@@ -876,7 +855,7 @@ export default {
                 this.previousFocusedImage = null;
                 this.setFocusedImage(this.nextImageIndex);
                 this.autoScroll = true;
-                this.scrollHandler();
+                this.scrollToRight();
             }
         },
         scrollToFocused() {
@@ -886,43 +865,28 @@ export default {
             }
 
             let domThumb = thumbsWrapper.children[this.focusedImageIndex];
-            if (!domThumb) {
-                return;
+
+            if (domThumb) {
+                domThumb.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center',
+                    inline: 'center'
+                });
             }
-
-            // separate scrollTo function had to be implemented since scrollIntoView
-            // caused undesirable behavior in layouts
-            // and could not simply be scoped to the parent element
-            if (this.isComposedInLayout) {
-                const wrapperWidth = this.$refs.thumbsWrapper.clientWidth ?? 0;
-                this.$refs.thumbsWrapper.scrollLeft = (
-                    domThumb.offsetLeft - (wrapperWidth - domThumb.clientWidth) / 2);
-
-                return;
-            }
-
-            domThumb.scrollIntoView({
-                behavior: 'smooth',
-                block: 'center',
-                inline: 'center'
-            });
         },
-        async scrollToRight() {
+        scrollToRight(type) {
+            if (type !== 'reset' && (this.isPaused || !this.$refs.thumbsWrapper || !this.autoScroll)) {
+                return;
+            }
 
-            const scrollWidth = this.$refs?.thumbsWrapper?.scrollWidth ?? 0;
+            const scrollWidth = this.$refs.thumbsWrapper.scrollWidth || 0;
             if (!scrollWidth) {
                 return;
             }
 
-            await Vue.nextTick();
-            this.$refs.thumbsWrapper.scrollLeft = scrollWidth;
-        },
-        scrollHandler() {
-            if (this.isPaused) {
-                return this.scrollToFocused();
-            } else if (this.autoScroll) {
-                return this.scrollToRight();
-            }
+            this.$nextTick(() => {
+                this.$refs.thumbsWrapper.scrollLeft = scrollWidth;
+            });
         },
         matchIndexOfPreviousImage(previous, imageHistory) {
             // match logic uses a composite of url and time to account
@@ -1123,7 +1087,7 @@ export default {
             this.setSizedImageDimensions();
             this.setImageViewport();
             this.calculateViewHeight();
-            this.scrollHandler();
+            this.scrollToFocused();
         },
         setSizedImageDimensions() {
             this.focusedImageNaturalAspectRatio = this.$refs.focusedImage.naturalWidth / this.$refs.focusedImage.naturalHeight;
@@ -1158,7 +1122,9 @@ export default {
             this.handleThumbWindowResizeEnded();
         },
         handleThumbWindowResizeEnded() {
-            this.scrollHandler();
+            if (!this.isPaused) {
+                this.scrollToRight('reset');
+            }
 
             this.calculateViewHeight();
 
@@ -1171,6 +1137,7 @@ export default {
         },
         wheelZoom(e) {
             e.preventDefault();
+
             this.$refs.imageControls.wheelZoom(e);
         },
         startPan(e) {

src/plugins/imagery/components/ImageryViewMenuSwitcher.vue

@@ -46,7 +46,7 @@ export default {
     mounted() {
         document.addEventListener('click', this.hideMenu);
     },
-    destroyed() {
+    unmounted() {
         document.removeEventListener('click', this.hideMenu);
     },
     methods: {

src/plugins/imagery/components/imagery-view.scss

@@ -194,9 +194,6 @@
         overflow-y: hidden;
         margin-bottom: 1px;
         padding-bottom: $interiorMarginSm;
-        &.animate-scroll {
-            scroll-behavior: smooth; 
-        }
     }
 
     &__auto-scroll-resume-button {

src/plugins/imagery/mixins/imageryData.js

@@ -50,7 +50,7 @@ export default {
         this.telemetryCollection.on('clear', this.dataCleared);
         this.telemetryCollection.load();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.unsubscribe) {
             this.unsubscribe();
             delete this.unsubscribe;

src/plugins/imagery/pluginSpec.js

@@ -481,16 +481,19 @@ describe("The Imagery View Layouts", () => {
                 });
             });
         });
-        it ('scrollToRight is called when clicking on auto scroll button', async () => {
-            await Vue.nextTick();
-            // use spyon to spy the scroll function
-            spyOn(imageryView._getInstance().$refs.ImageryContainer, 'scrollHandler');
-            imageryView._getInstance().$refs.ImageryContainer.autoScroll = false;
-            await Vue.nextTick();
-            parent.querySelector('.c-imagery__auto-scroll-resume-button').click();
-            expect(imageryView._getInstance().$refs.ImageryContainer.scrollHandler);
+        it ('scrollToRight is called when clicking on auto scroll button', (done) => {
+            Vue.nextTick(() => {
+                // use spyon to spy the scroll function
+                spyOn(imageryView._getInstance().$refs.ImageryContainer, 'scrollToRight');
+                imageryView._getInstance().$refs.ImageryContainer.autoScroll = false;
+                Vue.nextTick(() => {
+                    parent.querySelector('.c-imagery__auto-scroll-resume-button').click();
+                    expect(imageryView._getInstance().$refs.ImageryContainer.scrollToRight).toHaveBeenCalledWith('reset');
+                    done();
+                });
+            });
         });
-        xit('should change the image zoom factor when using the zoom buttons', async () => {
+        xit('should change the image zoom factor when using the zoom buttons', async (done) => {
             await Vue.nextTick();
             let imageSizeBefore;
             let imageSizeAfter;
@@ -509,6 +512,7 @@ describe("The Imagery View Layouts", () => {
             imageSizeAfter = parent.querySelector('.c-imagery_main-image_background-image').getBoundingClientRect();
             expect(imageSizeAfter.height).toBeLessThan(imageSizeBefore.height);
             expect(imageSizeAfter.width).toBeLessThan(imageSizeBefore.width);
+            done();
         });
         xit('should reset the zoom factor on the image when clicking the zoom button', async (done) => {
             await Vue.nextTick();

src/plugins/notebook/components/Notebook.vue

@@ -302,7 +302,7 @@ export default {
         this.filterAndSortEntries();
         this.unobserveEntries = this.openmct.objects.observe(this.domainObject, '*', this.filterAndSortEntries);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.unlisten) {
             this.unlisten();
         }

src/plugins/operatorStatus/operatorStatus/OperatorStatus.vue

@@ -90,7 +90,7 @@ export default {
             };
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.openmct.user.status.off('statusChange', this.setStatus);
         this.openmct.user.status.off('pollQuestionChange', this.setPollQuestion);
     },

src/plugins/operatorStatus/pollQuestion/PollQuestion.vue

@@ -117,7 +117,7 @@ export default {
         this.fetchStatusSummary();
         this.openmct.user.status.on('statusChange', this.fetchStatusSummary);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.openmct.user.status.off('statusChange', this.fetchStatusSummary);
         this.openmct.user.status.off('pollQuestionChange', this.setPollQuestion);
     },

src/plugins/persistence/couch/CouchObjectProvider.js

@@ -234,8 +234,7 @@ class CouchObjectProvider {
     #handleResponseCode(status, json, fetchOptions) {
         this.indicator.setIndicatorToState(this.#statusCodeToIndicatorState(status));
         if (status === CouchObjectProvider.HTTP_CONFLICT) {
-            const objectName = JSON.parse(fetchOptions.body)?.model?.name;
-            throw new this.openmct.objects.errors.Conflict(`Conflict persisting "${objectName}"`);
+            throw new this.openmct.objects.errors.Conflict(`Conflict persisting ${fetchOptions.body.name}`);
         } else if (status >= CouchObjectProvider.HTTP_BAD_REQUEST) {
             if (!json.error || !json.reason) {
                 throw new Error(`CouchDB Error ${status}`);

src/plugins/plan/Plan.vue

@@ -27,7 +27,7 @@
 >
     <template v-if="viewBounds && !options.compact">
         <swim-lane>
-            <template slot="label">{{ timeSystem.name }}</template>
+            <slot name="label">{{ timeSystem.name }}</slot>
             <timeline-axis
                 slot="object"
                 :bounds="viewBounds"
@@ -107,7 +107,7 @@ export default {
         this.removeStatusListener = this.openmct.status.observe(this.domainObject.identifier, this.setStatus);
         this.status = this.openmct.status.get(this.domainObject.identifier);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         clearInterval(this.resizeTimer);
         this.stopFollowingTimeContext();
         if (this.unlisten) {

src/plugins/plan/inspector/PlanActivitiesView.vue

@@ -65,7 +65,7 @@ export default {
         this.openmct.selection.on('change', this.updateSelection);
         this.openmct.time.on('timeSystem', this.setFormatters);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.openmct.selection.off('change', this.updateSelection);
         this.openmct.time.off('timeSystem', this.setFormatters);
     },

src/plugins/plot/MctPlot.vue

@@ -365,7 +365,7 @@ export default {
 
         this.loaded = true;
     },
-    beforeDestroy() {
+    beforeUnmount() {
         document.removeEventListener('keydown', this.handleKeyDown);
         document.removeEventListener('keyup', this.handleKeyUp);
         this.destroy();

src/plugins/plot/MctTicks.vue

@@ -131,7 +131,7 @@ export default {
         this.listenTo(this.axis, 'change:key', this.updateTicksForceRegeneration, this);
         this.updateTicks();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.stopListening();
     },
     methods: {

src/plugins/plot/Plot.vue

@@ -81,7 +81,7 @@ export default {
         eventHelpers.extend(this);
         this.imageExporter = new ImageExporter(this.openmct);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.destroy();
     },
     methods: {

src/plugins/plot/axis/XAxis.vue

@@ -89,7 +89,7 @@ export default {
         this.openmct.time.on('timeSystem', this.syncXAxisToTimeSystem);
         this.listenTo(this.xAxis, 'change', this.setUpXAxisOptions);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.openmct.time.off('timeSystem', this.syncXAxisToTimeSystem);
     },
     methods: {

src/plugins/plot/chart/MctChart.vue

@@ -117,7 +117,7 @@ export default {
         this.config.series.forEach(this.onSeriesAdd, this);
         this.$emit('chartLoaded');
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.destroy();
     },
     methods: {

src/plugins/plot/configuration/PlotSeries.js

@@ -83,8 +83,6 @@ export default class PlotSeries extends Model {
         // Model.apply(this, arguments);
         this.onXKeyChange(this.get('xKey'));
         this.onYKeyChange(this.get('yKey'));
-
-        this.unPlottableValues = [undefined, Infinity, -Infinity];
     }
 
     /**
@@ -344,10 +342,6 @@ export default class PlotSeries extends Model {
         let stats = this.get('stats');
         let changed = false;
         if (!stats) {
-            if ([Infinity, -Infinity].includes(value)) {
-                return;
-            }
-
             stats = {
                 minValue: value,
                 minPoint: point,
@@ -356,13 +350,13 @@ export default class PlotSeries extends Model {
             };
             changed = true;
         } else {
-            if (stats.maxValue < value && value !== Infinity) {
+            if (stats.maxValue < value) {
                 stats.maxValue = value;
                 stats.maxPoint = point;
                 changed = true;
             }
 
-            if (stats.minValue > value && value !== -Infinity) {
+            if (stats.minValue > value) {
                 stats.minValue = value;
                 stats.minPoint = point;
                 changed = true;
@@ -425,7 +419,7 @@ export default class PlotSeries extends Model {
      * @private
      */
     isValueInvalid(val) {
-        return Number.isNaN(val) || this.unPlottableValues.includes(val);
+        return Number.isNaN(val) || val === undefined;
     }
 
     /**

src/plugins/plot/inspector/PlotOptions.vue

@@ -52,7 +52,7 @@ export default {
     mounted() {
         this.openmct.editor.on('isEditing', this.setEditState);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.openmct.editor.off('isEditing', this.setEditState);
     },
     methods: {

src/plugins/plot/inspector/PlotOptionsBrowse.vue

@@ -192,7 +192,7 @@ export default {
         this.loaded = true;
 
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.stopListening();
     },
     methods: {

src/plugins/plot/inspector/PlotOptionsEdit.vue

@@ -94,7 +94,7 @@ export default {
         this.registerListeners();
         this.loaded = true;
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.stopListening();
     },
     methods: {

src/plugins/plot/inspector/PlotOptionsItem.vue

@@ -163,7 +163,7 @@ export default {
         this.status = this.openmct.status.get(this.series.domainObject.identifier);
         this.removeStatusListener = this.openmct.status.observe(this.series.domainObject.identifier, this.setStatus);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.removeStatusListener) {
             this.removeStatusListener();
         }

src/plugins/plot/inspector/forms/SeriesForm.vue

@@ -218,7 +218,7 @@ export default {
         this.status = this.openmct.status.get(this.series.domainObject.identifier);
         this.removeStatusListener = this.openmct.status.observe(this.series.domainObject.identifier, this.setStatus);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.removeStatusListener) {
             this.removeStatusListener();
         }

src/plugins/plot/legend/PlotLegendItemCollapsed.vue

@@ -114,7 +114,7 @@ export default {
         }, this);
         this.initialize();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.stopListening();
     },
     methods: {

src/plugins/plot/legend/PlotLegendItemExpanded.vue

@@ -151,7 +151,7 @@ export default {
         }, this);
         this.initialize();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.stopListening();
     },
     methods: {

src/plugins/plot/stackedPlot/StackedPlot.vue

@@ -116,7 +116,7 @@ export default {
             return Math.max(...Object.values(this.tickWidthMap));
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.destroy();
     },
     mounted() {

src/plugins/plot/stackedPlot/StackedPlotItem.vue

@@ -98,7 +98,7 @@ export default {
     mounted() {
         this.updateView();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.removeSelectable) {
             this.removeSelectable();
         }

src/plugins/plot/stackedPlot/mixins/objectStyles-mixin.js

@@ -34,7 +34,7 @@ export default {
         this.objectStyles = this.getObjectStyleForItem(this.childObject.configuration);
         this.initObjectStyles();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.stopListeningStyles) {
             this.stopListeningStyles();
         }

src/plugins/remoteClock/RemoteClock.js

@@ -62,8 +62,8 @@ export default class RemoteClock extends DefaultClock {
     }
 
     start() {
+        this.openmct.time.on('timeSystem', this._timeSystemChange);
         this.openmct.objects.get(this.identifier).then((domainObject) => {
-            this.openmct.time.on('timeSystem', this._timeSystemChange);
             this.timeTelemetryObject = domainObject;
             this.metadata = this.openmct.telemetry.getMetadata(domainObject);
             this._timeSystemChange();

src/plugins/remoteClock/RemoteClockSpec.js

@@ -71,10 +71,7 @@ describe("the RemoteClock plugin", () => {
             parse: (datum) => datum.key
         };
 
-        let objectPromise;
-        let requestPromise;
-
-        beforeEach(() => {
+        beforeEach(async () => {
             openmct.install(openmct.plugins.RemoteClock(TIME_TELEMETRY_ID));
 
             let clocks = openmct.time.getAllClocks();
@@ -92,9 +89,7 @@ describe("the RemoteClock plugin", () => {
             spyOn(metadata, 'value').and.callThrough();
 
             let requestPromiseResolve;
-            let objectPromiseResolve;
-
-            requestPromise = new Promise((resolve) => {
+            let requestPromise = new Promise((resolve) => {
                 requestPromiseResolve = resolve;
             });
             spyOn(openmct.telemetry, 'request').and.callFake(() => {
@@ -103,7 +98,8 @@ describe("the RemoteClock plugin", () => {
                 return requestPromise;
             });
 
-            objectPromise = new Promise((resolve) => {
+            let objectPromiseResolve;
+            let objectPromise = new Promise((resolve) => {
                 objectPromiseResolve = resolve;
             });
             spyOn(openmct.objects, 'get').and.callFake(() => {
@@ -116,48 +112,39 @@ describe("the RemoteClock plugin", () => {
                 start: OFFSET_START,
                 end: OFFSET_END
             });
+
+            await Promise.all([objectPromiseResolve, requestPromise]);
         });
 
-        it("Does not throw error if time system is changed before remote clock initialized", () => {
-            expect(() => openmct.time.timeSystem('utc')).not.toThrow();
+        it('is available and sets up initial values and listeners', () => {
+            expect(remoteClock.key).toEqual(REMOTE_CLOCK_KEY);
+            expect(remoteClock.identifier).toEqual(TIME_TELEMETRY_ID);
+            expect(openmct.time.on).toHaveBeenCalledWith('timeSystem', remoteClock._timeSystemChange);
+            expect(remoteClock._timeSystemChange).toHaveBeenCalled();
         });
 
-        describe('once resolved', () => {
-            beforeEach(async () => {
-                await Promise.all([objectPromise, requestPromise]);
-            });
-
-            it('is available and sets up initial values and listeners', () => {
-                expect(remoteClock.key).toEqual(REMOTE_CLOCK_KEY);
-                expect(remoteClock.identifier).toEqual(TIME_TELEMETRY_ID);
-                expect(openmct.time.on).toHaveBeenCalledWith('timeSystem', remoteClock._timeSystemChange);
-                expect(remoteClock._timeSystemChange).toHaveBeenCalled();
-            });
-
-            it('will request/store the object based on the identifier passed in', () => {
-                expect(remoteClock.timeTelemetryObject).toEqual(object);
-            });
-
-            it('will request metadata and set up formatters', () => {
-                expect(remoteClock.metadata).toEqual(metadata);
-                expect(metadata.value).toHaveBeenCalled();
-                expect(openmct.telemetry.getValueFormatter).toHaveBeenCalledWith(metadataValue);
-            });
-
-            it('will request the latest datum for the object it received and process the datum returned', () => {
-                expect(openmct.telemetry.request).toHaveBeenCalledWith(remoteClock.timeTelemetryObject, REQ_OPTIONS);
-                expect(boundsCallback).toHaveBeenCalledWith({
-                    start: TIME_VALUE + OFFSET_START,
-                    end: TIME_VALUE + OFFSET_END
-                }, true);
-            });
-
-            it('will set up subscriptions correctly', () => {
-                expect(remoteClock._unsubscribe).toBeDefined();
-                expect(openmct.telemetry.subscribe).toHaveBeenCalledWith(remoteClock.timeTelemetryObject, remoteClock._processDatum);
-            });
+        it('will request/store the object based on the identifier passed in', () => {
+            expect(remoteClock.timeTelemetryObject).toEqual(object);
         });
 
+        it('will request metadata and set up formatters', () => {
+            expect(remoteClock.metadata).toEqual(metadata);
+            expect(metadata.value).toHaveBeenCalled();
+            expect(openmct.telemetry.getValueFormatter).toHaveBeenCalledWith(metadataValue);
+        });
+
+        it('will request the latest datum for the object it received and process the datum returned', () => {
+            expect(openmct.telemetry.request).toHaveBeenCalledWith(remoteClock.timeTelemetryObject, REQ_OPTIONS);
+            expect(boundsCallback).toHaveBeenCalledWith({
+                start: TIME_VALUE + OFFSET_START,
+                end: TIME_VALUE + OFFSET_END
+            }, true);
+        });
+
+        it('will set up subscriptions correctly', () => {
+            expect(remoteClock._unsubscribe).toBeDefined();
+            expect(openmct.telemetry.subscribe).toHaveBeenCalledWith(remoteClock.timeTelemetryObject, remoteClock._processDatum);
+        });
     });
 
 });

src/plugins/tabs/components/tabs.vue

@@ -147,10 +147,10 @@ export default {
         document.addEventListener('dragstart', this.dragstart);
         document.addEventListener('dragend', this.dragend);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.persistCurrentTabIndex(this.currentTabIndex);
     },
-    destroyed() {
+    unmounted() {
         this.composition.off('add', this.addItem);
         this.composition.off('remove', this.removeItem);
         this.composition.off('reorder', this.onReorder);

src/plugins/telemetryTable/TelemetryTable.js

@@ -178,7 +178,7 @@ define([
                 if (this.paused) {
                     this.delayedActions.push(this.tableRows.addRows.bind(this, telemetryRows, 'add'));
                 } else {
-                    this.tableRows.addRows(telemetryRows);
+                    this.tableRows.addRows(telemetryRows, 'add');
                 }
             };
         }
@@ -229,7 +229,7 @@ define([
                 });
             });
 
-            this.tableRows.clearRowsFromTableAndFilter(allRows);
+            this.tableRows.addRows(allRows, 'filter');
         }
 
         updateFilters(updatedFilters) {

src/plugins/telemetryTable/collections/TableRowCollection.js

@@ -61,39 +61,30 @@ define(
                 this.emit('remove', removed);
             }
 
-            addRows(rows) {
-                let rowsToAdd = this.filterRows(rows);
+            addRows(rows, type = 'add') {
+                if (this.sortOptions === undefined) {
+                    throw 'Please specify sort options';
+                }
+
+                let isFilterTriggeredReset = type === 'filter';
+                let anyActiveFilters = Object.keys(this.columnFilters).length > 0;
+                let rowsToAdd = !anyActiveFilters ? rows : rows.filter(this.matchesFilters, this);
+
+                // if type is filter, then it's a reset of all rows,
+                // need to wipe current rows
+                if (isFilterTriggeredReset) {
+                    this.rows = [];
+                }
 
                 this.sortAndMergeRows(rowsToAdd);
 
                 // we emit filter no matter what to trigger
                 // an update of visible rows
-                if (rowsToAdd.length > 0) {
-                    this.emit('add', rowsToAdd);
+                if (rowsToAdd.length > 0 || isFilterTriggeredReset) {
+                    this.emit(type, rowsToAdd);
                 }
             }
 
-            clearRowsFromTableAndFilter(rows) {
-
-                let rowsToAdd = this.filterRows(rows);
-                // Reset of all rows, need to wipe current rows
-                this.rows = [];
-
-                this.sortAndMergeRows(rowsToAdd);
-
-                // We emit filter and update of visible rows
-                this.emit('filter', rowsToAdd);
-            }
-
-            filterRows(rows) {
-
-                if (Object.keys(this.columnFilters).length > 0) {
-                    return rows.filter(this.matchesFilters, this);
-                }
-
-                return rows;
-            }
-
             sortAndMergeRows(rows) {
                 const sortedRowsToAdd = this.sortCollection(rows);
 

src/plugins/telemetryTable/components/sizing-row.vue

@@ -28,7 +28,7 @@ export default {
             this.pollForRowHeight();
         }
     },
-    destroyed() {
+    unmounted() {
         this.clearPoll();
     },
     methods: {

src/plugins/telemetryTable/components/table-configuration.vue

@@ -97,7 +97,7 @@ export default {
                 this.unlisteners.push(compositionCollection.off.bind(compositionCollection, 'remove', this.removeObject));
             });
     },
-    destroyed() {
+    unmounted() {
         this.tableConfiguration.destroy();
         this.openmct.editor.off('isEditing', this.toggleEdit);
         this.unlisteners.forEach((unlisten) => unlisten());

src/plugins/telemetryTable/components/table-footer-indicator.vue

@@ -94,7 +94,7 @@ export default {
         this.table.configuration.on('change', this.handleConfigurationChanges);
         this.updateFilters(filters);
     },
-    destroyed() {
+    unmounted() {
         this.table.configuration.off('change', this.handleConfigurationChanges);
     },
     methods: {

src/plugins/telemetryTable/components/table.vue

@@ -257,11 +257,11 @@
                 @change-height="setRowHeight"
             />
             <tr>
-                <template v-for="(title, key) in headers">
-                    <th
-                        :key="key"
-                        :style="{ width: configuredColumnWidths[key] + 'px', 'max-width': configuredColumnWidths[key] + 'px'}"
-                    >
+                <template
+                    v-for="(title, key) in headers"
+                    :key="key"
+                >
+                    <th :style="{ width: configuredColumnWidths[key] + 'px', 'max-width': configuredColumnWidths[key] + 'px'}">
                         {{ title }}
                     </th>
                 </template>
@@ -510,7 +510,7 @@ export default {
 
         this.table.initialize();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.table.off('object-added', this.addObject);
         this.table.off('object-removed', this.removeObject);
         this.table.off('historical-rows-processed', this.checkForMarkedRows);

src/plugins/timeConductor/Conductor.vue

@@ -139,7 +139,7 @@ export default {
         this.openmct.time.on('timeSystem', this.setTimeSystem);
         this.openmct.time.on('clock', this.setViewFromClock);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         document.removeEventListener('keydown', this.handleKeyDown);
         document.removeEventListener('keyup', this.handleKeyUp);
     },

src/plugins/timeConductor/ConductorInputsFixed.vue

@@ -125,7 +125,7 @@ export default {
         this.openmct.time.on('timeSystem', this.setTimeSystem);
         this.setTimeContext();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.clearAllValidation();
         this.openmct.time.off('timeSystem', this.setTimeSystem);
         this.stopFollowingTimeContext();