opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use the new Table component for the Templates table (#17838)

Browse Source 
<img width="1624" alt="Screenshot 2025-05-14 at 15 11 56"
src="https://github.com/user-attachments/assets/01fd5fe2-35d4-4fae-a668-68af2b9f9bd6"
/>
This commit is contained in:
Bruno Quaresma
2025-05-14 17:11:32 -03:00
committed by GitHub
parent 73251cf5b2
commit 35a04c7fb2
1 changed files with 41 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/TemplatesPage/TemplatesPageView.tsx
+41 -39
View File
@@ -2,12 +2,6 @@ import type { Interpolation, Theme } from "@emotion/react";
import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined";
import MuiButton from "@mui/material/Button";
import Skeleton from "@mui/material/Skeleton";
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 { hasError, isApiValidationError } from "api/errors";
import type { Template, TemplateExample } from "api/typesGenerated";
import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -33,6 +27,14 @@ import {
PageHeaderTitle,
} from "components/PageHeader/PageHeader";
import { Stack } from "components/Stack/Stack";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "components/Table/Table";
import {
TableLoaderSkeleton,
TableRowSkeleton,
@@ -231,41 +233,41 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
<ErrorAlert error={error} />
)}
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell width="35%">{Language.nameLabel}</TableCell>
<TableCell width="15%">
{showOrganizations ? "Organization" : Language.usedByLabel}
</TableCell>
<TableCell width="10%">{Language.buildTimeLabel}</TableCell>
<TableCell width="15%">{Language.lastUpdatedLabel}</TableCell>
<TableCell width="1%" />
</TableRow>
</TableHead>
<TableBody>
{isLoading && <TableLoader />}
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[35%]">{Language.nameLabel}</TableHead>
<TableHead className="w-[15%]">
{showOrganizations ? "Organization" : Language.usedByLabel}
</TableHead>
<TableHead className="w-[10%]">{Language.buildTimeLabel}</TableHead>
<TableHead className="w-[15%]">
{Language.lastUpdatedLabel}
</TableHead>
<TableHead className="w-[1%]" />
</TableRow>
</TableHeader>
<TableBody>
{isLoading && <TableLoader />}
{isEmpty ? (
<EmptyTemplates
canCreateTemplates={canCreateTemplates}
examples={examples ?? []}
isUsingFilter={filter.used}
{isEmpty ? (
<EmptyTemplates
canCreateTemplates={canCreateTemplates}
examples={examples ?? []}
isUsingFilter={filter.used}
/>
) : (
templates?.map((template) => (
<TemplateRow
key={template.id}
showOrganizations={showOrganizations}
template={template}
workspacePermissions={workspacePermissions}
/>
) : (
templates?.map((template) => (
<TemplateRow
key={template.id}
showOrganizations={showOrganizations}
template={template}
workspacePermissions={workspacePermissions}
/>
))
)}
</TableBody>
</Table>
</TableContainer>
))
)}
</TableBody>
</Table>
</Margins>
);
};