feat(#7367): ProgressBar for ExportAsJSONAction (#7374)

* refactor(ExportAsJSONAction): use private methods

* refactor: remove unnecessary webpack alias

* refactor: lint

* fix: tests for `ExportAsJSONAction`

* test: stabilize `InspectorStylesSpec` tests

* docs: fix jsdocs

* chore: remove dead / redundant code

* refactor(LocalStorageObjectProvider): use `getItem()` and `setItem()`

* refactor(ExportAsJSONAction): use `Promise.all` where applicable

* refactor(MenuAPI): one-liner

* feat: add percentage ProgressBar to ExportAsJSONAction

* fix(ProgressBar.vue): v-if conditionals

* test(fix): update mockLocalStorage

* test: fix locators

* test: remove unneeded awaits

* fix: example imagery urls (moved after NASA wordpress migration)

* Revert "refactor(LocalStorageObjectProvider): use `getItem()` and `setItem()`"

This reverts commit 4f8403adab.

* test(e2e): fix logPlot test

* Revert "Revert "refactor(LocalStorageObjectProvider): use `getItem()` and `setItem()`""

This reverts commit 0de66401cd.

* test(e2e): remove waitForNavigations

src/api/menu/MenuAPI.js

@@ -78,9 +78,7 @@ class MenuAPI {
       if (isActionGroup) {
         action = this.actionsToMenuItems(action, objectPath, view);
       } else {
-        action.onItemClicked = () => {
-          action.invoke(objectPath, view);
-        };
+        action.onItemClicked = () => action.invoke(objectPath, view);
       }
 
       return action;

src/api/overlays/Overlay.js

@@ -32,7 +32,7 @@ class Overlay extends EventEmitter {
     const { destroy } = mount(
       {
         components: {
-          OverlayComponent: OverlayComponent
+          OverlayComponent
         },
         provide: {
           dismiss: this.notifyAndDismiss.bind(this),
@@ -60,7 +60,6 @@ class Overlay extends EventEmitter {
 
   dismiss() {
     this.emit('destroy');
-    document.body.removeChild(this.container);
     this.destroy();
   }
 

src/api/overlays/OverlayAPI.js

@@ -82,14 +82,17 @@ class OverlayAPI {
   }
 
   /**
-   * A description of option properties that can be passed into the overlay
-   * @typedef options
-   * @property {object} element DOMElement that is to be inserted/shown on the overlay
-   * @property {string} size preferred size of the overlay (large, small, fit)
-   * @property {array} buttons optional button objects with label and callback properties
-   * @property {function} onDestroy callback to be called when overlay is destroyed
-   * @property {boolean} dismissable allow user to dismiss overlay by using esc, and clicking away
-   * from overlay. Unless set to false, all overlays will be dismissable by default.
+   * Creates and displays an overlay with the specified options.
+   *
+   * @typedef {Object} OverlayOptions
+   * @property {HTMLElement} element The DOM Element to be inserted or shown in the overlay.
+   * @property {'large'|'small'|'fit'} size The preferred size of the overlay.
+   * @property {Array<{label: string, callback: Function}>} [buttons] Optional array of button objects, each with 'label' and 'callback' properties.
+   * @property {Function} onDestroy Callback to be called when the overlay is destroyed.
+   * @property {boolean} [dismissable=true] Whether the overlay can be dismissed by pressing 'esc' or clicking outside of it. Defaults to true.
+   *
+   * @param {OverlayOptions} options - The configuration options for the overlay.
+   * @returns {Overlay} An instance of the Overlay class.
    */
   overlay(options) {
     let overlay = new Overlay(options);

src/api/overlays/ProgressDialog.js

@@ -17,7 +17,7 @@ class ProgressDialog extends Overlay {
   }) {
     const { vNode, destroy } = mount({
       components: {
-        ProgressDialogComponent: ProgressDialogComponent
+        ProgressDialogComponent
       },
       provide: {
         iconClass,
@@ -28,16 +28,15 @@ class ProgressDialog extends Overlay {
       },
       data() {
         return {
-          model: {
-            progressPerc: progressPerc || 0,
-            progressText
-          }
+          progressPerc,
+          progressText
         };
       },
-      template: '<progress-dialog-component :model="model"></progress-dialog-component>'
+      template:
+        '<progress-dialog-component :progress-perc="progressPerc" :progress-text="progressText"></progress-dialog-component>'
     });
-    component = vNode.componentInstance;
 
+    component = vNode.componentInstance;
     super({
       element: vNode.el,
       size: 'fit',
@@ -51,8 +50,8 @@ class ProgressDialog extends Overlay {
   }
 
   updateProgress(progressPerc, progressText) {
-    component.model.progressPerc = progressPerc;
-    component.model.progressText = progressText;
+    component.$data.progressPerc = progressPerc;
+    component.$data.progressText = progressText;
   }
 }
 

src/api/overlays/components/ProgressDialogComponent.vue

@@ -20,9 +20,9 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <dialog-component>
-    <progress-component :model="model" />
-  </dialog-component>
+  <DialogComponent>
+    <ProgressComponent :progress-perc="progressPerc" :progress-text="progressText" />
+  </DialogComponent>
 </template>
 
 <script>
@@ -31,14 +31,18 @@ import DialogComponent from './DialogComponent.vue';
 
 export default {
   components: {
-    DialogComponent: DialogComponent,
-    ProgressComponent: ProgressComponent
+    DialogComponent,
+    ProgressComponent
   },
   inject: ['iconClass', 'title', 'hint', 'timestamp', 'message'],
   props: {
-    model: {
-      type: Object,
-      required: true
+    progressPerc: {
+      type: Number,
+      default: 0
+    },
+    progressText: {
+      type: String,
+      default: ''
     }
   }
 };