👻 Add Biome Format Rules

.github/workflows/ci-repo.yaml

@@ -34,9 +34,8 @@ jobs:
         run: npm run build-storybook
       - name: Test
         run: npm run test -- --coverage --watchAll=false
-      ## TODO Enable the format check after migration to RSBuild is done
-      # - name: Check
-      #   run: npm run format
+      - name: Check
+        run: npm run format
 
       - name: Crate Format
         working-directory: ./crate

biome.json

@@ -29,7 +29,8 @@
   },
   "files": {
     "ignore": [
-      "**/src/mocks/**/*.json"
+      "**/src/mocks/**/*.json",
+      "**/src/app/client/*.ts"
     ]
   }
 }

client/package.json

@@ -64,11 +64,7 @@
     "typescript": "^5.7.3"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

client/public/mockServiceWorker.js

@@ -120,7 +120,7 @@ self.addEventListener("fetch", function (event) {
         console.warn(
           '[MSW] Successfully emulated a network error for the "%s %s" request.',
           request.method,
-          request.url
+          request.url,
         );
         return;
       }
@@ -131,9 +131,9 @@ self.addEventListener("fetch", function (event) {
 [MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
         request.method,
         request.url,
-        `${error.name}: ${error.message}`
+        `${error.name}: ${error.message}`,
       );
-    })
+    }),
   );
 });
 

client/src/app/App.css

@@ -21,7 +21,5 @@ table.vertical-middle-aligned-table tr td {
 }
 
 .multiple-file-upload-status-item-force-blue .pf-v5-c-progress__indicator {
-  background-color: var(
-    --pf-v5-c-progress__indicator--BackgroundColor
-  ) !important;
+  background-color: var(--pf-v5-c-progress__indicator--BackgroundColor) !important;
 }

client/src/app/Routes.tsx

@@ -10,7 +10,7 @@ const AdvisoryList = lazy(() => import("./pages/advisory-list"));
 const AdvisoryDetails = lazy(() => import("./pages/advisory-details"));
 const VulnerabilityList = lazy(() => import("./pages/vulnerability-list"));
 const VulnerabilityDetails = lazy(
-  () => import("./pages/vulnerability-details")
+  () => import("./pages/vulnerability-details"),
 );
 const PackageList = lazy(() => import("./pages/package-list"));
 const PackageDetails = lazy(() => import("./pages/package-details"));
