diff --git a/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx b/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx
index 33dc4c70af..5bced479a6 100644
--- a/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx
+++ b/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx
@@ -96,7 +96,10 @@ function PaginatedTable({
Content = (
{hasContentLoading &&
}
-
+
{headerRow}
{items.map(renderRow)}
diff --git a/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationsList.jsx b/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationList.jsx
similarity index 73%
rename from awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationsList.jsx
rename to awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationList.jsx
index 4b06dbca7b..bc6a490cf9 100644
--- a/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationsList.jsx
+++ b/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationList.jsx
@@ -1,9 +1,11 @@
import React, { useCallback, useEffect } from 'react';
-
import { useLocation, useParams } from 'react-router-dom';
import { t } from '@lingui/macro';
-import PaginatedDataList from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+ HeaderRow,
+ HeaderCell,
+} from '../../../components/PaginatedTable';
import useRequest from '../../../util/useRequest';
import { UsersAPI } from '../../../api';
import { getQSConfig, parseQueryString } from '../../../util/qs';
@@ -16,7 +18,7 @@ const QS_CONFIG = getQSConfig('organizations', {
type: 'organization',
});
-function UserOrganizationsList() {
+function UserOrganizationList() {
const location = useLocation();
const { id: userId } = useParams();
@@ -47,14 +49,23 @@ function UserOrganizationsList() {
}, [fetchOrgs]);
return (
- (
+ toolbarSearchColumns={[
+ { name: t`Name`, key: 'name__icontains', isDefault: true },
+ ]}
+ headerRow={
+
+ {t`Name`}
+ {t`Description`}
+
+ }
+ renderRow={(organization, index) => (
{}}
isSelected={false}
+ rowIndex={index}
/>
)}
/>
);
}
-export default UserOrganizationsList;
+export default UserOrganizationList;
diff --git a/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationsList.test.jsx b/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationList.test.jsx
similarity index 93%
rename from awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationsList.test.jsx
rename to awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationList.test.jsx
index 445878983d..c10abc18e2 100644
--- a/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationsList.test.jsx
+++ b/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationList.test.jsx
@@ -7,7 +7,7 @@ import {
waitForElement,
} from '../../../../testUtils/enzymeHelpers';
-import UserOrganizationsList from './UserOrganizationsList';
+import UserOrganizationList from './UserOrganizationList';
import { UsersAPI } from '../../../api';
jest.mock('../../../api/models/Users');
@@ -15,6 +15,7 @@ jest.mock('../../../api/models/Users');
describe(' ', () => {
let history;
let wrapper;
+
beforeEach(async () => {
history = createMemoryHistory({
initialEntries: ['/users/1/organizations'],
@@ -36,7 +37,7 @@ describe(' ', () => {
wrapper = mountWithContexts(
}
+ component={() => }
/>,
{
context: {
@@ -52,12 +53,15 @@ describe(' ', () => {
);
});
});
+
afterEach(() => {
jest.clearAllMocks();
});
+
test('successfully mounts', async () => {
await waitForElement(wrapper, 'UserOrganizationListItem');
});
+
test('calls api to get organizations', () => {
expect(UsersAPI.readOrganizations).toBeCalledWith('1', {
order_by: 'name',
diff --git a/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.jsx b/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.jsx
index d31c1c7670..c44b55c75a 100644
--- a/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.jsx
+++ b/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.jsx
@@ -1,33 +1,18 @@
import React from 'react';
import { Link } from 'react-router-dom';
-import {
- DataListItemCells,
- DataListItemRow,
- DataListItem,
-} from '@patternfly/react-core';
-import DataListCell from '../../../components/DataListCell';
+import { t } from '@lingui/macro';
+import { Tr, Td } from '@patternfly/react-table';
export default function UserOrganizationListItem({ organization }) {
const labelId = `organization-${organization.id}`;
return (
-
-
-
-
- {organization.name}
-
- ,
-
- {organization.description}
- ,
- ]}
- />
-
-
+
+
+
+ {organization.name}
+
+
+ {organization.description}
+
);
}
diff --git a/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.test.jsx b/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.test.jsx
index 3a176a4a3c..672e196ad1 100644
--- a/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.test.jsx
+++ b/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.test.jsx
@@ -9,9 +9,13 @@ describe(' ', () => {
let wrapper;
act(() => {
wrapper = mountWithContexts(
-
+
);
});
expect(wrapper.find('UserOrganizationListItem').length).toBe(1);
@@ -20,20 +24,24 @@ describe(' ', () => {
let wrapper;
act(() => {
wrapper = mountWithContexts(
-
+
);
});
expect(
wrapper
- .find('DataListCell')
+ .find('Td')
.at(0)
.text()
).toBe('foo');
expect(
wrapper
- .find('DataListCell')
+ .find('Td')
.at(1)
.text()
).toBe('Bar');
diff --git a/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizations.jsx b/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizations.jsx
index 1bd83ad2fa..b38127ec90 100644
--- a/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizations.jsx
+++ b/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizations.jsx
@@ -1,7 +1,7 @@
import React from 'react';
-import UserOrganizationsList from './UserOrganizationsList';
+import UserOrganizationList from './UserOrganizationList';
function UserOrganizations() {
- return ;
+ return ;
}
export default UserOrganizations;
diff --git a/awx/ui_next/src/screens/User/UserRoles/UserRolesList.jsx b/awx/ui_next/src/screens/User/UserRoles/UserRolesList.jsx
index bd93777f83..cc35075388 100644
--- a/awx/ui_next/src/screens/User/UserRoles/UserRolesList.jsx
+++ b/awx/ui_next/src/screens/User/UserRoles/UserRolesList.jsx
@@ -1,6 +1,5 @@
import React, { useCallback, useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
-
import { t } from '@lingui/macro';
import {
Button,
@@ -13,7 +12,10 @@ import { CubesIcon } from '@patternfly/react-icons';
import { getQSConfig, parseQueryString } from '../../../util/qs';
import { UsersAPI, RolesAPI } from '../../../api';
import useRequest, { useDeleteItems } from '../../../util/useRequest';
-import PaginatedDataList from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+ HeaderRow,
+ HeaderCell,
+} from '../../../components/PaginatedTable';
import ErrorDetail from '../../../components/ErrorDetail';
import AlertModal from '../../../components/AlertModal';
@@ -131,7 +133,7 @@ function UserRolesList({ user }) {
}
return (
<>
- {
+ headerRow={
+
+ {t`Name`}
+ {t`Type`}
+ {t`Role`}
+
+ }
+ renderRow={(role, index) => {
return (
{
setRoleToDisassociate(item);
}}
+ rowIndex={index}
/>
);
}}
diff --git a/awx/ui_next/src/screens/User/UserRoles/UserRolesListItem.jsx b/awx/ui_next/src/screens/User/UserRoles/UserRolesListItem.jsx
index 1b93de5f6a..6b2a1144f0 100644
--- a/awx/ui_next/src/screens/User/UserRoles/UserRolesListItem.jsx
+++ b/awx/ui_next/src/screens/User/UserRoles/UserRolesListItem.jsx
@@ -1,67 +1,41 @@
import React from 'react';
-
import { t } from '@lingui/macro';
-import {
- DataListItem,
- DataListItemCells,
- DataListItemRow,
- Chip,
-} from '@patternfly/react-core';
+import { Chip } from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
import { Link } from 'react-router-dom';
-import { DetailList, Detail } from '../../../components/DetailList';
-import DataListCell from '../../../components/DataListCell';
function UserRolesListItem({ role, detailUrl, onSelect }) {
const labelId = `userRole-${role.id}`;
+
return (
-
-
-
- {role.summary_fields.resource_name ? (
-
- {role.summary_fields.resource_name}
-
- ) : (
- {t`System`}
- )}
- ,
-
- {role.summary_fields && (
-
-
-
- )}
- ,
-
- {role.name && (
-
- onSelect(role)}
- isReadOnly={
- !role.summary_fields.user_capabilities.unattach
- }
- >
- {role.name}
-
- }
- />
-
- )}
- ,
- ]}
- />
-
-
+
+
+ {role.summary_fields.resource_name ? (
+
+ {role.summary_fields.resource_name}
+
+ ) : (
+ t`System`
+ )}
+
+
+ {role.summary_fields
+ ? role.summary_fields.resource_type_display_name
+ : null}
+
+
+ {role.name ? (
+ onSelect(role)}
+ isReadOnly={!role.summary_fields.user_capabilities.unattach}
+ >
+ {role.name}
+
+ ) : null}
+
+
);
}
diff --git a/awx/ui_next/src/screens/User/UserRoles/UserRolesListItem.test.jsx b/awx/ui_next/src/screens/User/UserRoles/UserRolesListItem.test.jsx
index 21cd4b6974..0b17d35d9c 100644
--- a/awx/ui_next/src/screens/User/UserRoles/UserRolesListItem.test.jsx
+++ b/awx/ui_next/src/screens/User/UserRoles/UserRolesListItem.test.jsx
@@ -19,63 +19,84 @@ describe(' ', () => {
};
test('should mount properly', () => {
wrapper = mountWithContexts(
-
+
);
expect(wrapper.length).toBe(1);
});
test('should render proper list item data', () => {
wrapper = mountWithContexts(
-
+
);
- expect(
- wrapper.find('PFDataListCell[aria-label="Resource name"]').text()
- ).toBe('template delete project');
- expect(
- wrapper.find('PFDataListCell[aria-label="Resource type"]').text()
- ).toContain('Job Template');
- expect(
- wrapper.find('PFDataListCell[aria-label="Resource role"]').text()
- ).toContain('Admin');
+ const cells = wrapper.find('Td');
+ expect(cells.at(0).text()).toBe('template delete project');
+ expect(cells.at(1).text()).toContain('Job Template');
+ expect(cells.at(2).text()).toContain('Admin');
});
+
test('should render deletable chip', () => {
wrapper = mountWithContexts(
-
+
);
expect(wrapper.find('Chip').prop('isReadOnly')).toBe(false);
});
+
test('should render read only chip', () => {
role.summary_fields.user_capabilities.unattach = false;
wrapper = mountWithContexts(
-
+
);
expect(wrapper.find('Chip').prop('isReadOnly')).toBe(true);
});
+
test('should display System as name when no resource_name is present in summary_fields', () => {
wrapper = mountWithContexts(
-
+
);
expect(
- wrapper.find('PFDataListCell[aria-label="Resource name"]').text()
+ wrapper
+ .find('Td')
+ .at(0)
+ .text()
).toBe('System');
});
});
diff --git a/awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx b/awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx
index 4b037cc908..8560039bab 100644
--- a/awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx
+++ b/awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx
@@ -1,11 +1,12 @@
import React, { useState, useCallback, useEffect } from 'react';
-
import { useLocation, useParams } from 'react-router-dom';
import { t } from '@lingui/macro';
-import PaginatedDataList, {
- ToolbarAddButton,
-} from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+ HeaderRow,
+ HeaderCell,
+} from '../../../components/PaginatedTable';
+import { ToolbarAddButton } from '../../../components/PaginatedDataList';
import DataListToolbar from '../../../components/DataListToolbar';
import DisassociateButton from '../../../components/DisassociateButton';
import AssociateModal from '../../../components/AssociateModal';
@@ -168,7 +169,7 @@ function UserTeamList() {
return (
<>
- (
+ headerRow={
+
+ {t`Name`}
+ {t`Organization`}
+ {t`Description`}
+
+ }
+ renderRow={(team, index) => (
handleSelect(team)}
isSelected={selected.some(row => row.id === team.id)}
+ rowIndex={index}
/>
)}
renderToolbar={props => (
diff --git a/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.jsx b/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.jsx
index 71b7657a6f..aa080f81a3 100644
--- a/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.jsx
+++ b/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.jsx
@@ -1,61 +1,34 @@
import React from 'react';
import { bool, func } from 'prop-types';
import { Link } from 'react-router-dom';
-
import { t } from '@lingui/macro';
-import {
- DataListItemCells,
- DataListItemRow,
- DataListItem,
- DataListCheck,
- Split,
- SplitItem,
-} from '@patternfly/react-core';
-import DataListCell from '../../../components/DataListCell';
+import { Tr, Td } from '@patternfly/react-table';
import { Team } from '../../../types';
-function UserTeamListItem({ team, isSelected, onSelect }) {
+function UserTeamListItem({ team, isSelected, onSelect, rowIndex }) {
return (
-
-
-
-
-
- {team.name}
-
- ,
-
- {team.summary_fields.organization && (
-
-
- {t`Organization`} {' '}
-
-
-
- {team.summary_fields.organization.name}
-
-
-
- )}
- ,
- {team.description} ,
- ]}
- />
-
-
+
+
+
+ {team.name}
+
+
+ {team.summary_fields.organization ? (
+
+ {team.summary_fields.organization.name}
+
+ ) : null}
+
+ {team.description}
+
);
}
diff --git a/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.test.jsx b/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.test.jsx
index 4e911e11ab..6abbf73d35 100644
--- a/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.test.jsx
+++ b/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.test.jsx
@@ -1,6 +1,4 @@
import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import { I18nProvider } from '@lingui/react';
import { i18n } from '@lingui/core';
import { en } from 'make-plural/plurals';
import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
@@ -14,8 +12,8 @@ i18n.activate('en');
describe(' ', () => {
test('should render item', () => {
const wrapper = mountWithContexts(
-
-
+
+
', () => {
isSelected={false}
onSelect={() => {}}
/>
-
-
+
+
);
- const cells = wrapper.find('DataListCell');
- expect(cells).toHaveLength(3);
- expect(cells.at(0).text()).toEqual('Team 1');
- expect(cells.at(1).text()).toEqual('Organization The Org');
- expect(cells.at(2).text()).toEqual('something something team');
+ const cells = wrapper.find('Td');
+ expect(cells).toHaveLength(4);
+ expect(cells.at(1).text()).toEqual('Team 1');
+ expect(cells.at(2).text()).toEqual('The Org');
+ expect(cells.at(3).text()).toEqual('something something team');
});
});