MAT-7101: Add test case list checkboxes

src/components/testCaseLanding/common/TestCaseTable/TestCaseTable.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect, useMemo, HTMLProps } from "react";
 import tw from "twin.macro";
 import "styled-components/macro";
 import { Measure, TestCase } from "@madie/madie-models";
@@ -110,6 +110,34 @@
     }));
   };
 
+  function IndeterminateCheckbox({
+    indeterminate,
+    className = "",
+    onChange,
+    id,
+    ...rest
+  }: {
+    indeterminate?: boolean;
+  } & HTMLProps<HTMLInputElement>) {
+    const ref = React.useRef<HTMLInputElement>(null!);
+
+    React.useEffect(() => {
+      if (typeof indeterminate === "boolean") {
+        ref.current.indeterminate = !rest.checked && indeterminate;
+      }
+    }, [ref, indeterminate]);
+
+    return (
+      <input
+        type="checkbox"
+        ref={ref}
+        className={className + " cursor-pointer"}
+        onChange={onChange}
+        {...rest}
+      />
+    );
+  }
+
   type TCRow = {
     status: any;
     group: string;
@@ -130,6 +158,36 @@
   const columns = useMemo<ColumnDef<TCRow>[]>(() => {
     const columnDefs = [];
 
+    if (featureFlags?.TestCaseListButtons) {
+      columnDefs.push({
+        id: "select",
+        header: ({ table }) => (
+          <IndeterminateCheckbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomePageRowsSelected(),
+              onChange: table.getToggleAllPageRowsSelectedHandler(),
+            }}
+          />
+        ),
+        cell: ({ row }) => {
+          return (
+            <div className="px-1">
+              <IndeterminateCheckbox
+                {...{
+                  checked: row.getIsSelected(), //props.selectedIds[row.original.id],
+                  disabled: !row.getCanSelect(),
+                  indeterminate: row.getIsSomeSelected(),
+                  onChange: row.getToggleSelectedHandler(),
+                  id: row.original.id,
+                }}
+              />
+            </div>
+          );
+        },
+      });
+    }
+
     if (featureFlags?.TestCaseID) {
       columnDefs.push({
         header: "Case #",

src/types/madie-madie-util.d.ts

@@ -16,6 +16,7 @@ declare module "@madie/madie-util" {
     qdmHideJson: boolean;
     TestCaseListSearch: boolean;
     TestCaseID: boolean;
+    TestCaseListButtons: boolean;
   }
 
   export interface ServiceConfig {