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 26bc718b19..9708ce94c0 100644 --- a/lib/assets/javascripts/manage-prototype/manage-plugins.js +++ b/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 => { diff --git a/lib/assets/javascripts/manage-prototype/manage-plugins.test.js b/lib/assets/javascripts/manage-prototype/manage-plugins.test.js index 4b34e57c2e..3d5c3415f6 100644 --- a/lib/assets/javascripts/manage-prototype/manage-plugins.test.js +++ b/lib/assets/javascripts/manage-prototype/manage-plugins.test.js @@ -12,6 +12,7 @@ const loadedHTML = `