Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

chore: replace MUI tables#20201

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
BrunoQuaresma wants to merge1 commit intomain
base:main
Choose a base branch
Loading
frombq/replace-table
Open
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletionsbiome.jsonc
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -52,6 +52,7 @@
"@mui/material/Typography": "Use native HTML elements instead. Eg: <span>, <p>, <h1>, etc.",
"@mui/material/Box": "Use a <div> instead.",
"@mui/material/styles": "Import from @emotion/react instead.",
"@mui/material/Table*": "Import from components/Table/Table instead.",
"lodash": "Use lodash/<name> instead."
}
}
Expand Down
2 changes: 1 addition & 1 deletionsite/src/components/Table/Table.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -47,7 +47,7 @@ export const TableBody = React.forwardRef<
/>
));

const_TableFooter = React.forwardRef<
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

how did this end up unused?

exportconstTableFooter = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
Expand Down
16 changes: 6 additions & 10 deletionssite/src/components/TableEmpty/TableEmpty.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableContainer from "@mui/material/TableContainer";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { CodeExample } from "components/CodeExample/CodeExample";
import { Table, TableBody } from "components/Table/Table";
import { TableEmpty } from "./TableEmpty";

const meta: Meta<typeof TableEmpty> = {
Expand All@@ -13,13 +11,11 @@ const meta: Meta<typeof TableEmpty> = {
},
decorators: [
(Story) => (
<TableContainer>
<Table>
<TableBody>
<Story />
</TableBody>
</Table>
</TableContainer>
<Table>
<TableBody>
<Story />
</TableBody>
</Table>
),
],
};
Expand Down
3 changes: 1 addition & 2 deletionssite/src/components/TableEmpty/TableEmpty.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow";
import {
EmptyState,
type EmptyStateProps,
} from "components/EmptyState/EmptyState";
import { TableCell, TableRow } from "components/Table/Table";
import type { FC } from "react";

type TableEmptyProps = EmptyStateProps;
Expand Down
16 changes: 6 additions & 10 deletionssite/src/components/TableLoader/TableLoader.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableContainer from "@mui/material/TableContainer";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { Table, TableBody } from "components/Table/Table";
import { TableLoader } from "./TableLoader";

const meta: Meta<typeof TableLoader> = {
title: "components/TableLoader",
component: TableLoader,
decorators: [
(Story) => (
<TableContainer>
<Table>
<TableBody>
<Story />
</TableBody>
</Table>
</TableContainer>
<Table>
<TableBody>
<Story />
</TableBody>
</Table>
),
],
};
Expand Down
13 changes: 9 additions & 4 deletionssite/src/components/TableLoader/TableLoader.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
import TableCell from "@mui/material/TableCell";
import TableRow, { type TableRowProps } from "@mui/material/TableRow";
import { cloneElement, type FC, isValidElement, type ReactNode } from "react";
import { TableCell, TableRow } from "components/Table/Table";
import {
type ComponentProps,
cloneElement,
type FC,
isValidElement,
type ReactNode,
} from "react";
import { Loader } from "../Loader/Loader";

