Add latest version link to plugin details page to display latest plug…

…in details

cypress/e2e/plugins/plugin-utils.js

@@ -56,6 +56,11 @@ function initiatePluginAction (action, plugin, pluginName, options = {}) {
     .find('a')
     .click()
 
+  if (action === 'update') {
+    cy.get('a')
+      .contains('Latest version:').click()
+  }
+
   cy.get('button')
     .contains(capitalize(action))
     .click()
@@ -110,6 +115,9 @@ function provePluginUpdated (plugin, pluginName) {
     .find('a')
     .click()
 
+  cy.get('a')
+    .contains('Latest version:').should('not.exist')
+
   cy.get('button')
     .contains(capitalize('update')).should('not.exist')
 }

lib/manage-prototype-handlers.js

@@ -404,7 +404,7 @@ function getTemplatesPostInstallHandler (req, res) {
   }))
 }
 
-function buildPluginData (pluginData) {
+function buildPluginData (pluginData, isLatest) {
   if (pluginData === undefined) {
     return
   }
@@ -417,12 +417,14 @@ function buildPluginData (pluginData) {
     installedVersion,
     required,
     localVersion,
-    pluginConfig = {}
+    pluginConfig = {},
+    latestPluginConfig
   } = pluginData
+  const meta = isLatest ? latestPluginConfig?.meta || pluginConfig?.meta : pluginConfig?.meta
   const preparedPackageNameForDisplay = plugins.preparePackageNameForDisplay(packageName)
   return {
     ...preparedPackageNameForDisplay,
-    ...pluginConfig.meta,
+    ...meta,
     packageName,
     latestVersion,
     installedLocally,
@@ -433,7 +435,7 @@ function buildPluginData (pluginData) {
     uninstallLink: installed && !required ? `${contextPath}/plugins/uninstall?package=${encodeURIComponent(packageName)}${installedLocally ? `&version=${encodeURIComponent(localVersion)}` : ''}` : undefined,
     uninstallCommand: `npm uninstall ${packageName}`,
     installedVersion,
-    inThisPlugin: getInThisPluginDetails(pluginConfig)
+    inThisPlugin: getInThisPluginDetails(isLatest ? latestPluginConfig || pluginConfig : pluginConfig)
   }
 }
 
@@ -764,15 +766,20 @@ async function postPluginsModeHandler (req, res) {
 
 async function getPluginDetailsHandler (req, res) {
   const packageName = req.query.package
+  const isLatest = req.route.path.split('/').pop() === 'latest'
+  const latestLink = isLatest ? '' : req.originalUrl.replace('?', '/latest?')
+  const installedLink = isLatest ? req.originalUrl.replace('/latest?', '?') : ''
   const plugin = await lookupPackageInfo(packageName)
-  const { name, scope, installedVersion, latestVersion, ...pluginData } = buildPluginData(plugin)
+  const { name, scope, installedVersion, latestVersion, ...pluginData } = buildPluginData(plugin, isLatest)
   const viewData = {
     ...pluginData,
     installedVersion,
     latestVersion,
-    plugin: { name, scope, version: installedVersion || latestVersion }
+    latestLink,
+    installedLink,
+    plugin: { name, scope, version: latestLink ? installedVersion || latestVersion : latestVersion }
   }
-  res.render(getManagementView('plugin-details.njk'), viewData)
+  res.send(nunjucksManagementEnv.render(getManagementView('plugin-details.njk'), viewData))
 }
 
 module.exports = {

lib/manage-prototype-handlers.test.js

@@ -40,6 +40,7 @@ const {
   postTemplatesInstallHandler,
   getTemplatesPostInstallHandler,
   getPluginsHandler,
+  getPluginDetailsHandler,
   postPluginsStatusHandler,
   postPluginsModeMiddleware,
   getPluginsModeHandler,
@@ -502,6 +503,32 @@ describe('manage-prototype-handlers', () => {
       expect(res.redirect).toHaveBeenCalledWith(fullPath + '?search=' + search)
     })
 
+    describe('getPluginDetailsHandler', () => {
+      it('plugins installed', async () => {
+        fse.readJsonSync.mockReturnValue(undefined)
+        req.route.path = 'plugins-installed'
+        await getPluginDetailsHandler(req, res)
+        expect(mockNunjucksRender).toHaveBeenCalledWith(
+          'views/manage-prototype/plugin-details.njk',
+          expect.objectContaining({
+            packageName: 'test-package',
+            installLink: '/manage-prototype/plugins/install?package=test-package',
+            installCommand: 'npm install test-package',
+            updateCommand: 'npm install test-package@2.0.0',
+            uninstallCommand: 'npm uninstall test-package',
+            inThisPlugin: [],
+            latestVersion: '2.0.0',
+            latestLink: '/current-url',
+            installedLink: '',
+            plugin: {
+              name: 'Test Package',
+              version: '2.0.0'
+            }
+          })
+        )
+      })
+    })
+
     it('getPluginsModeHandler', async () => {
       req.params.mode = 'install'
       req.query.package = packageName

lib/manage-prototype-routes.js

@@ -80,6 +80,7 @@ router.post('/plugins/:mode', postPluginsModeMiddleware)
 
 router.post('/plugins/:mode', csrfProtection, postPluginsModeHandler)
 
+router.get('/plugin-details/latest', getPluginDetailsHandler)
 router.get('/plugin-details', getPluginDetailsHandler)
 
 // Find GOV.UK Frontend (via internal package, project fallback)

lib/nunjucks/views/manage-prototype/plugin-details.njk

@@ -14,7 +14,12 @@
             <div class="govuk-grid-column-one-quarter">
 
                 {% if updateLink %}
-                    <p>Latest version: {{ latestVersion }}</p>
+                    {% if latestLink %}
+                        <p><a href="{{ latestLink }}">Latest version: {{ latestVersion }}</a></p>
+                    {% endif %}
+                    {% if installedLink %}
+                        <p><a href="{{ installedLink }}">Installed version: {{ installedVersion }}</a></p>
+                    {% endif %}
                 {% endif %}
 
                 <div class="govuk-prototype-kit-manage-prototype-plugin-list-plugin-list__item-buttons">

lib/plugins/packages.js

@@ -89,14 +89,16 @@ async function refreshPackageInfo (packageName, version) {
   const installedLocally = installedPackageVersion?.startsWith('file:')
   const installedFromGithub = installedPackageVersion?.startsWith('github:')
   const installedVersion = installed ? packageJson?.version : undefined
+  const latestPackageJson = registryInfo?.versions ? registryInfo?.versions[latestVersion] : undefined
+  const latestPluginConfig = registryInfo ? await getConfigForPackage(packageName) : undefined
 
   let localVersion
 
   if (!installed) {
     // Retrieve the packageJson and pluginConfig from the registry if possible
     if (registryInfo) {
-      packageJson = registryInfo?.versions ? registryInfo?.versions[latestVersion] : undefined
-      pluginConfig = await getConfigForPackage(packageName)
+      packageJson = latestPackageJson
+      pluginConfig = latestPluginConfig
     } else if (version) {
       packageJson = await readJson(path.join(path.relative(projectDir, version), 'package.json'))
       pluginConfig = await readJson(path.join(path.relative(projectDir, version), 'govuk-prototype-kit.config.json'))
@@ -135,6 +137,8 @@ async function refreshPackageInfo (packageName, version) {
     packageJson,
     pluginConfig,
     pluginDependencies,
+    latestPluginConfig,
+    latestPackageJson,
     localVersion,
     updateAvailable,
     installedPackageVersion

lib/plugins/packages.spec.js

@@ -190,6 +190,9 @@ describe('packages', () => {
           local: true,
           version: '1.0.0'
         },
+        latestPackageJson: {
+          version: '1.0.1'
+        },
         pluginConfig: {
           loaded: true
         },
@@ -216,6 +219,9 @@ describe('packages', () => {
         packageJson: {
           version: '1.0.0'
         },
+        latestPackageJson: {
+          version: '1.0.0'
+        },
         versions: [
           '1.0.0'
         ]
@@ -238,6 +244,9 @@ describe('packages', () => {
         packageJson: {
           version: '2.0.0'
         },
+        latestPackageJson: {
+          version: '2.0.0'
+        },
         pluginConfig: {
           assets: [
             '/dist'