Skip to content

fix: fix workspace actions options (#13572) #14071

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 2 commits into from
Aug 1, 2024
Merged

fix: fix workspace actions options (#13572) #14071

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ffc868a
fix: fix workspace actions options (#13572)
aslilac Jun 17, 2024
2c2b8c4
fix: change time format string from 15:40 to 15:04 (#14033)
angrycub Jul 26, 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
fix: fix workspace actions options (#13572) 
(cherry picked from commit 07cd9ac)
  • Loading branch information
@aslilac @coadler
aslilac authored and coadler committed Jul 31, 2024
commit ffc868a0b0bc0451bb5b3f9fc7b3a6c87d10fd6b
24 changes: 18 additions & 6 deletions site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,21 @@ export const StartButton: FC<ActionButtonPropsWithWorkspace> = ({
);
};

export const UpdateAndStartButton: FC<ActionButtonProps> = ({
handleAction,
}) => {
return (
<Tooltip title="This template requires automatic updates on workspace startup. Contact your administrator if you want to preserve the template version.">
<TopbarButton
startIcon={<PlayCircleOutlineIcon />}
onClick={() => handleAction()}
>
Update and start&hellip;
</TopbarButton>
</Tooltip>
);
};

export const StopButton: FC<ActionButtonProps> = ({
handleAction,
loading,
Expand Down Expand Up @@ -146,16 +161,13 @@ export const RestartButton: FC<ActionButtonPropsWithWorkspace> = ({
);
};

export const UpdateAndStartButton: FC<ActionButtonProps> = ({
export const UpdateAndRestartButton: FC<ActionButtonProps> = ({
handleAction,
}) => {
return (
<Tooltip title="This template requires automatic updates on workspace startup. Contact your administrator if you want to preserve the template version.">
<TopbarButton
startIcon={<PlayCircleOutlineIcon />}
onClick={() => handleAction()}
>
Update and start&hellip;
<TopbarButton startIcon={<ReplayIcon />} onClick={() => handleAction()}>
Update and restart&hellip;
</TopbarButton>
</Tooltip>
);
Expand Down
102 changes: 69 additions & 33 deletions site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,93 +26,128 @@ export const Running: Story = {
},
};

export const Stopping: Story = {
export const RunningUpdateAvailable: Story = {
name: "Running (Update available)",
args: {
workspace: Mocks.MockStoppingWorkspace,
workspace: {
...Mocks.MockWorkspace,
outdated: true,
},
},
};

export const Stopped: Story = {
export const RunningRequireActiveVersion: Story = {
name: "Running (No required update)",
args: {
workspace: Mocks.MockStoppedWorkspace,
workspace: {
...Mocks.MockWorkspace,
template_require_active_version: true,
},
},
};

export const Canceling: Story = {
export const RunningUpdateRequired: Story = {
name: "Running (Update Required)",
args: {
workspace: Mocks.MockCancelingWorkspace,
workspace: {
...Mocks.MockWorkspace,
template_require_active_version: true,
outdated: true,
},
},
};

export const Canceled: Story = {
export const Stopping: Story = {
args: {
workspace: Mocks.MockCanceledWorkspace,
workspace: Mocks.MockStoppingWorkspace,
},
};

export const Deleting: Story = {
export const Stopped: Story = {
args: {
workspace: Mocks.MockDeletingWorkspace,
workspace: Mocks.MockStoppedWorkspace,
},
};

export const Deleted: Story = {
export const StoppedUpdateAvailable: Story = {
name: "Stopped (Update available)",
args: {
workspace: Mocks.MockDeletedWorkspace,
workspace: {
...Mocks.MockStoppedWorkspace,
outdated: true,
},
},
};

export const Outdated: Story = {
export const StoppedRequireActiveVersion: Story = {
name: "Stopped (No required update)",
args: {
workspace: {
...Mocks.MockStoppedWorkspace,
template_require_active_version: true,
},
},
};

export const StoppedUpdateRequired: Story = {
name: "Stopped (Update Required)",
args: {
workspace: {
...Mocks.MockStoppedWorkspace,
template_require_active_version: true,
outdated: true,
},
},
};

export const Updating: Story = {
args: {
workspace: Mocks.MockOutdatedWorkspace,
isUpdating: true,
},
};

export const Failed: Story = {
export const Restarting: Story = {
args: {
workspace: Mocks.MockFailedWorkspace,
workspace: Mocks.MockStoppingWorkspace,
isRestarting: true,
},
};

export const FailedWithDebug: Story = {
export const Canceling: Story = {
args: {
workspace: Mocks.MockFailedWorkspace,
canDebug: true,
workspace: Mocks.MockCancelingWorkspace,
},
};

export const Updating: Story = {
export const Deleting: Story = {
args: {
isUpdating: true,
workspace: Mocks.MockOutdatedWorkspace,
workspace: Mocks.MockDeletingWorkspace,
},
};

export const RequireActiveVersionStarted: Story = {
export const Deleted: Story = {
args: {
workspace: Mocks.MockOutdatedRunningWorkspaceRequireActiveVersion,
canChangeVersions: false,
workspace: Mocks.MockDeletedWorkspace,
},
};

export const RequireActiveVersionStopped: Story = {
export const Outdated: Story = {
args: {
workspace: Mocks.MockOutdatedStoppedWorkspaceRequireActiveVersion,
canChangeVersions: false,
workspace: Mocks.MockOutdatedWorkspace,
},
};

export const AlwaysUpdateStarted: Story = {
export const Failed: Story = {
args: {
workspace: Mocks.MockOutdatedRunningWorkspaceAlwaysUpdate,
canChangeVersions: true,
workspace: Mocks.MockFailedWorkspace,
},
};

export const AlwaysUpdateStopped: Story = {
export const FailedWithDebug: Story = {
args: {
workspace: Mocks.MockOutdatedStoppedWorkspaceAlwaysUpdate,
canChangeVersions: true,
workspace: Mocks.MockFailedWorkspace,
canDebug: true,
},
};

Expand All @@ -125,6 +160,7 @@ export const CancelShownForOwner: Story = {
isOwner: true,
},
};

export const CancelShownForUser: Story = {
args: {
workspace: Mocks.MockStartingWorkspace,
Expand Down
43 changes: 15 additions & 28 deletions site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
ActivateButton,
FavoriteButton,
UpdateAndStartButton,
UpdateAndRestartButton,
} from "./Buttons";
import { type ActionType, abilitiesByWorkspaceStatus } from "./constants";
import { DebugButton } from "./DebugButton";
Expand Down Expand Up @@ -85,12 +86,12 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({

const mustUpdate = mustUpdateWorkspace(workspace, canChangeVersions);
const tooltipText = getTooltipText(workspace, mustUpdate, canChangeVersions);
const canBeUpdated = workspace.outdated && canAcceptJobs;

// A mapping of button type to the corresponding React component
const buttonMapping: Record<ActionType, ReactNode> = {
update: <UpdateButton handleAction={handleUpdate} />,
updateAndStart: <UpdateAndStartButton handleAction={handleUpdate} />,
updateAndRestart: <UpdateAndRestartButton handleAction={handleUpdate} />,
updating: <UpdateButton loading handleAction={handleUpdate} />,
start: (
<StartButton
Expand Down Expand Up @@ -148,43 +149,29 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
enableBuildParameters={workspace.latest_build.transition === "start"}
/>
),
toggleFavorite: (
<FavoriteButton
workspaceID={workspace.id}
isFavorite={workspace.favorite}
onToggle={handleToggleFavorite}
/>
),
};

return (
<div
css={{ display: "flex", alignItems: "center", gap: 8 }}
data-testid="workspace-actions"
>
{canBeUpdated && (
<>
{isUpdating
? buttonMapping.updating
: workspace.template_require_active_version
? buttonMapping.updateAndStart
: buttonMapping.update}
</>
)}

{!canBeUpdated &&
workspace.template_require_active_version &&
buttonMapping.start}

{isRestarting
? buttonMapping.restarting
: actions.map((action) => (
<Fragment key={action}>{buttonMapping[action]}</Fragment>
))}
{/* Restarting must be handled separately, because it otherwise would appear as stopping */}
{isUpdating
? buttonMapping.updating
: isRestarting
? buttonMapping.restarting
: actions.map((action) => (
<Fragment key={action}>{buttonMapping[action]}</Fragment>
))}

{showCancel && <CancelButton handleAction={handleCancel} />}

{buttonMapping.toggleFavorite}
<FavoriteButton
workspaceID={workspace.id}
isFavorite={workspace.favorite}
onToggle={handleToggleFavorite}
/>

<MoreMenu>
<MoreMenuTrigger>
Expand Down
Loading
Loading