Merge pull request #386 from developmentseed/limit-badges-column

Limit badges column to 3 badges in users table

Author: LanesGood

cypress/e2e/organizations/badges.cy.js

@@ -28,10 +28,11 @@ const BADGES_COUNT = 30
 const org1Badges = generateSequenceArray(BADGES_COUNT, 1).map((i) => ({
   id: i,
   name: `Badge ${addZeroPadding(i, 3)}`,
-  color: `rgba(255,0,0,${i / BADGES_COUNT})`,
+  color: `rgba(255,0,0,${1 - i / BADGES_COUNT})`,
 }))
 
-const [org1Badge1, org1Badge2, org1Badge3] = org1Badges
+const [org1Badge1, org1Badge2, org1Badge3, org1Badge4, org1Badge5, org1Badge6] =
+  org1Badges
 
 describe('Organization page', () => {
   before(() => {
@@ -59,21 +60,29 @@ describe('Organization page', () => {
       badges: org1Badges,
     })
 
-    // Assign badge 1 to the first five users
+    // Assign badges to overlapping groups of users
     cy.task('db:seed:assign-badge-to-users', {
       badgeId: org1Badge1.id,
       users: org1Team1Members.slice(0, 4),
     })
-
-    // Assign badge 2 to five users, starting at user 3
     cy.task('db:seed:assign-badge-to-users', {
       badgeId: org1Badge2.id,
       users: org1Team1Members.slice(2, 7),
     })
-
-    // Assign badge 3 to five users, starting at user 5
     cy.task('db:seed:assign-badge-to-users', {
       badgeId: org1Badge3.id,
+      users: org1Team1Members.slice(2, 7),
+    })
+    cy.task('db:seed:assign-badge-to-users', {
+      badgeId: org1Badge4.id,
+      users: org1Team1Members.slice(2, 7),
+    })
+    cy.task('db:seed:assign-badge-to-users', {
+      badgeId: org1Badge5.id,
+      users: org1Team1Members.slice(4, 9),
+    })
+    cy.task('db:seed:assign-badge-to-users', {
+      badgeId: org1Badge6.id,
       users: org1Team1Members.slice(4, 9),
     })
   })
@@ -91,6 +100,6 @@ describe('Organization page', () => {
       .contains('Badge 003')
     cy.get('[data-cy=org-members-table]')
       .find('tbody tr:nth-child(10) td:nth-child(3)')
-      .contains('Badge 003')
+      .contains('Badge 005')
   })
 })

src/components/badge.js

@@ -12,9 +12,12 @@ const hexToRgb = (hex) =>
     .map((x) => parseInt(x, 16))
     .join()
 
-export default function Badge({ name, color, children }) {
+export default function Badge({ name, color, dot, children }) {
+  let classes = [`badge`]
+  if (dot) classes.push('dot')
+  let classNames = classes.join(' ')
   return (
-    <span className='badge'>
+    <span className={classNames}>
       {children}
       {name}
       <style jsx>
@@ -30,10 +33,11 @@ export default function Badge({ name, color, children }) {
             font-size: 12px;
             white-space: nowrap;
             margin-right: 4px;
+            line-height: initial;
             position: relative;
             overflow: hidden;
           }
-          .badge::before {
+          .badge.dot::before {
             content: '';
             background-color: ${color};
             box-shadow: 0 0 0 1px ${theme.colors.primaryLite};

src/components/tables/users.js

@@ -15,7 +15,7 @@ function UsersTable({ type, orgId, onRowClick, isSearchable }) {
     key: 'name',
     direction: 'asc',
   })
-
+  const MAX_BADGES_COLUMN = 3
   let apiBasePath
   let emptyMessage
   let columns
@@ -39,11 +39,16 @@ function UsersTable({ type, orgId, onRowClick, isSearchable }) {
           render: ({ badges }) => (
             <>
               {badges?.length > 0 &&
-                badges.map((b) => (
-                  <Badge color={b.color} key={b.id}>
+                badges.slice(0, MAX_BADGES_COLUMN).map((b) => (
+                  <Badge dot color={b.color} key={b.id}>
                     {b.name}
                   </Badge>
                 ))}
+              {badges?.length > MAX_BADGES_COLUMN && (
+                <Badge color='#222'>
+                  +{badges.slice(MAX_BADGES_COLUMN).length}
+                </Badge>
+              )}
             </>
           ),
         },