chore: upgrade to codegouv/react-dsfr (#295)

.github/workflows/report.yml

@@ -19,7 +19,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: "14"
+          node-version: "20"
       - shell: bash
         run: |
           cd report

report/action.yml

@@ -11,7 +11,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: "14"
+        node-version: "20"
     - name: Build
       id: build
       shell: bash
@@ -35,7 +35,7 @@ runs:
         cd www
         yarn
         export NODE_OPTIONS=--max-old-space-size=8192 # prevents heap out of memory ?
-        CI=false yarn build && yarn export
+        CI=false yarn build
         # prevent gh-pages jekyll build
         touch out/.nojekyll
         # save report in workspace for artifact

report/package.json

@@ -8,10 +8,8 @@
   "dependencies": {
     "@actions/core": "^1.6.0",
     "@octokit/core": "^3.5.1",
-    "file-util-git-history": "^3.1.0",
     "lodash.omit": "^4.5.0",
     "lodash.pick": "^4.4.0",
-    "nodegit": "^0.27.0",
     "yaml": "^1.10.2"
   },
   "scripts": {
@@ -29,7 +27,6 @@
     "@types/lodash.pick": "^4.4.6",
     "@types/node": "^16.11.13",
     "@types/node-fetch": "^2.5.12",
-    "@types/nodegit": "^0.27.6",
     "babel-eslint": "^10.1.0",
     "eslint": "^8.0.0",
     "jest": "^27.4.5",

report/src/index.js

@@ -5,7 +5,7 @@ const core = require("@actions/core");
 
 const { getUrls, writeFile, getConfig } = require("./utils");
 const generateUrlReport = require("./generateUrlReport");
-const generateTrends = require("./trends");
+//const generateTrends = require("./trends");
 
 const DASHLORD_REPO_PATH = process.env.DASHLORD_REPO_PATH || ".";
 
@@ -43,15 +43,15 @@ const generateJsons = async () => {
     JSON.stringify(report, null, 2)
   );
 
-  core.info(`generate trends.json`);
-  const trends = await generateTrends(DASHLORD_REPO_PATH, report);
+  // core.info(`generate trends.json`);
+  // const trends = await generateTrends(DASHLORD_REPO_PATH, report);
 
-  core.info(`write trends.json`);
-  // copy dashlord trends.json for the website
-  writeFile(
-    path.join(__dirname, "..", "www", "src", "trends.json"),
-    JSON.stringify(trends, null, 2)
-  );
+  // core.info(`write trends.json`);
+  // // copy dashlord trends.json for the website
+  // writeFile(
+  //   path.join(__dirname, "..", "www", "src", "trends.json"),
+  //   JSON.stringify(trends, null, 2)
+  // );
 };
 
 module.exports = {

report/src/summary/__snapshots__/index.test.js.snap

@@ -30,5 +30,7 @@ Object {
   "trackersGrade": "A",
   "uptime": 99.909,
   "uptimeGrade": "A",
+  "zapCount": 7,
+  "zapGrade": "D",
 }
 `;

report/src/summary/index.js

@@ -35,6 +35,8 @@ const tools = {
   sonarcloud: (report) => require("./sonarcloud")(report),
   /** @param {DsFrReport} report */
   dsfr: (report) => require("./dsfr")(report),
+  /** @param {ZapReport} report */
+  zap: (report) => require("./zap")(report),
 };
 
 /**

report/src/summary/nmap.js

@@ -3,6 +3,8 @@ const getGradeOpenPorts = (count) => {
   return count > 2 ? "F" : "A";
 };
 
+//todo: improve
+
 /** @param {NmapReport} report */
 const summary = (report) => {
   if (report) {

report/src/summary/zap.js

@@ -0,0 +1,30 @@
+/**
+ *
+ * @param {ZapReportSiteAlert} row
+ */
+const getGrade = (row) =>
+  ({
+    0: "A", // info
+    1: "B", // low
+    2: "D", // medium
+    3: "F", // high
+  }[row.riskcode] || "A");
+
+/** @param {ZapReport} report */
+const summary = (report) => {
+  if (report && report.site && report.site.length) {
+    const alerts = report.site[0].alerts || [];
+    const maxCritic =
+      (alerts.length &&
+        alerts.sort((a, b) => b.riskcode.localeCompare(a.riskcode))[0]) ||
+      null;
+    if (maxCritic) {
+      return {
+        zapCount: alerts.filter((a) => a.riskcode !== "0").length,
+        zapGrade: getGrade(maxCritic),
+      };
+    }
+  }
+};
+
+module.exports = summary;

report/www/README.md

@@ -1,6 +1,6 @@
 # dashlord report website
 
-This is a Next.js static website that produces the Dashlord report based on some input data.
+This is a Next.js static website that produces the DashLord report based on some input data.
 
 The data is generated with the `@socialgouv/dashlord-actions/report` action.
 

report/www/next.config.js

@@ -2,10 +2,22 @@
 
 const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || "";
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  swcMinify: true,
+  output: "export",
   trailingSlash: true, // without this, issues with some nested paths and static exports
   basePath: BASE_PATH,
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.(woff2|webmanifest)$/,
+      type: "asset/resource",
+    });
+
+    return config;
+  },
+  transpilePackages: ["@codegouvfr/react-dsfr", "tss-react"],
 };
 
 module.exports = nextConfig;

report/www/package.json

@@ -3,49 +3,59 @@
   "description": "Reporting website for DashLord actions",
   "private": true,
   "license": "Apache-2.0",
-  "homepage": "https://socialgouv.github.io/dashlord-fabrique",
+  "homepage": "https://github.com/socialgouv/dashlord-actions",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "export": "next export",
-    "build:export": "yarn build && yarn export",
-    "test": "jest"
+    "test": "vitest",
+    "predev": "only-include-used-icons",
+    "prebuild": "only-include-used-icons"
   },
   "dependencies": {
-    "@dataesr/react-dsfr": "^2.5.0",
-    "@socialgouv/matomo-next": "^1.2.2",
-    "@testing-library/user-event": "^13.5.0",
-    "country-flag-icons": "^1.4.20",
+    "@codegouvfr/react-dsfr": "^1.2.2",
+    "@emotion/react": "^11.11.3",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.6",
+    "@mui/material": "^5.15.6",
+    "@mui/x-data-grid": "^6.19.2",
+    "@socialgouv/matomo-next": "^1.8.0",
+    "country-flag-icons": "^1.5.9",
     "date-fns": "^2.28.0",
     "lodash.orderby": "^4.6.0",
     "lodash.uniq": "^4.5.0",
     "lodash.uniqby": "^4.7.0",
-    "next": "12.2.6",
+    "next": "^14.1.0",
     "rc-tooltip": "^5.1.1",
-    "react": "17.0.2",
-    "react-base-table": "^1.13.0",
-    "react-d3-speedometer": "^1.0.1",
-    "react-dom": "17.0.2",
+    "react": "^18.2.0",
+    "react-d3-speedometer": "^1.1.0",
+    "react-dom": "^18.2.0",
     "react-feather": "^2.0.9",
-    "react-vertical-timeline-component": "^3.5.2",
-    "recharts": "^2.1.8",
-    "sass": "^1.49.4"
+    "react-markdown": "^9.0.1",
+    "react-vertical-timeline-component": "^3.6.0",
+    "recharts": "^2.11.0",
+    "sass": "^1.70.0",
+    "tss-react": "^4.9.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@types/lodash.orderby": "^4.6.6",
-    "@types/lodash.uniq": "^4.5.6",
-    "@types/node": "^14",
-    "@types/react": "17.0.69",
-    "eslint": "8.19.0",
-    "eslint-config-next": "12.2.6",
-    "eslint-plugin-testing-library": "^5.0.5",
-    "jest": "^27.4.7",
-    "react-test-renderer": "^17.0.2",
-    "typescript": "4.7.4"
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/lodash.orderby": "^4.6.9",
+    "@types/lodash.uniq": "^4.5.9",
+    "@types/node": "^20.11.10",
+    "@types/react": "^18.2.48",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/ui": "^1.2.2",
+    "eslint": "8.56.0",
+    "eslint-config-next": "14.1.0",
+    "eslint-plugin-testing-library": "^6.2.0",
+    "next-router-mock": "^0.9.11",
+    "react-test-renderer": "^18.2.0",
+    "typescript": "5.3.3",
+    "vite-tsconfig-paths": "^4.3.1",
+    "vitest": "^1.2.2"
   },
   "version": "1.1.0"
-}
+}

report/www/pages/404.tsx

@@ -1,12 +1,13 @@
-import dashlordConfig from '@/config.json';
 import type { NextPage } from "next";
 import Head from "next/head";
 
-const PageIntro: NextPage = () => {
+import dashlordConfig from "@/config.json";
+
+const Page404: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{dashlordConfig.title} - Page non trouvée</title>
+        <title>Page non trouvée - {dashlordConfig.title}</title>
       </Head>
       <br />
       <br />
@@ -23,4 +24,4 @@ const PageIntro: NextPage = () => {
   );
 };
 
-export default PageIntro;
+export default Page404;