Initial work on plugin details page for design/UX feedback

lib/assets/sass/manage-prototype.scss

@@ -576,3 +576,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

@@ -402,12 +402,14 @@ function buildPluginData (pluginData) {
     installedVersion,
     required,
     localVersion,
-    pluginConfig = {}
+    pluginConfig = {},
+    releaseDateTime
   } = pluginData
   const preparedPackageNameForDisplay = plugins.preparePackageNameForDisplay(packageName)
   return {
     ...preparedPackageNameForDisplay,
     ...pluginConfig.meta,
+    pluginConfig,
     packageName,
     latestVersion,
     installedLocally,
@@ -417,8 +419,27 @@ function buildPluginData (pluginData) {
     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,
+    releaseDateTime,
+    releaseTimeSummary: getTimeSummary(new Date(releaseDateTime)),
+    urlEncodedPackageName: encodeURIComponent(packageName)
+  }
+}
+
+function getTimeSummary (date) {
+  const epochDate = date.getTime()
+  const epochNow = new Date().getTime()
+  const timeDifferenceInDays = (epochNow - epochDate) / 1000 / 60 / 60 / 24
+  if (timeDifferenceInDays < 1) {
+    return 'today'
+  }
+  if (timeDifferenceInDays < 2) {
+    return 'yesterday'
+  }
+  if (timeDifferenceInDays < 7) {
+    return Math.floor(timeDifferenceInDays) + ' days ago'
   }
+  return Math.floor(timeDifferenceInDays / 7) + ' weeks ago'
 }
 
 async function prepareForPluginPage (isInstalledPage, search) {
@@ -528,8 +549,56 @@ async function postPluginsHandler (req, res) {
   res.redirect(contextPath + req.route.path + query)
 }
 
+async function getPluginDetailsHandler (req, res, next) {
+  const pluginDetails = await getPluginForRequest(req)
+
+  if (!pluginDetails?.pluginConfig) {
+    const err = new Error('Page not found')
+    err.status = 404
+    next(err)
+    return
+  }
+
+  function replaceUrlVars (url) {
+    return url && url
+      .replace('{{version}}', pluginDetails.version || pluginDetails.latestVersion)
+      .replace('{{kitVersion}}', currentKitVersion)
+  }
+
+  function getInThisPluginDetails () {
+    const list = []
+    if (pluginDetails.pluginConfig.nunjucksMacros && pluginDetails.pluginConfig.nunjucksMacros.length > 0) {
+      list.push({
+        title: 'Components',
+        items: pluginDetails.pluginConfig.nunjucksMacros.map(x => x.macroName)
+      })
+    }
+    if (pluginDetails.pluginConfig.templates && pluginDetails.pluginConfig.templates.length > 0) {
+      list.push({
+        title: 'Templates',
+        items: pluginDetails.pluginConfig.templates.map(x => x.name)
+      })
+    }
+    return list
+  }
+
+  const model = {
+    currentSection: 'Plugins',
+    links: managementLinks,
+    pluginDetails,
+    inThisPlugin: getInThisPluginDetails(),
+    preparedPluginLinks: {
+      documentation: replaceUrlVars(pluginDetails?.urls?.documentation),
+      versionHistory: replaceUrlVars(pluginDetails?.urls?.versionHistory),
+      releaseNotes: replaceUrlVars(pluginDetails?.urls?.releaseNotes)
+    }
+  }
+
+  res.render(getManagementView('pluginDetails.njk'), model)
+}
+
 async function getPluginForRequest (req) {
-  const packageName = req.query.package || req.body.package
+  const packageName = req.query.package || req.body.package || req.params.packageName
   const version = req.query.version || req.body.version
   const mode = getModeFromRequest(req)
   let chosenPlugin
@@ -746,6 +815,7 @@ module.exports = {
   getTemplatesPostInstallHandler,
   getPluginsHandler,
   postPluginsHandler,
+  getPluginDetailsHandler,
   getPluginsModeHandler,
   postPluginsStatusHandler,
   postPluginsModeMiddleware,

lib/manage-prototype-routes.js

@@ -24,7 +24,8 @@ const {
   postPluginsModeHandler,
   postPluginsStatusHandler,
   pluginCacheMiddleware,
-  postPluginsHandler
+  postPluginsHandler,
+  getPluginDetailsHandler
 } = require('./manage-prototype-handlers')
 const path = require('path')
 const { getInternalGovukFrontendDir } = require('./utils')
@@ -69,6 +70,8 @@ router.get('/plugins', getPluginsHandler)
 router.post('/plugins', postPluginsHandler)
 router.get('/plugins-installed', getPluginsHandler)
 
+router.get('/plugin/:packageName', getPluginDetailsHandler)
+
 // Be aware that changing this path for monitoring the status of a plugin will affect the
 // kit update process as the browser request and server route would be out of sync.
 router.post('/plugins/:mode/status', postPluginsStatusHandler)

lib/nunjucks/views/manage-prototype/pluginDetails.njk

@@ -0,0 +1,80 @@
+{% 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="">
+        <div class="govuk-grid-row govuk-!-margin-bottom-5">
+            <div class="govuk-grid-column-two-thirds-from-desktop">
+                <h1 class="govuk-heading-l">{{ pluginDetails.name }}</h1>
+                {% if pluginDetails.scope %}
+                  <p>By {{ pluginDetails.scope }}</p>
+                {% endif %}
+            </div>
+        </div>
+
+        <div class="govuk-grid-row">
+            <div class="govuk-grid-column-one-quarter">
+              <p>Version {{ pluginDetails.version | default(pluginDetails.latestVersion) }}</p>
+
+              {% if not pluginDetails.installedVersion %}
+                  {{ govukButton({
+                      text: 'Install',
+                      href: pluginDetails.installLink
+                  }) }}
+              {% endif %}
+              {% if pluginDetails.updateLink %}
+                  {{ govukButton({
+                      text: 'Update',
+                      classes: "govuk-button--secondary",
+                      href: pluginDetails.updateLink
+                  }) }}
+              {% endif %}
+              {% if pluginDetails.installedVersion %}
+                  {{ govukButton({
+                      text: 'Uninstall',
+                      classes: "govuk-button--secondary",
+                      href: pluginDetails.uninstallLink
+                  }) }}
+              {% endif %}
+
+              <div class="govuk-prototype-kit-manage-prototype-plugin-details-links">
+                <p class="govuk-body">Last updated <time datetime="{{ pluginDetails.releaseDateTime }}">{{ pluginDetails.releaseTimeSummary }}</time></p>
+                {% 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>
+              <p class="govuk-body"><a href="https://prototype-kit.service.gov.uk/docs/support">Report</a></p>
+            </div>
+
+            <div class="govuk-grid-column-three-quarters">
+              <h2 class="govuk-heading-l">About this plugin</h2>
+
+              <p class="govuk-body">{{ pluginDetails.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/plugins.njk

@@ -88,7 +88,7 @@
 
                             <div class="govuk-grid-column-one-third govuk-body">
                                 <h4 class="govuk-body govuk-!-font-weight-bold">
-                                    {{ plugin.name }}
+                                    <a href="/manage-prototype/plugin/{{ plugin.urlEncodedPackageName }}">{{ plugin.name }}</a>
                                 </h4>
                                 {% if plugin.scope %}
                                     <div>

lib/plugins/packages.js

@@ -88,17 +88,22 @@ async function refreshPackageInfo (packageName, version) {
   const installed = !!installedPackageVersion
   const installedLocally = installedPackageVersion?.startsWith('file:')
   const installedVersion = installed ? packageJson?.version : undefined
+  const releaseDateTime = registryInfo && registryInfo.time[latestVersion]
 
   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)
+      pluginConfig = await getConfigForPackage(packageName, version)
     } 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'))
+      const packageJsonPath = path.join(path.relative(projectDir, version), 'package.json')
+      const packageConfigPath = path.join(path.relative(projectDir, version), 'govuk-prototype-kit.config.json')
+      console.log('packageJsonPath', packageJsonPath)
+      console.log('packageConfigPath', packageConfigPath)
+      packageJson = await readJson(packageJsonPath)
+      pluginConfig = await readJson(packageConfigPath)
       if (packageJson) {
         localVersion = version
       } else {
@@ -133,7 +138,8 @@ async function refreshPackageInfo (packageName, version) {
     pluginConfig,
     pluginDependencies,
     localVersion,
-    installedPackageVersion
+    installedPackageVersion,
+    releaseDateTime
   }
 
   // Remove all undefined properties and save to cache