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 4f8403a. * test(e2e): fix logPlot test * Revert "Revert "refactor(LocalStorageObjectProvider): use `getItem()` and `setItem()`"" This reverts commit 0de6640. * test(e2e): remove waitForNavigations
nasa · Jan 19, 2024 · 8495a75 · 8495a75
1 parent 7128f22
commit 8495a75
Show file tree

Hide file tree

Showing 19 changed files with 249 additions and 197 deletions.
diff --git a/.webpack/webpack.common.js b/.webpack/webpack.common.js
@@ -6,25 +6,23 @@ This is the OpenMCT common webpack file. It is imported by the other three webpa
 There are separate npm scripts to use these configurations, though simply running `npm install`
 will use the default production configuration.
 */
-import path from 'node:path';
-import CopyWebpackPlugin from 'copy-webpack-plugin';
-import webpack from 'webpack';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import fs from 'node:fs';
 import { execSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { VueLoaderPlugin } from 'vue-loader';
+import webpack from 'webpack';
 let gitRevision = 'error-retrieving-revision';
 let gitBranch = 'error-retrieving-branch';
 
 const packageDefinition = JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url)));
 
 try {
   gitRevision = execSync('git rev-parse HEAD').toString().trim();
-  gitBranch = execSync('git rev-parse --abbrev-ref HEAD')
-    .toString()
-    .trim();
+  gitBranch = execSync('git rev-parse --abbrev-ref HEAD').toString().trim();
 } catch (err) {
   console.warn(err);
 }
