Predicatable sorting

coder · BrunoQuaresma · Jan 4, 2023 · Jan 4, 2023 · Jan 4, 2023 · Jan 4, 2023
commit f5b1b23f12cc01c37c073fc8d4f12bbd58290374
diff --git a/site/src/components/EditRolesButton/EditRolesButton.tsx b/site/src/components/EditRolesButton/EditRolesButton.tsx
@@ -7,7 +7,7 @@ import Popover from "@material-ui/core/Popover"
 import { Stack } from "components/Stack/Stack"
 import Checkbox from "@material-ui/core/Checkbox"
 import UserIcon from "@material-ui/icons/PersonOutline"
-import { AssignableRoles, Role } from "api/typesGenerated"
+import { Role } from "api/typesGenerated"
 
 const Option: React.FC<{
   value: string
@@ -43,7 +43,7 @@ const Option: React.FC<{
 
 export const EditRolesButton: FC<{
   isLoading: boolean
-  roles: AssignableRoles[]
+  roles: Role[]
   selectedRoles: Role[]
   onChange: (roles: Role["name"][]) => void
 }> = ({ roles, selectedRoles, onChange, isLoading }) => {
@@ -92,44 +92,25 @@ export const EditRolesButton: FC<{
       >
         <fieldset className={styles.fieldset} disabled={isLoading}>
           <Stack className={styles.options} spacing={3}>
-            <Option
-              onChange={handleChange}
-              isChecked={selectedRoleNames.includes("owner")}
-              value="owner"
-              name="Owner"
-              description="Admin can manage all the coder resources including users and their permissions"
-            />
-            <Option
-              onChange={handleChange}
-              isChecked={selectedRoleNames.includes("user-admin")}
-              value="user-admin"
-              name="User admin"
-              description="Admin can manage all the coder resources including users and their permissions"
-            />
-            <Option
-              onChange={handleChange}
-              isChecked={selectedRoleNames.includes("template-admin")}
-              value="template-admin"
-              name="Template admin"
-              description="Admin can manage all the coder resources including users and their permissions"
-            />
-            <Option
-              onChange={handleChange}
-              isChecked={selectedRoleNames.includes("auditor")}
-              value="auditor"
-              name="Auditor"
-              description="Admin can manage all the coder resources including users and their permissions"
-            />
+            {roles.map((role) => (
+              <Option
+                key={role.name}
+                onChange={handleChange}
+                isChecked={selectedRoleNames.includes(role.name)}
+                value={role.name}
+                name={role.display_name}
+                description={t(`roleDescription.${role.name}`)}
+              />
+            ))}
           </Stack>
         </fieldset>
         <div className={styles.footer}>
           <Stack direction="row" alignItems="flex-start">
             <UserIcon className={styles.userIcon} />
             <Stack spacing={0.5}>
-              <strong>Member</strong>
+              <strong>{t("member")}</strong>
               <span className={styles.optionDescription}>
-                Everybody is a member. This is a shared and default role for all
-                the users.
+                {t("roleDescription.member")}
               </span>
             </Stack>
           </Stack>

diff --git a/site/src/components/UsersTable/UsersTableBody.tsx b/site/src/components/UsersTable/UsersTableBody.tsx
@@ -19,6 +19,15 @@ import { Stack } from "components/Stack/Stack"
 const isAdminRole = (role: TypesGen.Role): boolean => {
   return role.name === "owner" || role.name.includes("admin")
 }
+
+const roleOrder = ["owner", "user-admin", "template-admin", "auditor"]
+
+const sortRoles = (roles: TypesGen.Role[]) => {
+  return roles.slice(0).sort((a, b) => {
+    return roleOrder.indexOf(a.name) - roleOrder.indexOf(b.name)
+  })
+}
+
 interface UsersTableBodyProps {
   users?: TypesGen.User[]
   roles?: TypesGen.AssignableRoles[]
@@ -93,7 +102,7 @@ export const UsersTableBody: FC<
                 display_name: "Member",
               }
               const userRoles =
-                user.roles.length === 0 ? [fallbackRole] : user.roles
+                user.roles.length === 0 ? [fallbackRole] : sortRoles(user.roles)
 
               return (
                 <TableRow key={user.id}>
@@ -117,7 +126,7 @@ export const UsersTableBody: FC<
                     <Stack direction="row" spacing={1}>
                       {canEditUsers && (
                         <EditRolesButton
-                          roles={roles ?? []}
+                          roles={roles ? sortRoles(roles) : []}
                           selectedRoles={userRoles}
                           isLoading={Boolean(isUpdatingUserRoles)}
                           onChange={(roles) => {

diff --git a/site/src/i18n/en/usersPage.json b/site/src/i18n/en/usersPage.json
@@ -6,5 +6,13 @@
   "listWorkspacesMenuItem": "View workspaces",
   "activateMenuItem": "Activate",
   "resetPasswordMenuItem": "Reset password",
-  "editUserRolesTooltip": "Edit user roles"
+  "editUserRolesTooltip": "Edit user roles",
+  "roleDescription": {
+    "owner": "Admin can manage all the coder resources including users and their permissions",
+    "user-admin": "Admin can manage all the coder resources including users and their permissions",
+    "template-admin": "Admin can manage all the coder resources including users and their permissions",
+    "auditor": "Admin can manage all the coder resources including users and their permissions",
+    "member": "Admin can manage all the coder resources including users and their permissions"
+  },
+  "member": "Member"
 }