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() { 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)

View File

@ -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}
} }
} }

View File

@ -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,
}) })