make scheme a dropdown, update the redux store for a mapping change corectly, and add an empty state for the provider mappings page

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

@@ -35,6 +35,14 @@ class ProvidersTable extends Component {
     const tableTitle =
       mappings.length === 1 ? '1 Map' : `${mappings.length} Maps`
 
+    // define scheme options
+    const schemes = [
+      {text: '*'},
+      {text: 'oauth2'},
+      {text: 'option2'},
+      {text: 'option3'},
+    ]
+
     return (
       <div className="panel panel-default">
         <div className="panel-heading u-flex u-ai-center u-jc-space-between">
@@ -49,38 +57,55 @@ class ProvidersTable extends Component {
             <span className="icon plus" /> Create Map
           </button>
         </div>
-        <div className="panel-body">
+        {(mappings && mappings.length) || isCreatingMap
-          <div className="fancytable--labels">
+          ? <div className="panel-body">
-            <div className="fancytable--th provider--id">ID</div>
+              <div className="fancytable--labels">
-            <div className="fancytable--th provider--scheme">Scheme</div>
+                <div className="fancytable--th provider--id">ID</div>
-            <div className="fancytable--th provider--provider">Provider</div>
+                <div className="fancytable--th provider--scheme">Scheme</div>
-            <div className="fancytable--th provider--providerorg">
+                <div className="fancytable--th provider--provider">
-              Provider Org
+                  Provider
+                </div>
+                <div className="fancytable--th provider--providerorg">
+                  Provider Org
+                </div>
+                <div className="fancytable--th provider--arrow" />
+                <div className="fancytable--th provider--redirect">
+                  Organization
+                </div>
+                <div className="fancytable--th" />
+                <div className="fancytable--th provider--delete" />
+              </div>
+              {mappings.map(mapping =>
+                <ProvidersTableRow
+                  key={mapping.id}
+                  mapping={mapping}
+                  organizations={organizations}
+                  schemes={schemes}
+                  onDelete={onDeleteMap}
+                  onUpdate={onUpdateMap}
+                />
+              )}
+              {isCreatingMap
+                ? <ProvidersTableRowNew
+                    organizations={organizations}
+                    schemes={schemes}
+                    onCreate={this.handleCreateMap}
+                    onCancel={this.handleCancelCreateMap}
+                  />
+                : null}
             </div>
-            <div className="fancytable--th provider--arrow" />
+          : <div className="generic-empty-state">
-            <div className="fancytable--th provider--redirect">
+              <h4 style={{margin: '90px 0'}}>
-              Organization
+                Looks like you don’t have any mappings
-            </div>
+              </h4>
-            <div className="fancytable--th" />
+              <button
-            <div className="fancytable--th provider--delete" />
+                className="btn btn-sm btn-primary"
-          </div>
+                onClick={this.handleClickCreateMap}
-          {mappings.map(mapping =>
+                disabled={isCreatingMap}
-            <ProvidersTableRow
+              >
-              key={mapping.id}
+                <span className="icon plus" /> Create Map
-              mapping={mapping}
+              </button>
-              organizations={organizations}
+            </div>}
-              onDelete={onDeleteMap}
-              onUpdate={onUpdateMap}
-            />
-          )}
-          {isCreatingMap
-            ? <ProvidersTableRowNew
-                organizations={organizations}
-                onCreate={this.handleCreateMap}
-                onCancel={this.handleCancelCreateMap}
-              />
-            : null}
-        </div>
       </div>
     )
   }

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

@@ -33,30 +33,68 @@ class ProvidersTableRow extends Component {
     onDelete(mapping)
   }
 
-  handleChangeScheme = scheme => {
-    this.setState({scheme})
-    this.handleUpdateMapping()
-  }
-
   handleChangeProvider = provider => {
     this.setState({provider})
-    this.handleUpdateMapping()
+    const {scheme, organizationId, providerOrganization} = this.state
+    const {onUpdate, mapping: {id}} = this.props
+    const updatedMap = {
+      id,
+      scheme,
+      provider,
+      providerOrganization,
+      organizationId,
+    }
+    onUpdate(updatedMap)
   }
 
   handleChangeProviderOrg = providerOrganization => {
     this.setState({providerOrganization})
-    this.handleUpdateMapping()
+    const {onUpdate, mapping: {id}} = this.props
+    const {scheme, provider, organizationId} = this.state
+    const updatedMap = {
+      id,
+      scheme,
+      provider,
+      providerOrganization,
+      organizationId,
+    }
+    onUpdate(updatedMap)
   }
 
   handleChooseOrganization = org => {
-    this.setState({organizationId: org.id})
+    const organizationId = org.id
-    this.handleUpdateMapping()
+    this.setState({organizationId})
+    const {onUpdate, mapping: {id}} = this.props
+    const {scheme, provider, providerOrganization} = this.state
+    const updatedMap = {
+      id,
+      scheme,
+      provider,
+      providerOrganization,
+      organizationId,
+    }
+    onUpdate(updatedMap)
+  }
+
+  handleChooseScheme = s => {
+    const scheme = s.text
+    this.setState({scheme})
+    const {onUpdate, mapping: {id}} = this.props
+    const {provider, providerOrganization, organizationId} = this.state
+    const updatedMap = {
+      id,
+      scheme,
+      provider,
+      providerOrganization,
+      organizationId,
+    }
+    onUpdate(updatedMap)
   }
 
   handleUpdateMapping = () => {
+    // this was getting called by all the handlers for input/dropdown changes but it meant the state was not getting updated so the updated map was stale
     const {onUpdate, mapping: {id}} = this.props
     const {scheme, provider, providerOrganization, organizationId} = this.state
-
     const updatedMap = {
       id,
       scheme,
@@ -75,11 +113,10 @@ class ProvidersTableRow extends Component {
       organizationId,
       isDeleting,
     } = this.state
-    const {organizations, mapping} = this.props
+    const {organizations, mapping, schemes} = this.props
 
     const selectedOrg = organizations.find(o => o.id === organizationId)
-
+    const orgDropdownItems = organizations.map(role => ({
-    const dropdownItems = organizations.map(role => ({
       ...role,
       text: role.name,
     }))
@@ -95,11 +132,11 @@ class ProvidersTableRow extends Component {
         <div className="fancytable--td provider--id">
           {mapping.id}
         </div>
-        <InputClickToEdit
+        <Dropdown
-          value={scheme}
+          items={schemes}
-          wrapperClass="fancytable--td provider--scheme"
+          onChoose={this.handleChooseScheme}
-          onUpdate={this.handleChangeScheme}
+          selected={scheme}
-          disabled={isDefaultMapping}
+          className="fancytable--td provider--scheme"
         />
         <InputClickToEdit
           value={provider}
@@ -118,7 +155,7 @@ class ProvidersTableRow extends Component {
         </div>
         <div className={organizationIdClassName}>
           <Dropdown
-            items={dropdownItems}
+            items={orgDropdownItems}
             onChoose={this.handleChooseOrganization}
             selected={selectedOrg.name}
             className="dropdown-stretch"
@@ -158,6 +195,11 @@ ProvidersTableRow.propTypes = {
       name: string.isRequired,
     })
   ),
+  schemes: arrayOf(
+    shape({
+      text: string.isRequired,
+    })
+  ),
   onDelete: func.isRequired,
   onUpdate: func.isRequired,
 }

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

@@ -9,15 +9,15 @@ class ProvidersTableRowNew extends Component {
     super(props)
 
     this.state = {
-      scheme: null,
+      scheme: '*',
       provider: null,
       providerOrganization: null,
       organizationId: 'default',
     }
   }
 
-  handleChangeScheme = scheme => {
+  handleChooseScheme = scheme => {
-    this.setState({scheme})
+    this.setState({scheme: scheme.text})
   }
 
   handleChangeProvider = provider => {
@@ -42,7 +42,7 @@ class ProvidersTableRowNew extends Component {
   render() {
     const {scheme, provider, providerOrganization, organizationId} = this.state
 
-    const {organizations, onCancel} = this.props
+    const {organizations, onCancel, schemes} = this.props
 
     const selectedOrg = organizations.find(o => o.id === organizationId)
 
@@ -54,10 +54,12 @@ class ProvidersTableRowNew extends Component {
     return (
       <div className="fancytable--row">
         <div className="fancytable--td provider--id">--</div>
-        <InputClickToEdit
+
-          value={scheme}
+        <Dropdown
-          wrapperClass="fancytable--td provider--scheme"
+          items={schemes}
-          onUpdate={this.handleChangeScheme}
+          onChoose={this.handleChooseScheme}
+          selected={scheme}
+          className={'fancytable--td provider--scheme'}
         />
         <InputClickToEdit
           value={provider}
@@ -98,6 +100,11 @@ ProvidersTableRowNew.propTypes = {
       name: string.isRequired,
     })
   ).isRequired,
+  schemes: arrayOf(
+    shape({
+      text: string.isRequired,
+    })
+  ),
   onCreate: func.isRequired,
   onCancel: func.isRequired,
 }

ui/src/admin/containers/ProvidersPage.js

@@ -37,7 +37,6 @@ class ProvidersPage extends Component {
   handleUpdateMap = updatedMap => {
     // update the redux store
     this.props.actions.updateMappingAsync(updatedMap)
-
     // update the server
     /*
     const {actionsAdmin: {updateMappingAsync}} = this.props