coder · sreya · Oct 10, 2022 · Sep 13, 2022 · Sep 13, 2022 · Sep 13, 2022
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -1,7 +1,10 @@
 import { useSelector } from "@xstate/react"
 import { FeatureNames } from "api/types"
 import { RequirePermission } from "components/RequirePermission/RequirePermission"
+import { TemplateLayout } from "components/TemplateLayout/TemplateLayout"
 import { SetupPage } from "pages/SetupPage/SetupPage"
+import TemplateCollaboratorsPage from "pages/TemplatePage/TemplateCollaboratorsPage/TemplateCollaboratorsPage"
+import TemplateSummaryPage from "pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage"
 import { TemplateSettingsPage } from "pages/TemplateSettingsPage/TemplateSettingsPage"
 import { FC, lazy, Suspense, useContext } from "react"
 import { Route, Routes } from "react-router-dom"
@@ -33,7 +36,6 @@ const TerminalPage = lazy(() => import("./pages/TerminalPage/TerminalPage"))
 const WorkspacesPage = lazy(() => import("./pages/WorkspacesPage/WorkspacesPage"))
 const CreateWorkspacePage = lazy(() => import("./pages/CreateWorkspacePage/CreateWorkspacePage"))
 const AuditPage = lazy(() => import("./pages/AuditPage/AuditPage"))
