Persist whitelistOnly changes to default organization

server/organizations.go

@@ -61,7 +61,7 @@ type organizationResponse struct {
 	ID            uint64    `json:"id,string"`
 	Name          string    `json:"name"`
 	DefaultRole   string    `json:"defaultRole,omitempty"`
-	WhitelistOnly bool      `json:"whitelistOnly,omitempty"`
+	WhitelistOnly bool      `json:"whitelistOnly"`
 }
 
 func newOrganizationResponse(o *chronograf.Organization) *organizationResponse {

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

@@ -33,7 +33,12 @@ class OrganizationsTable extends Component {
   }
 
   render() {
-    const {organizations, onDeleteOrg, onRenameOrg} = this.props
+    const {
+      organizations,
+      onDeleteOrg,
+      onRenameOrg,
+      onToggleWhitelistOnly,
+    } = this.props
     const {isCreatingOrganization} = this.state
 
     const tableTitle = `${organizations.length} Organization${organizations.length ===
@@ -81,6 +86,7 @@ class OrganizationsTable extends Component {
                 ? <OrganizationsTableRowDefault
                     key={uuid.v4()}
                     organization={org}
+                    onToggleWhitelistOnly={onToggleWhitelistOnly}
                   />
                 : <OrganizationsTableRow
                     key={uuid.v4()}
@@ -107,5 +113,6 @@ OrganizationsTable.propTypes = {
   onCreateOrg: func.isRequired,
   onDeleteOrg: func.isRequired,
   onRenameOrg: func.isRequired,
+  onToggleWhitelistOnly: func.isRequired,
 }
 export default OrganizationsTable

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

@@ -1,45 +1,56 @@
-import React, {PropTypes} from 'react'
+import React, {PropTypes, Component} from 'react'
 
 import SlideToggle from 'shared/components/SlideToggle'
 
 import {MEMBER_ROLE} from 'src/auth/Authorized'
 
 // This is a non-editable organization row, used currently for DEFAULT_ORG
-const OrganizationsTableRowDefault = ({organization}) =>
-  <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--whitelist">
-      <SlideToggle
-        size="xs"
-        active={true}
-        onToggle={arg => {
-          console.log(arg)
-        }}
-      />
-    </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}
-    >
-      <span className="icon trash" />
-    </button>
-  </div>
+class OrganizationsTableRowDefault extends Component {
+  toggleWhitelistOnly = () => {
+    const {organization, onToggleWhitelistOnly} = this.props
+    onToggleWhitelistOnly(organization)
+  }
 
-const {shape, string} = PropTypes
+  render() {
+    const {organization} = this.props
+
+    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--whitelist">
+          <SlideToggle
+            size="xs"
+            active={organization.whitelistOnly}
+            onToggle={this.toggleWhitelistOnly}
+          />
+        </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}
+        >
+          <span className="icon trash" />
+        </button>
+      </div>
+    )
+  }
+}
+
+const {func, shape, string} = PropTypes
 
 OrganizationsTableRowDefault.propTypes = {
   organization: shape({
     id: string,
     name: string.isRequired,
   }).isRequired,
+  onToggleWhitelistOnly: func.isRequired,
 }
 
 export default OrganizationsTableRowDefault

ui/src/admin/containers/OrganizationsPage.js

@@ -29,6 +29,12 @@ class OrganizationsPage extends Component {
     deleteOrganizationAsync(organization)
   }
 
+  handleToggleWhitelistOnly = organization => {
+    const {actions: {updateOrganizationAsync}} = this.props
+    const whitelistOnly = !organization.whitelistOnly
+    updateOrganizationAsync(organization, {...organization, whitelistOnly})
+  }
+
   render() {
     const {organizations} = this.props
 
@@ -38,6 +44,7 @@ class OrganizationsPage extends Component {
         onCreateOrg={this.handleCreateOrganization}
         onDeleteOrg={this.handleDeleteOrganization}
         onRenameOrg={this.handleRenameOrganization}
+        onToggleWhitelistOnly={this.handleToggleWhitelistOnly}
       />
     )
   }