Refactor to make testing easier

src/pages/task/taskTabs/FileTableTab/GroupedFilesTable/index.tsx

@@ -15,11 +15,12 @@ import {
 } from "@leafygreen-ui/table/new";
 import { Subtitle } from "@leafygreen-ui/typography";
 import { StyledLink } from "components/styles";
-import { File } from "gql/generated/types";
+import { Unpacked } from "types/utils";
+import { GroupedFiles } from "../types";
 
-type GroupedFilesTableFile = Omit<File, "visibility">;
+type GroupedFilesFile = Unpacked<GroupedFiles["files"]>;
 interface GroupedFilesTableProps {
-  files: GroupedFilesTableFile[];
+  files: GroupedFilesFile[];
   taskName?: string;
 }
 const GroupedFilesTable: React.FC<GroupedFilesTableProps> = ({
@@ -28,7 +29,7 @@ const GroupedFilesTable: React.FC<GroupedFilesTableProps> = ({
 }) => {
   const tableContainerRef = useRef<HTMLDivElement>(null);
 
-  const columns = useMemo<Array<LGColumnDef<GroupedFilesTableFile>>>(
+  const columns = useMemo<Array<LGColumnDef<GroupedFilesFile>>>(
     () => [
       {
         accessorKey: "name",
@@ -44,7 +45,7 @@ const GroupedFilesTable: React.FC<GroupedFilesTableProps> = ({
     ],
     []
   );
-  const table = useLeafyGreenTable<GroupedFilesTableFile>({
+  const table = useLeafyGreenTable<GroupedFilesFile>({
     containerRef: tableContainerRef,
     data: files,
     columns,
@@ -59,7 +60,7 @@ const GroupedFilesTable: React.FC<GroupedFilesTableProps> = ({
         <TableHead>
           {table
             .getHeaderGroups()
-            .map((headerGroup: HeaderGroup<GroupedFilesTableFile>) => (
+            .map((headerGroup: HeaderGroup<GroupedFilesFile>) => (
               <HeaderRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
                   <HeaderCell key={header.id} header={header}>
@@ -73,7 +74,7 @@ const GroupedFilesTable: React.FC<GroupedFilesTableProps> = ({
             ))}
         </TableHead>
         <TableBody>
-          {rows.map((row: LeafyGreenTableRow<GroupedFilesTableFile>) => (
+          {rows.map((row: LeafyGreenTableRow<GroupedFilesFile>) => (
             <Row key={row.id} row={row}>
               {row.getVisibleCells().map((cell) => (
                 <Cell key={cell.id}>

src/pages/task/taskTabs/FileTableTab/index.tsx

@@ -8,6 +8,7 @@ import { useToastContext } from "context/toast";
 import { TaskFilesQuery, TaskFilesQueryVariables } from "gql/generated/types";
 import { GET_TASK_FILES } from "gql/queries";
 import GroupedFilesTable from "./GroupedFilesTable";
+import { filterGroupedFiles } from "./utils";
 
 interface FilesTableTabProps {
   taskId: string;
@@ -31,18 +32,7 @@ const FilesTableTab: React.FC<FilesTableTabProps> = ({ execution, taskId }) => {
   const { taskFiles } = data?.task ?? {};
 
   const { groupedFiles = [] } = taskFiles ?? {};
-  const filteredGroupedFiles = groupedFiles.reduce((acc, groupedFile) => {
-    const filteredFiles = groupedFile?.files?.filter((file) =>
-      file?.name?.toLowerCase().includes(search.toLowerCase())
-    );
-    if (filteredFiles?.length) {
-      acc.push({
-        ...groupedFile,
-        files: filteredFiles,
-      });
-    }
-    return acc;
-  }, [] as (typeof taskFiles)["groupedFiles"]);
+  const filteredGroupedFiles = filterGroupedFiles(groupedFiles, search);
 
   // We only want to show the file group name if there are multiple file groups.
   const hasMultipleFileGroups = groupedFiles.length > 1;

src/pages/task/taskTabs/FileTableTab/types.ts

@@ -0,0 +1,6 @@
+import { TaskFilesQuery } from "gql/generated/types";
+import { Unpacked } from "types/utils";
+
+export type GroupedFiles = Unpacked<
+  TaskFilesQuery["task"]["taskFiles"]["groupedFiles"]
+>;

src/pages/task/taskTabs/FileTableTab/utils.test.ts

@@ -0,0 +1,151 @@
+import { filterGroupedFiles } from "./utils";
+
+describe("filterGroupedFiles", () => {
+  it("should return an empty array if groupedFiles is empty", () => {
+    const groupedFiles = [];
+    const search = "";
+    const result = filterGroupedFiles(groupedFiles, search);
+    expect(result).toStrictEqual([]);
+  });
+  it("should return the original array if search is empty", () => {
+    const groupedFiles = [
+      {
+        taskName: "some_task_name",
+        files: [
+          {
+            name: "some_file_name",
+            link: "some_url",
+          },
+        ],
+      },
+    ];
+    const search = "";
+    const result = filterGroupedFiles(groupedFiles, search);
+    expect(result).toStrictEqual(groupedFiles);
+  });
+  it("should filter the array if search is not empty", () => {
+    const groupedFiles = [
+      {
+        taskName: "some_task_name",
+        files: [
+          {
+            name: "some_file_name",
+            link: "some_url",
+          },
+          {
+            name: "some_other_file_name",
+            link: "some_url",
+          },
+        ],
+      },
+    ];
+    const search = "some_file_name";
+    const result = filterGroupedFiles(groupedFiles, search);
+    expect(result).toStrictEqual([
+      {
+        taskName: "some_task_name",
+        files: [
+          {
+            name: "some_file_name",
+            link: "some_url",
+          },
+        ],
+      },
+    ]);
+  });
+  it("should filter across multiple groups", () => {
+    const groupedFiles = [
+      {
+        taskName: "some_task_name",
+        files: [
+          {
+            name: "some_file_name",
+            link: "some_url",
+          },
+          {
+            name: "some_other_file_name",
+            link: "some_url",
+          },
+        ],
+      },
+      {
+        taskName: "some_other_task_name",
+        files: [
+          {
+            name: "some_file_name",
+            link: "some_url",
+          },
+          {
+            name: "some_other_file_name",
+            link: "some_url",
+          },
+        ],
+      },
+    ];
+    const search = "some_file_name";
+    const result = filterGroupedFiles(groupedFiles, search);
+    expect(result).toStrictEqual([
+      {
+        taskName: "some_task_name",
+        files: [
+          {
+            name: "some_file_name",
+            link: "some_url",
+          },
+        ],
+      },
+      {
+        taskName: "some_other_task_name",
+        files: [
+          {
+            name: "some_file_name",
+            link: "some_url",
+          },
+        ],
+      },
+    ]);
+  });
+  it("should not return groups that have no matching files", () => {
+    const groupedFiles = [
+      {
+        taskName: "some_task_name",
+        files: [
+          {
+            name: "some_matching_file_name",
+            link: "some_url",
+          },
+          {
+            name: "some_other_file_name",
+            link: "some_url",
+          },
+        ],
+      },
+      {
+        taskName: "some_other_task_name",
+        files: [
+          {
+            name: "some_file_name",
+            link: "some_url",
+          },
+          {
+            name: "some_other_file_name",
+            link: "some_url",
+          },
+        ],
+      },
+    ];
+    const search = "some_matching_file_name";
+    const result = filterGroupedFiles(groupedFiles, search);
+    expect(result).toStrictEqual([
+      {
+        taskName: "some_task_name",
+        files: [
+          {
+            name: "some_matching_file_name",
+            link: "some_url",
+          },
+        ],
+      },
+    ]);
+  });
+});

src/pages/task/taskTabs/FileTableTab/utils.ts

@@ -0,0 +1,23 @@
+import type { GroupedFiles } from "./types";
+
+/**
+ * `filterGroupedFiles` filters the groupedFiles array from the TaskFilesQuery
+ * @param groupedFiles - the groupedFiles array from the TaskFilesQuery
+ * @param search - the search string
+ * @returns - a new array of groupedFiles that contain the search string
+ */
+const filterGroupedFiles = (groupedFiles: GroupedFiles[], search: string) =>
+  groupedFiles.reduce((acc, groupedFile) => {
+    const filteredFiles = groupedFile?.files?.filter((file) =>
+      file?.name?.toLowerCase().includes(search.toLowerCase())
+    );
+    if (filteredFiles?.length) {
+      acc.push({
+        ...groupedFile,
+        files: filteredFiles,
+      });
+    }
+    return acc;
+  }, [] as GroupedFiles[]);
+
+export { filterGroupedFiles };