coder · BrunoQuaresma · Mar 23, 2023 · Mar 22, 2023 · Mar 22, 2023 · Mar 22, 2023
diff --git a/site/e2e/tests/listTemplates.spec.ts b/site/e2e/tests/listTemplates.spec.ts
@@ -5,5 +5,5 @@ test.use({ storageState: getStatePath("authState") })
 
 test("list templates", async ({ page, baseURL }) => {
   await page.goto(`${baseURL}/templates`, { waitUntil: "networkidle" })
-  await expect(page).toHaveTitle("Templates – Coder")
+  await expect(page).toHaveTitle("Templates - Coder")
 })
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -6,7 +6,7 @@ import AuditPage from "pages/AuditPage/AuditPage"
 import GroupsPage from "pages/GroupsPage/GroupsPage"
 import LoginPage from "pages/LoginPage/LoginPage"
 import { SetupPage } from "pages/SetupPage/SetupPage"
-import { TemplateSettingsPage } from "pages/TemplateSettingsPage/TemplateSettingsPage"
+import { TemplateSettingsPage } from "pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage"
 import TemplatesPage from "pages/TemplatesPage/TemplatesPage"
 import UsersPage from "pages/UsersPage/UsersPage"
 import WorkspacesPage from "pages/WorkspacesPage/WorkspacesPage"
@@ -16,6 +16,7 @@ import { DashboardLayout } from "./components/Dashboard/DashboardLayout"
 import { RequireAuth } from "./components/RequireAuth/RequireAuth"
 import { SettingsLayout } from "./components/SettingsLayout/SettingsLayout"
 import { DeploySettingsLayout } from "components/DeploySettingsLayout/DeploySettingsLayout"
+import { TemplateSettingsLayout } from "pages/TemplateSettingsPage/TemplateSettingsLayout"
 
 // Lazy load pages
 // - Pages that are secondary, not in the main navigation or not usually accessed
