WIP Implement ability to set default role per organization

ui/src/admin/components/chronograf/DefaultOrganization.js

@@ -1,5 +1,7 @@
 import React, {PropTypes} from 'react'
 
+import {MEMBER_ROLE} from 'src/auth/Authorized'
+
 // This is a non-editable organization row, used currently for DEFAULT_ORG
 const DefaultOrganization = ({organization}) =>
   <div className="orgs-table--org">
@@ -9,6 +11,9 @@ const DefaultOrganization = ({organization}) =>
     <div className="orgs-table--name-disabled">
       {organization.name}
     </div>
+    <div className="orgs-table--default-role-disabled">
+      {MEMBER_ROLE}
+    </div>
     <button
       className="btn btn-sm btn-default btn-square orgs-table--delete"
       disabled={true}

ui/src/admin/components/chronograf/NewOrganization.js

@@ -1,13 +1,18 @@
 import React, {Component, PropTypes} from 'react'
 
 import ConfirmButtons from 'shared/components/ConfirmButtons'
+import Dropdown from 'shared/components/Dropdown'
+
+import {USER_ROLES} from 'src/admin/constants/dummyUsers'
+import {MEMBER_ROLE} from 'src/auth/Authorized'
 
 class Organization extends Component {
   constructor(props) {
     super(props)
 
     this.state = {
-      organizationName: 'Untitled Organization',
+      name: 'Untitled Organization',
+      defaultRole: MEMBER_ROLE,
     }
   }
 
@@ -25,7 +30,7 @@ class Organization extends Component {
   }
 
   handleInputChange = e => {
-    this.setState({organizationName: e.target.value.trim()})
+    this.setState({name: e.target.value.trim()})
   }
 
   handleInputFocus = e => {
@@ -34,17 +39,26 @@ class Organization extends Component {
 
   handleClickSave = () => {
     const {onCancelCreateOrganization, onCreateOrganization} = this.props
-    const {organizationName} = this.state
+    const {name, defaultRole} = this.state
 
-    onCreateOrganization(organizationName)
+    onCreateOrganization(name, defaultRole)
     onCancelCreateOrganization()
   }
 
+  handleChooseDefaultRole = role => {
+    this.setState({defaultRole: role.name})
+  }
+
   render() {
-    const {organizationName} = this.state
+    const {name, defaultRole} = this.state
     const {onCancelCreateOrganization} = this.props
 
-    const isSaveDisabled = organizationName === null || organizationName === ''
+    const isSaveDisabled = name === null || name === ''
+
+    const defaultRoleItems = USER_ROLES.map(role => ({
+      ...role,
+      text: role.name,
+    }))
 
     return (
       <div className="orgs-table--org orgs-table--new-org">
@@ -52,7 +66,7 @@ class Organization extends Component {
         <input
           type="text"
           className="form-control input-sm orgs-table--input"
-          value={organizationName}
+          value={name}
           onKeyDown={this.handleKeyDown}
           onChange={this.handleInputChange}
           onFocus={this.handleInputFocus}
@@ -60,6 +74,14 @@ class Organization extends Component {
           autoFocus={true}
           ref={r => (this.inputRef = r)}
         />
+        <div className="orgs-table--default-role editing">
+          <Dropdown
+            items={defaultRoleItems}
+            onChoose={this.handleChooseDefaultRole}
+            selected={defaultRole}
+            className="dropdown-stretch"
+          />
+        </div>
         <ConfirmButtons
           disabled={isSaveDisabled}
           onCancel={onCancelCreateOrganization}

ui/src/admin/components/chronograf/Organization.js

@@ -1,6 +1,10 @@
 import React, {Component, PropTypes} from 'react'
 
 import ConfirmButtons from 'shared/components/ConfirmButtons'
+import Dropdown from 'shared/components/Dropdown'
+
+import {USER_ROLES} from 'src/admin/constants/dummyUsers'
+import {MEMBER_ROLE} from 'src/auth/Authorized'
 
 class Organization extends Component {
   constructor(props) {
@@ -11,6 +15,7 @@ class Organization extends Component {
       isEditing: false,
       isDeleting: false,
       workingName: this.props.organization.name,
+      defaultRole: MEMBER_ROLE,
     }
   }
 
@@ -58,10 +63,23 @@ class Organization extends Component {
     onDelete(organization)
   }
 
+  handleChooseDefaultRole = role => {
+    this.setState({defaultRole: role.name})
+  }
+
   render() {
-    const {workingName, reset, isEditing, isDeleting} = this.state
+    const {workingName, reset, isEditing, isDeleting, defaultRole} = this.state
     const {organization} = this.props
 
+    const defaultRoleItems = USER_ROLES.map(role => ({
+      ...role,
+      text: role.name,
+    }))
+
+    const defaultRoleClassName = isDeleting
+      ? 'orgs-table--default-role editing'
+      : 'orgs-table--default-role'
+
     return (
       <div className="orgs-table--org">
         <div className="orgs-table--id">
@@ -83,6 +101,14 @@ class Organization extends Component {
               {workingName}
               <span className="icon pencil" />
             </div>}
+        <div className={defaultRoleClassName}>
+          <Dropdown
+            items={defaultRoleItems}
+            onChoose={this.handleChooseDefaultRole}
+            selected={defaultRole}
+            className="dropdown-stretch"
+          />
+        </div>
         {isDeleting
           ? <ConfirmButtons
               item={organization}

ui/src/admin/components/chronograf/OrganizationsTable.js

@@ -57,6 +57,8 @@ class OrganizationsTable extends Component {
                 <div className="orgs-table--org-labels">
                   <div className="orgs-table--id">ID</div>
                   <div className="orgs-table--name">Name</div>
+                  <div className="orgs-table--default-role">Default Role</div>
+                  <div className="orgs-table--delete" />
                 </div>
                 {isAddingOrganization
                   ? <NewOrganization

ui/src/style/components/organizations-table.scss

@@ -78,12 +78,39 @@ input[type="text"].form-control.orgs-table--input {
   color: $g9-mountain;
 }
 
+.orgs-table--default-role,
+.orgs-table--default-role-disabled {
+  width: 130px;
+  height: 30px;
+  margin-right: 4px;
+}
+.orgs-table--default-role.editing {
+  width: 96px;
+}
+.orgs-table--default-role-disabled {
+  background-color: $g4-onyx;
+  font-style: italic;
+  color: $g9-mountain;
+  padding: 0 11px;
+  line-height: 30px;
+  font-size: 13px;
+  font-weight: 600;
+  @include no-user-select();
+}
+.orgs-table--delete {
+  height: 30px;
+  width: 30px;
+}
+
+
+/* Table Headers */
 .orgs-table--org-labels {
   display: flex;
   align-items: center;
-  border-bottom: 2px solid $g3-castle;
-  margin-bottom: 8px;
+  border-bottom: 2px solid $g5-pepper;
+  margin-bottom: 10px;
   width: 100%;
+  @include no-user-select();
 
   > .orgs-table--name,
   > .orgs-table--name:hover {
@@ -94,13 +121,14 @@ input[type="text"].form-control.orgs-table--input {
 
   > .orgs-table--id,
   > .orgs-table--name,
-  > .orgs-table--name:hover {
+  > .orgs-table--name:hover,
+  > .orgs-table--default-role {
     color: $g15-platinum;
     font-weight: 700;
   }
-}
-.orgs-table--org.orgs-table--new-org {
-  .btn {
-    margin-left: 4px;
+  > .orgs-table--default-role {
+    line-height: 30px;
+    font-size: 13px;
+    padding: 0 11px;
   }
 }