👻 Apply Biome Lint Rules and enforce them in CI

.github/workflows/ci-repo.yaml

@@ -35,8 +35,7 @@ jobs:
       - name: Test
         run: npm run test -- --coverage --watchAll=false
       - name: Check
-        run: npm run format
-
+        run: npm run check
       - name: Crate Format
         working-directory: ./crate
         run: cargo fmt --check

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.8.0/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
   "organizeImports": {
     "enabled": true
   },
@@ -24,12 +24,17 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "a11y": {
+        "useSemanticElements": "off"
+      }
     }
   },
   "files": {
     "ignore": [
-      "**/src/mocks/**/*.json",
+      "**/*.stories.tsx",
+      "**/stories/**",
+      "**/mocks/**",
       "**/src/app/client/*.ts"
     ]
   }

client/config/monacoConstants.ts

@@ -1,4 +1,4 @@
-import { EditorLanguage } from "monaco-editor/esm/metadata";
+import type { EditorLanguage } from "monaco-editor/esm/metadata";
 
 export const LANGUAGES_BY_FILE_EXTENSION = {
   java: "java",

client/public/mockServiceWorker.js

@@ -11,15 +11,15 @@
 const INTEGRITY_CHECKSUM = "3d6b9f06410d179a7f7404d4bf4c3c70";
 const activeClientIds = new Set();
 
-self.addEventListener("install", function () {
+self.addEventListener("install", () => {
   self.skipWaiting();
 });
 
-self.addEventListener("activate", function (event) {
+self.addEventListener("activate", (event) => {
   event.waitUntil(self.clients.claim());
 });
 
-self.addEventListener("message", async function (event) {
+self.addEventListener("message", async (event) => {
   const clientId = event.source.id;
 
   if (!clientId || !self.clients) {
@@ -84,7 +84,7 @@ self.addEventListener("message", async function (event) {
   }
 });
 
-self.addEventListener("fetch", function (event) {
+self.addEventListener("fetch", (event) => {
   const { request } = event;
   const accept = request.headers.get("accept") || "";
 
@@ -145,7 +145,7 @@ async function handleRequest(event, requestId) {
   // Ensure MSW is active and ready to handle the message, otherwise
   // this message will pend indefinitely.
   if (client && activeClientIds.has(client.id)) {
-    (async function () {
+    (async () => {
       const clonedResponse = response.clone();
       sendToClient(client, {
         type: "RESPONSE",
@@ -207,7 +207,7 @@ async function getResponse(event, client, requestId) {
     // comply with the server's CORS preflight check.
     // Operate with the headers as an object because request "Headers"
     // are immutable.
-    delete headers["x-msw-bypass"];
+    headers["x-msw-bypass"] = undefined;
 
     return fetch(clonedRequest, { headers });
   }
@@ -280,7 +280,7 @@ function sendToClient(client, message) {
     const channel = new MessageChannel();
 
     channel.port1.onmessage = (event) => {
-      if (event.data && event.data.error) {
+      if (event.data?.error) {
         return reject(event.data.error);
       }
 

client/src/app/App.tsx

@@ -1,11 +1,11 @@
 import "./App.css";
-import React from "react";
+import type React from "react";
 import { BrowserRouter as Router } from "react-router-dom";
 
-import { DefaultLayout } from "./layout";
 import { AppRoutes } from "./Routes";
-import { NotificationsProvider } from "./components/NotificationsContext";
 import { AnalyticsProvider } from "./components/AnalyticsProvider";
+import { NotificationsProvider } from "./components/NotificationsContext";
+import { DefaultLayout } from "./layout";
 
 import "@patternfly/patternfly/patternfly.css";
 import "@patternfly/patternfly/patternfly-addons.css";

client/src/app/Routes.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, lazy } from "react";
+import { Suspense, lazy } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { useParams, useRoutes } from "react-router-dom";
 
@@ -54,7 +54,7 @@ export const AppRoutes = () => {
       element: <SBOMDetails />,
     },
     {
-      path: `/importers`,
+      path: "/importers",
       element: <ImporterList />,
     },
     { path: "/upload", element: <Upload /> },
@@ -77,7 +77,7 @@ export const AppRoutes = () => {
 
 export const useRouteParams = (pathParam: PathParam) => {
   const params = useParams();
-  let value = params[pathParam];
+  const value = params[pathParam];
   if (value === undefined) {
     throw new Error(
       `ASSERTION FAILURE: required path parameter not set: ${pathParam}`,

client/src/app/analytics.ts

@@ -1,4 +1,4 @@
-import { AnalyticsBrowserSettings } from "@segment/analytics-next";
+import type { AnalyticsBrowserSettings } from "@segment/analytics-next";
 import { ENV } from "./env";
 
 export const analyticsSettings: AnalyticsBrowserSettings = {

client/src/app/api/model-utils.ts

@@ -1,4 +1,4 @@
-import { ProgressProps } from "@patternfly/react-core";
+import type { ProgressProps } from "@patternfly/react-core";
 import {
   global_palette_purple_400 as criticalColor,
   global_danger_color_100 as importantColor,
@@ -8,7 +8,7 @@ import {
   global_palette_black_300 as unknownColor,
 } from "@patternfly/react-tokens";
 
-import { ExtendedSeverity } from "./models";
+import type { ExtendedSeverity } from "./models";
 
 type ListType = {
   [key in ExtendedSeverity]: {

client/src/app/api/models.ts

@@ -1,5 +1,5 @@
-import { Labels } from "@app/client";
-import { Severity } from "@app/client";
+import type { Labels } from "@app/client";
+import type { Severity } from "@app/client";
 
 export type WithUiId<T> = T & { _ui_unique_id: string };
 

client/src/app/api/rest.ts

@@ -1,20 +1,16 @@
-import axios, { AxiosRequestConfig } from "axios";
+import axios, { type AxiosRequestConfig } from "axios";
 
 import { FORM_DATA_FILE_KEY } from "@app/Constants";
-import { AdvisoryDetails, IngestResult } from "@app/client";
+import type { AdvisoryDetails, IngestResult } from "@app/client";
 import { serializeRequestParamsForHub } from "@app/hooks/table-controls/getHubRequestParams";
 
-import { HubPaginatedResult, HubRequestParams } from "./models";
+import type { HubPaginatedResult, HubRequestParams } from "./models";
 
 const API = "/api";
 
-export const ORGANIZATIONS = API + "/v2/organization";
-export const PRODUCTS = API + "/v2/product";
-export const ADVISORIES = API + "/v2/advisory";
-export const VULNERABILITIES = API + "/v2/vulnerability";
-export const SBOMS = API + "/v2/sbom";
-export const PACKAGES = API + "/v2/purl";
-export const IMPORTERS = API + "/v2/importer";
+export const ORGANIZATIONS = `${API}/v2/organization`;
+export const ADVISORIES = `${API}/v2/advisory`;
+export const SBOMS = `${API}/v2/sbom`;
 
 export interface PaginatedResponse<T> {
   items: T[];
@@ -27,9 +23,9 @@ export const getHubPaginatedResult = <T>(
   extraQueryParams: { key: string; value: string }[] = [],
 ): Promise<HubPaginatedResult<T>> => {
   const requestParams = serializeRequestParamsForHub(params);
-  extraQueryParams.forEach((param) =>
-    requestParams.append(param.key, param.value),
-  );
+  for (const param of extraQueryParams) {
+    requestParams.append(param.key, param.value);
+  }
 
   return axios
     .get<PaginatedResponse<T>>(url, {

client/src/app/components/AnalyticsProvider.tsx

@@ -1,12 +1,16 @@
 import React, { useEffect } from "react";
-import { useLocation } from "react-router";
 import { useAuth } from "react-oidc-context";
-import { AnalyticsBrowser } from "@segment/analytics-next";
-import ENV from "@app/env";
+import { useLocation } from "react-router";
+
 import { isAuthRequired } from "@app/Constants";
 import { analyticsSettings } from "@app/analytics";
+import ENV from "@app/env";
+import { AnalyticsBrowser } from "@segment/analytics-next";
+
+const contextDefaultValue = {} as AnalyticsBrowser;
 
-const AnalyticsContext = React.createContext<AnalyticsBrowser>(undefined!);
+const AnalyticsContext =
+  React.createContext<AnalyticsBrowser>(contextDefaultValue);
 
 interface IAnalyticsProviderProps {
   children: React.ReactNode;
@@ -35,7 +39,7 @@ export const AnalyticsContextProvider: React.FC<IAnalyticsProviderProps> = ({
     if (auth) {
       const claims = auth.user?.profile;
       analytics.identify(claims?.sub, {
-        /* eslint-disable @typescript-eslint/no-explicit-any */
+        // biome-ignore lint/suspicious/noExplicitAny:
         organization_id: ((claims as any)?.organization as any)?.id,
         domain: claims?.email?.split("@")[1],
       });
@@ -44,6 +48,7 @@ export const AnalyticsContextProvider: React.FC<IAnalyticsProviderProps> = ({
 
   // Watch navigation
   const location = useLocation();
+  // biome-ignore lint/correctness/useExhaustiveDependencies: required to track page changes
   useEffect(() => {
     analytics.page();
   }, [analytics, location]);

client/src/app/components/AppPlaceholder.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import type React from "react";
+
 import { Bullseye, Spinner } from "@patternfly/react-core";
 
 export const AppPlaceholder: React.FC = () => {

client/src/app/components/ConfirmDialog.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import type React from "react";
+
 import {
   Button,
-  Modal,
   ButtonVariant,
+  Modal,
   ModalVariant,
 } from "@patternfly/react-core";
 
@@ -15,7 +16,7 @@ export interface ConfirmDialogProps {
     | "danger"
     | "warning"
     | "info"
-    /* eslint-disable @typescript-eslint/no-explicit-any */
+    // biome-ignore lint/suspicious/noExplicitAny:
     | React.ComponentType<any>;
   message: string | React.ReactNode;
 

client/src/app/components/FilterPanel/CheckboxFilterControl.tsx

@@ -2,11 +2,11 @@ import * as React from "react";
 
 import { Checkbox } from "@patternfly/react-core";
 
-import {
+import type {
   FilterSelectOptionProps,
   IMultiselectFilterCategory,
 } from "../FilterToolbar";
-import { IFilterControlProps } from "./FilterControl";
+import type { IFilterControlProps } from "./FilterControl";
 
 export interface IMultiselectFilterControlProps<TItem>
   extends IFilterControlProps<TItem, string> {
@@ -17,7 +17,6 @@ export const CheckboxFilterControl = <TItem,>({
   category,
   filterValue,
   setFilterValue,
-  isDisabled = false,
 }: React.PropsWithChildren<
   IMultiselectFilterControlProps<TItem>
 >): JSX.Element | null => {
@@ -35,15 +34,13 @@ export const CheckboxFilterControl = <TItem,>({
 
   const flatOptions: FilterSelectOptionProps[] = !hasGroupings
     ? selectOptions
-    : (Object.values(selectOptions).flatMap(
-        (i) => i,
-      ) as FilterSelectOptionProps[]);
+    : (Object.values(selectOptions).flat() as FilterSelectOptionProps[]);
 
   const onSelect = (value: string | undefined) => {
     if (value && value !== "No results") {
       let newFilterValue: string[];
 
-      if (filterValue && filterValue.includes(value)) {
+      if (filterValue?.includes(value)) {
         newFilterValue = filterValue.filter((item) => item !== value);
       } else {
         newFilterValue = filterValue ? [...filterValue, value] : [value];
@@ -55,10 +52,10 @@ export const CheckboxFilterControl = <TItem,>({
 
   return (
     <>
-      {flatOptions.map(({ label, value, optionProps = {} }, index) => {
+      {flatOptions.map(({ label, value }, index) => {
         return (
           <Checkbox
-            key={index}
+            key={label}
             id={`checkbox-${index}-${category.categoryKey}`}
             isLabelWrapped
             label={label}