Merge pull request #115 from mitaai/blms/ui-tweaks

#106 Unauthorized handling and style tweaks
mitaai · Dec 29, 2020 · 23cd83a · 23cd83a
2 parents fe8afe1 + 7dc4b97
commit 23cd83a
Show file tree

Hide file tree

Showing 17 changed files with 111 additions and 40 deletions.
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
@@ -8,7 +8,7 @@ import moment from 'moment';
 function Footer() {
   return (
     <footer className="footer mt-auto py-3">
-      <Container className="px-0">
+      <Container fluid className="px-5">
         <Row>
           <Col>
             <Image src="/logo_mit.png" alt="MIT logo" className="logo mr-3 mt-2" />

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -27,8 +27,8 @@ function Header({
   const router = useRouter();
   return (
     <header sticky="top">
-      <Navbar bg="dark" variant="dark">
-        <Container>
+      <Navbar bg="dark" variant="dark" className="px-0">
+        <Container fluid className="px-5">
           <Navbar.Brand href="/">Annotation Studio</Navbar.Brand>
           <Navbar.Toggle aria-controls="responsive-navbar-nav" />
           <Navbar.Collapse className="justify-content-end">

diff --git a/src/components/SecondNavbar/SecondNavbar.js b/src/components/SecondNavbar/SecondNavbar.js
@@ -39,10 +39,10 @@ const SecondNavbar = ({
   const [showMoreDocumentInfo, setShowMoreDocumentInfo] = useState();
   return (
     <>
-      <Navbar bg="light" variant="light" className="second-navbar" data-testid="second-navbar">
-        <Container>
+      <Navbar bg="light" variant="light" className="second-navbar px-0" data-testid="second-navbar">
+        <Container fluid className="px-5">
           <Row>
-            <Col sm={8}>
+            <Col>
               <Nav>
                 <Breadcrumb>
                   <Breadcrumb.Item active={type === 'dashboard'} href="/">Dashboard</Breadcrumb.Item>
@@ -91,7 +91,7 @@ const SecondNavbar = ({
         </Container>
         {type === 'document' && document && docView && (
         <>
-          <div style={{ position: 'absolute', right: '16px', top: '7px' }}>
+          <div style={{ position: 'absolute', right: '9px', top: '7px' }} className="pr-5">
             <FilterPopover session={session} />
           </div>
           <Modal
@@ -106,7 +106,7 @@ const SecondNavbar = ({
               </Modal.Title>
             </Modal.Header>
             <Modal.Body>
-              <Table bordered hover size="sm">
+              <Table bordered size="sm">
                 <tbody>
                   {Object.keys(metaData).map((key) => {
                     let str = '';
@@ -119,7 +119,7 @@ const SecondNavbar = ({
                     }
                     return (
                       <tr>
-                        <td className="table-meta-data-name">{metaData[key]}</td>
+                        <td className="table-meta-data-name"><strong>{metaData[key]}</strong></td>
                         <td>{str}</td>
                       </tr>
                     );

diff --git a/src/components/UnauthorizedCard/UnauthorizedCard.js b/src/components/UnauthorizedCard/UnauthorizedCard.js
@@ -0,0 +1,10 @@
+import { Card } from 'react-bootstrap';
+
+const UnauthorizedCard = () => (
+  <Card>
+    <Card.Header><Card.Title>Not authorized</Card.Title></Card.Header>
+    <Card.Body>You are not authorized to view this page.</Card.Body>
+  </Card>
+);
+
+export default UnauthorizedCard;
diff --git a/src/components/UnauthorizedCard/UnauthorizedCard.test.js b/src/components/UnauthorizedCard/UnauthorizedCard.test.js
@@ -0,0 +1,12 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import UnauthorizedCard from './UnauthorizedCard';
+
+test('renders card', () => {
+  const { getByText } = render(<UnauthorizedCard />);
+  const cardTitle = getByText('Not authorized');
+  expect(cardTitle).toBeInTheDocument();
+});
diff --git a/src/components/UnauthorizedCard/index.js b/src/components/UnauthorizedCard/index.js
@@ -0,0 +1,3 @@
+import UnauthorizedCard from './UnauthorizedCard';
+
+export default UnauthorizedCard;
diff --git a/src/pages/annotations/index.jsx b/src/pages/annotations/index.jsx
@@ -3,6 +3,7 @@ import { useSession } from 'next-auth/client';
 import { Card } from 'react-bootstrap';
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
+import UnauthorizedCard from '../../components/UnauthorizedCard';
 import DashboardAnnotationList from '../../components/Dashboard/DashboardAnnotationList';
 
 const AnnotationsListVIew = ({
@@ -22,10 +23,7 @@ const AnnotationsListVIew = ({
         </Card>
       )}
       {!session && !loading && (
-      <Card>
-        <Card.Header><Card.Title>Not authorized</Card.Title></Card.Header>
-        <Card.Body>Please log in to use the application.</Card.Body>
-      </Card>
+        <UnauthorizedCard />
       )}
       {session && !loading && (
         <DashboardAnnotationList

diff --git a/src/pages/documents/[slug]/edit.jsx b/src/pages/documents/[slug]/edit.jsx
@@ -5,6 +5,7 @@ import {
 } from 'react-bootstrap';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
+import UnauthorizedCard from '../../../components/UnauthorizedCard';
 import DocumentForm from '../../../components/DocumentForm';
 
 import { prefetchDocumentBySlug } from '../../../utils/docUtil';
@@ -23,9 +24,12 @@ const EditDocument = ({ document, alerts, statefulSession }) => {
     <Layout alerts={errors} type="document" title={document ? `Edit Document: ${document.title}` : 'error'} statefulSession={statefulSession}>
       <Col lg="12" className="mx-auto">
         <Card>
-          {((!session && loading) || pageLoading) && (
+          {((!session && loading) || (session && pageLoading)) && (
             <LoadingSpinner />
           )}
+          {!session && !loading && (
+            <UnauthorizedCard />
+          )}
           {session && document && !loading && !pageLoading && (
             <>
               <Card.Header><Card.Title>Edit document</Card.Title></Card.Header>

diff --git a/src/pages/documents/index.jsx b/src/pages/documents/index.jsx
@@ -6,6 +6,7 @@ import {
 import Layout from '../../components/Layout';
 import DocumentList from '../../components/DocumentList';
 import LoadingSpinner from '../../components/LoadingSpinner';
+import UnauthorizedCard from '../../components/UnauthorizedCard';
 import { getSharedDocumentsByGroup, getDocumentsByUser } from '../../utils/docUtil';
 
 const DocumentsIndex = ({
@@ -50,7 +51,7 @@ const DocumentsIndex = ({
 
   return (
     <Layout alerts={alerts} type="document" statefulSession={statefulSession}>
-      {((loading && !session) || listLoading) && (
+      {((loading && !session) || (session && listLoading)) && (
       <Card>
         <Card.Header>
           <Card.Title>
@@ -62,6 +63,9 @@ const DocumentsIndex = ({
         </Card.Body>
       </Card>
       )}
+      {!loading && !session && (
+        <UnauthorizedCard />
+      )}
       {!loading && session && !listLoading && (
       <Card>
         <Card.Header>

diff --git a/src/pages/documents/new.jsx b/src/pages/documents/new.jsx
@@ -4,6 +4,7 @@ import {
   Card, Col,
 } from 'react-bootstrap';
 import Layout from '../../components/Layout';
+import UnauthorizedCard from '../../components/UnauthorizedCard';
 import LoadingSpinner from '../../components/LoadingSpinner';
 import DocumentForm from '../../components/DocumentForm';
 
@@ -22,9 +23,12 @@ const NewDocument = ({ statefulSession }) => {
     <Layout alerts={errors} type="document" title="New Document" statefulSession={statefulSession}>
       <Col lg="12" className="mx-auto">
         <Card>
-          {((!session && loading) || pageLoading) && (
+          {((!session && loading) || (session && pageLoading)) && (
             <LoadingSpinner />
           )}
+          {!session && !loading && (
+            <UnauthorizedCard />
+          )}
           {session && !loading && !pageLoading && (
             <>
               <Card.Header><Card.Title>Create a new document</Card.Title></Card.Header>

diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
@@ -19,6 +19,7 @@ import { useRouter } from 'next/router';
 import { Formik } from 'formik';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
+import UnauthorizedCard from '../../../components/UnauthorizedCard';
 import ConfirmationDialog from '../../../components/ConfirmationDialog';
 import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../../components/GroupRoleBadge';
@@ -58,9 +59,9 @@ const EditGroup = ({
     showModal: false,
     editingGroupName: false,
     showTooltip: false,
-    groupName: group.name,
-    inviteUrl: group.inviteUrl,
-    members: group.members,
+    groupName: group ? group.name : '',
+    inviteUrl: group ? group.inviteUrl : '',
+    members: group ? group.members : '',
   });
   const handleCloseModal = () => setState({ ...state, showModal: false });
   const handleShowModal = () => setState({ ...state, showModal: true });
@@ -87,12 +88,15 @@ const EditGroup = ({
   };
 
   return (
-    <Layout alerts={alerts} type="group" title={`Manage Group: ${group.name}`} statefulSession={statefulSession}>
+    <Layout alerts={alerts} type="group" title={`Manage Group: ${group ? group.name : ''}`} statefulSession={statefulSession}>
       <Card>
-        {((!session && loading) || pageLoading) && (
+        {((!session && loading) || (session && pageLoading)) && (
           <LoadingSpinner />
         )}
-        {session && !loading && !pageLoading
+        {((!session && !loading) || (session && group && roleInGroup(session) === 'unauthorized')) && (
+          <UnauthorizedCard />
+        )}
+        {session && !loading && !pageLoading && group
           && (session.user.role === 'admin'
             || roleInGroup(session) === 'owner'
             || roleInGroup(session) === 'manager')

diff --git a/src/pages/groups/[id]/index.jsx b/src/pages/groups/[id]/index.jsx
@@ -9,6 +9,7 @@ import {
 } from 'react-bootstrap-icons';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
+import UnauthorizedCard from '../../../components/UnauthorizedCard';
 import ConfirmationDialog from '../../../components/ConfirmationDialog';
 import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../../components/GroupRoleBadge';
@@ -23,15 +24,24 @@ const ViewGroup = ({ group, statefulSession }) => {
   const handleCloseModal = () => setShowModal(false);
   const handleShowModal = () => setShowModal(true);
 
-  const roleInGroup = (currentSession) => currentSession.user.groups.find((o) => Object.entries(o).some(([k, value]) => k === 'id' && value === group.id)).role;
+  const roleInGroup = (currentSession) => {
+    const groupInSession = currentSession.user.groups.find((o) => Object.entries(o).some(([k, value]) => k === 'id' && value === group.id));
+    const memberInGroup = group.members.find((o) => Object.entries(o).some(([k, value]) => k === 'id' && value === currentSession.user.id));
+    if (groupInSession || memberInGroup) {
+      return groupInSession ? groupInSession.role : memberInGroup.role;
+    } return 'unauthorized';
+  };
 
   return (
-    <Layout alerts={alerts} type="group" title={group.name} statefulSession={statefulSession}>
+    <Layout alerts={alerts} type="group" title={group ? group.name : ''} statefulSession={statefulSession}>
       <Card>
         {!session && loading && (
           <LoadingSpinner />
         )}
-        {session && !loading && (
+        {((!session && !loading) || (session && group && roleInGroup(session) === 'unauthorized')) && (
+          <UnauthorizedCard />
+        )}
+        {session && !loading && group && (
           <>
             <Card.Header>
               {group.name}

diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
@@ -10,6 +10,7 @@ import {
 } from 'react-bootstrap-icons';
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
+import UnauthorizedCard from '../../components/UnauthorizedCard';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import GroupRoleSummaries from '../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../components/GroupRoleBadge';
@@ -45,9 +46,12 @@ const GroupList = ({ query, initAlerts, statefulSession }) => {
   return (
     <Layout alerts={alerts} type="group" statefulSession={statefulSession}>
       <Card>
-        {((!session && loading) || pageLoading) && (
+        {((!session && loading) || (session && pageLoading)) && (
           <LoadingSpinner />
         )}
+        {!session && !loading && (
+          <UnauthorizedCard />
+        )}
         {session && !loading && !pageLoading && (
           <>
             <Card.Header>

diff --git a/src/pages/groups/new.jsx b/src/pages/groups/new.jsx
@@ -10,6 +10,7 @@ import Router from 'next/router';
 import { addGroupToUser } from '../../utils/groupUtil';
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
+import UnauthorizedCard from '../../components/UnauthorizedCard';
 
 const NewGroup = ({ statefulSession }) => {
   const [session, loading] = useSession();
@@ -63,9 +64,12 @@ const NewGroup = ({ statefulSession }) => {
     <Layout alerts={alerts} type="group" title="New Group" statefulSession={statefulSession}>
       <Col lg="8" className="mx-auto">
         <Card>
-          {((!session && loading) || pageLoading) && (
+          {((!session && loading) || (session && pageLoading)) && (
             <LoadingSpinner />
           )}
+          {!session && !loading && (
+            <UnauthorizedCard />
+          )}
           {session && !loading && !pageLoading && (
             <Card.Body className="text-center">
               <Card.Title>Create a new group</Card.Title>

diff --git a/src/pages/user/[slug]/editprofile.jsx b/src/pages/user/[slug]/editprofile.jsx
@@ -8,6 +8,7 @@ import {
 import { FullName } from '../../../utils/nameUtil';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
+import UnauthorizedCard from '../../../components/UnauthorizedCard';
 import { updateAllAnnotationsByUser } from '../../../utils/annotationUtil';
 
 const EditProfile = ({ user, updateSession, statefulSession }) => {
@@ -31,18 +32,20 @@ const EditProfile = ({ user, updateSession, statefulSession }) => {
       slug: values.email.replace(/[*+~.()'"!:@]/g, '-'),
     };
 
-    updateSession({
-      user: {
-        name: newName,
-        firstName: values.firstName,
-        email: values.email,
-        image: session.user.image,
-        id: session.user.id,
-        groups: session.user.groups,
-        role: session.user.role,
-      },
-      expires: session.expires,
-    });
+    if (values.email === session.user.email) {
+      updateSession({
+        user: {
+          name: newName,
+          firstName: values.firstName,
+          email: values.email,
+          image: session.user.image,
+          id: session.user.id,
+          groups: session.user.groups,
+          role: session.user.role,
+        },
+        expires: session.expires,
+      });
+    }
 
     // eslint-disable-next-line no-undef
     const res = await fetch('/api/users', {
@@ -117,6 +120,9 @@ const EditProfile = ({ user, updateSession, statefulSession }) => {
           {!session && loading && (
             <LoadingSpinner />
           )}
+          {((!session && !loading) || (session && !user)) && (
+            <UnauthorizedCard />
+          )}
           {session && user && (
             <Card.Body>
               <Card.Title>Edit Profile</Card.Title>

diff --git a/src/pages/user/newuser.jsx b/src/pages/user/newuser.jsx
@@ -13,6 +13,7 @@ import Link from 'next/link';
 import Router from 'next/router';
 import { FullName } from '../../utils/nameUtil';
 import Layout from '../../components/Layout';
+import UnauthorizedCard from '../../components/UnauthorizedCard';
 import LoadingSpinner from '../../components/LoadingSpinner';
 import { addUserToGroup } from '../../utils/groupUtil';
 
@@ -108,9 +109,12 @@ const NewUser = ({ groupId, updateSession, statefulSession }) => {
     <Layout alerts={alerts} type="newuser" statefulSession={statefulSession}>
       <Col lg="8" className="mx-auto">
         <Card>
-          {(pageLoading || !session) && (
+          {((loading && !session) || (pageLoading && session)) && (
             <LoadingSpinner />
           )}
+          {!loading && !session && (
+            <UnauthorizedCard />
+          )}
           {!pageLoading && (statefulSession || (session && session.user.firstName)) && (
             <Card.Body className="text-center">
               <Card.Title>Welcome to Annotation Studio</Card.Title>

diff --git a/src/style/custom.scss b/src/style/custom.scss
@@ -4,6 +4,10 @@ $theme-colors: (
   "dark": #000000,
 );
 
+ol.breadcrumb {
+  padding-left: 0px !important;
+}
+
 .footer .logo {
   height: 30px;
   max-height: 30px;