Skip to content

chore: remove some usage of useClassName #19346

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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Aug 14, 2025
+132 −226
Merged

chore: remove some usage of useClassName #19346

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
8cbf9aa
Update EnterpriseSnackbar.tsx
aslilac Aug 13, 2025
f1ed76e
Update Sidebar.tsx
aslilac Aug 13, 2025
c412562
Update HealthLayout.tsx
aslilac Aug 13, 2025
f923995
deprecate `useClassName`
aslilac Aug 13, 2025
acf33a1
format
aslilac Aug 13, 2025
4946c9a
oh
aslilac Aug 13, 2025
709eb72
>>>>>:(
aslilac Aug 13, 2025
9514caa
Merge branch 'main' into lilac/use-class-name-pt-1
aslilac Aug 14, 2025
29cb9ba
fix classnames
aslilac Aug 14, 2025
4c0504d
hmm
aslilac Aug 14, 2025
6aa4ef0
:|
aslilac Aug 14, 2025
53b5fb1
come oooooon
aslilac Aug 14, 2025
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
Prev Previous commit
Next Next commit
Update HealthLayout.tsx
  • Loading branch information
@aslilac
aslilac committed Aug 13, 2025
commit c412562d81d163b51fd5f6a2e8ceca4a995d2bb4
104 changes: 25 additions & 79 deletions site/src/pages/HealthPage/HealthLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { cx } from "@emotion/css";
import { useTheme } from "@emotion/react";
import NotificationsOffOutlined from "@mui/icons-material/NotificationsOffOutlined";
import ReplayIcon from "@mui/icons-material/Replay";
Expand All @@ -9,13 +8,13 @@ import { health, refreshHealth } from "api/queries/debug";
import type { HealthSeverity } from "api/typesGenerated";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { Loader } from "components/Loader/Loader";
import { type ClassName, useClassName } from "hooks/useClassName";
import kebabCase from "lodash/fp/kebabCase";
import { DashboardFullPage } from "modules/dashboard/DashboardLayout";
import { type FC, Suspense } from "react";
import { Helmet } from "react-helmet-async";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { NavLink, Outlet } from "react-router";
import { cn } from "utils/cn";
import { createDayString } from "utils/createDayString";
import { pageTitle } from "utils/page";
import { HealthIcon } from "./Content";
Expand Down Expand Up @@ -44,8 +43,12 @@ export const HealthLayout: FC = () => {
} as const;
const visibleSections = filterVisibleSections(sections);

const link = useClassName(classNames.link, []);
const activeLink = useClassName(classNames.activeLink, []);
const link = `
text-content-secondary border-none text-sm w-full flex items-center gap-3
text-left h-9 px-6 cursor-pointer no-underline transition-colors
hover:bg-surface-secondary hover:text-content-primary
`;
const activeLink = "bg-surface-secondary text-content-primary";

if (isLoading) {
return (
Expand All @@ -71,36 +74,17 @@ export const HealthLayout: FC = () => {

<DashboardFullPage>
<div
css={{
display: "flex",
flexBasis: 0,
flex: 1,
overflow: "hidden",
}}
className="flex basis-0 flex-1 overflow-hidden"
>
<div
css={{
width: 256,
flexShrink: 0,
borderRight: `1px solid ${theme.palette.divider}`,
fontSize: 14,
}}
className="w-64 shrink-0 text-sm border-0 border-solid border-r border-r-border"
>
<div
css={{
padding: 24,
display: "flex",
flexDirection: "column",
gap: 16,
}}
className="flex flex-col gap-4 p-6"
>
<div>
<div
css={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
className="flex items-center justify-between"
>
<HealthIcon size={32} severity={healthStatus.severity} />

Expand All @@ -116,12 +100,12 @@ export const HealthLayout: FC = () => {
{isRefreshing ? (
<CircularProgress size={16} />
) : (
<ReplayIcon css={{ width: 20, height: 20 }} />
<ReplayIcon className="size-5" />
)}
</IconButton>
</Tooltip>
</div>
<div css={{ fontWeight: 500, marginTop: 16 }}>
<div className="text-medium mt-4">
Copy link
Contributor

Choose a reason for hiding this comment

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

This should be font-medium as well as the ones below

{healthStatus.healthy ? "Healthy" : "Unhealthy"}
</div>
<div
Expand All @@ -132,44 +116,38 @@ export const HealthLayout: FC = () => {
>
{healthStatus.healthy
? Object.keys(visibleSections).some((key) => {
const section =
healthStatus[key as keyof typeof visibleSections];
return section.warnings && section.warnings.length > 0;
})
const section =
healthStatus[key as keyof typeof visibleSections];
return section.warnings && section.warnings.length > 0;
})
? "All systems operational, but performance might be degraded"
: "All systems operational"
: "Some issues have been detected"}
</div>
</div>

<div css={{ display: "flex", flexDirection: "column" }}>
<span css={{ fontWeight: 500 }}>Last check</span>
<div className="flex flex-col">
<span className="text-medium">Last check</span>
<span
data-chromatic="ignore"
css={{
color: theme.palette.text.secondary,
lineHeight: "150%",
}}
className="text-content-secondary line-height-[150%]"
>
{createDayString(healthStatus.time)}
</span>
</div>

<div css={{ display: "flex", flexDirection: "column" }}>
<span css={{ fontWeight: 500 }}>Version</span>
<span className="text-medium">Version</span>
<span
data-chromatic="ignore"
css={{
color: theme.palette.text.secondary,
lineHeight: "150%",
}}
className="text-content-secondary line-height-[150%]"
>
{healthStatus.coder_version}
</span>
</div>
</div>

<nav css={{ display: "flex", flexDirection: "column", gap: 1 }}>
<nav className="flex flex-col gap-px">
{Object.entries(visibleSections)
.sort()
.map(([key, label]) => {
Expand All @@ -182,7 +160,7 @@ export const HealthLayout: FC = () => {
key={key}
to={`/health/${kebabCase(key)}`}
className={({ isActive }) =>
cx([link, isActive && activeLink])
cn(link, isActive && activeLink)
}
>
<HealthIcon
Expand All @@ -205,7 +183,7 @@ export const HealthLayout: FC = () => {
</nav>
</div>

<div css={{ overflowY: "auto", width: "100%" }}>
<div className="overflow-y-auto w-full">
<Suspense fallback={<Loader />}>
<Outlet context={healthStatus} />
</Suspense>
Expand All @@ -229,35 +207,3 @@ const filterVisibleSections = <T extends object>(sections: T) => {

return visible;
};

const classNames = {
link: (css, theme) =>
css({
background: "none",
pointerEvents: "auto",
color: theme.palette.text.secondary,
border: "none",
fontSize: 14,
width: "100%",
display: "flex",
alignItems: "center",
gap: 12,
textAlign: "left",
height: 36,
padding: "0 24px",
cursor: "pointer",
textDecoration: "none",

"&:hover": {
background: theme.palette.action.hover,
color: theme.palette.text.primary,
},
}),

activeLink: (css, theme) =>
css({
background: theme.palette.action.hover,
pointerEvents: "none",
color: theme.palette.text.primary,
}),
} satisfies Record<string, ClassName>;