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

@@ -12,9 +12,8 @@ import {
 
 import ProjectGridItem, { AddProjectItem } from 'shared/components/ProjectGridItem';
 import { Link } from 'react-router-dom';
-import Navbar from 'App/Navbar';
 import NewProject from 'shared/components/NewProject';
-import UserIDContext from 'App/context';
+import UserContext, { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
 import Button from 'shared/components/Button';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import { useForm } from 'react-hook-form';
@@ -227,7 +226,7 @@ const ProjectLink = styled(Link)``;
 
 const Projects = () => {
   const { showPopup, hidePopup } = usePopup();
-  const { loading, data } = useGetProjectsQuery();
+  const { loading, data } = useGetProjectsQuery({ fetchPolicy: 'network-only' });
   useEffect(() => {
     document.title = 'Taskcafé';
   }, []);
@@ -242,7 +241,7 @@ const Projects = () => {
   });
 
   const [showNewProject, setShowNewProject] = useState<ShowNewProject>({ open: false, initialTeamID: null });
-  const { userID, setUserID } = useContext(UserIDContext);
+  const { user, setUser } = useCurrentUser();
   const [createTeam] = useCreateTeamMutation({
     update: (client, createData) => {
       updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
@@ -261,47 +260,63 @@ const Projects = () => {
   }
 
   const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
-  if (data) {
+  if (data && user) {
+    console.log(user);
     const { projects, teams, organizations } = data;
     const organizationID = organizations[0].id ?? null;
-    const projectTeams = teams.map(team => {
-      return {
-        id: team.id,
-        name: team.name,
-        projects: projects.filter(project => project.team.id === team.id),
-      };
-    });
+    const projectTeams = teams
+      .sort((a, b) => {
+        const textA = a.name.toUpperCase();
+        const textB = b.name.toUpperCase();
+        return textA < textB ? -1 : textA > textB ? 1 : 0;
+      })
+      .map(team => {
+        return {
+          id: team.id,
+          name: team.name,
+          projects: projects
+            .filter(project => project.team.id === team.id)
+            .sort((a, b) => {
+              const textA = a.name.toUpperCase();
+              const textB = b.name.toUpperCase();
+              return textA < textB ? -1 : textA > textB ? 1 : 0;
+            }),
+        };
+      });
+    console.log(projectTeams);
     return (
       <>
         <GlobalTopNavbar onSaveProjectName={() => {}} projectID={null} name={null} />
         <Wrapper>
           <ProjectsContainer>
-            <AddTeamButton
-              variant="outline"
-              onClick={$target => {
-                showPopup(
-                  $target,
-                  <Popup
-                    title="Create team"
-                    tab={0}
-                    onClose={() => {
-                      hidePopup();
-                    }}
-                  >
-                    <CreateTeamForm
-                      onCreateTeam={teamName => {
-                        if (organizationID) {
-                          createTeam({ variables: { name: teamName, organizationID } });
-                          hidePopup();
-                        }
+            {user.roles.org === 'admin' && (
+              <AddTeamButton
+                variant="outline"
+                onClick={$target => {
+                  showPopup(
+                    $target,
+                    <Popup
+                      title="Create team"
+                      tab={0}
+                      onClose={() => {
+                        hidePopup();
                       }}
-                    />
-                  </Popup>,
-                );
-              }}
-            >
-              Add Team
-            </AddTeamButton>
+                    >
+                      <CreateTeamForm
+                        onCreateTeam={teamName => {
+                          if (organizationID) {
+                            createTeam({ variables: { name: teamName, organizationID } });
+                            hidePopup();
+                          }
+                        }}
+                      />
+                    </Popup>,
+                  );
+                }}
+              >
+                Add Team
+              </AddTeamButton>
+            )}
             {projectTeams.length === 0 && (
               <EmptyStateContent>
                 <EmptyState width={425} height={425} />
@@ -340,17 +355,19 @@ const Projects = () => {
                 <div key={team.id}>
                   <ProjectSectionTitleWrapper>
                     <ProjectSectionTitle>{team.name}</ProjectSectionTitle>
-                    <SectionActions>
-                      <SectionActionLink to={`/teams/${team.id}`}>
-                        <SectionAction variant="outline">Projects</SectionAction>
-                      </SectionActionLink>
-                      <SectionActionLink to={`/teams/${team.id}/members`}>
-                        <SectionAction variant="outline">Members</SectionAction>
-                      </SectionActionLink>
-                      <SectionActionLink to={`/teams/${team.id}/settings`}>
-                        <SectionAction variant="outline">Settings</SectionAction>
-                      </SectionActionLink>
-                    </SectionActions>
+                    {user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, team.id) && (
+                      <SectionActions>
+                        <SectionActionLink to={`/teams/${team.id}`}>
+                          <SectionAction variant="outline">Projects</SectionAction>
+                        </SectionActionLink>
+                        <SectionActionLink to={`/teams/${team.id}/members`}>
+                          <SectionAction variant="outline">Members</SectionAction>
+                        </SectionActionLink>
+                        <SectionActionLink to={`/teams/${team.id}/settings`}>
+                          <SectionAction variant="outline">Settings</SectionAction>
+                        </SectionActionLink>
+                      </SectionActions>
+                    )}
                   </ProjectSectionTitleWrapper>
                   <ProjectList>
                     {team.projects.map((project, idx) => (
@@ -363,18 +380,20 @@ const Projects = () => {
                         </ProjectTile>
                       </ProjectListItem>
                     ))}
-                    <ProjectListItem>
-                      <ProjectAddTile
-                        onClick={() => {
-                          setShowNewProject({ open: true, initialTeamID: team.id });
-                        }}
-                      >
-                        <ProjectTileFade />
-                        <ProjectAddTileDetails>
-                          <ProjectTileName centered>Create new project</ProjectTileName>
-                        </ProjectAddTileDetails>
-                      </ProjectAddTile>
-                    </ProjectListItem>
+                    {user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, team.id) && (
+                      <ProjectListItem>
+                        <ProjectAddTile
+                          onClick={() => {
+                            setShowNewProject({ open: true, initialTeamID: team.id });
+                          }}
+                        >
+                          <ProjectTileFade />
+                          <ProjectAddTileDetails>
+                            <ProjectTileName centered>Create new project</ProjectTileName>
+                          </ProjectAddTileDetails>
+                        </ProjectAddTile>
+                      </ProjectListItem>
+                    )}
                   </ProjectList>
                 </div>
               );
@@ -383,8 +402,8 @@ const Projects = () => {
               <NewProject
                 initialTeamID={showNewProject.initialTeamID}
                 onCreateProject={(name, teamID) => {
-                  if (userID) {
-                    createProject({ variables: { teamID, name, userID } });
+                  if (user) {
+                    createProject({ variables: { teamID, name, userID: user.id } });
                     setShowNewProject({ open: false, initialTeamID: null });
                   }
                 }}