DEVPROD-1975 Migrate TaskQueueTable to leafygreen table (#2199)

cypress/integration/task/task_queue_position.ts

@@ -10,7 +10,7 @@ describe("Task Queue Position", () => {
       .should("have.attr", "href")
       .and(
         "eq",
-        "/task-queue/archlinux-test/evergreen_lint_lint_service_patch_5e823e1f28baeaa22ae00823d83e03082cd148ab_5e4ff3abe3c3317e352062e4_20_02_21_15_13_48",
+        "/task-queue/archlinux-test?taskId=evergreen_lint_lint_service_patch_5e823e1f28baeaa22ae00823d83e03082cd148ab_5e4ff3abe3c3317e352062e4_20_02_21_15_13_48",
       );
   });
 

cypress/integration/taskQueue/route.ts

@@ -9,24 +9,16 @@ describe("Task Queue", () => {
 
   it("Uses distro param in url to query queue and renders table", () => {
     cy.visit("/task-queue/osx-108");
-
-    cy.get(".ant-table-row").should("have.length", 13);
-
-    cy.visit("/task-queue/debian71-test");
-
-    cy.get(".ant-table-row").should("have.length", 0);
+    cy.dataCy("task-queue-table").should("exist");
+    cy.contains("osx-108").should("exist");
   });
 
   it("Selecting a distro queries the queue for that distro", () => {
     cy.visit("/task-queue/debian71-test");
-
-    cy.get(".ant-table-row").should("have.length", 0);
-
+    cy.contains("No tasks found in queue").should("exist");
     cy.dataCy("distro-dropdown").click();
-
     cy.get("div").contains("osx-108").click();
-
-    cy.get(".ant-table-row").should("have.length", 13);
+    cy.dataCy("leafygreen-table-row").should("have.length", 13);
   });
 
   it("Renders link to host page filtered to that particular distro", () => {
@@ -38,35 +30,28 @@ describe("Task Queue", () => {
 
   it("Searching for a distro shows results that match search term", () => {
     cy.visit("/task-queue/debian71-test");
-
-    cy.dataCy("distro-dropdown").click();
+    cy.dataCy("distro-dropdown").should("have.attr", "aria-disabled", "false");
+    cy.dataCy("distro-dropdown").click({ force: true });
+    cy.dataCy("distro-dropdown-search-input").should("exist");
     cy.dataCy("distro-dropdown-search-input").type("osx");
     cy.dataCy("distro-dropdown-options").within(() => {
       cy.contains("debian71-test").should("not.exist");
       cy.contains("osx-108").should("exist");
     });
   });
-
-  it("Bogus distro url param values do not display any results", () => {
-    cy.visit("/task-queue/peace");
-    cy.get(".ant-table-row").should("have.length", 0);
-  });
-
   it("Scrolls to current task if taskId param in url", () => {
     cy.visit(
-      "/task-queue/osx-108/evergreen_lint_lint_service_patch_5e823e1f28baeaa22ae00823d83e03082cd148ab_5e4ff3abe3c3317e352062e4_20_02_21_15_13_48",
+      "/task-queue/osx-108?taskId=evergreen_lint_lint_service_patch_5e823e1f28baeaa22ae00823d83e03082cd148ab_5e4ff3abe3c3317e352062e4_20_02_21_15_13_48",
     );
     cy.dataCy("task-queue-table").should("exist");
-    cy.get(".ant-table-row-selected").should("exist");
-    cy.get(".ant-table-row-selected").should("contain.text", "13");
-
-    cy.contains("osx-108").should("not.be.visible");
-    cy.get(".ant-table-row-selected").should("be.visible");
+    cy.get("[data-selected='true']").should("exist");
+    cy.get("[data-selected='true']").should("have.length", 1);
+    cy.get("[data-selected='true']").should("be.visible");
   });
 
   it("Task links goes to Spruce for both patches and mainline commits", () => {
     cy.visit(
-      "/task-queue/osx-108/evergreen_lint_lint_service_patch_5e823e1f28baeaa22ae00823d83e03082cd148ab_5e4ff3abe3c3317e352062e4_20_02_21_15_13_48",
+      "/task-queue/osx-108?taskId=evergreen_lint_lint_service_patch_5e823e1f28baeaa22ae00823d83e03082cd148ab_5e4ff3abe3c3317e352062e4_20_02_21_15_13_48",
     );
 
     // patch

package.json

@@ -90,7 +90,7 @@
     "@leafygreen-ui/select": "11.1.1",
     "@leafygreen-ui/side-nav": "14.1.0",
     "@leafygreen-ui/skeleton-loader": "1.1.0",
-    "@leafygreen-ui/table": "12.3.0",
+    "@leafygreen-ui/table": "12.5.0",
     "@leafygreen-ui/tabs": "11.0.4",
     "@leafygreen-ui/text-area": "8.0.21",
     "@leafygreen-ui/text-input": "12.1.24",

src/components/Content/index.tsx

@@ -80,7 +80,6 @@ export const Content: React.FC = () => (
       <Route path={routes.taskHistory} element={<TaskHistory />} />
       <Route path={routes.taskQueue} element={<TaskQueue />}>
         <Route path=":distro" element={null} />
-        <Route path=":distro/:taskId" element={null} />
       </Route>
       <Route path={routes.userPatches} element={<UserPatches />} />
       <Route

src/components/SearchableDropdown/index.tsx

@@ -156,6 +156,7 @@ const SearchableDropdown = <T extends {}>({
           }
           onClose={resetSearch}
           ref={DropdownRef}
+          aria-disabled={disabled}
         >
           <TextInput
             data-cy={`${dataCy}-search-input`}

src/components/Table/BaseTable.tsx

@@ -1,6 +1,7 @@
 import { ForwardedRef, forwardRef } from "react";
 import styled from "@emotion/styled";
 import { css } from "@leafygreen-ui/emotion";
+import { palette } from "@leafygreen-ui/palette";
 import {
   Cell,
   ExpandedContent,
@@ -47,13 +48,17 @@ declare module "@tanstack/table-core" {
   }
 }
 
+const { blue } = palette;
+
 type SpruceTableProps = {
   "data-cy-row"?: string;
   "data-cy-table"?: string;
   emptyComponent?: React.ReactNode;
   loading?: boolean;
   /** estimated number of rows the table will have */
   loadingRows?: number;
+  /** rows that will have a blue tint to represent that they are selected */
+  selectedRowIndexes?: number[];
 };
 
 export const BaseTable = forwardRef(
@@ -64,6 +69,7 @@ export const BaseTable = forwardRef(
       emptyComponent,
       loading,
       loadingRows = 5,
+      selectedRowIndexes = [],
       table,
       ...args
     }: SpruceTableProps & TableProps<any>,
@@ -72,11 +78,10 @@ export const BaseTable = forwardRef(
     const { virtualRows } = table;
     const { rows } = table.getRowModel();
     const hasVirtualRows = virtualRows && virtualRows.length > 0;
-
     return (
       <>
         <StyledTable data-cy={dataCyTable} table={table} ref={ref} {...args}>
-          <TableHead>
+          <TableHead isSticky={hasVirtualRows}>
             {table.getHeaderGroups().map((headerGroup) => (
               <HeaderRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
@@ -140,11 +145,21 @@ export const BaseTable = forwardRef(
               ? virtualRows.map((vr) => {
                   const row = rows[vr.index];
                   return (
-                    <RenderableRow row={row} key={row.id} virtualRow={vr} />
+                    <RenderableRow
+                      row={row}
+                      key={row.id}
+                      virtualRow={vr}
+                      isSelected={selectedRowIndexes.includes(row.index)}
+                    />
                   );
                 })
               : rows.map((row) => (
-                  <RenderableRow row={row} key={row.id} virtualRow={null} />
+                  <RenderableRow
+                    row={row}
+                    key={row.id}
+                    virtualRow={null}
+                    isSelected={selectedRowIndexes.includes(row.index)}
+                  />
                 ))}
           </TableBody>
         </StyledTable>
@@ -159,11 +174,13 @@ export const BaseTable = forwardRef(
 const cellPaddingStyle = { paddingBottom: size.xxs, paddingTop: size.xxs };
 
 const RenderableRow = <T extends LGRowData>({
+  isSelected = false,
   row,
   virtualRow,
 }: {
   row: LeafyGreenTableRow<T>;
   virtualRow: VirtualItem;
+  isSelected?: boolean;
 }) => (
   <Row
     row={row}
@@ -172,7 +189,13 @@ const RenderableRow = <T extends LGRowData>({
       &[aria-hidden="false"] td > div {
         max-height: unset;
       }
+      ${isSelected &&
+      `
+        background-color: ${blue.light3} !important;
+        font-weight:bold;
+        `}
     `}
+    data-selected={isSelected}
     virtualRow={virtualRow}
   >
     {row.getVisibleCells().map((cell) => (