All files / react-app/src/features/dashboard/Lists/renderCells index.tsx

100% Statements 12/12
100% Branches 4/4
100% Functions 5/5
100% Lines 10/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81                5x 147x 6216x 2023x               5x 1308x               5x 23x 972x   971x                                                                                                
import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { Link } from "react-router";
import { Authority, CognitoUserAttributes, opensearch } from "shared-types";
import { formatDateToET, getAvailableActions } from "shared-utils";
 
import { DASHBOARD_ORIGIN, mapActionLabel, ORIGIN } from "@/utils";
 
export const renderCellDate = (key: keyof opensearch.main.Document) =>
  function Cell(data: opensearch.main.Document) {
    if (!data[key]) return null;
    return formatDateToET(data[key] as string, "MM/dd/yyyy", false);
  };
 
export type CellIdLinkProps = {
  id: string;
  authority: Authority | string;
};
 
export const CellDetailsLink = ({ id, authority }: CellIdLinkProps) => (
  <Link
    className="cursor-pointer text-blue-600 hover:underline"
    to={`/details/${encodeURIComponent(authority)}/${encodeURIComponent(id)}`}
  >
    {id}
  </Link>
);
 
export const renderCellActions = (user: CognitoUserAttributes | null) => {
  return function Cell(data: opensearch.main.Document) {
    if (!user) return null;
 
    const actions = getAvailableActions(user, data);
 
    return (
      <DropdownMenu.Root>
        <DropdownMenu.DropdownMenuTrigger
          disabled={!actions.length}
          aria-label="Available package actions"
          data-testid="available-actions"
          asChild
        >
          <button className="group ml-3" type="button">
            <EllipsisVerticalIcon
              aria-hidden
              className="w-8 text-blue-700 group-disabled:text-gray-500"
            />
          </button>
        </DropdownMenu.DropdownMenuTrigger>
        <DropdownMenu.Content
          className="flex flex-col bg-white rounded-md shadow-lg p-4 border"
          align="start"
        >
          {actions.map((action, idx) => (
            <DropdownMenu.Item
              key={`${idx}-${action}`}
              asChild
              aria-label={`${mapActionLabel(action)} for ${data.id}`}
            >
              <Link
                state={{
                  from: `${location.pathname}${location.search}`,
                }}
                to={{
                  pathname: `/actions/${action}/${data.authority}/${data.id}`,
                  search: new URLSearchParams({
                    [ORIGIN]: DASHBOARD_ORIGIN,
                  }).toString(),
                }}
                className="text-blue-500 flex select-none items-center rounded-sm px-2 py-2 text-sm hover:bg-accent"
              >
                {mapActionLabel(action)}
              </Link>
            </DropdownMenu.Item>
          ))}
        </DropdownMenu.Content>
      </DropdownMenu.Root>
    );
  };
};