Skip to content

Commit dd31141

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Replace StatusIndicator in old components
1 parent 170a731 commit dd31141

File tree

5 files changed

+64
-16
lines changed

5 files changed

+64
-16
lines changed

‎site/src/components/StatusIndicator/StatusIndicator.tsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,15 +70,28 @@ const dotVariants = cva("rounded-full inline-block border-4 border-solid", {
7070
});
7171

7272
export interface StatusIndicatorDotProps
73-
extends React.HTMLAttributes<HTMLDivElement> {}
73+
extends React.HTMLAttributes<HTMLDivElement>,
74+
VariantProps<typeof dotVariants> {}
7475

7576
export const StatusIndicatorDot: FC<StatusIndicatorDotProps> = ({
7677
className,
78+
// We allow the size and variant to be overridden directly by the component.
79+
// This allows StatusIndicatorDot to be used alone.
80+
size,
81+
variant,
7782
...props
7883
}) => {
79-
const { size, variant } = useContext(StatusIndicatorContext);
84+
const { size: ctxSize, variant: ctxVariant } = useContext(
85+
StatusIndicatorContext,
86+
);
8087

8188
return (
82-
<div className={cn(dotVariants({ variant, size }), className)} {...props} />
89+
<div
90+
className={cn(
91+
dotVariants({ variant: variant ?? ctxVariant, size: size ?? ctxSize }),
92+
className,
93+
)}
94+
{...props}
95+
/>
8396
);
8497
};

‎site/src/modules/provisioners/ProvisionerGroup.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@ import {
1616
} from "components/HelpTooltip/HelpTooltip";
1717
import { Pill } from "components/Pill/Pill";
1818
import { Stack } from "components/Stack/Stack";
19-
import { StatusIndicator } from "components/StatusIndicator/StatusIndicator";
19+
import {
20+
StatusIndicator,
21+
StatusIndicatorDot,
22+
} from "components/StatusIndicator/StatusIndicator";
2023
import {
2124
Popover,
2225
PopoverContent,
@@ -127,7 +130,7 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
127130
}}
128131
>
129132
<div css={{ display: "flex", alignItems: "center", gap: 16 }}>
130-
<StatusIndicator color={hasWarning ? "warning" : "success"} />
133+
<StatusIndicatorDot variant={hasWarning ? "warning" : "success"} />
131134
<div
132135
css={{
133136
display: "flex",

‎site/src/pages/UsersPage/UsersFilter.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,17 @@ export const useStatusFilterMenu = ({
2424
{
2525
value: "active",
2626
label: "Active",
27-
startIcon: <StatusIndicator color="success" />,
27+
startIcon: <StatusIndicator variant="success" />,
2828
},
2929
{
3030
value: "dormant",
3131
label: "Dormant",
32-
startIcon: <StatusIndicator color="warning" />,
32+
startIcon: <StatusIndicator variant="warning" />,
3333
},
3434
{
3535
value: "suspended",
3636
label: "Suspended",
37-
startIcon: <StatusIndicator color="inactive" />,
37+
startIcon: <StatusIndicator variant="stopped" />,
3838
},
3939
];
4040
return useFilterMenu({

‎site/src/pages/WorkspacesPage/LastUsed.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,19 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
1818
const t = dayjs(lastUsedAt);
1919
const now = dayjs();
2020
let message = t.fromNow();
21-
let circle = <StatusIndicator color="info" variant="outlined" />;
21+
let circle = <StatusIndicator variant="starting" />;
2222

2323
if (t.isAfter(now.subtract(1, "hour"))) {
24-
circle = <StatusIndicator color="success" />;
24+
circle = <StatusIndicator variant="success" />;
2525
// Since the agent reports on a 10m interval,
2626
// the last_used_at can be inaccurate when recent.
2727
message = "Now";
2828
} else if (t.isAfter(now.subtract(3, "day"))) {
29-
circle = <StatusIndicator color="info" />;
29+
circle = <StatusIndicator variant="starting" />;
3030
} else if (t.isAfter(now.subtract(1, "month"))) {
31-
circle = <StatusIndicator color="warning" />;
31+
circle = <StatusIndicator variant="warning" />;
3232
} else if (t.isAfter(now.subtract(100, "year"))) {
33-
circle = <StatusIndicator color="error" />;
33+
circle = <StatusIndicator variant="failed" />;
3434
} else {
3535
message = "Never";
3636
}

‎site/src/pages/WorkspacesPage/filter/menus.tsx

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { API } from "api/api";
2-
import type { Template, WorkspaceStatus } from "api/typesGenerated";
2+
import type {
3+
ProvisionerJob,
4+
Template,
5+
WorkspaceStatus,
6+
} from "api/typesGenerated";
37
import { Avatar } from "components/Avatar/Avatar";
48
import {
59
SelectFilter,
@@ -10,7 +14,10 @@ import {
1014
type UseFilterMenuOptions,
1115
useFilterMenu,
1216
} from "components/Filter/menu";
13-
import { StatusIndicator } from "components/StatusIndicator/StatusIndicator";
17+
import {
18+
StatusIndicator,
19+
type StatusIndicatorDotProps,
20+
} from "components/StatusIndicator/StatusIndicator";
1421
import type { FC } from "react";
1522
import { getDisplayWorkspaceStatus } from "utils/workspace";
1623

@@ -109,7 +116,9 @@ export const useStatusFilterMenu = ({
109116
return {
110117
label: display.text,
111118
value: status,
112-
startIcon: <StatusIndicator color={display.type ?? "warning"} />,
119+
startIcon: (
120+
<StatusIndicator variant={getStatusIndicatorVariant(status)} />
121+
),
113122
};
114123
});
115124
return useFilterMenu({
@@ -141,3 +150,26 @@ export const StatusMenu: FC<StatusMenuProps> = ({ width, menu }) => {
141150
/>
142151
);
143152
};
153+
154+
export const getStatusIndicatorVariant = (
155+
status: WorkspaceStatus,
156+
): StatusIndicatorDotProps["variant"] => {
157+
switch (status) {
158+
case "running":
159+
return "success";
160+
case "starting":
161+
case "pending":
162+
return "starting";
163+
case undefined:
164+
case "canceling":
165+
case "canceled":
166+
case "stopping":
167+
case "stopped":
168+
return "stopped";
169+
case "deleting":
170+
case "deleted":
171+
return "warning";
172+
case "failed":
173+
return "failed";
174+
}
175+
};

0 commit comments

Comments
 (0)