coder · BrunoQuaresma · Feb 17, 2023 · Feb 16, 2023 · Feb 16, 2023 · Feb 16, 2023
diff --git a/site/src/components/HorizontalForm/HorizontalForm.tsx b/site/src/components/HorizontalForm/HorizontalForm.tsx
@@ -0,0 +1,129 @@
+import { makeStyles } from "@material-ui/core/styles"
+import {
+  FormFooterProps as BaseFormFooterProps,
+  FormFooter as BaseFormFooter,
+} from "components/FormFooter/FormFooter"
+import { Stack } from "components/Stack/Stack"
+import { FC, HTMLProps, PropsWithChildren } from "react"
+
+export const HorizontalForm: FC<
+  PropsWithChildren & HTMLProps<HTMLFormElement>
+> = ({ children, ...formProps }) => {
+  const styles = useStyles()
+
+  return (
+    <form {...formProps}>
+      <Stack direction="column" spacing={10} className={styles.formSections}>
+        {children}
+      </Stack>
+    </form>
+  )
+}
+
+export const FormSection: FC<
+  PropsWithChildren & { title: string; description: string | JSX.Element }
+> = ({ children, title, description }) => {
+  const styles = useStyles()
+
+  return (
+    <div className={styles.formSection}>
+      <div className={styles.formSectionInfo}>
+        <h2 className={styles.formSectionInfoTitle}>{title}</h2>
+        <div className={styles.formSectionInfoDescription}>{description}</div>
+      </div>
+
+      {children}
+    </div>
+  )
+}
+
+export const FormFields: FC<PropsWithChildren> = ({ children }) => {
+  const styles = useStyles()
+  return (
+    <Stack direction="column" className={styles.formSectionFields}>
+      {children}
+    </Stack>
+  )
+}
+
+export const FormFooter: FC<BaseFormFooterProps> = (props) => {
+  const formFooterStyles = useFormFooterStyles()
+  return (
+    <BaseFormFooter
+      {...props}
+      styles={{ ...formFooterStyles, ...props.styles }}
+    />
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  formSections: {
+    [theme.breakpoints.down("sm")]: {
+      gap: theme.spacing(8),
+    },
+  },
+
+  formSection: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: theme.spacing(15),
+
+    [theme.breakpoints.down("sm")]: {
+      flexDirection: "column",
+      gap: theme.spacing(2),
+    },
+  },
+
+  formSectionInfo: {
+    width: 312,
+    flexShrink: 0,
+    position: "sticky",
+    top: theme.spacing(3),
+
+    [theme.breakpoints.down("sm")]: {
+      width: "100%",
+      position: "initial",
+    },
+  },
+
+  formSectionInfoTitle: {
+    fontSize: 20,
+    color: theme.palette.text.primary,
+    fontWeight: 400,
+    margin: 0,
+    marginBottom: theme.spacing(1),
+  },
+
+  formSectionInfoDescription: {
+    fontSize: 14,
+    color: theme.palette.text.secondary,
+    lineHeight: "160%",
+    margin: 0,
+  },
+
+  formSectionFields: {
+    width: "100%",
+  },
+}))
+
+const useFormFooterStyles = makeStyles((theme) => ({
+  button: {
+    minWidth: theme.spacing(23),
+
+    [theme.breakpoints.down("sm")]: {
+      width: "100%",
+    },
+  },
+  footer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    flexDirection: "row-reverse",
+    gap: theme.spacing(2),
+
+    [theme.breakpoints.down("sm")]: {
+      flexDirection: "column",
+      gap: theme.spacing(1),
+    },
+  },
+}))
diff --git a/site/src/components/TemplateLayout/TemplateLayout.tsx b/site/src/components/TemplateLayout/TemplateLayout.tsx
@@ -1,22 +1,8 @@
-import Button from "@material-ui/core/Button"
-import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
-import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
-import SettingsOutlined from "@material-ui/icons/SettingsOutlined"
 import { useMachine } from "@xstate/react"
-import {
-  PageHeader,
-  PageHeaderSubtitle,
-  PageHeaderTitle,
-} from "components/PageHeader/PageHeader"
 import { useOrganizationId } from "hooks/useOrganizationId"
 import { createContext, FC, Suspense, useContext } from "react"
