Add Plugin progress indicator

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New features
+
+- [#1954: Add Plugin progress indicator](https://github.com/alphagov/govuk-prototype-kit/pull/1954)
+
 ## 13.16.0
 
 ### New features

cypress/e2e/dev/5-management-tests/change-service-name.cypress.js

@@ -18,10 +18,8 @@ describe('change service name', () => {
   afterEach(restoreStarterFiles)
 
   it('The service name should change to "cypress test" and the task should be set to "Done"', () => {
-    waitForApplication()
+    waitForApplication('/')
 
-    cy.task('log', 'Visit the index page and navigate to the manage your prototype page')
-    cy.visit('/')
     cy.get('.govuk-heading-xl').contains(originalText)
     cy.get('p strong').contains(appConfigPath)
     cy.get(`main a[href="${managePagePath}"]`).contains('Manage your prototype').click()

cypress/e2e/plugins/plugin-utils.js

@@ -10,6 +10,7 @@ const manageInstalledPluginsPagePath = '/manage-prototype/plugins-installed'
 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)}`
@@ -135,13 +136,15 @@ function performPluginAction (action, plugin, pluginName) {
       .contains(pluginName)
   }
 
-  const processingText = `${action === 'update' ? 'Updat' : action}ing ...`
+  const processingText = `${action === 'update' ? 'Updat' : action}ing`
 
   if (Cypress.env('skipPluginActionInterimStep') !== 'true') {
     cy.get(panelCompleteQuery, { timeout: 20000 })
       .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))
@@ -151,6 +154,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)
@@ -176,13 +181,17 @@ 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 === 'update' ? 'Updat' : action)}ing ...`)
+      .contains(`${capitalize(action === 'update' ? 'Updat' : 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,26 +10,46 @@
   let timedOut = false
   let kitIsRestarting = false
   let actionTimeoutId
-
+  let indicatorIntervalId
   const show = (id) => {
     const element = document.getElementById(id)
     if (element) {
       element.hidden = false
     }
   }
 
-  const hide = (id) => {
+  const hide = (id, clearContents = false) => {
     const element = document.getElementById(id)
     if (element) {
       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')
   }
@@ -38,7 +58,7 @@
     if (actionTimeoutId) {
       clearTimeout(actionTimeoutId)
     }
-    hide('panel-processing')
+    stopProcessing()
     show('panel-error')
   }
 
@@ -126,7 +146,7 @@
       hide('plugin-action-confirmation')
     }
 
-    show('panel-processing')
+    startProcessing()
 
     return getToken()
       .then((token) => postRequest(`/manage-prototype/plugins/${mode}`, token))

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

@@ -14,6 +14,7 @@ const loadedHTML = `
         <div id="plugin-heading" hidden=""></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>
@@ -26,6 +27,7 @@ const processingHTML = `
         <div id="plugin-heading"></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>
@@ -38,6 +40,7 @@ const completedHTML = `
         <div id="plugin-heading"></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>
@@ -50,6 +53,7 @@ const errorHTML = `
         <div id="plugin-heading"></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

@@ -72,7 +72,8 @@
 
         <div hidden class="panel-processing govuk-panel govuk-panel--confirmation" id="panel-processing">
           <div class="govuk-panel__title govuk-!-font-size-27">
-            {{ verb.progressive|capitalize }} ...
+            {{ verb.progressive|capitalize }}
+            <div hidden id="manage-plugin-progress-indicator" class="js-visible"></div>
           </div>
         </div>