-const TemplatePage = lazy(() => import("./pages/TemplatePage/TemplatePage"))
 
 export const AppRouter: FC = () => {
   const xServices = useContext(XServiceContext)
@@ -87,12 +89,22 @@ export const AppRouter: FC = () => {
 
           <Route path=":template">
             <Route
-              index
               element={
                 <AuthAndFrame>
-                  <TemplatePage />
+                  <TemplateLayout />
                 </AuthAndFrame>
               }
+            >
+              <Route index element={<TemplateSummaryPage />} />
+              <Route path="collaborators" element={<TemplateCollaboratorsPage />} />
+            </Route>
+            <Route
+              path="workspace"
+              element={
+                <RequireAuth>
+                  <CreateWorkspacePage />
+                </RequireAuth>
+              }
             />
             <Route
               path="workspace"

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -486,3 +486,10 @@ export const getTemplateDAUs = async (
   const response = await axios.get(`/api/v2/templates/${templateId}/daus`)
   return response.data
 }
+
+export const getTemplateUserRoles = async (
+  templateId: string,
+): Promise<TypesGen.TemplateUser[]> => {
+  const response = await axios.get(`/api/v2/templates/${templateId}/user-roles`)
+  return response.data
+}
diff --git a/site/src/components/TemplateLayout/TemplateLayout.tsx b/site/src/components/TemplateLayout/TemplateLayout.tsx
@@ -0,0 +1,231 @@
+import Avatar from "@material-ui/core/Avatar"
+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, useSelector } from "@xstate/react"
+import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"
+import { DeleteButton } from "components/DropdownButton/ActionCtas"
+import { DropdownButton } from "components/DropdownButton/DropdownButton"
+import { Loader } from "components/Loader/Loader"
+import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "components/PageHeader/PageHeader"
+import { useOrganizationId } from "hooks/useOrganizationId"
+import { FC, useContext } from "react"
+import { useTranslation } from "react-i18next"
+import { Link as RouterLink, Navigate, NavLink, Outlet, useParams } from "react-router-dom"
+import { combineClasses } from "util/combineClasses"
+import { firstLetter } from "util/firstLetter"
+import { selectPermissions } from "xServices/auth/authSelectors"
+import { XServiceContext } from "xServices/StateContext"
+import { templateMachine } from "xServices/template/templateXService"
+import { Margins } from "../../components/Margins/Margins"
+import { Stack } from "../../components/Stack/Stack"
+
+const useTemplateName = () => {
+  const { template } = useParams()
+
+  if (!template) {
+    throw new Error("No template found in the URL")
+  }
+
+  return template
+}
+
+const Language = {
+  settingsButton: "Settings",
+  createButton: "Create workspace",
+  noDescription: "",
+}
+
+export const TemplateLayout: FC = () => {
+  const styles = useStyles()
+  const organizationId = useOrganizationId()
+  const templateName = useTemplateName()
+  const { t } = useTranslation("templatePage")
+  const [templateState, templateSend] = useMachine(templateMachine, {
+    context: {
+      templateName,
+      organizationId,
+    },
+  })
+  const { template, activeTemplateVersion, templateResources, templateDAUs } = templateState.context
+  const xServices = useContext(XServiceContext)
+  const permissions = useSelector(xServices.authXService, selectPermissions)
+  const isLoading =
+    !template || !activeTemplateVersion || !templateResources || !permissions || !templateDAUs
+
+  if (isLoading) {
+    return <Loader />
+  }
+
+  if (templateState.matches("deleted")) {
+    return <Navigate to="/templates" />
+  }
+
+  const hasIcon = template.icon && template.icon !== ""
+
+  const createWorkspaceButton = (className?: string) => (
+    <Link underline="none" component={RouterLink} to={`/templates/${template.name}/workspace`}>
+      <Button className={className ?? ""} startIcon={<AddCircleOutline />}>
+        {Language.createButton}
+      </Button>
+    </Link>
+  )
+
+  const handleDeleteTemplate = () => {
+    templateSend("DELETE")
+  }
+
+  return (
+    <>
+      <Margins>
+        <PageHeader
+          actions={
+            <>
+              <Link
+                underline="none"
+                component={RouterLink}
+                to={`/templates/${template.name}/settings`}
+              >
+                <Button variant="outlined" startIcon={<SettingsOutlined />}>
+                  {Language.settingsButton}
+                </Button>
+              </Link>
+
+              {permissions.deleteTemplates ? (
+                <DropdownButton
+                  primaryAction={createWorkspaceButton(styles.actionButton)}
+                  secondaryActions={[
+                    {
+                      action: "delete",
+                      button: <DeleteButton handleAction={handleDeleteTemplate} />,
+                    },
+                  ]}
+                  canCancel={false}
+                />
+              ) : (
+                createWorkspaceButton()
+              )}
+            </>
+          }
+        >
+          <Stack direction="row" spacing={3} className={styles.pageTitle}>
+            <div>
+              {hasIcon ? (
+                <div className={styles.iconWrapper}>
+                  <img src={template.icon} alt="" />
+                </div>
+              ) : (
+                <Avatar className={styles.avatar}>{firstLetter(template.name)}</Avatar>
+              )}
+            </div>
+            <div>
+              <PageHeaderTitle>{template.name}</PageHeaderTitle>
+              <PageHeaderSubtitle condensed>
+                {template.description === "" ? Language.noDescription : template.description}
+              </PageHeaderSubtitle>
+            </div>
+          </Stack>
+        </PageHeader>
+      </Margins>
+
+      <div className={styles.tabs}>
+        <Margins>
+          <Stack direction="row" spacing={0.25}>
+            <NavLink
+              end
+              to={`/templates/${template.name}`}
+              className={({ isActive }) =>
+                combineClasses([styles.tabItem, isActive ? styles.tabItemActive : undefined])
+              }
+            >
+              Summary
+            </NavLink>
+            <NavLink
+              to={`/templates/${template.name}/collaborators`}
+              className={({ isActive }) =>
+                combineClasses([styles.tabItem, isActive ? styles.tabItemActive : undefined])
+              }
+            >
+              Collaborators
+            </NavLink>
+          </Stack>
+        </Margins>
+      </div>
+
+      <Margins>
+        <Outlet context={{ templateContext: templateState.context, permissions }} />
+      </Margins>
+
+      <DeleteDialog
+        isOpen={templateState.matches("confirmingDelete")}
+        confirmLoading={templateState.matches("deleting")}
+        title={t("deleteDialog.title")}
+        description={t("deleteDialog.description")}
+        onConfirm={() => {
+          templateSend("CONFIRM_DELETE")
+        }}
+        onCancel={() => {
+          templateSend("CANCEL_DELETE")
+        }}
+      />
+    </>
+  )
+}
+
+export const useStyles = makeStyles((theme) => {
+  return {
+    actionButton: {
+      border: "none",
+      borderRadius: `${theme.shape.borderRadius}px 0px 0px ${theme.shape.borderRadius}px`,
+    },
+    pageTitle: {
+      alignItems: "center",
+    },
+    avatar: {
+      width: theme.spacing(6),
+      height: theme.spacing(6),
+      fontSize: theme.spacing(3),
+    },
+    iconWrapper: {
+      width: theme.spacing(6),
+      height: theme.spacing(6),
+      "& img": {
+        width: "100%",
+      },
+    },
+
+    tabs: {
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      marginBottom: theme.spacing(5),
+    },
+
+    tabItem: {
+      textDecoration: "none",
+      color: theme.palette.text.secondary,
+      fontSize: 14,
+      display: "block",
+      padding: theme.spacing(0, 2, 2),
+
+      "&:hover": {
+        color: theme.palette.text.primary,
+      },
+    },
+
+    tabItemActive: {
+      color: theme.palette.text.primary,
+      position: "relative",
+
+      "&:before": {
+        content: `""`,
+        left: 0,
+        bottom: 0,
+        height: 2,
+        width: "100%",
+        background: theme.palette.secondary.dark,
+        position: "absolute",
+      },
+    },
+  }
+})
diff --git a/site/src/hooks/useMe.ts b/site/src/hooks/useMe.ts
@@ -0,0 +1,16 @@
+import { useSelector } from "@xstate/react"
+import { User } from "api/typesGenerated"
+import { useContext } from "react"
+import { selectUser } from "xServices/auth/authSelectors"
+import { XServiceContext } from "xServices/StateContext"
+
+export const useMe = (): User => {
+  const xServices = useContext(XServiceContext)
+  const me = useSelector(xServices.authXService, selectUser)
+
+  if (!me) {
+    throw new Error("User not found.")
+  }
+
+  return me
+}
diff --git a/site/src/pages/TemplatePage/TemplateCollaboratorsPage/TemplateCollaboratorsPage.tsx b/site/src/pages/TemplatePage/TemplateCollaboratorsPage/TemplateCollaboratorsPage.tsx
@@ -0,0 +1,57 @@
+import { useMachine } from "@xstate/react"
+import { useMe } from "hooks/useMe"
+import { FC } from "react"
+import { Helmet } from "react-helmet-async"
+import { useOutletContext } from "react-router-dom"
+import { pageTitle } from "util/page"
+import { Permissions } from "xServices/auth/authXService"
+import { templateUsersMachine } from "xServices/template/templateUsersXService"
+import { TemplateContext } from "xServices/template/templateXService"
+import { TemplateCollaboratorsPageView } from "./TemplateCollaboratorsPageView"
+
+export const TemplateCollaboratorsPage: FC<React.PropsWithChildren<unknown>> = () => {
+  const { templateContext, permissions } = useOutletContext<{
+    templateContext: TemplateContext
+    permissions: Permissions
+  }>()
+  const { template, deleteTemplateError } = templateContext
+
+  if (!template) {
+    throw new Error(
+      "This page should not be displayed until template, activeTemplateVersion or templateResources being loaded.",
+    )
+  }
+
+  const [state, send] = useMachine(templateUsersMachine, { context: { templateId: template.id } })
+  const { templateUsers, userToBeUpdated } = state.context
+  const me = useMe()
+  const userTemplateRole = template.user_roles[me.id]
+  const canUpdatesUsers =
+    permissions.deleteTemplates || userTemplateRole === "admin" || template.created_by_id === me.id
+
+  return (
+    <>
+      <Helmet>
+        <title>{pageTitle(`${template.name} · Collaborators`)}</title>
+      </Helmet>
+      <TemplateCollaboratorsPageView
+        canUpdateUsers={canUpdatesUsers}
+        templateUsers={templateUsers}
+        deleteTemplateError={deleteTemplateError}
+        onAddUser={(user, role, reset) => {
+          send("ADD_USER", { user, role, onDone: reset })
+        }}
+        isAddingUser={state.matches("addingUser")}
+        onUpdateUser={(user, role) => {
+          send("UPDATE_USER_ROLE", { user, role })
+        }}
+        updatingUser={userToBeUpdated}
+        onRemoveUser={(user) => {
+          send("REMOVE_USER", { user })
+        }}
+      />
+    </>
+  )
+}
+
+export default TemplateCollaboratorsPage