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/Teams/index.tsx

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components/macro';
 import { MENU_TYPES } from 'shared/components/TopNavbar';
 import GlobalTopNavbar from 'App/TopNavbar';
 import updateApolloCache from 'shared/utils/cache';
-import { Route, Switch, useRouteMatch } from 'react-router';
+import { Route, Switch, useRouteMatch, Redirect } from 'react-router';
 import Members from './Members';
 import Projects from './Projects';
 
@@ -18,6 +18,7 @@ import { usePopup, Popup } from 'shared/components/PopupMenu';
 import { History } from 'history';
 import produce from 'immer';
 import { TeamSettings, DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
+import UserContext, { PermissionObjectType, PermissionLevel, useCurrentUser } from 'App/context';
 
 const OuterWrapper = styled.div`
   display: flex;
@@ -87,6 +88,7 @@ const Teams = () => {
   const { teamID } = useParams<TeamsRouteProps>();
   const history = useHistory();
   const { loading, data } = useGetTeamQuery({ variables: { teamID } });
+  const { user } = useCurrentUser();
   const [currentTab, setCurrentTab] = useState(0);
   const match = useRouteMatch();
   useEffect(() => {
@@ -99,7 +101,10 @@ const Teams = () => {
       </>
     );
   }
-  if (data) {
+  if (data && user) {
+    if (!user.isVisible(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID)) {
+      return <Redirect to="/" />;
+    }
     return (
       <>
         <GlobalTopNavbar