Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit c37c0e7

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor(site): simplify workspace topbar (coder#11370)
1 parent 62a20e8 commit c37c0e7

File tree

2 files changed

+70
-56
lines changed

2 files changed

+70
-56
lines changed

‎site/src/components/AvatarData/AvatarData.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import type { FC } from "react";
1+
import type { FC, ReactNode } from "react";
22
import { useTheme } from "@emotion/react";
33
import { Avatar } from "components/Avatar/Avatar";
44
import { Stack } from "components/Stack/Stack";
55

66
export interface AvatarDataProps {
7-
title: string | JSX.Element;
8-
subtitle?: string;
7+
title: ReactNode;
8+
subtitle?: ReactNode;
99
src?: string;
1010
avatar?: React.ReactNode;
1111
}

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

+67-53
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,8 @@ import {
1111
} from "components/FullPageLayout/Topbar";
1212
import Tooltip from "@mui/material/Tooltip";
1313
import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
14-
import PersonOutlineOutlined from "@mui/icons-material/PersonOutlineOutlined";
15-
import { WorkspaceOutdatedTooltipContent } from "components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip";
16-
import { Popover, PopoverTrigger } from "components/Popover/Popover";
1714
import ScheduleOutlined from "@mui/icons-material/ScheduleOutlined";
1815
import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge";
19-
import { Pill } from "components/Pill/Pill";
2016
import {
2117
WorkspaceScheduleControls,
2218
shouldDisplayScheduleControls,
@@ -25,11 +21,15 @@ import { workspaceQuota } from "api/queries/workspaceQuota";
2521
import { useQuery } from "react-query";
2622
import MonetizationOnOutlined from "@mui/icons-material/MonetizationOnOutlined";
2723
import { useTheme } from "@mui/material/styles";
28-
import InfoOutlined from "@mui/icons-material/InfoOutlined";
2924
import Link from "@mui/material/Link";
3025
import { useDashboard } from "components/Dashboard/DashboardProvider";
3126
import { displayDormantDeletion } from "utils/dormant";
3227
import DeleteOutline from "@mui/icons-material/DeleteOutline";
28+
import PersonOutline from "@mui/icons-material/PersonOutline";
29+
import { Popover, PopoverTrigger } from "components/Popover/Popover";
30+
import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip";
31+
import { AvatarData } from "components/AvatarData/AvatarData";
32+
import { Avatar } from "components/Avatar/Avatar";
3333

3434
export type WorkspaceError =
3535
| "getBuildsError"
@@ -120,58 +120,72 @@ export const WorkspaceTopbar = (props: WorkspaceProps) => {
120120
}}
121121
>
122122
<TopbarData>
123-
<TopbarAvatar src={workspace.template_icon} />
124-
<span css={{ fontWeight: 500 }}>{workspace.name}</span>
123+
<TopbarIcon>
124+
<PersonOutline />
125+
</TopbarIcon>
126+
<Tooltip title="Owner">
127+
<span>{workspace.owner_name}</span>
128+
</Tooltip>
125129
<TopbarDivider />
126-
<Link
127-
component={RouterLink}
128-
to={`/templates/${workspace.template_name}`}
129-
css={{ color: "inherit" }}
130-
>
131-
{workspace.template_display_name ?? workspace.template_name}
132-
</Link>
130+
<Popover mode="hover">
131+
<PopoverTrigger>
132+
<span
133+
css={{
134+
display: "flex",
135+
alignItems: "center",
136+
gap: 8,
137+
cursor: "default",
138+
padding: "4px 0",
139+
}}
140+
>
141+
<TopbarAvatar src={workspace.template_icon} />
142+
<span css={{ fontWeight: 500 }}>{workspace.name}</span>
143+
</span>
144+
</PopoverTrigger>
133145

134-
{workspace.outdated ? (
135-
<Popover mode="hover">
136-
<PopoverTrigger>
137-
{/* Added to give some bottom space from the popover content */}
138-
<div css={{ padding: "4px 0", margin: "-4px 0" }}>
139-
<Pill
140-
icon={
141-
<InfoOutlined
142-
css={{
143-
width: "12px !important",
144-
height: "12px !important",
145-
color: theme.palette.warning.light,
146-
}}
147-
/>
148-
}
146+
<HelpTooltipContent
147+
anchorOrigin={{
148+
vertical: "bottom",
149+
horizontal: "center",
150+
}}
151+
transformOrigin={{
152+
vertical: "top",
153+
horizontal: "center",
154+
}}
155+
>
156+
<AvatarData
157+
title={
158+
<Link
159+
component={RouterLink}
160+
to={`/templates/${workspace.template_name}`}
161+
css={{ color: "inherit" }}
162+
>
163+
{workspace.template_display_name.length > 0
164+
? workspace.template_display_name
165+
: workspace.template_name}
166+
</Link>
167+
}
168+
subtitle={
169+
<Link
170+
component={RouterLink}
171+
to={`/templates/${workspace.template_name}/versions/${workspace.latest_build.template_version_name}`}
172+
css={{ color: "inherit" }}
149173
>
150-
<span css={{ color: theme.palette.warning.light }}>
151-
{workspace.latest_build.template_version_name}
152-
</span>
153-
</Pill>
154-
</div>
155-
</PopoverTrigger>
156-
<WorkspaceOutdatedTooltipContent
157-
templateName={workspace.template_name}
158-
latestVersionId={workspace.template_active_version_id}
159-
onUpdateVersion={handleUpdate}
160-
ariaLabel="update version"
174+
{workspace.latest_build.template_version_name}
175+
</Link>
176+
}
177+
avatar={
178+
workspace.template_icon !== "" && (
179+
<Avatar
180+
src={workspace.template_icon}
181+
variant="square"
182+
fitImage
183+
/>
184+
)
185+
}
161186
/>
162-
</Popover>
163-
) : (
164-
<Pill>{workspace.latest_build.template_version_name}</Pill>
165-
)}
166-
</TopbarData>
167-
168-
<TopbarData>
169-
<Tooltip title="Owner">
170-
<TopbarIcon>
171-
<PersonOutlineOutlined aria-label="Owner" />
172-
</TopbarIcon>
173-
</Tooltip>
174-
<span>{workspace.owner_name}</span>
187+
</HelpTooltipContent>
188+
</Popover>
175189
</TopbarData>
176190

177191
{shouldDisplayDormantData && (

0 commit comments

Comments
 (0)