vulnerability-context.tsx

import React from "react";

import { AxiosError } from "axios";

import { VulnerabilitySummary } from "@app/client";
import { FilterType } from "@app/components/FilterToolbar";
import {
  FILTER_TEXT_CATEGORY_KEY,
  TablePersistenceKeyPrefixes,
} from "@app/Constants";
import {
  getHubRequestParams,
  ITableControls,
  useTableControlProps,
  useTableControlState,
} from "@app/hooks/table-controls";
import { useSelectionState } from "@app/hooks/useSelectionState";
import { useFetchVulnerabilities } from "@app/queries/vulnerabilities";

export interface IVulnerabilitySearchContext {
  tableControls: ITableControls<
    VulnerabilitySummary,
    "identifier" | "title" | "severity" | "published" | "sboms",
    "published" | "severity",
    "" | "average_severity" | "published",
    string
  >;

  totalItemCount: number;
  isFetching: boolean;
  fetchError: AxiosError;
}

const contextDefaultValue = {} as IVulnerabilitySearchContext;

export const VulnerabilitySearchContext =
  React.createContext<IVulnerabilitySearchContext>(contextDefaultValue);

interface IVulnerabilityProvider {
  children: React.ReactNode;
}

export const VulnerabilitySearchProvider: React.FunctionComponent<
  IVulnerabilityProvider
> = ({ children }) => {
  const tableControlState = useTableControlState({
    tableName: "vulnerability",
    persistenceKeyPrefix: TablePersistenceKeyPrefixes.vulnerabilities,
    persistTo: "urlParams",
    columnNames: {
      identifier: "ID",
      title: "Description",
      severity: "CVSS",
      published: "Date published",
      sboms: "Related documents",
    },
    isPaginationEnabled: true,
    isSortEnabled: true,
    sortableColumns: ["published", "severity"],
    isFilterEnabled: true,
    filterCategories: [
      {
        categoryKey: FILTER_TEXT_CATEGORY_KEY,
        title: "Filter text",
        placeholderText: "Search",
        type: FilterType.search,
      },
      {
        categoryKey: "average_severity",
        title: "CVSS",
        placeholderText: "CVSS",
        type: FilterType.multiselect,
        selectOptions: [
          { value: "none", label: "None" },
          { value: "low", label: "Low" },
          { value: "medium", label: "Medium" },
          { value: "high", label: "High" },
          { value: "critical", label: "Critical" },
        ],
      },
      {
        categoryKey: "published",
        title: "Created on",
        type: FilterType.dateRange,
      },
    ],
    isExpansionEnabled: true,
    expandableVariant: "compound",
  });

  const {
    result: { data: vulnerabilities, total: totalItemCount },
    isFetching,
    fetchError,
  } = useFetchVulnerabilities(
    getHubRequestParams({
      ...tableControlState,
      hubSortFieldKeys: {
        severity: "average_severity",
        published: "published",
      },
    })
  );

  const tableControls = useTableControlProps({
    ...tableControlState,
    idProperty: "identifier",
    currentPageItems: vulnerabilities,
    totalItemCount,
    isLoading: isFetching,
    selectionState: useSelectionState({
      items: vulnerabilities,
      isEqual: (a, b) => a.identifier === b.identifier,
    }),
  });

  return (
    <VulnerabilitySearchContext.Provider
      value={{ totalItemCount, isFetching, fetchError, tableControls }}
    >
      {children}
    </VulnerabilitySearchContext.Provider>
  );
};