From 5fbf1e140a7c069e7c84bbdbd02f70043fdfd39a Mon Sep 17 00:00:00 2001
From: Luke Morris <lukevmorris@gmail.com>
Date: Fri, 10 Nov 2017 16:43:11 -0800
Subject: [PATCH] Persist whitelistOnly changes to default organization

---
 server/organizations.go                       |  2 +-
 .../chronograf/OrganizationsTable.js          |  9 ++-
 .../OrganizationsTableRowDefault.js           | 69 +++++++++++--------
 ui/src/admin/containers/OrganizationsPage.js  |  7 ++
 4 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/server/organizations.go b/server/organizations.go
index 460345d1e7..fb05c94f97 100644
--- a/server/organizations.go
+++ b/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 {
diff --git a/ui/src/admin/components/chronograf/OrganizationsTable.js b/ui/src/admin/components/chronograf/OrganizationsTable.js
index 3e7db3d57a..81e27325e0 100644
--- a/ui/src/admin/components/chronograf/OrganizationsTable.js
+++ b/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
diff --git a/ui/src/admin/components/chronograf/OrganizationsTableRowDefault.js b/ui/src/admin/components/chronograf/OrganizationsTableRowDefault.js
index 6761e6bc8a..573efc446e 100644
--- a/ui/src/admin/components/chronograf/OrganizationsTableRowDefault.js
+++ b/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
diff --git a/ui/src/admin/containers/OrganizationsPage.js b/ui/src/admin/containers/OrganizationsPage.js
index 9ba53944aa..772a149cef 100644
--- a/ui/src/admin/containers/OrganizationsPage.js
+++ b/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}
       />
     )
   }