redesign quick view to be a provider and use query params

lunatrace/bsl/backend/src/graphql-yoga/schema.graphql

@@ -158,6 +158,7 @@ type BuildData_Package {
 
 type BuildData_Vulnerability {
     id: String!
+    cve_id: String
     severity_name: String
     cvss_score: Float
     summary: String

lunatrace/bsl/backend/src/hasura-api/graphql/get-manifest-dependency-edge-children.graphql

@@ -14,6 +14,7 @@ query GetManifestDependencyEdgeChildren($ids: [uuid!]!) {
         package_manager
         affected_by_vulnerability {
           vulnerability {
+            cve_id
             id
             source_id
             source

lunatrace/bsl/backend/src/models/vulnerability-dependency-tree/types.ts

@@ -15,7 +15,6 @@ import {
   Analysis_Finding_Source_Enum,
   Analysis_Finding_Type_Enum,
   GetTreeFromBuildQuery,
-  Project_Folder_Settings,
 } from '../../hasura-api/generated';
 
 export interface VulnerableEdge {
@@ -91,6 +90,7 @@ export interface Severity {
 
 export interface PackageVulnerability {
   vulnerability: {
+    cve_id?: string | undefined | null;
     id: string;
     severity_name?: string | null;
     cvss_score?: number | null;

lunatrace/bsl/frontend/craco.config.js

@@ -1,7 +1,7 @@
 /*
  * Copyright by LunaSec (owned by Refinery Labs, Inc)
  *
- * Licensed under the Business Source License v1.1 
+ * Licensed under the Business Source License v1.1
  * (the "License"); you may not use this file except in compliance with the
  * License. You may obtain a copy of the License at
  *
@@ -11,56 +11,40 @@
  * limitations under the License.
  *
  */
-const webpack = require('webpack')
-
 module.exports = {
-  webpack: {
-    target: "web",
-    alias: {},
-    plugins: {
-      add: [
-        // These shims/polyfills are commented out because they aren't in use currently, but may be needed again if we bring in another module written for node.  Thanks to webpack 5 :(
-
-        // new webpack.ProvidePlugin({
-        //   process:'process/browser',
-        //   Buffer: ['buffer', 'Buffer']
-        // }),
-]
-      // This is the example code for Craco:
-      // add: [], /* An array of plugins */
-      // add: [
-      //   plugin1,
-      //   [plugin2, "append"],
-      //   [plugin3, "prepend"], /* Specify if plugin should be appended or prepended */
-      // ], /* An array of plugins */
-      // remove: [],  /* An array of plugin constructor's names (i.e. "StyleLintPlugin", "ESLintWebpackPlugin" ) */
-    },
-    configure: { /* Any webpack configuration options: https://webpack.js.org/configuration */
-      resolve: {
-        fallback: {
-          // process: require.resolve("process/browser"),
-          // path: require.resolve("path-browserify"),
-          // "crypto": require.resolve("crypto-browserify"),
-          // "stream": require.resolve("stream-browserify"),
-          // "assert": require.resolve("assert"),
-          // "http": require.resolve("stream-http"),
-          // "https": require.resolve("https-browserify"),
-          // "os": require.resolve("os-browserify"),
-          // "url": require.resolve("url")
-        }
-      },
-      module: {
-        rules: [
-          {
-            test: /\.m?js$/,
-            resolve: {
-              fullySpecified: false,
-            }
-          }
-        ]
-      }
-      // configure: (webpackConfig, { env, paths }) => { return webpackConfig; }
+    webpack: {
+        target: "web",
+        alias: {},
+        configure: (webpackConfig, {env, paths}) => {
+            webpackConfig.module.rules[1].oneOf.unshift(
+                {
+                    test: /\.css-style-sheet\.(scss|sass)$/,
+                    use: [{
+                        loader: require.resolve("css-loader"),
+                        options: {
+                            exportType: 'css-style-sheet'
+                        },
+                    }, {
+                        loader: require.resolve('postcss-loader'),
+                        options: {
+                            postcssOptions: {
+                                ident: 'postcss',
+                                config: false,
+                                plugins: [
+                                    'postcss-flexbugs-fixes',
+                                    [
+                                        'postcss-preset-env',
+                                        {autoprefixer: {flexbox: 'no-2009'}, stage: 3}
+                                    ],
+                                    'postcss-normalize'
+                                ]
+                            },
+                            sourceMap: true
+                        }
+                    }, 'sass-loader']
+                });
+            return webpackConfig;
+        },
     }
-  }
-}
 
+}

lunatrace/bsl/frontend/package.json

@@ -31,6 +31,7 @@
     "jwt-decode": "^3.1.2",
     "minimatch": "~5.1.1",
     "path-browserify": "~1.0.1",
+    "postcss-loader": "~7.0.2",
     "prettify-date": "^1.4.0",
     "process": "~0.11.10",
     "react": "18.2.0",
@@ -47,9 +48,9 @@
     "react-markdown": "^8.0.3",
     "react-perfect-scrollbar": "^1.5.8",
     "react-redux": "8.0.5",
-    "react-router": "^6.2.1",
-    "react-router-bootstrap": "^0.26.0",
-    "react-router-dom": "^6.2.1",
+    "react-router": "^6.8.1",
+    "react-router-bootstrap": "^0.26.2",
+    "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.0",
     "redux-first-history": "^5.0.8",
     "rehype-highlight": "~5.0.2",
@@ -65,14 +66,15 @@
     "typescript": "~4.5.4",
     "unified": "~10.1.2",
     "unist-util-visit": "~4.1.0",
-    "use-react-router-breadcrumbs": "^3.0.2",
+    "use-query-params": "~2.2.0",
+    "use-react-router-breadcrumbs": "^4.0.1",
     "usehooks-ts": "~2.9.1",
     "uuid": "^8.3.2",
     "vuln-vects": "~1.1.0",
     "watch": "^1.0.2"
   },
   "devDependencies": {
-    "@craco/craco": "~6.4.3",
+    "@craco/craco": "^7.0.0",
     "@graphql-codegen/cli": "2.3.1",
     "@graphql-codegen/introspection": "2.1.1",
     "@graphql-codegen/schema-ast": "~2.4.1",
@@ -91,32 +93,36 @@
     "@types/node": "^14.0.0",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
-    "@types/react-router": "^5.1.18",
+    "@types/react-router": "^5.1.20",
     "@types/react-router-bootstrap": "^0.24.5",
     "@types/semver-sort": "^0.0.1",
     "@types/testing-library__react": "^10.2.0",
     "@types/uuid": "^8.3.4",
     "apollo": "2.33.9",
     "assert": "~2.0.0",
     "buffer": "~6.0.3",
+    "craco-plugin-inspect-config": "~0.3.0",
     "crypto-browserify": "~3.12.0",
+    "css-loader": "~6.7.3",
+    "eslint-webpack-plugin": "~4.0.0",
     "graphqurl": "^1.0.1",
     "https-browserify": "~1.0.0",
     "npm-run-all": "^4.1.5",
     "os-browserify": "~0.3.0",
     "sass": "^1.49.0",
     "stream-browserify": "~3.0.0",
     "stream-http": "~3.2.0",
+    "typescript-plugin-css-modules": "~4.2.2",
     "url": "~0.11.0",
-    "webpack": "~5.72.0"
+    "webpack": "~5.75.0"
   },
   "scripts": {
     "sass:pull": "git submodule init && git submodule update",
-    "sass:build": "sass src/scss/main:public/css",
-    "sass:watch": "yarn run sass:build && watch 'yarn run sass:build && echo sass_rebuilt' ./src/scss",
+    "sass:build:deprecated": "sass src/scss/main:public/css",
+    "sass:watch:deprecated": "yarn run sass:build && watch 'yarn run sass:build && echo sass_rebuilt' ./src/scss",
     "dev:graphql:watch": "yarn run generate && watch 'yarn run generate' ./src/api/graphql",
     "sass:autoprefixer": "postcss public/css/*.css --use autoprefixer -d public/css",
-    "build:css": "npm-run-all sass:build sass:autoprefixer",
+    "build:css:deprecated": "npm-run-all sass:build sass:autoprefixer",
     "start:server": "BROWSER=none DISABLE_ESLINT_PLUGIN=true PORT=3000 craco start",
     "start": "yarn run sass:watch & yarn run dev:graphql:watch & yarn run start:server",
     "build": "yarn run generate && craco build",

lunatrace/bsl/frontend/public/index.html

@@ -33,7 +33,7 @@
     <script async defer src="https://sa.lunasec.io/latest.js"></script>
     <noscript><img src="https://sa.lunasec.io/noscript.gif" alt="" referrerpolicy="no-referrer-when-downgrade"/>
     </noscript>
-    <link href="/css/dark.css" rel="stylesheet" class="js-stylesheet">
+<!--    <link href="/css/dark.css" rel="stylesheet" class="js-stylesheet">-->
     <title>LunaTrace</title>
 </head>
 <body>