Merge pull request #6348 from AlexSCorey/5895-SurveyList

Adds word wrap functionality

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

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,

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

awx/ui_next/src/components/DataListCell/index.js

@@ -0,0 +1 @@
+export { default } from './DataListCell';

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

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

awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap

@@ -71,42 +71,102 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
               <DataListCell
                 key="name"
               >
-                <div
+                <StyledComponent
-                  className="pf-c-data-list__cell"
+                  forwardedComponent={
-                >
+                    Object {
-                  <Link
+                      "$$typeof": Symbol(react.forward_ref),
-                    to={
+                      "attrs": Array [],
-                      Object {
+                      "componentStyle": ComponentStyle {
-                        "pathname": "/foo",
+                        "componentId": "DataListCell-sc-18ntxrx-0",
-                      }
+                        "isStatic": true,
+                        "lastClassName": "flJMIO",
+                        "rules": Array [
+                          "word-break:break-word;",
+                        ],
+                      },
+                      "displayName": "DataListCell",
+                      "foldedComponentIds": Array [],
+                      "render": [Function],
+                      "styledComponentId": "DataListCell-sc-18ntxrx-0",
+                      "target": [Function],
+                      "toString": [Function],
+                      "warnTooManyClasses": [Function],
+                      "withComponent": [Function],
                     }
+                  }
+                  forwardedRef={null}
+                >
+                  <PFDataListCell
+                    className="DataListCell-sc-18ntxrx-0 flJMIO"
                   >
-                    <LinkAnchor
+                    <div
-                      href="/foo"
+                      className="pf-c-data-list__cell DataListCell-sc-18ntxrx-0 flJMIO"
-                      navigate={[Function]}
                     >
-                      <a
+                      <Link
-                        href="/foo"
+                        to={
-                        onClick={[Function]}
+                          Object {
+                            "pathname": "/foo",
+                          }
+                        }
                       >
-                        <b
+                        <LinkAnchor
-                          id="items-list-item-9000"
+                          href="/foo"
+                          navigate={[Function]}
                         >
-                          Foo
+                          <a
-                        </b>
+                            href="/foo"
-                      </a>
+                            onClick={[Function]}
-                    </LinkAnchor>
+                          >
-                  </Link>
+                            <b
-                </div>
+                              id="items-list-item-9000"
+                            >
+                              Foo
+                            </b>
+                          </a>
+                        </LinkAnchor>
+                      </Link>
+                    </div>
+                  </PFDataListCell>
+                </StyledComponent>
               </DataListCell>
               <DataListCell
                 key="type"
               >
-                <div
+                <StyledComponent
-                  className="pf-c-data-list__cell"
+                  forwardedComponent={
+                    Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "attrs": Array [],
+                      "componentStyle": ComponentStyle {
+                        "componentId": "DataListCell-sc-18ntxrx-0",
+                        "isStatic": true,
+                        "lastClassName": "flJMIO",
+                        "rules": Array [
+                          "word-break:break-word;",
+                        ],
+                      },
+                      "displayName": "DataListCell",
+                      "foldedComponentIds": Array [],
+                      "render": [Function],
+                      "styledComponentId": "DataListCell-sc-18ntxrx-0",
+                      "target": [Function],
+                      "toString": [Function],
+                      "warnTooManyClasses": [Function],
+                      "withComponent": [Function],
+                    }
+                  }
+                  forwardedRef={null}
                 >
-                  Slack
+                  <PFDataListCell
-                </div>
+                    className="DataListCell-sc-18ntxrx-0 flJMIO"
+                  >
+                    <div
+                      className="pf-c-data-list__cell DataListCell-sc-18ntxrx-0 flJMIO"
+                    >
+                      Slack
+                    </div>
+                  </PFDataListCell>
+                </StyledComponent>
               </DataListCell>
             </div>
           </DataListItemCells>

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

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

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

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

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

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

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

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

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

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

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 {

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

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

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

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 {

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

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 (
+    <DataListItem aria-labelledby={i18n._(t`User Organization List Item`)}>
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key={organization.id}>
+              <Link to={`/organizations/${organization.id}/details`}>
+                {organization.name}
+              </Link>
+            </DataListCell>,
+            <DataListCell key={organization.description}>
+              {organization.description}
+            </DataListCell>,
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+  );
+}
+
+export default withI18n()(UserOrganizationListItem);