Merge pull request #329 from developmentseed/render-org-teams

Stub org teams list

Author: LanesGood

cypress.config.js

@@ -1,7 +1,9 @@
 const { defineConfig } = require('cypress')
 const db = require('./src/lib/db')
 const Team = require('./src/models/team')
+const Organization = require('./src/models/organization')
 const TeamInvitation = require('./src/models/team-invitation')
+const { pick } = require('ramda')
 
 const user1 = {
   id: 1,
@@ -15,6 +17,7 @@ module.exports = defineConfig({
       on('task', {
         'db:reset': async () => {
           await db.raw('TRUNCATE TABLE team RESTART IDENTITY CASCADE')
+          await db.raw('TRUNCATE TABLE organization RESTART IDENTITY CASCADE')
           return null
         },
         'db:seed': async () => {
@@ -42,6 +45,20 @@ module.exports = defineConfig({
         'db:seed:team-invitations': async (teamInvitations) => {
           return Promise.all(teamInvitations.map(TeamInvitation.create))
         },
+        'db:seed:organizations': async (orgs) => {
+          return Promise.all(
+            orgs.map((org) =>
+              Organization.create(pick(['name'], org), org.ownerId)
+            )
+          )
+        },
+        'db:seed:organization-teams': async ({ orgId, teams, managerId }) => {
+          return Promise.all(
+            teams.map((team) =>
+              Organization.createOrgTeam(orgId, pick(['name'], team), managerId)
+            )
+          )
+        },
       })
     },
   },

cypress/e2e/organizations.cy.js

@@ -0,0 +1,40 @@
+const user1 = {
+  id: 1,
+  display_name: 'User 1',
+}
+
+const org1 = {
+  id: 1,
+  name: 'My org',
+  ownerId: user1.id,
+}
+
+const team1 = {
+  name: 'Team 1',
+}
+
+describe('Organization page', () => {
+  before(() => {
+    cy.task('db:reset')
+    cy.task('db:seed:organizations', [org1])
+  })
+
+  it('List organization teams', () => {
+    cy.login(user1)
+
+    // Check state when no teams are available
+    cy.visit('/organizations/1')
+    cy.get('body').should('contain', 'This organization has no teams.')
+
+    // Seed org teams
+    cy.task('db:seed:organization-teams', {
+      orgId: org1.id,
+      teams: [team1],
+      managerId: user1.id,
+    })
+
+    // Check state when teams are available
+    cy.visit('/organizations/1')
+    cy.get('body').should('contain', team1.name)
+  })
+})

src/lib/org-api.js

@@ -56,6 +56,28 @@ export async function getOrg(id) {
   }
 }
 
+/**
+ * getOrgTeams
+ * Get list of teams from the API
+ *
+ * @param {integer} id
+ * @returns {response}
+ */
+export async function getOrgTeams(id) {
+  let res = await fetch(join(ORG_URL, `${id}`, 'teams'))
+
+  if (res.status === 200) {
+    return res.json()
+  }
+  if (res.status === 401) {
+    return { teams: [] }
+  } else {
+    const err = new Error('could not retrieve organization teams')
+    err.status = res.status
+    throw err
+  }
+}
+
 /**
  * getOrgStaff
  * get org staff

src/pages/organizations/[id]/index.js

@@ -3,6 +3,7 @@ import Router, { withRouter } from 'next/router'
 import {
   getOrg,
   getOrgStaff,
+  getOrgTeams,
   getMembers,
   addManager,
   removeManager,
@@ -58,6 +59,7 @@ class Organization extends Component {
     this.state = {
       profileInfo: [],
       profileUserId: '',
+      teams: [],
       members: [],
       managers: [],
       owners: [],
@@ -74,6 +76,7 @@ class Organization extends Component {
   async componentDidMount() {
     this.setState({ session: await getSession() })
     await this.getOrg()
+    await this.getOrgTeams()
     await this.getOrgStaff()
     await this.getBadges()
     return this.getMembers(0)
@@ -177,6 +180,22 @@ class Organization extends Component {
       })
     }
   }
+  async getOrgTeams() {
+    const { id } = this.props
+    try {
+      const teams = await getOrgTeams(id)
+      this.setState({
+        teams,
+      })
+    } catch (e) {
+      console.error(e)
+      this.setState({
+        error: e,
+        teams: [],
+        loading: false,
+      })
+    }
+  }
 
   renderStaff(owners, managers) {
     const columns = [{ key: 'name' }, { key: 'id' }, { key: 'role' }]
@@ -201,6 +220,32 @@ class Organization extends Component {
     )
   }
 
+  renderOrgTeams(teams) {
+    const columns = [{ key: 'name' }, { key: 'id' }, { key: 'members' }]
+    const teamRows = teams.map(({ name, id, members }) => {
+      return {
+        name,
+        id,
+        members: members.length,
+      }
+    })
+
+    return (
+      <Table
+        rows={teamRows}
+        columns={columns}
+        emptyPlaceHolder={
+          this.state.loading ? 'Loading...' : 'This organization has no teams.'
+        }
+        onRowClick={(row) => {
+          Router.push(
+            join(URL, `/team?id=${row.id}`),
+            join(URL, `/teams/${row.id}`)
+          )
+        }}
+      />
+    )
+  }
   async getBadges() {
     try {
       const { id: orgId } = this.props
@@ -277,7 +322,7 @@ class Organization extends Component {
   }
 
   render() {
-    const { org, members, managers, owners, error } = this.state
+    const { org, members, managers, owners, error, teams } = this.state
     if (!org) return null
 
     const userId = parseInt(this.state.session.user_id)
@@ -377,6 +422,13 @@ class Organization extends Component {
             </dl>
           </Card>
         </div>
+        <div className='team__table'>
+          <Section>
+            <SectionHeader>Teams</SectionHeader>
+          </Section>
+          <div>{this.renderOrgTeams(teams)}</div>
+        </div>
+
         {isOrgPublic || isMemberOfOrg ? (
           <div className='team__table'>
             <Section>