From 0e00ca7bae0dc51c956e3d9c885044dc0282ecce Mon Sep 17 00:00:00 2001 From: Garrett Date: Tue, 7 Jun 2022 20:58:35 +0000 Subject: [PATCH 01/12] fix: push create workspace UX to templates page --- .../pages/CreateWorkspacePage/CreateWorkspacePage.tsx | 2 +- site/src/pages/WorkspacesPage/WorkspacesPageView.tsx | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx index fec4684d4706e..5bbd9baa85511 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx @@ -35,7 +35,7 @@ const CreateWorkspacePage: FC = () => { selectedTemplate={createWorkspaceState.context.selectedTemplate} templateSchema={createWorkspaceState.context.templateSchema} onCancel={() => { - navigate(preSelectedTemplateName ? "/templates" : "/workspaces") + navigate("/templates") }} onSubmit={(request) => { send({ diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index 3d189179a48ff..b9c15276db56a 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -37,11 +37,12 @@ import { Stack } from "../../components/Stack/Stack" import { TableLoader } from "../../components/TableLoader/TableLoader" import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils" import { getDisplayStatus, workspaceFilterQuery } from "../../util/workspace" +import ReplyIcon from '@material-ui/icons/Reply'; dayjs.extend(relativeTime) export const Language = { - createWorkspaceButton: "Create workspace", + createFromTemplateButton: "Create from template", emptyCreateWorkspaceMessage: "Create your first workspace", emptyCreateWorkspaceDescription: "Start editing your source code and building your software", emptyResultsMessage: "No results matched your search", @@ -132,9 +133,9 @@ export const WorkspacesPageView: FC = ({ loading, works - } @@ -213,7 +214,7 @@ export const WorkspacesPageView: FC = ({ loading, works description={Language.emptyCreateWorkspaceDescription} cta={ - + } /> From b774c50e790b7e4ae14c10a30c0c5bf2fb28af79 Mon Sep 17 00:00:00 2001 From: Garrett Date: Tue, 7 Jun 2022 23:12:41 +0000 Subject: [PATCH 02/12] remove template selector --- .../CreateWorkspacePage.tsx | 13 +-- .../CreateWorkspacePageView.tsx | 91 +++---------------- .../createWorkspaceXService.ts | 76 ++-------------- 3 files changed, 24 insertions(+), 156 deletions(-) diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx index 5bbd9baa85511..db2f42a9e4848 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx @@ -2,7 +2,6 @@ import { useMachine } from "@xstate/react" import { FC } from "react" import { Helmet } from "react-helmet" import { useNavigate, useSearchParams } from "react-router-dom" -import { Template } from "../../api/typesGenerated" import { useOrganizationId } from "../../hooks/useOrganizationId" import { pageTitle } from "../../util/page" import { createWorkspaceMachine } from "../../xServices/createWorkspace/createWorkspaceXService" @@ -11,10 +10,11 @@ import { CreateWorkspacePageView } from "./CreateWorkspacePageView" const CreateWorkspacePage: FC = () => { const organizationId = useOrganizationId() const [searchParams] = useSearchParams() - const preSelectedTemplateName = searchParams.get("template") + const templateParam = searchParams.get("template") + const templateName = templateParam ? templateParam : "" const navigate = useNavigate() const [createWorkspaceState, send] = useMachine(createWorkspaceMachine, { - context: { organizationId, preSelectedTemplateName }, + context: { organizationId, templateName }, actions: { onCreateWorkspace: (_, event) => { navigate(`/@${event.data.owner_name}/${event.data.name}`) @@ -31,6 +31,7 @@ const CreateWorkspacePage: FC = () => { loadingTemplates={createWorkspaceState.matches("gettingTemplates")} loadingTemplateSchema={createWorkspaceState.matches("gettingTemplateSchema")} creatingWorkspace={createWorkspaceState.matches("creatingWorkspace")} + templateName={createWorkspaceState.context.templateName} templates={createWorkspaceState.context.templates} selectedTemplate={createWorkspaceState.context.selectedTemplate} templateSchema={createWorkspaceState.context.templateSchema} @@ -43,12 +44,6 @@ const CreateWorkspacePage: FC = () => { request, }) }} - onSelectTemplate={(template: Template) => { - send({ - type: "SELECT_TEMPLATE", - template, - }) - }} /> ) diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index ebb398f86b490..ed59232cfcd1f 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -1,15 +1,10 @@ import Link from "@material-ui/core/Link" -import MenuItem from "@material-ui/core/MenuItem" import { makeStyles } from "@material-ui/core/styles" -import TextField, { TextFieldProps } from "@material-ui/core/TextField" -import OpenInNewIcon from "@material-ui/icons/OpenInNew" +import TextField from "@material-ui/core/TextField" import { FormikContextType, useFormik } from "formik" import { FC, useState } from "react" -import { Link as RouterLink } from "react-router-dom" import * as Yup from "yup" import * as TypesGen from "../../api/typesGenerated" -import { CodeExample } from "../../components/CodeExample/CodeExample" -import { EmptyState } from "../../components/EmptyState/EmptyState" import { FormFooter } from "../../components/FormFooter/FormFooter" import { FullPageForm } from "../../components/FullPageForm/FullPageForm" import { Loader } from "../../components/Loader/Loader" @@ -20,29 +15,18 @@ import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formU export const Language = { templateLabel: "Template", nameLabel: "Name", - emptyMessage: "Let's create your first template", - emptyDescription: ( - <> - To create a workspace you need to have a template. You can{" "} - - create one from scratch - {" "} - or use a built-in template by typing the following Coder CLI command: - - ), - templateLink: "Read more about this template", } export interface CreateWorkspacePageViewProps { loadingTemplates: boolean loadingTemplateSchema: boolean creatingWorkspace: boolean + templateName: string templates?: TypesGen.Template[] selectedTemplate?: TypesGen.Template templateSchema?: TypesGen.ParameterSchema[] onCancel: () => void onSubmit: (req: TypesGen.CreateWorkspaceRequest) => void - onSelectTemplate: (template: TypesGen.Template) => void } export const validationSchema = Yup.object({ @@ -51,7 +35,8 @@ export const validationSchema = Yup.object({ export const CreateWorkspacePageView: FC = (props) => { const [parameterValues, setParameterValues] = useState>({}) - const styles = useStyles() + useStyles() + const form: FormikContextType = useFormik({ initialValues: { name: "", @@ -84,26 +69,6 @@ export const CreateWorkspacePageView: FC = (props) }, }) const getFieldHelpers = getFormHelpers(form) - const selectedTemplate = - props.templates && - form.values.template_id && - props.templates.find((template) => template.id === form.values.template_id) - - const handleTemplateChange: TextFieldProps["onChange"] = (event) => { - if (!props.templates) { - throw new Error("Templates are not loaded") - } - - const templateId = event.target.value - const selectedTemplate = props.templates.find((template) => template.id === templateId) - - if (!selectedTemplate) { - throw new Error(`Template ${templateId} not found`) - } - - form.setFieldValue("template_id", selectedTemplate.id) - props.onSelectTemplate(selectedTemplate) - } return ( @@ -111,47 +76,13 @@ export const CreateWorkspacePageView: FC = (props) {props.loadingTemplates && } - {props.templates && props.templates.length === 0 && ( - - } - /> - )} - {props.templates && props.templates.length > 0 && ( - - {Language.templateLink} - - ) - } - > - {props.templates.map((template) => ( - - {template.name} - - ))} - - )} + {props.selectedTemplate && props.templateSchema && ( <> diff --git a/site/src/xServices/createWorkspace/createWorkspaceXService.ts b/site/src/xServices/createWorkspace/createWorkspaceXService.ts index 297819d1b2cb6..2e17c29535bf3 100644 --- a/site/src/xServices/createWorkspace/createWorkspaceXService.ts +++ b/site/src/xServices/createWorkspace/createWorkspaceXService.ts @@ -4,22 +4,15 @@ import { CreateWorkspaceRequest, ParameterSchema, Template, Workspace } from ".. type CreateWorkspaceContext = { organizationId: string + templateName: string templates?: Template[] selectedTemplate?: Template templateSchema?: ParameterSchema[] createWorkspaceRequest?: CreateWorkspaceRequest createdWorkspace?: Workspace - // This is useful when the user wants to create a workspace from the template - // page having it pre selected. It is string or null because of the - // useSearchQuery - preSelectedTemplateName: string | null } type CreateWorkspaceEvent = - | { - type: "SELECT_TEMPLATE" - template: Template - } | { type: "CREATE_WORKSPACE" request: CreateWorkspaceRequest @@ -45,12 +38,6 @@ export const createWorkspaceMachine = createMachine( }, }, tsTypes: {} as import("./createWorkspaceXService.typegen").Typegen0, - on: { - SELECT_TEMPLATE: { - actions: ["assignSelectedTemplate"], - target: "gettingTemplateSchema", - }, - }, states: { gettingTemplates: { invoke: { @@ -58,17 +45,11 @@ export const createWorkspaceMachine = createMachine( onDone: [ { actions: ["assignTemplates"], - target: "waitingForTemplateGetCreated", cond: "areTemplatesEmpty", }, { - actions: ["assignTemplates", "assignPreSelectedTemplate"], + actions: ["assignTemplates", "assignSelectedTemplate"], target: "gettingTemplateSchema", - cond: "hasValidPreSelectedTemplate", - }, - { - actions: ["assignTemplates"], - target: "selectingTemplate", }, ], onError: { @@ -76,33 +57,6 @@ export const createWorkspaceMachine = createMachine( }, }, }, - waitingForTemplateGetCreated: { - initial: "refreshingTemplates", - states: { - refreshingTemplates: { - invoke: { - src: "getTemplates", - onDone: [ - { target: "waiting", cond: "areTemplatesEmpty" }, - { target: "#createWorkspaceState.selectingTemplate", actions: ["assignTemplates"] }, - ], - }, - }, - waiting: { - after: { - 2_000: "refreshingTemplates", - }, - }, - }, - }, - selectingTemplate: { - on: { - SELECT_TEMPLATE: { - actions: ["assignSelectedTemplate"], - target: "gettingTemplateSchema", - }, - }, - }, gettingTemplateSchema: { invoke: { src: "getTemplateSchema", @@ -164,13 +118,6 @@ export const createWorkspaceMachine = createMachine( }, }, guards: { - hasValidPreSelectedTemplate: (ctx, event) => { - if (!ctx.preSelectedTemplateName) { - return false - } - const template = event.data.find((template) => template.name === ctx.preSelectedTemplateName) - return !!template - }, areTemplatesEmpty: (_, event) => event.data.length === 0, }, actions: { @@ -178,7 +125,13 @@ export const createWorkspaceMachine = createMachine( templates: (_, event) => event.data, }), assignSelectedTemplate: assign({ - selectedTemplate: (_, event) => event.template, + selectedTemplate: (ctx, event) => { + for (const template of event.data) { + if (template.name === ctx.templateName) { + return template + } + } + }, }), assignTemplateSchema: assign({ // Only show parameters that are allowed to be overridden. @@ -188,17 +141,6 @@ export const createWorkspaceMachine = createMachine( assignCreateWorkspaceRequest: assign({ createWorkspaceRequest: (_, event) => event.request, }), - assignPreSelectedTemplate: assign({ - selectedTemplate: (ctx, event) => { - const selectedTemplate = event.data.find((template) => template.name === ctx.preSelectedTemplateName) - // The proper validation happens on hasValidPreSelectedTemplate - if (!selectedTemplate) { - throw new Error("Invalid template selected") - } - - return selectedTemplate - }, - }), }, }, ) From 74676695455646cd63a0edc25e73aaa65572f4e1 Mon Sep 17 00:00:00 2001 From: Garrett Date: Tue, 7 Jun 2022 23:16:35 +0000 Subject: [PATCH 03/12] make fmt --- .../CreateWorkspacePage/CreateWorkspacePageView.tsx | 9 +-------- site/src/pages/WorkspacesPage/WorkspacesPageView.tsx | 4 ++-- .../xServices/createWorkspace/createWorkspaceXService.ts | 9 ++++----- 3 files changed, 7 insertions(+), 15 deletions(-) diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index ed59232cfcd1f..8a3a3df1da372 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -1,4 +1,3 @@ -import Link from "@material-ui/core/Link" import { makeStyles } from "@material-ui/core/styles" import TextField from "@material-ui/core/TextField" import { FormikContextType, useFormik } from "formik" @@ -76,13 +75,7 @@ export const CreateWorkspacePageView: FC = (props) {props.loadingTemplates && } - + {props.selectedTemplate && props.templateSchema && ( <> diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index b9c15276db56a..8e0e3f6d1d600 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -13,6 +13,7 @@ import TableRow from "@material-ui/core/TableRow" import TextField from "@material-ui/core/TextField" import AddCircleOutline from "@material-ui/icons/AddCircleOutline" import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" +import ReplyIcon from "@material-ui/icons/Reply" import SearchIcon from "@material-ui/icons/Search" import useTheme from "@material-ui/styles/useTheme" import dayjs from "dayjs" @@ -37,7 +38,6 @@ import { Stack } from "../../components/Stack/Stack" import { TableLoader } from "../../components/TableLoader/TableLoader" import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils" import { getDisplayStatus, workspaceFilterQuery } from "../../util/workspace" -import ReplyIcon from '@material-ui/icons/Reply'; dayjs.extend(relativeTime) @@ -134,7 +134,7 @@ export const WorkspacesPageView: FC = ({ loading, works - diff --git a/site/src/xServices/createWorkspace/createWorkspaceXService.ts b/site/src/xServices/createWorkspace/createWorkspaceXService.ts index 2e17c29535bf3..262c90a633654 100644 --- a/site/src/xServices/createWorkspace/createWorkspaceXService.ts +++ b/site/src/xServices/createWorkspace/createWorkspaceXService.ts @@ -12,11 +12,10 @@ type CreateWorkspaceContext = { createdWorkspace?: Workspace } -type CreateWorkspaceEvent = - | { - type: "CREATE_WORKSPACE" - request: CreateWorkspaceRequest - } +type CreateWorkspaceEvent = { + type: "CREATE_WORKSPACE" + request: CreateWorkspaceRequest +} export const createWorkspaceMachine = createMachine( { From 0cbd76587c99a7650f73b78a2a88fd4365d8ce8d Mon Sep 17 00:00:00 2001 From: Garrett Date: Tue, 7 Jun 2022 23:38:14 +0000 Subject: [PATCH 04/12] move loader --- site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index 8a3a3df1da372..588454b9cf990 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -72,11 +72,10 @@ export const CreateWorkspacePageView: FC = (props) return (
- {props.loadingTemplates && } - + {props.loadingTemplateSchema && } {props.selectedTemplate && props.templateSchema && ( <> Date: Wed, 8 Jun 2022 22:09:54 +0000 Subject: [PATCH 05/12] just text mock up --- site/src/components/PageHeader/PageHeader.tsx | 15 +++++++++++++++ .../src/pages/TemplatesPage/TemplatesPageView.tsx | 10 ++++++++-- .../pages/WorkspacesPage/WorkspacesPageView.tsx | 15 +++++++++------ 3 files changed, 32 insertions(+), 8 deletions(-) diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx index 6ea052d33c008..f2224be8216f6 100644 --- a/site/src/components/PageHeader/PageHeader.tsx +++ b/site/src/components/PageHeader/PageHeader.tsx @@ -32,6 +32,12 @@ export const PageHeaderSubtitle: React.FC = ({ children }) => { return

{children}

} +export const PageHeaderText: React.FC = ({ children }) => { + const styles = useStyles() + + return

{children}

+} + const useStyles = makeStyles((theme) => ({ root: { display: "flex", @@ -58,6 +64,15 @@ const useStyles = makeStyles((theme) => ({ marginTop: theme.spacing(1), }, + text: { + fontSize: theme.spacing(2), + color: theme.palette.text.secondary, + fontWeight: 400, + display: "block", + margin: 0, + marginTop: theme.spacing(1), + }, + actions: { marginLeft: "auto", }, diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 6e942c9f396bd..fccfe758758a2 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -9,7 +9,7 @@ import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" import dayjs from "dayjs" import relativeTime from "dayjs/plugin/relativeTime" import { FC } from "react" -import { useNavigate } from "react-router-dom" +import { useNavigate, Link as RouterLink } from "react-router-dom" import * as TypesGen from "../../api/typesGenerated" import { AvatarData } from "../../components/AvatarData/AvatarData" import { CodeExample } from "../../components/CodeExample/CodeExample" @@ -22,7 +22,7 @@ import { HelpTooltipTitle, } from "../../components/HelpTooltip/HelpTooltip" import { Margins } from "../../components/Margins/Margins" -import { PageHeader, PageHeaderTitle } from "../../components/PageHeader/PageHeader" +import { PageHeader, PageHeaderText, PageHeaderTitle } from "../../components/PageHeader/PageHeader" import { Stack } from "../../components/Stack/Stack" import { TableLoader } from "../../components/TableLoader/TableLoader" @@ -84,6 +84,12 @@ export const TemplatesPageView: FC = (props) => { + {props.templates && props.templates.length > 0 && ( + + Choose a template to create a new workspace. + + )} + diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index 8e0e3f6d1d600..4a7f31eebae33 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -33,7 +33,7 @@ import { HelpTooltipTitle, } from "../../components/HelpTooltip/HelpTooltip" import { Margins } from "../../components/Margins/Margins" -import { PageHeader, PageHeaderTitle } from "../../components/PageHeader/PageHeader" +import { PageHeader, PageHeaderTitle, PageHeaderText } from "../../components/PageHeader/PageHeader" import { Stack } from "../../components/Stack/Stack" import { TableLoader } from "../../components/TableLoader/TableLoader" import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils" @@ -133,11 +133,14 @@ export const WorkspacesPageView: FC = ({ loading, works - - + + Create a new workspace from a + Template + . + } > From 64bc02b11683d23cb08b4443bd7ef583dc6b76dc Mon Sep 17 00:00:00 2001 From: Garrett Date: Thu, 9 Jun 2022 22:08:11 +0000 Subject: [PATCH 06/12] make fmt --- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 7 ++----- site/src/pages/WorkspacesPage/WorkspacesPageView.tsx | 12 +++++------- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index fccfe758758a2..a27cf2cacf5c1 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -9,7 +9,7 @@ import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" import dayjs from "dayjs" import relativeTime from "dayjs/plugin/relativeTime" import { FC } from "react" -import { useNavigate, Link as RouterLink } from "react-router-dom" +import { useNavigate } from "react-router-dom" import * as TypesGen from "../../api/typesGenerated" import { AvatarData } from "../../components/AvatarData/AvatarData" import { CodeExample } from "../../components/CodeExample/CodeExample" @@ -85,11 +85,8 @@ export const TemplatesPageView: FC = (props) => { {props.templates && props.templates.length > 0 && ( - - Choose a template to create a new workspace. - + Choose a template to create a new workspace. )} -
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index 4a7f31eebae33..d212fbff2201e 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -13,7 +13,6 @@ import TableRow from "@material-ui/core/TableRow" import TextField from "@material-ui/core/TextField" import AddCircleOutline from "@material-ui/icons/AddCircleOutline" import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" -import ReplyIcon from "@material-ui/icons/Reply" import SearchIcon from "@material-ui/icons/Search" import useTheme from "@material-ui/styles/useTheme" import dayjs from "dayjs" @@ -33,7 +32,7 @@ import { HelpTooltipTitle, } from "../../components/HelpTooltip/HelpTooltip" import { Margins } from "../../components/Margins/Margins" -import { PageHeader, PageHeaderTitle, PageHeaderText } from "../../components/PageHeader/PageHeader" +import { PageHeader, PageHeaderText, PageHeaderTitle } from "../../components/PageHeader/PageHeader" import { Stack } from "../../components/Stack/Stack" import { TableLoader } from "../../components/TableLoader/TableLoader" import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils" @@ -134,12 +133,11 @@ export const WorkspacesPageView: FC = ({ loading, works - Create a new workspace from a + Create a new workspace from a{" "} + Template - . + + . } > From e74f27d622c34e3b1e99c3487fc0e5efbe80674e Mon Sep 17 00:00:00 2001 From: Garrett Date: Thu, 9 Jun 2022 22:22:24 +0000 Subject: [PATCH 07/12] fit loop --- .../xServices/createWorkspace/createWorkspaceXService.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/site/src/xServices/createWorkspace/createWorkspaceXService.ts b/site/src/xServices/createWorkspace/createWorkspaceXService.ts index 262c90a633654..cefbd179c6f61 100644 --- a/site/src/xServices/createWorkspace/createWorkspaceXService.ts +++ b/site/src/xServices/createWorkspace/createWorkspaceXService.ts @@ -125,11 +125,8 @@ export const createWorkspaceMachine = createMachine( }), assignSelectedTemplate: assign({ selectedTemplate: (ctx, event) => { - for (const template of event.data) { - if (template.name === ctx.templateName) { - return template - } - } + const templates = event.data.filter((template) => template.name === ctx.templateName) + return templates.length ? templates[0] : undefined }, }), assignTemplateSchema: assign({ From 4ec519ed81c61a38c9054ab61ebe2591aaaffbc8 Mon Sep 17 00:00:00 2001 From: Garrett Date: Thu, 9 Jun 2022 22:45:19 +0000 Subject: [PATCH 08/12] fix storybook --- .../CreateWorkspacePage/CreateWorkspacePageView.stories.tsx | 5 ----- .../pages/CreateWorkspacePage/CreateWorkspacePageView.tsx | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx index e134d0e940593..8a97781aff211 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx @@ -33,11 +33,6 @@ export default { const Template: Story = (args) => -export const NoTemplates = Template.bind({}) -NoTemplates.args = { - templates: [], -} - export const NoParameters = Template.bind({}) NoParameters.args = { templates: [MockTemplate], diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index 588454b9cf990..daf4595f1599f 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -73,7 +73,7 @@ export const CreateWorkspacePageView: FC = (props) - + {props.loadingTemplateSchema && } {props.selectedTemplate && props.templateSchema && ( From cbfc0f80f12d9616e7c45a67c46cc8a35f26ed4e Mon Sep 17 00:00:00 2001 From: Garrett Date: Thu, 9 Jun 2022 22:47:02 +0000 Subject: [PATCH 09/12] make fmt --- .../pages/CreateWorkspacePage/CreateWorkspacePageView.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index daf4595f1599f..38fb1ee4169dc 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -73,7 +73,13 @@ export const CreateWorkspacePageView: FC = (props) - + {props.loadingTemplateSchema && } {props.selectedTemplate && props.templateSchema && ( From 2a191bad73ac902870f3b965ccafdd3eb309f970 Mon Sep 17 00:00:00 2001 From: Garrett Date: Thu, 9 Jun 2022 23:10:48 +0000 Subject: [PATCH 10/12] change url path --- site/src/AppRouter.tsx | 35 ++++++++++--------- .../CreateWorkspacePage.tsx | 7 ++-- .../pages/TemplatePage/TemplatePageView.tsx | 2 +- 3 files changed, 22 insertions(+), 22 deletions(-) diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx index 8faffb5061bc9..8c8880c9de408 100644 --- a/site/src/AppRouter.tsx +++ b/site/src/AppRouter.tsx @@ -56,15 +56,6 @@ export const AppRouter: FC = () => ( } /> - - - - - } - /> @@ -77,14 +68,24 @@ export const AppRouter: FC = () => ( } /> - - - - } - /> + + + + + } + /> + + + + } + /> + diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx index db2f42a9e4848..d534c0bbc9f26 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx @@ -1,7 +1,7 @@ import { useMachine } from "@xstate/react" import { FC } from "react" import { Helmet } from "react-helmet" -import { useNavigate, useSearchParams } from "react-router-dom" +import { useNavigate, useParams } from "react-router-dom" import { useOrganizationId } from "../../hooks/useOrganizationId" import { pageTitle } from "../../util/page" import { createWorkspaceMachine } from "../../xServices/createWorkspace/createWorkspaceXService" @@ -9,9 +9,8 @@ import { CreateWorkspacePageView } from "./CreateWorkspacePageView" const CreateWorkspacePage: FC = () => { const organizationId = useOrganizationId() - const [searchParams] = useSearchParams() - const templateParam = searchParams.get("template") - const templateName = templateParam ? templateParam : "" + const { template } = useParams() + const templateName = template ? template : "" const navigate = useNavigate() const [createWorkspaceState, send] = useMachine(createWorkspaceMachine, { context: { organizationId, templateName }, diff --git a/site/src/pages/TemplatePage/TemplatePageView.tsx b/site/src/pages/TemplatePage/TemplatePageView.tsx index c9b572041a877..22dcb87a22cf4 100644 --- a/site/src/pages/TemplatePage/TemplatePageView.tsx +++ b/site/src/pages/TemplatePage/TemplatePageView.tsx @@ -39,7 +39,7 @@ export const TemplatePageView: FC = ({ template, activeTe + } From 8ee04b88b9dc3a847aac3939d5623f3a5ada88c0 Mon Sep 17 00:00:00 2001 From: Garrett Date: Thu, 9 Jun 2022 23:25:25 +0000 Subject: [PATCH 11/12] fix tst --- .../CreateWorkspacePage/CreateWorkspacePage.test.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx index a173570e19abe..ae829e08afed0 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx @@ -10,8 +10,8 @@ import { Language } from "./CreateWorkspacePageView" const renderCreateWorkspacePage = () => { return renderWithAuth(, { - route: "/workspaces/new?template=" + MockTemplate.name, - path: "/workspaces/new", + route: "/templates/" + MockTemplate.name + "/workspace", + path: "/templates/:template/workspace", }) } @@ -29,13 +29,6 @@ describe("CreateWorkspacePage", () => { expect(element).toBeDefined() }) - it("shows validation error message", async () => { - renderCreateWorkspacePage() - await fillForm({ name: "$$$" }) - const errorMessage = await screen.findByText(FormLanguage.nameInvalidChars(Language.nameLabel)) - expect(errorMessage).toBeDefined() - }) - it("succeeds", async () => { renderCreateWorkspacePage() // You have to spy the method before it is used. From 61dfc974bbc4d42c5d5af45bd8a4ac3b3c2608aa Mon Sep 17 00:00:00 2001 From: Garrett Date: Thu, 9 Jun 2022 23:26:48 +0000 Subject: [PATCH 12/12] make fmt --- site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx index ae829e08afed0..962583b4a44e3 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx @@ -4,7 +4,6 @@ import * as API from "../../api/api" import { Language as FooterLanguage } from "../../components/FormFooter/FormFooter" import { MockTemplate, MockWorkspace } from "../../testHelpers/entities" import { renderWithAuth } from "../../testHelpers/renderHelpers" -import { Language as FormLanguage } from "../../util/formUtils" import CreateWorkspacePage from "./CreateWorkspacePage" import { Language } from "./CreateWorkspacePageView"