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

Show file tree
Hide file tree
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
Next Next commit
chore: move schedule controls to the right side of the screen
  • Loading branch information
@Parkreiner
Parkreiner committed Sep 4, 2024
commit f90f08854b8eab00d8db28a876d602a0ec330659
6 changes: 6 additions & 0 deletions site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,12 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
(n) => n.severity === "warning",
);

// We have to avoid rendering out a div at all if there is no content so
// that we don't introduce additional gaps via the parent flex container
if (infoNotifications.length === 0 && warningNotifications.length === 0) {
return null;
}

return (
<div css={styles.notificationsGroup}>
{infoNotifications.length > 0 && (
Expand Down
11 changes: 7 additions & 4 deletions site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,15 @@ import {
} from "utils/schedule";
import { isWorkspaceOn } from "utils/workspace";

export interface WorkspaceScheduleContainerProps {
interface WorkspaceScheduleContainerProps {
children?: ReactNode;
onClickIcon?: () => void;
}

export const WorkspaceScheduleContainer: FC<
WorkspaceScheduleContainerProps
> = ({ children, onClickIcon }) => {
const WorkspaceScheduleContainer: FC<WorkspaceScheduleContainerProps> = ({
children,
onClickIcon,
}) => {
const icon = (
<TopbarIcon>
<ScheduleOutlined aria-label="Schedule" />
Expand All @@ -49,6 +50,7 @@ export const WorkspaceScheduleContainer: FC<
<Tooltip title="Schedule">
{onClickIcon ? (
<button
type="button"
data-testid="schedule-icon-button"
onClick={onClickIcon}
css={styles.scheduleIconButton}
Expand Down Expand Up @@ -294,6 +296,7 @@ const styles = {
padding: 0,
fontSize: "inherit",
lineHeight: "inherit",
cursor: "pointer",
},

scheduleValue: {
Expand Down
113 changes: 58 additions & 55 deletions site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,8 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
rowGap: 8,
flexWrap: "wrap",
// 12px - It is needed to keep vertical spacing when the content is wrapped
padding: "12px 0 12px 16px",
padding: "12px",
marginRight: "auto",
}}
>
<TopbarData>
Expand All @@ -144,7 +145,9 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
<Tooltip title="Owner">
<span>{workspace.owner_name}</span>
</Tooltip>

<TopbarDivider />

<Popover mode="hover">
<PopoverTrigger>
<span
Expand Down Expand Up @@ -200,16 +203,6 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
</Popover>
</TopbarData>

{!isImmutable && (
<WorkspaceScheduleControls
workspace={workspace}
template={template}
canUpdateSchedule={
canUpdateWorkspace && template.allow_user_autostop
}
/>
)}

{shouldDisplayDormantData && (
<TopbarData>
<TopbarIcon>
Expand All @@ -221,7 +214,13 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
title="Schedule settings"
css={{ color: "inherit" }}
>
Deletion on {new Date(workspace.deleting_at!).toLocaleString()}
{workspace.deleting_at ? (
<>
Deletion on {new Date(workspace.deleting_at).toLocaleString()}
</>
) : (
"Deleting soon"
)}
</Link>
</TopbarData>
)}
Expand All @@ -244,49 +243,53 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
)}
</div>

<div
css={{
marginLeft: "auto",
display: "flex",
alignItems: "center",
gap: 12,
}}
>
{!isImmutable && (
<>
<WorkspaceNotifications
workspace={workspace}
template={template}
latestVersion={latestVersion}
permissions={permissions}
onRestartWorkspace={handleRestart}
onUpdateWorkspace={handleUpdate}
onActivateWorkspace={handleDormantActivate}
/>
<WorkspaceStatusBadge workspace={workspace} />
<WorkspaceActions
workspace={workspace}
handleStart={handleStart}
handleStop={handleStop}
handleRestart={handleRestart}
handleDelete={handleDelete}
handleUpdate={handleUpdate}
handleCancel={handleCancel}
handleSettings={handleSettings}
handleRetry={handleRetry}
handleDebug={handleDebug}
handleChangeVersion={handleChangeVersion}
handleDormantActivate={handleDormantActivate}
handleToggleFavorite={handleToggleFavorite}
canDebug={canDebugMode}
canChangeVersions={canChangeVersions}
isUpdating={isUpdating}
isRestarting={isRestarting}
isOwner={isOwner}
/>
</>
)}
</div>
{!isImmutable && (
Copy link
Member Author

@Parkreiner Parkreiner Sep 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

All that changed was that, with WorkspaceScheduleControls moving to the right of the screen, I can now have everything grouped under a single check of the immutable variable

So the parent <div> got moved inside, too, since, even if it doesn't render, the user won't notice

<div
css={{
display: "flex",
alignItems: "center",
gap: 8,
}}
>
<WorkspaceScheduleControls
workspace={workspace}
template={template}
canUpdateSchedule={
canUpdateWorkspace && template.allow_user_autostop
}
/>
<WorkspaceNotifications
workspace={workspace}
template={template}
latestVersion={latestVersion}
permissions={permissions}
onRestartWorkspace={handleRestart}
onUpdateWorkspace={handleUpdate}
onActivateWorkspace={handleDormantActivate}
/>
<WorkspaceStatusBadge workspace={workspace} />
<WorkspaceActions
workspace={workspace}
handleStart={handleStart}
handleStop={handleStop}
handleRestart={handleRestart}
handleDelete={handleDelete}
handleUpdate={handleUpdate}
handleCancel={handleCancel}
handleSettings={handleSettings}
handleRetry={handleRetry}
handleDebug={handleDebug}
handleChangeVersion={handleChangeVersion}
handleDormantActivate={handleDormantActivate}
handleToggleFavorite={handleToggleFavorite}
canDebug={canDebugMode}
canChangeVersions={canChangeVersions}
isUpdating={isUpdating}
isRestarting={isRestarting}
isOwner={isOwner}
/>
</div>
)}
</Topbar>
);
};