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

chore: refactor frontend to use workspace status directly#4361

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
presleyp merged 11 commits intomainfromws-status/presleyp
Oct 5, 2022
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
33 changes: 12 additions & 21 deletionssite/src/components/DropdownButton/ActionCtas.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,72 +7,63 @@ import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline"
import PlayCircleOutlineIcon from "@material-ui/icons/PlayCircleOutline"
import { LoadingButton } from "components/LoadingButton/LoadingButton"
import { FC } from "react"
import { useTranslation } from "react-i18next"
import { combineClasses } from "util/combineClasses"
import { WorkspaceStateEnum } from "util/workspace"
import { WorkspaceActionButton } from "../WorkspaceActionButton/WorkspaceActionButton"

export const Language = {
start: "Start",
stop: "Stop",
delete: "Delete",
cancel: "Cancel",
update: "Update",
updating: "Updating",
// these labels are used in WorkspaceActions.tsx
starting: "Starting...",
stopping: "Stopping...",
deleting: "Deleting...",
}

interface WorkspaceAction {
handleAction: () => void
}

export const UpdateButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({ handleAction }) => {
const styles = useStyles()
const { t } = useTranslation("workspacePage")

return (
<Button className={styles.actionButton} startIcon={<CloudQueueIcon />} onClick={handleAction}>
{Language.update}
{t("actionButton.update")}
</Button>
)
}

export const StartButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({ handleAction }) => {
const styles = useStyles()
const { t } = useTranslation("workspacePage")

return (
<WorkspaceActionButton
className={styles.actionButton}
icon={<PlayCircleOutlineIcon />}
onClick={handleAction}
label={Language.start}
label={t("actionButton.start")}
/>
)
}

export const StopButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({ handleAction }) => {
const styles = useStyles()
const { t } = useTranslation("workspacePage")

return (
<WorkspaceActionButton
className={styles.actionButton}
icon={<CropSquareIcon />}
onClick={handleAction}
label={Language.stop}
label={t("actionButton.stop")}
/>
)
}

