zware/awx
1
0
Fork 0
mirror of https://github.com/ZwareBear/awx.git synced 2026-04-24 08:51:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add namespacing for query params (#205)

Browse Source 
* use qs utils to namespace query params

* refactor Lookup and SelectResource Steps to use PaginatedDataList

* preserve query params when adding new ones

* require namespace for QS Configs
This commit is contained in:
Keith Grant
2019-05-15 10:06:14 -04:00
committed by GitHub
parent d59975c1ad
commit 4407aeac20
19 changed files with 2656 additions and 2648 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/Organizations/screens/Organization/OrganizationAccess.jsx
View File

@@ -6,14 +6,14 @@ import OrganizationAccessItem from '../../components/OrganizationAccessItem';
import DeleteRoleConfirmationModal from '../../components/DeleteRoleConfirmationModal';
import AddResourceRole from '../../../../components/AddRole/AddResourceRole';
import { withNetwork } from '../../../../contexts/Network';
import { parseQueryString } from '../../../../util/qs';
import { getQSConfig, parseNamespacedQueryString } from '../../../../util/qs';
import { Organization } from '../../../../types';
const DEFAULT_QUERY_PARAMS = {
const QS_CONFIG = getQSConfig('access', {
page: 1,
page_size: 5,
order_by: 'first_name',
};
});
class OrganizationAccess extends React.Component {
static propTypes = {
@@ -54,12 +54,12 @@ class OrganizationAccess extends React.Component {
}
async readOrgAccessList () {
const { organization, api, handleHttpError } = this.props;
const { organization, api, handleHttpError, location } = this.props;
this.setState({ isLoading: true });
try {
const { data } = await api.getOrganizationAccessList(
organization.id,
this.getQueryParams()
parseNamespacedQueryString(QS_CONFIG, location.search)
);
this.setState({
itemCount: data.count || 0,
@@ -75,16 +75,6 @@ class OrganizationAccess extends React.Component {
}
}
getQueryParams () {
const { location } = this.props;
const searchParams = parseQueryString(location.search.substring(1));
return {
...DEFAULT_QUERY_PARAMS,
...searchParams,
};
}
confirmRemoveRole (role, accessRecord) {
this.setState({
roleToDelete: role,
@@ -175,7 +165,7 @@ class OrganizationAccess extends React.Component {
items={accessRecords}
itemCount={itemCount}
itemName="role"
queryParams={this.getQueryParams()}
qsConfig={QS_CONFIG}
toolbarColumns={[
{ name: i18nMark('Name'), key: 'first_name', isSortable: true },
{ name: i18nMark('Username'), key: 'username', isSortable: true },

22
src/pages/Organizations/screens/Organization/OrganizationNotifications.jsx
View File

@@ -4,13 +4,13 @@ import { withRouter } from 'react-router-dom';
import { withNetwork } from '../../../../contexts/Network';
import PaginatedDataList from '../../../../components/PaginatedDataList';
import NotificationListItem from '../../../../components/NotificationsList/NotificationListItem';
import { parseQueryString } from '../../../../util/qs';
import { getQSConfig, parseNamespacedQueryString } from '../../../../util/qs';
const DEFAULT_QUERY_PARAMS = {
const QS_CONFIG = getQSConfig('notification', {
page: 1,
page_size: 5,
order_by: 'name',
};
});
const COLUMNS = [
{ key: 'name', name: 'Name', isSortable: true },
@@ -48,19 +48,9 @@ class OrganizationNotifications extends Component {
}
}
getQueryParams () {
const { location } = this.props;
const searchParams = parseQueryString(location.search.substring(1));
return {
...DEFAULT_QUERY_PARAMS,
...searchParams,
};
}
async readNotifications () {
const { api, handleHttpError, id } = this.props;
const params = this.getQueryParams();
const { id, api, handleHttpError, location } = this.props;
const params = parseNamespacedQueryString(QS_CONFIG, location.search);
this.setState({ isLoading: true });
try {
const { data } = await api.getOrganizationNotifications(id, params);
@@ -191,7 +181,7 @@ class OrganizationNotifications extends Component {
items={notifications}
itemCount={itemCount}
itemName="notification"
queryParams={this.getQueryParams()}
qsConfig={QS_CONFIG}
toolbarColumns={COLUMNS}
renderItem={(notification) => (
<NotificationListItem

22
src/pages/Organizations/screens/Organization/OrganizationTeams.jsx
View File

@@ -2,14 +2,14 @@ import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import PaginatedDataList from '../../../../components/PaginatedDataList';
import { parseQueryString } from '../../../../util/qs';
import { getQSConfig, parseNamespacedQueryString } from '../../../../util/qs';
import { withNetwork } from '../../../../contexts/Network';
const DEFAULT_QUERY_PARAMS = {
const QS_CONFIG = getQSConfig('team', {
page: 1,
page_size: 5,
order_by: 'name',
};
});
class OrganizationTeams extends React.Component {
constructor (props) {
@@ -37,19 +37,9 @@ class OrganizationTeams extends React.Component {
}
}
getQueryParams () {
const { location } = this.props;
const searchParams = parseQueryString(location.search.substring(1));
return {
...DEFAULT_QUERY_PARAMS,
...searchParams,
};
}
async readOrganizationTeamsList () {
const { api, handleHttpError, id } = this.props;
const params = this.getQueryParams();
const { id, api, handleHttpError, location } = this.props;
const params = parseNamespacedQueryString(QS_CONFIG, location.search);
this.setState({ isLoading: true, error: null });
try {
const {
@@ -86,7 +76,7 @@ class OrganizationTeams extends React.Component {
items={teams}
itemCount={itemCount}
itemName="team"
queryParams={this.getQueryParams()}
qsConfig={QS_CONFIG}
/>
)}
</Fragment>

37
src/pages/Organizations/screens/OrganizationsList.jsx
View File

@@ -13,7 +13,7 @@ import PaginatedDataList, {
ToolbarAddButton
} from '../../../components/PaginatedDataList';
import OrganizationListItem from '../components/OrganizationListItem';
import { encodeQueryString, parseQueryString } from '../../../util/qs';
import { getQSConfig, parseNamespacedQueryString } from '../../../util/qs';
const COLUMNS = [
{ name: i18nMark('Name'), key: 'name', isSortable: true },
@@ -21,11 +21,11 @@ const COLUMNS = [
{ name: i18nMark('Created'), key: 'created', isSortable: true, isNumeric: true },
];
const DEFAULT_QUERY_PARAMS = {
const QS_CONFIG = getQSConfig('organization', {
page: 1,
page_size: 5,
order_by: 'name',
};
});
class OrganizationsList extends Component {
constructor (props) {
@@ -39,10 +39,8 @@ class OrganizationsList extends Component {
selected: [],
};
this.getQueryParams = this.getQueryParams.bind(this);
this.handleSelectAll = this.handleSelectAll.bind(this);
this.handleSelect = this.handleSelect.bind(this);
this.updateUrl = this.updateUrl.bind(this);
this.fetchOptionsOrganizations = this.fetchOptionsOrganizations.bind(this);
this.fetchOrganizations = this.fetchOrganizations.bind(this);
this.handleOrgDelete = this.handleOrgDelete.bind(this);
@@ -77,16 +75,6 @@ class OrganizationsList extends Component {
}
}
getQueryParams () {
const { location } = this.props;
const searchParams = parseQueryString(location.search.substring(1));
return {
...DEFAULT_QUERY_PARAMS,
...searchParams,
};
}
async handleOrgDelete () {
const { selected } = this.state;
const { api, handleHttpError } = this.props;
@@ -101,25 +89,14 @@ class OrganizationsList extends Component {
errorHandled = handleHttpError(err);
} finally {
if (!errorHandled) {
const queryParams = this.getQueryParams();
this.fetchOrganizations(queryParams);
this.fetchOrganizations();
}
}
}
updateUrl (queryParams) {
const { history, location } = this.props;
const pathname = '/organizations';
const search = `?${encodeQueryString(queryParams)}`;
if (search !== location.search) {
history.replace({ pathname, search });
}
}
async fetchOrganizations () {
const { api, handleHttpError } = this.props;
const params = this.getQueryParams();
const { api, handleHttpError, location } = this.props;
const params = parseNamespacedQueryString(QS_CONFIG, location.search);
this.setState({ error: false, isLoading: true });
@@ -185,7 +162,7 @@ class OrganizationsList extends Component {
items={organizations}
itemCount={itemCount}
itemName="organization"
queryParams={this.getQueryParams()}
qsConfig={QS_CONFIG}
toolbarColumns={COLUMNS}
showSelectAll
isAllSelected={isAllSelected}