Merge pull request #389 from developmentseed/add-role-label

Add role label to users and members table

Author: LanesGood

app/lib/utils.js

@@ -41,10 +41,19 @@ function toDateString(timestamp) {
   return dateFormat(new Date(timestamp))
 }
 
+/* Transform string into title case */
+function makeTitleCase(text) {
+  return text
+    .split(' ')
+    .map((word) => `${word[0].toUpperCase()}${word.slice(1)}`)
+    .join(' ')
+}
+
 module.exports = {
   unpack,
   ValidationError,
   PropertyRequiredError,
   checkRequiredProperties,
   toDateString,
+  makeTitleCase,
 }

src/components/tables/users.js

@@ -7,6 +7,8 @@ import Pagination from '../pagination'
 import qs from 'qs'
 import SearchInput from './search-input'
 import ExternalProfileButton from '../external-profile-button'
+import { makeTitleCase } from '../../../app/lib/utils'
+import theme from '../../styles/theme'
 
 function UsersTable({ type, orgId, onRowClick, isSearchable }) {
   const [page, setPage] = useState(1)
@@ -15,7 +17,15 @@ function UsersTable({ type, orgId, onRowClick, isSearchable }) {
     key: 'name',
     direction: 'asc',
   })
+
   const MAX_BADGES_COLUMN = 3
+  const roleBgColor = {
+    member: theme.colors.primaryColor,
+    moderator: theme.colors.infoColor,
+    manager: theme.colors.infoColor,
+    owner: theme.colors.secondaryColor,
+    undefined: theme.colors.primaryDark,
+  }
   let apiBasePath
   let emptyMessage
   let columns
@@ -70,7 +80,16 @@ function UsersTable({ type, orgId, onRowClick, isSearchable }) {
       columns = [
         { key: 'name', sortable: true },
         { key: 'id', label: 'OSM ID', sortable: true },
-        { key: 'type', sortable: true },
+        {
+          key: 'type',
+          label: 'role',
+          sortable: true,
+          render: ({ type }) => (
+            <Badge color={roleBgColor[type.toLowerCase()]}>
+              {makeTitleCase(type)}
+            </Badge>
+          ),
+        },
         {
           key: 'External Profiles',
           render: ({ name }) => (

src/pages/teams/[id]/members-table.js

@@ -7,6 +7,9 @@ import { serverRuntimeConfig } from '../../../../next.config.js'
 import * as R from 'ramda'
 import SearchInput from '../../../components/tables/search-input'
 import ExternalProfileButton from '../../../components/external-profile-button'
+import Badge from '../../../components/badge'
+import { makeTitleCase } from '../../../../app/lib/utils'
+import theme from '../../../styles/theme'
 const { DEFAULT_PAGE_SIZE } = serverRuntimeConfig
 
 function MembersTable({ rows: allRows, onRowClick }) {
@@ -17,10 +20,27 @@ function MembersTable({ rows: allRows, onRowClick }) {
     direction: 'asc',
   })
 
+  const roleBgColor = {
+    member: theme.colors.primaryColor,
+    moderator: theme.colors.secondaryColor,
+    manager: theme.colors.infoColor,
+    owner: theme.colors.secondaryColor,
+    undefined: theme.colors.primaryDark,
+  }
+
   const columns = [
     { key: 'name', sortable: true },
     { key: 'id', sortable: true },
-    { key: 'role', sortable: true },
+    {
+      key: 'role',
+      label: 'role',
+      sortable: true,
+      render: ({ role }) => (
+        <Badge color={roleBgColor[role.toLowerCase()]}>
+          {makeTitleCase(role)}
+        </Badge>
+      ),
+    },
     {
       key: 'External Profiles',
       render: ({ name }) => (