External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-09 18:37:36 -02:30
Code Issues Packages Projects Releases Wiki Activity

remove conditional redirect component

Browse Source
This commit is contained in:
Jake McDermott
2019-01-02 01:15:31 -05:00
parent 18505b35b8
commit a2601d5f67
3 changed files with 76 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
__tests__/components/ConditionalRedirect.test.jsx
View File

@@ -1,35 +0,0 @@
import React from 'react';
import {
Route,
Redirect
} from 'react-router-dom';
import { shallow } from 'enzyme';
import ConditionalRedirect from '../../src/components/ConditionalRedirect';
describe('<ConditionalRedirect />', () => {
test('renders Redirect when shouldRedirect is passed truthy func', () => {
const truthyFunc = () => true;
const shouldHaveRedirectChild = shallow(
<ConditionalRedirect
shouldRedirect={() => truthyFunc()}
/>
);
const redirectChild = shouldHaveRedirectChild.find(Redirect);
expect(redirectChild.length).toBe(1);
const routeChild = shouldHaveRedirectChild.find(Route);
expect(routeChild.length).toBe(0);
});
test('renders Route when shouldRedirect is passed falsy func', () => {
const falsyFunc = () => false;
const shouldHaveRouteChild = shallow(
<ConditionalRedirect
shouldRedirect={() => falsyFunc()}
/>
);
const routeChild = shouldHaveRouteChild.find(Route);
expect(routeChild.length).toBe(1);
const redirectChild = shouldHaveRouteChild.find(Redirect);
expect(redirectChild.length).toBe(0);
});
});

155
src/App.jsx
View File

