From 48578a0a321505a94811cfdc026846c386e1adb2 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Mon, 28 Oct 2024 17:24:21 -0500
Subject: [PATCH] Msp dashboard:  Add syncing overlay. (#23311)

Related to: https://github.com/fleetdm/confidential/issues/8602

Changes:
- Added a syncing overlay when the dashboard gathers an updated list of
software, profiles, and scripts from a Fleet instance.
---
 .../js/components/ajax-overlay.component.js   | 103 ++++++++++++++++++
 .../assets/js/pages/profiles.page.js          |   7 +-
 .../assets/js/pages/scripts.page.js           |   7 +-
 .../assets/js/pages/software/software.page.js |   8 +-
 .../components/ajax-overlay.component.less    |   8 ++
 .../assets/styles/importer.less               |   1 +
 .../views/layouts/layout.ejs                  |   1 +
 .../views/pages/profiles.ejs                  |   1 +
 .../views/pages/scripts.ejs                   |   1 +
 .../views/pages/software/software.ejs         |   1 +
 10 files changed, 131 insertions(+), 7 deletions(-)
 create mode 100644 ee/bulk-operations-dashboard/assets/js/components/ajax-overlay.component.js
 create mode 100644 ee/bulk-operations-dashboard/assets/styles/components/ajax-overlay.component.less

diff --git a/ee/bulk-operations-dashboard/assets/js/components/ajax-overlay.component.js b/ee/bulk-operations-dashboard/assets/js/components/ajax-overlay.component.js
new file mode 100644
index 0000000000..87f547a15f
--- /dev/null
+++ b/ee/bulk-operations-dashboard/assets/js/components/ajax-overlay.component.js
@@ -0,0 +1,103 @@
+/**
+ * <ajax-overlay>
+ * -----------------------------------------------------------------------------
+ *
+ * @type {Component}
+ *
+ * --- SLOTS: ---
+ * N/A
+ *
+ * --- EVENTS EMITTED: ---
+ * N/A
+ *
+ * -----------------------------------------------------------------------------
+ */
+
+parasails.registerComponent('ajaxOverlay', {
+
+  //  ╔═╗╦ ╦╔╗ ╦  ╦╔═╗  ╔═╗╦═╗╔═╗╔═╗╔═╗
+  //  ╠═╝║ ║╠╩╗║  ║║    ╠═╝╠╦╝║ ║╠═╝╚═╗
+  //  ╩  ╚═╝╚═╝╩═╝╩╚═╝  ╩  ╩╚═╚═╝╩  ╚═╝
+  props: [
+    'syncing',
+    'syncingMessage'
+  ],
+
+  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╦╔╗╔╔╦╗╔═╗╦═╗╔╗╔╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
+  //  ║║║║║ ║ ║╠═╣║    ║║║║ ║ ║╣ ╠╦╝║║║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
+  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╩╝╚╝ ╩ ╚═╝╩╚═╝╚╝╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
+  data: function () {
+    return {
+      //…
+    };
+  },
+
+  beforeMount: function() {
+    //…
+  },
+
+  //  ╦ ╦╔╦╗╔╦╗╦
+  //  ╠═╣ ║ ║║║║
+  //  ╩ ╩ ╩ ╩ ╩╩═╝
+  template: `
+  <div style="top: 0; left: 0; background-color: rgba(255,255,255,0.75); z-index: 1000;" class="position-fixed w-100 h-100" :class="syncing? '' : 'd-none'">
+    <div class="row h-100">
+      <div class="col h-100"></div>
+      <div class="col-6 col-md-4 h-100">
+        <div class="d-flex flex-column h-100 justify-content-center">
+          <div class="py-5 text-center">
+            <h2 purpose="syncing-message" class="text-dark" v-if="syncingMessage">{{syncingMessage}}</h2>
+            <span purpose="loading-indicator">
+              <span class="loading-dot dot1"></span>
+              <span class="loading-dot dot2"></span>
+              <span class="loading-dot dot3"></span>
+              <span class="loading-dot dot4"></span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="col h-100"></div>
+    </div>
+  </div>
+  `,
+
+  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
+  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
+  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
+  mounted: async function () {
+    //…
+  },
+
+  beforeDestroy: function() {
+    //…
+  },
+
+  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
+  //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
+  //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
+  methods: {
+
+    //  ╦╔╗╔╔╦╗╔═╗╦═╗╔╗╔╔═╗╦    ╔═╗╦  ╦╔═╗╔╗╔╔╦╗  ╦ ╦╔═╗╔╗╔╔╦╗╦  ╔═╗╦═╗╔═╗
+    //  ║║║║ ║ ║╣ ╠╦╝║║║╠═╣║    ║╣ ╚╗╔╝║╣ ║║║ ║   ╠═╣╠═╣║║║ ║║║  ║╣ ╠╦╝╚═╗
+    //  ╩╝╚╝ ╩ ╚═╝╩╚═╝╚╝╩ ╩╩═╝  ╚═╝ ╚╝ ╚═╝╝╚╝ ╩   ╩ ╩╩ ╩╝╚╝═╩╝╩═╝╚═╝╩╚═╚═╝
+
+    //…
+
+    //  ╔═╗╦ ╦╔╗ ╦  ╦╔═╗  ╔╦╗╔═╗╔╦╗╦ ╦╔═╗╔╦╗╔═╗
+    //  ╠═╝║ ║╠╩╗║  ║║    ║║║║╣  ║ ╠═╣║ ║ ║║╚═╗
+    //  ╩  ╚═╝╚═╝╩═╝╩╚═╝  ╩ ╩╚═╝ ╩ ╩ ╩╚═╝═╩╝╚═╝
+    // > Public methods are rarely exposed by Vue components, but sometimes they
+    // > are an important escape hatch.  They are callable via something like
+    // > `this.$refs.ajaxOverlay.doSomething())`, and, by convention, are always
+    // > prefixed with "do".
+    // N/A
+
+    //  ╔═╗╦═╗╦╦  ╦╔═╗╔╦╗╔═╗  ╔╦╗╔═╗╔╦╗╦ ╦╔═╗╔╦╗╔═╗
+    //  ╠═╝╠╦╝║╚╗╔╝╠═╣ ║ ║╣   ║║║║╣  ║ ╠═╣║ ║ ║║╚═╗
+    //  ╩  ╩╚═╩ ╚╝ ╩ ╩ ╩ ╚═╝  ╩ ╩╚═╝ ╩ ╩ ╩╚═╝═╩╝╚═╝
+
+    //…
+
+  }
+
+});
diff --git a/ee/bulk-operations-dashboard/assets/js/pages/profiles.page.js b/ee/bulk-operations-dashboard/assets/js/pages/profiles.page.js
index b3a6aa1ee0..453647a428 100644
--- a/ee/bulk-operations-dashboard/assets/js/pages/profiles.page.js
+++ b/ee/bulk-operations-dashboard/assets/js/pages/profiles.page.js
@@ -23,6 +23,8 @@ parasails.registerPage('profiles', {
     profileToEdit: {},
     cloudError: '',
     newProfile: undefined,
+    syncingMessage: '',
+    overlaySyncing: false,
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
@@ -118,10 +120,11 @@ parasails.registerPage('profiles', {
       await this._getProfiles();
     },
     _getProfiles: async function() {
-      this.syncing = true;
+      this.overlaySyncing = true;
+      this.syncingMessage = 'Gathering profiles';
       let newProfilesInformation = await Cloud.getProfiles();
       this.profiles = newProfilesInformation;
-      this.syncing = false;
+      this.overlaySyncing = false;
       await this.changeTeamFilter();
     }
   }
diff --git a/ee/bulk-operations-dashboard/assets/js/pages/scripts.page.js b/ee/bulk-operations-dashboard/assets/js/pages/scripts.page.js
index d7fb575946..dd381a37a8 100644
--- a/ee/bulk-operations-dashboard/assets/js/pages/scripts.page.js
+++ b/ee/bulk-operations-dashboard/assets/js/pages/scripts.page.js
@@ -23,6 +23,8 @@ parasails.registerPage('scripts', {
     profileToEdit: {},
     cloudError: '',
     newScript: undefined,
+    syncingMessage: '',
+    overlaySyncing: '',
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
@@ -110,10 +112,11 @@ parasails.registerPage('scripts', {
       await this._getScripts();
     },
     _getScripts: async function() {
-      this.syncing = true;
+      this.overlaySyncing = true;
+      this.syncingMessage = 'Gathering scripts';
       let newScriptsInformation = await Cloud.getScripts();
       this.scripts = newScriptsInformation;
-      this.syncing = false;
+      this.overlaySyncing = false;
       await this.changeTeamFilter();
     }
   }
diff --git a/ee/bulk-operations-dashboard/assets/js/pages/software/software.page.js b/ee/bulk-operations-dashboard/assets/js/pages/software/software.page.js
index a9c50ef8a2..feb77b099e 100644
--- a/ee/bulk-operations-dashboard/assets/js/pages/software/software.page.js
+++ b/ee/bulk-operations-dashboard/assets/js/pages/software/software.page.js
@@ -25,7 +25,8 @@ parasails.registerPage('software', {
     newSoftware: undefined,
     showAdvancedOptions: false,
     newSoftwareFilename: undefined,
-
+    syncingMessage: '',
+    overlaySyncing: false,
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
@@ -136,10 +137,11 @@ parasails.registerPage('software', {
       }
     },
     _getSoftware: async function() {
-      this.syncing = true;
+      this.overlaySyncing = true;
+      this.syncingMessage = 'Gathering software';
       let newSoftwareInformation = await Cloud.getSoftware();
       this.software = newSoftwareInformation;
-      this.syncing = false;
+      this.overlaySyncing = false;
       await this.changeTeamFilter();
     }
   }
diff --git a/ee/bulk-operations-dashboard/assets/styles/components/ajax-overlay.component.less b/ee/bulk-operations-dashboard/assets/styles/components/ajax-overlay.component.less
new file mode 100644
index 0000000000..a33b9cd0e5
--- /dev/null
+++ b/ee/bulk-operations-dashboard/assets/styles/components/ajax-overlay.component.less
@@ -0,0 +1,8 @@
+/**
+ * <ajax-overlay>
+ */
+[parasails-component='ajax-overlay'] {
+  [purpose='loading-indicator'] {
+    .loader(@brand);
+  }
+}
diff --git a/ee/bulk-operations-dashboard/assets/styles/importer.less b/ee/bulk-operations-dashboard/assets/styles/importer.less
index 1129e9e617..a697095b93 100644
--- a/ee/bulk-operations-dashboard/assets/styles/importer.less
+++ b/ee/bulk-operations-dashboard/assets/styles/importer.less
@@ -19,6 +19,7 @@
 // Per-component styles
 @import 'components/stripe-card-element.component.less';
 @import 'components/ajax-button.component.less';
+@import 'components/ajax-overlay.component.less';
 @import 'components/modal.component.less';
 @import 'components/cloud-error.component.less';
 @import 'components/multifield.component.less';
diff --git a/ee/bulk-operations-dashboard/views/layouts/layout.ejs b/ee/bulk-operations-dashboard/views/layouts/layout.ejs
index f9b2c68b8b..6a8dba9199 100644
--- a/ee/bulk-operations-dashboard/views/layouts/layout.ejs
+++ b/ee/bulk-operations-dashboard/views/layouts/layout.ejs
@@ -143,6 +143,7 @@
     <script src="/js/components/ace-editor.component.js"></script>
     <script src="/js/components/ajax-button.component.js"></script>
     <script src="/js/components/ajax-form.component.js"></script>
+    <script src="/js/components/ajax-overlay.component.js"></script>
     <script src="/js/components/cloud-error.component.js"></script>
     <script src="/js/components/file-upload.component.js"></script>
     <script src="/js/components/js-timestamp.component.js"></script>
diff --git a/ee/bulk-operations-dashboard/views/pages/profiles.ejs b/ee/bulk-operations-dashboard/views/pages/profiles.ejs
index a7f2989009..4f0b8d9e28 100644
--- a/ee/bulk-operations-dashboard/views/pages/profiles.ejs
+++ b/ee/bulk-operations-dashboard/views/pages/profiles.ejs
@@ -150,5 +150,6 @@
       </ajax-form>
     </div>
   </modal>
+  <ajax-overlay :syncing-message="syncingMessage" :syncing="overlaySyncing"></ajax-overlay>
 </div>
 <%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
diff --git a/ee/bulk-operations-dashboard/views/pages/scripts.ejs b/ee/bulk-operations-dashboard/views/pages/scripts.ejs
index 2b00b7771c..6ac648acec 100644
--- a/ee/bulk-operations-dashboard/views/pages/scripts.ejs
+++ b/ee/bulk-operations-dashboard/views/pages/scripts.ejs
@@ -160,5 +160,6 @@
         </ajax-form>
       </div>
     </modal>
+    <ajax-overlay :syncing-message="syncingMessage" :syncing="overlaySyncing"></ajax-overlay>
 </div>
 <%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
diff --git a/ee/bulk-operations-dashboard/views/pages/software/software.ejs b/ee/bulk-operations-dashboard/views/pages/software/software.ejs
index f9ab497303..0467e7f606 100644
--- a/ee/bulk-operations-dashboard/views/pages/software/software.ejs
+++ b/ee/bulk-operations-dashboard/views/pages/software/software.ejs
@@ -196,5 +196,6 @@
       </ajax-form>
     </div>
   </modal>
+  <ajax-overlay :syncing-message="syncingMessage" :syncing="overlaySyncing"></ajax-overlay>
 </div>
 <%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>