#106 Document group lists filtering and styling

src/components/AnnotationCard/AnnotationCard.js

@@ -435,7 +435,7 @@ function AnnotationCard({
   const annotationSaveButton = annotationMatchesCurrentFilters() ? saveButton : (
     <OverlayTrigger
       overlay={(
-        <Tooltip id="tooltip-annotation-info">
+        <Tooltip className="styled-tooltip">
           <strong>Note:</strong>
           {' '}
           Filters applied to this document may exclude
@@ -735,18 +735,6 @@ function AnnotationCard({
       </Card>
       <style jsx global>
         {`
-        #tooltip-annotation-info .tooltip-inner {
-          font-size: 12px;
-          background-color: #f6f6f6;
-          color: black;
-          border: 1px solid rgba(0, 0, 0, 0.125);
-        }
-        #tooltip-annotation-info .arrow {
-          background-color: transparent;
-        }
-        #tooltip-annotation-info .arrow::before {
-          border-top-color: rgba(0, 0, 0, 0.125);
-        }
         .truncated-annotation, .truncated-annotation .text-quote {
           overflow: hidden;
           text-overflow: ellipsis;

src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js

@@ -2,12 +2,13 @@
 import React, { useState, useEffect } from 'react';
 import Link from 'next/link';
 import {
-  Badge, Button, Card, Col, ListGroup, Row, Tab, Tabs,
+  Badge, Button, Card, Col, ListGroup, OverlayTrigger, Row, Tab, Tabs, Tooltip,
 } from 'react-bootstrap';
+import { Plus } from 'react-bootstrap-icons';
 import { format } from 'date-fns';
 import LoadingSpinner from '../../LoadingSpinner';
 import { getSharedDocumentsByGroup, getDocumentsByUser } from '../../../utils/docUtil';
-import { getGroupNameById } from '../../../utils/groupUtil';
+import { getGroupNameById, filterGroupIdsByUser } from '../../../utils/groupUtil';
 
 const DashboardDocumentList = ({
   session,
@@ -98,15 +99,33 @@ const DashboardDocumentList = ({
                   <Link href={`/documents/${document.slug}`}>{document.title}</Link>
                 </Col>
                 <Col className="text-right">
-                  {document.groups && document.groups.length > 0 && (
+                  {session && session.user.groups && document.groups
+                  && filterGroupIdsByUser(document.groups, session.user.groups).length > 0 && (
                   <Badge
                     variant="info"
-                    key={document.groups.sort()[0]}
+                    key={filterGroupIdsByUser(document.groups, session.user.groups).sort()[0]}
                     className="mr-2"
                   >
-                    {documentGroupState[document.groups.sort()[0]]}
+                    {documentGroupState[filterGroupIdsByUser(document.groups, session.user.groups)
+                      .sort()[0]]}
                   </Badge>
                   )}
+                  {document.groups && session && session.user.groups
+                  && filterGroupIdsByUser(document.groups, session.user.groups).length > 1 && (
+                    <OverlayTrigger
+                      overlay={(
+                        <Tooltip className="styled-tooltip">
+                          Shared with additional groups
+                        </Tooltip>
+                      )}
+                      placement="top"
+                    >
+                      <Plus
+                        className="mr-1 ml-n1 mb-1"
+                        title="Tooltip on left"
+                      />
+                    </OverlayTrigger>
+                  )}
                   <>
                     {format(new Date(document.createdAt), 'MM/dd/yyyy')}
                   </>

src/components/DocumentList/DocumentList.js

@@ -14,7 +14,7 @@ import {
 } from 'react-bootstrap-icons';
 import { format } from 'date-fns';
 import LoadingSpinner from '../LoadingSpinner';
-import { getGroupNameById } from '../../utils/groupUtil';
+import { getGroupNameById, filterGroupIdsByUser } from '../../utils/groupUtil';
 import { deleteDocumentById } from '../../utils/docUtil';
 import ConfirmationDialog from '../ConfirmationDialog';
 import { ucFirst } from '../../utils/stringUtil';
@@ -27,6 +27,7 @@ const DocumentList = ({
   userId,
   alerts,
   setAlerts,
+  userGroups,
 }) => {
   const [groupState, setGroupState] = useState({});
   const [showModal, setShowModal] = useState('');
@@ -114,8 +115,8 @@ const DocumentList = ({
                     {format(new Date(document.createdAt), 'MM/dd/yyyy')}
                   </td>
                   <td>
-                    {(document.groups && document.groups.length > 0)
-                      ? document.groups.sort().map((group) => (
+                    {(document.groups && document.groups.length > 0 && userGroups)
+                      ? filterGroupIdsByUser(document.groups, userGroups).sort().map((group) => (
                         <Badge
                           variant="info"
                           className="mr-1"

src/pages/documents/index.jsx

@@ -97,6 +97,7 @@ const DocumentsIndex = ({
               setAlerts={setAlerts}
               loading={listLoading}
               setLoading={setListLoading}
+              userGroups={session.user.groups}
               userId={session.user.id}
             />
           )}

src/style/custom.scss

@@ -306,5 +306,20 @@ ol.breadcrumb {
   }
 }
 
+.styled-tooltip {
+  .tooltip-inner {
+    font-size: 12px;
+    background-color: #f6f6f6;
+    color: black;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+  }
+  .arrow {
+    background-color: transparent;
+  }
+  .arrow::before {
+    border-top-color: rgba(0, 0, 0, 0.125) !important;
+  }
+}
+
 /* import bootstrap */
 @import "~bootstrap/scss/bootstrap";

src/utils/groupUtil.js

@@ -358,13 +358,22 @@ const getGroupById = async (id) => {
     return Promise.resolve(res.json());
   } return Promise.reject(Error(`Unable to get group ${id}: error ${res.status} received from server`));
 };
+
+const filterGroupIdsByUser = (groupIds, userGroups) => {
+  if (userGroups) {
+    const filtered = userGroups.filter((grp) => groupIds.includes(grp.id));
+    return filtered.map((grp) => grp.id);
+  } return [];
+};
+
 export {
   addGroupToUser,
   addUserToGroup,
   changeUserRole,
   deleteGroup,
   deleteGroupById,
   deleteInviteToken,
+  filterGroupIdsByUser,
   generateInviteToken,
   getGroupById,
   getGroupNameById,