Patternfly upgrade (#188)

* correct spacing after PF update

* update wizard layout/borders for PF upgrade

src/components/AddRole/AddResourceRole.jsx

@@ -2,11 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { I18n, i18nMark } from '@lingui/react';
 import { t } from '@lingui/macro';
-import {
-  BackgroundImageSrc,
-  Wizard
-} from '@patternfly/react-core';
-
+import { Wizard } from '@patternfly/react-core';
 import SelectResourceStep from './SelectResourceStep';
 import SelectRoleStep from './SelectRoleStep';
 import SelectableCard from './SelectableCard';
@@ -18,12 +14,14 @@ class AddResourceRole extends React.Component {
     this.state = {
       selectedResource: null,
       selectedResourceRows: [],
-      selectedRoleRows: []
+      selectedRoleRows: [],
+      currentStepId: 1,
     };
 
     this.handleResourceCheckboxClick = this.handleResourceCheckboxClick.bind(this);
     this.handleResourceSelect = this.handleResourceSelect.bind(this);
     this.handleRoleCheckboxClick = this.handleRoleCheckboxClick.bind(this);
+    this.handleWizardNext = this.handleWizardNext.bind(this);
     this.handleWizardSave = this.handleWizardSave.bind(this);
     this.readTeams = this.readTeams.bind(this);
     this.readUsers = this.readUsers.bind(this);
@@ -69,6 +67,12 @@ class AddResourceRole extends React.Component {
     });
   }
 
