From a188ceacbc7998d897c2a0b3d6110499a221de47 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Tue, 2 Oct 2018 11:04:55 +0200
Subject: [PATCH] invitees

---
 .../OrgActionBar/OrgActionBar.test.tsx        |   1 -
 .../app/features/users/InviteesTable.test.tsx |  32 +
 public/app/features/users/InviteesTable.tsx   |  11 +-
 .../features/users/UsersActionBar.test.tsx    |  51 ++
 .../app/features/users/UsersListPage.test.tsx |   6 +-
 .../app/features/users/__mocks__/userMocks.ts |  25 +
 .../__snapshots__/InviteesTable.test.tsx.snap | 318 +++++++
 .../UsersActionBar.test.tsx.snap              | 141 +++
 .../__snapshots__/UsersListPage.test.tsx.snap |  12 +-
 .../__snapshots__/UsersTable.test.tsx.snap    | 814 +++++++++---------
 10 files changed, 987 insertions(+), 424 deletions(-)
 create mode 100644 public/app/features/users/InviteesTable.test.tsx
 create mode 100644 public/app/features/users/UsersActionBar.test.tsx
 create mode 100644 public/app/features/users/__snapshots__/InviteesTable.test.tsx.snap
 create mode 100644 public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap

diff --git a/public/app/core/components/OrgActionBar/OrgActionBar.test.tsx b/public/app/core/components/OrgActionBar/OrgActionBar.test.tsx
index d1edeeaa779..6b4f7d24d30 100644
--- a/public/app/core/components/OrgActionBar/OrgActionBar.test.tsx
+++ b/public/app/core/components/OrgActionBar/OrgActionBar.test.tsx
@@ -5,7 +5,6 @@ import OrgActionBar, { Props } from './OrgActionBar';
 const setup = (propOverrides?: object) => {
   const props: Props = {
     searchQuery: '',
-    showLayoutMode: true,
     setSearchQuery: jest.fn(),
     linkButton: { href: 'some/url', title: 'test' },
   };
diff --git a/public/app/features/users/InviteesTable.test.tsx b/public/app/features/users/InviteesTable.test.tsx
new file mode 100644
index 00000000000..9aae4d765b7
--- /dev/null
+++ b/public/app/features/users/InviteesTable.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import InviteesTable, { Props } from './InviteesTable';
+import { Invitee } from 'app/types';
+import { getMockInvitees } from './__mocks__/userMocks';
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    invitees: [] as Invitee[],
+    revokeInvite: jest.fn(),
+  };
+
+  Object.assign(props, propOverrides);
+
+  return shallow(<InviteesTable {...props} />);
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const wrapper = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render invitees', () => {
+    const wrapper = setup({
+      invitees: getMockInvitees(5),
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/app/features/users/InviteesTable.tsx b/public/app/features/users/InviteesTable.tsx
index 82c02e607de..3157bf4fe38 100644
--- a/public/app/features/users/InviteesTable.tsx
+++ b/public/app/features/users/InviteesTable.tsx
@@ -7,10 +7,10 @@ export interface Props {
 }
 
 export default class InviteesTable extends PureComponent<Props> {
-  private copyRef = createRef<HTMLTextAreaElement>();
+  private copyUrlRef = createRef<HTMLTextAreaElement>();
 
   copyToClipboard = () => {
-    const node = this.copyRef.current;
+    const node = this.copyUrlRef.current;
 
     if (node) {
       node.select();
@@ -39,7 +39,12 @@ export default class InviteesTable extends PureComponent<Props> {
                 <td>{invitee.name}</td>
                 <td className="text-right">
                   <button className="btn btn-inverse btn-mini" onClick={this.copyToClipboard}>
-                    <textarea readOnly={true} value={invitee.url} style={{ display: 'none' }} ref={this.copyRef} />
+                    <textarea
+                      readOnly={true}
+                      value={invitee.url}
+                      style={{ position: 'absolute', right: -1000 }}
+                      ref={this.copyUrlRef}
+                    />
                     <i className="fa fa-clipboard" /> Copy Invite
                   </button>
                   &nbsp;
diff --git a/public/app/features/users/UsersActionBar.test.tsx b/public/app/features/users/UsersActionBar.test.tsx
new file mode 100644
index 00000000000..914328ebecc
--- /dev/null
+++ b/public/app/features/users/UsersActionBar.test.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { UsersActionBar, Props } from './UsersActionBar';
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    searchQuery: '',
+    setUsersSearchQuery: jest.fn(),
+    showInvites: false,
+    pendingInvitesCount: 0,
+    canInvite: false,
+    externalUserMngLinkUrl: '',
+    externalUserMngLinkName: '',
+  };
+
+  Object.assign(props, propOverrides);
+
+  return shallow(<UsersActionBar {...props} />);
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const wrapper = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render pending invites button', () => {
+    const wrapper = setup({
+      pendingInvitesCount: 5,
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should show invite button', () => {
+    const wrapper = setup({
+      canInvite: true,
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should show external user management button', () => {
+    const wrapper = setup({
+      externalUserMngLinkUrl: 'some/url',
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/app/features/users/UsersListPage.test.tsx b/public/app/features/users/UsersListPage.test.tsx
index 8ba8ec4b06c..d5dd1295b60 100644
--- a/public/app/features/users/UsersListPage.test.tsx
+++ b/public/app/features/users/UsersListPage.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { UsersListPage, Props } from './UsersListPage';
-import { NavModel, User } from 'app/types';
+import { Invitee, NavModel, User } from 'app/types';
 import { getMockUser } from './__mocks__/userMocks';
 import appEvents from '../../core/app_events';
 
@@ -13,7 +13,11 @@ const setup = (propOverrides?: object) => {
   const props: Props = {
     navModel: {} as NavModel,
     users: [] as User[],
+    invitees: [] as Invitee[],
     searchQuery: '',
+    externalUserMngInfo: '',
+    revokeInvite: jest.fn(),
+    loadInvitees: jest.fn(),
     loadUsers: jest.fn(),
     updateUser: jest.fn(),
     removeUser: jest.fn(),
diff --git a/public/app/features/users/__mocks__/userMocks.ts b/public/app/features/users/__mocks__/userMocks.ts
index ef7789458d0..ce299484c13 100644
--- a/public/app/features/users/__mocks__/userMocks.ts
+++ b/public/app/features/users/__mocks__/userMocks.ts
@@ -29,3 +29,28 @@ export const getMockUser = () => {
     userId: 2,
   };
 };
+
+export const getMockInvitees = (amount: number) => {
+  const invitees = [];
+
+  for (let i = 0; i <= amount; i++) {
+    invitees.push({
+      code: `asdfasdfsadf-${i}`,
+      createdOn: '2018-10-02',
+      email: `invitee-${i}@test.com`,
+      emailSent: true,
+      emailSentOn: '2018-10-02',
+      id: i,
+      invitedByEmail: 'admin@grafana.com',
+      invitedByLogin: 'admin',
+      invitedByName: 'admin',
+      name: `invitee-${i}`,
+      orgId: 1,
+      role: 'viewer',
+      status: 'not accepted',
+      url: `localhost/invite/$${i}`,
+    });
+  }
+
+  return invitees;
+};
diff --git a/public/app/features/users/__snapshots__/InviteesTable.test.tsx.snap b/public/app/features/users/__snapshots__/InviteesTable.test.tsx.snap
new file mode 100644
index 00000000000..57622bbd9eb
--- /dev/null
+++ b/public/app/features/users/__snapshots__/InviteesTable.test.tsx.snap
@@ -0,0 +1,318 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<table
+  className="filter-table form-inline"
+>
+  <thead>
+    <tr>
+      <th>
+        Email
+      </th>
+      <th>
+        Name
+      </th>
+      <th />
+      <th
+        style={
+          Object {
+            "width": "34px",
+          }
+        }
+      />
+    </tr>
+  </thead>
+  <tbody />
+</table>
+`;
+
+exports[`Render should render invitees 1`] = `
+<table
+  className="filter-table form-inline"
+>
+  <thead>
+    <tr>
+      <th>
+        Email
+      </th>
+      <th>
+        Name
+      </th>
+      <th />
+      <th
+        style={
+          Object {
+            "width": "34px",
+          }
+        }
+      />
+    </tr>
+  </thead>
+  <tbody>
+    <tr
+      key="0-0"
+    >
+      <td>
+        invitee-0@test.com
+      </td>
+      <td>
+        invitee-0
+      </td>
+      <td
+        className="text-right"
+      >
+        <button
+          className="btn btn-inverse btn-mini"
+          onClick={[Function]}
+        >
+          <textarea
+            readOnly={true}
+            style={
+              Object {
+                "position": "absolute",
+                "right": -1000,
+              }
+            }
+            value="localhost/invite/$0"
+          />
+          <i
+            className="fa fa-clipboard"
+          />
+           Copy Invite
+        </button>
+         
+      </td>
+      <td>
+        <button
+          className="btn btn-danger btn-mini"
+          onClick={[Function]}
+        >
+          <i
+            className="fa fa-remove"
+          />
+        </button>
+      </td>
+    </tr>
+    <tr
+      key="1-1"
+    >
+      <td>
+        invitee-1@test.com
+      </td>
+      <td>
+        invitee-1
+      </td>
+      <td
+        className="text-right"
+      >
+        <button
+          className="btn btn-inverse btn-mini"
+          onClick={[Function]}
+        >
+          <textarea
+            readOnly={true}
+            style={
+              Object {
+                "position": "absolute",
+                "right": -1000,
+              }
+            }
+            value="localhost/invite/$1"
+          />
+          <i
+            className="fa fa-clipboard"
+          />
+           Copy Invite
+        </button>
+         
+      </td>
+      <td>
+        <button
+          className="btn btn-danger btn-mini"
+          onClick={[Function]}
+        >
+          <i
+            className="fa fa-remove"
+          />
+        </button>
+      </td>
+    </tr>
+    <tr
+      key="2-2"
+    >
+      <td>
+        invitee-2@test.com
+      </td>
+      <td>
+        invitee-2
+      </td>
+      <td
+        className="text-right"
+      >
+        <button
+          className="btn btn-inverse btn-mini"
+          onClick={[Function]}
+        >
+          <textarea
+            readOnly={true}
+            style={
+              Object {
+                "position": "absolute",
+                "right": -1000,
+              }
+            }
+            value="localhost/invite/$2"
+          />
+          <i
+            className="fa fa-clipboard"
+          />
+           Copy Invite
+        </button>
+         
+      </td>
+      <td>
+        <button
+          className="btn btn-danger btn-mini"
+          onClick={[Function]}
+        >
+          <i
+            className="fa fa-remove"
+          />
+        </button>
+      </td>
+    </tr>
+    <tr
+      key="3-3"
+    >
+      <td>
+        invitee-3@test.com
+      </td>
+      <td>
+        invitee-3
+      </td>
+      <td
+        className="text-right"
+      >
+        <button
+          className="btn btn-inverse btn-mini"
+          onClick={[Function]}
+        >
+          <textarea
+            readOnly={true}
+            style={
+              Object {
+                "position": "absolute",
+                "right": -1000,
+              }
+            }
+            value="localhost/invite/$3"
+          />
+          <i
+            className="fa fa-clipboard"
+          />
+           Copy Invite
+        </button>
+         
+      </td>
+      <td>
+        <button
+          className="btn btn-danger btn-mini"
+          onClick={[Function]}
+        >
+          <i
+            className="fa fa-remove"
+          />
+        </button>
+      </td>
+    </tr>
+    <tr
+      key="4-4"
+    >
+      <td>
+        invitee-4@test.com
+      </td>
+      <td>
+        invitee-4
+      </td>
+      <td
+        className="text-right"
+      >
+        <button
+          className="btn btn-inverse btn-mini"
+          onClick={[Function]}
+        >
+          <textarea
+            readOnly={true}
+            style={
+              Object {
+                "position": "absolute",
+                "right": -1000,
+              }
+            }
+            value="localhost/invite/$4"
+          />
+          <i
+            className="fa fa-clipboard"
+          />
+           Copy Invite
+        </button>
+         
+      </td>
+      <td>
+        <button
+          className="btn btn-danger btn-mini"
+          onClick={[Function]}
+        >
+          <i
+            className="fa fa-remove"
+          />
+        </button>
+      </td>
+    </tr>
+    <tr
+      key="5-5"
+    >
+      <td>
+        invitee-5@test.com
+      </td>
+      <td>
+        invitee-5
+      </td>
+      <td
+        className="text-right"
+      >
+        <button
+          className="btn btn-inverse btn-mini"
+          onClick={[Function]}
+        >
+          <textarea
+            readOnly={true}
+            style={
+              Object {
+                "position": "absolute",
+                "right": -1000,
+              }
+            }
+            value="localhost/invite/$5"
+          />
+          <i
+            className="fa fa-clipboard"
+          />
+           Copy Invite
+        </button>
+         
+      </td>
+      <td>
+        <button
+          className="btn btn-danger btn-mini"
+          onClick={[Function]}
+        >
+          <i
+            className="fa fa-remove"
+          />
+        </button>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
diff --git a/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap b/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap
new file mode 100644
index 00000000000..a3a2d653539
--- /dev/null
+++ b/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap
@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<div
+  className="page-action-bar"
+>
+  <div
+    className="gf-form gf-form--grow"
+  >
+    <label
+      className="gf-form--has-input-icon"
+    >
+      <input
+        className="gf-form-input width-20"
+        onChange={[Function]}
+        placeholder="Filter by name or type"
+        type="text"
+        value=""
+      />
+      <i
+        className="gf-form-input-icon fa fa-search"
+      />
+    </label>
+    <div
+      className="page-action-bar__spacer"
+    />
+  </div>
+</div>
+`;
+
+exports[`Render should render pending invites button 1`] = `
+<div
+  className="page-action-bar"
+>
+  <div
+    className="gf-form gf-form--grow"
+  >
+    <label
+      className="gf-form--has-input-icon"
+    >
+      <input
+        className="gf-form-input width-20"
+        onChange={[Function]}
+        placeholder="Filter by name or type"
+        type="text"
+        value=""
+      />
+      <i
+        className="gf-form-input-icon fa fa-search"
+      />
+    </label>
+    <div
+      className="page-action-bar__spacer"
+    />
+    <button
+      className="btn btn-inverse"
+      onClick={false}
+    >
+      Pending Invites (
+      5
+      )
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Render should show external user management button 1`] = `
+<div
+  className="page-action-bar"
+>
+  <div
+    className="gf-form gf-form--grow"
+  >
+    <label
+      className="gf-form--has-input-icon"
+    >
+      <input
+        className="gf-form-input width-20"
+        onChange={[Function]}
+        placeholder="Filter by name or type"
+        type="text"
+        value=""
+      />
+      <i
+        className="gf-form-input-icon fa fa-search"
+      />
+    </label>
+    <div
+      className="page-action-bar__spacer"
+    />
+    <a
+      className="btn btn-success"
+      href="some/url"
+      target="_blank"
+    >
+      <i
+        className="fa fa-external-link-square"
+      />
+    </a>
+  </div>
+</div>
+`;
+
+exports[`Render should show invite button 1`] = `
+<div
+  className="page-action-bar"
+>
+  <div
+    className="gf-form gf-form--grow"
+  >
+    <label
+      className="gf-form--has-input-icon"
+    >
+      <input
+        className="gf-form-input width-20"
+        onChange={[Function]}
+        placeholder="Filter by name or type"
+        type="text"
+        value=""
+      />
+      <i
+        className="gf-form-input-icon fa fa-search"
+      />
+    </label>
+    <div
+      className="page-action-bar__spacer"
+    />
+    <a
+      className="btn btn-success"
+      href="org/users/invite"
+    >
+      <i
+        className="fa fa-plus"
+      />
+      <span>
+        Invite
+      </span>
+    </a>
+  </div>
+</div>
+`;
diff --git a/public/app/features/users/__snapshots__/UsersListPage.test.tsx.snap b/public/app/features/users/__snapshots__/UsersListPage.test.tsx.snap
index 689e7bd007b..da57ea05e0c 100644
--- a/public/app/features/users/__snapshots__/UsersListPage.test.tsx.snap
+++ b/public/app/features/users/__snapshots__/UsersListPage.test.tsx.snap
@@ -8,16 +8,8 @@ exports[`Render should render component 1`] = `
   <div
     className="page-container page-body"
   >
-    <OrgActionBar
-      linkButton={
-        Object {
-          "href": "/org/users/add",
-          "title": "Add user",
-        }
-      }
-      searchQuery=""
-      setSearchQuery={[MockFunction]}
-      showLayoutMode={false}
+    <Connect(UsersActionBar)
+      showInvites={[Function]}
     />
     <UsersTable
       onRemoveUser={[Function]}
diff --git a/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap b/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
index 9dace6a730f..efbc7ae72cb 100644
--- a/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
+++ b/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
@@ -1,448 +1,444 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Render should render component 1`] = `
-<div>
-  <table
-    className="filter-table form-inline"
-  >
-    <thead>
-      <tr>
-        <th />
-        <th>
-          Login
-        </th>
-        <th>
-          Email
-        </th>
-        <th>
-          Seen
-        </th>
-        <th>
-          Role
-        </th>
-        <th
-          style={
-            Object {
-              "width": "34px",
-            }
+<table
+  className="filter-table form-inline"
+>
+  <thead>
+    <tr>
+      <th />
+      <th>
+        Login
+      </th>
+      <th>
+        Email
+      </th>
+      <th>
+        Seen
+      </th>
+      <th>
+        Role
+      </th>
+      <th
+        style={
+          Object {
+            "width": "34px",
           }
-        />
-      </tr>
-    </thead>
-    <tbody />
-  </table>
-</div>
+        }
+      />
+    </tr>
+  </thead>
+  <tbody />
+</table>
 `;
 
 exports[`Render should render users table 1`] = `
-<div>
-  <table
-    className="filter-table form-inline"
-  >
-    <thead>
-      <tr>
-        <th />
-        <th>
-          Login
-        </th>
-        <th>
-          Email
-        </th>
-        <th>
-          Seen
-        </th>
-        <th>
-          Role
-        </th>
-        <th
-          style={
-            Object {
-              "width": "34px",
-            }
+<table
+  className="filter-table form-inline"
+>
+  <thead>
+    <tr>
+      <th />
+      <th>
+        Login
+      </th>
+      <th>
+        Email
+      </th>
+      <th>
+        Seen
+      </th>
+      <th>
+        Role
+      </th>
+      <th
+        style={
+          Object {
+            "width": "34px",
           }
+        }
+      />
+    </tr>
+  </thead>
+  <tbody>
+    <tr
+      key="0-0"
+    >
+      <td
+        className="width-4 text-center"
+      >
+        <img
+          className="filter-table__avatar"
+          src="url/to/avatar"
         />
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        key="0-0"
-      >
-        <td
-          className="width-4 text-center"
+      </td>
+      <td>
+        user-0
+      </td>
+      <td>
+        <span
+          className="ellipsis"
         >
-          <img
-            className="filter-table__avatar"
-            src="url/to/avatar"
-          />
-        </td>
-        <td>
-          user-0
-        </td>
-        <td>
-          <span
-            className="ellipsis"
+          user-0@test.com
+        </span>
+      </td>
+      <td />
+      <td>
+        <div
+          className="gf-form-select-wrapper width-12"
+        >
+          <select
+            className="gf-form-input"
+            onChange={[Function]}
+            value="Admin"
           >
-            user-0@test.com
-          </span>
-        </td>
-        <td />
-        <td>
-          <div
-            className="gf-form-select-wrapper width-12"
-          >
-            <select
-              className="gf-form-input"
-              onChange={[Function]}
+            <option
+              key="Viewer-0"
+              value="Viewer"
+            >
+              Viewer
+            </option>
+            <option
+              key="Editor-1"
+              value="Editor"
+            >
+              Editor
+            </option>
+            <option
+              key="Admin-2"
               value="Admin"
             >
-              <option
-                key="Viewer-0"
-                value="Viewer"
-              >
-                Viewer
-              </option>
-              <option
-                key="Editor-1"
-                value="Editor"
-              >
-                Editor
-              </option>
-              <option
-                key="Admin-2"
-                value="Admin"
-              >
-                Admin
-              </option>
-            </select>
-          </div>
-        </td>
-        <td>
-          <div
-            className="btn btn-danger btn-mini"
-            onClick={[Function]}
-          >
-            <i
-              className="fa fa-remove"
-            />
-          </div>
-        </td>
-      </tr>
-      <tr
-        key="1-1"
-      >
-        <td
-          className="width-4 text-center"
+              Admin
+            </option>
+          </select>
+        </div>
+      </td>
+      <td>
+        <div
+          className="btn btn-danger btn-mini"
+          onClick={[Function]}
         >
-          <img
-            className="filter-table__avatar"
-            src="url/to/avatar"
+          <i
+            className="fa fa-remove"
           />
-        </td>
-        <td>
-          user-1
-        </td>
-        <td>
-          <span
-            className="ellipsis"
+        </div>
+      </td>
+    </tr>
+    <tr
+      key="1-1"
+    >
+      <td
+        className="width-4 text-center"
+      >
+        <img
+          className="filter-table__avatar"
+          src="url/to/avatar"
+        />
+      </td>
+      <td>
+        user-1
+      </td>
+      <td>
+        <span
+          className="ellipsis"
+        >
+          user-1@test.com
+        </span>
+      </td>
+      <td />
+      <td>
+        <div
+          className="gf-form-select-wrapper width-12"
+        >
+          <select
+            className="gf-form-input"
+            onChange={[Function]}
+            value="Admin"
           >
-            user-1@test.com
-          </span>
-        </td>
-        <td />
-        <td>
-          <div
-            className="gf-form-select-wrapper width-12"
-          >
-            <select
-              className="gf-form-input"
-              onChange={[Function]}
+            <option
+              key="Viewer-0"
+              value="Viewer"
+            >
+              Viewer
+            </option>
+            <option
+              key="Editor-1"
+              value="Editor"
+            >
+              Editor
+            </option>
+            <option
+              key="Admin-2"
               value="Admin"
             >
-              <option
-                key="Viewer-0"
-                value="Viewer"
-              >
-                Viewer
-              </option>
-              <option
-                key="Editor-1"
-                value="Editor"
-              >
-                Editor
-              </option>
-              <option
-                key="Admin-2"
-                value="Admin"
-              >
-                Admin
-              </option>
-            </select>
-          </div>
-        </td>
-        <td>
-          <div
-            className="btn btn-danger btn-mini"
-            onClick={[Function]}
-          >
-            <i
-              className="fa fa-remove"
-            />
-          </div>
-        </td>
-      </tr>
-      <tr
-        key="2-2"
-      >
-        <td
-          className="width-4 text-center"
+              Admin
+            </option>
+          </select>
+        </div>
+      </td>
+      <td>
+        <div
+          className="btn btn-danger btn-mini"
+          onClick={[Function]}
         >
-          <img
-            className="filter-table__avatar"
-            src="url/to/avatar"
+          <i
+            className="fa fa-remove"
           />
-        </td>
-        <td>
-          user-2
-        </td>
-        <td>
-          <span
-            className="ellipsis"
+        </div>
+      </td>
+    </tr>
+    <tr
+      key="2-2"
+    >
+      <td
+        className="width-4 text-center"
+      >
+        <img
+          className="filter-table__avatar"
+          src="url/to/avatar"
+        />
+      </td>
+      <td>
+        user-2
+      </td>
+      <td>
+        <span
+          className="ellipsis"
+        >
+          user-2@test.com
+        </span>
+      </td>
+      <td />
+      <td>
+        <div
+          className="gf-form-select-wrapper width-12"
+        >
+          <select
+            className="gf-form-input"
+            onChange={[Function]}
+            value="Admin"
           >
-            user-2@test.com
-          </span>
-        </td>
-        <td />
-        <td>
-          <div
-            className="gf-form-select-wrapper width-12"
-          >
-            <select
-              className="gf-form-input"
-              onChange={[Function]}
+            <option
+              key="Viewer-0"
+              value="Viewer"
+            >
+              Viewer
+            </option>
+            <option
+              key="Editor-1"
+              value="Editor"
+            >
+              Editor
+            </option>
+            <option
+              key="Admin-2"
               value="Admin"
             >
-              <option
-                key="Viewer-0"
-                value="Viewer"
-              >
-                Viewer
-              </option>
-              <option
-                key="Editor-1"
-                value="Editor"
-              >
-                Editor
-              </option>
-              <option
-                key="Admin-2"
-                value="Admin"
-              >
-                Admin
-              </option>
-            </select>
-          </div>
-        </td>
-        <td>
-          <div
-            className="btn btn-danger btn-mini"
-            onClick={[Function]}
-          >
-            <i
-              className="fa fa-remove"
-            />
-          </div>
-        </td>
-      </tr>
-      <tr
-        key="3-3"
-      >
-        <td
-          className="width-4 text-center"
+              Admin
+            </option>
+          </select>
+        </div>
+      </td>
+      <td>
+        <div
+          className="btn btn-danger btn-mini"
+          onClick={[Function]}
         >
-          <img
-            className="filter-table__avatar"
-            src="url/to/avatar"
+          <i
+            className="fa fa-remove"
           />
-        </td>
-        <td>
-          user-3
-        </td>
-        <td>
-          <span
-            className="ellipsis"
+        </div>
+      </td>
+    </tr>
+    <tr
+      key="3-3"
+    >
+      <td
+        className="width-4 text-center"
+      >
+        <img
+          className="filter-table__avatar"
+          src="url/to/avatar"
+        />
+      </td>
+      <td>
+        user-3
+      </td>
+      <td>
+        <span
+          className="ellipsis"
+        >
+          user-3@test.com
+        </span>
+      </td>
+      <td />
+      <td>
+        <div
+          className="gf-form-select-wrapper width-12"
+        >
+          <select
+            className="gf-form-input"
+            onChange={[Function]}
+            value="Admin"
           >
-            user-3@test.com
-          </span>
-        </td>
-        <td />
-        <td>
-          <div
-            className="gf-form-select-wrapper width-12"
-          >
-            <select
-              className="gf-form-input"
-              onChange={[Function]}
+            <option
+              key="Viewer-0"
+              value="Viewer"
+            >
+              Viewer
+            </option>
+            <option
+              key="Editor-1"
+              value="Editor"
+            >
+              Editor
+            </option>
+            <option
+              key="Admin-2"
               value="Admin"
             >
-              <option
-                key="Viewer-0"
-                value="Viewer"
-              >
-                Viewer
-              </option>
-              <option
-                key="Editor-1"
-                value="Editor"
-              >
-                Editor
-              </option>
-              <option
-                key="Admin-2"
-                value="Admin"
-              >
-                Admin
-              </option>
-            </select>
-          </div>
-        </td>
-        <td>
-          <div
-            className="btn btn-danger btn-mini"
-            onClick={[Function]}
-          >
-            <i
-              className="fa fa-remove"
-            />
-          </div>
-        </td>
-      </tr>
-      <tr
-        key="4-4"
-      >
-        <td
-          className="width-4 text-center"
+              Admin
+            </option>
+          </select>
+        </div>
+      </td>
+      <td>
+        <div
+          className="btn btn-danger btn-mini"
+          onClick={[Function]}
         >
-          <img
-            className="filter-table__avatar"
-            src="url/to/avatar"
+          <i
+            className="fa fa-remove"
           />
-        </td>
-        <td>
-          user-4
-        </td>
-        <td>
-          <span
-            className="ellipsis"
+        </div>
+      </td>
+    </tr>
+    <tr
+      key="4-4"
+    >
+      <td
+        className="width-4 text-center"
+      >
+        <img
+          className="filter-table__avatar"
+          src="url/to/avatar"
+        />
+      </td>
+      <td>
+        user-4
+      </td>
+      <td>
+        <span
+          className="ellipsis"
+        >
+          user-4@test.com
+        </span>
+      </td>
+      <td />
+      <td>
+        <div
+          className="gf-form-select-wrapper width-12"
+        >
+          <select
+            className="gf-form-input"
+            onChange={[Function]}
+            value="Admin"
           >
-            user-4@test.com
-          </span>
-        </td>
-        <td />
-        <td>
-          <div
-            className="gf-form-select-wrapper width-12"
-          >
-            <select
-              className="gf-form-input"
-              onChange={[Function]}
+            <option
+              key="Viewer-0"
+              value="Viewer"
+            >
+              Viewer
+            </option>
+            <option
+              key="Editor-1"
+              value="Editor"
+            >
+              Editor
+            </option>
+            <option
+              key="Admin-2"
               value="Admin"
             >
-              <option
-                key="Viewer-0"
-                value="Viewer"
-              >
-                Viewer
-              </option>
-              <option
-                key="Editor-1"
-                value="Editor"
-              >
-                Editor
-              </option>
-              <option
-                key="Admin-2"
-                value="Admin"
-              >
-                Admin
-              </option>
-            </select>
-          </div>
-        </td>
-        <td>
-          <div
-            className="btn btn-danger btn-mini"
-            onClick={[Function]}
-          >
-            <i
-              className="fa fa-remove"
-            />
-          </div>
-        </td>
-      </tr>
-      <tr
-        key="5-5"
-      >
-        <td
-          className="width-4 text-center"
+              Admin
+            </option>
+          </select>
+        </div>
+      </td>
+      <td>
+        <div
+          className="btn btn-danger btn-mini"
+          onClick={[Function]}
         >
-          <img
-            className="filter-table__avatar"
-            src="url/to/avatar"
+          <i
+            className="fa fa-remove"
           />
-        </td>
-        <td>
-          user-5
-        </td>
-        <td>
-          <span
-            className="ellipsis"
+        </div>
+      </td>
+    </tr>
+    <tr
+      key="5-5"
+    >
+      <td
+        className="width-4 text-center"
+      >
+        <img
+          className="filter-table__avatar"
+          src="url/to/avatar"
+        />
+      </td>
+      <td>
+        user-5
+      </td>
+      <td>
+        <span
+          className="ellipsis"
+        >
+          user-5@test.com
+        </span>
+      </td>
+      <td />
+      <td>
+        <div
+          className="gf-form-select-wrapper width-12"
+        >
+          <select
+            className="gf-form-input"
+            onChange={[Function]}
+            value="Admin"
           >
-            user-5@test.com
-          </span>
-        </td>
-        <td />
-        <td>
-          <div
-            className="gf-form-select-wrapper width-12"
-          >
-            <select
-              className="gf-form-input"
-              onChange={[Function]}
+            <option
+              key="Viewer-0"
+              value="Viewer"
+            >
+              Viewer
+            </option>
+            <option
+              key="Editor-1"
+              value="Editor"
+            >
+              Editor
+            </option>
+            <option
+              key="Admin-2"
               value="Admin"
             >
-              <option
-                key="Viewer-0"
-                value="Viewer"
-              >
-                Viewer
-              </option>
-              <option
-                key="Editor-1"
-                value="Editor"
-              >
-                Editor
-              </option>
-              <option
-                key="Admin-2"
-                value="Admin"
-              >
-                Admin
-              </option>
-            </select>
-          </div>
-        </td>
-        <td>
-          <div
-            className="btn btn-danger btn-mini"
-            onClick={[Function]}
-          >
-            <i
-              className="fa fa-remove"
-            />
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+              Admin
+            </option>
+          </select>
+        </div>
+      </td>
+      <td>
+        <div
+          className="btn btn-danger btn-mini"
+          onClick={[Function]}
+        >
+          <i
+            className="fa fa-remove"
+          />
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
 `;