@@ -80,7 +80,7 @@ export const useRouteParams = (pathParam: PathParam) => {
   let value = params[pathParam];
   if (value === undefined) {
     throw new Error(
-      `ASSERTION FAILURE: required path parameter not set: ${pathParam}`
+      `ASSERTION FAILURE: required path parameter not set: ${pathParam}`,
     );
   }
   return value;

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

@@ -71,7 +71,7 @@ export const getSeverityPriority = (val: ExtendedSeverity) => {
 };
 
 export function compareBySeverityFn<T>(
-  severityExtractor: (elem: T) => ExtendedSeverity
+  severityExtractor: (elem: T) => ExtendedSeverity,
 ) {
   return (a: T, b: T) => {
     return (

client/src/app/api/models.ts

@@ -55,7 +55,7 @@ export interface DecomposedPurl {
 
 export type ExtendedSeverity = Severity | "unknown";
 export const extendedSeverityFromSeverity = (
-  value?: Severity | null
+  value?: Severity | null,
 ): ExtendedSeverity => value ?? "unknown";
 
 // User preferences

client/src/app/api/rest.ts

@@ -24,11 +24,11 @@ export interface PaginatedResponse<T> {
 export const getHubPaginatedResult = <T>(
   url: string,
   params: HubRequestParams = {},
-  extraQueryParams: { key: string; value: string }[] = []
+  extraQueryParams: { key: string; value: string }[] = [],
 ): Promise<HubPaginatedResult<T>> => {
   const requestParams = serializeRequestParamsForHub(params);
   extraQueryParams.forEach((param) =>
-    requestParams.append(param.key, param.value)
+    requestParams.append(param.key, param.value),
   );
 
   return axios
@@ -54,7 +54,7 @@ const getContentTypeFromFile = (file: File) => {
 
 export const uploadAdvisory = (
   formData: FormData,
-  config?: AxiosRequestConfig
+  config?: AxiosRequestConfig,
 ) => {
   const file = formData.get(FORM_DATA_FILE_KEY) as File;
   return axios.post<AdvisoryDetails>(`${ADVISORIES}`, file, {

client/src/app/axios-config/apiInit.ts

@@ -14,7 +14,7 @@ export const client = createClient({
 
 function getUser() {
   const oidcStorage = sessionStorage.getItem(
-    `oidc.user:${OIDC_SERVER_URL}:${OIDC_CLIENT_ID}`
+    `oidc.user:${OIDC_SERVER_URL}:${OIDC_CLIENT_ID}`,
   );
   if (!oidcStorage) {
     return null;
@@ -35,7 +35,7 @@ export const initInterceptors = () => {
     },
     (error) => {
       return Promise.reject(error);
-    }
+    },
   );
 
   axios.interceptors.response.use(
@@ -72,6 +72,6 @@ export const initInterceptors = () => {
       }
 
       return Promise.reject(error);
-    }
+    },
   );
 };

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

@@ -27,7 +27,7 @@ export const CheckboxFilterControl = <TItem,>({
 
   React.useEffect(() => {
     setSelectOptions(
-      Array.isArray(category.selectOptions) ? category.selectOptions : []
+      Array.isArray(category.selectOptions) ? category.selectOptions : [],
     );
   }, [category.selectOptions]);
 
@@ -36,7 +36,7 @@ export const CheckboxFilterControl = <TItem,>({
   const flatOptions: FilterSelectOptionProps[] = !hasGroupings
     ? selectOptions
     : (Object.values(selectOptions).flatMap(
-        (i) => i
+        (i) => i,
       ) as FilterSelectOptionProps[]);
 
   const onSelect = (value: string | undefined) => {

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

@@ -39,7 +39,7 @@ export const DateRangeFilter = <TItem,>({
 
   const validFilters =
     selectedFilters?.filter((interval) =>
-      isValidInterval(parseInterval(interval))
+      isValidInterval(parseInterval(interval)),
     ) ?? [];
   const [from, setFrom] = useState<Date>();
   const [to, setTo] = useState<Date>();
@@ -58,7 +58,7 @@ export const DateRangeFilter = <TItem,>({
 
   const onFromDateChange = (
     event: FormEvent<HTMLInputElement>,
-    value: string
+    value: string,
   ) => {
     if (isValidAmericanShortDate(value)) {
       setFrom(parseAmericanDate(value));

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

@@ -34,15 +34,15 @@ export const FilterPanel = <TItem, TFilterCategoryKey extends string>({
 >): JSX.Element | null => {
   const setFilterValue = (
     category: FilterCategory<TItem, TFilterCategoryKey>,
-    newValue: FilterValue
+    newValue: FilterValue,
   ) => setFilterValues({ ...filterValues, [category.categoryKey]: newValue });
 
   const clearAllFilters = () => {
     const filtersToBeCleared = filterCategories
       .filter((filterCategory) => {
         return (
           omitFilterCategoryKeys.find(
-            (categoryKey) => categoryKey === filterCategory.categoryKey
+            (categoryKey) => categoryKey === filterCategory.categoryKey,
           ) === undefined
         );
       })
@@ -64,7 +64,7 @@ export const FilterPanel = <TItem, TFilterCategoryKey extends string>({
           .filter((filterCategory) => {
             return (
               omitFilterCategoryKeys.find(
-                (categoryKey) => categoryKey === filterCategory.categoryKey
+                (categoryKey) => categoryKey === filterCategory.categoryKey,
               ) === undefined
             );
           })

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

@@ -47,7 +47,7 @@ export const RadioFilterControl = <TItem, TFilterCategoryKey extends string>({
               }}
             />
           );
-        }
+        },
       )}
     </>
   );

client/src/app/components/FilterToolbar/DateRangeFilter.tsx

@@ -44,7 +44,7 @@ export const DateRangeFilter = <TItem,>({
 
   const validFilters =
     selectedFilters?.filter((interval) =>
-      isValidInterval(parseInterval(interval))
+      isValidInterval(parseInterval(interval)),
     ) ?? [];
   const [from, setFrom] = useState<Date>();
   const [to, setTo] = useState<Date>();
@@ -86,14 +86,14 @@ export const DateRangeFilter = <TItem,>({
 
   const clearSingleRange = (
     _category: string | ToolbarChipGroup,
-    _option: string | ToolbarChip
+    _option: string | ToolbarChip,
   ) => {
     setFilterValue([]);
   };
 
   const onFromDateChange = (
     event: FormEvent<HTMLInputElement>,
-    value: string
+    value: string,
   ) => {
     if (isValidAmericanShortDate(value)) {
       setFrom(parseAmericanDate(value));

client/src/app/components/FilterToolbar/FilterToolbar.tsx

@@ -96,7 +96,7 @@ export const getFilterLogicOperator = <
   TFilterCategoryKey extends string,
 >(
   filterCategory?: FilterCategory<TItem, TFilterCategoryKey>,
-  defaultOperator: "AND" | "OR" = "OR"
+  defaultOperator: "AND" | "OR" = "OR",
 ) =>
   (filterCategory &&
     (filterCategory as IMultiselectFilterCategory<TItem, TFilterCategoryKey>)
@@ -130,27 +130,27 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
     React.useState(filterCategories[0].categoryKey);
 
   const onCategorySelect = (
-    category: FilterCategory<TItem, TFilterCategoryKey>
+    category: FilterCategory<TItem, TFilterCategoryKey>,
   ) => {
     setCurrentFilterCategoryKey(category.categoryKey);
     setIsCategoryDropdownOpen(false);
   };
 
   const setFilterValue = (
     category: FilterCategory<TItem, TFilterCategoryKey>,
-    newValue: FilterValue
+    newValue: FilterValue,
   ) => setFilterValues({ ...filterValues, [category.categoryKey]: newValue });
 
   const currentFilterCategory = filterCategories.find(
-    (category) => category.categoryKey === currentFilterCategoryKey
+    (category) => category.categoryKey === currentFilterCategoryKey,
   );
 
   const filterGroups = filterCategories.reduce(
     (groups, category) =>
       !category.filterGroup || groups.includes(category.filterGroup)
         ? groups
         : [...groups, category.filterGroup],
-    [] as string[]
+    [] as string[],
   );
 
   const renderDropdownItems = () => {
@@ -160,7 +160,7 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
           <DropdownList>
             {filterCategories
               .filter(
-                (filterCategory) => filterCategory.filterGroup === filterGroup
+                (filterCategory) => filterCategory.filterGroup === filterGroup,
               )
               .map((filterCategory) => {
                 return (

client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx

@@ -49,7 +49,7 @@ export const MultiselectFilterControl = <TItem,>({
 
   React.useEffect(() => {
     setSelectOptions(
-      Array.isArray(category.selectOptions) ? category.selectOptions : []
+      Array.isArray(category.selectOptions) ? category.selectOptions : [],
     );
   }, [category.selectOptions]);
 
@@ -58,14 +58,14 @@ export const MultiselectFilterControl = <TItem,>({
   const flatOptions: FilterSelectOptionProps[] = !hasGroupings
     ? selectOptions
     : (Object.values(selectOptions).flatMap(
-        (i) => i
+        (i) => i,
       ) as FilterSelectOptionProps[]);
 
   const getOptionFromOptionValue = (optionValue: string) =>
     flatOptions.find(({ value }) => value === optionValue);
 
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(
-    null
+    null,
   );
 
   const [activeItem, setActiveItem] = React.useState<string | null>(null);
@@ -118,15 +118,15 @@ export const MultiselectFilterControl = <TItem,>({
           return prev;
         }
       },
-      [] as (string | ToolbarChip)[]
+      [] as (string | ToolbarChip)[],
     );
 
   const renderSelectOptions = (
-    filter: (option: FilterSelectOptionProps, groupName?: string) => boolean
+    filter: (option: FilterSelectOptionProps, groupName?: string) => boolean,
   ) =>
     hasGroupings
       ? Object.entries(
-          selectOptions as Record<string, FilterSelectOptionProps[]>
+          selectOptions as Record<string, FilterSelectOptionProps[]>,
         )
           .sort(([groupA], [groupB]) => groupA.localeCompare(groupB))
           .map(([group, options]): [string, FilterSelectOptionProps[]] => [
@@ -203,10 +203,10 @@ export const MultiselectFilterControl = <TItem,>({
 
       setFocusedItemIndex(indexToFocus);
       const focusedItem = selectOptions.filter(
-        ({ optionProps }) => !optionProps?.isDisabled
+        ({ optionProps }) => !optionProps?.isDisabled,
       )[indexToFocus];
       setActiveItem(
-        `select-multi-typeahead-checkbox-${focusedItem.value.replace(" ", "-")}`
+        `select-multi-typeahead-checkbox-${focusedItem.value.replace(" ", "-")}`,
       );
     }
   };
@@ -221,7 +221,7 @@ export const MultiselectFilterControl = <TItem,>({
         ? category.selectOptions?.filter((menuItem) =>
             String(menuItem.value)
               .toLowerCase()
-              .includes(inputValue.trim().toLowerCase())
+              .includes(inputValue.trim().toLowerCase()),
           )
         : [];
 
@@ -254,11 +254,11 @@ export const MultiselectFilterControl = <TItem,>({
       : firstMenuItem;
 
     const newSelectOptions = flatOptions.filter((menuItem) =>
-      menuItem.value.toLowerCase().includes(inputValue.toLowerCase())
+      menuItem.value.toLowerCase().includes(inputValue.toLowerCase()),
     );
     const selectedItem =
       newSelectOptions.find(
-        (option) => option.value.toLowerCase() === inputValue.toLowerCase()
+        (option) => option.value.toLowerCase() === inputValue.toLowerCase(),
       ) || focusedItem;
 
     switch (event.key) {
@@ -286,7 +286,7 @@ export const MultiselectFilterControl = <TItem,>({
 
   const onTextInputChange = (
     _event: React.FormEvent<HTMLInputElement>,
-    value: string
+    value: string,
   ) => {
     setInputValue(value);
     if (!isFilterDropdownOpen) {

client/src/app/components/FilterToolbar/SelectFilterControl.tsx

@@ -57,7 +57,7 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
           return prev;
         }
       },
-      [] as (string | ToolbarChip)[]
+      [] as (string | ToolbarChip)[],
     );
 
   const onFilterSelect = (value: string) => {