From e3a965bcc9d605e8d3695424f28eb4e5c6667f21 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Mon, 27 Mar 2023 08:32:20 -0300
Subject: [PATCH] fix(site): Add page header into permissions page (#6760)

---
 .../TemplateSettingsPage.tsx                  |   5 -
 .../TemplatePermissionsPageView.tsx           | 365 +++++++++---------
 2 files changed, 187 insertions(+), 183 deletions(-)

diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.tsx
index bc36a6df36..b2714d4a7a 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.tsx
@@ -1,7 +1,6 @@
 import { useMutation } from "@tanstack/react-query"
 import { updateTemplateMeta } from "api/api"
 import { UpdateTemplateMeta } from "api/typesGenerated"
-import { useDashboard } from "components/Dashboard/DashboardProvider"
 import { displaySuccess } from "components/GlobalSnackbar/utils"
 import { FC } from "react"
 import { Helmet } from "react-helmet-async"
@@ -16,9 +15,6 @@ export const TemplateSettingsPage: FC = () => {
   const { t } = useTranslation("templateSettingsPage")
   const navigate = useNavigate()
   const { template } = useTemplateSettingsContext()
-  const { entitlements } = useDashboard()
-  const canSetMaxTTL =
-    entitlements.features["advanced_template_scheduling"].enabled
   const {
     mutate: updateTemplate,
     isLoading: isSubmitting,
@@ -38,7 +34,6 @@ export const TemplateSettingsPage: FC = () => {
         <title>{pageTitle([template.name, t("title")])}</title>
       </Helmet>
       <TemplateSettingsPageView
-        canSetMaxTTL={canSetMaxTTL}
         isSubmitting={isSubmitting}
         template={template}
         submitError={submitError}
diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
index b61603f784..679a6542a8 100644
--- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
@@ -30,6 +30,7 @@ import { FC, useState } from "react"
 import { Maybe } from "components/Conditionals/Maybe"
 import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"
 import { getGroupSubtitle } from "util/groups"
+import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"
 
 type AddTemplateUserOrGroupProps = {
   organizationId: string
@@ -199,194 +200,202 @@ export const TemplatePermissionsPageView: FC<
   )
 
   return (
-    <Stack spacing={2.5}>
-      <Maybe condition={canUpdatePermissions}>
-        <AddTemplateUserOrGroup
-          templateACL={templateACL}
-          organizationId={organizationId}
-          isLoading={isAddingUser || isAddingGroup}
-          onSubmit={(value, role, resetAutocomplete) =>
-            "members" in value
-              ? onAddGroup(value, role, resetAutocomplete)
-              : onAddUser(value, role, resetAutocomplete)
-          }
-        />
-      </Maybe>
-      <TableContainer>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell width="60%">Member</TableCell>
-              <TableCell width="40%">Role</TableCell>
-              <TableCell width="1%" />
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            <ChooseOne>
-              <Cond condition={!templateACL}>
-                <TableLoader />
-              </Cond>
-              <Cond condition={isEmpty}>
-                <TableRow>
-                  <TableCell colSpan={999}>
-                    <EmptyState
-                      message="No members yet"
-                      description="Add a member using the controls above"
-                    />
-                  </TableCell>
-                </TableRow>
-              </Cond>
-              <Cond>
-                {templateACL?.group.map((group) => (
-                  <TableRow key={group.id}>
-                    <TableCell>
-                      <AvatarData
-                        avatar={
-                          <GroupAvatar
-                            name={group.name}
-                            avatarURL={group.avatar_url}
-                          />
-                        }
-                        title={group.name}
-                        subtitle={getGroupSubtitle(group)}
+    <>
+      <PageHeader className={styles.pageHeader}>
+        <PageHeaderTitle>Permissions</PageHeaderTitle>
+      </PageHeader>
+
+      <Stack spacing={2.5}>
+        <Maybe condition={canUpdatePermissions}>
+          <AddTemplateUserOrGroup
+            templateACL={templateACL}
+            organizationId={organizationId}
+            isLoading={isAddingUser || isAddingGroup}
+            onSubmit={(value, role, resetAutocomplete) =>
+              "members" in value
+                ? onAddGroup(value, role, resetAutocomplete)
+                : onAddUser(value, role, resetAutocomplete)
+            }
+          />
+        </Maybe>
+        <TableContainer>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell width="60%">Member</TableCell>
+                <TableCell width="40%">Role</TableCell>
+                <TableCell width="1%" />
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <ChooseOne>
+                <Cond condition={!templateACL}>
+                  <TableLoader />
+                </Cond>
+                <Cond condition={isEmpty}>
+                  <TableRow>
+                    <TableCell colSpan={999}>
+                      <EmptyState
+                        message="No members yet"
+                        description="Add a member using the controls above"
                       />
                     </TableCell>
-                    <TableCell>
-                      <ChooseOne>
-                        <Cond condition={canUpdatePermissions}>
-                          <RoleSelect
-                            value={group.role}
-                            disabled={
-                              updatingGroup && updatingGroup.id === group.id
-                            }
-                            onChange={(event) => {
-                              onUpdateGroup(
-                                group,
-                                event.target.value as TemplateRole,
-                              )
-                            }}
-                          />
-                        </Cond>
-                        <Cond>
-                          <div className={styles.role}>{group.role}</div>
-                        </Cond>
-                      </ChooseOne>
-                    </TableCell>
-
-                    <TableCell>
-                      <Maybe condition={canUpdatePermissions}>
-                        <TableRowMenu
-                          data={group}
-                          menuItems={[
-                            {
-                              label: "Remove",
-                              onClick: () => onRemoveGroup(group),
-                              disabled: false,
-                            },
-                          ]}
-                        />
-                      </Maybe>
-                    </TableCell>
                   </TableRow>
-                ))}
-
-                {templateACL?.users.map((user) => (
-                  <TableRow key={user.id}>
-                    <TableCell>
-                      <AvatarData
-                        title={user.username}
-                        subtitle={user.email}
-                        src={user.avatar_url}
-                      />
-                    </TableCell>
-                    <TableCell>
-                      <ChooseOne>
-                        <Cond condition={canUpdatePermissions}>
-                          <RoleSelect
-                            value={user.role}
-                            disabled={
-                              updatingUser && updatingUser.id === user.id
-                            }
-                            onChange={(event) => {
-                              onUpdateUser(
-                                user,
-                                event.target.value as TemplateRole,
-                              )
-                            }}
-                          />
-                        </Cond>
-                        <Cond>
-                          <div className={styles.role}>{user.role}</div>
-                        </Cond>
-                      </ChooseOne>
-                    </TableCell>
-
-                    <TableCell>
-                      <Maybe condition={canUpdatePermissions}>
-                        <TableRowMenu
-                          data={user}
-                          menuItems={[
-                            {
-                              label: "Remove",
-                              onClick: () => onRemoveUser(user),
-                              disabled: false,
-                            },
-                          ]}
+                </Cond>
+                <Cond>
+                  {templateACL?.group.map((group) => (
+                    <TableRow key={group.id}>
+                      <TableCell>
+                        <AvatarData
+                          avatar={
+                            <GroupAvatar
+                              name={group.name}
+                              avatarURL={group.avatar_url}
+                            />
+                          }
+                          title={group.name}
+                          subtitle={getGroupSubtitle(group)}
                         />
-                      </Maybe>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </Cond>
-            </ChooseOne>
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </Stack>
+                      </TableCell>
+                      <TableCell>
+                        <ChooseOne>
+                          <Cond condition={canUpdatePermissions}>
+                            <RoleSelect
+                              value={group.role}
+                              disabled={
+                                updatingGroup && updatingGroup.id === group.id
+                              }
+                              onChange={(event) => {
+                                onUpdateGroup(
+                                  group,
+                                  event.target.value as TemplateRole,
+                                )
+                              }}
+                            />
+                          </Cond>
+                          <Cond>
+                            <div className={styles.role}>{group.role}</div>
+                          </Cond>
+                        </ChooseOne>
+                      </TableCell>
+
+                      <TableCell>
+                        <Maybe condition={canUpdatePermissions}>
+                          <TableRowMenu
+                            data={group}
+                            menuItems={[
+                              {
+                                label: "Remove",
+                                onClick: () => onRemoveGroup(group),
+                                disabled: false,
+                              },
+                            ]}
+                          />
+                        </Maybe>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+
+                  {templateACL?.users.map((user) => (
+                    <TableRow key={user.id}>
+                      <TableCell>
+                        <AvatarData
+                          title={user.username}
+                          subtitle={user.email}
+                          src={user.avatar_url}
+                        />
+                      </TableCell>
+                      <TableCell>
+                        <ChooseOne>
+                          <Cond condition={canUpdatePermissions}>
+                            <RoleSelect
+                              value={user.role}
+                              disabled={
+                                updatingUser && updatingUser.id === user.id
+                              }
+                              onChange={(event) => {
+                                onUpdateUser(
+                                  user,
+                                  event.target.value as TemplateRole,
+                                )
+                              }}
+                            />
+                          </Cond>
+                          <Cond>
+                            <div className={styles.role}>{user.role}</div>
+                          </Cond>
+                        </ChooseOne>
+                      </TableCell>
+
+                      <TableCell>
+                        <Maybe condition={canUpdatePermissions}>
+                          <TableRowMenu
+                            data={user}
+                            menuItems={[
+                              {
+                                label: "Remove",
+                                onClick: () => onRemoveUser(user),
+                                disabled: false,
+                              },
+                            ]}
+                          />
+                        </Maybe>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </Cond>
+              </ChooseOne>
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Stack>
+    </>
   )
 }
 
-export const useStyles = makeStyles((theme) => {
-  return {
-    select: {
-      // Match button small height
-      height: 36,
-      fontSize: 14,
-      width: 100,
-    },
+export const useStyles = makeStyles((theme) => ({
+  select: {
+    // Match button small height
+    height: 36,
+    fontSize: 14,
+    width: 100,
+  },
 
-    updateSelect: {
-      margin: 0,
-      // Set a fixed width for the select. It avoids selects having different sizes
-      // depending on how many roles they have selected.
-      width: theme.spacing(25),
+  updateSelect: {
+    margin: 0,
+    // Set a fixed width for the select. It avoids selects having different sizes
+    // depending on how many roles they have selected.
+    width: theme.spacing(25),
 
-      "& .MuiSelect-root": {
-        // Adjusting padding because it does not have label
-        paddingTop: theme.spacing(1.5),
-        paddingBottom: theme.spacing(1.5),
-
-        ".secondary": {
-          display: "none",
-        },
-      },
-    },
-
-    role: {
-      textTransform: "capitalize",
-    },
-
-    menuItem: {
-      lineHeight: "140%",
+    "& .MuiSelect-root": {
+      // Adjusting padding because it does not have label
       paddingTop: theme.spacing(1.5),
       paddingBottom: theme.spacing(1.5),
-      whiteSpace: "normal",
-      inlineSize: "250px",
-    },
 
-    menuItemSecondary: {
-      fontSize: 14,
-      color: theme.palette.text.secondary,
+      ".secondary": {
+        display: "none",
+      },
     },
-  }
-})
+  },
+
+  role: {
+    textTransform: "capitalize",
+  },
+
+  menuItem: {
+    lineHeight: "140%",
+    paddingTop: theme.spacing(1.5),
+    paddingBottom: theme.spacing(1.5),
+    whiteSpace: "normal",
+    inlineSize: "250px",
+  },
+
+  menuItemSecondary: {
+    fontSize: 14,
+    color: theme.palette.text.secondary,
+  },
+
+  pageHeader: {
+    paddingTop: 0,
+  },
+}))