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

Merge pull request #11132 from nixocio/ui_issue_6302

Browse Source 
Break lines for long strings on main lists
This commit is contained in:
Sarah Akus
2021-09-27 11:05:14 -04:00
committed by GitHub
parent 76dc22cd06 e8cd8c249c
commit 84bc91defd
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>