8000 refactor: redesign workspace status on workspaces table by BrunoQuaresma · Pull Request #17425 · coder/coder · GitHub
[go: up one dir, main page]
Skip to content

refactor: redesign workspace status on workspaces table #17425

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 7 commits into from
Apr 17, 2025
Merged

refactor: redesign workspace status on workspaces table #17425

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8212659
refactor: redesign workspace status on workspces table
BrunoQuaresma Apr 16, 2025
43685a6
FMT
BrunoQuaresma Apr 16, 2025
c693ebf
Fix storybook
BrunoQuaresma Apr 16, 2025
f1f43d0
Apply PR comments
BrunoQuaresma Apr 17, 2025
4bdb3aa
Merge branch 'main' of https://github.com/coder/coder into bq/refacto…
BrunoQuaresma Apr 17, 2025
bbe9d8f
Fix merging conflict
BrunoQuaresma Apr 17, 2025
236f9dd
Merge branch 'main' into bq/refactor-status-column
BrunoQuaresma Apr 17, 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
Apply PR comments
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Apr 17, 2025
commit f1f43d03a86c90eeeb28a0c17ab5a02c2505bfe9
7 changes: 4 additions & 3 deletions site/src/pages/WorkspacesPage/WorkspacesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ import { type FC, type ReactNode, useMemo } from "react";
import { useNavigate } from "react-router-dom";
import { cn } from "utils/cn";
import {
type GetWorkspaceDisplayStatusType,
type DisplayWorkspaceStatusType,
getDisplayWorkspaceStatus,
getDisplayWorkspaceTemplateName,
lastUsedMessage,
8000 Expand Down Expand Up @@ -338,7 +338,7 @@ const TableLoader: FC<TableLoaderProps> = ({ canCheckWorkspaces }) => {
<AvatarDataSkeleton />
</TableCell>
<TableCell className="w-2/6">
<Skeleton variant="text" width="75%" />
<Skeleton variant="text" width="50%" />
</TableCell>
<TableCell className="w-0">
<Skeleton variant="text" width="25%" />
Expand All @@ -357,14 +357,15 @@ type WorkspaceStatusCellProps = {
};

const variantByStatusType: Record<
GetWorkspaceDisplayStatusType,
DisplayWorkspaceStatusType,
StatusIndicatorProps["variant"]
Copy link
Member

Choose a reason for hiding this comment

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

Wondering if it's worth splitting off the variant property into a separate type, and exporting that instead. Chaining props like this feels like fragile, over-coupled dependencies

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Chaining props like this feels like fragile, over-coupled dependencies

I think this makes sense when the defined type is dependent on the another one. So, if I change the props onStatusIndicator it will be reflect on variantByStatusTypewithout any extra effort. Besides that, I think having something like:

type StatusIndicatorVariant = StatusIndicatorProps["variant"]

It just works as an alias IMO.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Putting more thoughts on it, I just think types dependency may warn us about components being too coupled, which is not always bad, but definitely something to evaluate.

> = {
active: "pending",
inactive: "inactive",
success: "success",
error: "failed",
danger: "warning",
warning: "warning",
};

const WorkspaceStatusCell: FC<WorkspaceStatusCellProps> = ({ workspace }) => {
Expand Down
22 changes: 16 additions & 6 deletions site/src/utils/workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,10 +168,24 @@ export const getDisplayWorkspaceTemplateName = (
: workspace.template_name;
};

export type DisplayWorkspaceStatusType =
| "success"
| "active"
| "inactive"
| "error"
| "warning"
| "danger";

type DisplayWorkspaceStatus = {
text: string;
type: DisplayWorkspaceStatusType;
icon: React.ReactNode;
};

export const getDisplayWorkspaceStatus = (
workspaceStatus: TypesGen.WorkspaceStatus,
provisionerJob?: TypesGen.ProvisionerJob,
) => {
): DisplayWorkspaceStatus => {
switch (workspaceStatus) {
case undefined:
return {
Expand Down Expand Up @@ -242,10 +256,6 @@ export const getDisplayWorkspaceStatus = (
}
};

export type GetWorkspaceDisplayStatusType = ReturnType<
typeof getDisplayWorkspaceStatus
>["type"];

export const hasJobError = (workspace: TypesGen.Workspace) => {
return workspace.latest_build.job.error !== undefined;
};
Expand Down Expand Up @@ -313,7 +323,7 @@ export const getResourceIconPath = (resourceType: string): string => {
return BUILT_IN_ICON_PATHS[resourceType] ?? FALLBACK_ICON;
};

export const lastUsedMessage = (lastUsedAt: string | Date) => {
export const lastUsedMessage = (lastUsedAt: string | Date): string => {
const t = dayjs(lastUsedAt);
const now = dayjs();
let message = t.fromNow();
Expand Down
Loading
0