display spinner when user clicks on Install Now

- Ticket: SUITEDEV-24431
emartech · Jan 22, 2021 · d27fe6a · d27fe6a
1 parent b4268a1
commit d27fe6a
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 19 deletions.
diff --git a/src/renderer/components/app/app.html b/src/renderer/components/app/app.html
@@ -94,5 +94,13 @@ <h1 class="e-layout__title">GAP Secret Editor</h1>
         </div>
       </section>
     </main>
+
+    <div class="overlaycontainer" :class="{ 'e-hidden': !updateInProgress }">
+      <div class="e-overlay e-overlay-centered" style="border-radius: 0">
+        <div class="e-overlay__center">
+          <e-spinner></e-spinner>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/src/renderer/components/app/app.js b/src/renderer/components/app/app.js
@@ -36,7 +36,8 @@ export default {
     context: '',
     searchTerm: '',
     backups: [],
-    selectedBackupTime: null
+    selectedBackupTime: null,
+    updateInProgress: false
   }),
   computed: {
     availableContexts() {
@@ -200,7 +201,7 @@ export default {
   },
   async mounted() {
     await this.initialize();
-    listenForUpdates();
+    listenForUpdates(confirmed => this.updateInProgress = confirmed);
     ipcRenderer.send('ui-ready');
     logger.info('ui-ready');
   }

diff --git a/src/renderer/components/app/app.spec.js b/src/renderer/components/app/app.spec.js
@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import flushPromises from 'flush-promises';
+import { ipcRenderer } from 'electron';
 import kubernetesClient from '../../lib/kubernetes-client/kubernetes-client';
 import notificationDisplayer from '../../lib/notification-displayer';
 
@@ -519,6 +520,25 @@ describe('App', () => {
       });
     });
   });
+
+  describe('when update is available', () => {
+    it('should show loading indicator when update request is confirmed', async () => {
+      sinon.stub(kubernetesClient, 'listContexts').resolves([]);
+      sinon.stub(kubernetesClient, 'listNamespaces').resolves([]);
+      sinon.stub(window.e.utils, 'openConsequentialConfirmationDialog').callsFake(config => {
+        config.confirm.callback();
+      });
+
+      const fakeEvent = { sender: { send: () => {} } };
+      const { vm } = await loadApp();
+
+      ipcRenderer.emit('confirm-update', fakeEvent, { update: 'info' });
+      await vm.$nextTick();
+      await vm.$nextTick();
+
+      expect(vm.updateInProgress).to.eql(true);
+    });
+  });
 });
 
 const loadApp = async () => {

diff --git a/src/renderer/lib/auto-update-confirmation/auto-update-confirmation.js b/src/renderer/lib/auto-update-confirmation/auto-update-confirmation.js
@@ -1,9 +1,10 @@
 import { ipcRenderer } from 'electron';
 
-export const listenForUpdates = () => {
+export const listenForUpdates = updateConfirmedCallback => {
   ipcRenderer.on('confirm-update', async (event, updateInfo) => {
     const confirmed = await confirm(updateInfo);
     event.sender.send('confirm-update-response', confirmed);
+    updateConfirmedCallback(confirmed);
   });
 };
 

diff --git a/src/renderer/lib/auto-update-confirmation/auto-update-confirmation.spec.js b/src/renderer/lib/auto-update-confirmation/auto-update-confirmation.spec.js
@@ -6,43 +6,51 @@ describe('auto-update-confirmation', () => {
     sinon.stub(window.e.utils, 'openConsequentialConfirmationDialog').callsFake(config => {
       config.confirm.callback();
     });
+    let callBackResponse;
+    let eventResponse;
     const fakeEvent = {
-      sender: {}
+      sender: {
+        send: (channel, isConfirmed) => {
+          eventResponse = { channel, isConfirmed };
+        }
+      }
     };
-    const responseArguments = new Promise(resolve => {
-      fakeEvent.sender.send = (channel, isConfirmed) => {
-        resolve({ channel, isConfirmed });
-      };
-    });
 
-    listenForUpdates();
+    listenForUpdates(isConfirmed => { callBackResponse = isConfirmed; });
     ipcRenderer.emit('confirm-update', fakeEvent, { update: 'info' });
+    await nextTick();
 
-    expect(await responseArguments).to.eql({
+    expect(eventResponse).to.eql({
       channel: 'confirm-update-response',
       isConfirmed: true
     });
+    expect(callBackResponse).to.eql(true);
   });
 
   it('should respond with false when user cancelled the update', async () => {
     sinon.stub(window.e.utils, 'openConsequentialConfirmationDialog').callsFake(config => {
       config.cancel.callback();
     });
+    let callBackResponse;
+    let eventResponse;
     const fakeEvent = {
-      sender: {}
+      sender: {
+        send: (channel, isConfirmed) => {
+          eventResponse = { channel, isConfirmed };
+        }
+      }
     };
-    const responseArguments = new Promise(resolve => {
-      fakeEvent.sender.send = (channel, isConfirmed) => {
-        resolve({ channel, isConfirmed });
-      };
-    });
 
-    listenForUpdates();
+    listenForUpdates(isConfirmed => { callBackResponse = isConfirmed; });
     ipcRenderer.emit('confirm-update', fakeEvent, { update: 'info' });
+    await nextTick();
 
-    expect(await responseArguments).to.eql({
+    expect(eventResponse).to.eql({
       channel: 'confirm-update-response',
       isConfirmed: false
     });
+    expect(callBackResponse).to.eql(false);
   });
 });
+
+const nextTick = () => new Promise(resolve => setTimeout(resolve, 0));