Skip to content

chore: update workspaces top bar to display org name #14596

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 17 commits into from
Sep 16, 2024
Merged

chore: update workspaces top bar to display org name #14596

Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
f90f088
chore: move schedule controls to the right side of the screen
Parkreiner Sep 4, 2024
4956ebb
chore: add org display to workspace topbar
Parkreiner Sep 4, 2024
43ce786
fix: force organizations to be readonly array
Parkreiner Sep 4, 2024
6570b51
Merge branch 'main' into mes/filter-work-1
Parkreiner Sep 5, 2024
b2512a7
fix update type mismatch for organizations again
Parkreiner Sep 5, 2024
6829017
fix: update quota querying logic to use new endpoint
Parkreiner Sep 6, 2024
dcfb84f
fix: add logic for handling long workspace or org names
Parkreiner Sep 6, 2024
836a2d4
chore: add links for workspaces by org
Parkreiner Sep 6, 2024
6696c0a
chore: expand tooltip styling for org
Parkreiner Sep 6, 2024
de554d6
chore: expand tooltip styling for owner
Parkreiner Sep 6, 2024
3b410f7
refactor: split off breadcrumbs for readability
Parkreiner Sep 6, 2024
c8f9226
fix: display correct template version name in dropdown
Parkreiner Sep 6, 2024
36eba47
fix: update overflow styling for breadcrumb segments
Parkreiner Sep 9, 2024
5e0689d
fix: favor org display name
Parkreiner Sep 9, 2024
7c1e859
fix: centralize org display name logic
Parkreiner Sep 9, 2024
17a9e8c
Merge branch 'main' into mes/filter-work-1
Parkreiner Sep 12, 2024
775486f
fix: ensure that mock query cache key and component key are properly …
Parkreiner Sep 13, 2024
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
refactor: split off breadcrumbs for readability
  • Loading branch information
@Parkreiner
Parkreiner committed Sep 6, 2024
commit 3b410f74ee075b66544f507952f1dd89a4e0c3ee
356 changes: 197 additions & 159 deletions site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useTheme } from "@emotion/react";
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
import DeleteOutline from "@mui/icons-material/DeleteOutline";
import QuotaIcon from "@mui/icons-material/MonetizationOnOutlined";
Expand Down Expand Up @@ -132,174 +132,37 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
</TopbarIconButton>
</Tooltip>

<div
css={{
display: "flex",
alignItems: "center",
columnGap: 24,
rowGap: 8,
flexWrap: "wrap",
// 12px - It is needed to keep vertical spacing when the content is wrapped
padding: "12px",
marginRight: "auto",
}}
>
<div css={styles.topbarLeft}>
<TopbarData>
<Popover mode="hover">
<PopoverTrigger>
<span
css={{
display: "flex",
flexFlow: "row nowrap",
gap: "8px",
maxWidth: "160px",
textOverflow: "ellipsis",
overflowX: "hidden",
whiteSpace: "nowrap",
cursor: "default",
}}
>
<UserAvatar
size="xs"
username={workspace.owner_name}
avatarURL={workspace.owner_avatar_url}
/>

{workspace.owner_name}
</span>
</PopoverTrigger>

<HelpTooltipContent
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
transformOrigin={{ vertical: "top", horizontal: "center" }}
>
<AvatarData
title={workspace.owner_name}
subtitle="Owner"
avatar={workspace.owner_avatar_url}
/>
</HelpTooltipContent>
</Popover>
<OwnerBreadcrumb
ownerName={workspace.owner_name}
ownerAvatarUrl={workspace.owner_avatar_url}
/>

{showOrganizations && (
<>
<TopbarDivider />

<Popover mode="hover">
<PopoverTrigger>
<span
css={{
display: "flex",
flexFlow: "row nowrap",
gap: "8px",
maxWidth: "160px",
textOverflow: "ellipsis",
overflowX: "hidden",
whiteSpace: "nowrap",
cursor: "default",
}}
>
{activeOrg && (
<UserAvatar
size="xs"
username={activeOrg.display_name}
avatarURL={activeOrg.icon}
/>
)}

{workspace.organization_name}
</span>
</PopoverTrigger>

<HelpTooltipContent
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
transformOrigin={{ vertical: "top", horizontal: "center" }}
>
<AvatarData
title={
showOrganizations ? (
<Link
component={RouterLink}
to={`/organizations/${encodeURIComponent(workspace.organization_name)}`}
css={{ color: "inherit" }}
>
{workspace.organization_name}
</Link>
) : (
workspace.organization_name
)
}
subtitle="Organization"
avatar={
activeOrg !== undefined && (
<ExternalAvatar
src={activeOrg.icon}
variant="square"
fitImage
/>
)
}
/>
</HelpTooltipContent>
</Popover>
<OrganizationBreadcrumb
orgName={workspace.organization_name}
orgIconUrl={activeOrg?.icon}
orgPageUrl={
showOrganizations
? `/organizations/${encodeURIComponent(workspace.organization_name)}`
: undefined
}
/>
</>
)}

<TopbarDivider />

<Popover mode="hover">
<PopoverTrigger>
<span
css={{
display: "flex",
alignItems: "center",
gap: 8,
cursor: "default",
padding: "4px 0",
}}
>
<TopbarAvatar src={workspace.template_icon} />
<span css={{ fontWeight: 500 }}>{workspace.name}</span>
</span>
</PopoverTrigger>

