feat: user profile/settings pages (#958)

src/components/UserList/BulkEditModal.tsx

@@ -5,7 +5,6 @@ import { User, useUser } from '../../hooks/useUser';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import axios from 'axios';
 import { useToasts } from 'react-toast-notifications';
-import { messages as userEditMessages } from '../UserEdit';
 
 interface BulkEditProps {
   selectedUserIds: number[];
@@ -17,6 +16,11 @@ interface BulkEditProps {
 
 const messages = defineMessages({
   userssaved: 'Users saved',
+  save: 'Save Changes',
+  saving: 'Saving…',
+  userfail: 'Something went wrong while saving the user.',
+  permissions: 'Permissions',
+  edituser: 'Edit User',
 });
 
 const BulkEditModal: React.FC<BulkEditProps> = ({
@@ -53,7 +57,7 @@ const BulkEditModal: React.FC<BulkEditProps> = ({
         autoDismiss: true,
       });
     } catch (e) {
-      addToast(intl.formatMessage(userEditMessages.userfail), {
+      addToast(intl.formatMessage(messages.userfail), {
         appearance: 'error',
         autoDismiss: true,
       });
@@ -81,12 +85,12 @@ const BulkEditModal: React.FC<BulkEditProps> = ({
 
   return (
     <Modal
-      title={intl.formatMessage(userEditMessages.edituser)}
+      title={intl.formatMessage(messages.edituser)}
       onOk={() => {
         updateUsers();
       }}
       okDisabled={isSaving}
-      okText={intl.formatMessage(userEditMessages.save)}
+      okText={intl.formatMessage(messages.save)}
       onCancel={onCancel}
     >
       <div className="mt-6 mb-6">
@@ -94,7 +98,7 @@ const BulkEditModal: React.FC<BulkEditProps> = ({
           <div className="form-row">
             <div>
               <div id="group-label" className="group-label">
-                <FormattedMessage {...userEditMessages.permissions} />
+                <FormattedMessage {...messages.permissions} />
               </div>
             </div>
             <div className="form-input">

src/components/UserList/index.tsx

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 import useSWR from 'swr';
 import LoadingSpinner from '../Common/LoadingSpinner';
-import type { User } from '../../../server/entity/User';
 import Badge from '../Common/Badge';
 import { FormattedDate, defineMessages, useIntl } from 'react-intl';
 import Button from '../Common/Button';
 import { hasPermission } from '../../../server/lib/permissions';
-import { Permission, UserType, useUser } from '../../hooks/useUser';
+import { Permission, User, UserType, useUser } from '../../hooks/useUser';
 import { useRouter } from 'next/router';
 import Header from '../Common/Header';
 import Table from '../Common/Table';
@@ -21,6 +20,7 @@ import AddUserIcon from '../../assets/useradd.svg';
 import Alert from '../Common/Alert';
 import BulkEditModal from './BulkEditModal';
 import PageTitle from '../Common/PageTitle';
+import Link from 'next/link';
 
 const messages = defineMessages({
   users: 'Users',
@@ -485,17 +485,21 @@ const UserList: React.FC = () => {
               </Table.TD>
               <Table.TD>
                 <div className="flex items-center">
-                  <div className="flex-shrink-0 w-10 h-10">
-                    <img
-                      className="w-10 h-10 rounded-full"
-                      src={user.avatar}
-                      alt=""
-                    />
-                  </div>
+                  <Link href={`/users/${user.id}`}>
+                    <a className="flex-shrink-0 w-10 h-10">
+                      <img
+                        className="w-10 h-10 rounded-full"
+                        src={user.avatar}
+                        alt=""
+                      />
+                    </a>
+                  </Link>
                   <div className="ml-4">
-                    <div className="text-sm font-medium leading-5">
-                      {user.displayName}
-                    </div>
+                    <Link href={`/users/${user.id}`}>
+                      <a className="text-sm font-medium leading-5">
+                        {user.displayName}
+                      </a>
+                    </Link>
                     <div className="text-sm leading-5 text-gray-300">
                       {user.email}
                     </div>
@@ -533,8 +537,8 @@ const UserList: React.FC = () => {
                   className="mr-2"
                   onClick={() =>
                     router.push(
-                      '/users/[userId]/edit',
-                      `/users/${user.id}/edit`
+                      '/users/[userId]/settings',
+                      `/users/${user.id}/settings`
                     )
                   }
                 >