Add Plugin progress indicator

alphagov · Feb 3, 2023 · 7ff1992 · 7ff1992
1 parent 7bb6ba2
commit 7ff1992
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/cypress/e2e/plugins/plugin-utils.js b/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)

diff --git a/lib/assets/javascripts/manage-prototype/manage-plugins.js b/lib/assets/javascripts/manage-prototype/manage-plugins.js
@@ -5,6 +5,7 @@ window.GOVUKPrototypeKit.documentReady(() => {
   const mode = params.get('mode') || window.location.pathname.split('/').pop()
   let requestTimeoutId
   let timedOut = false
+  let indicatorIntervalId
   const timeout = 30 * 1000
   const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
 
@@ -22,17 +23,34 @@ window.GOVUKPrototypeKit.documentReady(() => {
     window.console.info(`GOV.UK Prototype Kit - ${status} ${mode} of ${packageName}`)
   }
 
+  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')
+    hide('panel-processing')
+  }
+
   const showCompleteStatus = () => {
     clearTimeout(actionTimeoutId)
     log('Successful')
-    hide('panel-processing')
+    stopProcessing()
     show('panel-complete')
     show('instructions-complete')
   }
 
   const showErrorStatus = () => {
     log('Failed')
-    hide('panel-processing')
+    stopProcessing()
     show('panel-error')
   }
 
@@ -92,7 +110,7 @@ window.GOVUKPrototypeKit.documentReady(() => {
       hide('plugin-action-confirmation')
     }
 
-    show('panel-processing')
+    startProcessing()
 
     postRequest(`/manage-prototype/plugins/${mode}`)
       .then(response => response.json())

diff --git a/lib/nunjucks/views/manage-prototype/plugin-install-or-uninstall.njk b/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 %}