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

convert user sub-lists to tables

Browse Source
This commit is contained in:
Keith J. Grant
2021-04-29 10:24:45 -07:00
parent 3addbeab4c
commit 7c86edd825
6 changed files with 107 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.jsx
View File

@@ -1,33 +1,18 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { import { t } from '@lingui/macro';
DataListItemCells, import { Tr, Td } from '@patternfly/react-table';
DataListItemRow,
DataListItem,
} from '@patternfly/react-core';
import DataListCell from '../../../components/DataListCell';
export default function UserOrganizationListItem({ organization }) { export default function UserOrganizationListItem({ organization }) {
const labelId = `organization-${organization.id}`; const labelId = `organization-${organization.id}`;
return ( return (
<DataListItem aria-labelledby={labelId}> <Tr id={`user-org-row-${organization.id}`}>
<DataListItemRow> <Td id={labelId} dataLabel={t`Name`}>
<DataListItemCells <Link to={`/organizations/${organization.id}/details`} id={labelId}>
dataListCells={[ {organization.name}
<DataListCell key={organization.id}> </Link>
<Link </Td>
to={`/organizations/${organization.id}/details`} <Td dataLabel={t`Description`}>{organization.description}</Td>
id={labelId} </Tr>
>
<b>{organization.name}</b>
</Link>
</DataListCell>,
<DataListCell key={organization.description}>
{organization.description}
</DataListCell>,
]}
/>
</DataListItemRow>
</DataListItem>
); );
} }

17
awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationsList.jsx
View File

