Merge pull request #11132 from nixocio/ui_issue_6302

Break lines for long strings on main lists
2024-10-27 17:55:10 +03:00 · 2021-09-27 11:05:14 -04:00 · 2021-09-27 11:05:14 -04:00 · 84bc91defd
commit 84bc91defd
parent 76dc22cd06 e8cd8c249c
19 changed files with 79 additions and 66 deletions
--- a/awx/ui/src/components/JobList/JobListItem.js
+++ b/awx/ui/src/components/JobList/JobListItem.js
@ -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>
--- a/awx/ui/src/components/PaginatedTable/TdBreakWord.js
+++ b/awx/ui/src/components/PaginatedTable/TdBreakWord.js
@ -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>;
+}
--- a/awx/ui/src/components/PaginatedTable/index.js
+++ b/awx/ui/src/components/PaginatedTable/index.js
@ -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';
--- a/awx/ui/src/components/Schedule/ScheduleList/ScheduleListItem.js
+++ b/awx/ui/src/components/Schedule/ScheduleList/ScheduleListItem.js
@ -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[
--- a/awx/ui/src/components/TemplateList/TemplateListItem.js
+++ b/awx/ui/src/components/TemplateList/TemplateListItem.js
@ -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`}>
--- a/awx/ui/src/screens/Application/ApplicationsList/ApplicationListItem.js
+++ b/awx/ui/src/screens/Application/ApplicationsList/ApplicationListItem.js
@ -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>
--- a/awx/ui/src/screens/Credential/CredentialList/CredentialListItem.js
+++ b/awx/ui/src/screens/Credential/CredentialList/CredentialListItem.js
@ -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>
--- a/awx/ui/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.js
+++ b/awx/ui/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.js
@ -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}
--- a/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentListItem.js
+++ b/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentListItem.js
@ -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 ? (
--- a/awx/ui/src/screens/Host/HostList/HostListItem.js
+++ b/awx/ui/src/screens/Host/HostList/HostListItem.js
@ -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
--- a/awx/ui/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.js
+++ b/awx/ui/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.js
@ -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`
--- a/awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostItem.js
+++ b/awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostItem.js
@ -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
--- a/awx/ui/src/screens/Inventory/InventoryList/InventoryListItem.js
+++ b/awx/ui/src/screens/Inventory/InventoryList/InventoryListItem.js
@ -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>
--- a/awx/ui/src/screens/Inventory/InventorySources/InventorySourceListItem.js
+++ b/awx/ui/src/screens/Inventory/InventorySources/InventorySourceListItem.js
@ -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
--- a/awx/ui/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.js
+++ b/awx/ui/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.js
@ -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>
--- a/awx/ui/src/screens/Organization/OrganizationList/OrganizationListItem.js
+++ b/awx/ui/src/screens/Organization/OrganizationList/OrganizationListItem.js
@ -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>
--- a/awx/ui/src/screens/Project/ProjectList/ProjectListItem.js
+++ b/awx/ui/src/screens/Project/ProjectList/ProjectListItem.js
@ -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
--- a/awx/ui/src/screens/Team/TeamList/TeamListItem.js
+++ b/awx/ui/src/screens/Team/TeamList/TeamListItem.js
@ -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}
--- a/awx/ui/src/screens/User/UserList/UserListItem.js
+++ b/awx/ui/src/screens/User/UserList/UserListItem.js
@ -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>