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

@@ -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>

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>;
+}

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';

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[

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`}>

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>

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>

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}

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 ? (

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

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`

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

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>

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

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>

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>

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

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}

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>