feat(ui): Add user requests page (#936)

* feat(ui): add user requests page

* fix: return error if user attempts to fetch another user's requests without adequate perms

* fix(ui): make user name on request page link back to user profile

* feat(ui): link user request count to their filtered request list view

* fix(frontend): only display user requests on profiles if current user has adequate perms

* fix: use 'all' filter for user-filtered request list

* fix(frontend): pass userId to router.push()

* fix: do not pass userId in query for non-user-filtered requests page

* fix(frontend): also allow REQUEST_VIEW perm through route guard

* fix(frontend): only link request count to user request list if current user has required perms

src/components/UserList/index.tsx

@@ -101,7 +101,7 @@ const UserList: React.FC = () => {
   });
   const [showBulkEditModal, setShowBulkEditModal] = useState(false);
   const [selectedUsers, setSelectedUsers] = useState<number[]>([]);
-  const { user: currentUser } = useUser();
+  const { user: currentUser, hasPermission: currentHasPermission } = useUser();
 
   useEffect(() => {
     const filterString = window.localStorage.getItem('ul-filter-settings');
@@ -538,7 +538,7 @@ const UserList: React.FC = () => {
                   </Link>
                   <div className="ml-4">
                     <Link href={`/users/${user.id}`}>
-                      <a className="text-sm font-medium leading-5">
+                      <a className="text-sm font-medium leading-5 transition duration-300 hover:underline">
                         {user.displayName}
                       </a>
                     </Link>
@@ -549,7 +549,19 @@ const UserList: React.FC = () => {
                 </div>
               </Table.TD>
               <Table.TD>
-                <div className="text-sm leading-5">{user.requestCount}</div>
+                {user.id === currentUser?.id ||
+                currentHasPermission(
+                  [Permission.MANAGE_REQUESTS, Permission.REQUEST_VIEW],
+                  { type: 'or' }
+                ) ? (
+                  <Link href={`/users/${user.id}/requests`}>
+                    <a className="text-sm leading-5 transition duration-300 hover:underline">
+                      {user.requestCount}
+                    </a>
+                  </Link>
+                ) : (
+                  user.requestCount
+                )}
               </Table.TD>
               <Table.TD>
                 {user.userType === UserType.PLEX ? (