External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-06 08:57:35 -02:30
Code Issues Packages Projects Releases Wiki Activity

remove unnecessary eslint ignore comics, replace react router use with hooks where possible in inventories

Browse Source
This commit is contained in:
John Mitchell
2020-04-06 13:54:53 -04:00
parent ecd1d09c9a
commit 2021c2a596
7 changed files with 48 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
awx/ui_next/src/screens/Host/HostGroups/HostGroups.jsx
View File

@@ -1,20 +1,18 @@
import React from 'react'; import React from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { Switch, Route, withRouter } from 'react-router-dom'; import { Switch, Route } from 'react-router-dom';
import HostGroupsList from './HostGroupsList'; import HostGroupsList from './HostGroupsList';
function HostGroups({ location, match, host }) { function HostGroups({ host }) {
return ( return (
<Switch> <Switch>
<Route <Route
key="list" key="list"
path="/hosts/:id/groups" path="/hosts/:id/groups"
render={() => { render={() => {
return ( return <HostGroupsList host={host} />;
<HostGroupsList host={host} location={location} match={match} />
);
}} }}
/> />
</Switch> </Switch>
@@ -22,4 +20,4 @@ function HostGroups({ location, match, host }) {
} }
export { HostGroups as _HostGroups }; export { HostGroups as _HostGroups };
export default withI18n()(withRouter(HostGroups)); export default withI18n()(HostGroups);

13
awx/ui_next/src/screens/Host/HostGroups/HostGroupsList.jsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect, useCallback } from 'react'; import React, { useState, useEffect, useCallback } from 'react';
import { withRouter } from 'react-router-dom'; import { useParams, useLocation } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { getQSConfig, parseQueryString, mergeParams } from '@util/qs'; import { getQSConfig, parseQueryString, mergeParams } from '@util/qs';
@@ -25,10 +25,11 @@ const QS_CONFIG = getQSConfig('group', {
order_by: 'name', order_by: 'name',
}); });
function HostGroupsList({ i18n, location, match, host }) { function HostGroupsList({ i18n, host }) {
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const hostId = match.params.id; const { id: hostId } = useParams();
const { search } = useLocation();
const invId = host.summary_fields.inventory.id; const invId = host.summary_fields.inventory.id;
const { const {
@@ -38,7 +39,7 @@ function HostGroupsList({ i18n, location, match, host }) {
request: fetchGroups, request: fetchGroups,
} = useRequest( } = useRequest(
useCallback(async () => { useCallback(async () => {
const params = parseQueryString(QS_CONFIG, location.search); const params = parseQueryString(QS_CONFIG, search);
const [ const [
{ {
@@ -55,7 +56,7 @@ function HostGroupsList({ i18n, location, match, host }) {
itemCount: count, itemCount: count,
actions: actionsResponse.data.actions, actions: actionsResponse.data.actions,
}; };
}, [hostId, location]), // eslint-disable-line react-hooks/exhaustive-deps }, [hostId, search]),
{ {
groups: [], groups: [],
itemCount: 0, itemCount: 0,
@@ -228,4 +229,4 @@ function HostGroupsList({ i18n, location, match, host }) {
</> </>
); );
} }
export default withI18n()(withRouter(HostGroupsList)); export default withI18n()(HostGroupsList);

8
awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroups.jsx
View File

@@ -1,14 +1,14 @@
import React from 'react'; import React from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { Switch, Route, withRouter } from 'react-router-dom'; import { Switch, Route } from 'react-router-dom';
import InventoryGroupAdd from '../InventoryGroupAdd/InventoryGroupAdd'; import InventoryGroupAdd from '../InventoryGroupAdd/InventoryGroupAdd';
import InventoryGroup from '../InventoryGroup/InventoryGroup'; import InventoryGroup from '../InventoryGroup/InventoryGroup';
import InventoryGroupsList from './InventoryGroupsList'; import InventoryGroupsList from './InventoryGroupsList';
function InventoryGroups({ setBreadcrumb, inventory, location, match }) { function InventoryGroups({ setBreadcrumb, inventory }) {
return ( return (
<Switch> <Switch>
<Route <Route
@@ -34,7 +34,7 @@ function InventoryGroups({ setBreadcrumb, inventory, location, match }) {
key="list" key="list"
path="/inventories/inventory/:id/groups" path="/inventories/inventory/:id/groups"
render={() => { render={() => {
return <InventoryGroupsList location={location} match={match} />; return <InventoryGroupsList />;
}} }}
/> />
</Switch> </Switch>
@@ -42,4 +42,4 @@ function InventoryGroups({ setBreadcrumb, inventory, location, match }) {
} }
export { InventoryGroups as _InventoryGroups }; export { InventoryGroups as _InventoryGroups };
export default withI18n()(withRouter(InventoryGroups)); export default withI18n()(InventoryGroups);

15
awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { withRouter } from 'react-router-dom'; import { useParams, useLocation } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { getQSConfig, parseQueryString } from '@util/qs'; import { getQSConfig, parseQueryString } from '@util/qs';
@@ -37,7 +37,7 @@ const useModal = () => {
}; };
}; };
function InventoryGroupsList({ i18n, location, match }) { function InventoryGroupsList({ i18n }) {
const [actions, setActions] = useState(null); const [actions, setActions] = useState(null);
const [contentError, setContentError] = useState(null); const [contentError, setContentError] = useState(null);
const [deletionError, setDeletionError] = useState(null); const [deletionError, setDeletionError] = useState(null);
@@ -47,7 +47,8 @@ function InventoryGroupsList({ i18n, location, match }) {
const [selected, setSelected] = useState([]); const [selected, setSelected] = useState([]);
const { isModalOpen, toggleModal } = useModal(); const { isModalOpen, toggleModal } = useModal();
const inventoryId = match.params.id; const { id: inventoryId } = useParams();
const { search } = useLocation();
const fetchGroups = (id, queryString) => { const fetchGroups = (id, queryString) => {
const params = parseQueryString(QS_CONFIG, queryString); const params = parseQueryString(QS_CONFIG, queryString);
return InventoriesAPI.readGroups(id, params); return InventoriesAPI.readGroups(id, params);
@@ -64,7 +65,7 @@ function InventoryGroupsList({ i18n, location, match }) {
data: { actions: optionActions }, data: { actions: optionActions },
}, },
] = await Promise.all([ ] = await Promise.all([
fetchGroups(inventoryId, location.search), fetchGroups(inventoryId, search),
InventoriesAPI.readGroupsOptions(inventoryId), InventoriesAPI.readGroupsOptions(inventoryId),
]); ]);
@@ -78,7 +79,7 @@ function InventoryGroupsList({ i18n, location, match }) {
} }
} }
fetchData(); fetchData();
}, [inventoryId, location]); }, [inventoryId, search]);
const handleSelectAll = isSelected => { const handleSelectAll = isSelected => {
setSelected(isSelected ? [...groups] : []); setSelected(isSelected ? [...groups] : []);
@@ -138,7 +139,7 @@ function InventoryGroupsList({ i18n, location, match }) {
try { try {
const { const {
data: { count, results }, data: { count, results },
} = await fetchGroups(inventoryId, location.search); } = await fetchGroups(inventoryId, search);
setGroups(results); setGroups(results);
setGroupCount(count); setGroupCount(count);
} catch (error) { } catch (error) {
@@ -263,4 +264,4 @@ function InventoryGroupsList({ i18n, location, match }) {
</> </>
); );
} }
export default withI18n()(withRouter(InventoryGroupsList)); export default withI18n()(InventoryGroupsList);

8
awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroups.jsx
View File

@@ -1,18 +1,18 @@
import React from 'react'; import React from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { Switch, Route, withRouter } from 'react-router-dom'; import { Switch, Route } from 'react-router-dom';
import InventoryHostGroupsList from './InventoryHostGroupsList'; import InventoryHostGroupsList from './InventoryHostGroupsList';
function InventoryHostGroups({ location, match }) { function InventoryHostGroups() {
return ( return (
<Switch> <Switch>
<Route <Route
key="list" key="list"
path="/inventories/inventory/:id/hosts/:hostId/groups" path="/inventories/inventory/:id/hosts/:hostId/groups"
render={() => { render={() => {
return <InventoryHostGroupsList location={location} match={match} />; return <InventoryHostGroupsList />;
}} }}
/> />
</Switch> </Switch>
@@ -20,4 +20,4 @@ function InventoryHostGroups({ location, match }) {
} }
export { InventoryHostGroups as _InventoryHostGroups }; export { InventoryHostGroups as _InventoryHostGroups };
export default withI18n()(withRouter(InventoryHostGroups)); export default withI18n()(InventoryHostGroups);

14
awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect, useCallback } from 'react'; import React, { useState, useEffect, useCallback } from 'react';
import { withRouter } from 'react-router-dom'; import { useParams, useLocation } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { getQSConfig, parseQueryString, mergeParams } from '@util/qs'; import { getQSConfig, parseQueryString, mergeParams } from '@util/qs';
@@ -25,10 +25,10 @@ const QS_CONFIG = getQSConfig('group', {
order_by: 'name', order_by: 'name',
}); });
function InventoryHostGroupsList({ i18n, location, match }) { function InventoryHostGroupsList({ i18n }) {
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const { hostId, id: invId } = useParams();
const { hostId, id: invId } = match.params; const { search } = useLocation();
const { const {
result: { groups, itemCount, actions }, result: { groups, itemCount, actions },
@@ -37,7 +37,7 @@ function InventoryHostGroupsList({ i18n, location, match }) {
request: fetchGroups, request: fetchGroups,
} = useRequest( } = useRequest(
useCallback(async () => { useCallback(async () => {
const params = parseQueryString(QS_CONFIG, location.search); const params = parseQueryString(QS_CONFIG, search);
const [ const [
{ {
@@ -54,7 +54,7 @@ function InventoryHostGroupsList({ i18n, location, match }) {
itemCount: count, itemCount: count,
actions: actionsResponse.data.actions, actions: actionsResponse.data.actions,
}; };
}, [hostId, location]), // eslint-disable-line react-hooks/exhaustive-deps }, [hostId, search]), // eslint-disable-line react-hooks/exhaustive-deps
{ {
groups: [], groups: [],
itemCount: 0, itemCount: 0,
@@ -226,4 +226,4 @@ function InventoryHostGroupsList({ i18n, location, match }) {
</> </>
); );
} }
export default withI18n()(withRouter(InventoryHostGroupsList)); export default withI18n()(InventoryHostGroupsList);

26
awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { withRouter } from 'react-router-dom'; import { useParams, useLocation } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { getQSConfig, parseQueryString } from '@util/qs'; import { getQSConfig, parseQueryString } from '@util/qs';
@@ -20,7 +20,7 @@ const QS_CONFIG = getQSConfig('host', {
order_by: 'name', order_by: 'name',
}); });
function InventoryHostList({ i18n, location, match }) { function InventoryHostList({ i18n }) {
const [actions, setActions] = useState(null); const [actions, setActions] = useState(null);
const [contentError, setContentError] = useState(null); const [contentError, setContentError] = useState(null);
const [deletionError, setDeletionError] = useState(null); const [deletionError, setDeletionError] = useState(null);
@@ -28,10 +28,12 @@ function InventoryHostList({ i18n, location, match }) {
const [hosts, setHosts] = useState([]); const [hosts, setHosts] = useState([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [selected, setSelected] = useState([]); const [selected, setSelected] = useState([]);
const { id } = useParams();
const { search } = useLocation();
const fetchHosts = (id, queryString) => { const fetchHosts = (hostId, queryString) => {
const params = parseQueryString(QS_CONFIG, queryString); const params = parseQueryString(QS_CONFIG, queryString);
return InventoriesAPI.readHosts(id, params); return InventoriesAPI.readHosts(hostId, params);
}; };
useEffect(() => { useEffect(() => {
@@ -45,7 +47,7 @@ function InventoryHostList({ i18n, location, match }) {
data: { actions: optionActions }, data: { actions: optionActions },
}, },
] = await Promise.all([ ] = await Promise.all([
fetchHosts(match.params.id, location.search), fetchHosts(id, search),
InventoriesAPI.readOptions(), InventoriesAPI.readOptions(),
]); ]);
@@ -60,7 +62,7 @@ function InventoryHostList({ i18n, location, match }) {
} }
fetchData(); fetchData();
}, [match.params.id, location]); }, [id, search]);
const handleSelectAll = isSelected => { const handleSelectAll = isSelected => {
setSelected(isSelected ? [...hosts] : []); setSelected(isSelected ? [...hosts] : []);
@@ -86,7 +88,7 @@ function InventoryHostList({ i18n, location, match }) {
try { try {
const { const {
data: { count, results }, data: { count, results },
} = await fetchHosts(match.params.id, location.search); } = await fetchHosts(id, search);
setHosts(results); setHosts(results);
setHostCount(count); setHostCount(count);
@@ -143,7 +145,7 @@ function InventoryHostList({ i18n, location, match }) {
? [ ? [
<ToolbarAddButton <ToolbarAddButton
key="add" key="add"
linkTo={`/inventories/inventory/${match.params.id}/hosts/add`} linkTo={`/inventories/inventory/${id}/hosts/add`}
/>, />,
] ]
: []), : []),
@@ -160,8 +162,8 @@ function InventoryHostList({ i18n, location, match }) {
<InventoryHostItem <InventoryHostItem
key={o.id} key={o.id}
host={o} host={o}
detailUrl={`/inventories/inventory/${match.params.id}/hosts/${o.id}/details`} detailUrl={`/inventories/inventory/${id}/hosts/${o.id}/details`}
editUrl={`/inventories/inventory/${match.params.id}/hosts/${o.id}/edit`} editUrl={`/inventories/inventory/${id}/hosts/${o.id}/edit`}
isSelected={selected.some(row => row.id === o.id)} isSelected={selected.some(row => row.id === o.id)}
onSelect={() => handleSelect(o)} onSelect={() => handleSelect(o)}
/> />
@@ -170,7 +172,7 @@ function InventoryHostList({ i18n, location, match }) {
canAdd && ( canAdd && (
<ToolbarAddButton <ToolbarAddButton
key="add" key="add"
linkTo={`/inventories/inventory/${match.params.id}/add`} linkTo={`/inventories/inventory/${id}/add`}
/> />
) )
} }
@@ -190,4 +192,4 @@ function InventoryHostList({ i18n, location, match }) {
); );
} }
export default withI18n()(withRouter(InventoryHostList)); export default withI18n()(InventoryHostList);