Merge release/2.1.2 into master (#5946)

* Bump version to `2.1.2`

* Ensure properties stay in sync and are committed only once (#5717)

* Ensure form properties stay in sync
* Separate out overlay based forms and custom forms
* Use a transaction to save properties
* Fix GaugeController to not depend on event emitted from FormsAPI
* refactor showForms to call showCustomForm

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>

* Fix persistence timestamp (#5916)

* Calculate persisted timestamp last
* Added regression tests
* Correct transaction handling code
* Code cleanup

* Fix typo for publish (#5936)

* Add e2e tests to npm package (#5930)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Shefali Joshi <simplyrender@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>

src/api/forms/FormsAPI.js

@@ -23,13 +23,11 @@
 import FormController from './FormController';
 import FormProperties from './components/FormProperties.vue';
 
-import EventEmitter from 'EventEmitter';
 import Vue from 'vue';
+import _ from 'lodash';
 
-export default class FormsAPI extends EventEmitter {
+export default class FormsAPI {
     constructor(openmct) {
-        super();
-
         this.openmct = openmct;
         this.formController = new FormController(openmct);
     }
@@ -92,29 +90,75 @@ export default class FormsAPI extends EventEmitter {
 
     /**
      * Show form inside an Overlay dialog with given form structure
+     * @public
+     * @param {Array<Section>} formStructure a form structure, array of section
+     * @param {Object} options
+     *      @property {function} onChange a callback function when any changes detected
+     */
+    showForm(formStructure, {
+        onChange
+    } = {}) {
+        let overlay;
+
+        const self = this;
+
+        const overlayEl = document.createElement('div');
+        overlayEl.classList.add('u-contents');
+
+        overlay = self.openmct.overlays.overlay({
+            element: overlayEl,
+            size: 'dialog'
+        });
+
+        let formSave;
+        let formCancel;
+        const promise = new Promise((resolve, reject) => {
+            formSave = resolve;
+            formCancel = reject;
+        });
+
+        this.showCustomForm(formStructure, {
+            element: overlayEl,
+            onChange
+        })
+            .then((response) => {
+                overlay.dismiss();
+                formSave(response);
+            })
+            .catch((response) => {
+                overlay.dismiss();
+                formCancel(response);
+            });
+
+        return promise;
+    }
+
+    /**
+     * Show form as a child of the element provided with given form structure
      *
      * @public
      * @param {Array<Section>} formStructure a form structure, array of section
      * @param {Object} options
      *      @property {HTMLElement} element Parent Element to render a Form
      *      @property {function} onChange a callback function when any changes detected
-     *      @property {function} onSave a callback function when form is submitted
-     *      @property {function} onDismiss a callback function when form is dismissed
      */
-    showForm(formStructure, {
+    showCustomForm(formStructure, {
         element,
         onChange
     } = {}) {
-        const changes = {};
-        let overlay;
-        let onDismiss;
-        let onSave;
+        if (element === undefined) {
+            throw Error('Required element parameter not provided');
+        }
 
         const self = this;
 
+        const changes = {};
+        let formSave;
+        let formCancel;
+
         const promise = new Promise((resolve, reject) => {
-            onSave = onFormAction(resolve);
-            onDismiss = onFormAction(reject);
+            formSave = onFormAction(resolve);
+            formCancel = onFormAction(reject);
         });
 
         const vm = new Vue({
@@ -126,26 +170,17 @@ export default class FormsAPI extends EventEmitter {
                 return {
                     formStructure,
                     onChange: onFormPropertyChange,
-                    onDismiss,
-                    onSave
+                    onCancel: formCancel,
+                    onSave: formSave
                 };
             },
-            template: '<FormProperties :model="formStructure" @onChange="onChange" @onDismiss="onDismiss" @onSave="onSave"></FormProperties>'
+            template: '<FormProperties :model="formStructure" @onChange="onChange" @onCancel="onCancel" @onSave="onSave"></FormProperties>'
         }).$mount();
 
         const formElement = vm.$el;
-        if (element) {
-            element.append(formElement);
-        } else {
-            overlay = self.openmct.overlays.overlay({
-                element: vm.$el,
-                size: 'dialog',
-                onDestroy: () => vm.$destroy()
-            });
-        }
+        element.append(formElement);
 
         function onFormPropertyChange(data) {
-            self.emit('onFormPropertyChange', data);
             if (onChange) {
                 onChange(data);
             }
@@ -158,17 +193,14 @@ export default class FormsAPI extends EventEmitter {
                     key = property.join('.');
                 }
 
-                changes[key] = data.value;
+                _.set(changes, key, data.value);
             }
         }
 
         function onFormAction(callback) {
             return () => {
-                if (element) {
-                    formElement.remove();
-                } else {
-                    overlay.dismiss();
-                }
+                formElement.remove();
+                vm.$destroy();
 
                 if (callback) {
                     callback(changes);

src/api/forms/FormsAPISpec.js

@@ -133,7 +133,7 @@ describe('The Forms API', () => {
         });
 
         it('when container element is provided', (done) => {
-            openmct.forms.showForm(formStructure, { element }).catch(() => {
+            openmct.forms.showCustomForm(formStructure, { element }).catch(() => {
                 done();
             });
             const titleElement = element.querySelector('.c-overlay__dialog-title');

src/api/forms/components/FormProperties.vue

@@ -73,7 +73,7 @@
             tabindex="0"
             class="c-button js-cancel-button"
             aria-label="Cancel"
-            @click="onDismiss"
+            @click="onCancel"
         >
             {{ cancelLabel }}
         </button>
@@ -164,8 +164,8 @@ export default {
 
             this.$emit('onChange', data);
         },
-        onDismiss() {
-            this.$emit('onDismiss');
+        onCancel() {
+            this.$emit('onCancel');
         },
         onSave() {
             this.$emit('onSave');

src/api/objects/MutableDomainObject.js

@@ -75,11 +75,7 @@ class MutableDomainObject {
         return eventOff;
     }
     $set(path, value) {
-        _.set(this, path, value);
-
-        if (path !== 'persisted' && path !== 'modified') {
-            _.set(this, 'modified', Date.now());
-        }
+        MutableDomainObject.mutateObject(this, path, value);
 
         //Emit secret synchronization event first, so that all objects are in sync before subsequent events fired.
         this._globalEventEmitter.emit(qualifiedEventName(this, '$_synchronize_model'), this);
@@ -136,8 +132,11 @@ class MutableDomainObject {
     }
 
     static mutateObject(object, path, value) {
+        if (path !== 'persisted') {
+            _.set(object, 'modified', Date.now());
+        }
+
         _.set(object, path, value);
-        _.set(object, 'modified', Date.now());
     }
 }
 

src/api/objects/ObjectAPI.js

@@ -363,7 +363,6 @@ export default class ObjectAPI {
         } else if (this.#hasAlreadyBeenPersisted(domainObject)) {
             result = Promise.resolve(true);
         } else {
-            const persistedTime = Date.now();
             const username = await this.#getCurrentUsername();
             const isNewObject = domainObject.persisted === undefined;
             let savedResolve;
@@ -375,15 +374,20 @@ export default class ObjectAPI {
                 savedReject = reject;
             });
 
-            this.#mutate(domainObject, 'persisted', persistedTime);
             this.#mutate(domainObject, 'modifiedBy', username);
 
             if (isNewObject) {
+                const persistedTime = Date.now();
+
+                this.#mutate(domainObject, 'persisted', persistedTime);
                 this.#mutate(domainObject, 'created', persistedTime);
                 this.#mutate(domainObject, 'createdBy', username);
 
                 savedObjectPromise = provider.create(domainObject);
             } else {
+                const persistedTime = Date.now();
+                this.#mutate(domainObject, 'persisted', persistedTime);
+
                 savedObjectPromise = provider.update(domainObject);
             }
 

src/api/objects/ObjectAPISpec.js

@@ -94,6 +94,35 @@ describe("The Object API", () => {
                 expect(mockProvider.create).not.toHaveBeenCalled();
                 expect(mockProvider.update).toHaveBeenCalled();
             });
+            describe("the persisted timestamp for existing objects", () => {
+                let persistedTimestamp;
+                beforeEach(() => {
+                    persistedTimestamp = Date.now() - FIFTEEN_MINUTES;
+                    mockDomainObject.persisted = persistedTimestamp;
+                    mockDomainObject.modified = Date.now();
+                });
+
+                it("is updated", async () => {
+                    await objectAPI.save(mockDomainObject);
+                    expect(mockDomainObject.persisted).toBeDefined();
+                    expect(mockDomainObject.persisted > persistedTimestamp).toBe(true);
+                });
+                it("is >= modified timestamp", async () => {
+                    await objectAPI.save(mockDomainObject);
+                    expect(mockDomainObject.persisted >= mockDomainObject.modified).toBe(true);
+                });
+            });
+            describe("the persisted timestamp for new objects", () => {
+                it("is updated", async () => {
+                    await objectAPI.save(mockDomainObject);
+                    expect(mockDomainObject.persisted).toBeDefined();
+                });
+                it("is >= modified timestamp", async () => {
+                    await objectAPI.save(mockDomainObject);
+                    expect(mockDomainObject.persisted >= mockDomainObject.modified).toBe(true);
+                });
+            });
+
             it("Sets the current user for 'createdBy' on new objects", async () => {
                 await objectAPI.save(mockDomainObject);
                 expect(mockDomainObject.createdBy).toBe(USERNAME);

src/api/overlays/Overlay.js

@@ -17,6 +17,7 @@ class Overlay extends EventEmitter {
         dismissable = true,
         element,
         onDestroy,
+        onDismiss,
         size
     } = {}) {
         super();
@@ -32,7 +33,7 @@ class Overlay extends EventEmitter {
                 OverlayComponent: OverlayComponent
             },
             provide: {
-                dismiss: this.dismiss.bind(this),
+                dismiss: this.notifyAndDismiss.bind(this),
                 element,
                 buttons,
                 dismissable: this.dismissable
@@ -43,6 +44,10 @@ class Overlay extends EventEmitter {
         if (onDestroy) {
             this.once('destroy', onDestroy);
         }
+
+        if (onDismiss) {
+            this.once('dismiss', onDismiss);
+        }
     }
 
     dismiss() {
@@ -51,6 +56,12 @@ class Overlay extends EventEmitter {
         this.component.$destroy();
     }
 
+    //Ensures that any callers are notified that the overlay is dismissed
+    notifyAndDismiss() {
+        this.emit('dismiss');
+        this.dismiss();
+    }
+
     /**
      * @private
      **/

src/api/overlays/OverlayAPI.js

@@ -55,7 +55,7 @@ class OverlayAPI {
     dismissLastOverlay() {
         let lastOverlay = this.activeOverlays[this.activeOverlays.length - 1];
         if (lastOverlay && lastOverlay.dismissable) {
-            lastOverlay.dismiss();
+            lastOverlay.notifyAndDismiss();
         }
     }