Add name to site creation form, but autopopulate based on title input

package.json

@@ -109,6 +109,7 @@
     "sass-loader": "^10.1.1",
     "showdown": "^1.9.1",
     "sinon": "^9.0.2",
+    "slugify": "^1.5.0",
     "style-loader": "^1.2.1",
     "ts-jest": "^27.0.2",
     "ts-loader": "^8.0.14",

static/js/components/forms/SiteForm.test.tsx

@@ -69,5 +69,31 @@ describe("SiteForm", () => {
         expect(error.errors).toStrictEqual(["Title is a required field"])
       }
     })
+    it("rejects an empty name", async () => {
+      try {
+        await expect(
+          await websiteValidation.validateAt("name", { name: "" })
+        ).rejects.toThrow()
+      } catch (error) {
+        expect(error).toBeInstanceOf(ValidationError)
+        expect(error.errors).toStrictEqual(["URL is a required field"])
+      }
+    })
+    ;["这是我的", "Test", "test!", "test_test", "test()", "test_test"].forEach(
+      name => {
+        it("rejects an invalid name", async () => {
+          try {
+            await expect(
+              await websiteValidation.validateAt("name", { name })
+            ).rejects.toThrow()
+          } catch (error) {
+            expect(error).toBeInstanceOf(ValidationError)
+            expect(error.errors).toStrictEqual([
+              "Must be lowercase & only include letters (a-z), numbers, dashes"
+            ])
+          }
+        })
+      }
+    )
   })
 })

static/js/components/forms/SiteForm.tsx

@@ -1,6 +1,7 @@
 import * as React from "react"
 import { Formik, Form, ErrorMessage, Field, FormikHelpers } from "formik"
 import * as yup from "yup"
+import slugify from "slugify"
 
 import { FormError } from "./FormError"
 
@@ -9,6 +10,7 @@ import SelectField from "../widgets/SelectField"
 
 export interface SiteFormValues {
   title: string
+  name: string
   starter: number | null
 }
 
@@ -26,15 +28,32 @@ export const websiteValidation = yup.object().shape({
     .label("Title")
     .trim()
     .required(),
+  name: yup
+    .string()
+    .label("URL")
+    .trim()
+    .matches(/^[a-z0-9-]*$/, {
+      message: "Must be lowercase & only include letters (a-z), numbers, dashes"
+    })
+    .required(),
   starter: yup.number().required()
 })
 
+const handleTitleChange = (handler: any) => (e: any) => {
+  const { target } = e
+  const { value } = target
+  const computedValue = slugify(value, { strict: true }).toLowerCase()
+  handler({ target })
+  handler({ target: { name: "name", value: computedValue } })
+}
+
 export const SiteForm = ({
   onSubmit,
   websiteStarters
 }: Props): JSX.Element | null => {
   const initialValues: SiteFormValues = {
     title:   "",
+    name:    "",
     starter: websiteStarters.length > 0 ? websiteStarters[0].id : 0
   }
 
@@ -44,13 +63,23 @@ export const SiteForm = ({
       validationSchema={websiteValidation}
       initialValues={initialValues}
     >
-      {({ isSubmitting, status }) => (
+      {({ isSubmitting, handleChange, status }) => (
         <Form>
           <div className="form-group">
             <label htmlFor="title">Title*</label>
-            <Field type="text" name="title" className="form-control" />
+            <Field
+              type="text"
+              name="title"
+              className="form-control"
+              onChange={handleTitleChange(handleChange)}
+            />
             <ErrorMessage name="title" component={FormError} />
           </div>
+          <div className="form-group">
+            <label htmlFor="name">URL*</label>
+            <Field type="text" name="name" className="form-control" />
+            <ErrorMessage name="name" component="div" />
+          </div>
           <div className="form-group">
             <label htmlFor="starter">Starter*</label>
             <Field

static/js/pages/SiteCreationPage.test.tsx

@@ -89,6 +89,7 @@ describe("SiteCreationPage", () => {
         onSubmit(
           {
             title:   "My Title",
+            name:    "my-title",
             starter: 1
           },
           // @ts-ignore
@@ -122,6 +123,7 @@ describe("SiteCreationPage", () => {
         onSubmit(
           {
             title:   errorMsg,
+            name:    "error-msg",
             starter: 1
           },
           // @ts-ignore
@@ -131,6 +133,7 @@ describe("SiteCreationPage", () => {
       sinon.assert.calledOnce(createWebsiteStub)
       sinon.assert.calledOnceWithExactly(formikStubs.setErrors, {
         ...errorResp.errors,
+        name:    undefined,
         starter: undefined
       })
       sinon.assert.notCalled(historyPushStub)

static/js/pages/SiteCreationPage.tsx

@@ -37,6 +37,7 @@ export default function SiteCreationPage({
     }
     const response = await createWebsite({
       title:   values.title,
+      name:    values.name,
       starter: values.starter
     })
     if (!response) {
@@ -52,8 +53,8 @@ export default function SiteCreationPage({
         setStatus(errors)
       } else {
         setErrors({
-          // Name is autogenerated, so if any errors come back for the "name" property, attach them to the title field
-          title:   errors.title || errors.name,
+          title:   errors.title,
+          name:    errors.name,
           starter: errors.starter
         })
       }

static/js/types/websites.ts

@@ -161,6 +161,7 @@ export interface WebsiteStarter {
 
 export interface NewWebsitePayload {
   title: string
+  name: string
   starter: number
 }
 

yarn.lock

@@ -9929,6 +9929,11 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
+slugify@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.5.0.tgz#5f3c8e2a84105b54eb51486db1b468a599b3c9b8"
+  integrity sha512-Q2UPZ2udzquy1ElHfOLILMBMqBEXkiD3wE75qtBvV+FsDdZZjUqPZ44vqLTejAVq+wLLHacOMcENnP8+ZbzmIA==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"