Add search to Explore Teams page

Author: vgeorge

cypress/e2e/teams/index.cy.js

@@ -31,9 +31,21 @@ describe('Teams page', () => {
     cy.get("[data-cy='teams-table-pagination']").should('exist')
     cy.get('[data-cy=teams-table-pagination]').contains('Showing 1-10 of 35')
 
-    // Perform sort by team name
+    // Sort by team name
     cy.get('[data-cy=table-head-column-name]').click()
-    cy.get('[data-cy=teams-table]').contains('Team 035')
-    cy.get('[data-cy=teams-table]').contains('Team 026')
+    cy.get('[data-cy=teams-table]')
+      .find('tbody tr:nth-child(1) td:nth-child(2)')
+      .contains('Team 035')
+    cy.get('[data-cy=teams-table]')
+      .find('tbody tr:nth-child(10) td:nth-child(2)')
+      .contains('Team 026')
+
+    // Search by team name
+    cy.get('[data-cy=teams-table-search-input]').type('02')
+    cy.get('[data-cy=teams-table-search-submit]').click()
+    cy.get('[data-cy=teams-table]')
+      .find('tbody tr:nth-child(5) td:nth-child(2)')
+      .contains('Team 025')
+    cy.get('[data-cy=teams-table-pagination]').contains('Showing 1-10 of 11')
   })
 })

src/components/tables/search-input.js

@@ -0,0 +1,28 @@
+import { Field, Form, Formik } from 'formik'
+import Button from '../button'
+
+const SearchInput = ({ onSearch, placeholder, 'data-cy': dataCy }) => (
+  <Formik
+    initialValues={{ search: '' }}
+    onSubmit={({ search }) => onSearch(search)}
+  >
+    <Form className='form-control'>
+      <Field
+        data-cy={`${dataCy}-search-input`}
+        type='text'
+        name='search'
+        id='search'
+        placeholder={placeholder}
+      />
+      <Button
+        data-cy={`${dataCy}-search-submit`}
+        type='submit'
+        variant='submit'
+      >
+        Search
+      </Button>
+    </Form>
+  </Formik>
+)
+
+export default SearchInput

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

@@ -3,35 +3,10 @@ import Table from '../../../components/tables/table'
 import { useState } from 'react'
 import Pagination from '../../../components/pagination'
 import { serverRuntimeConfig } from '../../../../next.config.js'
-import { Field, Form, Formik } from 'formik'
-import Button from '../../../components/button'
 import * as R from 'ramda'
+import SearchInput from '../../../components/tables/search-input'
 const { DEFAULT_PAGE_SIZE } = serverRuntimeConfig
 
-const SearchInput = ({ onSearch, 'data-cy': dataCy }) => (
-  <Formik
-    initialValues={{ search: '' }}
-    onSubmit={({ search }) => onSearch(search)}
-  >
-    <Form className='form-control'>
-      <Field
-        data-cy={`${dataCy}-search-input`}
-        type='text'
-        name='search'
-        id='search'
-        placeholder='Type an username...'
-      />
-      <Button
-        data-cy={`${dataCy}-search-submit`}
-        type='submit'
-        variant='submit'
-      >
-        Search
-      </Button>
-    </Form>
-  </Formik>
-)
-
 function MembersTable({ rows: allRows, onRowClick }) {
   const [page, setPage] = useState(1)
   const [search, setSearch] = useState(null)
@@ -66,18 +41,19 @@ function MembersTable({ rows: allRows, onRowClick }) {
   return (
     <>
       <SearchInput
-        data-cy={`team-members-table`}
+        data-cy='team-members-table'
+        placeholder='Type an username...'
         onSearch={(search) => {
           // Reset to page 1 and search
           setPage(1)
           setSearch(search)
         }}
       />
       <Table
-        data-cy={`team-members-table`}
+        data-cy='team-members-table'
         rows={rows.slice(pageStartIndex, pageEndIndex)}
         columns={columns}
-        emptyPlaceHolder={'This team has no members.'}
+        emptyPlaceHolder='This team has no members.'
         onRowClick={onRowClick}
         showRowNumbers
         sort={sort}

src/pages/teams/index.js

@@ -10,6 +10,7 @@ import { getTeams } from '../../lib/teams-api'
 import logger from '../../lib/logger'
 import { serverRuntimeConfig } from '../../../next.config.js'
 import Pagination from '../../components/pagination'
+import SearchInput from '../../components/tables/search-input'
 const { DEFAULT_PAGE_SIZE } = serverRuntimeConfig
 
 const Map = dynamic(import('../../components/list-map'), {
@@ -32,6 +33,7 @@ export default class TeamList extends Component {
         key: 'name',
         direction: 'asc',
       },
+      search: '',
     }
   }
 
@@ -59,7 +61,7 @@ export default class TeamList extends Component {
   }
 
   renderTeams() {
-    const { teams, sortOptions, page } = this.state
+    const { teams, sortOptions, page, search } = this.state
     if (!teams) return null
 
     const columns = [
@@ -75,12 +77,26 @@ export default class TeamList extends Component {
       teams
     )
 
+    if (search?.length > 0) {
+      rows = rows.filter((r) =>
+        r.name.toUpperCase().includes(search.toUpperCase())
+      )
+    }
+
     // Calculate start and end index
     const pageStartIndex = (page - 1) * DEFAULT_PAGE_SIZE
     const pageEndIndex = pageStartIndex + DEFAULT_PAGE_SIZE
 
     return (
       <>
+        <SearchInput
+          data-cy='teams-table'
+          placeholder='Search by team name...'
+          onSearch={(search) => {
+            // Reset to page 1 and search
+            this.setState({ page: 1, search })
+          }}
+        />
         <Table
           data-cy={`teams-table`}
           columns={columns}