feat: Add the option to generate a trial license during setup (#5110)

This allows users to generate a 30 day free license during setup to
test out Enterprise features.

site/src/api/typesGenerated.ts

@@ -143,7 +143,7 @@ export interface CreateFirstUserRequest {
   readonly email: string
   readonly username: string
   readonly password: string
-  readonly organization: string
+  readonly trial: boolean
 }
 
 // From codersdk/users.go
@@ -396,6 +396,7 @@ export interface Healthcheck {
 // From codersdk/licenses.go
 export interface License {
   readonly id: number
+  readonly uuid: string
   readonly uploaded_at: string
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO explain why this is needed
   readonly claims: Record<string, any>

site/src/pages/SetupPage/SetupPage.test.tsx

@@ -12,20 +12,14 @@ const fillForm = async ({
   username = "someuser",
   email = "someone@coder.com",
   password = "password",
-  organization = "Coder",
 }: {
   username?: string
   email?: string
   password?: string
-  organization?: string
 } = {}) => {
   const usernameField = screen.getByLabelText(PageViewLanguage.usernameLabel)
   const emailField = screen.getByLabelText(PageViewLanguage.emailLabel)
   const passwordField = screen.getByLabelText(PageViewLanguage.passwordLabel)
-  const organizationField = screen.getByLabelText(
-    PageViewLanguage.organizationLabel,
-  )
-  await userEvent.type(organizationField, organization)
   await userEvent.type(usernameField, username)
   await userEvent.type(emailField, email)
   await userEvent.type(passwordField, password)

site/src/pages/SetupPage/SetupPageView.tsx

@@ -1,5 +1,9 @@
+import Box from "@material-ui/core/Box"
+import Checkbox from "@material-ui/core/Checkbox"
 import FormHelperText from "@material-ui/core/FormHelperText"
+import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
+import Typography from "@material-ui/core/Typography"
 import { LoadingButton } from "components/LoadingButton/LoadingButton"
 import { SignInLayout } from "components/SignInLayout/SignInLayout"
 import { Stack } from "components/Stack/Stack"
@@ -13,17 +17,11 @@ export const Language = {
   emailLabel: "Email",
   passwordLabel: "Password",
   usernameLabel: "Username",
-  organizationLabel: "Organization name",
   emailInvalid: "Please enter a valid email address.",
   emailRequired: "Please enter an email address.",
   passwordRequired: "Please enter a password.",
-  organizationRequired: "Please enter an organization name.",
   create: "Setup account",
-  welcomeMessage: (
-    <>
-      Set up <strong>your account</strong>
-    </>
-  ),
+  welcomeMessage: <>Welcome to Coder</>,
 }
 
 const validationSchema = Yup.object({
@@ -32,7 +30,6 @@ const validationSchema = Yup.object({
     .email(Language.emailInvalid)
     .required(Language.emailRequired),
   password: Yup.string().required(Language.passwordRequired),
-  organization: Yup.string().required(Language.organizationRequired),
   username: nameValidator(Language.usernameLabel),
 })
 
@@ -55,7 +52,7 @@ export const SetupPageView: React.FC<SetupPageViewProps> = ({
         email: "",
         password: "",
         username: "",
-        organization: "",
+        trial: true,
       },
       validationSchema,
       onSubmit,
@@ -64,20 +61,13 @@ export const SetupPageView: React.FC<SetupPageViewProps> = ({
     form,
     formErrors,
   )
+  const styles = useStyles()
 
   return (
     <SignInLayout>
       <Welcome message={Language.welcomeMessage} />
       <form onSubmit={form.handleSubmit}>
         <Stack>
-          <TextField
-            {...getFieldHelpers("organization")}
-            onChange={onChangeTrimmed(form)}
-            autoFocus
-            fullWidth
-            label={Language.organizationLabel}
-            variant="outlined"
-          />
           <TextField
             {...getFieldHelpers("username")}
             onChange={onChangeTrimmed(form)}
@@ -106,6 +96,29 @@ export const SetupPageView: React.FC<SetupPageViewProps> = ({
           {genericError && (
             <FormHelperText error>{genericError}</FormHelperText>
           )}
+          <div className={styles.callout}>
+            <Box display="flex">
+              <div>
+                <Checkbox
+                  id="trial"
+                  name="trial"
+                  defaultChecked
+                  value={form.values.trial}
+                  onChange={form.handleChange}
+                />
+              </div>
+
+              <Box>
+                <Typography variant="h6" style={{ fontSize: 14 }}>
+                  Start a 30-day free trial of Enterprise
+                </Typography>
+                <Typography variant="caption" color="textSecondary">
+                  Get access to high availability, template RBAC, audit logging,
+                  quotas, and more.
+                </Typography>
+              </Box>
+            </Box>
+          </div>
           <LoadingButton
             fullWidth
             variant="contained"
@@ -119,3 +132,9 @@ export const SetupPageView: React.FC<SetupPageViewProps> = ({
     </SignInLayout>
   )
 }
+
+const useStyles = makeStyles(() => ({
+  callout: {
+    borderRadius: 16,
+  },
+}))