DEVPROD-1230: Migrate Task Duration table to V12 table (#2139)

cypress/integration/version/task_duration.ts

@@ -8,15 +8,16 @@ describe("Task Duration Tab", () => {
       const filterText = "test-annotation";
       // Apply text filter.
       cy.dataCy("task-name-filter-popover").click();
-      cy.dataCy("input-filter").type(`${filterText}`).type("{enter}");
+      cy.dataCy("input-filter").type(`${filterText}{enter}`);
       cy.dataCy("task-duration-table-row").should("have.length", 1);
       cy.location("search").should(
         "include",
         `duration=DESC&page=0&taskName=${filterText}`
       );
       // Clear text filter.
       cy.dataCy("task-name-filter-popover").click();
-      cy.dataCy("input-filter").clear().type("{enter}");
+      cy.dataCy("input-filter").clear();
+      cy.dataCy("input-filter").type("{enter}");
       cy.location("search").should("include", `page=0`);
     });
 
@@ -46,15 +47,16 @@ describe("Task Duration Tab", () => {
       const filterText = "Lint";
       // Apply text filter.
       cy.dataCy("build-variant-filter-popover").click();
-      cy.dataCy("input-filter").type(`${filterText}`).type("{enter}");
+      cy.dataCy("input-filter").type(`${filterText}{enter}`);
       cy.dataCy("task-duration-table-row").should("have.length", 2);
       cy.location("search").should(
         "include",
         `duration=DESC&page=0&variant=${filterText}`
       );
       // Clear text filter.
       cy.dataCy("build-variant-filter-popover").click();
-      cy.dataCy("input-filter").clear().type("{enter}");
+      cy.dataCy("input-filter").clear();
+      cy.dataCy("input-filter").type("{enter}");
       cy.location("search").should("include", `page=0`);
     });
 
@@ -67,12 +69,7 @@ describe("Task Duration Tab", () => {
       cy.dataCy("task-duration-table-row")
         .first()
         .should("contain", longestTask);
-
-      // Apply new sort (DURATION ASC). The sort icon is clicked twice because LG assumes no
-      // default sorting.
-      cy.get(`[aria-label="sort"]`).click();
-      cy.location("search").should("include", "duration=DESC");
-      cy.get(`[aria-label="sort"]`).click();
+      cy.dataCy("duration-sort-icon").click();
       cy.location("search").should("include", "duration=ASC");
       const shortestTask = "generate-lint";
       cy.contains(shortestTask).should("be.visible");
@@ -83,11 +80,7 @@ describe("Task Duration Tab", () => {
 
     it("clearing all filters resets to the default sort", () => {
       cy.visit(TASK_DURATION_ROUTE);
-      // Apply new sort (DURATION ASC). The sort icon is clicked twice because LG assumes no
-      // default sorting.
-      cy.get(`[aria-label="sort"]`).click();
-      cy.location("search").should("include", "duration=DESC");
-      cy.get(`[aria-label="sort"]`).click();
+      cy.dataCy("duration-sort-icon").click();
       cy.location("search").should("include", "duration=ASC");
       cy.contains("Clear all filters").click();
       cy.location("search").should("include", "duration=DESC");
@@ -98,7 +91,7 @@ describe("Task Duration Tab", () => {
       const filterText = "this_does_not_exist";
 
       cy.dataCy("task-name-filter-popover").click();
-      cy.dataCy("input-filter").type(`${filterText}`).type("{enter}");
+      cy.dataCy("input-filter").type(`${filterText}{enter}`);
       cy.dataCy("task-duration-table-row").should("have.length", 0);
       cy.contains("No tasks found.").should("exist");
     });

package.json

@@ -88,8 +88,7 @@
     "@leafygreen-ui/select": "10.2.0",
     "@leafygreen-ui/side-nav": "14.0.3",
     "@leafygreen-ui/skeleton-loader": "1.1.0",
-    "@leafygreen-ui/table": "10.0.1",
-    "@leafygreen-ui/table/new": "npm:@leafygreen-ui/[email protected]",
+    "@leafygreen-ui/table": "12.1.3",
     "@leafygreen-ui/tabs": "11.0.4",
     "@leafygreen-ui/text-area": "8.0.4",
     "@leafygreen-ui/text-input": "12.1.0",

src/components/PageSizeSelector/usePageSizeSelector.ts

@@ -6,11 +6,11 @@ import { useQueryParams } from "hooks/useQueryParam";
  * @returns - a function that updates the page size query param
  */
 const usePageSizeSelector = () => {
-  const [, setQueryParams] = useQueryParams();
+  const [queryParams, setQueryParams] = useQueryParams();
   const setPageSize = (pageSize: number) => {
     const newPageSize = pageSize.toString();
     localStorage.setItem(RECENT_PAGE_SIZE_KEY, newPageSize);
-    setQueryParams({ limit: newPageSize, page: "0" });
+    setQueryParams({ ...queryParams, limit: newPageSize, page: "0" });
   };
   return setPageSize;
 };

src/components/Settings/EventLog/EventDiffTable.tsx

@@ -7,7 +7,7 @@ import {
   V10Cell as Cell,
   V11Adapter,
   V10HeaderRow as HeaderRow,
-} from "@leafygreen-ui/table/new";
+} from "@leafygreen-ui/table";
 import { fontFamilies } from "@leafygreen-ui/tokens";
 import { getEventDiffLines } from "./EventLogDiffs";
 import { Event, EventDiffLine, EventValue } from "./types";

src/components/Table/BaseTable.stories.tsx

@@ -1,5 +1,6 @@
 import { useRef } from "react";
-import { LGColumnDef, useLeafyGreenTable } from "@leafygreen-ui/table/new";
+import { LGColumnDef, useLeafyGreenTable } from "@leafygreen-ui/table";
+import { WordBreak } from "components/styles";
 import { CustomStoryObj, CustomMeta } from "test_utils/types";
 import { BaseTable } from "./BaseTable";
 
@@ -8,7 +9,7 @@ export default {
 } satisfies CustomMeta<typeof BaseTable>;
 
 export const Default: CustomStoryObj<typeof BaseTable> = {
-  render: (args) => <TemplateComponent {...args} data={fullArray} />,
+  render: (args) => <TemplateComponent {...args} data={defaultRows} />,
   args: {
     shouldAlternateRowColor: true,
     darkMode: false,
@@ -22,34 +23,83 @@ export const EmptyState: CustomStoryObj<typeof BaseTable> = {
     darkMode: false,
   },
 };
+
+export const NestedRows: CustomStoryObj<typeof BaseTable> = {
+  render: (args) => <TemplateComponent {...args} data={nestedRows} />,
+  args: {
+    shouldAlternateRowColor: true,
+    darkMode: false,
+  },
+};
+
+export const LongContent: CustomStoryObj<typeof BaseTable> = {
+  render: (args) => <TemplateComponent {...args} data={longContentRows} />,
+  args: {
+    shouldAlternateRowColor: true,
+    darkMode: false,
+  },
+};
+
 interface DataShape {
   name: string;
-  column1: string;
-  column2: string;
+  type: string;
+  size: string;
 }
-const fullArray: DataShape[] = Array.from({ length: 100 }, (_, i) => ({
+
+const defaultRows: DataShape[] = Array.from({ length: 100 }, (_, i) => ({
   name: `name ${i}`,
-  column1: `column1 ${i}`,
-  column2: `column2 ${i}`,
+  type: `type ${i}`,
+  size: `size ${i}`,
 }));
+
+const nestedRows: DataShape[] = Array.from({ length: 50 }, (_, i) => ({
+  name: `name ${i}`,
+  type: `type ${i}`,
+  size: `size ${i}`,
+  subRows: [
+    {
+      name: `nested name ${i}`,
+      type: `nested type ${i}`,
+      size: `nested size ${i}`,
+    },
+  ],
+}));
+
+const longContent = "long ".repeat(100);
+const longContentRows: DataShape[] = Array.from({ length: 3 }, (_, i) => ({
+  name: `${longContent} name ${i}`,
+  type: `${longContent} type ${i}`,
+  size: `${longContent} size ${i}`,
+  subRows: [
+    {
+      name: `${longContent} nested name ${i}`,
+      type: `${longContent} nested type ${i}`,
+      size: `${longContent} nested size ${i}`,
+    },
+  ],
+}));
+
 const columns: LGColumnDef<DataShape>[] = [
   {
     accessorKey: "name",
     header: "Name",
-    size: 60,
     enableSorting: true,
+    size: 60,
+    cell: ({ getValue }) => <Cell value={getValue() as string} />,
   },
   {
-    accessorKey: "column1",
-    header: "Column 1",
-    size: 60,
+    accessorKey: "type",
+    header: "Type",
     enableSorting: true,
+    size: 60,
+    cell: ({ getValue }) => <Cell value={getValue() as string} />,
   },
   {
-    accessorKey: "column2",
-    header: "Column 2",
-    size: 60,
+    accessorKey: "size",
+    header: "Size",
     enableSorting: true,
+    size: 60,
+    cell: ({ getValue }) => <Cell value={getValue() as string} />,
   },
 ];
 
@@ -68,3 +118,13 @@ const TemplateComponent: React.FC<
 
   return <BaseTable {...rest} table={table} />;
 };
+
+interface CellProps {
+  value: string;
+}
+
+const Cell: React.FC<CellProps> = ({ value }) => (
+  <div style={{ padding: "8px 0px" }}>
+    <WordBreak>{value}</WordBreak>
+  </div>
+);

src/components/Table/BaseTable.tsx

@@ -11,18 +11,22 @@ import {
   TableBody,
   type TableProps,
   TableHead,
-} from "@leafygreen-ui/table/new";
+} from "@leafygreen-ui/table";
 
 type SpruceTableProps = {
   "data-cy-row"?: string;
   "data-cy-table"?: string;
   emptyComponent?: React.ReactNode;
+  loading?: boolean;
+  loadingComponent?: React.ReactNode;
 };
 
 export const BaseTable = <T extends LGRowData>({
   "data-cy-row": dataCyRow,
   "data-cy-table": dataCyTable,
   emptyComponent,
+  loading,
+  loadingComponent,
   table,
   ...args
 }: SpruceTableProps & TableProps<T>) => (
@@ -37,6 +41,14 @@ export const BaseTable = <T extends LGRowData>({
                   header.column.columnDef.header,
                   header.getContext()
                 )}
+                {/* @ts-ignore-error */}
+                {header.column.columnDef?.meta?.filterComponent?.({
+                  column: header.column,
+                })}
+                {/* @ts-ignore-error */}
+                {header.column.columnDef?.meta?.sortComponent?.({
+                  column: header.column,
+                })}
               </HeaderCell>
             ))}
           </HeaderRow>
@@ -62,11 +74,37 @@ export const BaseTable = <T extends LGRowData>({
             {row.original.renderExpandedContent && (
               <ExpandedContent row={row} />
             )}
+            {row.subRows &&
+              row.subRows.map((subRow) => (
+                <Row
+                  key={subRow.id}
+                  row={subRow}
+                  className={css`
+                    &[aria-hidden="false"] td > div[data-state="entered"] {
+                      max-height: unset;
+                    }
+                  `}
+                >
+                  {subRow.getVisibleCells().map((cell) => (
+                    <Cell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </Cell>
+                  ))}
+                </Row>
+              ))}
           </Row>
         ))}
       </TableBody>
     </Table>
-    {table.getRowModel().rows.length === 0 &&
+    {!loading &&
+      table.getRowModel().rows.length === 0 &&
       (emptyComponent || "No data to display")}
+    {/* TODO: Re-evaluate loading state in DEVPROD-1967. */}
+    {loading &&
+      table.getRowModel().rows.length === 0 &&
+      (loadingComponent || "Loading...")}
   </>
 );