GH-501 adding some better UX to the Refresh Token success flow

client/actions/checks.js

@@ -1,9 +1,12 @@
 import CheckService from '../service/CheckService'
 import { PENDING, SUCCESS, ERROR } from '../actions/status'
+import { requestReposIfNeeded } from '../actions/repos'
 
 export const PUT_CHECK = Symbol('put check')
 export const DELETE_CHECK = Symbol('delete check')
 export const REFRESH_TOKEN = Symbol('refresh token')
+export const RELOAD_REPO_DETAIL = Symbol ('reload repo detail')
+
 
 function putCheck(status, payload = null) {
   return {
@@ -60,11 +63,14 @@ function refreshToken(status, payload = null) {
   }
 }
 
-function updateTokenForChecks(repo){
+function updateTokenForChecks(repo, reloadReposFn){
   return (dispatch) => {
     dispatch(refreshToken(PENDING, {}))
     CheckService.refreshTokens(repo.id)
-                .then((successMsg) => dispatch(refreshToken(SUCCESS, successMsg)))
+                .then((successMsg) => {
+                  dispatch(refreshToken(SUCCESS, successMsg))
+                  dispatch(reloadReposFn(true))
+                })
                 .catch(err => dispatch(refreshToken(ERROR, err)))
   }
 }
@@ -73,9 +79,9 @@ function updateTokenForChecks(repo){
  * Refresh access token with new user logged in (1% case)
  * @param {*} repo - repository data
  */
-export function requestRefreshToken(repo) {
+export function requestRefreshToken(repo, reloadReposFn) {
   if(repo) {
-    return updateTokenForChecks(repo)
+    return updateTokenForChecks(repo, reloadReposFn)
   } else {
     return {}
   }

client/components/RepositoryConfigValidation.jsx

@@ -99,9 +99,10 @@ export default function RepositoryConfigValidation({validation, onValidate, onRe
       })}/>
         Validate Zappr configuration
     </Button>
-    <Button onClick={onRefreshToken} > 
+    <Button onClick={onRefreshToken} className="button-refreshToken"> 
       <span className={classes('fa', 'fa-fw', {
-        'fa-spin': isRefreshing,
+        'fa-spin ': isRefreshing,
+        'fa-refresh': isRefreshing, 
         'fa-info-circle': !isRefreshing
       })} />
       Refresh OAuth Token
@@ -118,4 +119,5 @@ RepositoryConfigValidation.propTypes = {
   }).isRequired,
   onValidate: PropTypes.func.isRequired,
   onRefreshToken: PropTypes.func.isRequired,
+  isRefreshing: PropTypes.bool.isRequired,
 }

client/containers/RepositoryDetail.jsx

@@ -6,6 +6,7 @@ import DocumentTitle from 'react-document-title'
 import RepositoryCheck from './../components/RepositoryCheck.jsx'
 import ConfigValidation from './../components/RepositoryConfigValidation.jsx'
 import { toggleCheck, requestRefreshToken } from '../actions/checks'
+import { requestReposIfNeeded } from '../actions/repos';
 import { requestConfigValidation } from '../actions/validate'
 
 import { checkId } from '../model/schema'
@@ -28,6 +29,7 @@ class RepositoryDetail extends Component {
     toggleCheck: PropTypes.func.isRequired,
     requestConfigValidation: PropTypes.func.isRequired,
     requestRefreshToken: PropTypes.func.isRequired,
+    requestReposIfNeeded: PropTypes.func.isRequired,
   };
 
   onToggleCheck(check, isChecked) {
@@ -39,13 +41,14 @@ class RepositoryDetail extends Component {
   }
 
   shouldRefreshToken(repo) {
-    this.props.requestRefreshToken(repo)
+    this.props.requestRefreshToken(repo, this.props.requestReposIfNeeded)
   }
 
   render() {
     if (!this.props.repository.full_name) return null
 
-    const {repository, checks, validations, isRefreshing} = this.props
+    const {repository, checks, validations} = this.props
+    const { isRefreshingToken } = checks;
     const header = (<h2>{repository.full_name}</h2>)
 
     return (
@@ -68,7 +71,7 @@ class RepositoryDetail extends Component {
             <ConfigValidation
               validation={validations[repository.full_name]}
               onValidate={this.onValidateConfig.bind(this, repository)}
-              isRefreshing={isRefreshing}
+              isRefreshing={isRefreshingToken}
               onRefreshToken={this.shouldRefreshToken.bind(this, repository)}
               />
               <span>Test</span>
@@ -96,4 +99,4 @@ class RepositoryDetail extends Component {
   }
 }
 
-export default connect(mapStateToProps, {toggleCheck, requestRefreshToken, requestConfigValidation})(RepositoryDetail)
+export default connect(mapStateToProps, {toggleCheck, requestRefreshToken, requestConfigValidation, requestReposIfNeeded})(RepositoryDetail)

client/css/main.css

@@ -57,3 +57,7 @@ label.btn-primary.toggle-on:active {
       }
   }
 }
+
+.button-refreshToken {
+  float: right;
+}

client/reducers/repos/checks.js

@@ -1,5 +1,5 @@
 import { PENDING, SUCCESS, ERROR } from '../../actions/status'
-import { PUT_CHECK, DELETE_CHECK } from '../../actions/checks'
+import { PUT_CHECK, DELETE_CHECK, REFRESH_TOKEN } from '../../actions/checks'
 import { GET_REPOS } from '../../actions/repos'
 import { mapValues } from '../../../common/util'
 
@@ -63,12 +63,28 @@ function check(state = {
         default:
           return state
       }
+    default:
+      return state
+  }
+}
+
+export default function checks(state = { isRefreshingToken: false, error: false}, action) {
+  switch (action.type) {
+    case GET_REPOS:
+      switch (action.status) {
+        case SUCCESS:
+          // The repos response from the backend was normalized. Now we need to update
+          // every check of a repo with the default values from the check reducer.
+          return mapValues(action.payload.entities.checks, (_, v) => check(v, action))
+        default:
+          return state
+      }
     case REFRESH_TOKEN:
       switch(action.status) {
         case PENDING:
           return {...state, isRefreshingToken: true}
         case SUCCESS:
-          console.log(action.payload);
+          // console.log(action.payload);
           return {
             ...state,
             isRefreshingToken: false,
@@ -83,22 +99,6 @@ function check(state = {
         default: 
           return state
       }
-    default:
-      return state
-  }
-}
-
-export default function checks(state = {}, action) {
-  switch (action.type) {
-    case GET_REPOS:
-      switch (action.status) {
-        case SUCCESS:
-          // The repos response from the backend was normalized. Now we need to update
-          // every check of a repo with the default values from the check reducer.
-          return mapValues(action.payload.entities.checks, (_, v) => check(v, action))
-        default:
-          return state
-      }
     case PUT_CHECK:
     case DELETE_CHECK:
       return {