+  handleWizardNext (step) {
+    this.setState({
+      currentStepId: step.id,
+    });
+  }
+
   async handleWizardSave () {
     const {
       onSave,
@@ -118,22 +122,14 @@ class AddResourceRole extends React.Component {
     const {
       selectedResource,
       selectedResourceRows,
-      selectedRoleRows
+      selectedRoleRows,
+      currentStepId,
     } = this.state;
     const {
       onClose,
       roles
     } = this.props;
 
-    const images = {
-      [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
-      [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
-      [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
-      [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
-      [BackgroundImageSrc.lg]: '/assets/images/pfbg_2000.jpg',
-      [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg#image_overlay'
-    };
-
     const userColumns = [
       { name: i18nMark('Username'), key: 'username', isSortable: true }
     ];
@@ -157,6 +153,7 @@ class AddResourceRole extends React.Component {
 
     const steps = [
       {
+        id: 1,
         name: i18nMark('Select Users Or Teams'),
         component: (
           <I18n>
@@ -179,6 +176,7 @@ class AddResourceRole extends React.Component {
         enableNext: selectedResource !== null
       },
       {
+        id: 2,
         name: i18nMark('Select items from list'),
         component: (
           <I18n>
@@ -215,6 +213,7 @@ class AddResourceRole extends React.Component {
         enableNext: selectedResourceRows.length > 0
       },
       {
+        id: 3,
         name: i18nMark('Apply roles'),
         component: (
           <I18n>
@@ -230,25 +229,23 @@ class AddResourceRole extends React.Component {
             )}
           </I18n>
         ),
+        nextButtonText: i18nMark('Save'),
         enableNext: selectedRoleRows.length > 0
       }
     ];
 
+    const currentStep = steps.find(step => step.id === currentStepId);
+
     return (
-      <I18n>
-        {({ i18n }) => (
-          <Wizard
-            backgroundImgSrc={images}
-            footerRightAlign
-            isOpen
-            lastStepButtonText={i18n._(t`Save`)}
-            onClose={onClose}
-            onSave={this.handleWizardSave}
-            steps={steps}
-            title={wizardTitle}
-          />
-        )}
-      </I18n>
+      <Wizard
+        isOpen
+        onNext={this.handleWizardNext}
+        onClose={onClose}
+        onSave={this.handleWizardSave}
+        steps={steps}
+        title={wizardTitle}
+        nextButtonText={currentStep.nextButtonText || undefined}
+      />
     );
   }
 }

src/components/AddRole/CheckboxCard.jsx

@@ -10,7 +10,7 @@ class CheckboxCard extends Component {
     return (
       <div style={{
         display: 'flex',
-        border: '1px solid var(--pf-global--BorderColor)',
+        border: '1px solid var(--pf-global--BorderColor--200)',
         borderRadius: 'var(--pf-global--BorderRadius--sm)',
         padding: '10px'
       }}

src/components/AddRole/SelectResourceStep.jsx

@@ -1,15 +1,13 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-
 import { i18nMark } from '@lingui/react';
-
 import {
   EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
   Title,
+  DataList,
 } from '@patternfly/react-core';
-
 import { CubesIcon } from '@patternfly/react-icons';
 
 import CheckboxListItem from '../ListItem';
@@ -162,7 +160,7 @@ class SelectResourceStep extends React.Component {
                 sortOrder={sortOrder}
                 sortedColumnKey={sortedColumnKey}
               />
-              <ul className="pf-c-data-list awx-c-list">
+              <DataList aria-label={i18nMark('Roles List')}>
                 {resources.map(i => (
                   <CheckboxListItem
                     isSelected={selectedResourceRows.some(item => item.id === i.id)}
@@ -172,7 +170,7 @@ class SelectResourceStep extends React.Component {
                     onSelect={() => onRowClick(i)}
                   />
                 ))}
-              </ul>
+              </DataList>
               <Pagination
                 count={count}
                 onSetPage={this.handleSetPage}

src/components/AddRole/styles.scss

@@ -1,6 +1,6 @@
 .awx-selectableCard {
   min-width: 200px;
-  border: 1px solid var(--pf-global--BorderColor);
+  border: 1px solid var(--pf-global--BorderColor--200);
   border-radius: var(--pf-global--BorderRadius--sm);
   margin-right: 20px;
   font-weight: bold;
@@ -25,4 +25,4 @@
   .awx-selectableCard__indicator {
     background-color: var(--pf-global--active-color--100);
   }
-}
+}

src/components/ListItem/CheckboxListItem.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { I18n } from '@lingui/react';
-import { t } from '@lingui/macro';
 import {
-  Checkbox,
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+  DataListCheck,
+  DataListCell,
 } from '@patternfly/react-core';
 
 import VerticalSeparator from '../VerticalSeparator';
@@ -14,25 +16,32 @@ const CheckboxListItem = ({
   isSelected,
   onSelect,
 }) => (
-  <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`selected ${itemId}`)}
-          id={`selectd-${itemId}`}
-          value={itemId}
-        />
-      )}
-    </I18n>
-    <VerticalSeparator />
-    <div className="pf-c-data-list__cell">
-      <label htmlFor={`selectd-${itemId}`} className="check-action-item">
-        <b>{name}</b>
-      </label>
-    </div>
-  </li>
+  <DataListItem key={itemId} aria-labelledby={`check-action-item-${itemId}`}>
+    <DataListItemRow>
+      <DataListCheck
+        id={`selected-${itemId}`}
+        checked={isSelected}
+        onChange={onSelect}
+        aria-labelledby={`check-action-item-${itemId}`}
+        value={itemId}
+      />
+      <DataListItemCells dataListCells={[
+        <DataListCell key="divider" className="pf-c-data-list__cell--divider">
+          <VerticalSeparator />
+        </DataListCell>,
+        <DataListCell key="name">
+          <label
+            id={`check-action-item-${itemId}`}
+            htmlFor={`selected-${itemId}`}
+            className="check-action-item"
+          >
+            <b>{name}</b>
+          </label>
+        </DataListCell>
+      ]}
+      />
+    </DataListItemRow>
+  </DataListItem>
 );
 
 CheckboxListItem.propTypes = {

src/components/NotificationsList/NotificationListItem.jsx

@@ -24,6 +24,10 @@ function NotificationListItem (props) {
   const capText = {
     textTransform: 'capitalize'
   };
+  const toggleCellStyles = {
+    display: 'flex',
+    justifyContent: 'flex-end',
+  };
 
   return (
     <I18n>
@@ -50,7 +54,7 @@ function NotificationListItem (props) {
                   {notification.notification_type}
                 </Badge>
               </DataListCell>,
-              <DataListCell key="toggles" alignRight>
+              <DataListCell key="toggles" style={toggleCellStyles}>
                 <Switch
                   id={`notification-${notification.id}-success-toggle`}
                   label={i18n._(t`Successful`)}

src/components/PaginatedDataList/PaginatedDataList.jsx

@@ -8,7 +8,6 @@ import {
   DataListCell,
   Text,
   TextContent,
-  TextVariants,
   Title,
   EmptyState,
   EmptyStateIcon,
@@ -162,13 +161,10 @@ class PaginatedDataList extends React.Component {
                             <TextContent style={detailWrapperStyle}>
                               <Link to={{ pathname: item.url }}>
                                 <Text
-                                  id="items-list-item"
-                                  component={TextVariants.h6}
+                                  id={`items-list-item-${item.id}`}
                                   style={detailLabelStyle}
                                 >
-                                  <span id={`items-list-item-${item.id}`}>
-                                    {item.name}
-                                  </span>
+                                  {item.name}
                                 </Text>
                               </Link>
                             </TextContent>