External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-16 10:40:01 -03:30
Code Issues Packages Projects Releases Wiki Activity

Break lines for long strings on main lists

Browse Source 
Break lines for long strings on main lists to avoid horizontal
scrolling.

Main goal of this change is to avoid actions items to be hidden on the
main lists.

See: https://github.com/ansible/awx/issues/6302
This commit is contained in:
nixocio
2021-09-23 17:06:49 -04:00
parent 471f47cd9e
commit e8cd8c249c
19 changed files with 79 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
awx/ui/src/components/JobList/JobListItem.js
View File

@@ -8,7 +8,7 @@ import { RocketIcon } from '@patternfly/react-icons';
import styled from 'styled-components'; import styled from 'styled-components';
import { formatDateString } from 'util/dates'; import { formatDateString } from 'util/dates';
import { isJobRunning } from 'util/jobs'; import { isJobRunning } from 'util/jobs';
import { ActionsTd, ActionItem } from '../PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from '../PaginatedTable';
import { LaunchButton, ReLaunchDropDown } from '../LaunchButton'; import { LaunchButton, ReLaunchDropDown } from '../LaunchButton';
import StatusLabel from '../StatusLabel'; import StatusLabel from '../StatusLabel';
import { DetailList, Detail, LaunchedByDetail } from '../DetailList'; import { DetailList, Detail, LaunchedByDetail } from '../DetailList';
@@ -76,7 +76,7 @@ function JobListItem({
}} }}
dataLabel={t`Select`} dataLabel={t`Select`}
/> />
<Td id={labelId} dataLabel={t`Name`}> <TdBreakWord id={labelId} dataLabel={t`Name`}>
<span> <span>
<Link to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}> <Link to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}>
<b> <b>
@@ -84,7 +84,7 @@ function JobListItem({
</b> </b>
</Link> </Link>
</span> </span>
</Td> </TdBreakWord>
<Td dataLabel={t`Status`}> <Td dataLabel={t`Status`}>
{job.status && <StatusLabel status={job.status} />} {job.status && <StatusLabel status={job.status} />}
</Td> </Td>

13
awx/ui/src/components/PaginatedTable/TdBreakWord.js Normal file
View File

@@ -0,0 +1,13 @@
import React from 'react';
import { Td as _Td } from '@patternfly/react-table';
import styled from 'styled-components';
const Td = styled(_Td)`
&& {
word-break: break-all;
}
`;
export default function TdBreakWord({ children, ...props }) {
return <Td {...props}>{children}</Td>;
}

1
awx/ui/src/components/PaginatedTable/index.js
View File

@@ -6,3 +6,4 @@ export { default as ToolbarDeleteButton } from './ToolbarDeleteButton';
export { default as ToolbarAddButton } from './ToolbarAddButton'; export { default as ToolbarAddButton } from './ToolbarAddButton';
export { default as ToolbarSyncSourceButton } from './ToolbarSyncSourceButton'; export { default as ToolbarSyncSourceButton } from './ToolbarSyncSourceButton';
export { default as getSearchableKeys } from './getSearchableKeys'; export { default as getSearchableKeys } from './getSearchableKeys';
export { default as TdBreakWord } from './TdBreakWord';

6
awx/ui/src/components/Schedule/ScheduleList/ScheduleListItem.js
View File

@@ -14,7 +14,7 @@ import styled from 'styled-components';
import { Schedule } from 'types'; import { Schedule } from 'types';
import { formatDateString } from 'util/dates'; import { formatDateString } from 'util/dates';
import { DetailList, Detail } from '../../DetailList'; import { DetailList, Detail } from '../../DetailList';
import { ActionsTd, ActionItem } from '../../PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from '../../PaginatedTable';
import { ScheduleToggle } from '..'; import { ScheduleToggle } from '..';
const ExclamationTriangleIcon = styled(PFExclamationTriangleIcon)` const ExclamationTriangleIcon = styled(PFExclamationTriangleIcon)`
@@ -74,7 +74,7 @@ function ScheduleListItem({
}} }}
dataLabel={t`Selected`} dataLabel={t`Selected`}
/> />
<Td id={labelId} dataLabel={t`Name`}> <TdBreakWord id={labelId} dataLabel={t`Name`}>
<Link to={`${scheduleBaseUrl}/details`}> <Link to={`${scheduleBaseUrl}/details`}>
<b>{schedule.name}</b> <b>{schedule.name}</b>
</Link> </Link>
@@ -90,7 +90,7 @@ function ScheduleListItem({
</Tooltip> </Tooltip>
</span> </span>
)} )}
</Td> </TdBreakWord>
<Td dataLabel={t`Type`}> <Td dataLabel={t`Type`}>
{ {
jobTypeLabels[ jobTypeLabels[

6
awx/ui/src/components/TemplateList/TemplateListItem.js
View File

@@ -16,7 +16,7 @@ import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from 'api';
import { toTitleCase } from 'util/strings'; import { toTitleCase } from 'util/strings';
import getDocsBaseUrl from 'util/getDocsBaseUrl'; import getDocsBaseUrl from 'util/getDocsBaseUrl';
import { useConfig } from 'contexts/Config'; import { useConfig } from 'contexts/Config';
import { ActionsTd, ActionItem } from '../PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from '../PaginatedTable';
import { DetailList, Detail, DeletedDetail } from '../DetailList'; import { DetailList, Detail, DeletedDetail } from '../DetailList';
import ChipGroup from '../ChipGroup'; import ChipGroup from '../ChipGroup';
import CredentialChip from '../CredentialChip'; import CredentialChip from '../CredentialChip';
@@ -131,7 +131,7 @@ function TemplateListItem({
}} }}
dataLabel={t`Selected`} dataLabel={t`Selected`}
/> />
<Td id={labelId} dataLabel={t`Name`}> <TdBreakWord id={labelId} dataLabel={t`Name`}>
<Link to={`${detailUrl}`}> <Link to={`${detailUrl}`}>
<b>{template.name}</b> <b>{template.name}</b>
</Link> </Link>
@@ -172,7 +172,7 @@ function TemplateListItem({
</Popover> </Popover>
</span> </span>
)} )}
</Td> </TdBreakWord>
<Td dataLabel={t`Type`}>{toTitleCase(template.type)}</Td> <Td dataLabel={t`Type`}>{toTitleCase(template.type)}</Td>
<Td dataLabel={t`Last Ran`}>{lastRun}</Td> <Td dataLabel={t`Last Ran`}>{lastRun}</Td>
<ActionsTd dataLabel={t`Actions`}> <ActionsTd dataLabel={t`Actions`}>

