diff --git a/cypress/e2e/plugins/plugin-utils.js b/cypress/e2e/plugins/plugin-utils.js index 63c15fa3dd..e67290cfb2 100644 --- 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 index f5506f8daf..cc9a190c4d 100644 --- 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 index 37b79e6786..3c83aa5c19 100644 --- 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 @@ +
+ {% endblock %}