Add Plugin progress indicator

Author: BenSurgisonGDS

cypress/e2e/plugins/plugin-utils.js

@@ -9,6 +9,7 @@ const managePluginsPagePath = '/manage-prototype/plugins'
 const panelProcessingQuery = '[aria-live="polite"] #panel-processing'
 const panelCompleteQuery = '[aria-live="polite"] #panel-complete'
 const panelErrorQuery = '[aria-live="polite"] #panel-error'
+const processingIndicatorQuery = '#manage-plugin-progress-indicator'
 
 function getTemplateLink (type, packageName, path) {
   const queryString = `?package=${urlencode(packageName)}&template=${urlencode(path)}`
@@ -38,6 +39,8 @@ function performPluginAction (action, plugin, pluginName) {
     .should('not.be.visible')
   cy.get(panelErrorQuery)
     .should('not.be.visible')
+  cy.get(processingIndicatorQuery)
+    .should('be.visible')
   cy.get(panelProcessingQuery)
     .should('be.visible')
     .contains(capitalize(processingText))
@@ -46,6 +49,8 @@ function performPluginAction (action, plugin, pluginName) {
 
   cy.get(panelProcessingQuery, { timeout: 20000 })
     .should('not.be.visible')
+  cy.get(processingIndicatorQuery)
+    .should('not.be.visible')
   cy.get(panelErrorQuery)
     .should('not.be.visible')
   cy.get(panelCompleteQuery)
@@ -70,12 +75,16 @@ function failAction (action) {
     .should('not.be.visible')
   cy.get(panelErrorQuery)
     .should('not.be.visible')
+  cy.get(processingIndicatorQuery)
+    .should('be.visible')
   cy.get(panelProcessingQuery)
     .should('be.visible')
     .contains(`${capitalize(action === 'upgrade' ? 'Upgrad' : action)}ing ...`)
 
   cy.get(panelProcessingQuery, { timeout: 40000 })
     .should('not.be.visible')
+  cy.get(processingIndicatorQuery)
+    .should('not.be.visible')
   cy.get(panelCompleteQuery)
     .should('not.be.visible')
   cy.get(panelErrorQuery)

lib/assets/javascripts/manage-prototype/manage-plugins.js

@@ -10,22 +10,42 @@
   let timedOut = false
   let kitIsRestarting = false
   let actionTimeoutId
-
+  let indicatorIntervalId
   const show = (id) => {
     const element = document.getElementById(id)
     element.hidden = false
   }
 
-  const hide = (id) => {
+  const hide = (id, clearContents = false) => {
     const element = document.getElementById(id)
     element.hidden = true
+    if (clearContents) {
+      element.innerHTML = ''
+    }
+  }
+
+  const startProcessing = () => {
+    const element = document.getElementById('manage-plugin-progress-indicator')
+    const updateProgressIndicator = () => {
+      element.innerHTML += '.  '
+    }
+    indicatorIntervalId = setInterval(updateProgressIndicator, 1000)
+    show('panel-processing')
+    show('manage-plugin-progress-indicator')
+    updateProgressIndicator()
+  }
+
+  const stopProcessing = () => {
+    clearInterval(indicatorIntervalId)
+    hide('manage-plugin-progress-indicator', true)
+    hide('panel-processing')
   }
 
   const showCompleteStatus = () => {
     if (actionTimeoutId) {
       clearTimeout(actionTimeoutId)
     }
-    hide('panel-processing')
+    stopProcessing()
     show('panel-complete')
     show('instructions-complete')
   }
@@ -34,7 +54,7 @@
     if (actionTimeoutId) {
       clearTimeout(actionTimeoutId)
     }
-    hide('panel-processing')
+    stopProcessing()
     show('panel-error')
   }
 
@@ -114,7 +134,7 @@
       hide('plugin-action-confirmation')
     }
 
-    show('panel-processing')
+    startProcessing()
 
     return postRequest(`/manage-prototype/plugins/${mode}`)
       .then(data => {

lib/assets/javascripts/manage-prototype/manage-plugins.test.js

@@ -12,6 +12,7 @@ const loadedHTML = `
       <div>
         <div id="panel-manual-instructions"></div>
         <div id="panel-processing" hidden=""></div>
+        <div id="manage-plugin-progress-indicator" hidden=""></div>
         <div id="panel-complete" hidden=""></div>
         <div id="panel-error" hidden=""></div>
         <div id="instructions-complete" hidden=""></div>
@@ -22,6 +23,7 @@ const processingHTML = `
       <div>
         <div id="panel-manual-instructions" hidden=""></div>
         <div id="panel-processing"></div>
+        <div id="manage-plugin-progress-indicator"></div>
         <div id="panel-complete" hidden=""></div>
         <div id="panel-error" hidden=""></div>
         <div id="instructions-complete" hidden=""></div>
@@ -32,6 +34,7 @@ const completedHTML = `
       <div>
         <div id="panel-manual-instructions" hidden=""></div>
         <div id="panel-processing" hidden=""></div>
+        <div id="manage-plugin-progress-indicator" hidden=""></div>
         <div id="panel-complete"></div>
         <div id="panel-error" hidden=""></div>
         <div id="instructions-complete"></div>
@@ -42,6 +45,7 @@ const errorHTML = `
       <div>
         <div id="panel-manual-instructions" hidden=""></div>
         <div id="panel-processing" hidden=""></div>
+        <div id="manage-plugin-progress-indicator" hidden=""></div>
         <div id="panel-complete" hidden=""></div>
         <div id="panel-error"></div>
         <div id="instructions-complete" hidden=""></div>

lib/nunjucks/views/manage-prototype/plugin-install-or-uninstall.njk

@@ -79,6 +79,8 @@
 
       </div>
 
+      <div hidden id="manage-plugin-progress-indicator" class="js-visible govuk-!-font-size-27"></div>
+
     </div>
   </div>
 {% endblock %}