@@ -5,7 +5,8 @@ import {
HashRouter as Router, HashRouter as Router,
Redirect, Redirect,
Switch, Switch,
withRouter withRouter,
Route,
} from 'react-router-dom'; } from 'react-router-dom';
import { import {
BackgroundImage, BackgroundImage,
@@ -28,12 +29,10 @@ import { API_LOGOUT, API_CONFIG } from './endpoints';
import ja from '../build/locales/ja/messages'; import ja from '../build/locales/ja/messages';
import en from '../build/locales/en/messages'; import en from '../build/locales/en/messages';
import Login from './pages/Login'; import Login from './pages/Login';
import HelpDropdown from './components/HelpDropdown'; import HelpDropdown from './components/HelpDropdown';
import LogoutButton from './components/LogoutButton'; import LogoutButton from './components/LogoutButton';
import TowerLogo from './components/TowerLogo'; import TowerLogo from './components/TowerLogo';
import ConditionalRedirect from './components/ConditionalRedirect';
import NavExpandableGroup from './components/NavExpandableGroup'; import NavExpandableGroup from './components/NavExpandableGroup';
const catalogs = { en, ja }; const catalogs = { en, ja };
@@ -61,6 +60,7 @@ class App extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
// initialize with a closed navbar if window size is small
const isNavOpen = typeof window !== 'undefined' const isNavOpen = typeof window !== 'undefined'
&& window.innerWidth >= parseInt(breakpointMd.value, 10); && window.innerWidth >= parseInt(breakpointMd.value, 10);
@@ -95,10 +95,9 @@ class App extends React.Component {
} }
render () { render () {
const { isNavOpen } = this.state; const { config, isNavOpen } = this.state;
const { logo, loginInfo, history, routeConfig = [] } = this.props;
// extract a flattened array of all routes from the provided route config // extract a flattened array of all routes from the provided route config
const allRoutes = routeConfig.reduce((flattened, { routes }) => flattened.concat(routes), []); const { logo, loginInfo, routeGroups = [] } = this.props;
return ( return (
<Router> <Router>
@@ -108,82 +107,80 @@ class App extends React.Component {
> >
<I18n> <I18n>
{({ i18n }) => ( {({ i18n }) => (
<Fragment> api.isAuthenticated () ? (
<ConfigContext.Provider> <ConfigContext.Provider value={config}>
<BackgroundImage src={backgroundConfig} />
<Switch> <Switch>
<ConditionalRedirect <Route path="/login" render={() => <Redirect to='/home' />} />
shouldRedirect={() => api.isAuthenticated()} <Route exact path="/" render={() => <Redirect to='/home' />} />
redirectPath="/" <Route render={() => (
path="/login" <Fragment>
component={() => <Login logo={logo} loginInfo={loginInfo} />} <BackgroundImage src={backgroundConfig} />
/> <Page
<Fragment> usecondensed="True"
<Page header={(
usecondensed="True" <PageHeader
header={( showNavToggle
<PageHeader onNavToggle={() => this.onNavToggle()}
logo={<TowerLogo onClick={this.onLogoClick} />} logo={(
toolbar={( <TowerLogo
<Toolbar> onClick={this.onLogoClick}
<ToolbarGroup> />
<ToolbarItem> )}
<HelpDropdown /> toolbar={(
</ToolbarItem> <Toolbar>
<ToolbarItem> <ToolbarGroup>
<LogoutButton onDevLogout={() => this.onDevLogout()} /> <ToolbarItem>
</ToolbarItem> <HelpDropdown />
</ToolbarGroup> </ToolbarItem>
</Toolbar> <ToolbarItem>
)} <LogoutButton
showNavToggle onDevLogout={() => this.onDevLogout()}
onNavToggle={this.onNavToggle} />
/> </ToolbarItem>
)} </ToolbarGroup>
sidebar={( </Toolbar>
<PageSidebar )}
isNavOpen={isNavOpen} />
nav={( )}
<Nav aria-label={i18n._("Primary Navigation")}> sidebar={(
<NavList> <PageSidebar
{ routeConfig.map(({ groupId, routes, title }) => ( isNavOpen={isNavOpen}
<NavExpandableGroup nav={(
key={groupId} <Nav aria-label={i18n._("Primary Navigation")}>
groupId={groupId} <NavList>
title={i18n._(title)} {
routes={routes.map(route => ({ routeGroups.map(params => <NavExpandableGroup key={params.groupId} {...params} />)
path: route.path, }
component: route.component, </NavList>
title: i18n._(route.title) </Nav>
}))} )}
/> />
))} )}
</NavList> >
</Nav> {
)} //
/> // Extract a flattened array of all route params from the provided route groups
)} // and use it to create the route components.
> //
<ConditionalRedirect // [{ routes }, { routes }] -> [route, route, route] -> (<Route/><Route/><Route/>)
shouldRedirect={() => !api.isAuthenticated()} //
redirectPath="/login" routeGroups
exact path="/" .reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
component={() => (<Redirect to="/home" />)} .map(({ component: Component, path }) => (
/> <Route key={path} path={path} render={params => <Component {...params } />} />
{ allRoutes.map(({ component, path }) => ( ))
<ConditionalRedirect }
key={path} </Page>
path={path} </Fragment>
redirectPath="/login" )} />
shouldRedirect={() => !api.isAuthenticated()}
component={component}
/>
))}
</Page>
</Fragment>
</Switch> </Switch>
</ConfigContext.Provider> </ConfigContext.Provider>
</Fragment> ) : (
<Switch>
<Route path="/login" render={() => <Login logo={logo} loginInfo={loginInfo} />} />
<Redirect to="/login" />
</Switch>
)
)} )}
</I18n> </I18n>
</I18nProvider> </I18nProvider>

23
src/components/ConditionalRedirect.jsx
View File

@@ -1,23 +0,0 @@
import React from 'react';
import {
Route,
Redirect
} from 'react-router-dom';
const ConditionalRedirect = ({
component: Component,
shouldRedirect,
redirectPath,
location,
...props
}) => (shouldRedirect() ? (
<Redirect to={{
pathname: redirectPath,
state: { from: location }
}}
/>
) : (
<Route {...props} render={rest => (<Component {...rest} />)} />
));
export default ConditionalRedirect;