WIP load mappings fixture into redux

ui/src/admin/actions/chronograf.js

@@ -1,6 +1,8 @@
 import _ from 'lodash'
 import uuid from 'node-uuid'
 
+import {PROVIDER_MAPS} from 'src/admin/constants/dummyProviderMaps'
+
 import {
   getUsers as getUsersAJAX,
   getOrganizations as getOrganizationsAJAX,
@@ -94,6 +96,20 @@ export const removeOrganization = organization => ({
   },
 })
 
+export const loadMappings = mappings => ({
+  type: 'CHRONOGRAF_LOAD_MAPPINGS',
+  payload: {
+    mappings,
+  },
+})
+
+export const updateMapping = mapping => ({
+  type: 'CHRONOGRAF_UPDATE_MAPPING',
+  payload: {
+    mapping,
+  },
+})
+
 // async actions (thunks)
 export const loadUsersAsync = url => async dispatch => {
   try {
@@ -113,6 +129,16 @@ export const loadOrganizationsAsync = url => async dispatch => {
   }
 }
 
+export const loadMappingsAsync = url => async dispatch => {
+  try {
+    // awaiting backend changes
+    // const {data} await getOrganizationsAJAX(url);
+    dispatch(loadMappings(PROVIDER_MAPS))
+  } catch (error) {
+    dispatch(errorThrown(error))
+  }
+}
+
 export const createUserAsync = (url, user) => async dispatch => {
   // temp uuid is added to be able to disambiguate a created user that has the
   // same scheme, provider, and name as an existing user

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

@@ -25,11 +25,11 @@ class ProvidersTable extends Component {
   }
 
   render() {
-    const {providerMaps, organizations, onUpdateMap, onDeleteMap} = this.props
+    const {mappings = [], organizations, onUpdateMap, onDeleteMap} = this.props
     const {isCreatingMap} = this.state
 
     const tableTitle =
-      providerMaps.length === 1 ? '1 Map' : `${providerMaps.length} Maps`
+      mappings.length === 1 ? '1 Map' : `${mappings.length} Maps`
 
     return (
       <div className="panel panel-default">
@@ -60,11 +60,10 @@ class ProvidersTable extends Component {
             <div className="fancytable--th" />
             <div className="fancytable--th provider--delete" />
           </div>
-          <div>hi</div>
-          {providerMaps.map(providerMap =>
+          {mappings.map(mapping =>
             <ProvidersTableRow
-              key={providerMap.id}
-              providerMap={providerMap}
+              key={mapping.id}
+              mapping={mapping}
               organizations={organizations}
               onDelete={onDeleteMap}
               onUpdate={onUpdateMap}
@@ -86,7 +85,7 @@ class ProvidersTable extends Component {
 const {arrayOf, func, shape, string} = PropTypes
 
 ProvidersTable.propTypes = {
-  providerMaps: arrayOf(
+  mappings: arrayOf(
     shape({
       id: string,
       scheme: string,

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

@@ -11,10 +11,10 @@ class ProvidersTableRow extends Component {
     super(props)
 
     this.state = {
-      scheme: this.props.providerMap.scheme,
-      provider: this.props.providerMap.provider,
-      providerOrganization: this.props.providerMap.providerOrganization,
-      redirectOrg: this.props.providerMap.redirectOrg,
+      scheme: this.props.mapping.scheme,
+      provider: this.props.mapping.provider,
+      providerOrganization: this.props.mapping.providerOrganization,
+      redirectOrg: this.props.mapping.redirectOrg,
       isDeleting: false,
     }
   }
@@ -27,35 +27,35 @@ class ProvidersTableRow extends Component {
     this.setState({isDeleting: false})
   }
 
-  handleDeleteMap = providerMap => {
+  handleDeleteMap = mapping => {
     const {onDelete} = this.props
 
     this.setState({isDeleting: false})
-    onDelete(providerMap)
+    onDelete(mapping)
   }
 
   handleChangeScheme = scheme => {
     this.setState({scheme})
-    this.handleUpdateProviderMap()
+    this.handleUpdateMapping()
   }
 
   handleChangeProvider = provider => {
     this.setState({provider})
-    this.handleUpdateProviderMap()
+    this.handleUpdateMapping()
   }
 
   handleChangeProviderOrg = providerOrganization => {
     this.setState({providerOrganization})
-    this.handleUpdateProviderMap()
+    this.handleUpdateMapping()
   }
 
   handleChooseOrganization = org => {
     this.setState({redirectOrg: org})
-    this.handleUpdateProviderMap()
+    this.handleUpdateMapping()
   }
 
-  handleUpdateProviderMap = () => {
-    const {onUpdate, providerMap: {id}} = this.props
+  handleUpdateMapping = () => {
+    const {onUpdate, mapping: {id}} = this.props
     const {scheme, provider, providerOrganization, redirectOrg} = this.state
 
     const updatedMap = {
@@ -76,7 +76,7 @@ class ProvidersTableRow extends Component {
       redirectOrg,
       isDeleting,
     } = this.state
-    const {organizations, providerMap} = this.props
+    const {organizations, mapping} = this.props
 
     const dropdownItems = organizations.map(role => ({
       ...role,
@@ -87,30 +87,30 @@ class ProvidersTableRow extends Component {
       ? 'fancytable--td provider--redirect deleting'
       : 'fancytable--td provider--redirect'
 
-    const isDefaultProviderMap = DEFAULT_PROVIDER_MAP_ID === providerMap.id
+    const isDefaultMapping = DEFAULT_PROVIDER_MAP_ID === mapping.id
 
     return (
       <div className="fancytable--row">
         <div className="fancytable--td provider--id">
-          {providerMap.id}
+          {mapping.id}
         </div>
         <InputClickToEdit
           value={scheme}
           wrapperClass="fancytable--td provider--scheme"
           onUpdate={this.handleChangeScheme}
-          disabled={isDefaultProviderMap}
+          disabled={isDefaultMapping}
         />
         <InputClickToEdit
           value={provider}
           wrapperClass="fancytable--td provider--provider"
           onUpdate={this.handleChangeProvider}
-          disabled={isDefaultProviderMap}
+          disabled={isDefaultMapping}
         />
         <InputClickToEdit
           value={providerOrganization}
           wrapperClass="fancytable--td provider--providerorg"
           onUpdate={this.handleChangeProviderOrg}
-          disabled={isDefaultProviderMap}
+          disabled={isDefaultMapping}
         />
         <div className="fancytable--td provider--arrow">
           <span />
@@ -125,7 +125,7 @@ class ProvidersTableRow extends Component {
         </div>
         {isDeleting
           ? <ConfirmButtons
-              item={providerMap}
+              item={mapping}
               onCancel={this.handleDismissDeleteConfirmation}
               onConfirm={this.handleDeleteMap}
               onClickOutside={this.handleDismissDeleteConfirmation}
@@ -144,7 +144,7 @@ class ProvidersTableRow extends Component {
 const {arrayOf, func, shape, string} = PropTypes
 
 ProvidersTableRow.propTypes = {
-  providerMap: shape({
+  mapping: shape({
     id: string,
     scheme: string,
     provider: string,

ui/src/admin/containers/ProvidersPage.js

@@ -7,34 +7,38 @@ import {publishAutoDismissingNotification} from 'shared/dispatchers'
 
 import ProvidersTable from 'src/admin/components/chronograf/ProvidersTable'
 
-import {PROVIDER_MAPS} from 'src/admin/constants/dummyProviderMaps'
-
 class ProvidersPage extends Component {
   constructor(props) {
     super(props)
   }
 
   componentDidMount() {
-    const {links, actions: {loadOrganizationsAsync}} = this.props
+    const {
+      links,
+      actions: {loadOrganizationsAsync, loadMappingsAsync},
+    } = this.props
 
     loadOrganizationsAsync(links.organizations)
+    loadMappingsAsync(links.mappings)
   }
 
   handleCreateMap = () => {}
 
-  handleUpdateMap = _updatedMap => {
-    // console.log(_updatedMap)
+  handleUpdateMap = updatedMap => {
+    // update the redux store
+    this.props.actions.updateMapping(updatedMap)
+
+    // update the server
   }
 
   handleDeleteMap = () => {}
 
   render() {
-    // const {organizations, providerMaps} = this.props
-    const {organizations} = this.props
+    const {organizations, mappings = []} = this.props
 
     return organizations
       ? <ProvidersTable
-          providerMaps={PROVIDER_MAPS} // TODO: replace with providerMaps prop
+          mappings={mappings}
           organizations={organizations}
           onCreateMap={this.handleCreateMap}
           onUpdateMap={this.handleUpdateMap}
@@ -56,7 +60,7 @@ ProvidersPage.propTypes = {
       name: string.isRequired,
     })
   ),
-  providerMaps: arrayOf(
+  mappings: arrayOf(
     shape({
       id: string,
       scheme: string,
@@ -74,9 +78,13 @@ ProvidersPage.propTypes = {
   notify: func.isRequired,
 }
 
-const mapStateToProps = ({links, adminChronograf: {organizations}}) => ({
+const mapStateToProps = ({
+  links,
+  adminChronograf: {organizations, mappings},
+}) => ({
   links,
   organizations,
+  mappings,
 })
 
 const mapDispatchToProps = dispatch => ({

ui/src/admin/reducers/chronograf.js

@@ -58,7 +58,10 @@ const adminChronograf = (state = initialState, action) => {
 
     case 'CHRONOGRAF_ADD_ORGANIZATION': {
       const {organization} = action.payload
-      return {...state, organizations: [organization, ...state.organizations]}
+      return {
+        ...state,
+        organizations: [organization, ...state.organizations],
+      }
     }
 
     case 'CHRONOGRAF_RENAME_ORGANIZATION': {
@@ -94,6 +97,24 @@ const adminChronograf = (state = initialState, action) => {
         ),
       }
     }
+
+    case 'CHRONOGRAF_LOAD_MAPPINGS': {
+      const {mappings} = action.payload
+      return {
+        ...state,
+        mappings,
+      }
+    }
+
+    case 'CHRONOGRAF_UPDATE_MAPPING': {
+      const {mapping} = action.payload
+      return {
+        ...state,
+        mappings: state.mappings.map(
+          m => (m.id === mapping.id ? {...mapping} : m)
+        ),
+      }
+    }
   }
 
   return state

ui/src/shared/components/InputClickToEdit.js

@@ -28,7 +28,7 @@ class InputClickToEdit extends Component {
       onUpdate(e.target.value)
     }
 
-    this.setState({isEditing: false})
+    this.setState({isEditing: false, value: e.target.value})
   }
 
   handleKeyDown = e => {