export const TableLoader: FC = () => {
Expand DownExpand Up@@ -36,7 +41,7 @@ export const TableLoaderSkeleton: FC<TableLoaderSkeletonProps> = ({
);
};

export const TableRowSkeleton: FC<TableRowProps> = ({
export const TableRowSkeleton: FC<ComponentProps<typeof TableRow>> = ({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

I wish this was just an exported type likeTableRowProps that we could use.ComponentProps always feels like a clever hack to me.

children,
...rowProps
}) => {
Expand Down
3 changes: 1 addition & 2 deletionssite/src/components/Timeline/TimelineDateRow.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import{css,useTheme}from"@emotion/react";
importTableCellfrom"@mui/material/TableCell";
importTableRowfrom"@mui/material/TableRow";
import{TableCell,TableRow}from"components/Table/Table";
importtype{FC}from"react";
import{createDisplayDate}from"./utils";

Expand Down
6 changes: 3 additions & 3 deletionssite/src/components/Timeline/TimelineEntry.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
importTableRow,{typeTableRowProps}from"@mui/material/TableRow";
import{forwardRef}from"react";
import{TableRow}from"components/Table/Table";
import{typeComponentProps,forwardRef}from"react";
import{cn}from"utils/cn";

interfaceTimelineEntryPropsextendsTableRowProps{
interfaceTimelineEntryPropsextendsComponentProps<typeofTableRow>{
clickable?:boolean;
}

Expand Down
35 changes: 17 additions & 18 deletionssite/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,32 +8,31 @@ import {
MockAuditLogWithWorkspaceBuild,
MockUserOwner,
} from "testHelpers/entities";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import type { Meta, StoryObj } from "@storybook/react-vite";
import {
Table,
TableBody,
TableCell,
TableHead,
TableRow,
} from "components/Table/Table";
import { AuditLogRow } from "./AuditLogRow";

const meta: Meta<typeof AuditLogRow> = {
title: "pages/AuditPage/AuditLogRow",
component: AuditLogRow,
decorators: [
(Story) => (
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell style={{ paddingLeft: 32 }}>Logs</TableCell>
</TableRow>
</TableHead>
<TableBody>
<Story />
</TableBody>
</Table>
</TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell style={{ paddingLeft: 32 }}>Logs</TableCell>
</TableRow>
</TableHead>
<TableBody>
<Story />
</TableBody>
</Table>
),
],
};
Expand Down
2 changes: 1 addition & 1 deletionsite/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
import type { CSSObject, Interpolation, Theme } from "@emotion/react";
import Collapse from "@mui/material/Collapse";
import Link from "@mui/material/Link";
import TableCell from "@mui/material/TableCell";
import Tooltip from "@mui/material/Tooltip";
import type { AuditLog, BuildReason } from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { Stack } from "components/Stack/Stack";
import { StatusPill } from "components/StatusPill/StatusPill";
import { TableCell } from "components/Table/Table";
import { TimelineEntry } from "components/Timeline/TimelineEntry";
import { InfoIcon, NetworkIcon } from "lucide-react";
import { type FC, useState } from "react";
Expand Down
108 changes: 51 additions & 57 deletionssite/src/pages/AuditPage/AuditPageView.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableRow from "@mui/material/TableRow";
import type { AuditLog } from "api/typesGenerated";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { EmptyState } from "components/EmptyState/EmptyState";
Expand All@@ -18,6 +13,7 @@ import {
} from "components/PaginationWidget/PaginationContainer";
import { Paywall } from "components/Paywall/Paywall";
import { Stack } from "components/Stack/Stack";
import { Table, TableBody, TableCell, TableRow } from "components/Table/Table";
import { TableLoader } from "components/TableLoader/TableLoader";
import { Timeline } from "components/Timeline/Timeline";
import type { ComponentProps, FC } from "react";
Expand DownExpand Up@@ -76,62 +72,60 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
query={paginationResult}
paginationUnitLabel="logs"
>
<TableContainer>
<Table>
<TableBody>
<ChooseOne>
{/* Error condition should just show an empty table. */}
<Cond condition={Boolean(error)}>
<TableRow>
<TableCell colSpan={999}>
<EmptyState message="An error occurred while loading audit logs" />
</TableCell>
</TableRow>
</Cond>
<Table>
<TableBody>
<ChooseOne>
{/* Error condition should just show an empty table. */}
<Cond condition={Boolean(error)}>
<TableRow>
<TableCell colSpan={999}>
<EmptyState message="An error occurred while loading audit logs" />
</TableCell>
</TableRow>
</Cond>

<Cond condition={isLoading}>
<TableLoader />
</Cond>
<Cond condition={isLoading}>
<TableLoader />
</Cond>

<Cond condition={isEmpty}>
<ChooseOne>
<Cond condition={isNonInitialPage}>
<TableRow>
<TableCell colSpan={999}>
<EmptyState message="No audit logs available on this page" />
</TableCell>
</TableRow>
</Cond>
<Cond condition={isEmpty}>
<ChooseOne>
<Cond condition={isNonInitialPage}>
<TableRow>
<TableCell colSpan={999}>
<EmptyState message="No audit logs available on this page" />
</TableCell>
</TableRow>
</Cond>

<Cond>
<TableRow>
<TableCell colSpan={999}>
<EmptyState message="No audit logs available" />
</TableCell>
</TableRow>
</Cond>
</ChooseOne>
</Cond>
<Cond>
<TableRow>
<TableCell colSpan={999}>
<EmptyState message="No audit logs available" />
</TableCell>
</TableRow>
</Cond>
</ChooseOne>
</Cond>

<Cond>
{auditLogs && (
<Timeline
items={auditLogs}
getDate={(log) => new Date(log.time)}
row={(log) => (
<AuditLogRow
key={log.id}
auditLog={log}
showOrgDetails={showOrgDetails}
/>
)}
/>
)}
</Cond>
</ChooseOne>
</TableBody>
</Table>
</TableContainer>
<Cond>
{auditLogs && (
<Timeline
items={auditLogs}
getDate={(log) => new Date(log.time)}
row={(log) => (
<AuditLogRow
key={log.id}
auditLog={log}
showOrgDetails={showOrgDetails}
/>
)}
/>
)}
</Cond>
</ChooseOne>
</TableBody>
</Table>
</PaginationContainer>
</Cond>

Expand Down
Loading
Loading
[8]ページ先頭
©2009-2025 Movatter.jp