Skip to content

feat(site): rename "Dismiss warnings" to "Mute warnings" and make health callouts dismissible #27554

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
tracyjohnsonux merged 6 commits into from
Jul 28, 2026
Merged

feat(site): rename "Dismiss warnings" to "Mute warnings" and make health callouts dismissible #27554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7d5f6e2
feat(site): rename Dismiss warnings to Mute warnings and make health …
tracyjohnsonux Jul 27, 2026
bd3d7a4
chore: retrigger CI
tracyjohnsonux Jul 28, 2026
55d9672
fix(site/src/pages/HealthPage): don't allow dismissing error alerts, …
tracyjohnsonux Jul 28, 2026
a2afadb
refactor(site/src/pages/HealthPage): rename DismissWarningButton to M…
tracyjohnsonux Jul 28, 2026
6d847a0
Merge branch 'main' into tj/mute-warnings-dismissible-health-callouts
tracyjohnsonux Jul 28, 2026
c61c76b
fix(site/src/pages/HealthPage): mark ProvisionerDaemonsPage warning c…
tracyjohnsonux Jul 28, 2026
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
5 changes: 3 additions & 2 deletions site/src/pages/HealthPage/AccessURLPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
HealthyDot,
Main,
} from "./Content";
import { DismissWarningButton } from "./DismissWarningButton";
import { MuteWarningsButton } from "./MuteWarningsButton";

