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

import React from "react";
import { CellProps, Column } from "react-table";

import { IVulnerabilitySoftware } from "interfaces/software";
import { IStringCellProps } from "interfaces/datatable_config";

import PATHS from "router/paths";

import LinkCell from "components/TableContainer/DataTable/LinkCell";
import TextCell from "components/TableContainer/DataTable/TextCell";
import ViewAllHostsLink from "components/ViewAllHostsLink";
import SoftwareIcon from "pages/SoftwarePage/components/icons/SoftwareIcon";
import { InjectedRouter } from "react-router";

type SwVulnTableColumnConfig = Column<IVulnerabilitySoftware>;

type ITableStringCellProps = IStringCellProps<IVulnerabilitySoftware>;
type IHostCountCellProps = CellProps<
  IVulnerabilitySoftware,
  number | undefined
>;

const generateColumnConfigs = (
  isPremiumTier: boolean,
  router: InjectedRouter,
  teamIdForApi?: number
): SwVulnTableColumnConfig[] => {
  const configs: SwVulnTableColumnConfig[] = [
    {
      Header: "Name",
      disableSortBy: true,
      accessor: "name",
      Cell: ({ row }: ITableStringCellProps) => {
        const { name, id } = row.original;
        const endpoint = PATHS.SOFTWARE_VERSION_DETAILS(id.toString());
        // since No Teams not supported on this page, falsiness of 0 is okay
        const path = teamIdForApi
          ? `${endpoint}?team_id=${teamIdForApi}`
          : endpoint;
        const onClickVulnSwVersion = (e: React.MouseEvent) => {
          // Allows for button to be clickable in a clickable row
          e.stopPropagation();

          router?.push(path);
        };
        return (
          <LinkCell
            path={path}
            customOnClick={onClickVulnSwVersion}
            value={
              <>
                <SoftwareIcon name={name} />
                <span className="vuln-sw-name">{name}</span>
              </>
            }
          />
        );
      },
    },
    {
      Header: "Version",
      disableSortBy: true,
      accessor: "version",
      Cell: ({ cell }: ITableStringCellProps) => (
        <TextCell value={cell.value} />
      ),
    },
    {
      Header: () => (
        <>
          Resolved in <div className="resolved-suffix">version</div>
        </>
      ),
      disableSortBy: true,
      accessor: "resolved_in_version",
      Cell: ({ cell }: ITableStringCellProps) => (
        <TextCell value={cell.value} />
      ),
    },
    {
      Header: "Hosts",
      disableSortBy: true,
      accessor: "hosts_count",
      Cell: ({ row }: IHostCountCellProps) => {
        const { hosts_count, id } = row.original;
        return (
          <>
            <TextCell value={hosts_count} />
            <ViewAllHostsLink
              queryParams={{ software_title_id: id }}
              responsive
              rowHover
              noLink
            />
          </>
        );
      },
    },
  ];

  if (!isPremiumTier) {
    return configs.filter(
      (header) => header.accessor !== "resolved_in_version"
    );
  }

  return configs;
};

export default generateColumnConfigs;