Skip to content

Commit 4ba56bb

Browse files
BrunoQuaresmaBrunoQuaresma
committed
refactor: replace badge by status indicator
1 parent 67e4024 commit 4ba56bb

File tree

6 files changed

+138
-224
lines changed

6 files changed

+138
-224
lines changed

‎site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.stories.tsx

Lines changed: 0 additions & 93 deletions
This file was deleted.

‎site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx

Lines changed: 0 additions & 90 deletions
This file was deleted.

‎site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.stories.tsx

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import type { Workspace, WorkspaceStatus } from "api/typesGenerated";
3+
import { MockWorkspace } from "testHelpers/entities";
4+
import { WorkspaceStatusIndicator } from "./WorkspaceStatusIndicator";
5+
6+
const meta: Meta<typeof WorkspaceStatusIndicator> = {
7+
title: "modules/workspaces/WorkspaceStatusIndicator",
8+
component: WorkspaceStatusIndicator,
9+
};
10+
11+
export default meta;
12+
type Story = StoryObj<typeof WorkspaceStatusIndicator>;
13+
14+
const createWorkspaceWithStatus = (status: WorkspaceStatus): Workspace => {
15+
return {
16+
...MockWorkspace,
17+
latest_build: {
18+
...MockWorkspace.latest_build,
19+
status,
20+
},
21+
} as Workspace;
22+
};
23+
24+
export const Running: Story = {
25+
args: {
26+
workspace: createWorkspaceWithStatus("running"),
27+
},
28+
};
29+
30+
export const Stopped: Story = {
31+
args: {
32+
workspace: createWorkspaceWithStatus("stopped"),
33+
},
34+
};
35+
36+
export const Starting: Story = {
37+
args: {
38+
workspace: createWorkspaceWithStatus("starting"),
39+
},
40+
};
41+
42+
export const Stopping: Story = {
43+
args: {
44+
workspace: createWorkspaceWithStatus("stopping"),
45+
},
46+
};
47+
48+
export const Failed: Story = {
49+
args: {
50+
workspace: createWorkspaceWithStatus("failed"),
51+
},
52+
};
53+
54+
export const Canceling: Story = {
55+
args: {
56+
workspace: createWorkspaceWithStatus("canceling"),
57+
},
58+
};
59+
60+
export const Canceled: Story = {
61+
args: {
62+
workspace: createWorkspaceWithStatus("canceled"),
63+
},
64+
};
65+
66+
export const Deleting: Story = {
67+
args: {
68+
workspace: createWorkspaceWithStatus("deleting"),
69+
},
70+
};
71+
72+
export const Deleted: Story = {
73+
args: {
74+
workspace: createWorkspaceWithStatus("deleted"),
75+
},
76+
};
77+
78+
export const Pending: Story = {
79+
args: {
80+
workspace: createWorkspaceWithStatus("pending"),
81+
},
82+
};

‎site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import type { Workspace } from "api/typesGenerated";
2+
import {
3+
StatusIndicator,
4+
StatusIndicatorDot,
5+
type StatusIndicatorProps,
6+
} from "components/StatusIndicator/StatusIndicator";
7+
import type { FC } from "react";
8+
import type React from "react";
9+
import {
10+
type DisplayWorkspaceStatusType,
11+
getDisplayWorkspaceStatus,
12+
} from "utils/workspace";
13+
14+
const variantByStatusType: Record<
15+
DisplayWorkspaceStatusType,
16+
StatusIndicatorProps["variant"]
17+
> = {
18+
active: "pending",
19+
inactive: "inactive",
20+
success: "success",
21+
error: "failed",
22+
danger: "warning",
23+
warning: "warning",
24+
};
25+
26+
type WorkspaceStatusIndicatorProps = {
27+
workspace: Workspace;
28+
children?: React.ReactNode;
29+
};
30+
31+
export const WorkspaceStatusIndicator: FC<WorkspaceStatusIndicatorProps> = ({
32+
workspace,
33+
children,
34+
}) => {
35+
const { text, type } = getDisplayWorkspaceStatus(
36+
workspace.latest_build.status,
37+
workspace.latest_build.job,
38+
);
39+
40+
return (
41+
<StatusIndicator variant={variantByStatusType[type]}>
42+
<StatusIndicatorDot />
43+
{text}
44+
{children}
45+
</StatusIndicator>
46+
);
47+
};

‎site/src/pages/WorkspacePage/WorkspaceTopbar.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { Popover, PopoverTrigger } from "components/deprecated/Popover/Popover";
2020
import { TrashIcon } from "lucide-react";
2121
import { useDashboard } from "modules/dashboard/useDashboard";
2222
import { linkToTemplate, useLinks } from "modules/navigation";
23-
import { WorkspaceStatusBadge } from "modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge";
23+
import { WorkspaceStatusIndicator } from "modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator";
2424
import type { FC } from "react";
2525
import { useQuery } from "react-query";
2626
import { Link as RouterLink } from "react-router-dom";
@@ -201,18 +201,13 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
201201
</div>
202202

203203
{!isImmutable && (
204-
<div
205-
css={{
206-
display: "flex",
207-
alignItems: "center",
208-
gap: 8,
209-
}}
210-
>
204+
<div className="flex items-center gap-4">
211205
<WorkspaceScheduleControls
212206
workspace={workspace}
213207
template={template}
214208
canUpdateSchedule={permissions.updateWorkspace}
215209
/>
210+
216211
<WorkspaceNotifications
217212
workspace={workspace}
218213
template={template}
@@ -222,7 +217,9 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
222217
onUpdateWorkspace={handleUpdate}
223218
onActivateWorkspace={handleDormantActivate}
224219
/>
225-
<WorkspaceStatusBadge workspace={workspace} />
220+
221+
<WorkspaceStatusIndicator workspace={workspace} />
222+
226223
<WorkspaceActions
227224
workspace={workspace}
228225
permissions={permissions}

0 commit comments

Comments
 (0)