Codestin Search App

}], + }) + await waitForLoaderToBeRemoved() + // Fill the form and submit + const form = screen.getByTestId("form") + const name = within(form).getByLabelText("Name") + await user.clear(name) + await user.type(within(form).getByLabelText("Name"), "new-name") + const parameter1 = within(form).getByLabelText( + MockWorkspaceBuildParameter1.name, + { exact: false }, + ) + await user.clear(parameter1) + await user.type(parameter1, "new-value") + const parameter2 = within(form).getByLabelText( + MockWorkspaceBuildParameter2.name, + { exact: false }, + ) + await user.clear(parameter2) + await user.type(parameter2, "1") + await user.click(within(form).getByRole("button", { name: "Submit" })) + // Assert that the API calls were made with the correct data + await waitFor(() => { + expect(patchWorkspaceSpy).toHaveBeenCalledWith(MockWorkspace.id, { + name: "new-name", + }) + expect(postWorkspaceBuildSpy).toHaveBeenCalledWith(MockWorkspace.id, { + transition: "start", + rich_parameter_values: [ + { name: MockTemplateVersionParameter1.name, value: "new-value" }, + { name: MockTemplateVersionParameter2.name, value: "1" }, + ], + }) + }) +}) diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPage.tsx new file mode 100644 index 0000000000000..87d8cff54e5e3 --- /dev/null +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPage.tsx @@ -0,0 +1,49 @@ +import { getErrorMessage } from "api/errors" +import { displayError } from "components/GlobalSnackbar/utils" +import { Helmet } from "react-helmet-async" +import { useTranslation } from "react-i18next" +import { useNavigate, useParams } from "react-router-dom" +import { pageTitle } from "util/page" +import { useUpdateWorkspaceSettings, useWorkspaceSettings } from "./data" +import { WorkspaceSettingsPageView } from "./WorkspaceSettingsPageView" + +const WorkspaceSettingsPage = () => { + const { t } = useTranslation("workspaceSettingsPage") + const { username, workspace: workspaceName } = useParams() as { + username: string + workspace: string + } + const { + data: settings, + error, + isLoading, + } = useWorkspaceSettings(username, workspaceName) + const navigate = useNavigate() + const updateSettings = useUpdateWorkspaceSettings(settings?.workspace.id, { + onSuccess: ({ name }) => { + navigate(`/@${username}/${name}`) + }, + onError: (error) => + displayError(getErrorMessage(error, t("defaultErrorMessage"))), + }) + + return ( + <> + + Codestin Search App + + + navigate(-1)} + onSubmit={updateSettings.mutate} + /> + + ) +} + +export default WorkspaceSettingsPage diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.stories.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.stories.tsx new file mode 100644 index 0000000000000..cc32594a7c759 --- /dev/null +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.stories.tsx @@ -0,0 +1,41 @@ +import { ComponentMeta, Story } from "@storybook/react" +import { + MockTemplateVersionParameter1, + MockTemplateVersionParameter2, + MockWorkspace, + MockWorkspaceBuildParameter1, + MockWorkspaceBuildParameter2, +} from "testHelpers/entities" +import { + WorkspaceSettingsPageView, + WorkspaceSettingsPageViewProps, +} from "./WorkspaceSettingsPageView" + +export default { + title: "pages/WorkspaceSettingsPageView", + component: WorkspaceSettingsPageView, + args: { + formError: undefined, + loadingError: undefined, + isLoading: false, + isSubmitting: false, + settings: { + workspace: MockWorkspace, + buildParameters: [ + MockWorkspaceBuildParameter1, + MockWorkspaceBuildParameter2, + ], + templateVersionRichParameters: [ + MockTemplateVersionParameter1, + MockTemplateVersionParameter2, + ], + }, + }, +} as ComponentMeta + +const Template: Story = (args) => ( + +) + +export const Example = Template.bind({}) +Example.args = {} diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.tsx new file mode 100644 index 0000000000000..ab94200fa9f09 --- /dev/null +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.tsx @@ -0,0 +1,47 @@ +import { AlertBanner } from "components/AlertBanner/AlertBanner" +import { FullPageHorizontalForm } from "components/FullPageForm/FullPageHorizontalForm" +import { Loader } from "components/Loader/Loader" +import { FC } from "react" +import { useTranslation } from "react-i18next" +import { WorkspaceSettings, WorkspaceSettingsFormValue } from "./data" +import { WorkspaceSettingsForm } from "./WorkspaceSettingsForm" + +export type WorkspaceSettingsPageViewProps = { + formError: unknown + loadingError: unknown + isLoading: boolean + isSubmitting: boolean + settings: WorkspaceSettings | undefined + onCancel: () => void + onSubmit: (formValues: WorkspaceSettingsFormValue) => void +} + +export const WorkspaceSettingsPageView: FC = ({ + onCancel, + onSubmit, + isLoading, + isSubmitting, + settings, + formError, + loadingError, +}) => { + const { t } = useTranslation("workspaceSettingsPage") + + return ( + + <> + {loadingError && } + {isLoading && } + {settings && ( + + )} + + + ) +} diff --git a/site/src/pages/WorkspaceSettingsPage/data.ts b/site/src/pages/WorkspaceSettingsPage/data.ts new file mode 100644 index 0000000000000..cf64abc9a189e --- /dev/null +++ b/site/src/pages/WorkspaceSettingsPage/data.ts @@ -0,0 +1,73 @@ +import { useMutation, useQuery } from "@tanstack/react-query" +import { + getWorkspaceByOwnerAndName, + getWorkspaceBuildParameters, + getTemplateVersionRichParameters, + patchWorkspace, + postWorkspaceBuild, +} from "api/api" +import { WorkspaceBuildParameter } from "api/typesGenerated" + +const getWorkspaceSettings = async (owner: string, name: string) => { + const workspace = await getWorkspaceByOwnerAndName(owner, name) + const latestBuild = workspace.latest_build + const [templateVersionRichParameters, buildParameters] = await Promise.all([ + getTemplateVersionRichParameters(latestBuild.template_version_id), + getWorkspaceBuildParameters(latestBuild.id), + ]) + return { + workspace, + templateVersionRichParameters, + buildParameters, + } +} + +export const useWorkspaceSettings = (owner: string, workspace: string) => { + return useQuery({ + queryKey: ["workspaceSettings", owner, workspace], + queryFn: () => getWorkspaceSettings(owner, workspace), + }) +} + +export type WorkspaceSettings = Awaited> + +export type WorkspaceSettingsFormValue = { + name: string + rich_parameter_values: WorkspaceBuildParameter[] +} + +const updateWorkspaceSettings = async ( + workspaceId: string, + formValues: WorkspaceSettingsFormValue, +) => { + await Promise.all([ + patchWorkspace(workspaceId, { name: formValues.name }), + postWorkspaceBuild(workspaceId, { + transition: "start", + rich_parameter_values: formValues.rich_parameter_values, + }), + ]) + + return formValues // So we can get then on the onSuccess callback +} + +export const useUpdateWorkspaceSettings = ( + workspaceId?: string, + options?: { + onSuccess?: ( + result: Awaited>, + ) => void + onError?: (error: unknown) => void + }, +) => { + return useMutation({ + mutationFn: (formValues: WorkspaceSettingsFormValue) => { + if (!workspaceId) { + throw new Error("No workspace id") + } + return updateWorkspaceSettings(workspaceId, formValues) + }, + onSuccess: options?.onSuccess, + onError: options?.onError, + }) +} diff --git a/site/src/util/richParameters.ts b/site/src/util/richParameters.ts index 7bb036ebac337..cc239f1249dee 100644 --- a/site/src/util/richParameters.ts +++ b/site/src/util/richParameters.ts @@ -146,3 +146,13 @@ export const useValidationSchemaForRichParameters = ( ) .required() } + +export const workspaceBuildParameterValue = ( + workspaceBuildParameters: WorkspaceBuildParameter[], + parameter: TemplateVersionParameter, +): string => { + const buildParameter = workspaceBuildParameters.find((buildParameter) => { + return buildParameter.name === parameter.name + }) + return (buildParameter && buildParameter.value) || "" +} diff --git a/site/src/xServices/workspace/workspaceBuildParametersXService.ts b/site/src/xServices/workspace/workspaceBuildParametersXService.ts deleted file mode 100644 index b4b2e7fad42f1..0000000000000 --- a/site/src/xServices/workspace/workspaceBuildParametersXService.ts +++ /dev/null @@ -1,223 +0,0 @@ -import { - getTemplateVersionRichParameters, - getWorkspaceByOwnerAndName, - getWorkspaceBuildParameters, - postWorkspaceBuild, -} from "api/api" -import { - CreateWorkspaceBuildRequest, - Template, - TemplateVersionParameter, - Workspace, - WorkspaceBuild, - WorkspaceBuildParameter, -} from "api/typesGenerated" -import { assign, createMachine } from "xstate" - -type WorkspaceBuildParametersContext = { - workspaceOwner: string - workspaceName: string - - selectedWorkspace?: Workspace - selectedTemplate?: Template - templateParameters?: TemplateVersionParameter[] - workspaceBuildParameters?: WorkspaceBuildParameter[] - - createWorkspaceBuildRequest?: CreateWorkspaceBuildRequest - - getWorkspaceError?: Error | unknown - getTemplateParametersError?: Error | unknown - getWorkspaceBuildParametersError?: Error | unknown - updateWorkspaceError?: Error | unknown -} - -type UpdateWorkspaceEvent = { - type: "UPDATE_WORKSPACE" - request: CreateWorkspaceBuildRequest -} - -export const workspaceBuildParametersMachine = createMachine( - { - id: "workspaceBuildParametersState", - predictableActionArguments: true, - tsTypes: - {} as import("./workspaceBuildParametersXService.typegen").Typegen0, - schema: { - context: {} as WorkspaceBuildParametersContext, - events: {} as UpdateWorkspaceEvent, - services: {} as { - getWorkspace: { - data: Workspace - } - getTemplateParameters: { - data: TemplateVersionParameter[] - } - getWorkspaceBuildParameters: { - data: WorkspaceBuildParameter[] - } - updateWorkspace: { - data: WorkspaceBuild - } - }, - }, - initial: "gettingWorkspace", - states: { - gettingWorkspace: { - entry: "clearGetWorkspaceError", - invoke: { - src: "getWorkspace", - onDone: [ - { - actions: ["assignWorkspace"], - target: "gettingTemplateParameters", - }, - ], - onError: { - actions: ["assignGetWorkspaceError"], - target: "error", - }, - }, - }, - gettingTemplateParameters: { - entry: "clearGetTemplateParametersError", - invoke: { - src: "getTemplateParameters", - onDone: [ - { - actions: ["assignTemplateParameters"], - target: "gettingWorkspaceBuildParameters", - }, - ], - onError: { - actions: ["assignGetTemplateParametersError"], - target: "error", - }, - }, - }, - gettingWorkspaceBuildParameters: { - entry: "clearGetWorkspaceBuildParametersError", - invoke: { - src: "getWorkspaceBuildParameters", - onDone: { - actions: ["assignWorkspaceBuildParameters"], - target: "fillingParams", - }, - onError: { - actions: ["assignGetWorkspaceBuildParametersError"], - target: "error", - }, - }, - }, - fillingParams: { - on: { - UPDATE_WORKSPACE: { - actions: ["assignCreateWorkspaceBuildRequest"], - target: "updatingWorkspace", - }, - }, - }, - updatingWorkspace: { - entry: "clearUpdateWorkspaceError", - invoke: { - src: "updateWorkspace", - onDone: { - actions: ["onUpdateWorkspace"], - target: "updated", - }, - onError: { - actions: ["assignUpdateWorkspaceError"], - target: "fillingParams", - }, - }, - }, - updated: { - entry: "onUpdateWorkspace", - type: "final", - }, - error: {}, - }, - }, - { - services: { - getWorkspace: (context) => { - const { workspaceOwner, workspaceName } = context - return getWorkspaceByOwnerAndName(workspaceOwner, workspaceName) - }, - getTemplateParameters: (context) => { - const { selectedWorkspace } = context - - if (!selectedWorkspace) { - throw new Error("No workspace selected") - } - - return getTemplateVersionRichParameters( - selectedWorkspace.latest_build.template_version_id, - ) - }, - getWorkspaceBuildParameters: (context) => { - const { selectedWorkspace } = context - - if (!selectedWorkspace) { - throw new Error("No workspace selected") - } - - return getWorkspaceBuildParameters(selectedWorkspace.latest_build.id) - }, - updateWorkspace: (context) => { - const { selectedWorkspace, createWorkspaceBuildRequest } = context - - if (!selectedWorkspace) { - throw new Error("No workspace selected") - } - - if (!createWorkspaceBuildRequest) { - throw new Error("No workspace build request") - } - - return postWorkspaceBuild( - selectedWorkspace.id, - createWorkspaceBuildRequest, - ) - }, - }, - actions: { - assignWorkspace: assign({ - selectedWorkspace: (_, event) => event.data, - }), - assignTemplateParameters: assign({ - templateParameters: (_, event) => event.data, - }), - assignWorkspaceBuildParameters: assign({ - workspaceBuildParameters: (_, event) => event.data, - }), - - assignCreateWorkspaceBuildRequest: assign({ - createWorkspaceBuildRequest: (_, event) => event.request, - }), - assignGetWorkspaceError: assign({ - getWorkspaceError: (_, event) => event.data, - }), - clearGetWorkspaceError: assign({ - getWorkspaceError: (_) => undefined, - }), - assignGetTemplateParametersError: assign({ - getTemplateParametersError: (_, event) => event.data, - }), - clearGetTemplateParametersError: assign({ - getTemplateParametersError: (_) => undefined, - }), - clearGetWorkspaceBuildParametersError: assign({ - getWorkspaceBuildParametersError: (_) => undefined, - }), - assignGetWorkspaceBuildParametersError: assign({ - getWorkspaceBuildParametersError: (_, event) => event.data, - }), - clearUpdateWorkspaceError: assign({ - updateWorkspaceError: (_) => undefined, - }), - assignUpdateWorkspaceError: assign({ - updateWorkspaceError: (_, event) => event.data, - }), - }, - }, -) diff --git a/site/src/xServices/workspace/workspaceXService.ts b/site/src/xServices/workspace/workspaceXService.ts index cdd7089076d17..5787156821379 100644 --- a/site/src/xServices/workspace/workspaceXService.ts +++ b/site/src/xServices/workspace/workspaceXService.ts @@ -55,7 +55,6 @@ export interface WorkspaceContext { eventSource?: EventSource workspace?: TypesGen.Workspace template?: TypesGen.Template - templateParameters?: TypesGen.TemplateVersionParameter[] build?: TypesGen.WorkspaceBuild getWorkspaceError?: Error | unknown getTemplateWarning: Error | unknown @@ -203,7 +202,7 @@ export const workspaceMachine = createMachine( onDone: [ { actions: ["assignTemplate", "clearGetTemplateWarning"], - target: "gettingTemplateParameters", + target: "gettingPermissions", }, ], onError: [ @@ -218,31 +217,6 @@ export const workspaceMachine = createMachine( }, tags: "loading", }, - gettingTemplateParameters: { - invoke: { - src: "getTemplateParameters", - id: "getTemplateParameters", - onDone: [ - { - actions: [ - "assignTemplateParameters", - "clearGetTemplateParametersWarning", - ], - target: "gettingPermissions", - }, - ], - onError: [ - { - actions: [ - "assignGetTemplateParametersWarning", - "displayGetTemplateParametersWarning", - ], - target: "error", - }, - ], - }, - tags: "loading", - }, gettingPermissions: { invoke: { src: "checkPermissions", @@ -524,9 +498,6 @@ export const workspaceMachine = createMachine( assignTemplate: assign({ template: (_, event) => event.data, }), - assignTemplateParameters: assign({ - templateParameters: (_, event) => event.data, - }), assignPermissions: assign({ // Setting event.data as Permissions to be more stricted. So we know // what permissions we asked for. @@ -587,15 +558,6 @@ export const workspaceMachine = createMachine( clearGetTemplateWarning: assign({ getTemplateWarning: (_) => undefined, }), - assignGetTemplateParametersWarning: assign({ - getTemplateParametersWarning: (_, event) => event.data, - }), - displayGetTemplateParametersWarning: () => { - displayError(Language.getTemplateParametersWarning) - }, - clearGetTemplateParametersWarning: assign({ - getTemplateParametersWarning: (_) => undefined, - }), // Timeline assignBuilds: assign({ builds: (_, event) => event.data, @@ -667,15 +629,6 @@ export const workspaceMachine = createMachine( throw Error("Cannot get template without workspace") } }, - getTemplateParameters: async (context) => { - if (context.workspace) { - return await API.getTemplateVersionRichParameters( - context.workspace.latest_build.template_version_id, - ) - } else { - throw Error("Cannot get template parameters without workspace") - } - }, updateWorkspace: ({ workspace }, { buildParameters }) => async (send) => {