Render original component in Authorized if not using auth

Make isUsingAuth a app-wide Redux key. Refactor its usage
in SideNav, and use it in Authorized.

Signed-off-by: Alex Paxton <thealexpaxton@gmail.com>
pull/10616/head
Jared Scheib 2017-10-24 17:43:16 -07:00 committed by Alex Paxton
parent a9c83ed3cd
commit c573346e28
3 changed files with 15 additions and 8 deletions

View File

@ -35,16 +35,19 @@ class Authorized extends Component {
}
render() {
// TODO: make this return component if not using auth
const {children, me, requiredRole, replaceWith} = this.props
const {children, me, isUsingAuth, requiredRole, replaceWith} = this.props
if (!isUsingAuth) {
return React.isValidElement(children) ? children : children[0]
}
const meRole = getRoleName(me)
if (this.isAuthorized(meRole, requiredRole)) {
return React.cloneElement(
React.isValidElement(children) ? children : children[0]
)
}
return replaceWith ? React.cloneElement(replaceWith) : null
// if you want elements to be disabled instead of hidden:
@ -52,9 +55,10 @@ class Authorized extends Component {
}
}
const {arrayOf, node, shape, string} = PropTypes
const {arrayOf, bool, node, shape, string} = PropTypes
Authorized.propTypes = {
isUsingAuth: bool.isRequired,
replaceWith: node,
children: node.isRequired,
me: shape({
@ -67,8 +71,9 @@ Authorized.propTypes = {
requiredRole: string.isRequired,
}
const mapStateToProps = ({auth: {me}}) => ({
const mapStateToProps = ({auth: {me, isUsingAuth}}) => ({
me,
isUsingAuth,
})
export default connect(mapStateToProps)(Authorized)

View File

@ -30,7 +30,7 @@ const authReducer = (state = initialState, action) => {
}
case 'LOGOUT_LINK_RECEIVED': {
const {logoutLink} = action.payload
return {...state, logoutLink}
return {...state, logoutLink, isUsingAuth: !!logoutLink}
}
}

View File

@ -22,6 +22,7 @@ const SideNav = React.createClass({
pathname: string.isRequired,
}).isRequired,
isHidden: bool.isRequired,
isUsingAuth: bool,
logoutLink: string,
customLinks: arrayOf(
shape({
@ -61,13 +62,13 @@ const SideNav = React.createClass({
params: {sourceID},
location: {pathname: location},
isHidden,
isUsingAuth,
logoutLink,
customLinks,
} = this.props
const sourcePrefix = `/sources/${sourceID}`
const dataExplorerLink = `${sourcePrefix}/chronograf/data-explorer`
const isUsingAuth = !!logoutLink
const isDefaultPage = location.split('/').includes(DEFAULT_HOME_PAGE)
@ -135,11 +136,12 @@ const SideNav = React.createClass({
})
const mapStateToProps = ({
auth: {logoutLink},
auth: {isUsingAuth, logoutLink},
app: {ephemeral: {inPresentationMode}},
links: {external: {custom: customLinks}},
}) => ({
isHidden: inPresentationMode,
isUsingAuth,
logoutLink,
customLinks,
})