const AccessURLPage = () => {
const healthStatus = useOutletContext<HealthcheckReport>();
Expand All @@ -27,7 +27,7 @@ const AccessURLPage = () => {
<HealthyDot severity={accessUrl.severity} />
Access URL
</HeaderTitle>
<DismissWarningButton healthcheck="AccessURL" />
<MuteWarningsButton healthcheck="AccessURL" />
</Header>

<Main>
Expand All @@ -40,6 +40,7 @@ const AccessURLPage = () => {
key={warning.code}
severity="warning"
prominent
dismissible
Comment thread
tracyjohnsonux marked this conversation as resolved.
>
{warning.message}
</Alert>
Expand Down
5 changes: 3 additions & 2 deletions site/src/pages/HealthPage/DERPPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {
SectionLabel,
StatusIcon,
} from "./Content";
import { DismissWarningButton } from "./DismissWarningButton";
import { MuteWarningsButton } from "./MuteWarningsButton";

type BooleanKeys<T> = {
[K in keyof T]: T[K] extends boolean | null ? K : never;
Expand Down Expand Up @@ -148,7 +148,7 @@ const DERPPage: FC = () => {
<HealthyDot severity={derp.severity as HealthSeverity} />
DERP
</HeaderTitle>
<DismissWarningButton healthcheck="DERP" />
<MuteWarningsButton healthcheck="DERP" />
</Header>

<Main>
Expand All @@ -159,6 +159,7 @@ const DERPPage: FC = () => {
key={warning.code}
severity="warning"
prominent
dismissible
>
{warning.message}
</Alert>
Expand Down
1 change: 1 addition & 0 deletions site/src/pages/HealthPage/DERPRegionPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ const DERPRegionPage: FC = () => {
key={warning.code}
severity="warning"
prominent
dismissible
>
{warning.message}
</Alert>
Expand Down
5 changes: 3 additions & 2 deletions site/src/pages/HealthPage/DatabasePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
HealthyDot,
Main,
} from "./Content";
import { DismissWarningButton } from "./DismissWarningButton";
import { MuteWarningsButton } from "./MuteWarningsButton";

const DatabasePage = () => {
const healthStatus = useOutletContext<HealthcheckReport>();
Expand All @@ -27,7 +27,7 @@ const DatabasePage = () => {
<HealthyDot severity={database.severity} />
Database
</HeaderTitle>
<DismissWarningButton healthcheck="Database" />
<MuteWarningsButton healthcheck="Database" />
</Header>

<Main>
Expand All @@ -38,6 +38,7 @@ const DatabasePage = () => {
key={warning.code}
severity="warning"
prominent
dismissible
>
{warning.message}
</Alert>
Expand Down
37 changes: 18 additions & 19 deletions ...pages/HealthPage/DismissWarningButton.tsx → ...c/pages/HealthPage/MuteWarningsButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,63 +7,62 @@ import { Button } from "#/components/Button/Button";
import { Skeleton } from "#/components/Skeleton/Skeleton";
import { Spinner } from "#/components/Spinner/Spinner";

export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
export const MuteWarningsButton = (props: { healthcheck: HealthSection }) => {
const queryClient = useQueryClient();
Comment thread
tracyjohnsonux marked this conversation as resolved.
const healthSettingsQuery = useQuery(healthSettings());
// They call the same mutation but are used in diff contexts so we don't want
// to merge their states. Eg. You dismiss a warning and when it is done it
// will show the enable button but since the mutation is still invalidating
// other queries it will be in the loading state when it should be idle.
const enableMutation = useMutation(updateHealthSettings(queryClient));
const dismissMutation = useMutation(updateHealthSettings(queryClient));
// Separate mutation instances so unmuting isn't stuck pending while
// muting's query invalidation resolves (a shared mutation would share
// isPending and spin the wrong button).
const unmuteMutation = useMutation(updateHealthSettings(queryClient));
const muteMutation = useMutation(updateHealthSettings(queryClient));

if (!healthSettingsQuery.data) {
return <Skeleton height={36} width={170} className="rounded-lg" />;
}

const { dismissed_healthchecks } = healthSettingsQuery.data;
const isDismissed = dismissed_healthchecks.includes(props.healthcheck);
const isMuted = dismissed_healthchecks.includes(props.healthcheck);

if (isDismissed) {
if (isMuted) {
return (
<Button
disabled={healthSettingsQuery.isLoading || enableMutation.isPending}
disabled={healthSettingsQuery.isLoading || unmuteMutation.isPending}
variant="outline"
onClick={async () => {
const updatedSettings = dismissed_healthchecks.filter(
(dismissedHealthcheck) =>
dismissedHealthcheck !== props.healthcheck,
);
await enableMutation.mutateAsync({
await unmuteMutation.mutateAsync({
dismissed_healthchecks: updatedSettings,
});
toast.success("Warnings enabled successfully.");
toast.success("Warnings unmuted successfully.");
}}
>
<Spinner loading={enableMutation.isPending}>
<Spinner loading={unmuteMutation.isPending}>
<BellOffIcon />
</Spinner>
Enable warnings
Unmute warnings
</Button>
);
}

return (
<Button
disabled={healthSettingsQuery.isLoading || dismissMutation.isPending}
disabled={healthSettingsQuery.isLoading || muteMutation.isPending}
variant="outline"
onClick={async () => {
const updatedSettings = [...dismissed_healthchecks, props.healthcheck];
await dismissMutation.mutateAsync({
await muteMutation.mutateAsync({
dismissed_healthchecks: updatedSettings,
});
toast.success("Dismissed warnings successfully.");
toast.success("Warnings muted successfully.");
}}
>
<Spinner loading={dismissMutation.isPending}>
<Spinner loading={muteMutation.isPending}>
<BellIcon />
</Spinner>
Dismiss warnings
Mute warnings
Comment thread
tracyjohnsonux marked this conversation as resolved.
</Button>
);
};
6 changes: 4 additions & 2 deletions site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
HealthyDot,
Main,
} from "./Content";
import { DismissWarningButton } from "./DismissWarningButton";
import { MuteWarningsButton } from "./MuteWarningsButton";

const ProvisionerDaemonsPage: FC = () => {
const healthStatus = useOutletContext<HealthcheckReport>();
Expand All @@ -26,7 +26,7 @@ const ProvisionerDaemonsPage: FC = () => {
<HealthyDot severity={daemons.severity} />
Provisioner Daemons
</HeaderTitle>
<DismissWarningButton healthcheck="ProvisionerDaemons" />
<MuteWarningsButton healthcheck="ProvisionerDaemons" />
</Header>

<Main>
Expand All @@ -41,6 +41,8 @@ const ProvisionerDaemonsPage: FC = () => {
actions={<HealthMessageDocsLink {...warning} />}
key={warning.code}
severity="warning"
prominent
dismissible
Comment thread
tracyjohnsonux marked this conversation as resolved.
>
{warning.message}
</Alert>
Expand Down
6 changes: 3 additions & 3 deletions site/src/pages/HealthPage/WebsocketPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
Pill,
SectionLabel,
} from "./Content";
import { DismissWarningButton } from "./DismissWarningButton";
import { MuteWarningsButton } from "./MuteWarningsButton";

const WebsocketPage = () => {
const healthStatus = useOutletContext<HealthcheckReport>();
Expand All @@ -31,7 +31,7 @@ const WebsocketPage = () => {
<HealthyDot severity={websocket.severity} />
Websocket
</HeaderTitle>
<DismissWarningButton healthcheck="Websocket" />
<MuteWarningsButton healthcheck="Websocket" />
</Header>

<Main>
Expand All @@ -43,7 +43,7 @@ const WebsocketPage = () => {

{websocket.warnings.map((warning) => {
return (
<Alert key={warning.code} severity="warning" prominent>
<Alert key={warning.code} severity="warning" prominent dismissible>
Comment thread
tracyjohnsonux marked this conversation as resolved.
{warning.message}
</Alert>
);
Expand Down
5 changes: 3 additions & 2 deletions site/src/pages/HealthPage/WorkspaceProxyPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
Main,
Pill,
} from "./Content";
import { DismissWarningButton } from "./DismissWarningButton";
import { MuteWarningsButton } from "./MuteWarningsButton";

const WorkspaceProxyPage: FC = () => {
const healthStatus = useOutletContext<HealthcheckReport>();
Expand All @@ -37,7 +37,7 @@ const WorkspaceProxyPage: FC = () => {
<HealthyDot severity={workspace_proxy.severity} />
Workspace Proxy
</HeaderTitle>
<DismissWarningButton healthcheck="WorkspaceProxy" />
<MuteWarningsButton healthcheck="WorkspaceProxy" />
</Header>

<Main>
Expand All @@ -53,6 +53,7 @@ const WorkspaceProxyPage: FC = () => {
key={warning.code}
severity="warning"
prominent
dismissible
>
{warning.message}
</Alert>
Expand Down
Loading