Merge branch 'master' into status-area-redesign

e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js

@@ -35,7 +35,7 @@ const defaultFrameBorderColor = '#e6b8af'; //default border color
 const defaultBorderTargetColor = '#acacac';
 const defaultTextColor = '#acacac'; // default text color
 const inheritedColor = '#acacac'; // inherited from the body style
-const pukeGreen = '#6aa84f'; //Ugliest green known to man
+const pukeGreen = '#6aa84f'; //Ugliest green known to man 🤮
 const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)'; //default background color value
 
 test.describe('Flexible Layout styling', () => {
@@ -411,4 +411,39 @@ test.describe('Flexible Layout styling', () => {
       page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
     );
   });
+
+  test('Styling, and then canceling reverts to previous style', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7233'
+    });
+
+    await page.goto(flexibleLayout.url);
+
+    await page.getByLabel('Edit Object').click();
+    await page.getByRole('tab', { name: 'Styles' }).click();
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('Flexible Layout Column')
+    );
+    await page.getByLabel('Cancel Editing').click();
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
+    await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
+      NO_STYLE_RGBA,
+      hexToRGB(inheritedColor),
+      page.getByLabel('Flexible Layout Column')
+    );
+
+    await page.reload();
+    await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
+      NO_STYLE_RGBA,
+      hexToRGB(inheritedColor),
+      page.getByLabel('Flexible Layout Column')
+    );
+  });
 });

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

@@ -0,0 +1,73 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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 testing the preview plugin.
+ */
+
+import { createDomainObjectWithDefaults, expandEntireTree } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Preview mode', () => {
+  test('all context menu items are available for a telemetry table', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    // Create a Display Layout
+    const displayLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout'
+    });
+    // Create a Telemetry Table
+    const telemetryTable = await createDomainObjectWithDefaults(page, {
+      type: 'Telemetry Table',
+      parent: displayLayout.uuid
+    });
+    // Create a Sinewave Generator
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: telemetryTable.uuid
+    });
+
+    await page.goto(displayLayout.url);
+    await page.getByLabel('View menu items').click();
+    await expect(page.getByLabel('Export Marked Rows')).toBeVisible();
+
+    await page.getByRole('menuitem', { name: 'Large View' }).click();
+    await page.getByLabel('Overlay').getByLabel('More actions').click();
+    await expect(page.getByLabel('Export Table Data')).toBeVisible();
+    await expect(page.getByLabel('Export Marked Rows')).toBeVisible();
+    await page.getByRole('menuitem', { name: 'Pause' }).click();
+    await page.getByLabel('Close').click();
+
+    await expandEntireTree(page);
+
+    await page.getByLabel('Edit Object').click();
+
+    const treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    const telemetryTableTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(telemetryTable.name)
+    });
+    await telemetryTableTreeItem.locator('a').click();
+    await page.getByLabel('Overlay').getByLabel('More actions').click();
+    await expect(page.getByLabel('Export Table Data')).toBeVisible();
+    await expect(page.getByLabel('Export Marked Rows')).toBeVisible();
+  });
+});

src/api/objects/ObjectAPI.js

@@ -696,10 +696,12 @@ export default class ObjectAPI {
   /**
    * Updates a domain object based on its latest persisted state. Note that this will mutate the provided object.
    * @param {module:openmct.DomainObject} domainObject an object to refresh from its persistence store
+   * @param {boolean} [forceRemote=false] defaults to false. If true, will skip cached and
+   *          dirty/in-transaction objects use and the provider.get method
    * @returns {Promise} the provided object, updated to reflect the latest persisted state of the object.
    */
-  async refresh(domainObject) {
-    const refreshedObject = await this.get(domainObject.identifier);
+  async refresh(domainObject, forceRemote = false) {
+    const refreshedObject = await this.get(domainObject.identifier, null, forceRemote);
 
     if (domainObject.isMutable) {
       domainObject.$refresh(refreshedObject);

src/api/objects/ObjectAPISpec.js

@@ -362,7 +362,7 @@ describe('The Object API', () => {
       expect(objectAPI.get).not.toHaveBeenCalled();
 
       return objectAPI.refresh(testObject).then(() => {
-        expect(objectAPI.get).toHaveBeenCalledWith(testObject.identifier);
+        expect(objectAPI.get).toHaveBeenCalledWith(testObject.identifier, null, false);
 
         expect(testObject.otherAttribute).toEqual(OTHER_ATTRIBUTE_VALUE);
         expect(testObject.newAttribute).toEqual(NEW_ATTRIBUTE_VALUE);

src/api/objects/Transaction.js

@@ -47,9 +47,9 @@ export default class Transaction {
     return Promise.all(promiseArray);
   }
 
-  createDirtyObjectPromise(object, action) {
+  createDirtyObjectPromise(object, action, ...args) {
     return new Promise((resolve, reject) => {
-      action(object)
+      action(object, ...args)
         .then((success) => {
           const key = this.objectAPI.makeKeyString(object.identifier);
 
@@ -75,10 +75,10 @@ export default class Transaction {
 
   _clear() {
     const promiseArray = [];
-    const refresh = this.objectAPI.refresh.bind(this.objectAPI);
+    const action = (obj) => this.objectAPI.refresh(obj, true);
 
     Object.values(this.dirtyObjects).forEach((object) => {
-      promiseArray.push(this.createDirtyObjectPromise(object, refresh));
+      promiseArray.push(this.createDirtyObjectPromise(object, action));
     });
 
     return Promise.all(promiseArray);

src/ui/preview/PreviewContainer.vue

@@ -35,6 +35,8 @@
 </template>
 
 <script>
+import { nextTick } from 'vue';
+
 import StyleRuleManager from '@/plugins/condition/StyleRuleManager';
 import { STYLE_CONSTANTS } from '@/plugins/condition/utils/constants';
 
@@ -108,11 +110,6 @@ export default {
       this.addExistingViewBackToParent();
     }
   },
-  updated() {
-    // FIXME: fixes a problem where the some context menu items are not available when in Preview Mode
-    // see https://github.com/nasa/openmct/issues/7158
-    this.getActionsCollection(this.view);
-  },
   methods: {
     clear() {
       if (this.view) {
@@ -148,8 +145,6 @@ export default {
         this.view = this.currentViewProvider.view(this.domainObject, this.objectPath);
       }
 
-      this.getActionsCollection(this.view);
-
       if (isExistingView) {
         this.viewContainer.appendChild(this.existingViewElement);
       } else {
@@ -162,6 +157,10 @@ export default {
       }
 
       this.initObjectStyles();
+
+      nextTick(() => {
+        this.getActionsCollection(this.view);
+      });
     },
     addExistingViewBackToParent() {
       this.existingView.parentElement.appendChild(this.existingViewElement);

src/ui/toolbar/components/ToolbarColorPicker.vue

@@ -32,7 +32,7 @@
         class="c-swatch"
         :style="{ background: options.value }"
         role="img"
-        :aria-label="None"
+        aria-label="None"
       ></div>
     </button>
     <div v-if="open" class="c-menu c-palette c-palette--color">

src/utils/vueWrapHtmlElement.js

@@ -18,7 +18,8 @@ export default function vueWrapHtmlElement(element) {
       });
 
       // Render function returning the wrapper div
-      return () => h('div', { ref: wrapper });
+      // Use class 'u-contents' to set 'display: contents' of the parent div
+      return () => h('div', { ref: wrapper, class: 'u-contents' });
     }
   });
 }