upgrade to patternfly 2.x, pf/react-core 3.x (#184)

src/app.scss

@@ -88,16 +88,27 @@
   }
 }
 
+.pf-c-data-list__item-row {
+  --pf-c-data-list__item-row--PaddingRight: 20px;
+  --pf-c-data-list__item-row--PaddingLeft: 20px;
+}
+
+.pf-c-data-list__item-content {
+  --pf-c-data-list__item-content--PaddingBottom: 16px;
+}
+
+.pf-c-data-list__item-control {
+  --pf-c-data-list__item-control--PaddingTop: 16px;
+  --pf-c-data-list__item-control--MarginRight: 8px;
+}
+
 .pf-c-data-list__item {
   --pf-c-data-list__item--PaddingLeft: 20px;
   --pf-c-data-list__item--PaddingRight: 20px;
-
-  align-items: center;
 }
 
 .pf-c-data-list__cell {
   --pf-c-data-list__cell--PaddingTop: 16px;
-  --pf-c-data-list__cell--PaddingBottom: 16px;
   --pf-c-data-list__cell-cell--PaddingTop: 16px;
 
   .awx-c-list-group {
@@ -111,6 +122,11 @@
       margin-left: 10px;
     }
   }
+
+  &.pf-c-data-list__cell--divider {
+    flex-grow: 0;
+    margin-right: 0;
+  }
 }
 
 //

src/components/NotificationsList/NotificationListItem.jsx

@@ -3,7 +3,14 @@ import { shape, number, string, bool, func } from 'prop-types';
 import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
-import { Badge, Switch, DataListItem, DataListCell } from '@patternfly/react-core';
+import {
+  Badge,
+  Switch,
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+  DataListCell,
+} from '@patternfly/react-core';
 
 function NotificationListItem (props) {
   const {
@@ -25,48 +32,53 @@ function NotificationListItem (props) {
           aria-labelledby={`items-list-item-${notification.id}`}
           key={notification.id}
         >
-          <DataListCell>
-            <Link
-              to={{
-                pathname: detailUrl
-              }}
-              style={{ marginRight: '1.5em' }}
-            >
-              <b id={`items-list-item-${notification.id}`}>{notification.name}</b>
-            </Link>
-            <Badge
-              style={capText}
-              isRead
-            >
-              {notification.notification_type}
-            </Badge>
-          </DataListCell>
-          <DataListCell alignRight>
-            <Switch
-              id={`notification-${notification.id}-success-toggle`}
-              label={i18n._(t`Successful`)}
-              isChecked={successTurnedOn}
-              isDisabled={!canToggleNotifications}
-              onChange={() => toggleNotification(
-                notification.id,
-                successTurnedOn,
-                'success'
-              )}
-              aria-label={i18n._(t`Toggle notification success`)}
+          <DataListItemRow>
+            <DataListItemCells dataListCells={[
+              <DataListCell key="name">
+                <Link
+                  to={{
+                    pathname: detailUrl
+                  }}
+                  style={{ marginRight: '1.5em' }}
+                >
+                  <b id={`items-list-item-${notification.id}`}>{notification.name}</b>
+                </Link>
+                <Badge
+                  style={capText}
+                  isRead
+                >
+                  {notification.notification_type}
+                </Badge>
+              </DataListCell>,
+              <DataListCell key="toggles" alignRight>
+                <Switch
+                  id={`notification-${notification.id}-success-toggle`}
+                  label={i18n._(t`Successful`)}
+                  isChecked={successTurnedOn}
+                  isDisabled={!canToggleNotifications}
+                  onChange={() => toggleNotification(
+                    notification.id,
+                    successTurnedOn,
+                    'success'
+                  )}
+                  aria-label={i18n._(t`Toggle notification success`)}
+                />
+                <Switch
+                  id={`notification-${notification.id}-error-toggle`}
+                  label={i18n._(t`Failure`)}
+                  isChecked={errorTurnedOn}
+                  isDisabled={!canToggleNotifications}
+                  onChange={() => toggleNotification(
+                    notification.id,
+                    errorTurnedOn,
+                    'error'
+                  )}
+                  aria-label={i18n._(t`Toggle notification failure`)}
+                />
+              </DataListCell>
+            ]}
             />
-            <Switch
-              id={`notification-${notification.id}-error-toggle`}
-              label={i18n._(t`Failure`)}
-              isChecked={errorTurnedOn}
-              isDisabled={!canToggleNotifications}
-              onChange={() => toggleNotification(
-                notification.id,
-                errorTurnedOn,
-                'error'
-              )}
-              aria-label={i18n._(t`Toggle notification failure`)}
-            />
-          </DataListCell>
+          </DataListItemRow>
         </DataListItem>
       )}
     </I18n>

src/components/PaginatedDataList/PaginatedDataList.jsx

@@ -3,6 +3,8 @@ import PropTypes, { arrayOf, shape, string, bool } from 'prop-types';
 import {
   DataList,
   DataListItem,
+  DataListItemRow,
+  DataListItemCells,
   DataListCell,
   Text,
   TextContent,
@@ -154,21 +156,26 @@ class PaginatedDataList extends React.Component {
                       aria-labelledby={`items-list-item-${item.id}`}
                       key={item.id}
                     >
-                      <DataListCell>
-                        <TextContent style={detailWrapperStyle}>
-                          <Link to={{ pathname: item.url }}>
-                            <Text
-                              id="items-list-item"
-                              component={TextVariants.h6}
-                              style={detailLabelStyle}
-                            >
-                              <span id={`items-list-item-${item.id}`}>
-                                {item.name}
-                              </span>
-                            </Text>
-                          </Link>
-                        </TextContent>
-                      </DataListCell>
+                      <DataListItemRow>
+                        <DataListItemCells dataListCells={[
+                          <DataListCell key="team-name">
+                            <TextContent style={detailWrapperStyle}>
+                              <Link to={{ pathname: item.url }}>
+                                <Text
+                                  id="items-list-item"
+                                  component={TextVariants.h6}
+                                  style={detailLabelStyle}
+                                >
+                                  <span id={`items-list-item-${item.id}`}>
+                                    {item.name}
+                                  </span>
+                                </Text>
+                              </Link>
+                            </TextContent>
+                          </DataListCell>
+                        ]}
+                        />
+                      </DataListItemRow>
                     </DataListItem>
                   )))}
                 </DataList>

