fleet/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SoftwareVulnSoftwareVersions.tsx

/** software/vulnerabilities/:cve > Vulnerable software section */

import React, { useCallback, useMemo } from "react";

import { InjectedRouter } from "react-router";

import { IVulnerabilityResponse } from "services/entities/vulnerabilities";

import PATHS from "router/paths";
import { buildQueryStringFromParams } from "utilities/url";

import Card from "components/Card";
import TableContainer from "components/TableContainer";
import TableCount from "components/TableContainer/TableCount";

import generateColumnConfigs from "./SwVulnSwTableConfig";

const baseClass = "software-vuln-software-versions";

interface ISoftwareVulnSoftwareVersions {
  vulnSoftware: IVulnerabilityResponse["software"];
  isPremiumTier: boolean;
  router: InjectedRouter;
  teamIdForApi?: number;
}

const SoftwareVulnSoftwareVersions = ({
  vulnSoftware,
  isPremiumTier,
  router,
  teamIdForApi,
}: ISoftwareVulnSoftwareVersions) => {
  const columnConfigs = useMemo(
    () => generateColumnConfigs(isPremiumTier, router, teamIdForApi),
    [isPremiumTier, router, teamIdForApi]
  );

  const onSelectSingleRow = useCallback(
    ({ original: { id: software_version_id } }: any) => {
      if (!software_version_id) {
        return;
      }

      router.push(
        `${PATHS.MANAGE_HOSTS}?${buildQueryStringFromParams({
          software_version_id,
          team_id: teamIdForApi,
        })}`
      );
    },
    [teamIdForApi, router]
  );

  const renderVulnerableSoftwareCount = useCallback(() => {
    return <TableCount name="items" count={vulnSoftware?.length} />;
  }, [vulnSoftware?.length]);

  const renderVulnerableSoftwareTable = () => {
    return (
      <TableContainer
        columnConfigs={columnConfigs}
        data={vulnSoftware}
        defaultSortHeader="hosts"
        defaultSortDirection="desc"
        isClientSidePagination
        isLoading={false} // not rendered otherwise
        emptyComponent={() => <></>}
        showMarkAllPages={false}
        isAllPagesSelected={false}
        disableMultiRowSelect
        onSelectSingleRow={onSelectSingleRow}
        renderCount={renderVulnerableSoftwareCount}
      />
    );
  };
  return (
    <Card borderRadiusSize="xxlarge" includeShadow className={`${baseClass}`}>
      <h2>Vulnerable software</h2>
      {renderVulnerableSoftwareTable()}
    </Card>
  );
};

export default SoftwareVulnSoftwareVersions;