diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx index e128e9890a..7d559a11f9 100644 --- a/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx +++ b/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx @@ -9,7 +9,11 @@ import useRequest, { useDeleteItems } from '../../../util/useRequest'; import AlertModal from '../../../components/AlertModal'; import DataListToolbar from '../../../components/DataListToolbar'; import ErrorDetail from '../../../components/ErrorDetail'; -import PaginatedDataList, { +import PaginatedTable, { + HeaderRow, + HeaderCell, +} from '../../../components/PaginatedTable'; +import { ToolbarAddButton, ToolbarDeleteButton, } from '../../../components/PaginatedDataList'; @@ -112,7 +116,7 @@ function TeamList({ i18n }) { - + {i18n._(t`Name`)} + {i18n._(t`Organization`)} + + } renderToolbar={props => ( )} - renderItem={o => ( + renderRow={(team, index) => ( row.id === o.id)} - onSelect={() => handleSelect(o)} + key={team.id} + team={team} + detailUrl={`${match.url}/${team.id}`} + isSelected={selected.some(row => row.id === team.id)} + onSelect={() => handleSelect(team)} + rowIndex={index} /> )} emptyStateControls={ diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx index 0dfe158951..ce4a56b135 100644 --- a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx +++ b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx @@ -3,31 +3,21 @@ import React, { Fragment } from 'react'; import { string, bool, func } from 'prop-types'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; -import { - Button, - DataListAction as _DataListAction, - DataListCheck, - DataListItem, - DataListItemCells, - DataListItemRow, - Tooltip, -} from '@patternfly/react-core'; - -import styled from 'styled-components'; +import { Button } from '@patternfly/react-core'; +import { Tr, Td } from '@patternfly/react-table'; import { Link } from 'react-router-dom'; import { PencilAltIcon } from '@patternfly/react-icons'; -import DataListCell from '../../../components/DataListCell'; - +import { ActionsTd, ActionItem } from '../../../components/PaginatedTable'; import { Team } from '../../../types'; -const DataListAction = styled(_DataListAction)` - align-items: center; - display: grid; - grid-gap: 16px; - grid-template-columns: 40px; -`; - -function TeamListItem({ team, isSelected, onSelect, detailUrl, i18n }) { +function TeamListItem({ + team, + isSelected, + onSelect, + detailUrl, + rowIndex, + i18n, +}) { TeamListItem.propTypes = { team: Team.isRequired, detailUrl: string.isRequired, @@ -38,57 +28,45 @@ function TeamListItem({ team, isSelected, onSelect, detailUrl, i18n }) { const labelId = `check-action-${team.id}`; return ( - - - - - - {team.name} - - , - - {team.summary_fields.organization && ( - - {i18n._(t`Organization`)}{' '} - - {team.summary_fields.organization.name} - - - )} - , - ]} - /> - + + + + {team.name} + + + + {team.summary_fields.organization && ( + + {team.summary_fields.organization.name} + + )} + + + - {team.summary_fields.user_capabilities.edit ? ( - - - - ) : ( - '' - )} - - - + + + + ); } export default withI18n()(TeamListItem); diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.test.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.test.jsx index ffc2af1f35..377d37184e 100644 --- a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.test.jsx +++ b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.test.jsx @@ -11,20 +11,24 @@ describe('', () => { mountWithContexts( - {}} - /> + + + {}} + /> + +
); @@ -33,20 +37,24 @@ describe('', () => { const wrapper = mountWithContexts( - {}} - /> + + + {}} + /> + +
); @@ -56,20 +64,24 @@ describe('', () => { const wrapper = mountWithContexts( - {}} - /> + + + {}} + /> + +
);