raise a FE prop field up the stack

Emyrk · Emyrk · commit bac7743acb28 · 2023-07-20T12:06:36.000-04:00
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
@@ -36,6 +36,7 @@ export interface UsersTableProps {
   ) => void
   isNonInitialPage: boolean
   actorID: string
+  oidcRoleSyncEnabled: boolean
 }
 
 export const UsersTable: FC<React.PropsWithChildren<UsersTableProps>> = ({
@@ -54,6 +55,7 @@ export const UsersTable: FC<React.PropsWithChildren<UsersTableProps>> = ({
   isLoading,
   isNonInitialPage,
   actorID,
+  oidcRoleSyncEnabled,
 }) => {
   return (
     <TableContainer>
@@ -91,6 +93,7 @@ export const UsersTable: FC<React.PropsWithChildren<UsersTableProps>> = ({
             onUpdateUserRoles={onUpdateUserRoles}
             isNonInitialPage={isNonInitialPage}
             actorID={actorID}
+            oidcRoleSyncEnabled={oidcRoleSyncEnabled}
           />
         </TableBody>
       </Table>
diff --git a/site/src/components/UsersTable/UsersTableBody.tsx b/site/src/components/UsersTable/UsersTableBody.tsx
@@ -16,9 +16,6 @@ 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"
@@ -51,6 +48,10 @@ interface UsersTableBodyProps {
   ) => void
   isNonInitialPage: boolean
   actorID: string
+  // oidcRoleSyncEnabled should be set to false if unknown.
+  // This is used to determine if the oidc roles are synced from the oidc idp and
+  // editing via the UI should be disabled.
+  oidcRoleSyncEnabled: boolean
 }
 
 export const UsersTableBody: FC<
@@ -71,22 +72,11 @@ export const UsersTableBody: FC<
   isLoading,
   isNonInitialPage,
   actorID,
+  oidcRoleSyncEnabled,
 }) => {
   const styles = useStyles()
   const { t } = useTranslation("usersPage")
 
-  const permissions = usePermissions()
-  const canViewDeployment = Boolean(permissions.viewDeploymentValues)
-  // Ideally this only runs if 'canViewDeployment' is true.
-  // TODO: Prevent api call if the user does not have the perms.
-  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)}>
@@ -143,7 +133,7 @@ export const UsersTableBody: FC<
                           selectedRoles={userRoles}
                           isLoading={Boolean(isUpdatingUserRoles)}
                           userLoginType={user.login_type}
-                          oidcRoleSync={oidcRoleSync}
+                          oidcRoleSync={oidcRoleSyncEnabled}
                           onChange={(roles) => {
                             // Remove the fallback role because it is only for the UI
                             const rolesWithoutFallback = roles.filter(
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -20,6 +20,7 @@ import { UsersPageView } from "./UsersPageView"
 import { useStatusFilterMenu } from "./UsersFilter"
 import { useFilter } from "components/Filter/filter"
 import { useDashboard } from "components/Dashboard/DashboardProvider"
+import { deploymentConfigMachine } from "xServices/deploymentConfig/deploymentConfigMachine"
 
 export const Language = {
   suspendDialogTitle: "Suspend user",
@@ -61,14 +62,24 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
     count,
   } = usersState.context
 
-  const { updateUsers: canEditUsers } = usePermissions()
+  const { updateUsers: canEditUsers, viewDeploymentValues } = usePermissions()
   const [rolesState] = useMachine(siteRolesMachine, {
     context: {
       hasPermission: canEditUsers,
     },
   })
   const { roles } = rolesState.context
 
+  // Ideally this only runs if 'canViewDeployment' is true.
+  // TODO: Prevent api call if the user does not have the perms.
+  const [state] = useMachine(deploymentConfigMachine)
+  const { deploymentValues } = state.context
+  // Indicates if oidc roles are synced from the oidc idp.
+  // Assign 'false' if unknown.
+  const oidcRoleSyncEnabled =
+    viewDeploymentValues &&
+    deploymentValues?.config.oidc?.user_role_field !== ""
+
   // Is loading if
   // - users are loading or
   // - the user can edit the users but the roles are loading
@@ -102,6 +113,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
         <title>{pageTitle("Users")}</title>
       </Helmet>
       <UsersPageView
+        oidcRoleSyncEnabled={oidcRoleSyncEnabled}
         roles={roles}
         users={users}
         count={count}
diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -16,6 +16,7 @@ export interface UsersPageViewProps {
   roles?: TypesGen.AssignableRoles[]
   isUpdatingUserRoles?: boolean
   canEditUsers?: boolean
+  oidcRoleSyncEnabled?: boolean
   canViewActivity?: boolean
   isLoading?: boolean
   onSuspendUser: (user: TypesGen.User) => void
@@ -47,6 +48,7 @@ export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
   onUpdateUserRoles,
   isUpdatingUserRoles,
   canEditUsers,
+  oidcRoleSyncEnabled,
   canViewActivity,
   isLoading,
   filterProps,
@@ -77,6 +79,7 @@ export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
         onUpdateUserRoles={onUpdateUserRoles}
         isUpdatingUserRoles={isUpdatingUserRoles}
         canEditUsers={canEditUsers}
+        oidcRoleSyncEnabled={oidcRoleSyncEnabled}
         canViewActivity={canViewActivity}
         isLoading={isLoading}
         isNonInitialPage={isNonInitialPage}
