Merge pull request #2401 from influxdata/multitenancy_rename_default_org-2202

Allow Default org to be renamed in UI; remove Default component

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

@@ -3,11 +3,9 @@ import React, {Component, PropTypes} from 'react'
 import uuid from 'node-uuid'
 
 import OrganizationsTableRow from 'src/admin/components/chronograf/OrganizationsTableRow'
-import OrganizationsTableRowDefault from 'src/admin/components/chronograf/OrganizationsTableRowDefault'
 import OrganizationsTableRowNew from 'src/admin/components/chronograf/OrganizationsTableRowNew'
 import QuestionMarkTooltip from 'shared/components/QuestionMarkTooltip'
 
-import {DEFAULT_ORG_ID} from 'src/admin/constants/dummyUsers'
 import {PUBLIC_TOOLTIP} from 'src/admin/constants/index'
 
 class OrganizationsTable extends Component {
@@ -79,18 +77,11 @@ class OrganizationsTable extends Component {
                 onCancelCreateOrganization={this.handleCancelCreateOrganization}
               />
             : null}
-          {organizations.map(
+          {organizations.map(org =>
-            org =>
+            <OrganizationsTableRow
-              org.id === DEFAULT_ORG_ID
-                ? <OrganizationsTableRowDefault
               key={uuid.v4()}
               organization={org}
               onTogglePublic={onTogglePublic}
-                    onChooseDefaultRole={onChooseDefaultRole}
-                  />
-                : <OrganizationsTableRow
-                    key={uuid.v4()}
-                    organization={org}
               onDelete={onDeleteOrg}
               onRename={onRenameOrg}
               onChooseDefaultRole={onChooseDefaultRole}

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

@@ -1,10 +1,27 @@
 import React, {Component, PropTypes} from 'react'
 
+import SlideToggle from 'shared/components/SlideToggle'
 import ConfirmButtons from 'shared/components/ConfirmButtons'
 import Dropdown from 'shared/components/Dropdown'
 
+import {DEFAULT_ORG_ID} from 'src/admin/constants/dummyUsers'
 import {USER_ROLES} from 'src/admin/constants/dummyUsers'
 
+const OrganizationsTableRowDeleteButton = ({organization, onClickDelete}) =>
+  organization.id === DEFAULT_ORG_ID
+    ? <button
+        className="btn btn-sm btn-default btn-square orgs-table--delete"
+        disabled={true}
+      >
+        <span className="icon trash" />
+      </button>
+    : <button
+        className="btn btn-sm btn-default btn-square"
+        onClick={onClickDelete}
+      >
+        <span className="icon trash" />
+      </button>
+
 class OrganizationsTableRow extends Component {
   constructor(props) {
     super(props)
@@ -77,6 +94,11 @@ class OrganizationsTableRow extends Component {
     onDelete(organization)
   }
 
+  handleTogglePublic = () => {
+    const {organization, onTogglePublic} = this.props
+    onTogglePublic(organization)
+  }
+
   handleChooseDefaultRole = role => {
     const {organization, onChooseDefaultRole} = this.props
     onChooseDefaultRole(organization, role.name)
@@ -117,7 +139,15 @@ class OrganizationsTableRow extends Component {
               {workingName}
               <span className="icon pencil" />
             </div>}
-        <div className="orgs-table--public disabled">&mdash;</div>
+        {organization.id === DEFAULT_ORG_ID
+          ? <div className="orgs-table--public">
+              <SlideToggle
+                size="xs"
+                active={organization.public}
+                onToggle={this.handleTogglePublic}
+              />
+            </div>
+          : <div className="orgs-table--public disabled">&mdash;</div>}
         <div className={defaultRoleClassName}>
           <Dropdown
             items={dropdownRolesItems}
@@ -134,12 +164,10 @@ class OrganizationsTableRow extends Component {
               onClickOutside={this.handleDismissDeleteConfirmation}
               confirmLeft={true}
             />
-          : <button
+          : <OrganizationsTableRowDeleteButton
-              className="btn btn-sm btn-default btn-square"
+              organization={organization}
-              onClick={this.handleDeleteClick}
+              onClickDelete={this.handleDeleteClick}
-            >
+            />}
-              <span className="icon trash" />
-            </button>}
       </div>
     )
   }
@@ -155,7 +183,17 @@ OrganizationsTableRow.propTypes = {
   }).isRequired,
   onDelete: func.isRequired,
   onRename: func.isRequired,
+  onTogglePublic: func.isRequired,
   onChooseDefaultRole: func.isRequired,
 }
 
+OrganizationsTableRowDeleteButton.propTypes = {
+  organization: shape({
+    id: string, // when optimistically created, organization will not have an id
+    name: string.isRequired,
+    defaultRole: string.isRequired,
+  }).isRequired,
+  onClickDelete: func.isRequired,
+}
+
 export default OrganizationsTableRow

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

@@ -1,73 +0,0 @@
-import React, {PropTypes, Component} from 'react'
-
-import SlideToggle from 'shared/components/SlideToggle'
-import Dropdown from 'shared/components/Dropdown'
-
-import {USER_ROLES} from 'src/admin/constants/dummyUsers'
-
-// This is a non-editable organization row, used currently for DEFAULT_ORG
-class OrganizationsTableRowDefault extends Component {
-  togglePublic = () => {
-    const {organization, onTogglePublic} = this.props
-    onTogglePublic(organization)
-  }
-
-  handleChooseDefaultRole = role => {
-    const {organization, onChooseDefaultRole} = this.props
-    onChooseDefaultRole(organization, role.name)
-  }
-
-  render() {
-    const {organization} = this.props
-
-    const dropdownRolesItems = USER_ROLES.map(role => ({
-      ...role,
-      text: role.name,
-    }))
-
-    return (
-      <div className="orgs-table--org">
-        <div className="orgs-table--id">
-          {organization.id}
-        </div>
-        <div className="orgs-table--name-disabled">
-          {organization.name}
-        </div>
-        <div className="orgs-table--public">
-          <SlideToggle
-            size="xs"
-            active={organization.public}
-            onToggle={this.togglePublic}
-          />
-        </div>
-        <div className="orgs-table--default-role">
-          <Dropdown
-            items={dropdownRolesItems}
-            onChoose={this.handleChooseDefaultRole}
-            selected={organization.defaultRole}
-            className="dropdown-stretch"
-          />
-        </div>
-        <button
-          className="btn btn-sm btn-default btn-square orgs-table--delete"
-          disabled={true}
-        >
-          <span className="icon trash" />
-        </button>
-      </div>
-    )
-  }
-}
-
-const {func, shape, string} = PropTypes
-
-OrganizationsTableRowDefault.propTypes = {
-  organization: shape({
-    id: string,
-    name: string.isRequired,
-  }).isRequired,
-  onTogglePublic: func.isRequired,
-  onChooseDefaultRole: func.isRequired,
-}
-
-export default OrganizationsTableRowDefault

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

@@ -71,12 +71,6 @@ input[type="text"].form-control.orgs-table--input {
     }
   }
 }
-.orgs-table--name-disabled {
-  border-color: $g4-onyx;
-  background-color: $g4-onyx;
-  font-style: italic;
-  color: $g9-mountain;
-}
 
 .orgs-table--public {
   height: 30px;