@@ -50,7 +51,7 @@ const TerminalPage = lazy(() => import("./pages/TerminalPage/TerminalPage"))
 const TemplatePermissionsPage = lazy(
   () =>
     import(
-      "./pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPage"
+      "./pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage"
     ),
 )
 const TemplateSummaryPage = lazy(
@@ -120,7 +121,10 @@ const CreateTemplatePage = lazy(
   () => import("./pages/CreateTemplatePage/CreateTemplatePage"),
 )
 const TemplateVariablesPage = lazy(
-  () => import("./pages/TemplateVariablesPage/TemplateVariablesPage"),
+  () =>
+    import(
+      "./pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage"
+    ),
 )
 const WorkspaceSettingsPage = lazy(
   () => import("./pages/WorkspaceSettingsPage/WorkspaceSettingsPage"),
@@ -129,7 +133,13 @@ const CreateTokenPage = lazy(
   () => import("./pages/CreateTokenPage/CreateTokenPage"),
 )
 const TemplateFilesPage = lazy(
-  () => import("./pages/TemplateFilesPage/TemplateFilesPage"),
+  () => import("./pages/TemplatePage/TemplateFilesPage/TemplateFilesPage"),
+)
+const TemplateSchedulePage = lazy(
+  () =>
+    import(
+      "./pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePage"
+    ),
 )
 
 export const AppRouter: FC = () => {
@@ -160,16 +170,25 @@ export const AppRouter: FC = () => {
                 <Route path=":template">
                   <Route element={<TemplateLayout />}>
                     <Route index element={<TemplateSummaryPage />} />
+
+                    <Route path="files" element={<TemplateFilesPage />} />
+                  </Route>
+
+                  <Route path="workspace" element={<CreateWorkspacePage />} />
+
+                  <Route path="settings" element={<TemplateSettingsLayout />}>
+                    <Route index element={<TemplateSettingsPage />} />
                     <Route
                       path="permissions"
                       element={<TemplatePermissionsPage />}
                     />
-                    <Route path="files" element={<TemplateFilesPage />} />
+                    <Route
+                      path="variables"
+                      element={<TemplateVariablesPage />}
+                    />
+                    <Route path="schedule" element={<TemplateSchedulePage />} />
                   </Route>
 
-                  <Route path="workspace" element={<CreateWorkspacePage />} />
-                  <Route path="settings" element={<TemplateSettingsPage />} />
-                  <Route path="variables" element={<TemplateVariablesPage />} />
                   <Route path="versions">
                     <Route path=":version">
                       <Route index element={<TemplateVersionPage />} />

diff --git a/site/src/components/GoBackButton/GoBackButton.tsx b/site/src/components/GoBackButton/GoBackButton.tsx
diff --git a/site/src/components/IconField/LazyIconField.tsx b/site/src/components/IconField/LazyIconField.tsx
@@ -5,7 +5,7 @@ const IconField = lazy(() => import("./IconField"))
 
 export const LazyIconField: FC<IconFieldProps> = (props) => {
   return (
-    <Suspense>
+    <Suspense fallback={<div role="progressbar" data-testid="loader" />}>
       <IconField {...props} />
     </Suspense>
   )

diff --git a/site/src/components/SettingsLayout/Sidebar.tsx b/site/src/components/SettingsLayout/Sidebar.tsx
@@ -130,6 +130,7 @@ const useStyles = makeStyles((theme) => ({
     fontWeight: 600,
     overflow: "hidden",
     textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
   },
   email: {
     color: theme.palette.text.secondary,

diff --git a/site/src/components/TemplateLayout/TemplateLayout.tsx b/site/src/components/TemplateLayout/TemplateLayout.tsx
@@ -42,13 +42,6 @@ const fetchTemplate = async (orgId: string, templateName: string) => {
   }
 }
 
-const useTemplateData = (orgId: string, templateName: string) => {
-  return useQuery({
-    queryKey: ["template", templateName],
-    queryFn: () => fetchTemplate(orgId, templateName),
-  })
-}
-
 type TemplateLayoutContextValue = Awaited<ReturnType<typeof fetchTemplate>>
 
 const TemplateLayoutContext = createContext<
@@ -71,28 +64,31 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
   const navigate = useNavigate()
   const styles = useStyles()
   const orgId = useOrganizationId()
-  const { template } = useParams() as { template: string }
-  const templateData = useTemplateData(orgId, template)
+  const { template: templateName } = useParams() as { template: string }
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["template", templateName],
+    queryFn: () => fetchTemplate(orgId, templateName),
+  })
   const dashboard = useDashboard()
 
-  if (templateData.error) {
+  if (error) {
     return (
       <div className={styles.error}>
-        <AlertBanner severity="error" error={templateData.error} />
+        <AlertBanner severity="error" error={error} />
       </div>
     )
   }
 
-  if (templateData.isLoading || !templateData.data) {
+  if (isLoading || !data) {
     return <Loader />
   }
 
   return (
     <>
       <TemplatePageHeader
-        template={templateData.data.template}
-        activeVersion={templateData.data.activeVersion}
-        permissions={templateData.data.permissions}
+        template={data.template}
+        activeVersion={data.activeVersion}
+        permissions={data.permissions}
         canEditFiles={dashboard.experiments.includes("template_editor")}
         onDeleteTemplate={() => {
           navigate("/templates")
@@ -104,7 +100,7 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
           <Stack direction="row" spacing={0.25}>
             <NavLink
               end
-              to={`/templates/${template}`}
+              to={`/templates/${templateName}`}
               className={({ isActive }) =>
                 combineClasses([
                   styles.tabItem,
@@ -115,18 +111,7 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
               Summary
             </NavLink>
             <NavLink
-              to={`/templates/${template}/permissions`}
-              className={({ isActive }) =>
-                combineClasses([
-                  styles.tabItem,
-                  isActive ? styles.tabItemActive : undefined,
-                ])
-              }
-            >
-              Permissions
-            </NavLink>
-            <NavLink
-              to={`/templates/${template}/files`}
+              to={`/templates/${templateName}/files`}
               className={({ isActive }) =>
                 combineClasses([
                   styles.tabItem,
@@ -141,7 +126,7 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
       </div>
 
       <Margins>
-        <TemplateLayoutContext.Provider value={templateData.data}>
+        <TemplateLayoutContext.Provider value={data}>
           <Suspense fallback={<Loader />}>{children}</Suspense>
         </TemplateLayoutContext.Provider>
       </Margins>

diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.tsx
@@ -67,13 +67,6 @@ const TemplateMenu: FC<{
         >
           {Language.settingsButton}
         </MenuItem>
-        <MenuItem
-          component={RouterLink}
-          to={`/templates/${templateName}/variables`}
-          onClick={handleClose}
-        >
-          {Language.variablesButton}
-        </MenuItem>
         {canEditFiles && (
           <MenuItem
             component={RouterLink}

diff --git a/site/src/i18n/en/templateSettingsPage.json b/site/src/i18n/en/templateSettingsPage.json
@@ -1,5 +1,5 @@
 {
-  "title": "Template settings",
+  "title": "General Settings",
   "nameLabel": "Name",
   "displayNameLabel": "Display name",
   "descriptionLabel": "Description",

diff --git a/...s/TemplateFilesPage/TemplateFilesPage.tsx → ...e/TemplateFilesPage/TemplateFilesPage.tsx b/...s/TemplateFilesPage/TemplateFilesPage.tsx → ...e/TemplateFilesPage/TemplateFilesPage.tsx
diff --git a/site/src/pages/TemplateSettingsPage/Sidebar.tsx b/site/src/pages/TemplateSettingsPage/Sidebar.tsx
@@ -0,0 +1,149 @@
+import { makeStyles } from "@material-ui/core/styles"
+import ScheduleIcon from "@material-ui/icons/TimerOutlined"
+import VariablesIcon from "@material-ui/icons/CodeOutlined"
+import { Template } from "api/typesGenerated"
+import { Stack } from "components/Stack/Stack"
+import { FC, ElementType, PropsWithChildren, ReactNode } from "react"
+import { Link, NavLink } from "react-router-dom"
+import { combineClasses } from "util/combineClasses"
+import GeneralIcon from "@material-ui/icons/SettingsOutlined"
+import SecurityIcon from "@material-ui/icons/LockOutlined"
+import { Avatar } from "components/Avatar/Avatar"
+
+const SidebarNavItem: FC<
+  PropsWithChildren<{ href: string; icon: ReactNode }>
+> = ({ children, href, icon }) => {
+  const styles = useStyles()
+  return (
+    <NavLink
+      end
+      to={href}
+      className={({ isActive }) =>
+        combineClasses([
+          styles.sidebarNavItem,
+          isActive ? styles.sidebarNavItemActive : undefined,
+        ])
+      }
+    >
+      <Stack alignItems="center" spacing={1.5} direction="row">
+        {icon}
+        {children}
+      </Stack>
+    </NavLink>
+  )
+}
+
+const SidebarNavItemIcon: React.FC<{ icon: ElementType }> = ({
+  icon: Icon,
+}) => {
+  const styles = useStyles()
+  return <Icon className={styles.sidebarNavItemIcon} />
+}
+
+export const Sidebar: React.FC<{ template: Template }> = ({ template }) => {
+  const styles = useStyles()
+
+  return (
+    <nav className={styles.sidebar}>
+      <Stack
+        direction="row"
+        alignItems="center"
+        className={styles.templateInfo}
+      >
+        <Avatar src={template.icon} variant="square" fitImage />
+        <Stack spacing={0} className={styles.templateData}>
+          <Link className={styles.name} to={`/templates/${template.name}`}>
+            {template.display_name !== ""
+              ? template.display_name
+              : template.name}
+          </Link>
+          <span className={styles.secondary}>{template.name}</span>
+        </Stack>
+      </Stack>
+
+      <SidebarNavItem href="" icon={<SidebarNavItemIcon icon={GeneralIcon} />}>
+        General
+      </SidebarNavItem>
+      <SidebarNavItem
+        href="permissions"
+        icon={<SidebarNavItemIcon icon={SecurityIcon} />}
+      >
+        Permissions
+      </SidebarNavItem>
+      <SidebarNavItem
+        href="variables"
+        icon={<SidebarNavItemIcon icon={VariablesIcon} />}
+      >
+        Variables
+      </SidebarNavItem>
+      <SidebarNavItem
+        href="schedule"
+        icon={<SidebarNavItemIcon icon={ScheduleIcon} />}
+      >
+        Schedule
+      </SidebarNavItem>
+    </nav>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  sidebar: {
+    width: 245,
+    flexShrink: 0,
+  },
+  sidebarNavItem: {
+    color: "inherit",
+    display: "block",
+    fontSize: 14,
+    textDecoration: "none",
+    padding: theme.spacing(1.5, 1.5, 1.5, 2),
+    borderRadius: theme.shape.borderRadius / 2,
+    transition: "background-color 0.15s ease-in-out",
+    marginBottom: 1,
+    position: "relative",
+
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+  sidebarNavItemActive: {
+    backgroundColor: theme.palette.action.hover,
+
+    "&:before": {
+      content: '""',
+      display: "block",
+      width: 3,
+      height: "100%",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      backgroundColor: theme.palette.secondary.dark,
+      borderTopLeftRadius: theme.shape.borderRadius,
+      borderBottomLeftRadius: theme.shape.borderRadius,
+    },
+  },
+  sidebarNavItemIcon: {
+    width: theme.spacing(2),
+    height: theme.spacing(2),
+  },
+  templateInfo: {
+    marginBottom: theme.spacing(2),
+  },
+  templateData: {
+    overflow: "hidden",
+  },
+  name: {
+    fontWeight: 600,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    color: theme.palette.text.primary,
+    textDecoration: "none",
+  },
+  secondary: {
+    color: theme.palette.text.secondary,
+    fontSize: 12,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  },
+}))