Perform plugin install alternative journey

alphagov · Nov 30, 2022 · e92dec7 · e92dec7
1 parent 9e4cb65
commit e92dec7
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 28 deletions.
diff --git a/cypress/e2e/plugins/0-plugins-tests/install-available-plugin.cypress.js b/cypress/e2e/plugins/0-plugins-tests/install-available-plugin.cypress.js
@@ -24,10 +24,9 @@ const performPluginAction = (action) => {
   cy.get('h1')
     .should('contains.text', `${capitalize(action)} ${pluginName}`)
 
-  cy.get('button.govuk-button')
-    .should('contains.text', `${capitalize(action)} ${pluginName}`).click()
+  cy.get('.js-plugin-action a', { timeout: 20000 }).click()
 
-  cy.get('h1', { timeout: 20000 }).should('have.text', 'Plugins')
+  cy.get('h1').should('have.text', 'Plugins')
 }
 
 const provePluginFunctionalityWorks = () => {

diff --git a/...jucks/govuk-prototype-kit/internal/views/manage-prototype/plugin-install-or-uninstall.njk b/...jucks/govuk-prototype-kit/internal/views/manage-prototype/plugin-install-or-uninstall.njk
@@ -29,13 +29,7 @@
       </div>
 
       <div class="govuk-prototype-kit-manage-prototype-plugin-instructions js-visible">
-        <p>Use the {{ verb.para }} button below</p>
-
-        <form action="{{ currentUrl }}" method="post">
-          {{ govukButton({
-            text: verb.title + " " + chosenPlugin.name
-          }) }}
-        </form>
+        <p class="js-plugin-action">{{ verb.progressive|capitalize }} {{ chosenPlugin.name }} ...</p>
       </div>
     </div>
   </div>
@@ -70,22 +64,20 @@
                   } else {
                     callback()
                   }
-                }, 2000)
+                }, 1000)
               })
               .catch(() => pollStatus(callback))
     }
 
-    const onSubmit = (event) => {
-      event.preventDefault()
-      postRequest(`/manage-prototype/plugins/${mode}`)
-              .then(response => response.json())
-              .then(data => {
-                startTimestamp = data.startTimestamp
-                pollStatus(() => setTimeout(() => window.location.href = `/manage-prototype/plugins?mode=${mode}&package=${packageName}`, 4000))
+    postRequest(`/manage-prototype/plugins/${mode}`)
+            .then(response => response.json())
+            .then(data => {
+              startTimestamp = data.startTimestamp
+              pollStatus(() => {
+                const pluginAction = document.querySelector('.js-plugin-action')
+                const pluginsLink = `/manage-prototype/plugins?mode=${mode}&package=${packageName}`
+                pluginAction.innerHTML = `{{ chosenPlugin.name|capitalize }} {{ verb.status }} <br /> <a href="${pluginsLink}">Return to Plugins</a>`
               })
-    }
-
-    const form = document.querySelector('form')
-    form.addEventListener('submit', onSubmit)
+            })
   </script>
 {% endblock %}
diff --git a/lib/nunjucks/govuk-prototype-kit/internal/views/manage-prototype/plugins.njk b/lib/nunjucks/govuk-prototype-kit/internal/views/manage-prototype/plugins.njk
@@ -48,15 +48,18 @@
               </div>
               <div class="govuk-prototype-kit-manage-prototype-plugin-list-plugin-list__item-links">
                 {% if not plugin.installedVersion %}
-                  <a class="govuk-prototype-kit-manage-prototype-plugin-list-plugin-list__item-link"
+                  <a class="govuk-prototype-kit-manage-prototype-plugin-list-plugin-list__item-link govuk-button"
+                     data-module="govuk-button"
                      href="{{ plugin.installLink }}">Install<span class="govuk-visually-hidden"> {{ plugin.name }}</span></a>
                 {% endif %}
                 {% if plugin.uninstallLink %}
-                  <a class="govuk-prototype-kit-manage-prototype-plugin-list-plugin-list__item-link"
+                  <a class="govuk-prototype-kit-manage-prototype-plugin-list-plugin-list__item-link govuk-button"
+                     data-module="govuk-button"
                      href="{{ plugin.uninstallLink }}">Uninstall<span class="govuk-visually-hidden"> {{ plugin.name }}</span></a>
                 {% endif %}
                 {% if plugin.upgradeLink %}
-                  <a class="govuk-prototype-kit-manage-prototype-plugin-list-plugin-list__item-link"
+                  <a class="govuk-prototype-kit-manage-prototype-plugin-list-plugin-list__item-link govuk-button"
+                     data-module="govuk-button"
                      href="{{ plugin.upgradeLink }}">Upgrade<span class="govuk-visually-hidden"> {{ plugin.name }}</span></a>
                 {% endif %}
                 {% if plugin.helpLink %}

diff --git a/lib/routes/prototype-admin-routes.js b/lib/routes/prototype-admin-routes.js
@@ -378,17 +378,20 @@ const getVerb = (mode) => {
     case 'upgrade': return {
       title: 'Upgrade',
       para: 'upgrade',
-      status: 'upgraded'
+      status: 'upgraded',
+      progressive: 'upgrading'
     }
     case 'install': return {
       title: 'Install',
       para: 'install',
-      status: 'installed'
+      status: 'installed',
+      progressive: 'installing'
     }
     case 'uninstall': return {
       title: 'Uninstall',
       para: 'uninstall',
-      status: 'uninstalled'
+      status: 'uninstalled',
+      progressive: 'uninstalling'
     }
   }
 }