From 6ca1da6cc1bb7eb97298b6a8d162d392312a85d5 Mon Sep 17 00:00:00 2001
From: Ethan Kaplan <ethan.kaplan@semanticbits.com>
Date: Thu, 21 Nov 2024 10:31:21 -0800
Subject: [PATCH] MAT-7101 Add test case list checkboxes

---
 .../common/TestCaseTable/TestCaseTable.tsx    | 60 ++++++++++++++++++-
 src/types/madie-madie-util.d.ts               |  1 +
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/src/components/testCaseLanding/common/TestCaseTable/TestCaseTable.tsx b/src/components/testCaseLanding/common/TestCaseTable/TestCaseTable.tsx
index 3c4be8b04..38e4c7d36 100644
--- a/src/components/testCaseLanding/common/TestCaseTable/TestCaseTable.tsx
+++ b/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 @@ const TestCaseTable = (props: TestCaseTableProps) => {
     }));
   };
 
+  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 TestCaseTable = (props: TestCaseTableProps) => {
   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 #",
diff --git a/src/types/madie-madie-util.d.ts b/src/types/madie-madie-util.d.ts
index 6a65ce959..51b33fb69 100644
--- a/src/types/madie-madie-util.d.ts
+++ b/src/types/madie-madie-util.d.ts
@@ -17,6 +17,7 @@ declare module "@madie/madie-util" {
     ShiftTestCasesDates: boolean;
     TestCaseListSearch: boolean;
     TestCaseID: boolean;
+    TestCaseListButtons: boolean;
   }
 
   export interface ServiceConfig {