fix HashRoute issues

Signed-off-by: Carlos Feria <2582866+carlosthe19916@users.noreply.github.com>

Author: carlosthe19916

client/openapi/trustd.yaml

@@ -2856,12 +2856,8 @@ paths:
       operationId: generateSbomStaticReport
       requestBody:
         content:
-          application/x-www-form-urlencoded:
-            schema:
-              type: object
-              additionalProperties: {}
-              propertyNames:
-                type: string
+          application/json:
+            schema: {}
         required: true
       responses:
         '200':

client/rsbuild.static-report.config.ts

@@ -79,6 +79,14 @@ export default defineConfig({
         from: brandingPath,
         to: "branding",
       },
+      ...(process.env.NODE_ENV === "development"
+        ? [
+            {
+              from: "src/static-report/data.js",
+              to: ".",
+            },
+          ]
+        : []),
     ],
     sourceMap: process.env.NODE_ENV === "development",
   },

client/src/app/Constants.ts

@@ -29,6 +29,8 @@ export const isAuthRequired = ENV.AUTH_REQUIRED !== "false";
 export const isAuthServerEmbedded = ENV.OIDC_SERVER_IS_EMBEDDED === "true";
 export const uploadLimit = "500m";
 
+export const isMockDisabled = ENV.MOCK === "off";
+
 /**
  * The name of the client generated id field inserted in a object marked with mixin type
  * `WithUiId`.

client/src/app/api/rest.ts

@@ -86,16 +86,12 @@ export const downloadSbomLicense = (sbomId: string) => {
 };
 
 export const generateStaticReport = (formData: FormData) => {
-  return axios.post<Blob>(
-    "/api/v2/ui/generate-sbom-static-report",
-    formData,
-    {
-      responseType: "arraybuffer",
-      headers: {
-        "Content-Type": "multipart/form-data",
-        Accept: "text/plain",
-        responseType: "blob",
-      },
+  return axios.post<Blob>("/api/v2/ui/generate-sbom-static-report", formData, {
+    responseType: "arraybuffer",
+    headers: {
+      "Content-Type": "multipart/form-data",
+      Accept: "text/plain",
+      responseType: "blob",
     },
-  );
+  });
 };

client/src/app/hooks/useUrlParams.ts

@@ -1,3 +1,4 @@
+import { isMockDisabled } from "@app/Constants";
 import type { DisallowCharacters } from "@app/utils/type-utils";
 import { objectKeys } from "@app/utils/utils";
 import React from "react";
@@ -78,11 +79,42 @@ export const useUrlParams = <
         )
       : (serializedParams as TSerializedParams<TPrefixedURLParamKey>);
 
+  /**
+   * Generates hash, pathname, and search valid for BrowserRoute as well as HashRoute
+   */
+  const getLocation = ({
+    hash,
+    pathname,
+    search,
+  }: {
+    hash: string;
+    pathname: string;
+    search: string;
+  }) => {
+    if (isMockDisabled) {
+      return {
+        pathname,
+        search,
+      };
+    }
+
+    const array = hash.replace(/^#/, "").split("?");
+    return {
+      pathname: array[0],
+      search: array[1] ?? "",
+    };
+  };
+
   const setParams = (newParams: Partial<TDeserializedParams>) => {
     // In case setParams is called multiple times synchronously from the same rendered instance,
     // we use document.location here as the current params so these calls never overwrite each other.
     // This also retains any unrelated params that might be present and allows newParams to be a partial update.
-    const { pathname, search } = document.location;
+    const { search, pathname } = getLocation({
+      hash: document.location.hash,
+      pathname: document.location.pathname,
+      search: document.location.search,
+    });
+
     const existingSearchParams = new URLSearchParams(search);
     // We prefix the params object here so the serialize function doesn't have to care about the keyPrefix.
     const newPrefixedSerializedParams = withPrefixes(serialize(newParams));
@@ -99,7 +131,13 @@ export const useUrlParams = <
   };
 
   // We use useLocation here so we are re-rendering when the params change.
-  const urlParams = new URLSearchParams(useLocation().search);
+  const location = useLocation();
+  const { search } = getLocation({
+    hash: location.hash,
+    pathname: location.pathname,
+    search: location.search,
+  });
+  const urlParams = new URLSearchParams(search);
   // We un-prefix the params object here so the deserialize function doesn't have to care about the keyPrefix.
 
   let allParamsEmpty = true;

client/src/app/pages/sbom-scan/sbom-scan.tsx

@@ -18,18 +18,19 @@ import {
   EmptyStateFooter,
   EmptyStateVariant,
   MenuToggle,
-  type MenuToggleElement,
   PageSection,
   Split,
   SplitItem,
   Stack,
   StackItem,
+  type MenuToggleElement,
 } from "@patternfly/react-core";
 
 import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon";
 import InProgressIcon from "@patternfly/react-icons/dist/esm/icons/in-progress-icon";
 
-import { generateSbomStaticReport, type ExtractResult } from "@app/client";
+import { generateStaticReport } from "@app/api/rest";
+import type { ExtractResult } from "@app/client";
 import { useUploadAndAnalyzeSBOM } from "@app/queries/sboms-analysis";
 import { Paths } from "@app/Routes";
 
@@ -38,8 +39,6 @@ import { VulnerabilityMetrics } from "@static-report/pages/vulnerabilities/compo
 import { VulnerabilityTable } from "@static-report/pages/vulnerabilities/components/VulnerabilityTable";
 
 import { UploadFileForAnalysis } from "./components/UploadFileForAnalysis";
-import { generateStaticReport } from "@app/api/rest";
-import { WINDOW_ANALYSIS_RESPONSE, WINDOW_PURLS } from "@app/Constants";
 
 export const SbomScan: React.FC = () => {
   // Actions dropdown

client/src/app/queries/helpers.ts

@@ -1,4 +1,4 @@
-import ENV from "@app/env";
+import { isMockDisabled } from "@app/Constants";
 import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
 
 const defaultTimeout = 1000;
@@ -29,6 +29,6 @@ export const useMockableQuery = <
 ) => {
   return useQuery<TQueryFnData, TError, TData>({
     ...params,
-    queryFn: ENV.MOCK === "off" ? params.queryFn : () => mockPromise(mockData),
+    queryFn: isMockDisabled ? params.queryFn : () => mockPromise(mockData),
   });
 };

client/src/app/queries/vulnerabilities.ts

@@ -11,8 +11,7 @@ import {
   getVulnerability,
   listVulnerabilities,
 } from "@app/client";
-import { WINDOW_ANALYSIS_RESPONSE } from "@app/Constants";
-import ENV from "@app/env";
+import { isMockDisabled, WINDOW_ANALYSIS_RESPONSE } from "@app/Constants";
 import { requestParamsQuery } from "@app/hooks/table-controls";
 
 import { mockPromise } from "./helpers";
@@ -46,35 +45,34 @@ export const useFetchVulnerabilities = (
 };
 
 export const useFetchVulnerabilitiesByPackageIds = (ids: string[]) => {
-  const chunks =
-    ENV.MOCK === "off"
-      ? {
-          ids: ids.reduce<string[][]>((chunks, item, index) => {
-            if (index % 100 === 0) {
-              chunks.push([item]);
-            } else {
-              chunks[chunks.length - 1].push(item);
-            }
-            return chunks;
-          }, []),
-          dataResolver: async (ids: string[]) => {
-            const response = await analyze({
-              client,
-              body: { purls: ids },
-            });
-            return response.data;
-          },
-        }
-      : {
-          ids: [ids],
-          dataResolver: (_ids: string[]) => {
-            return mockPromise(
-              // biome-ignore lint/suspicious/noExplicitAny: allowed
-              ((window as any)[WINDOW_ANALYSIS_RESPONSE] as AnalysisResponse) ??
-                {},
-            );
-          },
-        };
+  const chunks = isMockDisabled
+    ? {
+        ids: ids.reduce<string[][]>((chunks, item, index) => {
+          if (index % 100 === 0) {
+            chunks.push([item]);
+          } else {
+            chunks[chunks.length - 1].push(item);
+          }
+          return chunks;
+        }, []),
+        dataResolver: async (ids: string[]) => {
+          const response = await analyze({
+            client,
+            body: { purls: ids },
+          });
+          return response.data;
+        },
+      }
+    : {
+        ids: [ids],
+        dataResolver: (_ids: string[]) => {
+          return mockPromise(
+            // biome-ignore lint/suspicious/noExplicitAny: allowed
+            ((window as any)[WINDOW_ANALYSIS_RESPONSE] as AnalysisResponse) ??
+              {},
+          );
+        },
+      };
 
   const userQueries = useQueries({
     queries: chunks.ids.map((ids) => {

client/src/static-report/README.md

@@ -0,0 +1,39 @@
+## Static report
+
+Static Report is a user interface for the Scan SBOM. As the name suggests, it's completely static in nature, and does not talk to any external APIs.
+
+## Developing / Contributing
+
+### How it works?
+
+As stated in the introduction, the interface is completely static in nature. All of the data displayed in the UI resides in `client/src/static-report/data.js` file. It is empty by default when you build the project. In order to display actual output of an analysis, `data.js` must contain data generated from an analysis. 
+
+The `data.js` should be populated by the output of `POST /api/v2/vulnerability/analyze`
+
+### Running in developtment mode
+
+At the **root** of the entire project.
+
+- Install dependencies:
+
+```shell
+npm ci
+```
+
+- Run the project:
+
+```shell
+npm run start:dev:static-report
+```
+
+This will serve the report at http://localhost:3000 and will render the data that lives in `client/src/static-report/data.js`
+
+### Running in production mode
+
+- Build the project:
+
+```shell
+npm run build
+```
+
+This will generate a `client/dist/static-report` directory. It serves as a template; therefore, It doesn't contain the `data.js` file as it must be generated manually or by other tool like the backend.

client/src/static-report/data.js

@@ -0,0 +1,2 @@
+// Populate it with POST /api/v2/vulnerability/analyze
+window.__analysisResponse = {};