-import {
-  Link as RouterLink,
-  NavLink,
-  Outlet,
-  useParams,
-} from "react-router-dom"
+import { NavLink, Outlet, useNavigate, useParams } from "react-router-dom"
 import { combineClasses } from "util/combineClasses"
 import {
   TemplateContext,
@@ -27,14 +13,7 @@ import { Stack } from "components/Stack/Stack"
 import { Permissions } from "xServices/auth/authXService"
 import { Loader } from "components/Loader/Loader"
 import { usePermissions } from "hooks/usePermissions"
-import { Avatar } from "components/Avatar/Avatar"
-
-const Language = {
-  settingsButton: "Settings",
-  editButton: "Edit",
-  createButton: "Create workspace",
-  noDescription: "",
-}
+import { TemplatePageHeader } from "./TemplatePageHeader"
 
 const useTemplateName = () => {
   const { template } = useParams()
@@ -65,38 +44,10 @@ export const useTemplateLayoutContext = (): TemplateLayoutContextValue => {
   return context
 }
 
-const TemplateSettingsButton: FC<{ templateName: string }> = ({
-  templateName,
-}) => (
-  <Link
-    underline="none"
-    component={RouterLink}
-    to={`/templates/${templateName}/settings`}
-  >
-    <Button variant="outlined" startIcon={<SettingsOutlined />}>
-      {Language.settingsButton}
-    </Button>
-  </Link>
-)
-
-const CreateWorkspaceButton: FC<{
-  templateName: string
-  className?: string
-}> = ({ templateName, className }) => (
-  <Link
-    underline="none"
-    component={RouterLink}
-    to={`/templates/${templateName}/workspace`}
-  >
-    <Button className={className ?? ""} startIcon={<AddCircleOutline />}>
-      {Language.createButton}
-    </Button>
-  </Link>
-)
-
 export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
   children = <Outlet />,
 }) => {
+  const navigate = useNavigate()
   const styles = useStyles()
   const organizationId = useOrganizationId()
   const templateName = useTemplateName()
@@ -108,58 +59,20 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
   })
   const { template, permissions: templatePermissions } = templateState.context
   const permissions = usePermissions()
-  const hasIcon = template && template.icon && template.icon !== ""
 
-  if (!template) {
+  if (!template || !templatePermissions) {
     return <Loader />
   }
 
-  const generatePageHeaderActions = (): JSX.Element[] => {
-    const pageActions: JSX.Element[] = []
-
-    if (templatePermissions?.canUpdateTemplate) {
-      pageActions.push(<TemplateSettingsButton templateName={template.name} />)
-    }
-
-    pageActions.push(<CreateWorkspaceButton templateName={template.name} />)
-
-    return pageActions
-  }
-
   return (
     <>
-      <Margins>
-        <PageHeader
-          actions={
-            <>
-              {generatePageHeaderActions().map((action, i) => (
-                <div key={i}>{action}</div>
-              ))}
-            </>
-          }
-        >
-          <Stack direction="row" spacing={3} className={styles.pageTitle}>
-            {hasIcon ? (
-              <Avatar size="xl" src={template.icon} variant="square" fitImage />
-            ) : (
-              <Avatar size="xl">{template.name}</Avatar>
-            )}
-
-            <div>
-              <PageHeaderTitle>
-                {template.display_name.length > 0
-                  ? template.display_name
-                  : template.name}
-              </PageHeaderTitle>
-              <PageHeaderSubtitle condensed>
-                {template.description === ""
-                  ? Language.noDescription
-                  : template.description}
-              </PageHeaderSubtitle>
-            </div>
-          </Stack>
-        </PageHeader>
-      </Margins>
+      <TemplatePageHeader
+        template={template}
+        permissions={templatePermissions}
+        onDeleteTemplate={() => {
+          navigate("/templates")
+        }}
+      />
 
       <div className={styles.tabs}>
         <Margins>
@@ -204,17 +117,6 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
 
 export const useStyles = makeStyles((theme) => {
   return {
-    pageTitle: {
-      alignItems: "center",
-    },
-    iconWrapper: {
-      width: theme.spacing(6),
-      height: theme.spacing(6),
-      "& img": {
-        width: "100%",
-      },
-    },
-
     tabs: {
       borderBottom: `1px solid ${theme.palette.divider}`,
       marginBottom: theme.spacing(5),

diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.stories.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.stories.tsx
@@ -0,0 +1,35 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import { MockTemplate } from "testHelpers/entities"
+import {
+  TemplatePageHeader,
+  TemplatePageHeaderProps,
+} from "./TemplatePageHeader"
+
+export default {
+  title: "Components/TemplatePageHeader",
+  component: TemplatePageHeader,
+  argTypes: {
+    template: {
+      defaultValue: MockTemplate,
+    },
+    permissions: {
+      defaultValue: {
+        canUpdateTemplate: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof TemplatePageHeader>
+
+const Template: Story<TemplatePageHeaderProps> = (args) => (
+  <TemplatePageHeader {...args} />
+)
+
+export const CanUpdate = Template.bind({})
+CanUpdate.args = {}
+
+export const CanNotUpdate = Template.bind({})
+CanNotUpdate.args = {
+  permissions: {
+    canUpdateTemplate: false,
+  },
+}