Build the basic plugin details page

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New features
+
+- [#2351: Build the basic plugin details page](https://github.com/alphagov/govuk-prototype-kit/pull/2351)
+
 ### Fixes
 
 - [#2357: Simplify and improve acceptance tests](https://github.com/alphagov/govuk-prototype-kit/pull/2357)

cypress/e2e/plugins/plugin-utils.js

@@ -42,22 +42,21 @@ function provePluginTemplatesUninstalled (plugin) {
 }
 
 function initiatePluginAction (action, plugin, pluginName, options = {}) {
-  if (action === 'install') {
-    cy.visit(managePluginsPagePath)
-  } else {
-    cy.visit(manageInstalledPluginsPagePath)
-  }
+  cy.visit(managePluginsPagePath)
 
   if (pluginName) {
     cy.get(`[data-plugin-package-name="${plugin}"]`)
       .scrollIntoView()
-      .find('h4')
+      .find('a')
       .contains(pluginName)
   }
 
   cy.get(`[data-plugin-package-name="${plugin}"]`)
     .scrollIntoView()
-    .find('button')
+    .find('a')
+    .click()
+
+  cy.get('button')
     .contains(capitalize(action))
     .click()
 
@@ -73,7 +72,7 @@ function provePluginInstalled (plugin, pluginName) {
   if (pluginName) {
     cy.get(`[data-plugin-package-name="${plugin}"]`)
       .scrollIntoView()
-      .find('h4')
+      .find('a')
       .contains(pluginName)
   }
 
@@ -91,7 +90,7 @@ function provePluginUninstalled (plugin, pluginName) {
   if (pluginName) {
     cy.get(`[data-plugin-package-name="${plugin}"]`)
       .scrollIntoView()
-      .find('h4')
+      .find('a')
       .contains(pluginName)
   }
 
@@ -108,7 +107,10 @@ function provePluginUpdated (plugin, pluginName) {
   provePluginInstalled(plugin, pluginName)
   cy.get(`[data-plugin-package-name="${plugin}"]`)
     .scrollIntoView()
-    .find('button')
+    .find('a')
+    .click()
+
+  cy.get('button')
     .contains(capitalize('update')).should('not.exist')
 }
 
@@ -117,10 +119,13 @@ function provePluginInstalledOldVersion (plugin, pluginName) {
   if (pluginName) {
     cy.get(`[data-plugin-package-name="${plugin}"]`)
       .scrollIntoView()
-      .find('h4')
+      .find('a')
       .contains(pluginName)
   }
 
+  cy.get(`[data-plugin-package-name="${plugin}"] strong.govuk-tag`)
+    .contains('Update available')
+
   cy.get('#installed-plugins-link').click()
 
   cy.get(`[data-plugin-package-name="${plugin}"]`)

lib/assets/sass/manage-prototype.scss

@@ -440,6 +440,15 @@ body .govuk-prototype-kit-manage-prototype-govuk-tag {
   padding-left: 0 !important;
 }
 
+.govuk-prototype-kit-manage-prototype-plugin-heading {
+  margin-bottom: 0;
+}
+
+.govuk-prototype-kit-manage-prototype-plugin-sub-heading {
+  color: #505a5f;
+  margin-bottom: 15px;
+}
+
 .govuk-prototype-kit-manage-prototype-plugin-list-plugin-list {
   border-top: 1px solid #b1b4b6;
   margin-bottom: 2em;
@@ -574,3 +583,10 @@ body .govuk-prototype-kit-manage-prototype-govuk-tag {
     }
   }
 }
+
+.govuk-prototype-kit-manage-prototype-plugin-details-links {
+  padding-top: 20px;
+  margin-bottom: 20px;
+  border-top: 2px solid #b1b4b6;
+  border-bottom: 2px solid #b1b4b6;
+}

lib/manage-prototype-handlers.js

@@ -411,13 +411,14 @@ function buildPluginData (pluginData) {
     packageName,
     latestVersion,
     installedLocally,
-    installLink: `${contextPath}/plugins/install?package=${encodeURIComponent(packageName)}`,
+    installLink: installedVersion ? undefined : `${contextPath}/plugins/install?package=${encodeURIComponent(packageName)}`,
     installCommand: `npm install ${packageName}`,
     updateLink: installed && !installedLocally && latestVersion !== installedVersion ? `${contextPath}/plugins/update?package=${encodeURIComponent(packageName)}` : undefined,
     updateCommand: latestVersion && `npm install ${packageName}@${latestVersion}`,
     uninstallLink: installed && !required ? `${contextPath}/plugins/uninstall?package=${encodeURIComponent(packageName)}${installedLocally ? `&version=${encodeURIComponent(localVersion)}` : ''}` : undefined,
     uninstallCommand: `npm uninstall ${packageName}`,
-    installedVersion
+    installedVersion,
+    inThisPlugin: getInThisPluginDetails(pluginConfig)
   }
 }
 
@@ -436,7 +437,7 @@ async function prepareForPluginPage (isInstalledPage, search) {
     status: isInstalledPage ? 'installed' : 'search',
     plugins: plugins.map(buildPluginData),
     found: plugins.length,
-    updates: installedPlugins.filter(plugin => plugin.installedVersion !== plugin.latestVersion).length
+    updates: installedPlugins.filter(plugin => !plugin.installedLocally && plugin.installedVersion !== plugin.latestVersion).length
   }
 }
 
@@ -567,6 +568,24 @@ async function getPluginForRequest (req) {
   return chosenPlugin
 }
 
+function getInThisPluginDetails (pluginConfig) {
+  const { nunjucksMacros = [], templates = [] } = pluginConfig || {}
+  const list = []
+  if (nunjucksMacros?.length) {
+    list.push({
+      title: 'Components',
+      items: nunjucksMacros.map(({ macroName }) => macroName)
+    })
+  }
+  if (templates?.length) {
+    list.push({
+      title: 'Templates',
+      items: templates.map(({ name }) => name)
+    })
+  }
+  return list
+}
+
 function modeIsComplete (mode, { installedVersion, latestVersion, version, installedLocally }) {
   switch (mode) {
     case 'update':
@@ -726,6 +745,19 @@ async function postPluginsModeHandler (req, res) {
   res.json({ status })
 }
 
+async function getPluginDetailsHandler (req, res) {
+  const packageName = req.query.package
+  const plugin = await lookupPackageInfo(packageName)
+  const { name, scope, installedVersion, latestVersion, ...pluginData } = buildPluginData(plugin)
+  const viewData = {
+    ...pluginData,
+    installedVersion,
+    latestVersion,
+    plugin: { name, scope, version: installedVersion || latestVersion }
+  }
+  res.render(getManagementView('plugin-details.njk'), viewData)
+}
+
 module.exports = {
   contextPath,
   setKitRestarted,
@@ -749,5 +781,6 @@ module.exports = {
   getPluginsModeHandler,
   postPluginsStatusHandler,
   postPluginsModeMiddleware,
-  postPluginsModeHandler
+  postPluginsModeHandler,
+  getPluginDetailsHandler
 }

lib/manage-prototype-handlers.test.js

@@ -412,7 +412,8 @@ describe('manage-prototype-handlers', () => {
       name: pluginDisplayName.name,
       packageName,
       uninstallCommand: `npm uninstall ${packageName}`,
-      updateCommand: `npm install ${packageName}@${latestVersion}`
+      updateCommand: `npm install ${packageName}@${latestVersion}`,
+      inThisPlugin: []
     }
 
     beforeEach(() => {

lib/manage-prototype-routes.js

@@ -24,7 +24,8 @@ const {
   postPluginsModeHandler,
   postPluginsStatusHandler,
   pluginCacheMiddleware,
-  postPluginsHandler
+  postPluginsHandler,
+  getPluginDetailsHandler
 } = require('./manage-prototype-handlers')
 const { packageDir, projectDir } = require('./utils/paths')
 const { govukFrontendPaths } = require('./govukFrontendPaths')
@@ -79,6 +80,8 @@ router.post('/plugins/:mode', postPluginsModeMiddleware)
 
 router.post('/plugins/:mode', csrfProtection, postPluginsModeHandler)
 
+router.get('/plugin-details', getPluginDetailsHandler)
+
 // Find GOV.UK Frontend (via internal package, project fallback)
 router.use('/dependencies/govuk-frontend', express.static(
   govukFrontendPaths([packageDir, projectDir]).baseDir)

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

@@ -0,0 +1,90 @@
+{% extends "views/manage-prototype/layout.njk" %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+
+{% block beforeContent %}
+    {{ super() }}
+    <a href="/manage-prototype/plugins" class="govuk-back-link">Back to plugins</a>
+{% endblock %}
+
+{% block content %}
+    <form method="post" action="">
+        {% include "views/manage-prototype/plugin-header.njk" %}
+
+        <div class="govuk-grid-row">
+            <div class="govuk-grid-column-one-quarter">
+                {% if newerLink %}
+                    <p><a href="{{ newerLink }}">Latest version: {{ newerVersion }}</a></p>
+                {% endif %}
+                {% if installedLinkAsDifferentLink %}
+                    <p><a href="{{ installedLinkAsDifferentLink }}">Installed version: {{ installedLinkAsDifferentVersion }}</a></p>
+                {% endif %}
+
+                <div class="govuk-prototype-kit-manage-prototype-plugin-list-plugin-list__item-buttons">
+                    <div class="govuk-button-group">
+                        {% if installLink %}
+                            {{ govukButton({
+                                html: 'Install <span class="govuk-visually-hidden"> ' + plugin.name + '</span>',
+                                attributes: { id: "install-" + packageName, formaction: installLink }
+                            }) }}
+                        {% endif %}
+                        {% if updateLink %}
+                            {{ govukButton({
+                                html: 'Update <span class="govuk-visually-hidden"> ' + plugin.name + '</span>',
+                                attributes: { id: "update-" + packageName, formaction: updateLink }
+                            }) }}
+                        {% endif %}
+                        {% if uninstallLink %}
+                            {{ govukButton({
+                                html: 'Uninstall <span class="govuk-visually-hidden"> ' + plugin.name + '</span>',
+                                classes: "govuk-button--secondary",
+                                attributes: { id: "uninstall-" + packageName, formaction: uninstallLink }
+                            }) }}
+                        {% endif %}
+                    </div>
+                </div>
+
+              {% if plugin.releaseDateTime or preparedPluginLinks.releaseNotes or preparedPluginLinks.versionHistory %}
+                <div class="govuk-prototype-kit-manage-prototype-plugin-details-links">
+                  {% if plugin.releaseDateTime %}
+                    <p class="govuk-body">Released <time title="{{ plugin.releaseDateTime }}" datetime="{{ plugin.releaseDateTime }}">{{ releaseTimeSummary }}</time></p>
+                  {% endif %}
+                  {% if preparedPluginLinks.releaseNotes %}
+                    <p><a href="{{ preparedPluginLinks.releaseNotes }}" class="govuk-link">Release notes</a></p>
+                  {% endif %}
+                  {% if preparedPluginLinks.versionHistory %}
+                    <p><a href="{{ preparedPluginLinks.versionHistory }}" class="govuk-link">Version history</a></p>
+                  {% endif %}
+                </div>
+              {% endif %}
+              <p class="govuk-body"><a href="https://prototype-kit.service.gov.uk/docs/support">Report</a></p>
+              {% if debugInfo %}
+              <code><pre>
+                   {{ debugInfo }}
+                  </pre></code>
+              {% endif %}
+            </div>
+
+            <div class="govuk-grid-column-three-quarters">
+              <h2 class="govuk-heading-l">About this plugin</h2>
+
+              <p class="govuk-body">{{ description | default('No description has been provided.') }}</p>
+
+              {% if preparedPluginLinks.documentation %}
+                <p class="govuk-heading-m"><a href="{{ preparedPluginLinks.documentation }}">How to use this plugin</a></p>
+              {% endif %}
+
+              {% if inThisPlugin.length %}
+                  <h3 class="govuk-heading-m">Included in this plugin</h3>
+                {% for section in inThisPlugin %}
+                    <h4 class="govuk-heading-s">{{ section.title }}</h4>
+                    <ul class="govuk-list--bullet">
+                    {% for item in section.items %}
+                        <li class="govuk-body">{{ item }}</li>
+                    {% endfor %}
+                    </ul>
+                {% endfor %}
+              {% endif %}
+            </div>
+        </div>
+    </form>
+{% endblock %}

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

@@ -0,0 +1,9 @@
+<div class="govuk-grid-row govuk-!-margin-bottom-5">
+  <div class="govuk-grid-column-two-thirds-from-desktop">
+    <h1 class="govuk-heading-l govuk-prototype-kit-manage-prototype-plugin-heading">{{ plugin.name }}</h1>
+    <p class="govuk-body-lead govuk-prototype-kit-manage-prototype-plugin-sub-heading">v{{ plugin.version }}</p>
+    {% if plugin.scope %}
+      <p class="govuk-body-lead govuk-prototype-kit-manage-prototype-plugin-sub-heading">By {{ plugin.scope }}</p>
+    {% endif %}
+  </div>
+</div>