11
awx/ui/src/screens/Application/ApplicationsList/ApplicationListItem.js
View File

@@ -1,12 +1,11 @@
import React from 'react'; import React from 'react';
import { string, bool, func } from 'prop-types'; import { string, bool, func } from 'prop-types';
import { Button } from '@patternfly/react-core'; import { Button } from '@patternfly/react-core';
import { Tr, Td } from '@patternfly/react-table'; import { Tr, Td } from '@patternfly/react-table';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import { ActionsTd, ActionItem } from 'components/PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
import { formatDateString } from 'util/dates'; import { formatDateString } from 'util/dates';
import { Application } from 'types'; import { Application } from 'types';
@@ -28,18 +27,18 @@ function ApplicationListItem({
}} }}
dataLabel={t`Selected`} dataLabel={t`Selected`}
/> />
<Td id={labelId} dataLabel={t`Name`}> <TdBreakWord id={labelId} dataLabel={t`Name`}>
<Link to={`${detailUrl}`}> <Link to={`${detailUrl}`}>
<b>{application.name}</b> <b>{application.name}</b>
</Link> </Link>
</Td> </TdBreakWord>
<Td dataLabel={t`Organization`}> <TdBreakWord dataLabel={t`Organization`}>
<Link <Link
to={`/organizations/${application.summary_fields.organization.id}`} to={`/organizations/${application.summary_fields.organization.id}`}
> >
<b>{application.summary_fields.organization.name}</b> <b>{application.summary_fields.organization.name}</b>
</Link> </Link>
</Td> </TdBreakWord>
<Td dataLabel={t`Last Modified`}> <Td dataLabel={t`Last Modified`}>
{formatDateString(application.modified)} {formatDateString(application.modified)}
</Td> </Td>

