Merge pull request #46 from cfpb/fix/dashboard-hide-old-urls

Drop old URLs from dashboard report

.eslintrc.cjs

@@ -0,0 +1,47 @@
+module.exports = {
+  parserOptions: {
+    sourceType: "module",
+    ecmaVersion: 2020,
+  },
+  settings: {
+    "import/resolver": {
+      node: {
+        paths: ["src"],
+        extensions: [".js", ".ts", ".d.ts", ".tsx"],
+      },
+    },
+    react: {
+      version: "detect",
+    },
+  },
+  env: {
+    browser: true,
+    node: true,
+    es2021: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:jsdoc/recommended",
+    "eslint-config-prettier",
+  ],
+  // Some plugins are automatically included.
+  // Run `yarn eslint --print-config foo.js > bar.json` to see included plugins.
+  // plugins: [],
+  rules: {
+    "jsdoc/require-hyphen-before-param-description": ["warn", "always"],
+    "no-console": ["warn"],
+    "no-use-before-define": ["error"],
+    "no-unused-vars": [
+      "error",
+      {
+        vars: "all",
+        args: "after-used",
+        ignoreRestSiblings: false,
+      },
+    ],
+    "no-var": ["error"],
+    "prefer-const": ["error"],
+    radix: ["error"],
+  },
+};

package.json

@@ -34,6 +34,9 @@
     "winston": "^3.8.2"
   },
   "dependencies": {
-    "@cfpb/cfpb-design-system": "^3.0.3"
+    "@cfpb/cfpb-design-system": "^3.0.3",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsdoc": "^48.7.0"
   }
 }

scripts/lib/filters.js

