diff --git a/site/src/hooks/useClickableTableRow.ts b/site/src/hooks/useClickableTableRow.ts index 1967762aa24dc..5f10c637b8de3 100644 --- a/site/src/hooks/useClickableTableRow.ts +++ b/site/src/hooks/useClickableTableRow.ts @@ -13,9 +13,9 @@ * It might not make sense to test this hook until the underlying design * problems are fixed. */ -import { type CSSObject, useTheme } from "@emotion/react"; import type { TableRowProps } from "@mui/material/TableRow"; import type { MouseEventHandler } from "react"; +import { cn } from "utils/cn"; import { type ClickableAriaRole, type UseClickableResult, @@ -26,7 +26,7 @@ type UseClickableTableRowResult< TRole extends ClickableAriaRole = ClickableAriaRole, > = UseClickableResult & TableRowProps & { - css: CSSObject; + className: string; hover: true; onAuxClick: MouseEventHandler; }; @@ -54,23 +54,13 @@ export const useClickableTableRow = < onAuxClick: externalOnAuxClick, }: UseClickableTableRowConfig): UseClickableTableRowResult => { const clickableProps = useClickable(onClick, (role ?? "button") as TRole); - const theme = useTheme(); return { ...clickableProps, - css: { - cursor: "pointer", - - "&:focus": { - outline: `1px solid ${theme.palette.primary.main}`, - outlineOffset: -1, - }, - - "&:last-of-type": { - borderBottomLeftRadius: 8, - borderBottomRightRadius: 8, - }, - }, + className: cn([ + "cursor-pointer hover:outline focus:outline outline-1 -outline-offset-1 outline-border-hover", + "first:rounded-t-md last:rounded-b-md", + ]), hover: true, onDoubleClick, onAuxClick: (event) => { diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 3a4e5a7812f09..30b1cd5093185 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -102,7 +102,7 @@ const TemplateRow: FC = ({ ); const navigate = useNavigate(); - const { css: clickableCss, ...clickableRow } = useClickableTableRow({ + const clickableRow = useClickableTableRow({ onClick: () => navigate(templatePageLink), }); @@ -111,7 +111,7 @@ const TemplateRow: FC = ({ key={template.id} data-testid={`template-${template.id}`} {...clickableRow} - css={[clickableCss, styles.tableRow]} + css={styles.tableRow} > = ({ lastUsedAt }) => { - const theme = useTheme(); - const [circle, message] = useTime(() => { const t = dayjs(lastUsedAt); const now = dayjs(); @@ -40,7 +37,7 @@ export const LastUsed: FC = ({ lastUsedAt }) => { return ( = ({ templates, canCreateTemplate, }) => { - const theme = useTheme(); const dashboard = useDashboard(); const workspaceIDToAppByStatus = useMemo(() => { return ( @@ -96,213 +96,189 @@ export const WorkspacesTable: FC = ({ ); return ( - - - - - -
- {canCheckWorkspaces && ( - { - if (!workspaces) { - return; - } +
+ + + +
+ {canCheckWorkspaces && ( + { + if (!workspaces) { + return; + } - if (!checked) { - onCheckChange([]); - } else { - onCheckChange(workspaces); - } - }} - /> - )} - Name -
+ if (!checked) { + onCheckChange([]); + } else { + onCheckChange(workspaces); + } + }} + /> + )} + Name + +
+ {hasAppStatus && Activity} + Template + Last used + Status + +
+
+ + {!workspaces && } + {workspaces && workspaces.length === 0 && ( + + + - {hasAppStatus && Activity} - Template - Last used - Status - - - - {!workspaces && ( - - )} - {workspaces && workspaces.length === 0 && ( - - )} - {workspaces?.map((workspace) => { - const checked = checkedWorkspaces.some( - (w) => w.id === workspace.id, - ); - const activeOrg = dashboard.organizations.find( - (o) => o.id === workspace.organization_id, - ); + )} + {workspaces?.map((workspace) => { + const checked = checkedWorkspaces.some((w) => w.id === workspace.id); + const activeOrg = dashboard.organizations.find( + (o) => o.id === workspace.organization_id, + ); - return ( - - -
- {canCheckWorkspaces && ( - { - e.stopPropagation(); - }} - onChange={(e) => { - if (e.currentTarget.checked) { - onCheckChange([...checkedWorkspaces, workspace]); - } else { - onCheckChange( - checkedWorkspaces.filter( - (w) => w.id !== workspace.id, - ), - ); - } - }} - /> - )} - - {workspace.name} - {workspace.favorite && ( - - )} - {workspace.outdated && ( - { - onUpdateWorkspace(workspace); - }} - /> - )} - - } - subtitle={ -
- Owner: - {workspace.owner_name} -
- } - avatar={ - - } - /> -
-
- - {hasAppStatus && ( - - - - )} - - -
{getDisplayWorkspaceTemplateName(workspace)}
- - {dashboard.showOrganizations && ( -
+ +
+ {canCheckWorkspaces && ( + { + e.stopPropagation(); + }} + onChange={(e) => { + if (e.currentTarget.checked) { + onCheckChange([...checkedWorkspaces, workspace]); + } else { + onCheckChange( + checkedWorkspaces.filter( + (w) => w.id !== workspace.id, + ), + ); + } }} - > - Organization: - {activeOrg?.display_name || workspace.organization_name} -
+ /> )} -
+ + {workspace.name} + {workspace.favorite && } + {workspace.outdated && ( + { + onUpdateWorkspace(workspace); + }} + /> + )} + + } + subtitle={ +
+ Owner: + {workspace.owner_name} +
+ } + avatar={ + + } + /> +
+
+ {hasAppStatus && ( - + + )} - -
- - {workspace.latest_build.status === "running" && - !workspace.health.healthy && ( - - )} - {workspace.dormant_at && ( - + + + Organization:{" "} + {activeOrg?.display_name || workspace.organization_name} + + ) + } + avatar={ + + } + /> + + + + + + + +
+ + {workspace.latest_build.status === "running" && + !workspace.health.healthy && ( + )} -
-
+ {workspace.dormant_at && ( + + )} +
+
- -
- -
-
-
- ); - })} -
-
-
+ +
+ +
+
+ + ); + })} + + ); }; @@ -318,7 +294,6 @@ const WorkspacesRow: FC = ({ checked, }) => { const navigate = useNavigate(); - const theme = useTheme(); const workspacePageLink = `/@${workspace.owner_name}/${workspace.name}`; const openLinkInNewTab = () => window.open(workspacePageLink, "_blank"); @@ -339,20 +314,14 @@ const WorkspacesRow: FC = ({ }, }); - const bgColor = checked ? theme.palette.action.hover : undefined; - return ( {children} @@ -367,25 +336,23 @@ const TableLoader: FC = ({ canCheckWorkspaces }) => { return ( - -
- {canCheckWorkspaces && ( - - )} + +
+ {canCheckWorkspaces && }
- - + + - - + + - - + + - - + +