Migrate new UI to Chakra v3 (#43523)

* Migrate to chakra v3 Fix react-select and tests Rename alert.tsx to Alert.tsx Rename menu.tsx to Menu.tsx Rename tag.tsx to Tag.tsx Rename tooltip.tsx to Tooltip.tsx Add licenses Add index to components/ui Simplify NavButton with new chakra triggers * Clean up default exports and tsx->ts filenames * Update airflow/ui/src/components/ui/index.ts Co-authored-by: Ryan Hamilton <ryan@ryanahamilton.com> * Fix styling from code suggestion --------- Co-authored-by: Ryan Hamilton <ryan@ryanahamilton.com>
apache · Nov 1, 2024 · bd74cf8 · bd74cf8
1 parent a2a0ef0
commit bd74cf8
Show file tree

Hide file tree

Showing 72 changed files with 3,498 additions and 2,250 deletions.
diff --git a/airflow/ui/package.json b/airflow/ui/package.json
@@ -17,15 +17,14 @@
   },
   "dependencies": {
     "@chakra-ui/anatomy": "^2.2.2",
-    "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/react": "^3.0.2",
     "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
     "@tanstack/react-query": "^5.52.1",
     "@tanstack/react-table": "^8.20.1",
     "axios": "^1.7.7",
-    "chakra-react-select": "^4.9.2",
+    "chakra-react-select": "6.0.0-next.2",
     "dayjs": "^1.11.13",
-    "framer-motion": "^11.3.29",
+    "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",

diff --git a/airflow/ui/pnpm-lock.yaml b/airflow/ui/pnpm-lock.yaml
diff --git a/airflow/ui/rules/typescript.js b/airflow/ui/rules/typescript.js
@@ -1804,7 +1804,10 @@ export const typescriptRules =
        * ```
        * @see [@typescript-eslint/strict-boolean-expressions](https://typescript-eslint.io/rules/strict-boolean-expressions/)
        */
-      [`${typescriptNamespace}/strict-boolean-expressions`]: ERROR,
+      [`${typescriptNamespace}/strict-boolean-expressions`]: [
+        ERROR,
+        { allowNullableBoolean: true },
+      ],
 
       /**
        * If you'll use switch, make sure to cover every possible value.

diff --git a/airflow/ui/src/components/DataTable/CardList.tsx b/airflow/ui/src/components/DataTable/CardList.tsx
@@ -31,28 +31,24 @@ export const CardList = <TData,>({
   cardDef,
   isLoading,
   table,
-}: DataTableProps<TData>) => {
-  const defaultGridProps = { column: { base: 1 }, spacing: 2 };
-
-  return (
-    <Box overflow="auto" width="100%">
-      <SimpleGrid {...{ ...defaultGridProps, ...cardDef.gridProps }}>
-        {table.getRowModel().rows.map((row) => (
-          <Box key={row.id}>
-            {Boolean(isLoading) &&
-              (cardDef.meta?.customSkeleton ?? (
-                <Skeleton
-                  data-testid="skeleton"
-                  display="inline-block"
-                  height={80}
-                  width="100%"
-                />
-              ))}
-            {!Boolean(isLoading) &&
-              flexRender(cardDef.card, { row: row.original })}
-          </Box>
-        ))}
-      </SimpleGrid>
-    </Box>
-  );
-};
+}: DataTableProps<TData>) => (
+  <Box overflow="auto" width="100%">
+    <SimpleGrid {...{ column: { base: 1 }, gap: 2, ...cardDef.gridProps }}>
+      {table.getRowModel().rows.map((row) => (
+        <Box key={row.id}>
+          {Boolean(isLoading) &&
+            (cardDef.meta?.customSkeleton ?? (
+              <Skeleton
+                data-testid="skeleton"
+                display="inline-block"
+                height={80}
+                width="100%"
+              />
+            ))}
+          {!Boolean(isLoading) &&
+            flexRender(cardDef.card, { row: row.original })}
+        </Box>
+      ))}
+    </SimpleGrid>
+  </Box>
+);
diff --git a/airflow/ui/src/components/DataTable/DataTable.test.tsx b/airflow/ui/src/components/DataTable/DataTable.test.tsx
@@ -22,6 +22,8 @@ import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 
+import { ChakraWrapper } from "src/utils/ChakraWrapper.tsx";
+
 import { DataTable } from "./DataTable.tsx";
 import type { CardDef } from "./types.ts";
 
@@ -52,6 +54,9 @@ describe("DataTable", () => {
         onStateChange={onStateChange}
         total={2}
       />,
+      {
+        wrapper: ChakraWrapper,
+      },
     );
 
     expect(screen.getByText("John Doe")).toBeInTheDocument();
@@ -67,10 +72,12 @@ describe("DataTable", () => {
         onStateChange={onStateChange}
         total={2}
       />,
+      {
+        wrapper: ChakraWrapper,
+      },
     );
 
-    expect(screen.getByText("<<")).toBeDisabled();
-    expect(screen.getByText("<")).toBeDisabled();
+    expect(screen.getByTestId("prev")).toBeDisabled();
   });
 
   it("disables next button when on last page", () => {
@@ -79,26 +86,32 @@ describe("DataTable", () => {
         columns={columns}
         data={data}
         initialState={{
-          pagination: { pageIndex: 1, pageSize: 10 },
+          pagination: { pageIndex: 0, pageSize: 10 },
           sorting: [],
         }}
         onStateChange={onStateChange}
         total={2}
       />,
+      {
+        wrapper: ChakraWrapper,
+      },
     );
 
-    expect(screen.getByText(">>")).toBeDisabled();
-    expect(screen.getByText(">")).toBeDisabled();
+    expect(screen.getByTestId("next")).toBeDisabled();
   });
 
   it("when isLoading renders skeleton columns", () => {
-    render(<DataTable columns={columns} data={data} isLoading />);
+    render(<DataTable columns={columns} data={data} isLoading />, {
+      wrapper: ChakraWrapper,
+    });
 
     expect(screen.getAllByTestId("skeleton")).toHaveLength(10);
   });
 
   it("still displays table if mode is card but there is no cardDef", () => {
-    render(<DataTable columns={columns} data={data} displayMode="card" />);
+    render(<DataTable columns={columns} data={data} displayMode="card" />, {
+      wrapper: ChakraWrapper,
+    });
 
     expect(screen.getByText("Name")).toBeInTheDocument();
   });
@@ -111,6 +124,9 @@ describe("DataTable", () => {
         data={data}
         displayMode="card"
       />,
+      {
+        wrapper: ChakraWrapper,
+      },
     );
 
     expect(screen.getByText("My name is John Doe.")).toBeInTheDocument();
@@ -126,6 +142,9 @@ describe("DataTable", () => {
         isLoading
         skeletonCount={5}
       />,
+      {
+        wrapper: ChakraWrapper,
+      },
     );
 
     expect(screen.getAllByTestId("skeleton")).toHaveLength(5);

diff --git a/airflow/ui/src/components/DataTable/DataTable.tsx b/airflow/ui/src/components/DataTable/DataTable.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Progress, Text } from "@chakra-ui/react";
+import { HStack, Text } from "@chakra-ui/react";
 import {
   getCoreRowModel,
   getExpandedRowModel,
@@ -30,9 +30,9 @@ import {
 } from "@tanstack/react-table";
 import React, { type ReactNode, useCallback, useRef } from "react";
 
+import { ProgressBar, Pagination } from "../ui";
 import { CardList } from "./CardList";
 import { TableList } from "./TableList";
-import { TablePaginator } from "./TablePaginator";
 import { createSkeletonMock } from "./skeleton";
 import type { CardDef, MetaColumn, TableState } from "./types";
 
@@ -122,8 +122,7 @@ export const DataTable = <TData,>({
 
   return (
     <>
-      <Progress
-        isIndeterminate
+      <ProgressBar
         size="xs"
         visibility={
           Boolean(isFetching) && !Boolean(isLoading) ? "visible" : "hidden"
@@ -137,7 +136,20 @@ export const DataTable = <TData,>({
       {display === "card" && cardDef !== undefined && (
         <CardList cardDef={cardDef} isLoading={isLoading} table={table} />
       )}
-      <TablePaginator table={table} />
+      <Pagination.Root
+        count={table.getRowCount()}
+        my={2}
+        onPageChange={(page) => table.setPageIndex(page.page - 1)}
+        page={table.getState().pagination.pageIndex + 1}
+        pageSize={table.getState().pagination.pageSize}
+        siblingCount={1}
+      >
+        <HStack>
+          <Pagination.PrevTrigger data-testid="prev" />
+          <Pagination.Items />
+          <Pagination.NextTrigger data-testid="next" />
+        </HStack>
+      </Pagination.Root>
     </>
   );
 };