Skip to content

Commit ffacb9f

Browse files
BrunoQuaresmaBrunoQuaresma
committed
WIP: Refactor workspace header
1 parent 4ed5550 commit ffacb9f

File tree

3 files changed

+121
-17
lines changed

3 files changed

+121
-17
lines changed

‎site/src/components/FullPageLayout/Topbar.tsx

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
1+
import { css } from "@emotion/css";
12
import Button, { ButtonProps } from "@mui/material/Button";
23
import IconButton, { IconButtonProps } from "@mui/material/IconButton";
34
import { useTheme } from "@mui/material/styles";
45
import { Avatar, AvatarProps } from "components/Avatar/Avatar";
5-
import { HTMLAttributes, forwardRef } from "react";
6+
import {
7+
HTMLAttributes,
8+
PropsWithChildren,
9+
ReactElement,
10+
cloneElement,
11+
forwardRef,
12+
} from "react";
613

714
export const Topbar = (props: HTMLAttributes<HTMLDivElement>) => {
815
const theme = useTheme();
@@ -30,9 +37,10 @@ export const TopbarIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
3037
{...props}
3138
size="small"
3239
css={{
33-
padding: "0 16px",
40+
padding: 0,
3441
borderRadius: 0,
3542
height: 48,
43+
width: 48,
3644

3745
"& svg": {
3846
fontSize: 20,
@@ -90,3 +98,18 @@ export const TopbarAvatar = (props: AvatarProps) => {
9098
/>
9199
);
92100
};
101+
102+
export const TopbarIcon = ({
103+
children,
104+
...props
105+
}: PropsWithChildren<HTMLAttributes<HTMLOrSVGElement>>) => {
106+
const theme = useTheme();
107+
108+
return cloneElement(
109+
children as ReactElement<HTMLAttributes<HTMLOrSVGElement>>,
110+
{
111+
...props,
112+
className: css({ fontSize: 16, color: theme.palette.text.secondary }),
113+
},
114+
);
115+
};

‎site/src/components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,26 @@ interface TooltipProps {
2828
ariaLabel?: string;
2929
}
3030

31-
export const WorkspaceOutdatedTooltip: FC<TooltipProps> = ({
32-
onUpdateVersion,
33-
ariaLabel,
34-
latestVersionId,
35-
templateName,
36-
}) => {
37-
const { data: activeVersion } = useQuery(templateVersion(latestVersionId));
38-
const theme = useTheme();
39-
31+
export const WorkspaceOutdatedTooltip: FC<TooltipProps> = (props) => {
4032
return (
4133
<HelpTooltip
4234
size="small"
4335
icon={InfoIcon}
4436
iconStyles={styles.icon}
4537
buttonStyles={styles.button}
4638
>
39+
<OutdatedTooltipContent {...props} />
40+
</HelpTooltip>
41+
);
42+
};
43+
44+
export const OutdatedTooltipContent = (props: TooltipProps) => {
45+
const theme = useTheme();
46+
const { onUpdateVersion, ariaLabel, latestVersionId, templateName } = props;
47+
const { data: activeVersion } = useQuery(templateVersion(latestVersionId));
48+
49+
return (
50+
<>
4751
<HelpTooltipTitle>{Language.outdatedLabel}</HelpTooltipTitle>
4852
<HelpTooltipText>{Language.versionTooltipText}</HelpTooltipText>
4953

@@ -81,16 +85,16 @@ export const WorkspaceOutdatedTooltip: FC<TooltipProps> = ({
8185
</div>
8286
</div>
8387

84-
<HelpTooltipLinksGroup>
88+
{/* <HelpTooltipLinksGroup>
8589
<HelpTooltipAction
8690
icon={RefreshIcon}
8791
onClick={onUpdateVersion}
8892
ariaLabel={ariaLabel}
8993
>
9094
{Language.updateVersionLabel}
9195
</HelpTooltipAction>
92-
</HelpTooltipLinksGroup>
93-
</HelpTooltip>
96+
</HelpTooltipLinksGroup> */}
97+
</>
9498
);
9599
};
96100

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

Lines changed: 80 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { type Interpolation, type Theme } from "@emotion/react";
22
import Button from "@mui/material/Button";
33
import AlertTitle from "@mui/material/AlertTitle";
44
import { type FC, useEffect, useState } from "react";
5-
import { useNavigate } from "react-router-dom";
5+
import { useNavigate, Link as RouterLink } from "react-router-dom";
66
import dayjs from "dayjs";
77
import type * as TypesGen from "api/typesGenerated";
88
import { Alert, AlertDetail } from "components/Alert/Alert";
@@ -28,6 +28,28 @@ import {
2828
import { BuildsTable } from "./BuildsTable";
2929
import { WorkspaceDeletedBanner } from "./WorkspaceDeletedBanner";
3030
import { WorkspaceStats } from "./WorkspaceStats";
31+
import {
32+
Topbar,
33+
TopbarAvatar,
34+
TopbarData,
35+
TopbarDivider,
36+
TopbarIcon,
37+
TopbarIconButton,
38+
} from "components/FullPageLayout/Topbar";
39+
import Tooltip from "@mui/material/Tooltip";
40+
import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
41+
import { useTheme } from "@mui/material/styles";
42+
import PersonOutlineOutlined from "@mui/icons-material/PersonOutlineOutlined";
43+
import LayersOutlined from "@mui/icons-material/LayersOutlined";
44+
import {
45+
OutdatedTooltipContent,
46+
WorkspaceOutdatedTooltip,
47+
} from "components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip";
48+
import {
49+
Popover,
50+
PopoverContent,
51+
PopoverTrigger,
52+
} from "components/Popover/Popover";
3153

3254
export type WorkspaceError =
3355
| "getBuildsError"
@@ -114,6 +136,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
114136
hasMoreBuilds,
115137
canAutostart,
116138
}) => {
139+
const theme = useTheme();
117140
const navigate = useNavigate();
118141
const { saveLocal, getLocal } = useLocalStorage();
119142

@@ -166,7 +189,61 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
166189

167190
return (
168191
<>
169-
<FullWidthPageHeader>
192+
<Topbar>
193+
<Tooltip title="Back to workspaces">
194+
<TopbarIconButton component={RouterLink} to="workspaces">
195+
<ArrowBackOutlined />
196+
</TopbarIconButton>
197+
</Tooltip>
198+
199+
<div
200+
css={{
201+
paddingLeft: 16,
202+
display: "flex",
203+
alignItems: "center",
204+
gap: 32,
205+
}}
206+
>
207+
<TopbarData>
208+
<TopbarAvatar src={workspace.template_icon} />
209+
<span css={{ fontWeight: 500 }}>{workspace.name}</span>
210+
<TopbarDivider />
211+
<span>
212+
{workspace.template_display_name ?? workspace.template_name}
213+
</span>
214+
<TopbarDivider />
215+
{workspace.outdated ? (
216+
<Popover mode="hover">
217+
<PopoverTrigger>
218+
<span css={{ color: theme.palette.warning.light }}>
219+
{workspace.latest_build.template_version_name}
220+
</span>
221+
</PopoverTrigger>
222+
<PopoverContent>
223+
<OutdatedTooltipContent
224+
templateName={workspace.template_name}
225+
latestVersionId={workspace.template_active_version_id}
226+
onUpdateVersion={handleUpdate}
227+
ariaLabel="update version"
228+
/>
229+
</PopoverContent>
230+
</Popover>
231+
) : (
232+
<span css={{ color: theme.palette.text.secondary }}>
233+
{workspace.latest_build.template_version_name}
234+
</span>
235+
)}
236+
</TopbarData>
237+
238+
<TopbarData>
239+
<TopbarIcon>
240+
<PersonOutlineOutlined />
241+
</TopbarIcon>
242+
<span>{workspace.owner_name}</span>
243+
</TopbarData>
244+
</div>
245+
</Topbar>
246+
{/* <FullWidthPageHeader>
170247
<Stack direction="row" spacing={3} alignItems="center">
171248
<Avatar
172249
size="md"
@@ -214,7 +291,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
214291
/>
215292
</PageHeaderActions>
216293
)}
217-
</FullWidthPageHeader>
294+
</FullWidthPageHeader> */}
218295

219296
<Margins css={styles.content}>
220297
<Stack direction="column" css={styles.firstColumnSpacer} spacing={4}>

0 commit comments

Comments
 (0)