Merge pull request #2226 from influxdata/feat/orgs-members-filtering

Create dummy data for members and add filter box to the header

ui/src/organizations/components/MemberList.tsx

@@ -33,7 +33,7 @@ export default class MemberList extends PureComponent<Props> {
       <IndexList.Row key={member.id}>
         <IndexList.Cell>{member.name}</IndexList.Cell>
         <IndexList.Cell>{member.role}</IndexList.Cell>
-        <IndexList.Cell revealOnHover={true}>DELETE</IndexList.Cell>
+        <IndexList.Cell />
       </IndexList.Row>
     ))
   }

ui/src/organizations/components/Members.tsx

@@ -1,14 +1,18 @@
 // Libraries
-import React, {PureComponent} from 'react'
+import React, {PureComponent, ChangeEvent} from 'react'
 
 // Components
-import {ComponentSize, EmptyState} from 'src/clockface'
+import {ComponentSize, EmptyState, IconFont, Input} from 'src/clockface'
 import MemberList from 'src/organizations/components/MemberList'
 import FilterList from 'src/shared/components/Filter'
 
 // Types
 import {ResourceOwner} from 'src/api'
 
+// Constants
+import {resouceOwner} from 'src/organizations/dummyData'
+import ProfilePageHeader from 'src/shared/components/profile_page/ProfilePageHeader'
+
 interface Props {
   members: ResourceOwner[]
 }
@@ -25,20 +29,36 @@ export default class Members extends PureComponent<Props, State> {
     }
   }
   public render() {
-    const {members} = this.props
     const {searchTerm} = this.state
+    const dummyData = resouceOwner
 
     return (
-      <FilterList<ResourceOwner>
-        list={members}
-        searchKeys={['name']}
-        searchTerm={searchTerm}
-      >
-        {ms => <MemberList members={ms} emptyState={this.emptyState} />}
-      </FilterList>
+      <>
+        <ProfilePageHeader>
+          <Input
+            icon={IconFont.Search}
+            placeholder="Filter tasks..."
+            widthPixels={290}
+            value={searchTerm}
+            onChange={this.handleFilterChange}
+            onBlur={this.handleFilterChange}
+          />
+        </ProfilePageHeader>
+        <FilterList<ResourceOwner>
+          list={dummyData}
+          searchKeys={['name']}
+          searchTerm={searchTerm}
+        >
+          {ms => <MemberList members={ms} emptyState={this.emptyState} />}
+        </FilterList>
+      </>
     )
   }
 
+  private handleFilterChange = (e: ChangeEvent<HTMLInputElement>): void => {
+    this.setState({searchTerm: e.target.value})
+  }
+
   private get emptyState(): JSX.Element {
     return (
       <EmptyState size={ComponentSize.Medium}>

ui/src/organizations/dummyData.ts

@@ -0,0 +1,31 @@
+import {ResourceOwner, User} from 'src/api'
+
+export const resouceOwner: ResourceOwner[] = [
+  {
+    id: '1',
+    name: 'John',
+    status: User.StatusEnum.Active,
+    links: {
+      self: '/api/v2/users/1',
+    },
+    role: ResourceOwner.RoleEnum.Owner,
+  },
+  {
+    id: '2',
+    name: 'Jane',
+    status: User.StatusEnum.Active,
+    links: {
+      self: '/api/v2/users/2',
+    },
+    role: ResourceOwner.RoleEnum.Owner,
+  },
+  {
+    id: '3',
+    name: 'Smith',
+    status: User.StatusEnum.Active,
+    links: {
+      self: '/api/v2/users/3',
+    },
+    role: ResourceOwner.RoleEnum.Owner,
+  },
+]