From c501b6a7b3e4602a517b6648345d0346c5539208 Mon Sep 17 00:00:00 2001
From: Presley <presley@coder.com>
Date: Mon, 25 Apr 2022 22:08:54 +0000
Subject: [PATCH 1/5] Add FormFooter

---
 .../FormFooter/FormFooter.stories.tsx         | 29 +++++++++++++++
 site/src/components/FormFooter/FormFooter.tsx | 37 +++++++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 site/src/components/FormFooter/FormFooter.stories.tsx
 create mode 100644 site/src/components/FormFooter/FormFooter.tsx

diff --git a/site/src/components/FormFooter/FormFooter.stories.tsx b/site/src/components/FormFooter/FormFooter.stories.tsx
new file mode 100644
index 0000000000000..9d860c0102529
--- /dev/null
+++ b/site/src/components/FormFooter/FormFooter.stories.tsx
@@ -0,0 +1,29 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { FormFooter, FormFooterProps } from "./FormFooter"
+
+export default {
+  title: "components/FormFooter",
+  component: FormFooter,
+  argTypes:{
+    onCancel: { action: "cancel" }
+  }
+} as ComponentMeta<typeof FormFooter>
+
+const Template: Story<FormFooterProps> = (args) => <FormFooter {...args} />
+
+export const Ready = Template.bind({})
+Ready.args = {
+  isLoading: false,
+}
+
+export const Custom = Template.bind({})
+Custom.args = {
+  isLoading: false,
+  submitLabel: "Create",
+}
+
+export const Loading = Template.bind({})
+Loading.args = {
+  isLoading: true,
+}
diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
new file mode 100644
index 0000000000000..7107f7864b0d1
--- /dev/null
+++ b/site/src/components/FormFooter/FormFooter.tsx
@@ -0,0 +1,37 @@
+import Button from "@material-ui/core/Button"
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+import { LoadingButton } from "../LoadingButton/LoadingButton"
+
+export interface FormFooterProps {
+  onCancel: () => void
+  isLoading: boolean
+  submitLabel?: string
+}
+
+const useStyles = makeStyles(() => ({
+  footer: {
+    display: "flex",
+    flex: "0",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  button: {
+    margin: "1em",
+  },
+}))
+
+export const FormFooter: React.FC<FormFooterProps> = ({ onCancel, isLoading, submitLabel = "Submit" }) => {
+  const styles = useStyles()
+  return (
+    <div className={styles.footer}>
+      <Button className={styles.button} onClick={onCancel} variant="outlined">
+        Cancel
+      </Button>
+      <LoadingButton loading={isLoading} className={styles.button} variant="contained" color="primary" type="submit">
+        {submitLabel}
+      </LoadingButton>
+    </div>
+  )
+}

From 5d6d0c116a848a1f6bdf63fdfe037526ebe66834 Mon Sep 17 00:00:00 2001
From: Presley <presley@coder.com>
Date: Mon, 25 Apr 2022 22:09:00 +0000
Subject: [PATCH 2/5] Add FullPageForm

---
 .../FullPageForm/FullPageForm.stories.tsx     | 35 +++++++++++++++++++
 .../components/FullPageForm/FullPageForm.tsx  | 32 +++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 site/src/components/FullPageForm/FullPageForm.stories.tsx
 create mode 100644 site/src/components/FullPageForm/FullPageForm.tsx

diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx
new file mode 100644
index 0000000000000..e34c90eb2055b
--- /dev/null
+++ b/site/src/components/FullPageForm/FullPageForm.stories.tsx
@@ -0,0 +1,35 @@
+import TextField from "@material-ui/core/TextField"
+import { action } from "@storybook/addon-actions"
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { FormFooter } from "../FormFooter/FormFooter"
+import { Stack } from "../Stack/Stack"
+import { FullPageForm, FullPageFormProps } from "./FullPageForm"
+
+export default {
+  title: "components/FullPageForm",
+  component: FullPageForm,
+} as ComponentMeta<typeof FullPageForm>
+
+const Template: Story<FullPageFormProps> = (args) => (
+  <FullPageForm {...args}>
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+      }}
+    >
+      <Stack>
+        <TextField fullWidth variant="outlined" label="Field 1" name="field1" />
+        <TextField fullWidth variant="outlined" label="Field 2" name="field2" />
+        <FormFooter isLoading={false} onCancel={action("cancel")} />
+      </Stack>
+    </form>
+  </FullPageForm>
+)
+
+export const Example = Template.bind({})
+Example.args = {
+  title: "My Form",
+  detail: "Lorem ipsum dolor",
+  onCancel: action("cancel")
+}
diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx
new file mode 100644
index 0000000000000..dc45c2b923010
--- /dev/null
+++ b/site/src/components/FullPageForm/FullPageForm.tsx
@@ -0,0 +1,32 @@
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+import { FormCloseButton } from "../FormCloseButton/FormCloseButton"
+import { FormTitle } from "../FormTitle/FormTitle"
+
+export interface FullPageFormProps {
+  title: string
+  detail: React.ReactNode
+  onCancel: () => void
+}
+
+const useStyles = makeStyles(() => ({
+  root: {
+    maxWidth: "1380px",
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+}))
+
+export const FullPageForm: React.FC<FullPageFormProps> = ({ title, detail, onCancel, children }) => {
+  const styles = useStyles()
+  return (
+    <main className={styles.root}>
+      <FormTitle title={title} detail={detail} />
+      <FormCloseButton onClose={onCancel} />
+
+      {children}
+    </main>
+  )
+}

From 861969eead1339a5161b3cfd06eba9ba6af9e2fe Mon Sep 17 00:00:00 2001
From: Presley <presley@coder.com>
Date: Mon, 25 Apr 2022 22:09:43 +0000
Subject: [PATCH 3/5] Lint

---
 site/src/components/FormFooter/FormFooter.stories.tsx     | 6 +++---
 site/src/components/FullPageForm/FullPageForm.stories.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/components/FormFooter/FormFooter.stories.tsx b/site/src/components/FormFooter/FormFooter.stories.tsx
index 9d860c0102529..4590a263013d9 100644
--- a/site/src/components/FormFooter/FormFooter.stories.tsx
+++ b/site/src/components/FormFooter/FormFooter.stories.tsx
@@ -5,9 +5,9 @@ import { FormFooter, FormFooterProps } from "./FormFooter"
 export default {
   title: "components/FormFooter",
   component: FormFooter,
-  argTypes:{
-    onCancel: { action: "cancel" }
-  }
+  argTypes: {
+    onCancel: { action: "cancel" },
+  },
 } as ComponentMeta<typeof FormFooter>
 
 const Template: Story<FormFooterProps> = (args) => <FormFooter {...args} />
diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx
index e34c90eb2055b..3a92bc64cca1e 100644
--- a/site/src/components/FullPageForm/FullPageForm.stories.tsx
+++ b/site/src/components/FullPageForm/FullPageForm.stories.tsx
@@ -31,5 +31,5 @@ export const Example = Template.bind({})
 Example.args = {
   title: "My Form",
   detail: "Lorem ipsum dolor",
-  onCancel: action("cancel")
+  onCancel: action("cancel"),
 }

From 369af6b04ad72222d058f1e7d837909103735850 Mon Sep 17 00:00:00 2001
From: Presley <presley@coder.com>
Date: Mon, 25 Apr 2022 22:51:10 +0000
Subject: [PATCH 4/5] Make detail optional

---
 site/src/components/FullPageForm/FullPageForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx
index dc45c2b923010..83f9c345da611 100644
--- a/site/src/components/FullPageForm/FullPageForm.tsx
+++ b/site/src/components/FullPageForm/FullPageForm.tsx
@@ -5,7 +5,7 @@ import { FormTitle } from "../FormTitle/FormTitle"
 
 export interface FullPageFormProps {
   title: string
-  detail: React.ReactNode
+  detail?: React.ReactNode
   onCancel: () => void
 }
 

From 90283ed6c6de9d543f6c9e44c5874861740f6c17 Mon Sep 17 00:00:00 2001
From: Presley <presley@coder.com>
Date: Mon, 25 Apr 2022 22:53:50 +0000
Subject: [PATCH 5/5] Use Language

---
 site/src/components/FormFooter/FormFooter.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
index 7107f7864b0d1..a7b5c48ba1717 100644
--- a/site/src/components/FormFooter/FormFooter.tsx
+++ b/site/src/components/FormFooter/FormFooter.tsx
@@ -3,6 +3,11 @@ import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 
+const Language = {
+  cancelLabel: "Cancel",
+  defaultSubmitLabel: "Submit",
+}
+
 export interface FormFooterProps {
   onCancel: () => void
   isLoading: boolean
@@ -22,12 +27,16 @@ const useStyles = makeStyles(() => ({
   },
 }))
 
-export const FormFooter: React.FC<FormFooterProps> = ({ onCancel, isLoading, submitLabel = "Submit" }) => {
+export const FormFooter: React.FC<FormFooterProps> = ({
+  onCancel,
+  isLoading,
+  submitLabel = Language.defaultSubmitLabel,
+}) => {
   const styles = useStyles()
   return (
     <div className={styles.footer}>
       <Button className={styles.button} onClick={onCancel} variant="outlined">
-        Cancel
+        {Language.cancelLabel}
       </Button>
       <LoadingButton loading={isLoading} className={styles.button} variant="contained" color="primary" type="submit">
         {submitLabel}