Skip to content

Commit

Permalink
First pass at migrating to chakra v3
Browse files Browse the repository at this point in the history
  • Loading branch information
@bbovenzi
bbovenzi committed Oct 30, 2024
1 parent dc59212 commit 9073063
Show file tree
Hide file tree
Showing 62 changed files with 2,903 additions and 2,268 deletions.
7 changes: 3 additions & 4 deletions airflow/ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3,127 changes: 1,626 additions & 1,501 deletions airflow/ui/pnpm-lock.yaml
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion airflow/ui/rules/typescript.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1804,7 +1804,7 @@ 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.
Expand Down
46 changes: 21 additions & 25 deletions airflow/ui/src/components/DataTable/CardList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
23 changes: 18 additions & 5 deletions airflow/ui/src/components/DataTable/DataTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -30,9 +30,10 @@ import {
} from "@tanstack/react-table";
import React, { type ReactNode, useCallback, useRef } from "react";

import Pagination from "../ui/Pagination";
import { ProgressBar } from "../ui/Progress";
import { CardList } from "./CardList";
import { TableList } from "./TableList";
import { TablePaginator } from "./TablePaginator";
import { createSkeletonMock } from "./skeleton";
import type { CardDef, MetaColumn, TableState } from "./types";

Expand Down Expand Up @@ -122,8 +123,7 @@ export const DataTable = <TData,>({

return (
<>
<Progress
isIndeterminate
<ProgressBar
size="xs"
visibility={
Boolean(isFetching) && !Boolean(isLoading) ? "visible" : "hidden"
Expand All @@ -137,7 +137,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 />
<Pagination.Items />
<Pagination.NextTrigger />
</HStack>
</Pagination.Root>
</>
);
};
174 changes: 75 additions & 99 deletions airflow/ui/src/components/DataTable/TableList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import {
Button,
Table as ChakraTable,
TableContainer,
Tbody,
Td,
Th,
Thead,
Tr,
} from "@chakra-ui/react";
import { Button, Table } from "@chakra-ui/react";
import {
flexRender,
type Row,
Expand All @@ -49,100 +40,85 @@ export const TableList = <TData,>({
renderSubComponent,
table,
}: DataTableProps<TData>) => (
<TableContainer maxH="calc(100vh - 10rem)" overflowY="auto">
<ChakraTable colorScheme="blue">
<Thead bg="chakra-body-bg" position="sticky" top={0} zIndex={1}>
{table.getHeaderGroups().map((headerGroup) => (
<Tr key={headerGroup.id}>
{headerGroup.headers.map(
({ colSpan, column, getContext, id, isPlaceholder }) => {
const sort = column.getIsSorted();
const canSort = column.getCanSort();
const text = flexRender(column.columnDef.header, getContext());

let rightIcon;
<Table.Root maxH="calc(100vh - 10rem)" overflowY="auto" striped>
<Table.Header bg="chakra-body-bg" position="sticky" top={0} zIndex={1}>
{table.getHeaderGroups().map((headerGroup) => (
<Table.Row key={headerGroup.id}>
{headerGroup.headers.map(
({ colSpan, column, getContext, id, isPlaceholder }) => {
const sort = column.getIsSorted();
const canSort = column.getCanSort();
const text = flexRender(column.columnDef.header, getContext());

if (canSort) {
if (sort === "desc") {
rightIcon = (
<TiArrowSortedDown
aria-label="sorted descending"
size="1em"
style={{ display: "inline" }}
/>
);
} else if (sort === "asc") {
rightIcon = (
<TiArrowSortedUp
aria-label="sorted ascending"
size="1em"
style={{ display: "inline" }}
/>
);
} else {
rightIcon = (
<TiArrowUnsorted
aria-label="unsorted"
size="1em"
style={{ display: "inline" }}
/>
);
}
let rightIcon;

return (
<Th colSpan={colSpan} key={id} whiteSpace="nowrap">
{isPlaceholder ? undefined : (
<Button
aria-label="sort"
fontSize="inherit"
fontWeight="inherit"
isDisabled={!canSort}
minWidth={0}
onClick={column.getToggleSortingHandler()}
padding={0}
rightIcon={rightIcon}
textTransform="inherit"
variant="unstyled"
>
{text}
</Button>
)}
</Th>
if (canSort) {
if (sort === "desc") {
rightIcon = (
<TiArrowSortedDown aria-label="sorted descending" />
);
} else if (sort === "asc") {
rightIcon = <TiArrowSortedUp aria-label="sorted ascending" />;
} else {
rightIcon = <TiArrowUnsorted aria-label="unsorted" />;
}

return (
<Th colSpan={colSpan} key={id} whiteSpace="nowrap">
{isPlaceholder ? undefined : text}
</Th>
<Table.ColumnHeader
colSpan={colSpan}
key={id}
whiteSpace="nowrap"
>
{isPlaceholder ? undefined : (
<Button
aria-label="sort"
disabled={!canSort}
onClick={column.getToggleSortingHandler()}
variant="plain"
>
{text}
{rightIcon}
</Button>
)}
</Table.ColumnHeader>
);
},
)}
</Tr>
))}
</Thead>
<Tbody>
{table.getRowModel().rows.map((row) => (
<Fragment key={row.id}>
<Tr>
{/* first row is a normal row */}
{row.getVisibleCells().map((cell) => (
<Td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</Td>
))}
</Tr>
{row.getIsExpanded() && (
<Tr>
{/* 2nd row is a custom 1 cell row */}
<Td colSpan={row.getVisibleCells().length}>
{renderSubComponent?.({ row })}
</Td>
</Tr>
)}
</Fragment>
))}
</Tbody>
</ChakraTable>
</TableContainer>
}

return (
<Table.ColumnHeader
colSpan={colSpan}
key={id}
whiteSpace="nowrap"
>
{isPlaceholder ? undefined : text}
</Table.ColumnHeader>
);
},
)}
</Table.Row>
))}
</Table.Header>
<Table.Body>
{table.getRowModel().rows.map((row) => (
<Fragment key={row.id}>
<Table.Row>
{/* first row is a normal row */}
{row.getVisibleCells().map((cell) => (
<Table.Cell key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</Table.Cell>
))}
</Table.Row>
{row.getIsExpanded() && (
<Table.Row>
{/* 2nd row is a custom 1 cell row */}
<Table.Cell colSpan={row.getVisibleCells().length}>
{renderSubComponent?.({ row })}
</Table.Cell>
</Table.Row>
)}
</Fragment>
))}
</Table.Body>
</Table.Root>
);
Loading

0 comments on commit 9073063

Please sign in to comment.