feat(UI): add workspace restart button (#7137)

* Refactor primary buttons

* refactor(site): Always show the main actions

* Remove tests that are testes on Storybook

* Fix tests

* Fix keys

* added restart btn

---------

Co-authored-by: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>

site/src/components/Workspace/Workspace.tsx

@@ -41,6 +41,7 @@ export interface WorkspaceProps {
   }
   handleStart: () => void
   handleStop: () => void
+  handleRestart: () => void
   handleDelete: () => void
   handleUpdate: () => void
   handleCancel: () => void
@@ -72,6 +73,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   scheduleProps,
   handleStart,
   handleStop,
+  handleRestart,
   handleDelete,
   handleUpdate,
   handleCancel,
@@ -132,6 +134,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
               isOutdated={workspace.outdated}
               handleStart={handleStart}
               handleStop={handleStop}
+              handleRestart={handleRestart}
               handleDelete={handleDelete}
               handleUpdate={handleUpdate}
               handleCancel={handleCancel}

site/src/components/WorkspaceActions/Buttons.tsx

@@ -3,8 +3,9 @@ import BlockIcon from "@material-ui/icons/Block"
 import CloudQueueIcon from "@material-ui/icons/CloudQueue"
 import CropSquareIcon from "@material-ui/icons/CropSquare"
 import PlayCircleOutlineIcon from "@material-ui/icons/PlayCircleOutline"
+import ReplayIcon from "@material-ui/icons/Replay"
 import { LoadingButton } from "components/LoadingButton/LoadingButton"
-import { FC } from "react"
+import { FC, PropsWithChildren } from "react"
 import { useTranslation } from "react-i18next"
 import { makeStyles } from "@material-ui/core/styles"
 
@@ -12,7 +13,7 @@ interface WorkspaceAction {
   handleAction: () => void
 }
 
-export const UpdateButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({
+export const UpdateButton: FC<PropsWithChildren<WorkspaceAction>> = ({
   handleAction,
 }) => {
   const { t } = useTranslation("workspacePage")
@@ -30,7 +31,7 @@ export const UpdateButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({
   )
 }
 
-export const StartButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({
+export const StartButton: FC<PropsWithChildren<WorkspaceAction>> = ({
   handleAction,
 }) => {
   const { t } = useTranslation("workspacePage")
@@ -48,7 +49,7 @@ export const StartButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({
   )
 }
 
-export const StopButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({
+export const StopButton: FC<PropsWithChildren<WorkspaceAction>> = ({
   handleAction,
 }) => {
   const { t } = useTranslation("workspacePage")
@@ -66,7 +67,25 @@ export const StopButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({
   )
 }
 
-export const CancelButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({
+export const RestartButton: FC<PropsWithChildren<WorkspaceAction>> = ({
+  handleAction,
+}) => {
+  const { t } = useTranslation("workspacePage")
+  const styles = useStyles()
+
+  return (
+    <Button
+      variant="outlined"
+      startIcon={<ReplayIcon />}
+      onClick={handleAction}
+      className={styles.fixedWidth}
+    >
+      {t("actionButton.restart")}
+    </Button>
+  )
+}
+
+export const CancelButton: FC<PropsWithChildren<WorkspaceAction>> = ({
   handleAction,
 }) => {
   return (
@@ -80,7 +99,7 @@ interface DisabledProps {
   label: string
 }
 
-export const DisabledButton: FC<React.PropsWithChildren<DisabledProps>> = ({
+export const DisabledButton: FC<PropsWithChildren<DisabledProps>> = ({
   label,
 }) => {
   return (
@@ -94,7 +113,7 @@ interface LoadingProps {
   label: string
 }
 
-export const ActionLoadingButton: FC<React.PropsWithChildren<LoadingProps>> = ({
+export const ActionLoadingButton: FC<PropsWithChildren<LoadingProps>> = ({
   label,
 }) => {
   const styles = useStyles()

site/src/components/WorkspaceActions/WorkspaceActions.stories.tsx

@@ -15,6 +15,7 @@ const Template: Story<WorkspaceActionsProps> = (args) => (
 const defaultArgs = {
   handleStart: action("start"),
   handleStop: action("stop"),
+  handleRestart: action("restart"),
   handleDelete: action("delete"),
   handleUpdate: action("update"),
   handleCancel: action("cancel"),

site/src/components/WorkspaceActions/WorkspaceActions.tsx

@@ -12,6 +12,7 @@ import {
   DisabledButton,
   StartButton,
   StopButton,
+  RestartButton,
   UpdateButton,
 } from "./Buttons"
 import {
@@ -28,6 +29,7 @@ export interface WorkspaceActionsProps {
   isOutdated: boolean
   handleStart: () => void
   handleStop: () => void
+  handleRestart: () => void
   handleDelete: () => void
   handleUpdate: () => void
   handleCancel: () => void
@@ -43,6 +45,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
   isOutdated,
   handleStart,
   handleStop,
+  handleRestart,
   handleDelete,
   handleUpdate,
   handleCancel,
@@ -91,6 +94,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
         key={ButtonTypesEnum.stopping}
       />
     ),
+    [ButtonTypesEnum.restart]: <RestartButton handleAction={handleRestart} />,
     [ButtonTypesEnum.deleting]: (
       <ActionLoadingButton
         label={t("actionButton.deleting")}

site/src/components/WorkspaceActions/constants.ts

@@ -7,6 +7,7 @@ export enum ButtonTypesEnum {
   starting = "starting",
   stop = "stop",
   stopping = "stopping",
+  restart = "restart",
   deleting = "deleting",
   update = "update",
   updating = "updating",
@@ -39,7 +40,7 @@ const statusToActions: Record<WorkspaceStatus, WorkspaceAbilities> = {
     canAcceptJobs: false,
   },
   running: {
-    actions: [ButtonTypesEnum.stop],
+    actions: [ButtonTypesEnum.stop, ButtonTypesEnum.restart],
     canCancel: false,
     canAcceptJobs: true,
   },

site/src/i18n/en/workspacePage.json

@@ -21,6 +21,7 @@
   "actionButton": {
     "start": "Start",
     "stop": "Stop",
+    "restart": "Restart",
     "delete": "Delete",
     "cancel": "Cancel",
     "update": "Update",

site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx

@@ -124,6 +124,7 @@ export const WorkspaceReadyPage = ({
         workspace={workspace}
         handleStart={() => workspaceSend({ type: "START" })}
         handleStop={() => workspaceSend({ type: "STOP" })}
+        handleRestart={() => workspaceSend({ type: "START" })}
         handleDelete={() => workspaceSend({ type: "ASK_DELETE" })}
         handleUpdate={() => workspaceSend({ type: "UPDATE" })}
         handleCancel={() => workspaceSend({ type: "CANCEL" })}