mirror of
https://github.com/ansible/awx.git
synced 2024-10-27 17:55:10 +03:00
Merge pull request #11132 from nixocio/ui_issue_6302
Break lines for long strings on main lists
This commit is contained in:
commit
84bc91defd
@ -8,7 +8,7 @@ import { RocketIcon } from '@patternfly/react-icons';
|
||||
import styled from 'styled-components';
|
||||
import { formatDateString } from 'util/dates';
|
||||
import { isJobRunning } from 'util/jobs';
|
||||
import { ActionsTd, ActionItem } from '../PaginatedTable';
|
||||
import { ActionsTd, ActionItem, TdBreakWord } from '../PaginatedTable';
|
||||
import { LaunchButton, ReLaunchDropDown } from '../LaunchButton';
|
||||
import StatusLabel from '../StatusLabel';
|
||||
import { DetailList, Detail, LaunchedByDetail } from '../DetailList';
|
||||
@ -76,7 +76,7 @@ function JobListItem({
|
||||
}}
|
||||
dataLabel={t`Select`}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<TdBreakWord id={labelId} dataLabel={t`Name`}>
|
||||
<span>
|
||||
<Link to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}>
|
||||
<b>
|
||||
@ -84,7 +84,7 @@ function JobListItem({
|
||||
</b>
|
||||
</Link>
|
||||
</span>
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<Td dataLabel={t`Status`}>
|
||||
{job.status && <StatusLabel status={job.status} />}
|
||||
</Td>
|
||||
|
13
awx/ui/src/components/PaginatedTable/TdBreakWord.js
Normal file
13
awx/ui/src/components/PaginatedTable/TdBreakWord.js
Normal 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>;
|
||||
}
|
@ -6,3 +6,4 @@ export { default as ToolbarDeleteButton } from './ToolbarDeleteButton';
|
||||
export { default as ToolbarAddButton } from './ToolbarAddButton';
|
||||
export { default as ToolbarSyncSourceButton } from './ToolbarSyncSourceButton';
|
||||
export { default as getSearchableKeys } from './getSearchableKeys';
|
||||
export { default as TdBreakWord } from './TdBreakWord';
|
||||
|
@ -14,7 +14,7 @@ import styled from 'styled-components';
|
||||
import { Schedule } from 'types';
|
||||
import { formatDateString } from 'util/dates';
|
||||
import { DetailList, Detail } from '../../DetailList';
|
||||
import { ActionsTd, ActionItem } from '../../PaginatedTable';
|
||||
import { ActionsTd, ActionItem, TdBreakWord } from '../../PaginatedTable';
|
||||
import { ScheduleToggle } from '..';
|
||||
|
||||
const ExclamationTriangleIcon = styled(PFExclamationTriangleIcon)`
|
||||
@ -74,7 +74,7 @@ function ScheduleListItem({
|
||||
}}
|
||||
dataLabel={t`Selected`}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<TdBreakWord id={labelId} dataLabel={t`Name`}>
|
||||
<Link to={`${scheduleBaseUrl}/details`}>
|
||||
<b>{schedule.name}</b>
|
||||
</Link>
|
||||
@ -90,7 +90,7 @@ function ScheduleListItem({
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<Td dataLabel={t`Type`}>
|
||||
{
|
||||
jobTypeLabels[
|
||||
|
@ -16,7 +16,7 @@ import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from 'api';
|
||||
import { toTitleCase } from 'util/strings';
|
||||
import getDocsBaseUrl from 'util/getDocsBaseUrl';
|
||||
import { useConfig } from 'contexts/Config';
|
||||
import { ActionsTd, ActionItem } from '../PaginatedTable';
|
||||
import { ActionsTd, ActionItem, TdBreakWord } from '../PaginatedTable';
|
||||
import { DetailList, Detail, DeletedDetail } from '../DetailList';
|
||||
import ChipGroup from '../ChipGroup';
|
||||
import CredentialChip from '../CredentialChip';
|
||||
@ -131,7 +131,7 @@ function TemplateListItem({
|
||||
}}
|
||||
dataLabel={t`Selected`}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<TdBreakWord id={labelId} dataLabel={t`Name`}>
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{template.name}</b>
|
||||
</Link>
|
||||
@ -172,7 +172,7 @@ function TemplateListItem({
|
||||
</Popover>
|
||||
</span>
|
||||
)}
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<Td dataLabel={t`Type`}>{toTitleCase(template.type)}</Td>
|
||||
<Td dataLabel={t`Last Ran`}>{lastRun}</Td>
|
||||
<ActionsTd dataLabel={t`Actions`}>
|
||||
|
@ -1,12 +1,11 @@
|
||||
import React from 'react';
|
||||
import { string, bool, func } from 'prop-types';
|
||||
|
||||
import { Button } from '@patternfly/react-core';
|
||||
import { Tr, Td } from '@patternfly/react-table';
|
||||
import { t } from '@lingui/macro';
|
||||
import { Link } from 'react-router-dom';
|
||||
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 { Application } from 'types';
|
||||
|
||||
@ -28,18 +27,18 @@ function ApplicationListItem({
|
||||
}}
|
||||
dataLabel={t`Selected`}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<TdBreakWord id={labelId} dataLabel={t`Name`}>
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{application.name}</b>
|
||||
</Link>
|
||||
</Td>
|
||||
<Td dataLabel={t`Organization`}>
|
||||
</TdBreakWord>
|
||||
<TdBreakWord dataLabel={t`Organization`}>
|
||||
<Link
|
||||
to={`/organizations/${application.summary_fields.organization.id}`}
|
||||
>
|
||||
<b>{application.summary_fields.organization.name}</b>
|
||||
</Link>
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<Td dataLabel={t`Last Modified`}>
|
||||
{formatDateString(application.modified)}
|
||||
</Td>
|
||||
|
@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
|
||||
import { Button } from '@patternfly/react-core';
|
||||
import { Tr, Td } from '@patternfly/react-table';
|
||||
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 { Credential } from 'types';
|
||||
@ -52,11 +52,11 @@ function CredentialListItem({
|
||||
}}
|
||||
dataLabel={t`Selected`}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<TdBreakWord id={labelId} dataLabel={t`Name`}>
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{credential.name}</b>
|
||||
</Link>
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<Td dataLabel={t`Type`}>
|
||||
{credential.summary_fields.credential_type.name}
|
||||
</Td>
|
||||
|
@ -1,12 +1,11 @@
|
||||
import React from 'react';
|
||||
import { string, bool, func } from 'prop-types';
|
||||
|
||||
import { t } from '@lingui/macro';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Button } from '@patternfly/react-core';
|
||||
import { Tr, Td } from '@patternfly/react-table';
|
||||
import { PencilAltIcon } from '@patternfly/react-icons';
|
||||
import { ActionsTd, ActionItem } from 'components/PaginatedTable';
|
||||
import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
|
||||
import { CredentialType } from 'types';
|
||||
|
||||
function CredentialTypeListItem({
|
||||
@ -28,11 +27,11 @@ function CredentialTypeListItem({
|
||||
}}
|
||||
dataLabel={t`Selected`}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<TdBreakWord id={labelId} dataLabel={t`Name`}>
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{credentialType.name}</b>
|
||||
</Link>
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<ActionsTd dataLabel={t`Actions`}>
|
||||
<ActionItem
|
||||
visible={credentialType.summary_fields.user_capabilities.edit}
|
||||
|
@ -7,7 +7,7 @@ import { Button } from '@patternfly/react-core';
|
||||
import { Tr, Td } from '@patternfly/react-table';
|
||||
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 { ExecutionEnvironment } from 'types';
|
||||
import { ExecutionEnvironmentsAPI } from 'api';
|
||||
@ -18,7 +18,6 @@ function ExecutionEnvironmentListItem({
|
||||
detailUrl,
|
||||
isSelected,
|
||||
onSelect,
|
||||
|
||||
rowIndex,
|
||||
fetchExecutionEnvironments,
|
||||
}) {
|
||||
@ -54,11 +53,14 @@ function ExecutionEnvironmentListItem({
|
||||
}}
|
||||
dataLabel={t`Selected`}
|
||||
/>
|
||||
<Td id={`ee-name-${executionEnvironment.id}`} dataLabel={t`Name`}>
|
||||
<TdBreakWord
|
||||
id={`ee-name-${executionEnvironment.id}`}
|
||||
dataLabel={t`Name`}
|
||||
>
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{executionEnvironment.name}</b>
|
||||
</Link>
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<Td dataLabel={t`Image`}>{executionEnvironment.image}</Td>
|
||||
<Td dataLabel={t`Organization`}>
|
||||
{executionEnvironment.organization ? (
|
||||
|
@ -7,7 +7,7 @@ import { Button } from '@patternfly/react-core';
|
||||
import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { PencilAltIcon } from '@patternfly/react-icons';
|
||||
import { ActionsTd, ActionItem } from 'components/PaginatedTable';
|
||||
import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
|
||||
import { Host } from 'types';
|
||||
import HostToggle from 'components/HostToggle';
|
||||
import { DetailList, Detail } from 'components/DetailList';
|
||||
@ -47,12 +47,12 @@ function HostListItem({
|
||||
}}
|
||||
dataLabel={t`Selected`}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<TdBreakWord id={labelId} dataLabel={t`Name`}>
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{host.name}</b>
|
||||
</Link>
|
||||
</Td>
|
||||
<Td dataLabel={t`Inventory`}>
|
||||
</TdBreakWord>
|
||||
<TdBreakWord dataLabel={t`Inventory`}>
|
||||
{host.summary_fields.inventory && (
|
||||
<Link
|
||||
to={`/inventories/inventory/${host.summary_fields.inventory.id}/details`}
|
||||
@ -60,7 +60,7 @@ function HostListItem({
|
||||
{host.summary_fields.inventory.name}
|
||||
</Link>
|
||||
)}
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
|
||||
<HostToggle host={host} />
|
||||
<ActionItem
|
||||
|
@ -13,7 +13,7 @@ import {
|
||||
import { Tr, Td } from '@patternfly/react-table';
|
||||
import { PencilAltIcon } from '@patternfly/react-icons';
|
||||
import styled from 'styled-components';
|
||||
import { ActionsTd, ActionItem } from 'components/PaginatedTable';
|
||||
import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
|
||||
import { InstanceGroup } from 'types';
|
||||
|
||||
const Unavailable = styled.span`
|
||||
@ -58,11 +58,11 @@ function InstanceGroupListItem({
|
||||
}}
|
||||
dataLabel={t`Selected`}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<TdBreakWord id={labelId} dataLabel={t`Name`}>
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{instanceGroup.name}</b>
|
||||
</Link>
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<Td dataLabel={t`Type`}>
|
||||
{isContainerGroup(instanceGroup)
|
||||
? t`Container group`
|
||||
|
@ -5,7 +5,7 @@ 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 { ActionsTd, ActionItem } from 'components/PaginatedTable';
|
||||
import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
|
||||
|
||||
import HostToggle from 'components/HostToggle';
|
||||
import { Host } from 'types';
|
||||
@ -30,11 +30,11 @@ function InventoryHostItem({
|
||||
onSelect,
|
||||
}}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<TdBreakWord id={labelId} dataLabel={t`Name`}>
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{host.name}</b>
|
||||
</Link>
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
|
||||
<HostToggle host={host} />
|
||||
<ActionItem
|
||||
|
@ -9,7 +9,7 @@ import { Link } from 'react-router-dom';
|
||||
import { timeOfDay } from 'util/dates';
|
||||
import { InventoriesAPI } from 'api';
|
||||
import { Inventory } from 'types';
|
||||
import { ActionsTd, ActionItem } from 'components/PaginatedTable';
|
||||
import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
|
||||
import CopyButton from 'components/CopyButton';
|
||||
import StatusLabel from 'components/StatusLabel';
|
||||
|
||||
@ -19,7 +19,6 @@ function InventoryListItem({
|
||||
isSelected,
|
||||
onSelect,
|
||||
detailUrl,
|
||||
|
||||
fetchInventories,
|
||||
}) {
|
||||
InventoryListItem.propTypes = {
|
||||
@ -82,7 +81,7 @@ function InventoryListItem({
|
||||
}}
|
||||
dataLabel={t`Selected`}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<TdBreakWord id={labelId} dataLabel={t`Name`}>
|
||||
{inventory.pending_deletion ? (
|
||||
<b>{inventory.name}</b>
|
||||
) : (
|
||||
@ -90,7 +89,7 @@ function InventoryListItem({
|
||||
<b>{inventory.name}</b>
|
||||
</Link>
|
||||
)}
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<Td dataLabel={t`Status`}>
|
||||
{inventory.kind !== 'smart' && (
|
||||
<StatusLabel status={syncStatus} tooltipContent={tooltipContent} />
|
||||
@ -99,13 +98,13 @@ function InventoryListItem({
|
||||
<Td dataLabel={t`Type`}>
|
||||
{inventory.kind === 'smart' ? t`Smart Inventory` : t`Inventory`}
|
||||
</Td>
|
||||
<Td key="organization" dataLabel={t`Organization`}>
|
||||
<TdBreakWord key="organization" dataLabel={t`Organization`}>
|
||||
<Link
|
||||
to={`/organizations/${inventory?.summary_fields?.organization?.id}/details`}
|
||||
>
|
||||
{inventory?.summary_fields?.organization?.name}
|
||||
</Link>
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
{inventory.pending_deletion ? (
|
||||
<Td dataLabel={t`Groups`}>
|
||||
<Label color="red">{t`Pending delete`}</Label>
|
||||
|
@ -9,7 +9,7 @@ import {
|
||||
} from '@patternfly/react-icons';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { ActionsTd, ActionItem } from 'components/PaginatedTable';
|
||||
import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
|
||||
import StatusLabel from 'components/StatusLabel';
|
||||
import JobCancelButton from 'components/JobCancelButton';
|
||||
import { formatDateString } from 'util/dates';
|
||||
@ -67,7 +67,7 @@ function InventorySourceListItem({
|
||||
onSelect,
|
||||
}}
|
||||
/>
|
||||
<Td dataLabel={t`Name`}>
|
||||
<TdBreakWord dataLabel={t`Name`}>
|
||||
<Link to={`${detailUrl}/details`}>
|
||||
<b>{source.name}</b>
|
||||
</Link>
|
||||
@ -82,7 +82,7 @@ function InventorySourceListItem({
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<Td dataLabel={t`Status`}>
|
||||
{job && (
|
||||
<Tooltip
|
||||
|
@ -1,12 +1,11 @@
|
||||
import 'styled-components/macro';
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
|
||||
import { t } from '@lingui/macro';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Button } from '@patternfly/react-core';
|
||||
import { Tr, Td } from '@patternfly/react-table';
|
||||
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 { NotificationTemplatesAPI, NotificationsAPI } from 'api';
|
||||
import StatusLabel from 'components/StatusLabel';
|
||||
@ -107,11 +106,11 @@ function NotificationTemplateListItem({
|
||||
}}
|
||||
dataLabel={t`Selected`}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<TdBreakWord id={labelId} dataLabel={t`Name`}>
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{template.name}</b>
|
||||
</Link>
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<Td dataLabel={t`Status`}>
|
||||
{status && <StatusLabel status={status} />}
|
||||
</Td>
|
||||
|
@ -10,7 +10,7 @@ import {
|
||||
ExclamationTriangleIcon as PFExclamationTriangleIcon,
|
||||
PencilAltIcon,
|
||||
} from '@patternfly/react-icons';
|
||||
import { ActionsTd, ActionItem } from 'components/PaginatedTable';
|
||||
import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
|
||||
|
||||
import { Organization } from 'types';
|
||||
|
||||
@ -18,6 +18,7 @@ const ExclamationTriangleIcon = styled(PFExclamationTriangleIcon)`
|
||||
color: var(--pf-global--warning-color--100);
|
||||
margin-left: 18px;
|
||||
`;
|
||||
|
||||
function OrganizationListItem({
|
||||
organization,
|
||||
isSelected,
|
||||
@ -41,7 +42,7 @@ function OrganizationListItem({
|
||||
}}
|
||||
dataLabel={t`Selected`}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<TdBreakWord id={labelId} dataLabel={t`Name`}>
|
||||
<span>
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{organization.name}</b>
|
||||
@ -58,7 +59,7 @@ function OrganizationListItem({
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<Td dataLabel={t`Members`}>
|
||||
{organization.summary_fields.related_field_counts.users}
|
||||
</Td>
|
||||
|
@ -11,7 +11,7 @@ import {
|
||||
UndoIcon,
|
||||
} from '@patternfly/react-icons';
|
||||
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 { ProjectsAPI } from 'api';
|
||||
import { DetailList, Detail, DeletedDetail } from 'components/DetailList';
|
||||
@ -171,7 +171,7 @@ function ProjectListItem({
|
||||
}}
|
||||
dataLabel={t`Selected`}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<TdBreakWord id={labelId} dataLabel={t`Name`}>
|
||||
<span>
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{project.name}</b>
|
||||
@ -188,7 +188,7 @@ function ProjectListItem({
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<Td dataLabel={t`Status`}>
|
||||
{job && (
|
||||
<Tooltip
|
||||
|
@ -1,5 +1,5 @@
|
||||
import 'styled-components/macro';
|
||||
import React from 'react';
|
||||
import 'styled-components/macro';
|
||||
import { string, bool, func } from 'prop-types';
|
||||
|
||||
import { t } from '@lingui/macro';
|
||||
@ -7,7 +7,7 @@ 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 { ActionsTd, ActionItem } from 'components/PaginatedTable';
|
||||
import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
|
||||
import { Team } from 'types';
|
||||
|
||||
function TeamListItem({ team, isSelected, onSelect, detailUrl, rowIndex }) {
|
||||
@ -30,12 +30,12 @@ function TeamListItem({ team, isSelected, onSelect, detailUrl, rowIndex }) {
|
||||
}}
|
||||
dataLabel={t`Selected`}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Name`}>
|
||||
<TdBreakWord id={labelId} dataLabel={t`Name`}>
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{team.name}</b>
|
||||
</Link>
|
||||
</Td>
|
||||
<Td dataLabel={t`Organization`}>
|
||||
</TdBreakWord>
|
||||
<TdBreakWord dataLabel={t`Organization`}>
|
||||
{team.summary_fields.organization && (
|
||||
<Link
|
||||
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>
|
||||
</Link>
|
||||
)}
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<ActionsTd dataLabel={t`Actions`}>
|
||||
<ActionItem
|
||||
visible={team.summary_fields.user_capabilities.edit}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import 'styled-components/macro';
|
||||
import React, { Fragment } from 'react';
|
||||
import { string, bool, func } from 'prop-types';
|
||||
|
||||
import { t } from '@lingui/macro';
|
||||
@ -7,7 +7,7 @@ import { Button, Label } from '@patternfly/react-core';
|
||||
import { Tr, Td } from '@patternfly/react-table';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { PencilAltIcon } from '@patternfly/react-icons';
|
||||
import { ActionsTd, ActionItem } from 'components/PaginatedTable';
|
||||
import { ActionsTd, ActionItem, TdBreakWord } from 'components/PaginatedTable';
|
||||
|
||||
import { User } from 'types';
|
||||
|
||||
@ -35,7 +35,7 @@ function UserListItem({ user, isSelected, onSelect, detailUrl, rowIndex }) {
|
||||
onSelect,
|
||||
}}
|
||||
/>
|
||||
<Td id={labelId} dataLabel={t`Username`}>
|
||||
<TdBreakWord id={labelId} dataLabel={t`Username`}>
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{user.username}</b>
|
||||
</Link>
|
||||
@ -49,7 +49,7 @@ function UserListItem({ user, isSelected, onSelect, detailUrl, rowIndex }) {
|
||||
<Label aria-label={t`social login`}>{t`SOCIAL`}</Label>
|
||||
</span>
|
||||
)}
|
||||
</Td>
|
||||
</TdBreakWord>
|
||||
<Td dataLabel={t`First Name`}>
|
||||
{user.first_name && <>{user.first_name}</>}
|
||||
</Td>
|
||||
|
Loading…
Reference in New Issue
Block a user