src/pages/Organizations/components/OrganizationAccessItem.jsx

@@ -4,6 +4,8 @@ import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   DataListItem,
+  DataListItemRow,
+  DataListItemCells,
   DataListCell,
   Text,
   TextContent,
@@ -86,79 +88,84 @@ class OrganizationAccessItem extends React.Component {
       <I18n>
         {({ i18n }) => (
           <DataListItem aria-labelledby="access-list-item" key={accessRecord.id}>
-            <DataListCell>
-              {accessRecord.username && (
-                <TextContent style={detailWrapperStyle}>
-                  {accessRecord.url ? (
-                    <Link to={{ pathname: accessRecord.url }}>
-                      <Text component={TextVariants.h6} style={detailLabelStyle}>
-                        {accessRecord.username}
-                      </Text>
-                    </Link>
-                  ) : (
-                    <Text component={TextVariants.h6} style={detailLabelStyle}>
-                      {accessRecord.username}
-                    </Text>
+            <DataListItemRow>
+              <DataListItemCells dataListCells={[
+                <DataListCell key="name">
+                  {accessRecord.username && (
+                    <TextContent style={detailWrapperStyle}>
+                      {accessRecord.url ? (
+                        <Link to={{ pathname: accessRecord.url }}>
+                          <Text component={TextVariants.h6} style={detailLabelStyle}>
+                            {accessRecord.username}
+                          </Text>
+                        </Link>
+                      ) : (
+                        <Text component={TextVariants.h6} style={detailLabelStyle}>
+                          {accessRecord.username}
+                        </Text>
+                      )}
+                    </TextContent>
                   )}
-                </TextContent>
-              )}
-              {accessRecord.first_name || accessRecord.last_name ? (
-                <Detail
-                  label={i18n._(t`Name`)}
-                  value={`${accessRecord.first_name} ${accessRecord.last_name}`}
-                  url={null}
-                  customStyles={null}
-                />
-              ) : (
-                null
-              )}
-            </DataListCell>
-            <DataListCell>
-              {userRoles.length > 0 && (
-                <ul style={userRolesWrapperStyle}>
-                  <Text component={TextVariants.h6} style={detailLabelStyle}>
-                    {i18n._(t`User Roles`)}
-                  </Text>
-                  {userRoles.map(role => (
-                    role.user_capabilities.unattach ? (
-                      <Chip
-                        key={role.id}
-                        className="awx-c-chip"
-                        onClick={() => { onRoleDelete(role, accessRecord); }}
-                      >
-                        {role.name}
-                      </Chip>
-                    ) : (
-                      <BasicChip key={role.id}>
-                        {role.name}
-                      </BasicChip>
-                    )
-                  ))}
-                </ul>
-              )}
-              {teamRoles.length > 0 && (
-                <ul style={userRolesWrapperStyle}>
-                  <Text component={TextVariants.h6} style={detailLabelStyle}>
-                    {i18n._(t`Team Roles`)}
-                  </Text>
-                  {teamRoles.map(role => (
-                    role.user_capabilities.unattach ? (
-                      <Chip
-                        key={role.id}
-                        className="awx-c-chip"
-                        onClick={() => { onRoleDelete(role, accessRecord); }}
-                      >
-                        {role.name}
-                      </Chip>
-                    ) : (
-                      <BasicChip key={role.id}>
-                        {role.name}
-                      </BasicChip>
-                    )
-                  ))}
-                </ul>
-              )}
-            </DataListCell>
+                  {accessRecord.first_name || accessRecord.last_name ? (
+                    <Detail
+                      label={i18n._(t`Name`)}
+                      value={`${accessRecord.first_name} ${accessRecord.last_name}`}
+                      url={null}
+                      customStyles={null}
+                    />
+                  ) : (
+                    null
+                  )}
+                </DataListCell>,
+                <DataListCell key="roles">
+                  {userRoles.length > 0 && (
+                    <ul style={userRolesWrapperStyle}>
+                      <Text component={TextVariants.h6} style={detailLabelStyle}>
+                        {i18n._(t`User Roles`)}
+                      </Text>
+                      {userRoles.map(role => (
+                        role.user_capabilities.unattach ? (
+                          <Chip
+                            key={role.id}
+                            className="awx-c-chip"
+                            onClick={() => { onRoleDelete(role, accessRecord); }}
+                          >
+                            {role.name}
+                          </Chip>
+                        ) : (
+                          <BasicChip key={role.id}>
+                            {role.name}
+                          </BasicChip>
+                        )
+                      ))}
+                    </ul>
+                  )}
+                  {teamRoles.length > 0 && (
+                    <ul style={userRolesWrapperStyle}>
+                      <Text component={TextVariants.h6} style={detailLabelStyle}>
+                        {i18n._(t`Team Roles`)}
+                      </Text>
+                      {teamRoles.map(role => (
+                        role.user_capabilities.unattach ? (
+                          <Chip
+                            key={role.id}
+                            className="awx-c-chip"
+                            onClick={() => { onRoleDelete(role, accessRecord); }}
+                          >
+                            {role.name}
+                          </Chip>
+                        ) : (
+                          <BasicChip key={role.id}>
+                            {role.name}
+                          </BasicChip>
+                        )
+                      ))}
+                    </ul>
+                  )}
+                </DataListCell>
+              ]}
+              />
+            </DataListItemRow>
           </DataListItem>
         )}
       </I18n>

src/pages/Organizations/components/OrganizationListItem.jsx

@@ -1,9 +1,12 @@
 import React from 'react';
-import { I18n } from '@lingui/react';
-import { Trans, t } from '@lingui/macro';
+import { Trans } from '@lingui/macro';
 import {
   Badge,
-  Checkbox,
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+  DataListCheck,
+  DataListCell,
 } from '@patternfly/react-core';
 import {
   Link
@@ -22,44 +25,47 @@ class OrganizationListItem extends React.Component {
       onSelect,
       detailUrl,
     } = this.props;
+    const labelId = `check-action-${itemId}`;
     return (
-      <li key={itemId} className="pf-c-data-list__item" aria-labelledby="check-action-item1">
-        <I18n>
-          {({ i18n }) => (
-            <Checkbox
-              checked={isSelected}
-              onChange={onSelect}
-              aria-label={i18n._(t`select organization ${itemId}`)}
-              id={`select-organization-${itemId}`}
-            />
-          )}
-        </I18n>
-        <VerticalSeparator />
-        <div className="pf-c-data-list__cell">
-          <span id="check-action-item1">
-            <Link
-              to={`${detailUrl}`}
-            >
-              <b>{name}</b>
-            </Link>
-          </span>
-        </div>
-        <div className="pf-c-data-list__cell">
-          <span className="awx-c-list-group">
-            <Trans>Members</Trans>
-            <Badge className="awx-c-list-group--badge" isRead>
-              {memberCount}
-            </Badge>
-          </span>
-          <span className="awx-c-list-group">
-            <Trans>Teams</Trans>
-            <Badge className="awx-c-list-group--badge" isRead>
-              {teamCount}
-            </Badge>
-          </span>
-        </div>
-        <div className="pf-c-data-list__cell" />
-      </li>
+      <DataListItem key={itemId} aria-labelledby={labelId}>
+        <DataListItemRow>
+          <DataListCheck
+            id={`select-organization-${itemId}`}
+            checked={isSelected}
+            onChange={onSelect}
+            aria-labelledby={labelId}
+          />
+          <DataListItemCells dataListCells={[
+            <DataListCell key="divider" className="pf-c-data-list__cell--divider">
+              <VerticalSeparator />
+            </DataListCell>,
+            <DataListCell key="org-name">
+              <span id={labelId}>
+                <Link
+                  to={`${detailUrl}`}
+                >
+                  <b>{name}</b>
+                </Link>
+              </span>
+            </DataListCell>,
+            <DataListCell key="org-members">
+              <span className="awx-c-list-group">
+                <Trans>Members</Trans>
+                <Badge className="awx-c-list-group--badge" isRead>
+                  {memberCount}
+                </Badge>
+              </span>
+              <span className="awx-c-list-group">
+                <Trans>Teams</Trans>
+                <Badge className="awx-c-list-group--badge" isRead>
+                  {teamCount}
+                </Badge>
+              </span>
+            </DataListCell>
+          ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
     );
   }
 }