6
awx/ui/src/screens/Credential/CredentialList/CredentialListItem.js
View File

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
import { Button } from '@patternfly/react-core'; import { Button } from '@patternfly/react-core';
import { Tr, Td } from '@patternfly/react-table'; import { Tr, Td } from '@patternfly/react-table';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import { ActionsTd, ActionItem } from 'components/PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
import { timeOfDay } from 'util/dates'; import { timeOfDay } from 'util/dates';
import { Credential } from 'types'; import { Credential } from 'types';
@@ -52,11 +52,11 @@ function CredentialListItem({
}} }}
dataLabel={t`Selected`} dataLabel={t`Selected`}
/> />
<Td id={labelId} dataLabel={t`Name`}> <TdBreakWord id={labelId} dataLabel={t`Name`}>
<Link to={`${detailUrl}`}> <Link to={`${detailUrl}`}>
<b>{credential.name}</b> <b>{credential.name}</b>
</Link> </Link>
</Td> </TdBreakWord>
<Td dataLabel={t`Type`}> <Td dataLabel={t`Type`}>
{credential.summary_fields.credential_type.name} {credential.summary_fields.credential_type.name}
</Td> </Td>

7
awx/ui/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.js
View File

@@ -1,12 +1,11 @@
import React from 'react'; import React from 'react';
import { string, bool, func } from 'prop-types'; import { string, bool, func } from 'prop-types';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Button } from '@patternfly/react-core'; import { Button } from '@patternfly/react-core';
import { Tr, Td } from '@patternfly/react-table'; import { Tr, Td } from '@patternfly/react-table';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import { ActionsTd, ActionItem } from 'components/PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
import { CredentialType } from 'types'; import { CredentialType } from 'types';
function CredentialTypeListItem({ function CredentialTypeListItem({
@@ -28,11 +27,11 @@ function CredentialTypeListItem({
}} }}
dataLabel={t`Selected`} dataLabel={t`Selected`}
/> />
<Td id={labelId} dataLabel={t`Name`}> <TdBreakWord id={labelId} dataLabel={t`Name`}>
<Link to={`${detailUrl}`}> <Link to={`${detailUrl}`}>
<b>{credentialType.name}</b> <b>{credentialType.name}</b>
</Link> </Link>
</Td> </TdBreakWord>
<ActionsTd dataLabel={t`Actions`}> <ActionsTd dataLabel={t`Actions`}>
<ActionItem <ActionItem
visible={credentialType.summary_fields.user_capabilities.edit} visible={credentialType.summary_fields.user_capabilities.edit}

10
awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentListItem.js
View File

@@ -7,7 +7,7 @@ import { Button } from '@patternfly/react-core';
import { Tr, Td } from '@patternfly/react-table'; import { Tr, Td } from '@patternfly/react-table';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import { ActionsTd, ActionItem } from 'components/PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
import CopyButton from 'components/CopyButton'; import CopyButton from 'components/CopyButton';
import { ExecutionEnvironment } from 'types'; import { ExecutionEnvironment } from 'types';
import { ExecutionEnvironmentsAPI } from 'api'; import { ExecutionEnvironmentsAPI } from 'api';
@@ -18,7 +18,6 @@ function ExecutionEnvironmentListItem({
detailUrl, detailUrl,
isSelected, isSelected,
onSelect, onSelect,
rowIndex, rowIndex,
fetchExecutionEnvironments, fetchExecutionEnvironments,
}) { }) {
@@ -54,11 +53,14 @@ function ExecutionEnvironmentListItem({
}} }}
dataLabel={t`Selected`} dataLabel={t`Selected`}
/> />
<Td id={`ee-name-${executionEnvironment.id}`} dataLabel={t`Name`}> <TdBreakWord
id={`ee-name-${executionEnvironment.id}`}
dataLabel={t`Name`}
>
<Link to={`${detailUrl}`}> <Link to={`${detailUrl}`}>
<b>{executionEnvironment.name}</b> <b>{executionEnvironment.name}</b>
</Link> </Link>
</Td> </TdBreakWord>
<Td dataLabel={t`Image`}>{executionEnvironment.image}</Td> <Td dataLabel={t`Image`}>{executionEnvironment.image}</Td>
<Td dataLabel={t`Organization`}> <Td dataLabel={t`Organization`}>
{executionEnvironment.organization ? ( {executionEnvironment.organization ? (

10
awx/ui/src/screens/Host/HostList/HostListItem.js
View File

@@ -7,7 +7,7 @@ import { Button } from '@patternfly/react-core';
import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table'; import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import { ActionsTd, ActionItem } from 'components/PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
import { Host } from 'types'; import { Host } from 'types';
import HostToggle from 'components/HostToggle'; import HostToggle from 'components/HostToggle';
import { DetailList, Detail } from 'components/DetailList'; import { DetailList, Detail } from 'components/DetailList';
@@ -47,12 +47,12 @@ function HostListItem({
}} }}
dataLabel={t`Selected`} dataLabel={t`Selected`}
/> />
<Td id={labelId} dataLabel={t`Name`}> <TdBreakWord id={labelId} dataLabel={t`Name`}>
<Link to={`${detailUrl}`}> <Link to={`${detailUrl}`}>
<b>{host.name}</b> <b>{host.name}</b>
</Link> </Link>
</Td> </TdBreakWord>
<Td dataLabel={t`Inventory`}> <TdBreakWord dataLabel={t`Inventory`}>
{host.summary_fields.inventory && ( {host.summary_fields.inventory && (
<Link <Link
to={`/inventories/inventory/${host.summary_fields.inventory.id}/details`} to={`/inventories/inventory/${host.summary_fields.inventory.id}/details`}
@@ -60,7 +60,7 @@ function HostListItem({
{host.summary_fields.inventory.name} {host.summary_fields.inventory.name}
</Link> </Link>
)} )}
</Td> </TdBreakWord>
<ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px"> <ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
<HostToggle host={host} /> <HostToggle host={host} />
<ActionItem <ActionItem

6
awx/ui/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.js
View File

@@ -13,7 +13,7 @@ import {
import { Tr, Td } from '@patternfly/react-table'; import { Tr, Td } from '@patternfly/react-table';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import styled from 'styled-components'; import styled from 'styled-components';
import { ActionsTd, ActionItem } from 'components/PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
import { InstanceGroup } from 'types'; import { InstanceGroup } from 'types';
const Unavailable = styled.span` const Unavailable = styled.span`
@@ -58,11 +58,11 @@ function InstanceGroupListItem({
}} }}
dataLabel={t`Selected`} dataLabel={t`Selected`}
/> />
<Td id={labelId} dataLabel={t`Name`}> <TdBreakWord id={labelId} dataLabel={t`Name`}>
<Link to={`${detailUrl}`}> <Link to={`${detailUrl}`}>
<b>{instanceGroup.name}</b> <b>{instanceGroup.name}</b>
</Link> </Link>
</Td> </TdBreakWord>
<Td dataLabel={t`Type`}> <Td dataLabel={t`Type`}>
{isContainerGroup(instanceGroup) {isContainerGroup(instanceGroup)
? t`Container group` ? t`Container group`

6
awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostItem.js
View File

@@ -5,7 +5,7 @@ import { Button } from '@patternfly/react-core';
import { Tr, Td } from '@patternfly/react-table'; import { Tr, Td } from '@patternfly/react-table';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import { ActionsTd, ActionItem } from 'components/PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
import HostToggle from 'components/HostToggle'; import HostToggle from 'components/HostToggle';
import { Host } from 'types'; import { Host } from 'types';
@@ -30,11 +30,11 @@ function InventoryHostItem({
onSelect, onSelect,
}} }}
/> />
<Td id={labelId} dataLabel={t`Name`}> <TdBreakWord id={labelId} dataLabel={t`Name`}>
<Link to={`${detailUrl}`}> <Link to={`${detailUrl}`}>
<b>{host.name}</b> <b>{host.name}</b>
</Link> </Link>
</Td> </TdBreakWord>
<ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px"> <ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
<HostToggle host={host} /> <HostToggle host={host} />
<ActionItem <ActionItem

11
awx/ui/src/screens/Inventory/InventoryList/InventoryListItem.js
View File

@@ -9,7 +9,7 @@ import { Link } from 'react-router-dom';
import { timeOfDay } from 'util/dates'; import { timeOfDay } from 'util/dates';
import { InventoriesAPI } from 'api'; import { InventoriesAPI } from 'api';
import { Inventory } from 'types'; import { Inventory } from 'types';
import { ActionsTd, ActionItem } from 'components/PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
import CopyButton from 'components/CopyButton'; import CopyButton from 'components/CopyButton';
import StatusLabel from 'components/StatusLabel'; import StatusLabel from 'components/StatusLabel';
@@ -19,7 +19,6 @@ function InventoryListItem({
isSelected, isSelected,
onSelect, onSelect,
detailUrl, detailUrl,
fetchInventories, fetchInventories,
}) { }) {
InventoryListItem.propTypes = { InventoryListItem.propTypes = {
@@ -82,7 +81,7 @@ function InventoryListItem({
}} }}
dataLabel={t`Selected`} dataLabel={t`Selected`}
/> />
<Td id={labelId} dataLabel={t`Name`}> <TdBreakWord id={labelId} dataLabel={t`Name`}>
{inventory.pending_deletion ? ( {inventory.pending_deletion ? (
<b>{inventory.name}</b> <b>{inventory.name}</b>
) : ( ) : (
@@ -90,7 +89,7 @@ function InventoryListItem({
<b>{inventory.name}</b> <b>{inventory.name}</b>
</Link> </Link>
)} )}
</Td> </TdBreakWord>
<Td dataLabel={t`Status`}> <Td dataLabel={t`Status`}>
{inventory.kind !== 'smart' && ( {inventory.kind !== 'smart' && (
<StatusLabel status={syncStatus} tooltipContent={tooltipContent} /> <StatusLabel status={syncStatus} tooltipContent={tooltipContent} />
@@ -99,13 +98,13 @@ function InventoryListItem({
<Td dataLabel={t`Type`}> <Td dataLabel={t`Type`}>
{inventory.kind === 'smart' ? t`Smart Inventory` : t`Inventory`} {inventory.kind === 'smart' ? t`Smart Inventory` : t`Inventory`}
</Td> </Td>
<Td key="organization" dataLabel={t`Organization`}> <TdBreakWord key="organization" dataLabel={t`Organization`}>
<Link <Link
to={`/organizations/${inventory?.summary_fields?.organization?.id}/details`} to={`/organizations/${inventory?.summary_fields?.organization?.id}/details`}
> >
{inventory?.summary_fields?.organization?.name} {inventory?.summary_fields?.organization?.name}
</Link> </Link>
</Td> </TdBreakWord>
{inventory.pending_deletion ? ( {inventory.pending_deletion ? (
<Td dataLabel={t`Groups`}> <Td dataLabel={t`Groups`}>
<Label color="red">{t`Pending delete`}</Label> <Label color="red">{t`Pending delete`}</Label>

6
awx/ui/src/screens/Inventory/InventorySources/InventorySourceListItem.js
View File

@@ -9,7 +9,7 @@ import {
} from '@patternfly/react-icons'; } from '@patternfly/react-icons';
import styled from 'styled-components'; import styled from 'styled-components';
import { ActionsTd, ActionItem } from 'components/PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
import StatusLabel from 'components/StatusLabel'; import StatusLabel from 'components/StatusLabel';
import JobCancelButton from 'components/JobCancelButton'; import JobCancelButton from 'components/JobCancelButton';
import { formatDateString } from 'util/dates'; import { formatDateString } from 'util/dates';
@@ -67,7 +67,7 @@ function InventorySourceListItem({
onSelect, onSelect,
}} }}
/> />
<Td dataLabel={t`Name`}> <TdBreakWord dataLabel={t`Name`}>
<Link to={`${detailUrl}/details`}> <Link to={`${detailUrl}/details`}>
<b>{source.name}</b> <b>{source.name}</b>
</Link> </Link>
@@ -82,7 +82,7 @@ function InventorySourceListItem({
</Tooltip> </Tooltip>
</span> </span>
)} )}
</Td> </TdBreakWord>
<Td dataLabel={t`Status`}> <Td dataLabel={t`Status`}>
{job && ( {job && (
<Tooltip <Tooltip

7
awx/ui/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.js
View File

@@ -1,12 +1,11 @@
import 'styled-components/macro'; import 'styled-components/macro';
import React, { useState, useEffect, useCallback } from 'react'; import React, { useState, useEffect, useCallback } from 'react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Button } from '@patternfly/react-core'; import { Button } from '@patternfly/react-core';
import { Tr, Td } from '@patternfly/react-table'; import { Tr, Td } from '@patternfly/react-table';
import { PencilAltIcon, BellIcon } from '@patternfly/react-icons'; import { PencilAltIcon, BellIcon } from '@patternfly/react-icons';
import { ActionsTd, ActionItem } from 'components/PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
import { timeOfDay } from 'util/dates'; import { timeOfDay } from 'util/dates';
import { NotificationTemplatesAPI, NotificationsAPI } from 'api'; import { NotificationTemplatesAPI, NotificationsAPI } from 'api';
import StatusLabel from 'components/StatusLabel'; import StatusLabel from 'components/StatusLabel';
@@ -107,11 +106,11 @@ function NotificationTemplateListItem({
}} }}
dataLabel={t`Selected`} dataLabel={t`Selected`}
/> />
<Td id={labelId} dataLabel={t`Name`}> <TdBreakWord id={labelId} dataLabel={t`Name`}>
<Link to={`${detailUrl}`}> <Link to={`${detailUrl}`}>
<b>{template.name}</b> <b>{template.name}</b>
</Link> </Link>
</Td> </TdBreakWord>
<Td dataLabel={t`Status`}> <Td dataLabel={t`Status`}>
{status && <StatusLabel status={status} />} {status && <StatusLabel status={status} />}
</Td> </Td>

7
awx/ui/src/screens/Organization/OrganizationList/OrganizationListItem.js
View File

@@ -10,7 +10,7 @@ import {
ExclamationTriangleIcon as PFExclamationTriangleIcon, ExclamationTriangleIcon as PFExclamationTriangleIcon,
PencilAltIcon, PencilAltIcon,
} from '@patternfly/react-icons'; } from '@patternfly/react-icons';
import { ActionsTd, ActionItem } from 'components/PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
import { Organization } from 'types'; import { Organization } from 'types';
@@ -18,6 +18,7 @@ const ExclamationTriangleIcon = styled(PFExclamationTriangleIcon)`
color: var(--pf-global--warning-color--100); color: var(--pf-global--warning-color--100);
margin-left: 18px; margin-left: 18px;
`; `;
function OrganizationListItem({ function OrganizationListItem({
organization, organization,
isSelected, isSelected,
@@ -41,7 +42,7 @@ function OrganizationListItem({
}} }}
dataLabel={t`Selected`} dataLabel={t`Selected`}
/> />
<Td id={labelId} dataLabel={t`Name`}> <TdBreakWord id={labelId} dataLabel={t`Name`}>
<span> <span>
<Link to={`${detailUrl}`}> <Link to={`${detailUrl}`}>
<b>{organization.name}</b> <b>{organization.name}</b>
@@ -58,7 +59,7 @@ function OrganizationListItem({
</Tooltip> </Tooltip>
</span> </span>
)} )}
</Td> </TdBreakWord>
<Td dataLabel={t`Members`}> <Td dataLabel={t`Members`}>
{organization.summary_fields.related_field_counts.users} {organization.summary_fields.related_field_counts.users}
</Td> </Td>

6
awx/ui/src/screens/Project/ProjectList/ProjectListItem.js
View File

@@ -11,7 +11,7 @@ import {
UndoIcon, UndoIcon,
} from '@patternfly/react-icons'; } from '@patternfly/react-icons';
import styled from 'styled-components'; import styled from 'styled-components';
import { ActionsTd, ActionItem } from 'components/PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
import { formatDateString, timeOfDay } from 'util/dates'; import { formatDateString, timeOfDay } from 'util/dates';
import { ProjectsAPI } from 'api'; import { ProjectsAPI } from 'api';
import { DetailList, Detail, DeletedDetail } from 'components/DetailList'; import { DetailList, Detail, DeletedDetail } from 'components/DetailList';
@@ -171,7 +171,7 @@ function ProjectListItem({
}} }}
dataLabel={t`Selected`} dataLabel={t`Selected`}
/> />
<Td id={labelId} dataLabel={t`Name`}> <TdBreakWord id={labelId} dataLabel={t`Name`}>
<span> <span>
<Link to={`${detailUrl}`}> <Link to={`${detailUrl}`}>
<b>{project.name}</b> <b>{project.name}</b>
@@ -188,7 +188,7 @@ function ProjectListItem({
</Tooltip> </Tooltip>
</span> </span>
)} )}
</Td> </TdBreakWord>
<Td dataLabel={t`Status`}> <Td dataLabel={t`Status`}>
{job && ( {job && (
<Tooltip <Tooltip

12
awx/ui/src/screens/Team/TeamList/TeamListItem.js
View File

@@ -1,5 +1,5 @@
import 'styled-components/macro';
import React from 'react'; import React from 'react';
import 'styled-components/macro';
import { string, bool, func } from 'prop-types'; import { string, bool, func } from 'prop-types';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
@@ -7,7 +7,7 @@ import { Button } from '@patternfly/react-core';
import { Tr, Td } from '@patternfly/react-table'; import { Tr, Td } from '@patternfly/react-table';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import { ActionsTd, ActionItem } from 'components/PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
import { Team } from 'types'; import { Team } from 'types';
function TeamListItem({ team, isSelected, onSelect, detailUrl, rowIndex }) { function TeamListItem({ team, isSelected, onSelect, detailUrl, rowIndex }) {
@@ -30,12 +30,12 @@ function TeamListItem({ team, isSelected, onSelect, detailUrl, rowIndex }) {
}} }}
dataLabel={t`Selected`} dataLabel={t`Selected`}
/> />
<Td id={labelId} dataLabel={t`Name`}> <TdBreakWord id={labelId} dataLabel={t`Name`}>
<Link to={`${detailUrl}`}> <Link to={`${detailUrl}`}>
<b>{team.name}</b> <b>{team.name}</b>
</Link> </Link>
</Td> </TdBreakWord>
<Td dataLabel={t`Organization`}> <TdBreakWord dataLabel={t`Organization`}>
{team.summary_fields.organization && ( {team.summary_fields.organization && (
<Link <Link
to={`/organizations/${team.summary_fields.organization.id}/details`} to={`/organizations/${team.summary_fields.organization.id}/details`}
@@ -43,7 +43,7 @@ function TeamListItem({ team, isSelected, onSelect, detailUrl, rowIndex }) {
<b>{team.summary_fields.organization.name}</b> <b>{team.summary_fields.organization.name}</b>
</Link> </Link>
)} )}
</Td> </TdBreakWord>
<ActionsTd dataLabel={t`Actions`}> <ActionsTd dataLabel={t`Actions`}>
<ActionItem <ActionItem
visible={team.summary_fields.user_capabilities.edit} visible={team.summary_fields.user_capabilities.edit}

8
awx/ui/src/screens/User/UserList/UserListItem.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import 'styled-components/macro'; import 'styled-components/macro';
import React, { Fragment } from 'react';
import { string, bool, func } from 'prop-types'; import { string, bool, func } from 'prop-types';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
@@ -7,7 +7,7 @@ import { Button, Label } from '@patternfly/react-core';
import { Tr, Td } from '@patternfly/react-table'; import { Tr, Td } from '@patternfly/react-table';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import { ActionsTd, ActionItem } from 'components/PaginatedTable'; import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
import { User } from 'types'; import { User } from 'types';
@@ -35,7 +35,7 @@ function UserListItem({ user, isSelected, onSelect, detailUrl, rowIndex }) {
onSelect, onSelect,
}} }}
/> />
<Td id={labelId} dataLabel={t`Username`}> <TdBreakWord id={labelId} dataLabel={t`Username`}>
<Link to={`${detailUrl}`}> <Link to={`${detailUrl}`}>
<b>{user.username}</b> <b>{user.username}</b>
</Link> </Link>
@@ -49,7 +49,7 @@ function UserListItem({ user, isSelected, onSelect, detailUrl, rowIndex }) {
<Label aria-label={t`social login`}>{t`SOCIAL`}</Label> <Label aria-label={t`social login`}>{t`SOCIAL`}</Label>
</span> </span>
)} )}
</Td> </TdBreakWord>
<Td dataLabel={t`First Name`}> <Td dataLabel={t`First Name`}>
{user.first_name && <>{user.first_name}</>} {user.first_name && <>{user.first_name}</>}
</Td> </Td>