From 178d637b4e5fa21fb89ed102de6e6a6c022fe065 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Thu, 14 Mar 2019 07:53:31 +0100
Subject: [PATCH] refactor: splitted TeamMembers to TeamMemberRow

---
 .../app/features/teams/TeamMemberRow.test.tsx |   82 +
 public/app/features/teams/TeamMemberRow.tsx   |  106 +
 .../app/features/teams/TeamMembers.test.tsx   |  206 +-
 public/app/features/teams/TeamMembers.tsx     |   95 +-
 .../__snapshots__/TeamMemberRow.test.tsx.snap |  191 ++
 .../__snapshots__/TeamMembers.test.tsx.snap   | 2430 ++---------------
 6 files changed, 677 insertions(+), 2433 deletions(-)
 create mode 100644 public/app/features/teams/TeamMemberRow.test.tsx
 create mode 100644 public/app/features/teams/TeamMemberRow.tsx
 create mode 100644 public/app/features/teams/__snapshots__/TeamMemberRow.test.tsx.snap

diff --git a/public/app/features/teams/TeamMemberRow.test.tsx b/public/app/features/teams/TeamMemberRow.test.tsx
new file mode 100644
index 00000000000..87f771cc833
--- /dev/null
+++ b/public/app/features/teams/TeamMemberRow.test.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { TeamMember, TeamPermissionLevel } from '../../types';
+import { getMockTeamMember } from './__mocks__/teamMocks';
+import { TeamMemberRow, Props } from './TeamMemberRow';
+import { SelectOptionItem } from '@grafana/ui';
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    member: getMockTeamMember(),
+    syncEnabled: false,
+    editorsCanAdmin: false,
+    signedInUserIsTeamAdmin: false,
+    updateTeamMember: jest.fn(),
+    removeTeamMember: jest.fn(),
+  };
+
+  Object.assign(props, propOverrides);
+
+  const wrapper = shallow(<TeamMemberRow {...props} />);
+  const instance = wrapper.instance() as TeamMemberRow;
+
+  return {
+    wrapper,
+    instance,
+  };
+};
+
+describe('Render', () => {
+  describe('when feature toggle editorsCanAdmin is turned on', () => {
+    it('should render permissions select if user is team admin', () => {
+      const { wrapper } = setup({ editorsCanAdmin: true, signedInUserIsTeamAdmin: true });
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render span and disable buttons if user is team member', () => {
+      const { wrapper } = setup({ editorsCanAdmin: true, signedInUserIsTeamAdmin: false });
+
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('when feature toggle editorsCanAdmin is turned off', () => {
+    it('should not render permissions', () => {
+      const { wrapper } = setup({ editorsCanAdmin: false, signedInUserIsTeamAdmin: true });
+
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
+
+describe('Functions', () => {
+  describe('on remove member', () => {
+    const member = getMockTeamMember();
+    const { instance } = setup({ member });
+
+    instance.onRemoveMember(member);
+
+    expect(instance.props.removeTeamMember).toHaveBeenCalledWith(1);
+  });
+
+  describe('on update permision for user in team', () => {
+    const member: TeamMember = {
+      userId: 3,
+      teamId: 2,
+      avatarUrl: '',
+      email: 'user@user.org',
+      labels: [],
+      login: 'member',
+      permission: TeamPermissionLevel.Member,
+    };
+    const { instance } = setup({ member });
+    const permission = TeamPermissionLevel.Admin;
+    const item: SelectOptionItem = { value: permission };
+    const expectedTeamMemeber = { ...member, permission };
+
+    instance.onPermissionChange(item, member);
+
+    expect(instance.props.updateTeamMember).toHaveBeenCalledWith(expectedTeamMemeber);
+  });
+});
diff --git a/public/app/features/teams/TeamMemberRow.tsx b/public/app/features/teams/TeamMemberRow.tsx
new file mode 100644
index 00000000000..e0bd26f4fd7
--- /dev/null
+++ b/public/app/features/teams/TeamMemberRow.tsx
@@ -0,0 +1,106 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+import { DeleteButton, Select, SelectOptionItem } from '@grafana/ui';
+
+import { TeamMember, teamsPermissionLevels } from 'app/types';
+import { WithFeatureToggle } from 'app/core/components/WithFeatureToggle';
+import { updateTeamMember, removeTeamMember } from './state/actions';
+import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
+
+export interface Props {
+  member: TeamMember;
+  syncEnabled: boolean;
+  editorsCanAdmin: boolean;
+  signedInUserIsTeamAdmin: boolean;
+  removeTeamMember?: typeof removeTeamMember;
+  updateTeamMember?: typeof updateTeamMember;
+}
+
+export class TeamMemberRow extends PureComponent<Props> {
+  constructor(props: Props) {
+    super(props);
+    this.renderLabels = this.renderLabels.bind(this);
+    this.renderPermissions = this.renderPermissions.bind(this);
+  }
+
+  onRemoveMember(member: TeamMember) {
+    this.props.removeTeamMember(member.userId);
+  }
+
+  onPermissionChange = (item: SelectOptionItem, member: TeamMember) => {
+    const permission = item.value;
+    const updatedTeamMember = { ...member, permission };
+
+    this.props.updateTeamMember(updatedTeamMember);
+  };
+
+  renderPermissions(member: TeamMember) {
+    const { editorsCanAdmin, signedInUserIsTeamAdmin } = this.props;
+    const value = teamsPermissionLevels.find(dp => dp.value === member.permission);
+
+    return (
+      <WithFeatureToggle featureToggle={editorsCanAdmin}>
+        <td>
+          <div className="gf-form">
+            {signedInUserIsTeamAdmin && (
+              <Select
+                isSearchable={false}
+                options={teamsPermissionLevels}
+                onChange={item => this.onPermissionChange(item, member)}
+                className="gf-form-select-box__control--menu-right"
+                value={value}
+              />
+            )}
+            {!signedInUserIsTeamAdmin && <span>{value.label}</span>}
+          </div>
+        </td>
+      </WithFeatureToggle>
+    );
+  }
+
+  renderLabels(labels: string[]) {
+    if (!labels) {
+      return <td />;
+    }
+
+    return (
+      <td>
+        {labels.map(label => (
+          <TagBadge key={label} label={label} removeIcon={false} count={0} onClick={() => {}} />
+        ))}
+      </td>
+    );
+  }
+
+  render() {
+    const { member, syncEnabled, signedInUserIsTeamAdmin } = this.props;
+    return (
+      <tr key={member.userId}>
+        <td className="width-4 text-center">
+          <img className="filter-table__avatar" src={member.avatarUrl} />
+        </td>
+        <td>{member.login}</td>
+        <td>{member.email}</td>
+        {this.renderPermissions(member)}
+        {syncEnabled && this.renderLabels(member.labels)}
+        <td className="text-right">
+          <DeleteButton onConfirm={() => this.onRemoveMember(member)} disabled={!signedInUserIsTeamAdmin} />
+        </td>
+      </tr>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {};
+}
+
+const mapDispatchToProps = {
+  removeTeamMember,
+  updateTeamMember,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TeamMemberRow);
diff --git a/public/app/features/teams/TeamMembers.test.tsx b/public/app/features/teams/TeamMembers.test.tsx
index f6f0b4a5e49..fc65b0532e1 100644
--- a/public/app/features/teams/TeamMembers.test.tsx
+++ b/public/app/features/teams/TeamMembers.test.tsx
@@ -1,45 +1,29 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { TeamMembers, Props, State } from './TeamMembers';
-import { TeamMember, TeamPermissionLevel } from '../../types';
-import { getMockTeamMember, getMockTeamMembers } from './__mocks__/teamMocks';
-import { SelectOptionItem } from '@grafana/ui';
-import { contextSrv } from 'app/core/services/context_srv';
+import { TeamMember, OrgRole } from '../../types';
+import { getMockTeamMembers } from './__mocks__/teamMocks';
+import { User } from 'app/core/services/context_srv';
 
 const signedInUserId = 1;
-const originalContextSrv = contextSrv;
 
-jest.mock('app/core/services/context_srv', () => ({
-  contextSrv: {
-    isGrafanaAdmin: false,
-    hasRole: role => false,
-    user: { id: signedInUserId },
-  },
-}));
-
-interface SetupProps {
-  propOverrides?: object;
-  isGrafanaAdmin?: boolean;
-  isOrgAdmin?: boolean;
-}
-
-const setup = (setupProps: SetupProps) => {
+const setup = (propOverrides?: object) => {
   const props: Props = {
     members: [] as TeamMember[],
     searchMemberQuery: '',
     setSearchMemberQuery: jest.fn(),
     loadTeamMembers: jest.fn(),
     addTeamMember: jest.fn(),
-    removeTeamMember: jest.fn(),
-    updateTeamMember: jest.fn(),
     syncEnabled: false,
     editorsCanAdmin: false,
+    signedInUser: {
+      id: signedInUserId,
+      isGrafanaAdmin: false,
+      orgRole: OrgRole.Viewer,
+    } as User,
   };
 
-  contextSrv.isGrafanaAdmin = setupProps.isGrafanaAdmin || false;
-  contextSrv.hasRole = role => setupProps.isOrgAdmin || false;
-
-  Object.assign(props, setupProps.propOverrides);
+  Object.assign(props, propOverrides);
 
   const wrapper = shallow(<TeamMembers {...props} />);
   const instance = wrapper.instance() as TeamMembers;
@@ -51,11 +35,6 @@ const setup = (setupProps: SetupProps) => {
 };
 
 describe('Render', () => {
-  beforeEach(() => {
-    contextSrv.isGrafanaAdmin = originalContextSrv.isGrafanaAdmin;
-    contextSrv.hasRole = originalContextSrv.hasRole;
-  });
-
   it('should render component', () => {
     const { wrapper } = setup({});
 
@@ -63,74 +42,16 @@ describe('Render', () => {
   });
 
   it('should render team members', () => {
-    const { wrapper } = setup({
-      propOverrides: {
-        members: getMockTeamMembers(5, 5),
-      },
-    });
+    const { wrapper } = setup({ members: getMockTeamMembers(5, 5) });
 
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should render team members when sync enabled', () => {
-    const { wrapper } = setup({
-      propOverrides: {
-        members: getMockTeamMembers(5, 5),
-        syncEnabled: true,
-      },
-    });
+    const { wrapper } = setup({ members: getMockTeamMembers(5, 5), syncEnabled: true });
 
     expect(wrapper).toMatchSnapshot();
   });
-
-  describe('when feature toggle editorsCanAdmin is turned on', () => {
-    it('should render permissions select if user is Grafana Admin', () => {
-      const members = getMockTeamMembers(5, 5);
-      const { wrapper } = setup({
-        propOverrides: { members, editorsCanAdmin: true },
-        isGrafanaAdmin: true,
-        isOrgAdmin: false,
-      });
-
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should render permissions select if user is Org Admin', () => {
-      const members = getMockTeamMembers(5, 5);
-      const { wrapper } = setup({
-        propOverrides: { members, editorsCanAdmin: true },
-        isGrafanaAdmin: false,
-        isOrgAdmin: true,
-      });
-
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should render permissions select if user is team admin', () => {
-      const members = getMockTeamMembers(5, signedInUserId);
-      const { wrapper } = setup({
-        propOverrides: { members, editorsCanAdmin: true },
-        isGrafanaAdmin: false,
-        isOrgAdmin: false,
-      });
-
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should render span and disable buttons if user is team member', () => {
-      const members = getMockTeamMembers(5, 5);
-      const { wrapper } = setup({
-        propOverrides: {
-          members,
-          editorsCanAdmin: true,
-        },
-        isGrafanaAdmin: false,
-        isOrgAdmin: false,
-      });
-
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
 });
 
 describe('Functions', () => {
@@ -144,15 +65,6 @@ describe('Functions', () => {
     });
   });
 
-  describe('on remove member', () => {
-    const { instance } = setup({});
-    const mockTeamMember = getMockTeamMember();
-
-    instance.onRemoveMember(mockTeamMember);
-
-    expect(instance.props.removeTeamMember).toHaveBeenCalledWith(1);
-  });
-
   describe('on add user to team', () => {
     const { wrapper, instance } = setup({});
     const state = wrapper.state() as State;
@@ -169,23 +81,85 @@ describe('Functions', () => {
     expect(instance.props.addTeamMember).toHaveBeenCalledWith(1);
   });
 
-  describe('on update permision for user in team', () => {
-    const { instance } = setup({});
-    const permission = TeamPermissionLevel.Admin;
-    const item: SelectOptionItem = { value: permission };
-    const member: TeamMember = {
-      userId: 3,
-      teamId: 2,
-      avatarUrl: '',
-      email: 'user@user.org',
-      labels: [],
-      login: 'member',
-      permission: TeamPermissionLevel.Member,
-    };
-    const expectedTeamMemeber = { ...member, permission };
+  describe('isSignedInUserTeamAdmin', () => {
+    describe('when feature toggle editorsCanAdmin is turned off', () => {
+      it('should return true', () => {
+        const { instance } = setup({ editorsCanAdmin: false });
 
-    instance.onPermissionChange(item, member);
+        const result = instance.isSignedInUserTeamAdmin();
 
-    expect(instance.props.updateTeamMember).toHaveBeenCalledWith(expectedTeamMemeber);
+        expect(result).toBe(true);
+      });
+    });
+
+    describe('when feature toggle editorsCanAdmin is turned on', () => {
+      it('should return true if signed in user is grafanaAdmin', () => {
+        const members = getMockTeamMembers(5, 5);
+        const { instance } = setup({
+          members,
+          editorsCanAdmin: true,
+          signedInUser: {
+            id: signedInUserId,
+            isGrafanaAdmin: true,
+            orgRole: OrgRole.Viewer,
+          },
+        });
+
+        const result = instance.isSignedInUserTeamAdmin();
+
+        expect(result).toBe(true);
+      });
+
+      it('should return true if signed in user is org admin', () => {
+        const members = getMockTeamMembers(5, 5);
+        const { instance } = setup({
+          members,
+          editorsCanAdmin: true,
+          signedInUser: {
+            id: signedInUserId,
+            isGrafanaAdmin: false,
+            orgRole: OrgRole.Admin,
+          },
+        });
+
+        const result = instance.isSignedInUserTeamAdmin();
+
+        expect(result).toBe(true);
+      });
+
+      it('should return true if signed in user is team admin', () => {
+        const members = getMockTeamMembers(5, signedInUserId);
+        const { instance } = setup({
+          members,
+          editorsCanAdmin: true,
+          signedInUser: {
+            id: signedInUserId,
+            isGrafanaAdmin: false,
+            orgRole: OrgRole.Viewer,
+          },
+        });
+
+        const result = instance.isSignedInUserTeamAdmin();
+
+        expect(result).toBe(true);
+      });
+
+      it('should return false if signed in user is not grafanaAdmin, org admin or team admin', () => {
+        const members = getMockTeamMembers(5, 5);
+        const { instance } = setup({
+          members,
+          editorsCanAdmin: true,
+          signedInUser: {
+            id: signedInUserId,
+            isGrafanaAdmin: false,
+            orgRole: OrgRole.Viewer,
+          },
+        });
+
+        const result = instance.isSignedInUserTeamAdmin();
+
+        expect(result).toBe(false);
+      });
+    });
   });
 });
diff --git a/public/app/features/teams/TeamMembers.tsx b/public/app/features/teams/TeamMembers.tsx
index fc5706ec68f..db2b9024a1f 100644
--- a/public/app/features/teams/TeamMembers.tsx
+++ b/public/app/features/teams/TeamMembers.tsx
@@ -2,32 +2,25 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import SlideDown from 'app/core/components/Animations/SlideDown';
 import { UserPicker } from 'app/core/components/Select/UserPicker';
-import { DeleteButton, Select, SelectOptionItem } from '@grafana/ui';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
-import { TeamMember, User, teamsPermissionLevels, TeamPermissionLevel, OrgRole } from 'app/types';
-import {
-  loadTeamMembers,
-  addTeamMember,
-  removeTeamMember,
-  setSearchMemberQuery,
-  updateTeamMember,
-} from './state/actions';
+import { TeamMember, User, TeamPermissionLevel, OrgRole } from 'app/types';
+import { loadTeamMembers, addTeamMember, setSearchMemberQuery } from './state/actions';
 import { getSearchMemberQuery, getTeamMembers } from './state/selectors';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 import { WithFeatureToggle } from 'app/core/components/WithFeatureToggle';
 import { config } from 'app/core/config';
-import { contextSrv } from 'app/core/services/context_srv';
+import { contextSrv, User as SignedInUser } from 'app/core/services/context_srv';
+import TeamMemberRow from './TeamMemberRow';
 
 export interface Props {
   members: TeamMember[];
   searchMemberQuery: string;
   loadTeamMembers: typeof loadTeamMembers;
   addTeamMember: typeof addTeamMember;
-  removeTeamMember: typeof removeTeamMember;
   setSearchMemberQuery: typeof setSearchMemberQuery;
-  updateTeamMember: typeof updateTeamMember;
   syncEnabled: boolean;
   editorsCanAdmin?: boolean;
+  signedInUser?: SignedInUser;
 }
 
 export interface State {
@@ -39,7 +32,6 @@ export class TeamMembers extends PureComponent<Props, State> {
   constructor(props) {
     super(props);
     this.state = { isAdding: false, newTeamMember: null };
-    this.renderPermissions = this.renderPermissions.bind(this);
   }
 
   componentDidMount() {
@@ -50,10 +42,6 @@ export class TeamMembers extends PureComponent<Props, State> {
     this.props.setSearchMemberQuery(value);
   };
 
-  onRemoveMember(member: TeamMember) {
-    this.props.removeTeamMember(member.userId);
-  }
-
   onToggleAdding = () => {
     this.setState({ isAdding: !this.state.isAdding });
   };
@@ -81,65 +69,16 @@ export class TeamMembers extends PureComponent<Props, State> {
     );
   }
 
-  onPermissionChange = (item: SelectOptionItem, member: TeamMember) => {
-    const permission = item.value;
-    const updatedTeamMember = { ...member, permission };
-
-    this.props.updateTeamMember(updatedTeamMember);
-  };
-
-  private isSignedInUserTeamAdmin = () => {
-    const { members, editorsCanAdmin } = this.props;
-    const userInMembers = members.find(m => m.userId === contextSrv.user.id);
-    const isAdmin = contextSrv.isGrafanaAdmin || contextSrv.hasRole(OrgRole.Admin);
+  isSignedInUserTeamAdmin = (): boolean => {
+    const { members, editorsCanAdmin, signedInUser } = this.props;
+    const userInMembers = members.find(m => m.userId === signedInUser.id);
+    const isAdmin = signedInUser.isGrafanaAdmin || signedInUser.orgRole === OrgRole.Admin;
     const userIsTeamAdmin = userInMembers && userInMembers.permission === TeamPermissionLevel.Admin;
     const isSignedInUserTeamAdmin = isAdmin || userIsTeamAdmin;
 
     return isSignedInUserTeamAdmin || !editorsCanAdmin;
   };
 
-  renderPermissions(member: TeamMember) {
-    const { editorsCanAdmin } = this.props;
-    const isUserTeamAdmin = this.isSignedInUserTeamAdmin();
-    const value = teamsPermissionLevels.find(dp => dp.value === member.permission);
-
-    return (
-      <WithFeatureToggle featureToggle={editorsCanAdmin}>
-        <td>
-          <div className="gf-form">
-            {isUserTeamAdmin && (
-              <Select
-                isSearchable={false}
-                options={teamsPermissionLevels}
-                onChange={item => this.onPermissionChange(item, member)}
-                className="gf-form-select-box__control--menu-right"
-                value={value}
-              />
-            )}
-            {!isUserTeamAdmin && <span>{value.label}</span>}
-          </div>
-        </td>
-      </WithFeatureToggle>
-    );
-  }
-
-  renderMember(member: TeamMember, syncEnabled: boolean) {
-    return (
-      <tr key={member.userId}>
-        <td className="width-4 text-center">
-          <img className="filter-table__avatar" src={member.avatarUrl} />
-        </td>
-        <td>{member.login}</td>
-        <td>{member.email}</td>
-        {this.renderPermissions(member)}
-        {syncEnabled && this.renderLabels(member.labels)}
-        <td className="text-right">
-          <DeleteButton onConfirm={() => this.onRemoveMember(member)} disabled={!this.isSignedInUserTeamAdmin()} />
-        </td>
-      </tr>
-    );
-  }
-
   render() {
     const { isAdding } = this.state;
     const { searchMemberQuery, members, syncEnabled, editorsCanAdmin } = this.props;
@@ -198,7 +137,18 @@ export class TeamMembers extends PureComponent<Props, State> {
                 <th style={{ width: '1%' }} />
               </tr>
             </thead>
-            <tbody>{members && members.map(member => this.renderMember(member, syncEnabled))}</tbody>
+            <tbody>
+              {members &&
+                members.map(member => (
+                  <TeamMemberRow
+                    key={member.userId}
+                    member={member}
+                    syncEnabled={syncEnabled}
+                    editorsCanAdmin={editorsCanAdmin}
+                    signedInUserIsTeamAdmin={this.isSignedInUserTeamAdmin()}
+                  />
+                ))}
+            </tbody>
           </table>
         </div>
       </div>
@@ -211,15 +161,14 @@ function mapStateToProps(state) {
     members: getTeamMembers(state.team),
     searchMemberQuery: getSearchMemberQuery(state.team),
     editorsCanAdmin: config.editorsCanAdmin, // this makes the feature toggle mockable/controllable from tests,
+    signedInUser: contextSrv.user, // this makes the feature toggle mockable/controllable from tests,
   };
 }
 
 const mapDispatchToProps = {
   loadTeamMembers,
   addTeamMember,
-  removeTeamMember,
   setSearchMemberQuery,
-  updateTeamMember,
 };
 
 export default connect(
diff --git a/public/app/features/teams/__snapshots__/TeamMemberRow.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamMemberRow.test.tsx.snap
new file mode 100644
index 00000000000..3e7630d0618
--- /dev/null
+++ b/public/app/features/teams/__snapshots__/TeamMemberRow.test.tsx.snap
@@ -0,0 +1,191 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render when feature toggle editorsCanAdmin is turned off should not render permissions 1`] = `
+<tr
+  key="1"
+>
+  <td
+    className="width-4 text-center"
+  >
+    <img
+      className="filter-table__avatar"
+      src="some/url/"
+    />
+  </td>
+  <td>
+    testUser
+  </td>
+  <td>
+    test@test.com
+  </td>
+  <Component
+    featureToggle={false}
+  >
+    <td>
+      <div
+        className="gf-form"
+      >
+        <Select
+          autoFocus={false}
+          backspaceRemovesValue={true}
+          className="gf-form-select-box__control--menu-right"
+          isClearable={false}
+          isDisabled={false}
+          isLoading={false}
+          isMulti={false}
+          isSearchable={false}
+          maxMenuHeight={300}
+          onChange={[Function]}
+          openMenuOnFocus={false}
+          options={
+            Array [
+              Object {
+                "description": "Is team member",
+                "label": "Member",
+                "value": 0,
+              },
+              Object {
+                "description": "Can add/remove permissions, members and delete team.",
+                "label": "Admin",
+                "value": 4,
+              },
+            ]
+          }
+          value={
+            Object {
+              "description": "Is team member",
+              "label": "Member",
+              "value": 0,
+            }
+          }
+          width={null}
+        />
+      </div>
+    </td>
+  </Component>
+  <td
+    className="text-right"
+  >
+    <DeleteButton
+      disabled={false}
+      onConfirm={[Function]}
+    />
+  </td>
+</tr>
+`;
+
+exports[`Render when feature toggle editorsCanAdmin is turned on should render permissions select if user is team admin 1`] = `
+<tr
+  key="1"
+>
+  <td
+    className="width-4 text-center"
+  >
+    <img
+      className="filter-table__avatar"
+      src="some/url/"
+    />
+  </td>
+  <td>
+    testUser
+  </td>
+  <td>
+    test@test.com
+  </td>
+  <Component
+    featureToggle={true}
+  >
+    <td>
+      <div
+        className="gf-form"
+      >
+        <Select
+          autoFocus={false}
+          backspaceRemovesValue={true}
+          className="gf-form-select-box__control--menu-right"
+          isClearable={false}
+          isDisabled={false}
+          isLoading={false}
+          isMulti={false}
+          isSearchable={false}
+          maxMenuHeight={300}
+          onChange={[Function]}
+          openMenuOnFocus={false}
+          options={
+            Array [
+              Object {
+                "description": "Is team member",
+                "label": "Member",
+                "value": 0,
+              },
+              Object {
+                "description": "Can add/remove permissions, members and delete team.",
+                "label": "Admin",
+                "value": 4,
+              },
+            ]
+          }
+          value={
+            Object {
+              "description": "Is team member",
+              "label": "Member",
+              "value": 0,
+            }
+          }
+          width={null}
+        />
+      </div>
+    </td>
+  </Component>
+  <td
+    className="text-right"
+  >
+    <DeleteButton
+      disabled={false}
+      onConfirm={[Function]}
+    />
+  </td>
+</tr>
+`;
+
+exports[`Render when feature toggle editorsCanAdmin is turned on should render span and disable buttons if user is team member 1`] = `
+<tr
+  key="1"
+>
+  <td
+    className="width-4 text-center"
+  >
+    <img
+      className="filter-table__avatar"
+      src="some/url/"
+    />
+  </td>
+  <td>
+    testUser
+  </td>
+  <td>
+    test@test.com
+  </td>
+  <Component
+    featureToggle={true}
+  >
+    <td>
+      <div
+        className="gf-form"
+      >
+        <span>
+          Member
+        </span>
+      </div>
+    </td>
+  </Component>
+  <td
+    className="text-right"
+  >
+    <DeleteButton
+      disabled={true}
+      onConfirm={[Function]}
+    />
+  </td>
+</tr>
+`;
diff --git a/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
index da89d26d191..4d35a4a772b 100644
--- a/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
@@ -177,361 +177,106 @@ exports[`Render should render team members 1`] = `
         </tr>
       </thead>
       <tbody>
-        <tr
+        <TeamMemberRow
+          editorsCanAdmin={false}
           key="1"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-1
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={false}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
+          member={
+            Object {
+              "avatarUrl": "some/url/",
+              "email": "test@test.com",
+              "labels": Array [
+                "label 1",
+                "label 2",
+              ],
+              "login": "testUser-1",
+              "permission": 0,
+              "teamId": 1,
+              "userId": 1,
+            }
+          }
+          signedInUserIsTeamAdmin={true}
+          syncEnabled={false}
+        />
+        <TeamMemberRow
+          editorsCanAdmin={false}
           key="2"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-2
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={false}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
+          member={
+            Object {
+              "avatarUrl": "some/url/",
+              "email": "test@test.com",
+              "labels": Array [
+                "label 1",
+                "label 2",
+              ],
+              "login": "testUser-2",
+              "permission": 0,
+              "teamId": 1,
+              "userId": 2,
+            }
+          }
+          signedInUserIsTeamAdmin={true}
+          syncEnabled={false}
+        />
+        <TeamMemberRow
+          editorsCanAdmin={false}
           key="3"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-3
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={false}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
+          member={
+            Object {
+              "avatarUrl": "some/url/",
+              "email": "test@test.com",
+              "labels": Array [
+                "label 1",
+                "label 2",
+              ],
+              "login": "testUser-3",
+              "permission": 0,
+              "teamId": 1,
+              "userId": 3,
+            }
+          }
+          signedInUserIsTeamAdmin={true}
+          syncEnabled={false}
+        />
+        <TeamMemberRow
+          editorsCanAdmin={false}
           key="4"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-4
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={false}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
+          member={
+            Object {
+              "avatarUrl": "some/url/",
+              "email": "test@test.com",
+              "labels": Array [
+                "label 1",
+                "label 2",
+              ],
+              "login": "testUser-4",
+              "permission": 0,
+              "teamId": 1,
+              "userId": 4,
+            }
+          }
+          signedInUserIsTeamAdmin={true}
+          syncEnabled={false}
+        />
+        <TeamMemberRow
+          editorsCanAdmin={false}
           key="5"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-5
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={false}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Can add/remove permissions, members and delete team.",
-                      "label": "Admin",
-                      "value": 4,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
+          member={
+            Object {
+              "avatarUrl": "some/url/",
+              "email": "test@test.com",
+              "labels": Array [
+                "label 1",
+                "label 2",
+              ],
+              "login": "testUser-5",
+              "permission": 4,
+              "teamId": 1,
+              "userId": 5,
+            }
+          }
+          signedInUserIsTeamAdmin={true}
+          syncEnabled={false}
+        />
       </tbody>
     </table>
   </div>
@@ -625,1909 +370,106 @@ exports[`Render should render team members when sync enabled 1`] = `
         </tr>
       </thead>
       <tbody>
-        <tr
+        <TeamMemberRow
+          editorsCanAdmin={false}
           key="1"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-1
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={false}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td>
-            <TagBadge
-              count={0}
-              key="label 1"
-              label="label 1"
-              onClick={[Function]}
-              removeIcon={false}
-            />
-            <TagBadge
-              count={0}
-              key="label 2"
-              label="label 2"
-              onClick={[Function]}
-              removeIcon={false}
-            />
-          </td>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="2"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-2
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={false}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td>
-            <TagBadge
-              count={0}
-              key="label 1"
-              label="label 1"
-              onClick={[Function]}
-              removeIcon={false}
-            />
-            <TagBadge
-              count={0}
-              key="label 2"
-              label="label 2"
-              onClick={[Function]}
-              removeIcon={false}
-            />
-          </td>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="3"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-3
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={false}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td>
-            <TagBadge
-              count={0}
-              key="label 1"
-              label="label 1"
-              onClick={[Function]}
-              removeIcon={false}
-            />
-            <TagBadge
-              count={0}
-              key="label 2"
-              label="label 2"
-              onClick={[Function]}
-              removeIcon={false}
-            />
-          </td>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="4"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-4
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={false}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td>
-            <TagBadge
-              count={0}
-              key="label 1"
-              label="label 1"
-              onClick={[Function]}
-              removeIcon={false}
-            />
-            <TagBadge
-              count={0}
-              key="label 2"
-              label="label 2"
-              onClick={[Function]}
-              removeIcon={false}
-            />
-          </td>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="5"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-5
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={false}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Can add/remove permissions, members and delete team.",
-                      "label": "Admin",
-                      "value": 4,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td>
-            <TagBadge
-              count={0}
-              key="label 1"
-              label="label 1"
-              onClick={[Function]}
-              removeIcon={false}
-            />
-            <TagBadge
-              count={0}
-              key="label 2"
-              label="label 2"
-              onClick={[Function]}
-              removeIcon={false}
-            />
-          </td>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-`;
-
-exports[`Render when feature toggle editorsCanAdmin is turned on should render permissions select if user is Grafana Admin 1`] = `
-<div>
-  <div
-    className="page-action-bar"
-  >
-    <div
-      className="gf-form gf-form--grow"
-    >
-      <ForwardRef
-        inputClassName="gf-form-input"
-        labelClassName="gf-form--has-input-icon gf-form--grow"
-        onChange={[Function]}
-        placeholder="Search members"
-        value=""
-      />
-    </div>
-    <div
-      className="page-action-bar__spacer"
-    />
-    <button
-      className="btn btn-primary pull-right"
-      disabled={false}
-      onClick={[Function]}
-    >
-      Add member
-    </button>
-  </div>
-  <Component
-    in={false}
-  >
-    <div
-      className="cta-form"
-    >
-      <button
-        className="cta-form__close btn btn-transparent"
-        onClick={[Function]}
-      >
-        <i
-          className="fa fa-close"
-        />
-      </button>
-      <h5>
-        Add team member
-      </h5>
-      <div
-        className="gf-form-inline"
-      >
-        <UserPicker
-          className="min-width-30"
-          onSelected={[Function]}
-        />
-      </div>
-    </div>
-  </Component>
-  <div
-    className="admin-list-table"
-  >
-    <table
-      className="filter-table filter-table--hover form-inline"
-    >
-      <thead>
-        <tr>
-          <th />
-          <th>
-            Name
-          </th>
-          <th>
-            Email
-          </th>
-          <Component
-            featureToggle={true}
-          >
-            <th>
-              Permission
-            </th>
-          </Component>
-          <th
-            style={
-              Object {
-                "width": "1%",
-              }
+          member={
+            Object {
+              "avatarUrl": "some/url/",
+              "email": "test@test.com",
+              "labels": Array [
+                "label 1",
+                "label 2",
+              ],
+              "login": "testUser-1",
+              "permission": 0,
+              "teamId": 1,
+              "userId": 1,
             }
-          />
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          key="1"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-1
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
+          }
+          signedInUserIsTeamAdmin={true}
+          syncEnabled={true}
+        />
+        <TeamMemberRow
+          editorsCanAdmin={false}
           key="2"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-2
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="3"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-3
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="4"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-4
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="5"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-5
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Can add/remove permissions, members and delete team.",
-                      "label": "Admin",
-                      "value": 4,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-`;
-
-exports[`Render when feature toggle editorsCanAdmin is turned on should render permissions select if user is Org Admin 1`] = `
-<div>
-  <div
-    className="page-action-bar"
-  >
-    <div
-      className="gf-form gf-form--grow"
-    >
-      <ForwardRef
-        inputClassName="gf-form-input"
-        labelClassName="gf-form--has-input-icon gf-form--grow"
-        onChange={[Function]}
-        placeholder="Search members"
-        value=""
-      />
-    </div>
-    <div
-      className="page-action-bar__spacer"
-    />
-    <button
-      className="btn btn-primary pull-right"
-      disabled={false}
-      onClick={[Function]}
-    >
-      Add member
-    </button>
-  </div>
-  <Component
-    in={false}
-  >
-    <div
-      className="cta-form"
-    >
-      <button
-        className="cta-form__close btn btn-transparent"
-        onClick={[Function]}
-      >
-        <i
-          className="fa fa-close"
-        />
-      </button>
-      <h5>
-        Add team member
-      </h5>
-      <div
-        className="gf-form-inline"
-      >
-        <UserPicker
-          className="min-width-30"
-          onSelected={[Function]}
-        />
-      </div>
-    </div>
-  </Component>
-  <div
-    className="admin-list-table"
-  >
-    <table
-      className="filter-table filter-table--hover form-inline"
-    >
-      <thead>
-        <tr>
-          <th />
-          <th>
-            Name
-          </th>
-          <th>
-            Email
-          </th>
-          <Component
-            featureToggle={true}
-          >
-            <th>
-              Permission
-            </th>
-          </Component>
-          <th
-            style={
-              Object {
-                "width": "1%",
-              }
+          member={
+            Object {
+              "avatarUrl": "some/url/",
+              "email": "test@test.com",
+              "labels": Array [
+                "label 1",
+                "label 2",
+              ],
+              "login": "testUser-2",
+              "permission": 0,
+              "teamId": 1,
+              "userId": 2,
             }
-          />
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          key="1"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-1
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="2"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-2
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
+          }
+          signedInUserIsTeamAdmin={true}
+          syncEnabled={true}
+        />
+        <TeamMemberRow
+          editorsCanAdmin={false}
           key="3"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-3
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="4"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-4
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="5"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-5
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  isLoading={false}
-                  isMulti={false}
-                  isSearchable={false}
-                  maxMenuHeight={300}
-                  onChange={[Function]}
-                  openMenuOnFocus={false}
-                  options={
-                    Array [
-                      Object {
-                        "description": "Is team member",
-                        "label": "Member",
-                        "value": 0,
-                      },
-                      Object {
-                        "description": "Can add/remove permissions, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Can add/remove permissions, members and delete team.",
-                      "label": "Admin",
-                      "value": 4,
-                    }
-                  }
-                  width={null}
-                />
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={false}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-`;
-
-exports[`Render when feature toggle editorsCanAdmin is turned on should render permissions select if user is team admin 1`] = `
-<div>
-  <div
-    className="page-action-bar"
-  >
-    <div
-      className="gf-form gf-form--grow"
-    >
-      <ForwardRef
-        inputClassName="gf-form-input"
-        labelClassName="gf-form--has-input-icon gf-form--grow"
-        onChange={[Function]}
-        placeholder="Search members"
-        value=""
-      />
-    </div>
-    <div
-      className="page-action-bar__spacer"
-    />
-    <button
-      className="btn btn-primary pull-right"
-      disabled={true}
-      onClick={[Function]}
-    >
-      Add member
-    </button>
-  </div>
-  <Component
-    in={false}
-  >
-    <div
-      className="cta-form"
-    >
-      <button
-        className="cta-form__close btn btn-transparent"
-        onClick={[Function]}
-      >
-        <i
-          className="fa fa-close"
-        />
-      </button>
-      <h5>
-        Add team member
-      </h5>
-      <div
-        className="gf-form-inline"
-      >
-        <UserPicker
-          className="min-width-30"
-          onSelected={[Function]}
-        />
-      </div>
-    </div>
-  </Component>
-  <div
-    className="admin-list-table"
-  >
-    <table
-      className="filter-table filter-table--hover form-inline"
-    >
-      <thead>
-        <tr>
-          <th />
-          <th>
-            Name
-          </th>
-          <th>
-            Email
-          </th>
-          <Component
-            featureToggle={true}
-          >
-            <th>
-              Permission
-            </th>
-          </Component>
-          <th
-            style={
-              Object {
-                "width": "1%",
-              }
+          member={
+            Object {
+              "avatarUrl": "some/url/",
+              "email": "test@test.com",
+              "labels": Array [
+                "label 1",
+                "label 2",
+              ],
+              "login": "testUser-3",
+              "permission": 0,
+              "teamId": 1,
+              "userId": 3,
             }
-          />
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          key="1"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-1
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <span>
-                  Admin
-                </span>
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={true}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="2"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-2
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <span>
-                  Member
-                </span>
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={true}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="3"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-3
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <span>
-                  Member
-                </span>
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={true}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
+          }
+          signedInUserIsTeamAdmin={true}
+          syncEnabled={true}
+        />
+        <TeamMemberRow
+          editorsCanAdmin={false}
           key="4"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-4
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <span>
-                  Member
-                </span>
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={true}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="5"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-5
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <span>
-                  Member
-                </span>
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={true}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-`;
-
-exports[`Render when feature toggle editorsCanAdmin is turned on should render span and disable buttons if user is team member 1`] = `
-<div>
-  <div
-    className="page-action-bar"
-  >
-    <div
-      className="gf-form gf-form--grow"
-    >
-      <ForwardRef
-        inputClassName="gf-form-input"
-        labelClassName="gf-form--has-input-icon gf-form--grow"
-        onChange={[Function]}
-        placeholder="Search members"
-        value=""
-      />
-    </div>
-    <div
-      className="page-action-bar__spacer"
-    />
-    <button
-      className="btn btn-primary pull-right"
-      disabled={true}
-      onClick={[Function]}
-    >
-      Add member
-    </button>
-  </div>
-  <Component
-    in={false}
-  >
-    <div
-      className="cta-form"
-    >
-      <button
-        className="cta-form__close btn btn-transparent"
-        onClick={[Function]}
-      >
-        <i
-          className="fa fa-close"
-        />
-      </button>
-      <h5>
-        Add team member
-      </h5>
-      <div
-        className="gf-form-inline"
-      >
-        <UserPicker
-          className="min-width-30"
-          onSelected={[Function]}
-        />
-      </div>
-    </div>
-  </Component>
-  <div
-    className="admin-list-table"
-  >
-    <table
-      className="filter-table filter-table--hover form-inline"
-    >
-      <thead>
-        <tr>
-          <th />
-          <th>
-            Name
-          </th>
-          <th>
-            Email
-          </th>
-          <Component
-            featureToggle={true}
-          >
-            <th>
-              Permission
-            </th>
-          </Component>
-          <th
-            style={
-              Object {
-                "width": "1%",
-              }
+          member={
+            Object {
+              "avatarUrl": "some/url/",
+              "email": "test@test.com",
+              "labels": Array [
+                "label 1",
+                "label 2",
+              ],
+              "login": "testUser-4",
+              "permission": 0,
+              "teamId": 1,
+              "userId": 4,
             }
-          />
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          key="1"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-1
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <span>
-                  Member
-                </span>
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={true}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="2"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-2
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <span>
-                  Member
-                </span>
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={true}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="3"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-3
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <span>
-                  Member
-                </span>
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={true}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="4"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-4
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <span>
-                  Member
-                </span>
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={true}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
+          }
+          signedInUserIsTeamAdmin={true}
+          syncEnabled={true}
+        />
+        <TeamMemberRow
+          editorsCanAdmin={false}
           key="5"
-        >
-          <td
-            className="width-4 text-center"
-          >
-            <img
-              className="filter-table__avatar"
-              src="some/url/"
-            />
-          </td>
-          <td>
-            testUser-5
-          </td>
-          <td>
-            test@test.com
-          </td>
-          <Component
-            featureToggle={true}
-          >
-            <td>
-              <div
-                className="gf-form"
-              >
-                <span>
-                  Admin
-                </span>
-              </div>
-            </td>
-          </Component>
-          <td
-            className="text-right"
-          >
-            <DeleteButton
-              disabled={true}
-              onConfirm={[Function]}
-            />
-          </td>
-        </tr>
+          member={
+            Object {
+              "avatarUrl": "some/url/",
+              "email": "test@test.com",
+              "labels": Array [
+                "label 1",
+                "label 2",
+              ],
+              "login": "testUser-5",
+              "permission": 4,
+              "teamId": 1,
+              "userId": 5,
+            }
+          }
+          signedInUserIsTeamAdmin={true}
+          syncEnabled={true}
+        />
       </tbody>
     </table>
   </div>