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
parent
a9c83ed3cd
commit
c573346e28
|
@ -35,16 +35,19 @@ class Authorized extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
// TODO: make this return component if not using auth
|
const {children, me, isUsingAuth, requiredRole, replaceWith} = this.props
|
||||||
const {children, me, requiredRole, replaceWith} = this.props
|
|
||||||
|
if (!isUsingAuth) {
|
||||||
|
return React.isValidElement(children) ? children : children[0]
|
||||||
|
}
|
||||||
|
|
||||||
const meRole = getRoleName(me)
|
const meRole = getRoleName(me)
|
||||||
|
|
||||||
if (this.isAuthorized(meRole, requiredRole)) {
|
if (this.isAuthorized(meRole, requiredRole)) {
|
||||||
return React.cloneElement(
|
return React.cloneElement(
|
||||||
React.isValidElement(children) ? children : children[0]
|
React.isValidElement(children) ? children : children[0]
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return replaceWith ? React.cloneElement(replaceWith) : null
|
return replaceWith ? React.cloneElement(replaceWith) : null
|
||||||
|
|
||||||
// if you want elements to be disabled instead of hidden:
|
// 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 = {
|
Authorized.propTypes = {
|
||||||
|
isUsingAuth: bool.isRequired,
|
||||||
replaceWith: node,
|
replaceWith: node,
|
||||||
children: node.isRequired,
|
children: node.isRequired,
|
||||||
me: shape({
|
me: shape({
|
||||||
|
@ -67,8 +71,9 @@ Authorized.propTypes = {
|
||||||
requiredRole: string.isRequired,
|
requiredRole: string.isRequired,
|
||||||
}
|
}
|
||||||
|
|
||||||
const mapStateToProps = ({auth: {me}}) => ({
|
const mapStateToProps = ({auth: {me, isUsingAuth}}) => ({
|
||||||
me,
|
me,
|
||||||
|
isUsingAuth,
|
||||||
})
|
})
|
||||||
|
|
||||||
export default connect(mapStateToProps)(Authorized)
|
export default connect(mapStateToProps)(Authorized)
|
||||||
|
|
|
@ -30,7 +30,7 @@ const authReducer = (state = initialState, action) => {
|
||||||
}
|
}
|
||||||
case 'LOGOUT_LINK_RECEIVED': {
|
case 'LOGOUT_LINK_RECEIVED': {
|
||||||
const {logoutLink} = action.payload
|
const {logoutLink} = action.payload
|
||||||
return {...state, logoutLink}
|
return {...state, logoutLink, isUsingAuth: !!logoutLink}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -22,6 +22,7 @@ const SideNav = React.createClass({
|
||||||
pathname: string.isRequired,
|
pathname: string.isRequired,
|
||||||
}).isRequired,
|
}).isRequired,
|
||||||
isHidden: bool.isRequired,
|
isHidden: bool.isRequired,
|
||||||
|
isUsingAuth: bool,
|
||||||
logoutLink: string,
|
logoutLink: string,
|
||||||
customLinks: arrayOf(
|
customLinks: arrayOf(
|
||||||
shape({
|
shape({
|
||||||
|
@ -61,13 +62,13 @@ const SideNav = React.createClass({
|
||||||
params: {sourceID},
|
params: {sourceID},
|
||||||
location: {pathname: location},
|
location: {pathname: location},
|
||||||
isHidden,
|
isHidden,
|
||||||
|
isUsingAuth,
|
||||||
logoutLink,
|
logoutLink,
|
||||||
customLinks,
|
customLinks,
|
||||||
} = this.props
|
} = this.props
|
||||||
|
|
||||||
const sourcePrefix = `/sources/${sourceID}`
|
const sourcePrefix = `/sources/${sourceID}`
|
||||||
const dataExplorerLink = `${sourcePrefix}/chronograf/data-explorer`
|
const dataExplorerLink = `${sourcePrefix}/chronograf/data-explorer`
|
||||||
const isUsingAuth = !!logoutLink
|
|
||||||
|
|
||||||
const isDefaultPage = location.split('/').includes(DEFAULT_HOME_PAGE)
|
const isDefaultPage = location.split('/').includes(DEFAULT_HOME_PAGE)
|
||||||
|
|
||||||
|
@ -135,11 +136,12 @@ const SideNav = React.createClass({
|
||||||
})
|
})
|
||||||
|
|
||||||
const mapStateToProps = ({
|
const mapStateToProps = ({
|
||||||
auth: {logoutLink},
|
auth: {isUsingAuth, logoutLink},
|
||||||
app: {ephemeral: {inPresentationMode}},
|
app: {ephemeral: {inPresentationMode}},
|
||||||
links: {external: {custom: customLinks}},
|
links: {external: {custom: customLinks}},
|
||||||
}) => ({
|
}) => ({
|
||||||
isHidden: inPresentationMode,
|
isHidden: inPresentationMode,
|
||||||
|
isUsingAuth,
|
||||||
logoutLink,
|
logoutLink,
|
||||||
customLinks,
|
customLinks,
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue