External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-23 11:55:04 -02:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6668 from nixocio/ui_refactor_users_functional

Browse Source 
Modify Users component to be function based

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot]
2020-04-13 18:35:57 +00:00
committed by GitHub
parent 07e9b46643 e54e5280f2
commit 2830cdfdeb
1 changed files with 32 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
awx/ui_next/src/screens/User/Users.jsx
View File

@@ -1,5 +1,5 @@
import React, { Component, Fragment } from 'react'; import React, { Fragment, useState } from 'react';
import { Route, withRouter, Switch } from 'react-router-dom'; import { Route, useRouteMatch, Switch } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
@@ -10,28 +10,19 @@ import UsersList from './UserList/UserList';
import UserAdd from './UserAdd/UserAdd'; import UserAdd from './UserAdd/UserAdd';
import User from './User'; import User from './User';
class Users extends Component { function Users({ i18n }) {
constructor(props) { const [breadcrumbConfig, setBreadcrumbConfig] = useState({
super(props); '/users': i18n._(t`Users`),
'/users/add': i18n._(t`Create New User`),
const { i18n } = props; });
const match = useRouteMatch();
this.state = {
breadcrumbConfig: {
'/users': i18n._(t`Users`),
'/users/add': i18n._(t`Create New User`),
},
};
}
setBreadcrumbConfig = user => {
const { i18n } = this.props;
const addUserBreadcrumb = user => {
if (!user) { if (!user) {
return; return;
} }
const breadcrumbConfig = { setBreadcrumbConfig({
'/users': i18n._(t`Users`), '/users': i18n._(t`Users`),
'/users/add': i18n._(t`Create New User`), '/users/add': i18n._(t`Create New User`),
[`/users/${user.id}`]: `${user.username}`, [`/users/${user.id}`]: `${user.username}`,
@@ -41,42 +32,30 @@ class Users extends Component {
[`/users/${user.id}/teams`]: i18n._(t`Teams`), [`/users/${user.id}/teams`]: i18n._(t`Teams`),
[`/users/${user.id}/organizations`]: i18n._(t`Organizations`), [`/users/${user.id}/organizations`]: i18n._(t`Organizations`),
[`/users/${user.id}/tokens`]: i18n._(t`Tokens`), [`/users/${user.id}/tokens`]: i18n._(t`Tokens`),
}; });
this.setState({ breadcrumbConfig });
}; };
render() { return (
const { match, history, location } = this.props; <Fragment>
const { breadcrumbConfig } = this.state; <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
<Switch>
return ( <Route path={`${match.path}/add`}>
<Fragment> <UserAdd />
<Breadcrumbs breadcrumbConfig={breadcrumbConfig} /> </Route>
<Switch> <Route path={`${match.path}/:id`}>
<Route path={`${match.path}/add`}> <Config>
<UserAdd /> {({ me }) => (
</Route> <User setBreadcrumb={addUserBreadcrumb} me={me || {}} />
<Route path={`${match.path}/:id`}> )}
<Config> </Config>
{({ me }) => ( </Route>
<User <Route path={`${match.path}`}>
history={history} <UsersList />
location={location} </Route>
setBreadcrumb={this.setBreadcrumbConfig} </Switch>
me={me || {}} </Fragment>
/> );
)}
</Config>
</Route>
<Route path={`${match.path}`}>
<UsersList />
</Route>
</Switch>
</Fragment>
);
}
} }
export { Users as _Users }; export { Users as _Users };
export default withI18n()(withRouter(Users)); export default withI18n()(Users);