feat: enforce user roles

enforces user admin role requirement for
- creating / deleting / setting role for organization users
- creating / deleting / setting role for project users
- updating project name
- deleting project

hides action elements based on role for
- admin console
- team settings if team is only visible through project membership
- add project tile if not team admin
- project name text editor if not team / project admin
- add redirect from team page if settings only visible through project
  membership
- add redirect from admin console if not org admin

role enforcement is handled on the api side through a custom GraphQL
directive `hasRole`. on the client side, role information is fetched in
the TopNavbar's `me` query and stored in the `UserContext`.

there is a custom hook, `useCurrentUser`, that provides a user object
with two functions, `isVisibile` & `isAdmin` which is used to check
roles in order to render/hide relevant UI elements.

frontend/src/Admin/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import Admin from 'shared/components/Admin';
 import Select from 'shared/components/Select';
 import GlobalTopNavbar from 'App/TopNavbar';
@@ -16,6 +16,8 @@ import { useForm, Controller } from 'react-hook-form';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import produce from 'immer';
 import updateApolloCache from 'shared/utils/cache';
+import UserContext, { useCurrentUser } from 'App/context';
+import { Redirect } from 'react-router';
 
 const DeleteUserWrapper = styled.div`
   display: flex;
@@ -170,6 +172,7 @@ const AdminRoute = () => {
   }, []);
   const { loading, data } = useUsersQuery();
   const { showPopup, hidePopup } = usePopup();
+  const { user } = useCurrentUser();
   const [deleteUser] = useDeleteUserAccountMutation({
     update: (client, response) => {
       updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
@@ -201,13 +204,17 @@ const AdminRoute = () => {
   if (loading) {
     return <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />;
   }
-  if (data) {
+  if (data && user) {
+    if (user.roles.org != 'admin') {
+      return <Redirect to="/" />;
+    }
     return (
       <>
         <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />
         <Admin
           initialTab={0}
           users={data.users}
+          canInviteUser={user.roles.org == 'admin'}
           onInviteUser={() => {}}
           onUpdateUserPassword={(user, password) => {
             console.log(user);