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'); }); });