WIP add new mappings in redux

ui/src/admin/actions/chronograf.js

@@ -110,6 +110,13 @@ export const updateMapping = mapping => ({
   },
 })
 
+export const createMapping = mapping => ({
+  type: 'CHRONOGRAF_CREATE_MAPPING',
+  payload: {
+    mapping,
+  },
+})
+
 // async actions (thunks)
 export const loadUsersAsync = url => async dispatch => {
   try {

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

@@ -21,6 +21,9 @@ class ProvidersTable extends Component {
 
   handleCreateMap = newMap => {
     const {onCreateMap} = this.props
+    this.setState({isCreatingMap: false})
+    const newMapID = this.props.mappings.length.toString()
+    newMap.id = newMapID
     onCreateMap(newMap)
   }
 

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

@@ -32,10 +32,17 @@ class ProvidersTableRowNew extends Component {
     this.setState({redirectOrg: org})
   }
 
+  handleSaveNewMapping = () => {
+    const {scheme, provider, providerOrganization, redirectOrg} = this.state
+    const {onCreate} = this.props
+    // id is calculated in providers table
+    onCreate({id: '', scheme, provider, providerOrganization, redirectOrg})
+  }
+
   render() {
     const {scheme, provider, providerOrganization, redirectOrg} = this.state
 
-    const {organizations, onCreate, onCancel} = this.props
+    const {organizations, onCancel} = this.props
 
     const dropdownItems = organizations.map(role => ({
       ...role,
@@ -71,7 +78,10 @@ class ProvidersTableRowNew extends Component {
             className="dropdown-stretch"
           />
         </div>
-        <ConfirmButtons onCancel={onCancel} onConfirm={onCreate} />
+        <ConfirmButtons
+          onCancel={onCancel}
+          onConfirm={this.handleSaveNewMapping}
+        />
       </div>
     )
   }

ui/src/admin/containers/ProvidersPage.js

@@ -6,6 +6,7 @@ import * as adminChronografActionCreators from 'src/admin/actions/chronograf'
 import {publishAutoDismissingNotification} from 'shared/dispatchers'
 
 import ProvidersTable from 'src/admin/components/chronograf/ProvidersTable'
+import {createMapping} from '../actions/chronograf'
 
 class ProvidersPage extends Component {
   constructor(props) {
@@ -22,7 +23,10 @@ class ProvidersPage extends Component {
     loadMappingsAsync(links.mappings)
   }
 
-  handleCreateMap = () => {}
+  handleCreateMap = mapping => {
+    // update the redux store
+    this.props.actions.createMapping(mapping)
+  }
 
   handleUpdateMap = updatedMap => {
     // update the redux store

ui/src/admin/reducers/chronograf.js

@@ -115,6 +115,14 @@ const adminChronograf = (state = initialState, action) => {
         ),
       }
     }
+
+    case 'CHRONOGRAF_CREATE_MAPPING': {
+      const {mapping} = action.payload
+      return {
+        ...state,
+        mappings: [...state.mappings, mapping],
+      }
+    }
   }
 
   return state