Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

fix(site): retry and debug passing build parameters options#12384

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.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
BrunoQuaresma merged 9 commits intomainfrombq/add-retry-button-with-ephemeral
Mar 4, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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
9 changes: 6 additions & 3 deletionssite/src/components/FullPageLayout/Sidebar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -74,14 +74,17 @@ interface SidebarIconButton extends ComponentProps<typeof TopbarIconButton> {
isActive: boolean;
}

export const SidebarIconButton: FC<SidebarIconButton> = (props) => {
export const SidebarIconButton: FC<SidebarIconButton> = ({
isActive,
...buttonProps
}) => {
return (
<TopbarIconButton
css={[
{ opacity: 0.75, "&:hover": { opacity: 1 } },
props.isActive && styles.activeSidebarIconButton,
isActive && styles.activeSidebarIconButton,
]}
{...props}
{...buttonProps}
/>
);
};
Expand Down
34 changes: 10 additions & 24 deletionssite/src/pages/WorkspacePage/Workspace.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
import { type Interpolation, type Theme } from "@emotion/react";
import Button from "@mui/material/Button";
import AlertTitle from "@mui/material/AlertTitle";
import { type FC } from "react";
import { useNavigate } from "react-router-dom";
Expand DownExpand Up@@ -43,9 +42,9 @@ export interface WorkspaceProps {
buildInfo?: TypesGen.BuildInfoResponse;
sshPrefix?: string;
template: TypesGen.Template;
canRetryDebugMode: boolean;
handleBuildRetry: () => void;
handleBuildRetryDebug: () => void;
canDebugMode: boolean;
handleRetry: (buildParameters?: TypesGen.WorkspaceBuildParameter[]) => void;
handleDebug: (buildParameters?: TypesGen.WorkspaceBuildParameter[]) => void;
buildLogs?: React.ReactNode;
latestVersion?: TypesGen.TemplateVersion;
permissions: WorkspacePermissions;
Expand DownExpand Up@@ -75,9 +74,9 @@ export const Workspace: FC<WorkspaceProps> = ({
buildInfo,
sshPrefix,
template,
canRetryDebugMode,
handleBuildRetry,
handleBuildRetryDebug,
canDebugMode,
handleRetry,
handleDebug,
buildLogs,
latestVersion,
permissions,
Expand DownExpand Up@@ -129,12 +128,12 @@ export const Workspace: FC<WorkspaceProps> = ({
handleUpdate={handleUpdate}
handleCancel={handleCancel}
handleSettings={handleSettings}
handleBuildRetry={handleBuildRetry}
handleBuildRetryDebug={handleBuildRetryDebug}
handleRetry={handleRetry}
handleDebug={handleDebug}
handleChangeVersion={handleChangeVersion}
handleDormantActivate={handleDormantActivate}
handleToggleFavorite={handleToggleFavorite}
canRetryDebugMode={canRetryDebugMode}
canDebugMode={canDebugMode}
canChangeVersions={canChangeVersions}
isUpdating={isUpdating}
isRestarting={isRestarting}
Expand DownExpand Up@@ -208,20 +207,7 @@ export const Workspace: FC<WorkspaceProps> = ({
)}

{workspace.latest_build.job.error && (
<Alert
severity="error"
actions={
<Button
onClick={
canRetryDebugMode ? handleBuildRetryDebug : handleBuildRetry
}
variant="text"
size="small"
>
Retry{canRetryDebugMode && " in debug mode"}
</Button>
}
>
<Alert severity="error">
<AlertTitle>Workspace build failed</AlertTitle>
<AlertDetail>{workspace.latest_build.job.error}</AlertDetail>
</Alert>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -32,16 +32,19 @@ import {
usePopover,
} from "components/Popover/Popover";
import { TopbarButton } from "components/FullPageLayout/Topbar";
import visuallyHidden from "@mui/utils/visuallyHidden";

interface BuildParametersPopoverProps {
workspace: Workspace;
disabled?: boolean;
onSubmit: (buildParameters: WorkspaceBuildParameter[]) => void;
label: string;
}

export const BuildParametersPopover: FC<BuildParametersPopoverProps> = ({
workspace,
disabled,
label,
onSubmit,
}) => {
const { data: parameters } = useQuery({
Expand All@@ -62,6 +65,7 @@ export const BuildParametersPopover: FC<BuildParametersPopoverProps> = ({
css={{ paddingLeft: 0, paddingRight: 0, minWidth: "28px !important" }}
>
<ExpandMoreOutlined css={{ fontSize: 14 }} />
<span css={{ ...visuallyHidden }}>{label}</span>
</TopbarButton>
</PopoverTrigger>
<PopoverContent
Expand Down
24 changes: 3 additions & 21 deletionssite/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,16 +7,14 @@ import ReplayIcon from "@mui/icons-material/Replay";
import BlockIcon from "@mui/icons-material/Block";
import OutlinedBlockIcon from "@mui/icons-material/BlockOutlined";
import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
import RetryIcon from "@mui/icons-material/BuildOutlined";
import RetryDebugIcon from "@mui/icons-material/BugReportOutlined";
import Star from "@mui/icons-material/Star";
import StarBorder from "@mui/icons-material/StarBorder";
import { type FC } from "react";
import type { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
import { BuildParametersPopover } from "./BuildParametersPopover";
import { TopbarButton } from "components/FullPageLayout/Topbar";

interface ActionButtonProps {
exportinterface ActionButtonProps {
loading?: boolean;
handleAction: (buildParameters?: WorkspaceBuildParameter[]) => void;
disabled?: boolean;
Expand DownExpand Up@@ -84,6 +82,7 @@ export const StartButton: FC<ActionButtonPropsWithWorkspace> = ({
{loading ? <>Starting&hellip;</> : "Start"}
</TopbarButton>
<BuildParametersPopover
label="Start with build parameters"
workspace={workspace}
disabled={loading}
onSubmit={handleAction}
Expand DownExpand Up@@ -141,6 +140,7 @@ export const RestartButton: FC<ActionButtonPropsWithWorkspace> = ({
{loading ? <>Restarting&hellip;</> : <>Restart&hellip;</>}
</TopbarButton>
<BuildParametersPopover
label="Restart with build parameters"
workspace={workspace}
disabled={loading}
onSubmit={handleAction}
Expand DownExpand Up@@ -175,24 +175,6 @@ export const DisabledButton: FC<DisabledButtonProps> = ({ label }) => {
);
};

type RetryButtonProps = Omit<ActionButtonProps, "loading"> & {
debug?: boolean;
};

export const RetryButton: FC<RetryButtonProps> = ({
handleAction,
debug = false,
}) => {
return (
<TopbarButton
startIcon={debug ? <RetryDebugIcon /> : <RetryIcon />}
onClick={() => handleAction()}
>
Retry{debug && " (Debug)"}
</TopbarButton>
);
};

interface FavoriteButtonProps {
onToggle: (workspaceID: string) => void;
workspaceID: string;
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
import { Meta, StoryObj } from "@storybook/react";
import { DebugButton } from "./DebugButton";
import { MockWorkspace } from "testHelpers/entities";
import { userEvent, waitFor, within, expect } from "@storybook/test";

const meta: Meta<typeof DebugButton> = {
title: "pages/WorkspacePage/DebugButton",
component: DebugButton,
};

export default meta;
type Story = StoryObj<typeof DebugButton>;

export const Default: Story = {};

export const WithBuildParameters: Story = {
args: {
enableBuildParameters: true,
workspace: MockWorkspace,
},
parameters: {
queries: [
{
key: ["workspace", MockWorkspace.id, "parameters"],
data: { templateVersionRichParameters: [], buildParameters: [] },
},
],
},
};

export const WithOpenBuildParameters: Story = {
args: {
enableBuildParameters: true,
workspace: MockWorkspace,
},
parameters: {
queries: [
{
key: ["workspace", MockWorkspace.id, "parameters"],
data: { templateVersionRichParameters: [], buildParameters: [] },
},
],
},
play: async ({ canvasElement, step }) => {
const screen = within(canvasElement);

await step("open popover", async () => {
await userEvent.click(screen.getByTestId("build-parameters-button"));
await waitFor(() =>
expect(screen.getByText("Build Options")).toBeInTheDocument(),
);
});
},
};
47 changes: 47 additions & 0 deletionssite/src/pages/WorkspacePage/WorkspaceActions/DebugButton.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
import ButtonGroup from "@mui/material/ButtonGroup";
import DebugIcon from "@mui/icons-material/BugReportOutlined";
import { type FC } from "react";
import type { Workspace } from "api/typesGenerated";
import { BuildParametersPopover } from "./BuildParametersPopover";
import { TopbarButton } from "components/FullPageLayout/Topbar";
import { ActionButtonProps } from "./Buttons";

type DebugButtonProps = Omit<ActionButtonProps, "loading"> & {
workspace: Workspace;
enableBuildParameters: boolean;
};

export const DebugButton: FC<DebugButtonProps> = ({
handleAction,
workspace,
enableBuildParameters,
}) => {
const mainAction = (
<TopbarButton startIcon={<DebugIcon />} onClick={() => handleAction()}>
Debug
</TopbarButton>
);

if (!enableBuildParameters) {
return mainAction;
}

return (
<ButtonGroup
variant="outlined"
css={{
// Workaround to make the border transitions smoothly on button groups
"& > button:hover + button": {
borderLeft: "1px solid #FFF",
},
}}
>
{mainAction}
<BuildParametersPopover
label="Debug with build parameters"
workspace={workspace}
onSubmit={handleAction}
/>
</ButtonGroup>
);
};
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
import { Meta, StoryObj } from "@storybook/react";
import { RetryButton } from "./RetryButton";
import { MockWorkspace } from "testHelpers/entities";
import { userEvent, waitFor, within, expect } from "@storybook/test";

const meta: Meta<typeof RetryButton> = {
title: "pages/WorkspacePage/RetryButton",
component: RetryButton,
};

export default meta;
type Story = StoryObj<typeof RetryButton>;

export const Default: Story = {};

export const WithBuildParameters: Story = {
args: {
enableBuildParameters: true,
workspace: MockWorkspace,
},
parameters: {
queries: [
{
key: ["workspace", MockWorkspace.id, "parameters"],
data: { templateVersionRichParameters: [], buildParameters: [] },
},
],
},
};

export const WithOpenBuildParameters: Story = {
args: {
enableBuildParameters: true,
workspace: MockWorkspace,
},
parameters: {
queries: [
{
key: ["workspace", MockWorkspace.id, "parameters"],
data: { templateVersionRichParameters: [], buildParameters: [] },
},
],
},
play: async ({ canvasElement, step }) => {
const screen = within(canvasElement);

await step("open popover", async () => {
await userEvent.click(screen.getByTestId("build-parameters-button"));
await waitFor(() =>
expect(screen.getByText("Build Options")).toBeInTheDocument(),
);
});
},
};
47 changes: 47 additions & 0 deletionssite/src/pages/WorkspacePage/WorkspaceActions/RetryButton.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
import ButtonGroup from "@mui/material/ButtonGroup";
import RetryIcon from "@mui/icons-material/CachedOutlined";
import { type FC } from "react";
import type { Workspace } from "api/typesGenerated";
import { BuildParametersPopover } from "./BuildParametersPopover";
import { TopbarButton } from "components/FullPageLayout/Topbar";
import { ActionButtonProps } from "./Buttons";

type RetryButtonProps = Omit<ActionButtonProps, "loading"> & {
enableBuildParameters: boolean;
workspace: Workspace;
};

export const RetryButton: FC<RetryButtonProps> = ({
handleAction,
workspace,
enableBuildParameters,
}) => {
const mainAction = (
<TopbarButton startIcon={<RetryIcon />} onClick={() => handleAction()}>
Retry
</TopbarButton>
);

if (!enableBuildParameters) {
return mainAction;
}

return (
<ButtonGroup
variant="outlined"
css={{
// Workaround to make the border transitions smoothly on button groups
"& > button:hover + button": {
borderLeft: "1px solid #FFF",
},
}}
>
{mainAction}
<BuildParametersPopover
label="Retry with build parameters"
workspace={workspace}
onSubmit={handleAction}
/>
</ButtonGroup>
);
};
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -73,6 +73,13 @@ export const Failed: Story = {
},
};

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

export const Updating: Story = {
args: {
isUpdating: true,
Expand Down
Loading

[8]ページ先頭

©2009-2025 Movatter.jp