@@ -67,7 +65,6 @@ const config = {
     alias: {
       '@': path.join(projectRootDir, 'src'),
       legacyRegistry: path.join(projectRootDir, 'src/legacyRegistry'),
-      saveAs: 'file-saver/src/FileSaver.js',
       csv: 'comma-separated-values',
       EventEmitter: 'eventemitter3',
       bourbon: 'bourbon.scss',

diff --git a/e2e/tests/functional/clearDataAction.e2e.spec.js b/e2e/tests/functional/clearDataAction.e2e.spec.js
@@ -43,7 +43,7 @@ test.describe('Clear Data Action', () => {
     await expect(page.locator(backgroundImageSelector)).toBeVisible();
   });
   test('works as expected with Example Imagery', async ({ page }) => {
-    await expect(await page.locator('.c-thumb__image').count()).toBeGreaterThan(0);
+    expect(await page.locator('.c-thumb__image').count()).toBeGreaterThan(0);
     // Click the "Clear Data" menu action
     await page.getByTitle('More actions').click();
     await expect(
@@ -59,6 +59,6 @@ test.describe('Clear Data Action', () => {
 
     // Verify that the background image is no longer visible
     await expect(page.locator(backgroundImageSelector)).toBeHidden();
-    await expect(await page.locator('.c-thumb__image').count()).toBe(0);
+    expect(await page.locator('.c-thumb__image').count()).toBe(0);
   });
 });
diff --git a/e2e/tests/functional/plugins/plot/logPlot.e2e.spec.js b/e2e/tests/functional/plugins/plot/logPlot.e2e.spec.js
@@ -95,53 +95,40 @@ async function makeOverlayPlot(page, myItemsFolderName) {
 
   await page.locator('button.c-create-button').click();
   await page.locator('li[role="menuitem"]:has-text("Overlay Plot")').click();
+  // Click OK button and wait for Navigate event
   await Promise.all([
-    page.waitForNavigation({ waitUntil: 'networkidle' }),
-    page.locator('button:has-text("OK")').click(),
-    //Wait for Save Banner to appear
+    page.waitForLoadState(),
+    await page.getByRole('button', { name: 'Save' }).click(),
+    // Wait for Save Banner to appear
     page.waitForSelector('.c-message-banner__message')
   ]);
-  //Wait until Save Banner is gone
-  await page.locator('.c-message-banner__close-button').click();
-  await page.waitForSelector('.c-message-banner__message', { state: 'detached' });
 
   // save the overlay plot
-
   await saveOverlayPlot(page);
 
   // create a sinewave generator
 
   await page.locator('button.c-create-button').click();
   await page.locator('li[role="menuitem"]:has-text("Sine Wave Generator")').click();
 
-  // set amplitude to 6, offset 4, period 2
-
-  await page.locator('div:nth-child(5) .c-form-row__controls .form-control .field input').click();
-  await page.locator('div:nth-child(5) .c-form-row__controls .form-control .field input').fill('6');
-
-  await page.locator('div:nth-child(6) .c-form-row__controls .form-control .field input').click();
-  await page.locator('div:nth-child(6) .c-form-row__controls .form-control .field input').fill('4');
+  // set amplitude to 6, offset 4, data rate 2 hz
 
-  await page.locator('div:nth-child(7) .c-form-row__controls .form-control .field input').click();
-  await page.locator('div:nth-child(7) .c-form-row__controls .form-control .field input').fill('2');
-
-  // Click OK to make generator
+  await page.getByLabel('Amplitude').fill('6');
+  await page.getByLabel('Offset').fill('4');
+  await page.getByLabel('Data Rate (hz)').fill('2');
 
+  // Click OK button and wait for Navigate event
   await Promise.all([
-    page.waitForNavigation({ waitUntil: 'networkidle' }),
-    page.locator('button:has-text("OK")').click(),
-    //Wait for Save Banner to appear
+    page.waitForLoadState(),
+    await page.getByRole('button', { name: 'Save' }).click(),
+    // Wait for Save Banner to appear
     page.waitForSelector('.c-message-banner__message')
   ]);
-  //Wait until Save Banner is gone
-  await page.locator('.c-message-banner__close-button').click();
-  await page.waitForSelector('.c-message-banner__message', { state: 'detached' });
 
   // click on overlay plot
-
   await page.locator(`text=Open MCT ${myItemsFolderName} >> span`).nth(3).click();
   await Promise.all([
-    page.waitForNavigation(),
+    page.waitForLoadState(),
     page.locator('text=Unnamed Overlay Plot').first().click()
   ]);
 }

diff --git a/example/imagery/plugin.js b/example/imagery/plugin.js
@@ -21,24 +21,24 @@
  *****************************************************************************/
 
 const DEFAULT_IMAGE_SAMPLES = [
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18731.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18732.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18733.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18734.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18735.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18736.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18737.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18738.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18739.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18740.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18741.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18742.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18743.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18744.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18745.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18746.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg',
-  'https://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg'
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18732.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18733.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18734.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18735.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18736.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18737.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18738.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18739.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18740.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18741.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18742.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18743.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18744.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18745.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18746.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18747.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18748.jpg'
 ];
 const DEFAULT_IMAGE_LOAD_DELAY_IN_MILLISECONDS = 20000;
 const MIN_IMAGE_LOAD_DELAY_IN_MILLISECONDS = 5000;

diff --git a/src/api/menu/MenuAPI.js b/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;

diff --git a/src/api/overlays/Overlay.js b/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();
   }
 

diff --git a/src/api/overlays/OverlayAPI.js b/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);

diff --git a/src/api/overlays/ProgressDialog.js b/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;
   }
 }
 

diff --git a/src/api/overlays/components/ProgressDialogComponent.vue b/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: ''
     }
   }
 };

diff --git a/src/exporters/CSVExporter.js b/src/exporters/CSVExporter.js
@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 import CSV from 'comma-separated-values';
-import { saveAs } from 'saveAs';
+import { saveAs } from 'file-saver';
 
 class CSVExporter {
   export(rows, options) {

diff --git a/src/exporters/ImageExporter.js b/src/exporters/ImageExporter.js
@@ -31,8 +31,8 @@ function replaceDotsWithUnderscores(filename) {
   return filename.replace(regex, '_');
 }
 
+import { saveAs } from 'file-saver';
 import html2canvas from 'html2canvas';
-import { saveAs } from 'saveAs';
 import { v4 as uuid } from 'uuid';
 
 class ImageExporter {

diff --git a/src/exporters/JSONExporter.js b/src/exporters/JSONExporter.js
@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { saveAs } from 'saveAs';
+import { saveAs } from 'file-saver';
 
 class JSONExporter {
   export(obj, options) {