From e8cd8c249c19add9c8cd59b59049f251822ebee1 Mon Sep 17 00:00:00 2001
From: nixocio <nixocio@gmail.com>
Date: Thu, 23 Sep 2021 17:06:49 -0400
Subject: [PATCH] Break lines for long strings on main lists

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
---
 awx/ui/src/components/JobList/JobListItem.js        |  6 +++---
 awx/ui/src/components/PaginatedTable/TdBreakWord.js | 13 +++++++++++++
 awx/ui/src/components/PaginatedTable/index.js       |  1 +
 .../Schedule/ScheduleList/ScheduleListItem.js       |  6 +++---
 .../src/components/TemplateList/TemplateListItem.js |  6 +++---
 .../ApplicationsList/ApplicationListItem.js         | 11 +++++------
 .../Credential/CredentialList/CredentialListItem.js |  6 +++---
 .../CredentialTypeList/CredentialTypeListItem.js    |  7 +++----
 .../ExecutionEnvironmentListItem.js                 | 10 ++++++----
 awx/ui/src/screens/Host/HostList/HostListItem.js    | 10 +++++-----
 .../InstanceGroupList/InstanceGroupListItem.js      |  6 +++---
 .../Inventory/InventoryHosts/InventoryHostItem.js   |  6 +++---
 .../Inventory/InventoryList/InventoryListItem.js    | 11 +++++------
 .../InventorySources/InventorySourceListItem.js     |  6 +++---
 .../NotificationTemplateListItem.js                 |  7 +++----
 .../OrganizationList/OrganizationListItem.js        |  7 ++++---
 .../screens/Project/ProjectList/ProjectListItem.js  |  6 +++---
 awx/ui/src/screens/Team/TeamList/TeamListItem.js    | 12 ++++++------
 awx/ui/src/screens/User/UserList/UserListItem.js    |  8 ++++----
 19 files changed, 79 insertions(+), 66 deletions(-)
 create mode 100644 awx/ui/src/components/PaginatedTable/TdBreakWord.js

diff --git a/awx/ui/src/components/JobList/JobListItem.js b/awx/ui/src/components/JobList/JobListItem.js
index 10a9f2d5e2..10a63d5c88 100644
--- 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>
diff --git a/awx/ui/src/components/PaginatedTable/TdBreakWord.js b/awx/ui/src/components/PaginatedTable/TdBreakWord.js
new file mode 100644
index 0000000000..4b8c69bcf4
--- /dev/null
+++ 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>;
+}
diff --git a/awx/ui/src/components/PaginatedTable/index.js b/awx/ui/src/components/PaginatedTable/index.js
index 67b83c87c2..9b64b0e9f5 100644
--- 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';
diff --git a/awx/ui/src/components/Schedule/ScheduleList/ScheduleListItem.js b/awx/ui/src/components/Schedule/ScheduleList/ScheduleListItem.js
index 1b33cf4875..b29bbb30b4 100644
--- 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[
diff --git a/awx/ui/src/components/TemplateList/TemplateListItem.js b/awx/ui/src/components/TemplateList/TemplateListItem.js
index e3ed4e77d4..f5fb74fda5 100644
--- 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`}>
diff --git a/awx/ui/src/screens/Application/ApplicationsList/ApplicationListItem.js b/awx/ui/src/screens/Application/ApplicationsList/ApplicationListItem.js
index afd5ea3ce4..e0c5708602 100644
--- 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>
diff --git a/awx/ui/src/screens/Credential/CredentialList/CredentialListItem.js b/awx/ui/src/screens/Credential/CredentialList/CredentialListItem.js
index a1a68be929..c6b95964bd 100644
--- 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>
diff --git a/awx/ui/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.js b/awx/ui/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.js
index e1519db504..245fe8b0e6 100644
--- 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}
diff --git a/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentListItem.js b/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentListItem.js
index 3ce46c4f26..83f64e1ec0 100644
--- 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 ? (
diff --git a/awx/ui/src/screens/Host/HostList/HostListItem.js b/awx/ui/src/screens/Host/HostList/HostListItem.js
index 6bf291a979..1ddfdfc855 100644
--- 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
diff --git a/awx/ui/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.js b/awx/ui/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.js
index 30a0a394fc..b85705d6d2 100644
--- 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`
diff --git a/awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostItem.js b/awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostItem.js
index 52779ca82e..e92bd886e9 100644
--- 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
diff --git a/awx/ui/src/screens/Inventory/InventoryList/InventoryListItem.js b/awx/ui/src/screens/Inventory/InventoryList/InventoryListItem.js
index fc56087f59..7ad6a344a6 100644
--- 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>
diff --git a/awx/ui/src/screens/Inventory/InventorySources/InventorySourceListItem.js b/awx/ui/src/screens/Inventory/InventorySources/InventorySourceListItem.js
index 21c6fdd90a..9df8993d82 100644
--- 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
diff --git a/awx/ui/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.js b/awx/ui/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.js
index d87740a78b..b648cf0391 100644
--- 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>
diff --git a/awx/ui/src/screens/Organization/OrganizationList/OrganizationListItem.js b/awx/ui/src/screens/Organization/OrganizationList/OrganizationListItem.js
index c88344e91f..68071c3c01 100644
--- 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>
diff --git a/awx/ui/src/screens/Project/ProjectList/ProjectListItem.js b/awx/ui/src/screens/Project/ProjectList/ProjectListItem.js
index fff07c9110..47d65a4fcc 100644
--- 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
diff --git a/awx/ui/src/screens/Team/TeamList/TeamListItem.js b/awx/ui/src/screens/Team/TeamList/TeamListItem.js
index c80ed63099..5c42efd5b1 100644
--- 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}
diff --git a/awx/ui/src/screens/User/UserList/UserListItem.js b/awx/ui/src/screens/User/UserList/UserListItem.js
index 3b4248607a..a7c8397eab 100644
--- 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>