Bypass cache/dirty when canceling transaction (#7503)

* force remote/non-cached when canceling transaction

* add test

* update unit test

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')
+    );
+  });
 });

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) {
+  async refresh(domainObject, forceRemote = false) {
-    const refreshedObject = await this.get(domainObject.identifier);
+    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/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">