<HelpTooltipContent
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
transformOrigin={{ vertical: "top", horizontal: "center" }}
>
<AvatarData
title={
<Link
component={RouterLink}
to={templateLink}
css={{ color: "inherit" }}
>
{workspace.template_display_name.length > 0
? workspace.template_display_name
: workspace.template_name}
</Link>
}
subtitle={
<Link
component={RouterLink}
to={`${templateLink}/versions/${workspace.latest_build.template_version_name}`}
css={{ color: "inherit" }}
>
Version: {workspace.latest_build.template_version_name}
</Link>
}
avatar={
workspace.template_icon !== "" && (
<ExternalAvatar
src={workspace.template_icon}
variant="square"
fitImage
/>
)
}
/>
</HelpTooltipContent>
</Popover>
<WorkspaceBreadcrumb
workspaceName={workspace.name}
templateIconUrl={workspace.template_icon}
rootTemplateUrl={templateLink}
templateVersionName={workspace.template_name}
templateVersionDisplayName={workspace.template_display_name}
/>
</TopbarData>

{quota && quota.budget > 0 && (
Expand Down Expand Up @@ -406,3 +269,178 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
</Topbar>
);
};

type OwnerBreadcrumbProps = Readonly<{
ownerName: string;
ownerAvatarUrl: string;
}>;

const OwnerBreadcrumb: FC<OwnerBreadcrumbProps> = ({
ownerName,
ownerAvatarUrl,
}) => {
return (
<Popover mode="hover">
<PopoverTrigger>
<span css={styles.breadcrumbSegment}>
<UserAvatar
size="xs"
username={ownerName}
avatarURL={ownerAvatarUrl}
/>

{ownerName}
</span>
</PopoverTrigger>

<HelpTooltipContent
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
transformOrigin={{ vertical: "top", horizontal: "center" }}
>
<AvatarData
title={ownerName}
subtitle="Owner"
avatar={ownerAvatarUrl}
/>
</HelpTooltipContent>
</Popover>
);
};

type OrganizationBreadcrumbProps = Readonly<{
orgName: string;
orgPageUrl?: string;
orgIconUrl?: string;
}>;

const OrganizationBreadcrumb: FC<OrganizationBreadcrumbProps> = ({
orgName,
orgPageUrl,
orgIconUrl,
}) => {
return (
<Popover mode="hover">
<PopoverTrigger>
<span css={styles.breadcrumbSegment}>
<UserAvatar size="xs" src={orgIconUrl ?? ""} username={orgName} />
{orgName}
</span>
</PopoverTrigger>

<HelpTooltipContent
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
transformOrigin={{ vertical: "top", horizontal: "center" }}
>
<AvatarData
title={
orgPageUrl ? (
<Link
component={RouterLink}
to={orgPageUrl}
css={{ color: "inherit" }}
>
{orgName}
</Link>
) : (
orgName
)
}
subtitle="Organization"
avatar={
orgIconUrl && (
<ExternalAvatar src={orgIconUrl} variant="square" fitImage />
)
}
/>
</HelpTooltipContent>
</Popover>
);
};

type WorkspaceBreadcrumbProps = Readonly<{
workspaceName: string;
templateIconUrl: string;
rootTemplateUrl: string;
templateVersionName: string;
templateVersionDisplayName?: string;
}>;

const WorkspaceBreadcrumb: FC<WorkspaceBreadcrumbProps> = ({
workspaceName,
templateIconUrl,
rootTemplateUrl,
templateVersionName,
templateVersionDisplayName = templateVersionName,
}) => {
return (
<Popover mode="hover">
<PopoverTrigger>
<span
css={{
display: "flex",
alignItems: "center",
gap: 8,
cursor: "default",
padding: "4px 0",
}}
>
<TopbarAvatar src={templateIconUrl} />
<span css={{ fontWeight: 500 }}>{workspaceName}</span>
</span>
</PopoverTrigger>

<HelpTooltipContent
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
transformOrigin={{ vertical: "top", horizontal: "center" }}
>
<AvatarData
title={
<Link
component={RouterLink}
to={rootTemplateUrl}
css={{ color: "inherit" }}
>
{templateVersionDisplayName}
</Link>
}
subtitle={
<Link
component={RouterLink}
to={`${rootTemplateUrl}/versions/${encodeURIComponent(templateVersionName)}`}
css={{ color: "inherit" }}
>
Version: {templateVersionDisplayName}
</Link>
}
avatar={
<ExternalAvatar src={templateIconUrl} variant="square" fitImage />
}
/>
</HelpTooltipContent>
</Popover>
);
};

const styles = {
topbarLeft: {
display: "flex",
alignItems: "center",
columnGap: 24,
rowGap: 8,
flexWrap: "wrap",
// 12px - It is needed to keep vertical spacing when the content is wrapped
padding: "12px",
marginRight: "auto",
},

breadcrumbSegment: {
display: "flex",
flexFlow: "row nowrap",
gap: "8px",
maxWidth: "160px",
textOverflow: "ellipsis",
overflowX: "hidden",
whiteSpace: "nowrap",
cursor: "default",
},
} satisfies Record<string, Interpolation<Theme>>;