export const DeleteButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({ handleAction }) => {
const styles = useStyles()
const { t } = useTranslation("workspacePage")

return (
<WorkspaceActionButton
className={styles.actionButton}
icon={<DeleteOutlineIcon />}
onClick={handleAction}
label={Language.delete}
label={t("actionButton.delete")}
/>
)
}
Expand All@@ -92,15 +83,15 @@ export const CancelButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({ han
}

interface DisabledProps {
workspaceState: WorkspaceStateEnum
label: string
}

export const DisabledButton: FC<React.PropsWithChildren<DisabledProps>> = ({workspaceState }) => {
export const DisabledButton: FC<React.PropsWithChildren<DisabledProps>> = ({label }) => {
const styles = useStyles()

return (
<Button disabled className={styles.actionButton}>
{workspaceState}
{label}
</Button>
)
}
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import { action } from "@storybook/addon-actions"
import { Story } from "@storybook/react"
import { WorkspaceStateEnum } from "util/workspace"
import { DeleteButton, DisabledButton, StartButton, UpdateButton } from "./ActionCtas"
import { DropdownButton, DropdownButtonProps } from "./DropdownButton"

Expand All@@ -23,7 +22,7 @@ WithDropdown.args = {

export const WithCancel = Template.bind({})
WithCancel.args = {
primaryAction: <DisabledButtonworkspaceState={WorkspaceStateEnum.deleting} />,
primaryAction: <DisabledButtonworkspaceStatus="deleting" />,
Copy link
Contributor

Choose a reason for hiding this comment

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

Curious why we're no longer using the enum here?

Copy link
ContributorAuthor

Choose a reason for hiding this comment

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

The WorkspaceStatus type is defined by the backend now

secondaryActions: [],
canCancel: true,
handleCancel: action("cancel"),
Expand Down
46 changes: 18 additions & 28 deletionssite/src/components/Workspace/Workspace.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,8 @@ export default {

const Template: Story<WorkspaceProps> = (args) => <Workspace {...args} />

export constStarted = Template.bind({})
Started.args = {
export constRunning = Template.bind({})
Running.args = {
bannerProps: {
isLoading: false,
onExtend: action("extend"),
Expand DownExpand Up@@ -53,42 +53,32 @@ Started.args = {

export const WithoutUpdateAccess = Template.bind({})
WithoutUpdateAccess.args = {
...Started.args,
...Running.args,
canUpdateWorkspace: false,
}

export const Starting = Template.bind({})
Starting.args = {
...Started.args,
...Running.args,
workspace: Mocks.MockStartingWorkspace,
}

export const Stopped = Template.bind({})
Stopped.args = {
...Started.args,
...Running.args,
workspace: Mocks.MockStoppedWorkspace,
}

export const Stopping = Template.bind({})
Stopping.args = {
...Started.args,
...Running.args,
workspace: Mocks.MockStoppingWorkspace,
}

export const Error = Template.bind({})
Error.args = {
...Started.args,
workspace: {
...Mocks.MockFailedWorkspace,
latest_build: {
...Mocks.MockWorkspaceBuild,
job: {
...Mocks.MockProvisionerJob,
status: "failed",
},
transition: "start",
},
},
export const Failed = Template.bind({})
Failed.args = {
...Running.args,
workspace: Mocks.MockFailedWorkspace,
workspaceErrors: {
[WorkspaceErrors.BUILD_ERROR]: Mocks.makeMockApiError({
message: "A workspace build is already active.",
Expand All@@ -98,37 +88,37 @@ Error.args = {

export const Deleting = Template.bind({})
Deleting.args = {
...Started.args,
...Running.args,
workspace: Mocks.MockDeletingWorkspace,
}

export const Deleted = Template.bind({})
Deleted.args = {
...Started.args,
...Running.args,
workspace: Mocks.MockDeletedWorkspace,
}

export const Canceling = Template.bind({})
Canceling.args = {
...Started.args,
...Running.args,
workspace: Mocks.MockCancelingWorkspace,
}

export const Canceled = Template.bind({})
Canceled.args = {
...Started.args,
...Running.args,
workspace: Mocks.MockCanceledWorkspace,
}

export const Outdated = Template.bind({})
Outdated.args = {
...Started.args,
...Running.args,
workspace: Mocks.MockOutdatedWorkspace,
}

export const GetBuildsError = Template.bind({})
GetBuildsError.args = {
...Started.args,
...Running.args,
workspaceErrors: {
[WorkspaceErrors.GET_BUILDS_ERROR]: Mocks.makeMockApiError({
message: "There is a problem fetching builds.",
Expand All@@ -138,7 +128,7 @@ GetBuildsError.args = {

export const GetResourcesError = Template.bind({})
GetResourcesError.args = {
...Started.args,
...Running.args,
workspaceErrors: {
[WorkspaceErrors.GET_RESOURCES_ERROR]: Mocks.makeMockApiError({
message: "There is a problem fetching workspace resources.",
Expand All@@ -148,7 +138,7 @@ GetResourcesError.args = {

export const CancellationError = Template.bind({})
CancellationError.args = {
...Error.args,
...Failed.args,
workspaceErrors: {
[WorkspaceErrors.CANCELLATION_ERROR]: Mocks.makeMockApiError({
message: "Job could not be canceled.",
Expand Down
3 changes: 2 additions & 1 deletionsite/src/components/Workspace/Workspace.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -100,7 +100,8 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
canUpdateWorkspace={canUpdateWorkspace}
/>
<WorkspaceActions
workspace={workspace}
workspaceStatus={workspace.latest_build.status}
isOutdated={workspace.outdated}
handleStart={handleStart}
handleStop={handleStop}
handleDelete={handleDelete}
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,72 +16,74 @@ const defaultArgs = {
handleDelete: action("delete"),
handleUpdate: action("update"),
handleCancel: action("cancel"),
isOutdated: false,
isUpdating: false,
}

export const Starting = Template.bind({})
Starting.args = {
...defaultArgs,
workspace: Mocks.MockStartingWorkspace,
workspaceStatus: Mocks.MockStartingWorkspace.latest_build.status,
}

export constStarted = Template.bind({})
Started.args = {
export constRunning = Template.bind({})
Running.args = {
...defaultArgs,
workspace: Mocks.MockWorkspace,
workspaceStatus: Mocks.MockWorkspace.latest_build.status,
}

export const Stopping = Template.bind({})
Stopping.args = {
...defaultArgs,
workspace: Mocks.MockStoppingWorkspace,
workspaceStatus: Mocks.MockStoppingWorkspace.latest_build.status,
}

export const Stopped = Template.bind({})
Stopped.args = {
...defaultArgs,
workspace: Mocks.MockStoppedWorkspace,
workspaceStatus: Mocks.MockStoppedWorkspace.latest_build.status,
}

export const Canceling = Template.bind({})
Canceling.args = {
...defaultArgs,
workspace: Mocks.MockCancelingWorkspace,
workspaceStatus: Mocks.MockCancelingWorkspace.latest_build.status,
}

export const Canceled = Template.bind({})
Canceled.args = {
...defaultArgs,
workspace: Mocks.MockCanceledWorkspace,
workspaceStatus: Mocks.MockCanceledWorkspace.latest_build.status,
}

export const Deleting = Template.bind({})
Deleting.args = {
...defaultArgs,
workspace: Mocks.MockDeletingWorkspace,
workspaceStatus: Mocks.MockDeletingWorkspace.latest_build.status,
}

export const Deleted = Template.bind({})
Deleted.args = {
...defaultArgs,
workspace: Mocks.MockDeletedWorkspace,
workspaceStatus: Mocks.MockDeletedWorkspace.latest_build.status,
}

export const Outdated = Template.bind({})
Outdated.args = {
...defaultArgs,
workspace: Mocks.MockOutdatedWorkspace,
isOutdated: true,
workspaceStatus: Mocks.MockOutdatedWorkspace.latest_build.status,
}

export constErrored = Template.bind({})
Errored.args = {
export constFailed = Template.bind({})
Failed.args = {
...defaultArgs,
workspace: Mocks.MockFailedWorkspace,
workspaceStatus: Mocks.MockFailedWorkspace.latest_build.status,
}

export const Updating = Template.bind({})
Updating.args = {
...defaultArgs,
isUpdating: true,
workspace: Mocks.MockOutdatedWorkspace,
workspaceStatus: Mocks.MockOutdatedWorkspace.latest_build.status,
}
Loading
[8]ページ先頭
©2009-2025 Movatter.jp