diff --git a/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx b/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx index 0213d7d113..d6ec3949d5 100644 --- a/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx +++ b/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx @@ -4,10 +4,10 @@ import { DataListItem, DataListItemRow, DataListItemCells, - DataListCell, DataListCheck, Radio, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; const CheckboxListItem = ({ isDisabled = false, diff --git a/awx/ui_next/src/components/DataListCell/DataListCell.jsx b/awx/ui_next/src/components/DataListCell/DataListCell.jsx new file mode 100644 index 0000000000..4cb698b50c --- /dev/null +++ b/awx/ui_next/src/components/DataListCell/DataListCell.jsx @@ -0,0 +1,9 @@ +import { DataListCell } from '@patternfly/react-core'; +import styled from 'styled-components'; + +DataListCell.displayName = 'PFDataListCell'; +// Once https://github.com/patternfly/patternfly-react/issues/3938 +// has been resolved this component can be removed +export default styled(DataListCell)` + word-break: break-word; +`; diff --git a/awx/ui_next/src/components/DataListCell/index.js b/awx/ui_next/src/components/DataListCell/index.js new file mode 100644 index 0000000000..d925b63c7d --- /dev/null +++ b/awx/ui_next/src/components/DataListCell/index.js @@ -0,0 +1 @@ +export { default } from './DataListCell'; diff --git a/awx/ui_next/src/components/JobList/JobListItem.jsx b/awx/ui_next/src/components/JobList/JobListItem.jsx index fc280498cf..b38e85b11e 100644 --- a/awx/ui_next/src/components/JobList/JobListItem.jsx +++ b/awx/ui_next/src/components/JobList/JobListItem.jsx @@ -5,13 +5,13 @@ import { t } from '@lingui/macro'; import { Button, DataListAction as _DataListAction, - DataListCell, DataListCheck, DataListItem, DataListItemRow, DataListItemCells, Tooltip, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; import { RocketIcon } from '@patternfly/react-icons'; import LaunchButton from '@components/LaunchButton'; import StatusIcon from '@components/StatusIcon'; diff --git a/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx b/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx index 6a2c1f8437..8abed19246 100644 --- a/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx +++ b/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx @@ -5,12 +5,13 @@ import { t } from '@lingui/macro'; import { Link } from 'react-router-dom'; import { DataListAction as _DataListAction, - DataListCell, DataListItem, DataListItemCells, DataListItemRow, Switch, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; + import styled from 'styled-components'; const DataListAction = styled(_DataListAction)` diff --git a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap b/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap index e5637195ce..d817689533 100644 --- a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap +++ b/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap @@ -71,42 +71,102 @@ exports[` initially renders succe -
- + - - - - Foo - - - - -
+ + + Foo + + + + + + + -
- Slack -
+ +
+ Slack +
+ + diff --git a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx index 43b3263618..810d07c0db 100644 --- a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx +++ b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx @@ -4,9 +4,9 @@ import { DataListItem, DataListItemRow, DataListItemCells, - DataListCell, TextContent, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; import styled from 'styled-components'; const DetailWrapper = styled(TextContent)` diff --git a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx index 63c44e5a2a..70e4047ac7 100644 --- a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx +++ b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx @@ -8,11 +8,11 @@ import { DataListItem, DataListItemRow, DataListItemCells as PFDataListItemCells, - DataListCell, Text, TextContent, TextVariants, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; diff --git a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap index 13806f3290..ab88ab9847 100644 --- a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap +++ b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap @@ -266,634 +266,694 @@ exports[` initially renders succesfully 1`] = ` -
- +
- -
+
- - - - - - jane - - - - - -
- -
- - - - - -
- - - + + + jane + + + + + + + +
+ + + + + +
+ + - -
- Name -
- - - - - - - +
+ Name +
+ + + + + - -
- jane brown -
- - - - - -
- + +
+ jane brown +
+ + + + + + + + + - - - + + + -
- - - -
- - - Member - - - } + - - + + Member + + + } > - - -
- Team Roles -
- - - - - - - +
+ Team Roles +
+ + + + + - -
- -
    - - - - - -
  • - - Member - - - - - - -
    • -     -     -     -     -     -
- -
- - - - - -
- + + + + + + + + + + + + + + + + + + + + + + + + - - -
+ + + diff --git a/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleListItem.jsx b/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleListItem.jsx index ff2b3d05b5..758658a950 100644 --- a/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleListItem.jsx +++ b/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleListItem.jsx @@ -6,13 +6,13 @@ import { Link } from 'react-router-dom'; import { Button, DataListAction as _DataListAction, - DataListCell, DataListCheck, DataListItem, DataListItemRow, DataListItemCells, Tooltip, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; import { PencilAltIcon } from '@patternfly/react-icons'; import { DetailList, Detail } from '@components/DetailList'; import { ScheduleToggle } from '@components/Schedule'; diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx index a2d9feaae5..17874efb12 100644 --- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx +++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx @@ -6,13 +6,14 @@ import { Link } from 'react-router-dom'; import { Button, DataListAction as _DataListAction, - DataListCell, DataListCheck, DataListItem, DataListItemRow, DataListItemCells, Tooltip, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; + import { PencilAltIcon } from '@patternfly/react-icons'; import { Credential } from '@types'; import styled from 'styled-components'; diff --git a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx index 3bc9c9f949..08df94becc 100644 --- a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx +++ b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx @@ -5,13 +5,14 @@ import { t } from '@lingui/macro'; import { Button, DataListAction as _DataListAction, - DataListCell, DataListCheck, DataListItem, DataListItemRow, DataListItemCells, Tooltip, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; + import { Link } from 'react-router-dom'; import { PencilAltIcon } from '@patternfly/react-icons'; diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.jsx index a234b9597f..17a2f85757 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.jsx @@ -7,13 +7,14 @@ import { t } from '@lingui/macro'; import { Button, DataListAction as _DataListAction, - DataListCell, DataListCheck, DataListItem, DataListItemCells, DataListItemRow, Tooltip, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; + import { PencilAltIcon } from '@patternfly/react-icons'; import HostToggle from '@components/HostToggle'; import Sparkline from '@components/Sparkline'; diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx index 77f9ccab26..45e1bee411 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx @@ -7,13 +7,14 @@ import { Group } from '@types'; import { Button, DataListAction, - DataListCell, DataListCheck, DataListItem, DataListItemCells, DataListItemRow, Tooltip, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; + import { Link } from 'react-router-dom'; import { PencilAltIcon } from '@patternfly/react-icons'; diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx index 863b5fb168..96ce10bbdb 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx @@ -5,13 +5,14 @@ import { t } from '@lingui/macro'; import { Button, DataListAction as _DataListAction, - DataListCell, DataListCheck, DataListItem, DataListItemCells, DataListItemRow, Tooltip, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; + import { Link } from 'react-router-dom'; import { PencilAltIcon } from '@patternfly/react-icons'; import HostToggle from '@components/HostToggle'; diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx index 3edd54e169..e83ffb2ef8 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx @@ -4,13 +4,14 @@ import { withI18n } from '@lingui/react'; import { Button, DataListAction as _DataListAction, - DataListCell, DataListCheck, DataListItem, DataListItemCells, DataListItemRow, Tooltip, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; + import { t } from '@lingui/macro'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx index 35145e3998..efcc1edff6 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx @@ -6,13 +6,14 @@ import { Badge as PFBadge, Button, DataListAction as _DataListAction, - DataListCell, DataListCheck, DataListItem, DataListItemCells, DataListItemRow, Tooltip, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; + import { Link } from 'react-router-dom'; import styled from 'styled-components'; import { PencilAltIcon } from '@patternfly/react-icons'; diff --git a/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.jsx b/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.jsx index ea46bb967b..2932969178 100644 --- a/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.jsx +++ b/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.jsx @@ -3,13 +3,14 @@ import { Link } from 'react-router-dom'; import { Button, DataListAction as _DataListAction, - DataListCell, DataListCheck, DataListItem, DataListItemRow, DataListItemCells, Tooltip, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; + import { t } from '@lingui/macro'; import { withI18n } from '@lingui/react'; import { diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx index 92e337e892..f66afdb4ac 100644 --- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx +++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx @@ -4,13 +4,14 @@ import { withI18n } from '@lingui/react'; import { Button, DataListAction as _DataListAction, - DataListCell, DataListCheck, DataListItem, DataListItemRow, DataListItemCells, Tooltip, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; + import { t } from '@lingui/macro'; import { Link } from 'react-router-dom'; import { PencilAltIcon, SyncIcon } from '@patternfly/react-icons'; diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx index b915117d2e..5c3d09ca19 100644 --- a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx +++ b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx @@ -5,13 +5,14 @@ import { t } from '@lingui/macro'; import { Button, DataListAction as _DataListAction, - DataListCell, DataListCheck, DataListItem, DataListItemCells, DataListItemRow, Tooltip, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; + import styled from 'styled-components'; import { Link } from 'react-router-dom'; import { PencilAltIcon } from '@patternfly/react-icons'; diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx index 1e3203e1dc..3209fca6f3 100644 --- a/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx +++ b/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx @@ -9,10 +9,10 @@ import { DataListItemCells, DataListItemRow, DataListItem, - DataListCell, Stack, StackItem, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; import { CaretDownIcon, CaretUpIcon } from '@patternfly/react-icons'; import styled from 'styled-components'; diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx index d412e25baf..e22612c028 100644 --- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx +++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx @@ -3,13 +3,14 @@ import { Link } from 'react-router-dom'; import { Button, DataListAction as _DataListAction, - DataListCell, DataListCheck, DataListItem, DataListItemRow, DataListItemCells, Tooltip, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; + import { t } from '@lingui/macro'; import { withI18n } from '@lingui/react'; import { diff --git a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx index a3244895a6..2783d378d9 100644 --- a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx +++ b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx @@ -5,13 +5,14 @@ import { t } from '@lingui/macro'; import { Button, DataListAction, - DataListCell, DataListCheck, DataListItem, DataListItemCells, DataListItemRow, Tooltip, } from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; + import { Link } from 'react-router-dom'; import { PencilAltIcon } from '@patternfly/react-icons'; diff --git a/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.jsx b/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.jsx new file mode 100644 index 0000000000..ba0ab00d35 --- /dev/null +++ b/awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.jsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; +import { + DataListItemCells, + DataListItemRow, + DataListItem, +} from '@patternfly/react-core'; +import DataListCell from '@components/DataListCell'; + +function UserOrganizationListItem({ organization, i18n }) { + return ( + + + + + {organization.name} + + , + + {organization.description} + , + ]} + /> + + + ); +} + +export default withI18n()(UserOrganizationListItem);