Update navbar to be displayed only if the user has permissions for it

coder · BrunoQuaresma · May 13, 2022 · May 12, 2022 · May 12, 2022 · May 12, 2022
commit d0ff321e07a7aaebdb07220b9ddd1c3d543d9e87
diff --git a/site/src/components/Navbar/Navbar.tsx b/site/src/components/Navbar/Navbar.tsx
@@ -1,13 +1,18 @@
-import { useActor } from "@xstate/react"
+import { useActor, useSelector } from "@xstate/react"
 import React, { useContext } from "react"
+import { selectPermissions } from "../../xServices/auth/authSelectors"
 import { XServiceContext } from "../../xServices/StateContext"
 import { NavbarView } from "../NavbarView/NavbarView"
 
 export const Navbar: React.FC = () => {
   const xServices = useContext(XServiceContext)
   const [authState, authSend] = useActor(xServices.authXService)
   const { me } = authState.context
+  const permissions = useSelector(xServices.authXService, selectPermissions)
+  // When we have more options in the admin dropdown we may want to check this
+  // for more permissions
+  const displayAdminDropdown = !!permissions?.readAllUsers
   const onSignOut = () => authSend("SIGN_OUT")
 
-  return <NavbarView user={me} onSignOut={onSignOut} />
+  return <NavbarView user={me} onSignOut={onSignOut} displayAdminDropdown={displayAdminDropdown} />
 }
diff --git a/site/src/components/NavbarView/NavbarView.stories.tsx b/site/src/components/NavbarView/NavbarView.stories.tsx
@@ -14,15 +14,33 @@ const Template: Story<NavbarViewProps> = (args: NavbarViewProps) => <NavbarView
 
 export const ForAdmin = Template.bind({})
 ForAdmin.args = {
-  user: { id: "1", username: "Administrator", email: "admin@coder.com", created_at: "dawn" },
+  user: {
+    id: "1",
+    username: "Administrator",
+    email: "admin@coder.com",
+    created_at: "dawn",
+    status: "active",
+    organization_ids: [],
+    roles: [],
+  },
+  displayAdminDropdown: true,
   onSignOut: () => {
     return Promise.resolve()
   },
 }
 
 export const ForMember = Template.bind({})
 ForMember.args = {
-  user: { id: "1", username: "CathyCoder", email: "cathy@coder.com", created_at: "dawn" },
+  user: {
+    id: "1",
+    username: "CathyCoder",
+    email: "cathy@coder.com",
+    created_at: "dawn",
+    status: "active",
+    organization_ids: [],
+    roles: [],
+  },
+  displayAdminDropdown: false,
   onSignOut: () => {
     return Promise.resolve()
   },

diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx
@@ -12,9 +12,10 @@ import { UserDropdown } from "../UserDropdown/UsersDropdown"
 export interface NavbarViewProps {
   user?: TypesGen.User
   onSignOut: () => void
+  displayAdminDropdown: boolean
 }
 
-export const NavbarView: React.FC<NavbarViewProps> = ({ user, onSignOut }) => {
+export const NavbarView: React.FC<NavbarViewProps> = ({ user, onSignOut, displayAdminDropdown }) => {
   const styles = useStyles()
   return (
     <nav className={styles.root}>
@@ -31,7 +32,7 @@ export const NavbarView: React.FC<NavbarViewProps> = ({ user, onSignOut }) => {
         </ListItem>
       </List>
       <div className={styles.fullWidth} />
-      {user && user.email === "admin@coder.com" && <AdminDropdown />}
+      {displayAdminDropdown && <AdminDropdown />}
       <div className={styles.fixed}>{user && <UserDropdown user={user} onSignOut={onSignOut} />}</div>
     </nav>
   )

diff --git a/site/src/xServices/auth/authSelectors.ts b/site/src/xServices/auth/authSelectors.ts
@@ -1,6 +1,12 @@
 import { State } from "xstate"
 import { AuthContext, AuthEvent } from "./authXService"
 
-export const selectOrgId = (state: State<AuthContext, AuthEvent>): string | undefined => {
+type AuthState = State<AuthContext, AuthEvent>
+
+export const selectOrgId = (state: AuthState): string | undefined => {
   return state.context.me?.organization_ids[0]
 }
+
+export const selectPermissions = (state: AuthState): AuthContext["permissions"] => {
+  return state.context.permissions
+}
diff --git a/site/src/xServices/auth/authXService.ts b/site/src/xServices/auth/authXService.ts
@@ -7,14 +7,16 @@ export const Language = {
   successProfileUpdate: "Updated preferences.",
 }
 
-const permissionsToCheck: Record<string, TypesGen.UserPermissionCheck> = {
+const permissionsToCheck = {
   readAllUsers: {
     object: {
       resource_type: "user",
     },
     action: "read",
   },
-}
+} as const
+
+type Permissions = Record<keyof typeof permissionsToCheck, boolean>
 
 export interface AuthContext {
   getUserError?: Error | unknown
@@ -23,7 +25,7 @@ export interface AuthContext {
   updateProfileError?: Error | unknown
   me?: TypesGen.User
   methods?: TypesGen.AuthMethods
-  permissions?: TypesGen.UserPermissionCheckResponse
+  permissions?: Permissions
   checkPermissionsError?: Error | unknown
 }
 
@@ -286,7 +288,9 @@ export const authMachine =
           updateProfileError: (_) => undefined,
         }),
         assignPermissions: assign({
-          permissions: (_, event) => event.data,
+          // Setting event.data as Permissions to be more stricted. So we know
+          // what permissions we asked for.
+          permissions: (_, event) => event.data as Permissions,
         }),
         assignGetPermissionsError: assign({
           checkPermissionsError: (_, event) => event.data,