🎨 #106 Handle long group names

- New component GroupNameBadge - Better table spacing
mitaai · Apr 8, 2021 · ac95bb2 · ac95bb2
1 parent 0ca33c8
commit ac95bb2
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 30 deletions.
diff --git a/src/components/Admin/Document/AdminDocumentTable/AdminDocumentTable.js b/src/components/Admin/Document/AdminDocumentTable/AdminDocumentTable.js
@@ -3,12 +3,13 @@ import React, { useEffect, useState } from 'react';
 import Router from 'next/router';
 import Link from 'next/link';
 import {
-  Badge, Button, Dropdown, DropdownButton, Table,
+  Badge, Dropdown, DropdownButton, Table,
 } from 'react-bootstrap';
 import { format } from 'date-fns';
 import { getUserById } from '../../../../utils/userUtil';
 import { deleteDocumentById } from '../../../../utils/docUtil';
 import ConfirmationDialog from '../../../ConfirmationDialog';
+import GroupNameBadge from '../../../GroupNameBadge';
 
 const AdminDocumentTable = ({ document, setAlerts }) => {
   const [namesState, setNamesState] = useState({});
@@ -172,15 +173,13 @@ const AdminDocumentTable = ({ document, setAlerts }) => {
             <td>
               {(document.groups && document.groups.length > 0)
                 ? document.groups.sort().map((group) => (
-                  <Badge
+                  <GroupNameBadge
                     variant="primary"
                     className="mr-1"
-                    as={Button}
                     href={`/admin/group/${group._id}`}
                     key={group._id}
-                  >
-                    {group.name}
-                  </Badge>
+                    groupName={group.name}
+                  />
                 ))
                 : (<Badge>[no groups]</Badge>)}
             </td>

diff --git a/src/components/Admin/User/AdminUserTable/AdminUserTable.js b/src/components/Admin/User/AdminUserTable/AdminUserTable.js
@@ -22,6 +22,7 @@ import { reassignAnnotationsToUser } from '../../../../utils/annotationUtil';
 import { adminGetList } from '../../../../utils/adminUtil';
 import ConfirmationDialog from '../../../ConfirmationDialog';
 import AdminAnnotation from './AdminAnnotation';
+import GroupNameBadge from '../../../GroupNameBadge';
 
 const AdminUserTable = ({
   user, setAlerts, isSelf,
@@ -163,16 +164,13 @@ const AdminUserTable = ({
                       break;
                   }
                   return (
-                    <Badge
+                    <GroupNameBadge
                       variant={variant}
-                      type="button"
                       className="mr-1"
-                      as={Button}
                       href={`/admin/group/${group.id}`}
                       key={group.id}
-                    >
-                      {group.name}
-                    </Badge>
+                      groupName={group.name}
+                    />
                   );
                 })
                 : (<Badge>[no groups]</Badge>)}

diff --git a/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js b/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js
@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import Link from 'next/link';
 import {
-  Badge, Card, Col, ListGroup, Row, Tab, Tabs,
+  Card, Col, ListGroup, Row, Tab, Tabs,
 } from 'react-bootstrap';
 import { format } from 'date-fns';
 import ReactHtmlParser from 'react-html-parser';
@@ -11,6 +11,7 @@ import { getSharedAnnotations, getOwnAnnotations, addGroupNamesToAnnotations } f
 import { FirstNameLastInitial } from '../../../utils/nameUtil';
 import { fixIframes } from '../../../utils/parseUtil';
 import Paginator from '../../Paginator';
+import GroupNameBadge from '../../GroupNameBadge';
 
 const DashboardAnnotationList = ({
   session,
@@ -138,13 +139,12 @@ const DashboardAnnotationList = ({
                       && annotation.permissions.private === false
                       && annotation.permissions.sharedTo === undefined
                       && (
-                      <Badge
+                      <GroupNameBadge
                         variant="primary"
                         key={annotation.permissions.groups.sort()[0]._id}
                         className="mL-2"
-                      >
-                        {annotation.permissions.groups.sort()[0].name}
-                      </Badge>
+                        groupName={annotation.permissions.groups.sort()[0].name}
+                      />
                       )}
                     </small>
                   </Col>

diff --git a/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js b/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, OverlayTrigger, Row, Tab, Tabs, Tooltip,
+  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, addGroupNamesToDocuments } from '../../../utils/docUtil';
+import GroupNameBadge from '../../GroupNameBadge';
 
 const DashboardDocumentList = ({
   session,
@@ -89,13 +90,12 @@ const DashboardDocumentList = ({
                 </Col>
                 <Col className="text-right">
                   {!!document.groups && !!document.groups[0] && (
-                    <Badge
+                    <GroupNameBadge
                       variant="primary"
                       className="mr-2"
                       key={document.groups[0]._id}
-                    >
-                      {document.groups[0].name}
-                    </Badge>
+                      groupName={document.groups[0].name}
+                    />
                   )}
                   {!!document.groups && document.groups.length > 1 && (
                     <OverlayTrigger

diff --git a/src/components/DocumentList/DocumentList.js b/src/components/DocumentList/DocumentList.js
@@ -17,6 +17,7 @@ import LoadingSpinner from '../LoadingSpinner';
 import { deleteDocumentById } from '../../utils/docUtil';
 import ConfirmationDialog from '../ConfirmationDialog';
 import { ucFirst } from '../../utils/stringUtil';
+import GroupNameBadge from '../GroupNameBadge';
 
 const DocumentList = ({
   documents,
@@ -93,15 +94,13 @@ const DocumentList = ({
                   <td>
                     {(document.groups && document.groups.length > 0)
                       ? document.groups.map((group) => (
-                        <Badge
+                        <GroupNameBadge
                           variant="primary"
                           className="mr-1"
-                          as={Button}
                           href={`/groups/${group._id}`}
                           key={group._id}
-                        >
-                          {group.name}
-                        </Badge>
+                          groupName={group.name}
+                        />
                       )) : (<Badge>[no groups]</Badge>)}
                   </td>
                   <td>

diff --git a/src/components/GroupNameBadge/GroupNameBadge.js b/src/components/GroupNameBadge/GroupNameBadge.js
@@ -0,0 +1,32 @@
+import { Badge, Button } from 'react-bootstrap';
+import styles from './GroupNameBadge.module.scss';
+
+const GroupNameBadge = ({
+  variant,
+  className,
+  href,
+  key,
+  groupName,
+}) => (href
+  ? (
+    <Badge
+      variant={variant}
+      as={Button}
+      className={`${className} ${styles.groupbadge}`}
+      href={href}
+      key={key}
+    >
+      {groupName}
+    </Badge>
+  )
+  : (
+    <Badge
+      variant={variant}
+      className={`${className} ${styles.groupbadge}`}
+      key={key}
+    >
+      {groupName}
+    </Badge>
+  ));
+
+export default GroupNameBadge;
diff --git a/src/components/GroupNameBadge/GroupNameBadge.module.scss b/src/components/GroupNameBadge/GroupNameBadge.module.scss
@@ -0,0 +1,6 @@
+.groupbadge {
+  text-overflow: ellipsis;
+  max-width: 120px;
+  overflow: hidden;
+  white-space: nowrap;
+}
diff --git a/src/components/GroupNameBadge/index.js b/src/components/GroupNameBadge/index.js
@@ -0,0 +1,3 @@
+import GroupNameBadge from './GroupNameBadge';
+
+export default GroupNameBadge;
diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
@@ -98,11 +98,11 @@ const GroupList = ({ query, initAlerts, statefulSession }) => {
                   <Table striped bordered hover variant="light">
                     <thead>
                       <tr>
-                        <th>Name</th>
+                        <th style={{ width: '39%' }}>Name</th>
                         <th>Role</th>
                         <th>Owner</th>
-                        <th>Members</th>
-                        <th>Actions</th>
+                        <th style={{ width: '10%' }}>Members</th>
+                        <th style={{ width: '21%' }}>Actions</th>
                       </tr>
                     </thead>
                     <tbody>