Adjust users page to not allow editing roles when they cannot

Emyrk · Emyrk · commit a7614e34ee23 · 2023-07-19T16:09:41.000-04:00
diff --git a/coderd/database/db2sdk/db2sdk.go b/coderd/database/db2sdk/db2sdk.go
@@ -115,6 +115,7 @@ func User(user database.User, organizationIDs []uuid.UUID) codersdk.User {
 		OrganizationIDs: organizationIDs,
 		Roles:           make([]codersdk.Role, 0, len(user.RBACRoles)),
 		AvatarURL:       user.AvatarURL.String,
+		LoginType:       codersdk.LoginType(user.LoginType),
 	}
 
 	for _, roleName := range user.RBACRoles {
diff --git a/site/src/components/EditRolesButton/EditRolesButton.stories.tsx b/site/src/components/EditRolesButton/EditRolesButton.stories.tsx
@@ -34,6 +34,8 @@ Loading.args = {
   isLoading: true,
   roles: MockSiteRoles,
   selectedRoles: [MockUserAdminRole, MockOwnerRole],
+  userLoginType: "password",
+  oidcRoleSync: false,
 }
 Loading.parameters = {
   chromatic: { delay: 300 },
diff --git a/site/src/components/EditRolesButton/EditRolesButton.tsx b/site/src/components/EditRolesButton/EditRolesButton.tsx
@@ -8,6 +8,12 @@ import { Stack } from "components/Stack/Stack"
 import Checkbox from "@mui/material/Checkbox"
 import UserIcon from "@mui/icons-material/PersonOutline"
 import { Role } from "api/typesGenerated"
+import {
+  HelpTooltip,
+  HelpTooltipText,
+  HelpTooltipTitle,
+} from "components/Tooltips/HelpTooltip"
+import { Maybe } from "components/Conditionals/Maybe"
 
 const Option: React.FC<{
   value: string
@@ -46,6 +52,8 @@ export interface EditRolesButtonProps {
   selectedRoles: Role[]
   onChange: (roles: Role["name"][]) => void
   defaultIsOpen?: boolean
+  oidcRoleSync: boolean
+  userLoginType: string
 }
 
 export const EditRolesButton: FC<EditRolesButtonProps> = ({
@@ -54,6 +62,8 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
   onChange,
   isLoading,
   defaultIsOpen = false,
+  userLoginType,
+  oidcRoleSync,
 }) => {
   const styles = useStyles()
   const { t } = useTranslation("usersPage")
@@ -71,17 +81,30 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
     onChange([...selectedRoleNames, roleName])
   }
 
+  const canSetRoles =
+    userLoginType !== "oidc" || (userLoginType === "oidc" && !oidcRoleSync)
+
   return (
     <>
-      <IconButton
-        ref={anchorRef}
-        size="small"
-        className={styles.editButton}
-        title={t("editUserRolesTooltip") || ""}
-        onClick={() => setIsOpen(true)}
-      >
-        <EditSquare />
-      </IconButton>
+      <Maybe condition={canSetRoles}>
+        <IconButton
+          ref={anchorRef}
+          size="small"
+          className={styles.editButton}
+          title={t("editUserRolesTooltip") || ""}
+          onClick={() => setIsOpen(true)}
+        >
+          <EditSquare />
+        </IconButton>
+      </Maybe>
+      <Maybe condition={!canSetRoles}>
+        <HelpTooltip size="small">
+          <HelpTooltipTitle>Externally controlled</HelpTooltipTitle>
+          <HelpTooltipText>
+            Roles for this user are controlled by the OIDC identity provider.
+          </HelpTooltipText>
+        </HelpTooltip>
+      </Maybe>
 
       <Popover
         id={id}
diff --git a/site/src/components/UsersTable/UsersTableBody.tsx b/site/src/components/UsersTable/UsersTableBody.tsx
@@ -16,6 +16,9 @@ import { TableRowMenu } from "../TableRowMenu/TableRowMenu"
 import { EditRolesButton } from "components/EditRolesButton/EditRolesButton"
 import { Stack } from "components/Stack/Stack"
 import { EnterpriseBadge } from "components/DeploySettingsLayout/Badges"
+import { usePermissions } from "hooks"
+import { deploymentConfigMachine } from "xServices/deploymentConfig/deploymentConfigMachine"
+import { useMachine } from "@xstate/react"
 
 const isOwnerRole = (role: TypesGen.Role): boolean => {
   return role.name === "owner"
@@ -72,6 +75,16 @@ export const UsersTableBody: FC<
   const styles = useStyles()
   const { t } = useTranslation("usersPage")
 
+  const permissions = usePermissions()
+  const canViewDeployment = Boolean(permissions.viewDeploymentValues)
+  const [state] = useMachine(deploymentConfigMachine)
+  const { deploymentValues } = state.context
+
+  // Indicates if oidc roles are synced from the oidc idp.
+  // Assign 'false' if unknown.
+  const oidcRoleSync =
+    canViewDeployment && deploymentValues?.config.oidc?.user_role_field !== ""
+
   return (
     <ChooseOne>
       <Cond condition={Boolean(isLoading)}>
@@ -127,6 +140,8 @@ export const UsersTableBody: FC<
                           roles={roles ? sortRoles(roles) : []}
                           selectedRoles={userRoles}
                           isLoading={Boolean(isUpdatingUserRoles)}
+                          userLoginType={user.login_type}
+                          oidcRoleSync={oidcRoleSync}
                           onChange={(roles) => {
                             // Remove the fallback role because it is only for the UI
                             const rolesWithoutFallback = roles.filter(
diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.test.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountPage.test.tsx
@@ -38,6 +38,7 @@ describe("AccountPage", () => {
           roles: [],
           avatar_url: "",
           last_seen_at: new Date().toString(),
+          login_type: "password",
           ...data,
         }),
       )

Original file line number	Diff line number	Diff line change
`@@ -115,6 +115,7 @@ func User(user database.User, organizationIDs []uuid.UUID) codersdk.User {`
`115`	`115`	`OrganizationIDs: organizationIDs,`
`116`	`116`	`Roles: make([]codersdk.Role, 0, len(user.RBACRoles)),`
`117`	`117`	`AvatarURL: user.AvatarURL.String,`
	`118`	`+ LoginType: codersdk.LoginType(user.LoginType),`
`118`	`119`	`}`
`119`	`120`
`120`	`121`	`for _, roleName := range user.RBACRoles {`
Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,8 @@ Loading.args = {`
`34`	`34`	`isLoading: true,`
`35`	`35`	`roles: MockSiteRoles,`
`36`	`36`	`selectedRoles: [MockUserAdminRole, MockOwnerRole],`
	`37`	`+ userLoginType: "password",`
	`38`	`+ oidcRoleSync: false,`
`37`	`39`	`}`
`38`	`40`	`Loading.parameters = {`
`39`	`41`	`chromatic: { delay: 300 },`
Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,7 @@ describe("AccountPage", () => {`
`38`	`38`	`roles: [],`
`39`	`39`	`avatar_url: "",`
`40`	`40`	`last_seen_at: new Date().toString(),`
	`41`	`+ login_type: "password",`
`41`	`42`	`...data,`
`42`	`43`	`}),`
`43`	`44`	`)`