@@ -1,9 +1,11 @@
import React, { useCallback, useEffect } from 'react'; import React, { useCallback, useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom'; import { useLocation, useParams } from 'react-router-dom';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import PaginatedDataList from '../../../components/PaginatedDataList'; import PaginatedTable, {
HeaderRow,
HeaderCell,
} from '../../../components/PaginatedTable';
import useRequest from '../../../util/useRequest'; import useRequest from '../../../util/useRequest';
import { UsersAPI } from '../../../api'; import { UsersAPI } from '../../../api';
import { getQSConfig, parseQueryString } from '../../../util/qs'; import { getQSConfig, parseQueryString } from '../../../util/qs';
@@ -47,14 +49,20 @@ function UserOrganizationsList() {
}, [fetchOrgs]); }, [fetchOrgs]);
return ( return (
<PaginatedDataList <PaginatedTable
items={organizations} items={organizations}
contentError={contentError} contentError={contentError}
hasContentLoading={isLoading} hasContentLoading={isLoading}
itemCount={count} itemCount={count}
pluralizedItemName={t`Organizations`} pluralizedItemName={t`Organizations`}
qsConfig={QS_CONFIG} qsConfig={QS_CONFIG}
renderItem={organization => ( headerRow={
<HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
<HeaderCell>{t`Description`}</HeaderCell>
</HeaderRow>
}
renderRow={(organization, index) => (
<UserOrganizationListItem <UserOrganizationListItem
key={organization.id} key={organization.id}
value={organization.name} value={organization.name}
@@ -62,6 +70,7 @@ function UserOrganizationsList() {
detailUrl={`/organizations/${organization.id}/details`} detailUrl={`/organizations/${organization.id}/details`}
onSelect={() => {}} onSelect={() => {}}
isSelected={false} isSelected={false}
rowIndex={index}
/> />
)} )}
/> />

18
awx/ui_next/src/screens/User/UserRoles/UserRolesList.jsx
View File

@@ -1,6 +1,5 @@
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
Button, Button,
@@ -13,7 +12,10 @@ import { CubesIcon } from '@patternfly/react-icons';
import { getQSConfig, parseQueryString } from '../../../util/qs'; import { getQSConfig, parseQueryString } from '../../../util/qs';
import { UsersAPI, RolesAPI } from '../../../api'; import { UsersAPI, RolesAPI } from '../../../api';
import useRequest, { useDeleteItems } from '../../../util/useRequest'; import useRequest, { useDeleteItems } from '../../../util/useRequest';
import PaginatedDataList from '../../../components/PaginatedDataList'; import PaginatedTable, {
HeaderRow,
HeaderCell,
} from '../../../components/PaginatedTable';
import ErrorDetail from '../../../components/ErrorDetail'; import ErrorDetail from '../../../components/ErrorDetail';
import AlertModal from '../../../components/AlertModal'; import AlertModal from '../../../components/AlertModal';
@@ -131,7 +133,7 @@ function UserRolesList({ user }) {
} }
return ( return (
<> <>
<PaginatedDataList <PaginatedTable
contentError={error} contentError={error}
hasContentLoading={isLoading || isDisassociateLoading} hasContentLoading={isLoading || isDisassociateLoading}
items={roles} items={roles}
@@ -153,7 +155,14 @@ function UserRolesList({ user }) {
]} ]}
toolbarSearchableKeys={searchableKeys} toolbarSearchableKeys={searchableKeys}
toolbarRelatedSearchableKeys={relatedSearchableKeys} toolbarRelatedSearchableKeys={relatedSearchableKeys}
renderItem={role => { headerRow={
<HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
<HeaderCell>{t`Type`}</HeaderCell>
<HeaderCell>{t`Role`}</HeaderCell>
</HeaderRow>
}
renderRow={(role, index) => {
return ( return (
<UserRolesListItem <UserRolesListItem
key={role.id} key={role.id}
@@ -164,6 +173,7 @@ function UserRolesList({ user }) {
onSelect={item => { onSelect={item => {
setRoleToDisassociate(item); setRoleToDisassociate(item);
}} }}
rowIndex={index}
/> />
); );
}} }}

88
awx/ui_next/src/screens/User/UserRoles/UserRolesListItem.jsx
View File

@@ -1,67 +1,41 @@
import React from 'react'; import React from 'react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import { Chip } from '@patternfly/react-core';
DataListItem, import { Tr, Td } from '@patternfly/react-table';
DataListItemCells,
DataListItemRow,
Chip,
} from '@patternfly/react-core';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { DetailList, Detail } from '../../../components/DetailList';
import DataListCell from '../../../components/DataListCell';
function UserRolesListItem({ role, detailUrl, onSelect }) { function UserRolesListItem({ role, detailUrl, onSelect }) {
const labelId = `userRole-${role.id}`; const labelId = `userRole-${role.id}`;
return ( return (
<DataListItem key={role.id} aria-labelledby={labelId} id={`${role.id}`}> <Tr id={`user-role-row-${role.id}`}>
<DataListItemRow> <Td id={labelId} dataLabel={t`Name`}>
<DataListItemCells {role.summary_fields.resource_name ? (
dataListCells={[ <Link to={`${detailUrl}`} id={labelId}>
<DataListCell key="name" aria-label={t`Resource name`}> {role.summary_fields.resource_name}
{role.summary_fields.resource_name ? ( </Link>
<Link to={`${detailUrl}`} id={labelId}> ) : (
<b>{role.summary_fields.resource_name}</b> t`System`
</Link> )}
) : ( </Td>
<b>{t`System`}</b> <Td dataLabel={t`Type`}>
)} {role.summary_fields
</DataListCell>, ? role.summary_fields.resource_type_display_name
<DataListCell key="type" aria-label={t`Resource type`}> : null}
{role.summary_fields && ( </Td>
<DetailList stacked> <Td dataLabel={t`Role`}>
<Detail {role.name ? (
label={t`Type`} <Chip
value={role.summary_fields.resource_type_display_name} key={role.name}
/> aria-label={role.name}
</DetailList> onClick={() => onSelect(role)}
)} isReadOnly={!role.summary_fields.user_capabilities.unattach}
</DataListCell>, >
<DataListCell key="role" aria-label={t`Resource role`}> {role.name}
{role.name && ( </Chip>
<DetailList stacked> ) : null}
<Detail </Td>
label={t`Role`} </Tr>
value={
<Chip
key={role.name}
aria-label={role.name}
onClick={() => onSelect(role)}
isReadOnly={
!role.summary_fields.user_capabilities.unattach
}
>
{role.name}
</Chip>
}
/>
</DetailList>
)}
</DataListCell>,
]}
/>
</DataListItemRow>
</DataListItem>
); );
} }

21
awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx
View File

@@ -1,11 +1,12 @@
import React, { useState, useCallback, useEffect } from 'react'; import React, { useState, useCallback, useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom'; import { useLocation, useParams } from 'react-router-dom';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import PaginatedDataList, { import PaginatedTable, {
ToolbarAddButton, HeaderRow,
} from '../../../components/PaginatedDataList'; HeaderCell,
} from '../../../components/PaginatedTable';
import { ToolbarAddButton } from '../../../components/PaginatedDataList';
import DataListToolbar from '../../../components/DataListToolbar'; import DataListToolbar from '../../../components/DataListToolbar';
import DisassociateButton from '../../../components/DisassociateButton'; import DisassociateButton from '../../../components/DisassociateButton';
import AssociateModal from '../../../components/AssociateModal'; import AssociateModal from '../../../components/AssociateModal';
@@ -168,7 +169,7 @@ function UserTeamList() {
return ( return (
<> <>
<PaginatedDataList <PaginatedTable
items={teams} items={teams}
contentError={contentError} contentError={contentError}
hasContentLoading={isLoading || isDisassociateLoading} hasContentLoading={isLoading || isDisassociateLoading}
@@ -176,7 +177,14 @@ function UserTeamList() {
pluralizedItemName={t`Teams`} pluralizedItemName={t`Teams`}
qsConfig={QS_CONFIG} qsConfig={QS_CONFIG}
onRowClick={handleSelect} onRowClick={handleSelect}
renderItem={team => ( headerRow={
<HeaderRow qsConfig={QS_CONFIG}>
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
<HeaderCell>{t`Organization`}</HeaderCell>
<HeaderCell>{t`Description`}</HeaderCell>
</HeaderRow>
}
renderRow={(team, index) => (
<UserTeamListItem <UserTeamListItem
key={team.id} key={team.id}
value={team.name} value={team.name}
@@ -184,6 +192,7 @@ function UserTeamList() {
detailUrl={`/teams/${team.id}/details`} detailUrl={`/teams/${team.id}/details`}
onSelect={() => handleSelect(team)} onSelect={() => handleSelect(team)}
isSelected={selected.some(row => row.id === team.id)} isSelected={selected.some(row => row.id === team.id)}
rowIndex={index}
/> />
)} )}
renderToolbar={props => ( renderToolbar={props => (

75
awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.jsx
View File

@@ -1,61 +1,34 @@
import React from 'react'; import React from 'react';
import { bool, func } from 'prop-types'; import { bool, func } from 'prop-types';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import { Tr, Td } from '@patternfly/react-table';
DataListItemCells,
DataListItemRow,
DataListItem,
DataListCheck,
Split,
SplitItem,
} from '@patternfly/react-core';
import DataListCell from '../../../components/DataListCell';
import { Team } from '../../../types'; import { Team } from '../../../types';
function UserTeamListItem({ team, isSelected, onSelect }) { function UserTeamListItem({ team, isSelected, onSelect, rowIndex }) {
return ( return (
<DataListItem <Tr id={`user-team-row-${team.id}`}>
key={team.id} <Td
id={`${team.id}`} select={{
aria-labelledby={`team-${team.id}`} rowIndex,
> isSelected,
<DataListItemRow> onSelect,
<DataListCheck }}
aria-labelledby={`team-${team.id}`} />
checked={isSelected} <Td id={`team-${team.id}`} dataLabel={t`Name`}>
id={`team-${team.id}`} <Link to={`/teams/${team.id}/details`}>{team.name}</Link>
onChange={onSelect} </Td>
/> <Td dataLabel={t`Organization`}>
<DataListItemCells {team.summary_fields.organization ? (
dataListCells={[ <Link
<DataListCell key="name"> to={`/organizations/${team.summary_fields.organization.id}/details`}
<Link to={`/teams/${team.id}/details`} id={`team-${team.id}`}> >
<b>{team.name}</b> {team.summary_fields.organization.name}
</Link> </Link>
</DataListCell>, ) : null}
<DataListCell key="organization"> </Td>
{team.summary_fields.organization && ( <Td dataLabel={t`Description`}>{team.description}</Td>
<Split hasGutter> </Tr>
<SplitItem>
<b>{t`Organization`}</b>{' '}
</SplitItem>
<SplitItem>
<Link
to={`/organizations/${team.summary_fields.organization.id}/details`}
>
<b>{team.summary_fields.organization.name}</b>
</Link>
</SplitItem>
</Split>
)}
</DataListCell>,
<DataListCell key="description">{team.description}</DataListCell>,
]}
/>
</DataListItemRow>
</DataListItem>
); );
} }