EVG-19973: Improve patch parameters modal

src/components/DisplayModal.tsx

@@ -1,30 +1,20 @@
 import styled from "@emotion/styled";
-import Modal, { ModalSize } from "@leafygreen-ui/modal";
+import Modal, { ModalProps } from "@leafygreen-ui/modal";
 import { Body, BodyProps, H3 } from "@leafygreen-ui/typography";
 import { size as tokenSize, zIndex } from "constants/tokens";
 
-export interface DisplayModalProps {
-  "data-cy"?: string;
-  open?: boolean;
-  setOpen?: (
-    open: boolean
-  ) => void | React.Dispatch<React.SetStateAction<boolean>>;
-  size?: ModalSize;
+type DisplayModalProps = Omit<ModalProps, "title"> & {
   title?: React.ReactNode | string;
-  children: React.ReactNode;
   subtitle?: string;
-}
+};
 
 export const DisplayModal: React.FC<DisplayModalProps> = ({
   children,
-  "data-cy": dataCy,
-  open,
-  setOpen,
-  size,
   subtitle,
   title,
+  ...rest
 }) => (
-  <StyledModal data-cy={dataCy} open={open} setOpen={setOpen} size={size}>
+  <StyledModal {...rest}>
     {title && <H3 data-cy="modal-title">{title}</H3>}
     {subtitle && (
       <StyledSubtitle data-cy="modal-subtitle">{subtitle}</StyledSubtitle>

src/pages/version/ParametersModal.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen, userEvent } from "test_utils";
+import { ParametersModal } from "./ParametersModal";
+
+const parameters = [
+  { key: "Key 1", value: "Value 1" },
+  { key: "Key 2", value: "Value 2" },
+];
+
+describe("parameters modal", () => {
+  it("modal is closed by default", () => {
+    render(<ParametersModal parameters={parameters} />);
+    expect(screen.queryByDataCy("parameters-modal")).toBeNull();
+  });
+
+  it("link does not render if there are no parameters", () => {
+    render(<ParametersModal parameters={[]} />);
+    expect(screen.queryByDataCy("parameters-link")).toBeNull();
+  });
+
+  it("can click the link to open the modal and view parameters", async () => {
+    const user = userEvent.setup();
+    render(<ParametersModal parameters={parameters} />);
+    await user.click(screen.getByDataCy("parameters-link"));
+    await screen.findByDataCy("parameters-modal");
+    expect(screen.getByText(parameters[0].key)).toBeInTheDocument();
+    expect(screen.getByText(parameters[0].value)).toBeInTheDocument();
+    expect(screen.getByText(parameters[1].key)).toBeInTheDocument();
+    expect(screen.getByText(parameters[1].value)).toBeInTheDocument();
+  });
+});

src/pages/version/ParametersModal.tsx

@@ -1,10 +1,9 @@
-import { useState } from "react";
-import styled from "@emotion/styled";
-import Badge from "@leafygreen-ui/badge";
+import { useRef, useState } from "react";
+import { useLeafyGreenTable, LGColumnDef } from "@leafygreen-ui/table/new";
 import { DisplayModal } from "components/DisplayModal";
 import { MetadataItem } from "components/MetadataCard";
 import { StyledLink } from "components/styles";
-import { size } from "constants/tokens";
+import { BaseTable } from "components/Table/BaseTable";
 import { Parameter } from "gql/generated/types";
 
 interface ParametersProps {
@@ -13,6 +12,15 @@ interface ParametersProps {
 
 export const ParametersModal: React.FC<ParametersProps> = ({ parameters }) => {
   const [showModal, setShowModal] = useState<boolean>(false);
+
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+
+  const table = useLeafyGreenTable<Parameter>({
+    containerRef: tableContainerRef,
+    data: parameters,
+    columns,
+  });
+
   return (
     <>
       {parameters !== undefined && parameters.length > 0 && (
@@ -26,23 +34,27 @@ export const ParametersModal: React.FC<ParametersProps> = ({ parameters }) => {
         </MetadataItem>
       )}
       <DisplayModal
+        data-cy="parameters-modal"
         open={showModal}
         setOpen={setShowModal}
+        size="large"
         title="Patch Parameters"
-        data-cy="parameters-modal"
       >
-        {parameters?.map((param) => (
-          <StyledBadge key={`param_${param.key}`}>
-            {param.key}: {param.value}
-          </StyledBadge>
-        ))}
+        <BaseTable table={table} />
       </DisplayModal>
     </>
   );
 };
 
-const StyledBadge = styled(Badge)`
-  :not(:last-of-type) {
-    margin-right: ${size.s};
-  }
-`;
+const columns: LGColumnDef<Parameter>[] = [
+  {
+    accessorKey: "key",
+    header: "Key",
+    cell: (value) => value.getValue(),
+  },
+  {
+    accessorKey: "value",
+    header: "Value",
+    cell: (value) => value.getValue(),
+  },
+];