Add base for ephemeral form

coder · BrunoQuaresma · Jul 18, 2023 · Jul 13, 2023 · Jul 14, 2023 · Jul 14, 2023
commit 5334762aa7b1b00d9c0e4a984af61a873a177bb8
@@ -481,8 +481,8 @@ export function waitForBuild(build: TypesGen.WorkspaceBuild) {
       let latestJobInfo: TypesGen.ProvisionerJob | undefined = undefined
 
       while (
-        !["succeeded", "canceled"].some(
-          (status) => latestJobInfo?.status.includes(status),
+        !["succeeded", "canceled"].some((status) =>
+          latestJobInfo?.status.includes(status),
         )
       ) {
         const { job } = await getWorkspaceBuildByNumber(
@@ -1346,3 +1346,15 @@ export const issueReconnectingPTYSignedToken = async (
   )
   return response.data
 }
+
+export const getWorkspaceParameters = async (workspace: TypesGen.Workspace) => {
+  const latestBuild = workspace.latest_build
+  const [templateVersionRichParameters, buildParameters] = await Promise.all([
+    getTemplateVersionRichParameters(latestBuild.template_version_id),
+    getWorkspaceBuildParameters(latestBuild.id),
+  ])
+  return {
+    templateVersionRichParameters,
+    buildParameters,
+  }
+}
@@ -1,21 +1,25 @@
-import { FC } from "react"
+import { forwardRef } from "react"
 import MuiLoadingButton, {
   LoadingButtonProps as MuiLoadingButtonProps,
 } from "@mui/lab/LoadingButton"
 
 export type LoadingButtonProps = MuiLoadingButtonProps
 
-export const LoadingButton: FC<LoadingButtonProps> = ({
-  children,
-  loadingIndicator,
-  ...buttonProps
-}) => {
+export const LoadingButton = forwardRef<
+  HTMLButtonElement,
+  MuiLoadingButtonProps
+>(({ children, loadingIndicator, ...buttonProps }, ref) => {
   return (
-    <MuiLoadingButton variant="outlined" color="neutral" {...buttonProps}>
+    <MuiLoadingButton
+      variant="outlined"
+      color="neutral"
+      ref={ref}
+      {...buttonProps}
+    >
       {/* known issue: https://github.com/mui/material-ui/issues/27853 */}
       <span>
         {buttonProps.loading && loadingIndicator ? loadingIndicator : children}
       </span>
     </MuiLoadingButton>
   )
-}
+})
@@ -194,8 +194,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
 
         <PageHeaderActions>
           <WorkspaceActions
-            workspaceStatus={workspace.latest_build.status}
-            isOutdated={workspace.outdated}
+            workspace={workspace}
             handleStart={handleStart}
             handleStop={handleStop}
             handleRestart={handleRestart}

@@ -0,0 +1,49 @@
+import {
+  TemplateVersionParameter,
+  WorkspaceBuildParameter,
+} from "api/typesGenerated"
+import { RichParameterInput } from "components/RichParameterInput/RichParameterInput"
+import { useFormik } from "formik"
+import { getFormHelpers } from "utils/formUtils"
+import { getInitialParameterValues } from "utils/richParameters"
+
+export const BuildParametersForm = ({
+  ephemeralParameters,
+  buildParameters,
+}: {
+  ephemeralParameters: TemplateVersionParameter[]
+  buildParameters: WorkspaceBuildParameter[]
+}) => {
+  const form = useFormik({
+    initialValues: {
+      rich_parameter_values: getInitialParameterValues(
+        ephemeralParameters,
+        buildParameters,
+      ),
+    },
+    onSubmit: () => {},
+  })
+  const getFieldHelpers = getFormHelpers(form)
+
+  return (
+    <form action="">
+      {ephemeralParameters.map((parameter, index) => {
+        return (
+          <RichParameterInput
+            {...getFieldHelpers("rich_parameter_values[" + index + "].value")}
+            key={parameter.name}
+            parameter={parameter}
+            initialValue=""
+            index={index}
+            onChange={async (value) => {
+              await form.setFieldValue(`rich_parameter_values[${index}]`, {
+                name: parameter.name,
+                value: value,
+              })
+            }}
+          />
+        )
+      })}
+    </form>
+  )
+}
@@ -5,8 +5,21 @@ import CropSquareIcon from "@mui/icons-material/CropSquare"
 import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline"
 import ReplayIcon from "@mui/icons-material/Replay"
 import { LoadingButton } from "components/LoadingButton/LoadingButton"
-import { FC } from "react"
+import { FC, useRef, useState } from "react"
 import BlockOutlined from "@mui/icons-material/BlockOutlined"
+import ButtonGroup from "@mui/material/ButtonGroup"
+import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined"
+import Popover from "@mui/material/Popover"
+import {
+  HelpTooltipText,
+  HelpTooltipTitle,
+} from "components/Tooltips/HelpTooltip/HelpTooltip"
+import Box from "@mui/material/Box"
+import { useQuery } from "@tanstack/react-query"
+import { Workspace } from "api/typesGenerated"
+import { getWorkspaceParameters } from "api/api"
+import { BuildParametersForm } from "./BuildParametersPopover"
+import { Loader } from "components/Loader/Loader"
 
 interface WorkspaceAction {
   loading?: boolean
@@ -31,17 +44,92 @@ export const UpdateButton: FC<WorkspaceAction> = ({
   )
 }
 
-export const StartButton: FC<WorkspaceAction> = ({ handleAction, loading }) => {
+export const StartButton: FC<WorkspaceAction & { workspace: Workspace }> = ({
+  handleAction,
+  workspace,
+  loading,
+}) => {
+  const anchorRef = useRef<HTMLButtonElement>(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const { data: parameters } = useQuery({
+    queryKey: ["workspace", workspace.id, "parameters"],
+    queryFn: () => getWorkspaceParameters(workspace),
+    enabled: isOpen,
+  })
+  const ephemeralParameters = parameters
+    ? parameters.templateVersionRichParameters.filter((p) => p.ephemeral)
+    : undefined
+
   return (
-    <LoadingButton
-      loading={loading}
-      loadingIndicator="Starting..."
-      loadingPosition="start"
-      startIcon={<PlayCircleOutlineIcon />}
-      onClick={handleAction}
+    <ButtonGroup
+      variant="outlined"
+      sx={{
+        // Workaround to make the border transitions smmothly on button groups
+        "& > button:hover + button": {
+          borderLeft: "1px solid #FFF",
+        },
+      }}
     >
-      Start
-    </LoadingButton>
+      <LoadingButton
+        loading={loading}
+        loadingIndicator="Starting..."
+        loadingPosition="start"
+        startIcon={<PlayCircleOutlineIcon />}
+        onClick={handleAction}
+      >
+        Start
+      </LoadingButton>
+      <Button
+        disabled={loading}
+        color="neutral"
+        sx={{ px: 0 }}
+        ref={anchorRef}
+        onClick={() => {
+          setIsOpen(true)
+        }}
+      >
+        <ExpandMoreOutlined sx={{ fontSize: 16 }} />
+      </Button>
+      <Popover
+        open={isOpen}
+        anchorEl={anchorRef.current}
+        onClose={() => {
+          setIsOpen(false)
+        }}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "right",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        sx={{
+          ".MuiPaper-root": {
+            p: 2.5,
+            width: (theme) => theme.spacing(38),
+            marginTop: 1,
+          },
+        }}
+      >
+        <Box sx={{ color: (theme) => theme.palette.text.secondary }}>
+          <HelpTooltipTitle>Build Options</HelpTooltipTitle>
+          <HelpTooltipText>
+            These parameters only apply for a single workspace start.
+          </HelpTooltipText>
+        </Box>
+        <Box>
+          {parameters && parameters.buildParameters && ephemeralParameters ? (
+            <BuildParametersForm
+              buildParameters={parameters.buildParameters}
+              ephemeralParameters={ephemeralParameters}
+            />
+          ) : (
+            <Loader />
+          )}
+        </Box>
+      </Popover>
+    </ButtonGroup>
   )
 }
 

@@ -26,67 +26,66 @@ const defaultArgs = {
 export const Starting = Template.bind({})
 Starting.args = {
   ...defaultArgs,
-  workspaceStatus: Mocks.MockStartingWorkspace.latest_build.status,
+  workspace: Mocks.MockStartingWorkspace,
 }
 
 export const Running = Template.bind({})
 Running.args = {
   ...defaultArgs,
-  workspaceStatus: Mocks.MockWorkspace.latest_build.status,
+  workspace: Mocks.MockWorkspace,
 }
 
 export const Stopping = Template.bind({})
 Stopping.args = {
   ...defaultArgs,
-  workspaceStatus: Mocks.MockStoppingWorkspace.latest_build.status,
+  workspace: Mocks.MockStoppingWorkspace,
 }
 
 export const Stopped = Template.bind({})
 Stopped.args = {
   ...defaultArgs,
-  workspaceStatus: Mocks.MockStoppedWorkspace.latest_build.status,
+  workspace: Mocks.MockStoppedWorkspace,
 }
 
 export const Canceling = Template.bind({})
 Canceling.args = {
   ...defaultArgs,
-  workspaceStatus: Mocks.MockCancelingWorkspace.latest_build.status,
+  workspace: Mocks.MockCancelingWorkspace,
 }
 
 export const Canceled = Template.bind({})
 Canceled.args = {
   ...defaultArgs,
-  workspaceStatus: Mocks.MockCanceledWorkspace.latest_build.status,
+  workspace: Mocks.MockCanceledWorkspace,
 }
 
 export const Deleting = Template.bind({})
 Deleting.args = {
   ...defaultArgs,
-  workspaceStatus: Mocks.MockDeletingWorkspace.latest_build.status,
+  workspace: Mocks.MockDeletingWorkspace,
 }
 
 export const Deleted = Template.bind({})
 Deleted.args = {
   ...defaultArgs,
-  workspaceStatus: Mocks.MockDeletedWorkspace.latest_build.status,
+  workspace: Mocks.MockDeletedWorkspace,
 }
 
 export const Outdated = Template.bind({})
 Outdated.args = {
   ...defaultArgs,
-  isOutdated: true,
-  workspaceStatus: Mocks.MockOutdatedWorkspace.latest_build.status,
+  workspace: Mocks.MockOutdatedWorkspace,
 }
 
 export const Failed = Template.bind({})
 Failed.args = {
   ...defaultArgs,
-  workspaceStatus: Mocks.MockFailedWorkspace.latest_build.status,
+  workspace: Mocks.MockFailedWorkspace,
 }
 
 export const Updating = Template.bind({})
 Updating.args = {
   ...defaultArgs,
   isUpdating: true,
-  workspaceStatus: Mocks.MockOutdatedWorkspace.latest_build.status,
+  workspace: Mocks.MockOutdatedWorkspace,
 }
@@ -3,7 +3,7 @@ import Menu from "@mui/material/Menu"
 import { makeStyles } from "@mui/styles"
 import MoreVertOutlined from "@mui/icons-material/MoreVertOutlined"
 import { FC, Fragment, ReactNode, useRef, useState } from "react"
-import { WorkspaceStatus } from "api/typesGenerated"
+import { Workspace } from "api/typesGenerated"
 import {
   ActionLoadingButton,
   CancelButton,
@@ -24,8 +24,7 @@ import DeleteOutlined from "@mui/icons-material/DeleteOutlined"
 import IconButton from "@mui/material/IconButton"
 
 export interface WorkspaceActionsProps {
-  workspaceStatus: WorkspaceStatus
-  isOutdated: boolean
+  workspace: Workspace
   handleStart: () => void
   handleStop: () => void
   handleRestart: () => void
@@ -41,8 +40,8 @@ export interface WorkspaceActionsProps {
 }
 
 export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
-  workspaceStatus,
-  isOutdated,
+  workspace,
+
   handleStart,
   handleStop,
   handleRestart,
@@ -60,8 +59,8 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
     canCancel,
     canAcceptJobs,
     actions: actionsByStatus,
-  } = actionsByWorkspaceStatus(workspaceStatus)
-  const canBeUpdated = isOutdated && canAcceptJobs
+  } = actionsByWorkspaceStatus(workspace.latest_build.status)
+  const canBeUpdated = workspace.outdated && canAcceptJobs
   const menuTriggerRef = useRef<HTMLButtonElement>(null)
   const [isMenuOpen, setIsMenuOpen] = useState(false)
 
@@ -71,9 +70,11 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
     [ButtonTypesEnum.updating]: (
       <UpdateButton loading handleAction={handleUpdate} />
     ),
-    [ButtonTypesEnum.start]: <StartButton handleAction={handleStart} />,
+    [ButtonTypesEnum.start]: (
+      <StartButton handleAction={handleStart} workspace={workspace} />
+    ),
     [ButtonTypesEnum.starting]: (
-      <StartButton loading handleAction={handleStart} />
+      <StartButton workspace={workspace} loading handleAction={handleStart} />
     ),
     [ButtonTypesEnum.stop]: <StopButton handleAction={handleStop} />,
     [ButtonTypesEnum.stopping]: (

@@ -100,13 +100,11 @@ export const WorkspaceReadyPage = ({
       ["canceling", "deleting", "pending", "starting", "stopping"].includes(
         workspace.latest_build.status,
       ))
-
   const {
     mutate: restartWorkspace,
     error: restartBuildError,
     isLoading: isRestarting,
   } = useRestartWorkspace()
-
   // keep banner machine in sync with workspace
   useEffect(() => {
     bannerSend({ type: "REFRESH_WORKSPACE", workspace })