Add Plugin progress indicator

alphagov · Aug 1, 2023 · f928be7 · f928be7
1 parent e39d078
commit f928be7
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 8 deletions.
diff --git a/cypress/e2e/dev/5-management-tests/change-service-name.cypress.js b/cypress/e2e/dev/5-management-tests/change-service-name.cypress.js
@@ -19,10 +19,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()

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)}`
@@ -39,6 +40,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))
@@ -48,6 +51,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)
@@ -73,13 +78,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 ...`)
   }
 
   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
@@ -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))

diff --git a/lib/assets/javascripts/manage-prototype/manage-plugins.test.js b/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>

diff --git a/lib/nunjucks/views/manage-prototype/plugin-install-or-uninstall.njk b/lib/nunjucks/views/manage-prototype/plugin-install-or-uninstall.njk
@@ -106,6 +106,8 @@
 
       </div>
 
+      <div hidden id="manage-plugin-progress-indicator" class="js-visible govuk-!-font-size-27"></div>
+
     </div>
   </div>
 {% endblock %}
-Original file line number
+Diff line change
@@ Expand Up / @@ -106,6 +106,8 @@ @@
           </div>
+          <div hidden id="manage-plugin-progress-indicator" class="js-visible govuk-!-font-size-27"></div>
         </div>
       </div>
     {% endblock %}
@@ Expand Down @@