New Plugin Details page

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New features
+
+- [#2328: New Plugin Details page](https://github.com/alphagov/govuk-prototype-kit/pull/2328)
+
 ## 13.13.1
 
 ### Fixes

__tests__/spec/force-https-redirect.js

@@ -18,10 +18,6 @@ process.env.KIT_PROJECT_DIR = testDir
 process.env.NODE_ENV = 'production'
 process.env.USE_HTTPS = 'true'
 
-jest.mock('../../lib/plugins/packages.js', () => {
-  return {}
-})
-
 const app = require('../../server.js')
 
 describe('The Prototype Kit - force HTTPS redirect functionality', () => {

cypress/e2e/plugins/2-prototype-kit-plugin-tests/handle-plugin-update-when-a-dependency-is-now-required.cypress.js → cypress/e2e/plugins/0-complex-dependent-packages/handle-plugin-update-when-a-dependency-is-now-required.cypress.js

@@ -25,25 +25,36 @@ describe('Handle a plugin update', () => {
 
   it('when a dependency is now required', () => {
     cy.task('createFile', { filename: additionalScssPath, data: additionalScssContents })
+
+    waitForApplication(pluginsPage)
     installPlugin(plugin, pluginVersion)
     uninstallPlugin(dependencyPlugin)
 
     waitForApplication(pluginsPage)
 
     cy.get('[data-plugin-group-status="search"]')
       .find(`[data-plugin-package-name="${dependencyPlugin}"]`)
-      .find('button')
+      .find('.plugin-details-link')
+      .contains(dependencyPluginName)
+      .click()
+
+    cy.get('.govuk-prototype-kit-plugin-install-button', { timeout: 4000 })
       .contains('Install')
 
+    waitForApplication(pluginsPage)
+
     cy.get('#installed-plugins-link').click()
 
     cy.get('[data-plugin-group-status="installed"]')
       .find(`[data-plugin-package-name="${plugin}"]`)
-      .find('button')
+      .find('.plugin-details-link')
+      .click()
+
+    cy.get('.govuk-prototype-kit-plugin-update-button', { timeout: 4000 })
       .contains('Update')
       .click()
 
-    cy.get('#plugin-action-confirmation')
+    cy.get('#dependency-heading', { timeout: 4000 })
       .find('ul')
       .contains(dependencyPluginName)
 
@@ -54,6 +65,10 @@ describe('Handle a plugin update', () => {
       .contains('Update complete')
 
     cy.get('#instructions-complete a')
+      .contains('Back to plugin details')
+      .click()
+
+    cy.get('.govuk-back-link', { timeout: 5000 })
       .contains('Back to plugins')
       .click()
 

cypress/e2e/plugins/0-mock-plugin-tests/install-plugin-via-ui-test.cypress.js → cypress/e2e/plugins/1-mock-plugin-tests/install-plugin-via-ui-test.cypress.js

@@ -1,21 +1,25 @@
-const { restoreStarterFiles, log } = require('../../utils')
+const { restoreStarterFiles, log, waitForApplication } = require('../../utils')
 const path = require('path')
 const {
   loadTemplatesPage,
-  managePluginsPagePath,
-  performPluginAction
+  performPluginAction, managePrototypeContextPath
 } = require('../plugin-utils')
 
 const panelCompleteQuery = '[aria-live="polite"] #panel-complete'
 const fixtures = path.join(Cypress.config('fixturesFolder'))
 const dependentPlugin = 'plugin-fee'
+const dependentPluginPackageName = 'plugin-fee'
 const dependentPluginName = 'Plugin Fee'
 const dependentPluginLocation = [fixtures, 'plugins', dependentPlugin].join(Cypress.config('pathSeparator'))
 const dependencyPlugin = 'govuk-frontend'
 const dependencyPluginName = 'GOV.UK Frontend'
 
 describe('Install and uninstall Local Plugin via UI Test', async () => {
   afterEach(restoreStarterFiles)
+  beforeEach(() => () => {
+    cy.exec(`cd ${Cypress.env('projectFolder')} && npm uninstall ${dependentPluginPackageName}`)
+    cy.task('addToConfigJson', { allowGovukFrontendUninstall: true })
+  })
 
   it(`The ${dependentPlugin} plugin will be installed`, () => {
     log(`The ${dependentPlugin} plugin templates are not available`)
@@ -26,16 +30,11 @@ describe('Install and uninstall Local Plugin via UI Test', async () => {
 
     log(`Install the ${dependentPlugin} plugin`)
     cy.task('waitUntilAppRestarts')
-    cy.visit(`${managePluginsPagePath}/install?package=${encodeURIComponent(dependentPlugin)}&version=${encodeURIComponent(dependentPluginLocation)}`)
+    cy.visit(`${managePrototypeContextPath}/plugin/fs:${encodeURIComponent(dependentPluginLocation)}/install`)
     cy.get('#plugin-action-button').click()
 
     cy.get(panelCompleteQuery, { timeout: 20000 })
       .should('be.visible')
-    cy.get('a').contains('Back to plugins').click()
-
-    cy.get('#installed-plugins-link').click()
-
-    cy.get(`[data-plugin-package-name="${dependentPlugin}"] button`).contains('Uninstall')
 
     //   ------------------------
 
@@ -46,42 +45,47 @@ describe('Install and uninstall Local Plugin via UI Test', async () => {
     //   ------------------------
 
     log('Uninstall the local plugin')
-    cy.get('a').contains('Plugins').click()
-    cy.get('#installed-plugins-link').click()
+    cy.visit('')
+    cy.visit('/manage-prototype/plugins-installed')
 
     cy.get(`[data-plugin-package-name="${dependentPlugin}"]`)
       .scrollIntoView()
-      .find('button')
-      .contains('Uninstall')
+      .find('.plugin-details-link')
       .click()
 
+    cy.visit(`${managePrototypeContextPath}/plugin/fs:${encodeURIComponent(dependentPluginLocation)}/uninstall`)
+    cy.get('#plugin-action-button').click()
+
     performPluginAction('uninstall', dependentPlugin, dependentPluginName)
 
+    waitForApplication()
+
     //   ------------------------
 
     log(`The ${dependentPlugin} plugin templates are not available`)
-    cy.get('a').contains('Templates').click()
+    cy.visit('http://localhost:3000/manage-prototype/templates', { retryOnNetworkFailure: true, timeout: 4000 })
     cy.get(`[data-plugin-package-name="${dependentPlugin}"]`).should('not.exist')
   })
 
   it(`The ${dependentPlugin} plugin and ${dependencyPlugin} will be installed`, () => {
+    cy.task('addToConfigJson', { allowGovukFrontendUninstall: true })
     log(`The ${dependentPlugin} plugin templates are not available`)
     loadTemplatesPage()
     cy.get(`[data-plugin-package-name="${dependentPlugin}"]`).should('not.exist')
 
     //   ------------------------
 
     log(`Uninstall the ${dependencyPlugin} to force the UI to ask for it later`)
-    cy.task('waitUntilAppRestarts')
-    cy.visit(`${managePluginsPagePath}/uninstall?package=${encodeURIComponent(dependencyPlugin)}`)
+    waitForApplication()
+    cy.visit(`${managePrototypeContextPath}/plugin/installed:${encodeURIComponent(dependencyPlugin)}/uninstall`)
     cy.get('#plugin-action-button').click()
     performPluginAction('uninstall', dependencyPlugin, dependencyPluginName)
 
     //   ------------------------
 
     log(`Install the ${dependentPlugin} plugin and the ${dependencyPlugin}`)
-    cy.task('waitUntilAppRestarts')
-    cy.visit(`${managePluginsPagePath}/install?package=${encodeURIComponent(dependentPlugin)}&version=${encodeURIComponent(dependentPluginLocation)}`)
+    waitForApplication()
+    cy.visit(`${managePrototypeContextPath}/plugin/fs:${encodeURIComponent(dependentPluginLocation)}/install`)
     // Should list the dependency plugin
     cy.get('li').contains(dependencyPluginName)
     cy.get('#plugin-action-button').click()
@@ -96,8 +100,8 @@ describe('Install and uninstall Local Plugin via UI Test', async () => {
     //   ------------------------
 
     log('Uninstall the dependency plugin')
-    cy.task('waitUntilAppRestarts')
-    cy.visit(`${managePluginsPagePath}/uninstall?package=${encodeURIComponent(dependencyPlugin)}`)
+    waitForApplication()
+    cy.visit(`${managePrototypeContextPath}/plugin/installed:${encodeURIComponent(dependencyPlugin)}/uninstall`)
     // Should list the dependent plugin
     cy.get('li').contains(dependentPluginName)
     cy.get('#plugin-action-button').click()

cypress/e2e/plugins/1-available-plugins-tests/available-plugins.cypress.js → cypress/e2e/plugins/2-available-plugins-tests/available-plugins.cypress.js

@@ -1,11 +1,11 @@
 // local dependencies
-const { uninstallPlugin, restoreStarterFiles, log } = require('../../utils')
+const { uninstallPlugin, restoreStarterFiles, log, waitForApplication } = require('../../utils')
 const {
-  managePluginsPagePath,
   loadTemplatesPage,
   loadPluginsPage,
   manageTemplatesPagePath,
-  manageInstalledPluginsPagePath
+  manageInstalledPluginsPagePath,
+  managePrototypeContextPath
 } = require('../plugin-utils')
 
 const panelCompleteQuery = '[aria-live="polite"] #panel-complete'
@@ -25,7 +25,7 @@ async function installPluginTests ({ plugin, templates, version }) {
       log(`Install the ${plugin} plugin`)
       if (version) {
         cy.task('waitUntilAppRestarts')
-        cy.visit(`${managePluginsPagePath}/install?package=${encodeURIComponent(plugin)}&version=${version}`)
+        cy.visit(`${managePrototypeContextPath}/plugin/npm:${encodeURIComponent(plugin)}:${version}/install`)
 
         cy.get('#plugin-action-button').click()
       } else {
@@ -36,10 +36,11 @@ async function installPluginTests ({ plugin, templates, version }) {
 
       cy.get(panelCompleteQuery, { timeout: 20000 })
         .should('be.visible')
-      cy.get('a').contains('Back to plugins').click()
+      cy.get('a').contains('Back to plugin details').should('exist')
 
-      cy.get('#installed-plugins-link').click()
-      cy.get(`[data-plugin-package-name="${plugin}"] button`).contains('Uninstall')
+      waitForApplication(manageInstalledPluginsPagePath)
+
+      cy.get(`[data-plugin-package-name="${plugin}"]`, { timeout: 3000 })
 
       //   ------------------------
 
@@ -59,15 +60,18 @@ async function installPluginTests ({ plugin, templates, version }) {
       //   ------------------------
 
       log(`Uninstall the ${plugin} plugin`)
-      cy.visit(manageInstalledPluginsPagePath)
+      waitForApplication(manageInstalledPluginsPagePath)
+
+      cy.get(`[data-plugin-package-name="${plugin}"] .plugin-details-link`, { timeout: 20000 }).click()
 
-      cy.get(`[data-plugin-package-name="${plugin}"] button`).contains('Uninstall').click()
+      cy.get('.govuk-prototype-kit-plugin-uninstall-button', { timeout: 20000 }).contains('Uninstall').click()
 
       cy.get(panelCompleteQuery, { timeout: 20000 })
         .should('be.visible')
-      cy.get('a').contains('Back to plugins').click()
 
-      cy.get(`[data-plugin-package-name="${plugin}"] button`).contains('Install')
+      cy.visit(`${managePrototypeContextPath}/plugin/npm:${encodeURIComponent(plugin)}:${version}`, { retryOnNetworkFailure: true, timeout: 10000 })
+
+      cy.get('.govuk-prototype-kit-plugin-install-button', { timeout: 20000 }).contains('Install').should('exist')
     })
   })
 }

cypress/e2e/plugins/2-prototype-kit-plugin-tests/allow-upgrade-in-url.cypress.js → cypress/e2e/plugins/3-prototype-kit-plugin-tests/allow-upgrade-in-url.cypress.js

@@ -18,7 +18,7 @@ describe('Allow upgrade in URLs', () => {
     cy.exec(`cd ${Cypress.env('projectFolder')} && npm install`)
 
     log('Make sure old upgrade URL still works')
-    cy.visit(`/manage-prototype/plugins/upgrade?package=${encodeURIComponent(plugin)}`)
+    cy.visit(`/manage-prototype/plugin/npm:${encodeURIComponent(plugin)}/update`)
     cy.get('button#plugin-action-button')
       .contains('Update')
       .click()

cypress/e2e/plugins/2-prototype-kit-plugin-tests/handle-plugin-installation-mismatch.cypress.js → cypress/e2e/plugins/3-prototype-kit-plugin-tests/handle-plugin-installation-mismatch.cypress.js

@@ -1,6 +1,7 @@
 const { replaceInFile, waitForApplication, restoreStarterFiles, log } = require('../../utils')
 const path = require('path')
 const plugin = '@govuk-prototype-kit/task-list'
+const pluginName = 'Task List'
 const pluginVersion = '1.1.1'
 const originalText = '"dependencies": {'
 const replacementText = `"dependencies": { "${plugin}": "${pluginVersion}",`
@@ -12,16 +13,23 @@ describe('Handle a plugin installation mismatch', () => {
 
   it('where the prototype package.json specifies a dependency that has not been installed', () => {
     waitForApplication()
+    cy.exec(`cd ${Cypress.env('projectFolder')} && npm uninstall ${plugin}`)
 
     log(`Add ${plugin} to the dependencies within the package.json`)
     replaceInFile(pkgJsonFile, originalText, '', replacementText)
 
+    waitForApplication()
+
     log(`Make sure ${plugin} is displayed as not installed`)
     cy.visit(pluginsPage)
 
     cy.get(`[data-plugin-package-name="${plugin}"]`)
       .scrollIntoView()
-      .find('button')
+      .find('.plugin-details-link')
+      .contains(pluginName)
+      .click()
+
+    cy.get('.govuk-prototype-kit-plugin-install-button', { timeout: 4000 })
       .contains('Install')
 
     log('Force the plugins to be installed with an npm install')
@@ -34,7 +42,7 @@ describe('Handle a plugin installation mismatch', () => {
     cy.get('#installed-plugins-link').click()
     cy.get(`[data-plugin-package-name="${plugin}"]`)
       .scrollIntoView()
-      .find('button')
-      .contains('Uninstall')
+      .find('.plugin-details-link')
+      .contains(pluginName)
   })
 })

cypress/e2e/plugins/3-prototype-kit-plugin-tests/prevent-uninstalling-kit-from-ui.cypress.js

@@ -0,0 +1,20 @@
+// local dependencies
+const { managePrototypeContextPath } = require('../plugin-utils')
+const { restoreStarterFiles } = require('../../utils')
+
+const plugin = 'govuk-prototype-kit'
+
+describe('Prevent uninstalling kit from ui', () => {
+  after(restoreStarterFiles)
+
+  it('Should fail', () => {
+    cy.task('waitUntilAppRestarts')
+    cy.request({
+      url: `${managePrototypeContextPath}/plugin/installed:${plugin}/uninstall`,
+      method: 'GET',
+      failOnStatusCode: false
+    }).then(response => {
+      expect(response.status).to.eq(403)
+    })
+  })
+})