@@ -1,7 +1,7 @@
 /**
  * Custom Nunjucks filter that returns an SVG icon for the Lighthouse scores.
- * @param {Number} score Lighthouse score between 0 and 1.
- * @returns {String} SVG icon (or empty string)
+ * @param {number} score - Lighthouse score between 0 and 1.
+ * @returns {string} SVG icon (or empty string)
  */
 function scoreIcon( score ) {
   let icon = '';

scripts/lib/reports.js

@@ -11,8 +11,7 @@ const REPORTS_ROOT = path.resolve( __dirname, '../../docs/reports' );
 
 /**
  * Get list of Lighthouse report subdirectories.
- *
- * @param {String} reportsDir Lighthouse reports directory.
+ * @param {string} reportsDir - Lighthouse reports directory.
  * @returns {Array} List of report subdirectories.
  */
 async function getReportSubdirectories( reportsDir ) {
@@ -22,7 +21,7 @@ async function getReportSubdirectories( reportsDir ) {
 
 /**
  * Get list of Lighthouse report manifest locations.
- * @param {String} reportsDir Location of lighthouse reports directory.
+ * @param {string} reportsDir - Location of lighthouse reports directory.
  * @returns {Array} List of manifest locations.
  */
 async function getManifests( reportsDir ) {
@@ -35,8 +34,8 @@ async function getManifests( reportsDir ) {
 
 /**
  * Read manifest file.
- * @param {String} manifestLocation Location of Lighthouse manifest file.
- * @returns {Object} {returnawaitJSON.parse(fs.readFile(manifestFilename
+ * @param {string} manifestLocation - Location of Lighthouse manifest file.
+ * @returns {object} {returnawaitJSON.parse(fs.readFile(manifestFilename
  */
 async function readManifest( manifestLocation ) {
   const manifest = await fs.readFile( manifestLocation );
@@ -45,8 +44,8 @@ async function readManifest( manifestLocation ) {
 
 /**
  * Get a list of a manifest's representative runs and its non-representative runs.
- * @param {Object} manifest Contents of a Lighthouse manifest file.
- * @returns {Object} Two separate run arrays.
+ * @param {object} manifest - Contents of a Lighthouse manifest file.
+ * @returns {object} Two separate run arrays.
  */
 function getManifestRuns( manifest ) {
   const runs = {
@@ -65,8 +64,8 @@ function getManifestRuns( manifest ) {
 /**
  * Get the local location of a run's JSON. The manifest files store
  * their locations relative to GitHub Action's filesystem.
- * @param {String} jsonPath Lighthouse run's JSON path from its manifest file.
- * @returns {String} Local location of run's JSON.
+ * @param {string} jsonPath - Lighthouse run's JSON path from its manifest file.
+ * @returns {string} Local location of run's JSON.
  */
 function getRunLocation( jsonPath ) {
   const fileName = path.basename( jsonPath );
@@ -76,8 +75,8 @@ function getRunLocation( jsonPath ) {
 
 /**
  * Delete a Lighthouse run file.
- * @param {String} runFile Location of a Lighthouse run file.
- * @returns {String} Deleted filename or error message.
+ * @param {string} runFile - Location of a Lighthouse run file.
+ * @returns {string} Deleted filename or error message.
  */
 async function deleteRun( runFile ) {
   await fs.unlink( runFile );
@@ -87,7 +86,7 @@ async function deleteRun( runFile ) {
 /**
  * Given a list of Lighthouse run data, pull out the useful info and return
  * a better-organized array.
- * @param {Array} runs List of Lighthouse runs.
+ * @param {Array} runs - List of Lighthouse runs.
  * @returns {Array} List of Lighthouse runs with additional metadata.
  */
 function processManifestRuns( runs ) {
@@ -116,9 +115,9 @@ function processManifestRuns( runs ) {
  * Given an array of Lighthouse runs from a manifest file, build an object
  * that organizes them first by page slug and then by date.
  * See test/fixtures/partial-index.json for an example of expected output.
- * @param {Array} runs List of Lighthouse runs.
- * @param {Object} index Object to add runs to.
- * @returns {Object} Object of Lighthouse runs organized by date and page.
+ * @param {Array} runs - List of Lighthouse runs.
+ * @param {object} index - Object to add runs to.
+ * @returns {object} Object of Lighthouse runs organized by date and page.
  */
 function buildIndex( runs, index = { pages: {}} ) {
   const reducer = ( idx, run ) => {

scripts/lib/urls.js

@@ -25,8 +25,8 @@ function getUrlPaths() {
 
 /**
  * Generate a list of absolute URLs for testing.
- * @param {string} baseUrl Base URL, e.g. https://www.consumerfinance.gov.
- * @param {boolean} mobile Whether URLs should be decorated for mobile testing.
+ * @param {string} baseUrl - Base URL, e.g. https://www.consumerfinance.gov.
+ * @param {boolean} mobile - Whether URLs should be decorated for mobile testing.
  * @returns {URL[]} List of absolute URLs.
  */
 function getUrls( baseUrl, mobile ) {
@@ -45,7 +45,7 @@ function getUrls( baseUrl, mobile ) {
 
 /**
  * Remove mobile testing parameter from a URL, if it exists.
- * @param {string} url URL, e.g. https://www.consumerfinance.gov/?mobile=1.
+ * @param {string} url - URL, e.g. https://www.consumerfinance.gov/?mobile=1.
  * @returns {URL} URL without mobile testing parameter.
  */
 function getUrlWithoutMobileTestingParameter( url ) {
@@ -58,7 +58,7 @@ function getUrlWithoutMobileTestingParameter( url ) {
 
 /**
  * Test if a URL has been decorated for mobile testing.
- * @param {string} url URL, e.g. https://www.consumerfinance.gov.
+ * @param {string} url - URL, e.g. https://www.consumerfinance.gov.
  * @returns {boolean} Whether the URL has the ?mobile testing flag.
  */
 function hasMobileTestingParameter( url ) {

scripts/process-reports.js

@@ -35,8 +35,7 @@ const logger = winston.createLogger( {
 
 /**
  * Delete any report subdirectories that are older than KEEP_REPORTS_DAYS.
- *
- * @param {String} reportsRoot Directory containing report subdirectories.
+ * @param {string} reportsRoot - Directory containing report subdirectories.
  */
 async function deleteOldReportSubdirectories( reportsRoot ) {
   const deleteOlderThan = new Date();
@@ -62,9 +61,8 @@ async function deleteOldReportSubdirectories( reportsRoot ) {
  *
  * This function also deletes any non-representative run reports in order to
  * save disk space.
- *
- * @param {String} reportsRoot Directory containing all the report subdirectories.
- * @returns {Object} Object of Lighthouse runs organized by date and page.
+ * @param {string} reportsRoot - Directory containing all the report subdirectories.
+ * @returns {object} Object of Lighthouse runs organized by date and page.
  */
 async function buildIndexOfAllReports( reportsRoot ) {
   const emptyIndex = { pages: {}};

webpack.config.js

@@ -1,40 +1,42 @@
-const fs = require( 'fs' );
-const nunjucks = require( 'nunjucks' );
-const nunjucksDateFilter = require( 'nunjucks-date-filter' );
-const path = require( 'path' );
-const filters = require( './scripts/lib/filters' );
+const fs = require("fs");
+const nunjucks = require("nunjucks");
+const nunjucksDateFilter = require("nunjucks-date-filter");
+const path = require("path");
+const filters = require("./scripts/lib/filters");
 
-const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
-const NunjucksWebpackPlugin = require( 'nunjucks-webpack-plugin' );
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const NunjucksWebpackPlugin = require("nunjucks-webpack-plugin");
 
 // eslint-disable-next-line no-process-env
-const RELATIVE_URL = process.env.LIGHTHOUSE_RELATIVE_URL || '';
+const RELATIVE_URL = process.env.LIGHTHOUSE_RELATIVE_URL || "";
 
 // eslint-disable-next-line no-sync
-const allReports = JSON.parse( fs.readFileSync( path.resolve( 'docs/reports.json' ) ) );
+const allReports = JSON.parse(
+  fs.readFileSync(path.resolve("docs/reports.json"))
+);
 
 const nunjucksEnvironment = nunjucks.configure();
-nunjucksEnvironment.addFilter( 'date', nunjucksDateFilter );
+nunjucksEnvironment.addFilter("date", nunjucksDateFilter);
 
-nunjucksEnvironment.addFilter( 'scoreIcon', filters.scoreIcon );
+nunjucksEnvironment.addFilter("scoreIcon", filters.scoreIcon);
 
 /**
  * Get a list of all the pages and their report data for Webpack to templatize.
- * @param {Object} reports Lighthouse reports organized by cf.gov page slug and date.
+ * @param {object} reports - Lighthouse reports organized by cf.gov page slug and date.
  * @returns {Array} List of templates to pass to nunjucks webpack plugin.
  */
-function getPageTemplates( reports ) {
+function getPageTemplates(reports) {
   const templates = [];
-  for ( const [ slug, summary ] of Object.entries( reports.pages ) ) {
-    templates.push( {
-      from: './src/templates/page.njk',
-      to: `${ slug }/index.html`,
+  for (const [slug, summary] of Object.entries(reports)) {
+    templates.push({
+      from: "./src/templates/page.njk",
+      to: `${slug}/index.html`,
       context: {
         RELATIVE_URL,
-        url: summary[Object.keys( summary )[0]].url,
-        summaryReport: summary
-      }
-    } );
+        url: summary[Object.keys(summary)[0]].url,
+        summaryReport: summary,
+      },
+    });
   }
   return templates;
 }
@@ -43,63 +45,74 @@ function getPageTemplates( reports ) {
  * Create plugin to generate HTML files using Nunjucks templates. Plugin will
  * generate a Lighthouse summary HTML file for each subdirectory under
  * ./docs/reports, plus an index.html that links to each of those summary files.
- * @param {Object} reports All the Lighthouse reports read from reports.json.
+ * Filter out pages that aren't in the most recent result set.
+ * @param {object} reports - All the Lighthouse reports read from reports.json.
  * @returns {NunjucksWebpackPlugin} Webpack plugin to create HTML files.
  */
-function buildReportPlugin( reports ) {
-  return new NunjucksWebpackPlugin(
-    {
-      templates: [
-        {
-          from: './src/templates/index.njk',
-          to: 'index.html',
-          context: {
-            RELATIVE_URL,
-            pages: allReports.pages
-          }
+function buildReportPlugin(reports) {
+  const latestReportDates = Object.keys(reports).map((key) =>
+      reports[key]
+        ? Object.keys(reports[key]).sort()[Object.keys(reports[key]).length - 1]
+        : []
+    ),
+    latestReportDate = latestReportDates
+      ? latestReportDates.sort()[latestReportDates.length - 1]
+      : null,
+    latestReports = Object.keys(reports)
+      .filter((key) => latestReportDate in reports[key])
+      .reduce((obj, key) => {
+        return {
+          ...obj,
+          [key]: reports[key],
+        };
+      }, {});
+
+  return new NunjucksWebpackPlugin({
+    templates: [
+      {
+        from: "./src/templates/index.njk",
+        to: "index.html",
+        context: {
+          RELATIVE_URL,
+          pages: latestReports,
         },
-        ...getPageTemplates( reports )
-      ],
-      configure: nunjucksEnvironment
-    }
-  );
+      },
+      ...getPageTemplates(latestReports),
+    ],
+    configure: nunjucksEnvironment,
+  });
 }
 
-module.exports = ( env, argv ) => {
-
+module.exports = (env, argv) => {
   const config = {
-    mode: argv.mode || 'development',
+    mode: argv.mode || "development",
     entry: {
-      main: [ './src/css/main.scss', './src/js/main.js' ]
+      main: ["./src/css/main.scss", "./src/js/main.js"],
     },
     output: {
-      path: path.resolve( __dirname, 'docs' ),
-      filename: 'static/js/[name].js'
+      path: path.resolve(__dirname, "docs"),
+      filename: "static/js/[name].js",
     },
     plugins: [
-      new MiniCssExtractPlugin(
-        {
-          filename: 'static/css/[name].css'
-        }
-      ),
-      buildReportPlugin( allReports )
+      new MiniCssExtractPlugin({
+        filename: "static/css/[name].css",
+      }),
+      buildReportPlugin(allReports.pages),
     ],
     module: {
       rules: [
         {
           test: /\.scss$/,
           exclude: /node_modules/,
-          use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]
+          use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
         },
         {
           test: /\.js$/,
-          exclude: [
-            path.resolve( __dirname, 'node_modules' )
-          ],
-          use: [ 'babel-loader' ]
-        }
-      ]
-    }
+          exclude: [path.resolve(__dirname, "node_modules")],
+          use: ["babel-loader"],
+        },
+      ],
+    },
   };
 
   return config;