Skip to content

Commit 7070e47

Browse files
johnstcnjohnstcn
authored
fix: update workspace table icons in WorkspacesTable (#18525)
Updates icons in WorkspacesTable to better differentiate between "start" and "update and start". Note: the logic I'm currently using is as follows: * Workspace does not require active version and is outdated -> cloud icon * Workspace requires active version and is outdated -> circle play icon I also, on a whim, updated the stories for the component to make the workspace names more identifiably reflect their content. ![Screenshot 2025-06-24 at 11 49 17](https://github.com/user-attachments/assets/682183fc-2171-44ee-80c4-914932718163)
1 parent 99d124e commit 7070e47

File tree

2 files changed

+96
-5
lines changed

2 files changed

+96
-5
lines changed

‎site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx

Lines changed: 54 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import {
3333
import { WorkspacesPageView } from "./WorkspacesPageView";
3434

3535
const createWorkspace = (
36+
name: string,
3637
status: WorkspaceStatus,
3738
outdated = false,
3839
lastUsedAt = "0001-01-01",
@@ -42,6 +43,7 @@ const createWorkspace = (
4243
return {
4344
...MockWorkspace,
4445
id: uniqueId("workspace"),
46+
name: name,
4547
outdated,
4648
latest_build: {
4749
...MockWorkspace.latest_build,
@@ -59,17 +61,50 @@ const createWorkspace = (
5961

6062
// This is type restricted to prevent future statuses from slipping
6163
// through the cracks unchecked!
62-
const workspaces = WorkspaceStatuses.map((status) => createWorkspace(status));
64+
const workspaces = WorkspaceStatuses.map((status) =>
65+
createWorkspace(status, status),
66+
);
6367

6468
// Additional Workspaces depending on time
6569
const additionalWorkspaces: Record<string, Workspace> = {
6670
today: createWorkspace(
71+
"running-outdated",
6772
"running",
6873
true,
6974
dayjs().subtract(3, "hour").toString(),
7075
),
71-
old: createWorkspace("running", true, dayjs().subtract(1, "week").toString()),
76+
old: createWorkspace(
77+
"old-outdated",
78+
"running",
79+
true,
80+
dayjs().subtract(1, "week").toString(),
81+
),
82+
oldStopped: createWorkspace(
83+
"old-stopped-outdated",
84+
"stopped",
85+
true,
86+
dayjs().subtract(1, "week").toString(),
87+
),
88+
oldRequireActiveVersion: {
89+
...createWorkspace(
90+
"old-require-active-version-outdated",
91+
"running",
92+
true,
93+
dayjs().subtract(1, "week").toString(),
94+
),
95+
template_require_active_version: true,
96+
},
97+
oldStoppedRequireActiveVersion: {
98+
...createWorkspace(
99+
"old-stopped-require-active-version-outdated",
100+
"stopped",
101+
true,
102+
dayjs().subtract(1, "week").toString(),
103+
),
104+
template_require_active_version: true,
105+
},
72106
veryOld: createWorkspace(
107+
"very-old-running-outdated",
73108
"running",
74109
true,
75110
dayjs().subtract(1, "month").subtract(4, "day").toString(),
@@ -78,12 +113,14 @@ const additionalWorkspaces: Record<string, Workspace> = {
78113

79114
const dormantWorkspaces: Record<string, Workspace> = {
80115
dormantNoDelete: createWorkspace(
116+
"dormant-no-delete",
81117
"stopped",
82118
false,
83119
dayjs().subtract(1, "month").toString(),
84120
dayjs().subtract(1, "month").toString(),
85121
),
86122
dormantAutoDelete: createWorkspace(
123+
"dormant-auto-delete",
87124
"stopped",
88125
false,
89126
dayjs().subtract(1, "month").toString(),
@@ -245,7 +282,7 @@ export const UnhealthyWorkspace: Story = {
245282
args: {
246283
workspaces: [
247284
{
248-
...createWorkspace("running"),
285+
...createWorkspace("unhealthy", "running"),
249286
health: {
250287
healthy: false,
251288
failing_agents: [],
@@ -282,6 +319,7 @@ export const MultipleApps: Story = {
282319
workspaces: [
283320
{
284321
...MockWorkspace,
322+
name: "multiple-apps",
285323
latest_build: {
286324
...MockWorkspace.latest_build,
287325
resources: [
@@ -315,7 +353,13 @@ export const MultipleApps: Story = {
315353

316354
export const ShowOrganizations: Story = {
317355
args: {
318-
workspaces: [{ ...MockWorkspace, organization_name: "limbus-co" }],
356+
workspaces: [
357+
{
358+
...MockWorkspace,
359+
name: "other-org-workspace",
360+
organization_name: "limbus-co",
361+
},
362+
],
319363
},
320364

321365
parameters: {
@@ -347,6 +391,7 @@ export const WithLatestAppStatus: Story = {
347391
workspaces: [
348392
{
349393
...MockWorkspace,
394+
name: "long-app-status",
350395
latest_app_status: {
351396
...MockWorkspaceAppStatus,
352397
message:
@@ -355,10 +400,12 @@ export const WithLatestAppStatus: Story = {
355400
},
356401
{
357402
...MockWorkspace,
403+
name: "no-app-status",
358404
latest_app_status: null,
359405
},
360406
{
361407
...MockWorkspace,
408+
name: "app-status-working",
362409
latest_app_status: {
363410
...MockWorkspaceAppStatus,
364411
state: "working",
@@ -367,6 +414,7 @@ export const WithLatestAppStatus: Story = {
367414
},
368415
{
369416
...MockWorkspace,
417+
name: "app-status-failure",
370418
latest_app_status: {
371419
...MockWorkspaceAppStatus,
372420
state: "failure",
@@ -381,6 +429,7 @@ export const WithLatestAppStatus: Story = {
381429
resources: [],
382430
},
383431
},
432+
name: "stopped-app-status-failure",
384433
latest_app_status: {
385434
...MockWorkspaceAppStatus,
386435
state: "failure",
@@ -390,6 +439,7 @@ export const WithLatestAppStatus: Story = {
390439
},
391440
{
392441
...MockWorkspace,
442+
name: "app-status-working-with-uri",
393443
latest_app_status: {
394444
...MockWorkspaceAppStatus,
395445
state: "working",

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

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ import { ExternalLinkIcon, FileIcon, StarIcon } from "lucide-react";
4848
import { EllipsisVertical } from "lucide-react";
4949
import {
5050
BanIcon,
51+
CirclePlayIcon,
52+
CloudIcon,
5153
PlayIcon,
5254
RefreshCcwIcon,
5355
SquareIcon,
@@ -558,7 +560,46 @@ const WorkspaceActionsCell: FC<WorkspaceActionsCellProps> = ({
558560
isLoading={workspaceUpdate.isUpdating}
559561
label="Update and start workspace"
560562
>
561-
<PlayIcon />
563+
<CloudIcon />
564+
</PrimaryAction>
565+
<WorkspaceUpdateDialogs {...workspaceUpdate.dialogs} />
566+
</>
567+
)}
568+
569+
{abilities.actions.includes("updateAndStartRequireActiveVersion") && (
570+
<>
571+
<PrimaryAction
572+
onClick={workspaceUpdate.update}
573+
isLoading={workspaceUpdate.isUpdating}
574+
label="This template requires automatic updates on workspace startup. Contact your administrator if you want to preserve the template version."
575+
>
576+
<CirclePlayIcon />
577+
</PrimaryAction>
578+
<WorkspaceUpdateDialogs {...workspaceUpdate.dialogs} />
579+
</>
580+
)}
581+
582+
{abilities.actions.includes("updateAndRestart") && (
583+
<>
584+
<PrimaryAction
585+
onClick={workspaceUpdate.update}
586+
isLoading={workspaceUpdate.isUpdating}
587+
label="Update and restart workspace"
588+
>
589+
<CloudIcon />
590+
</PrimaryAction>
591+
<WorkspaceUpdateDialogs {...workspaceUpdate.dialogs} />
592+
</>
593+
)}
594+
595+
{abilities.actions.includes("updateAndRestartRequireActiveVersion") && (
596+
<>
597+
<PrimaryAction
598+
onClick={workspaceUpdate.update}
599+
isLoading={workspaceUpdate.isUpdating}
600+
label="This template requires automatic updates on workspace restart. Contact your administrator if you want to preserve the template version."
601+
>
602+
<CirclePlayIcon />
562603
</PrimaryAction>
563604
<WorkspaceUpdateDialogs {...workspaceUpdate.dialogs} />
564605
</>

0 commit comments

Comments
 (0)