Rebase and incorporates feedback

src/components/AddRole/AddResourceRole.jsx

@@ -142,6 +142,19 @@ class AddResourceRole extends React.Component {
       { name: i18nMark('Name'), key: 'name', isSortable: true }
     ];
 
+    let wizardTitle = '';
+
+    switch (selectedResource) {
+      case 'users':
+        wizardTitle = i18nMark('Add User Roles');
+        break;
+      case 'teams':
+        wizardTitle = i18nMark('Add Team Roles');
+        break;
+      default:
+        wizardTitle = i18nMark('Add Roles');
+    }
+
     const steps = [
       {
         name: i18nMark('Select Users Or Teams'),
@@ -179,10 +192,9 @@ class AddResourceRole extends React.Component {
                     emptyListTitle={i18n._(t`No Users Found`)}
                     onRowClick={this.handleResourceCheckboxClick}
                     onSearch={this.readUsers}
-                    selectedLabel={i18n._(t`Selected Users`)}
+                    selectedLabel={i18n._(t`Selected`)}
                     selectedResourceRows={selectedResourceRows}
                     sortedColumnKey="username"
-                    title={i18n._(t`Users`)}
                   />
                 )}
                 {selectedResource === 'teams' && (
@@ -192,9 +204,8 @@ class AddResourceRole extends React.Component {
                     emptyListTitle={i18n._(t`No Teams Found`)}
                     onRowClick={this.handleResourceCheckboxClick}
                     onSearch={this.readTeams}
-                    selectedLabel={i18n._(t`Selected Teams`)}
+                    selectedLabel={i18n._(t`Selected`)}
                     selectedResourceRows={selectedResourceRows}
-                    title={i18n._(t`Teams`)}
                   />
                 )}
               </Fragment>
@@ -212,7 +223,7 @@ class AddResourceRole extends React.Component {
                 onRolesClick={this.handleRoleCheckboxClick}
                 roles={roles}
                 selectedListKey={selectedResource === 'users' ? 'username' : 'name'}
-                selectedListLabel={selectedResource === 'users' ? i18n._(t`Selected Users`) : i18n._(t`Selected Teams`)}
+                selectedListLabel={i18n._(t`Selected`)}
                 selectedResourceRows={selectedResourceRows}
                 selectedRoleRows={selectedRoleRows}
               />
@@ -234,7 +245,7 @@ class AddResourceRole extends React.Component {
             onClose={onClose}
             onSave={this.handleWizardSave}
             steps={steps}
-            title={i18n._(t`Add Roles`)}
+            title={wizardTitle}
           />
         )}
       </I18n>

src/components/AddRole/SelectResourceStep.jsx

@@ -17,6 +17,14 @@ import DataListToolbar from '../DataListToolbar';
 import Pagination from '../Pagination';
 import SelectedList from '../SelectedList';
 
+const paginationStyling = {
+  paddingLeft: '0',
+  justifyContent: 'flex-end',
+  borderRight: '1px solid #ebebeb',
+  borderBottom: '1px solid #ebebeb',
+  borderTop: '0'
+};
+
 class SelectResourceStep extends React.Component {
   constructor (props) {
     super(props);
@@ -119,8 +127,7 @@ class SelectResourceStep extends React.Component {
       emptyListTitle,
       onRowClick,
       selectedLabel,
-      selectedResourceRows,
-      title
+      selectedResourceRows
     } = this.props;
 
     return (
@@ -138,9 +145,15 @@ class SelectResourceStep extends React.Component {
             </EmptyState>
           ) : (
             <Fragment>
-              <Title size="lg">
-                {title}
-              </Title>
+              {selectedResourceRows.length > 0 && (
+                <SelectedList
+                  displayKey={displayKey}
+                  label={selectedLabel}
+                  onRemove={onRowClick}
+                  selected={selectedResourceRows}
+                  showOverflowAfter={5}
+                />
+              )}
               <DataListToolbar
                 columns={columns}
                 noLeftMargin
@@ -168,19 +181,11 @@ class SelectResourceStep extends React.Component {
                 pageSizeOptions={null}
                 page_size={page_size}
                 showPageSizeOptions={false}
+                style={paginationStyling}
               />
             </Fragment>
           )}
         </Fragment>
-        {selectedResourceRows.length > 0 && (
-          <SelectedList
-            displayKey={displayKey}
-            label={selectedLabel}
-            onRemove={onRowClick}
-            selected={selectedResourceRows}
-            showOverflowAfter={5}
-          />
-        )}
         { error ? <div>error</div> : '' }
       </Fragment>
     );
@@ -196,8 +201,7 @@ SelectResourceStep.propTypes = {
   onSearch: PropTypes.func.isRequired,
   selectedLabel: PropTypes.string,
   selectedResourceRows: PropTypes.arrayOf(PropTypes.object),
-  sortedColumnKey: PropTypes.string,
-  title: PropTypes.string
+  sortedColumnKey: PropTypes.string
 };
 
 SelectResourceStep.defaultProps = {
@@ -207,8 +211,7 @@ SelectResourceStep.defaultProps = {
   onRowClick: () => {},
   selectedLabel: i18nMark('Selected Items'),
   selectedResourceRows: [],
-  sortedColumnKey: 'name',
-  title: ''
+  sortedColumnKey: 'name'
 };
 
 export default SelectResourceStep;

src/components/AddRole/styles.scss

@@ -8,7 +8,7 @@
 
   .awx-selectableCard__indicator {
     display: flex;
-    flex: 0 0 10px;
+    flex: 0 0 5px;
   }
 
   .awx-selectableCard__label {

src/components/SelectedList/SelectedList.jsx

@@ -45,6 +45,7 @@ class SelectedList extends Component {
       isReadOnly
     } = this.props;
     const { showOverflow } = this.state;
+    const visibleItems = selected.slice(0, showOverflow ? selected.length : showOverflowAfter);
     return (
       <div className="awx-selectedList">
         <div className="pf-l-split" style={selectedRowStyling}>
@@ -56,20 +57,19 @@ class SelectedList extends Component {
             <div className="pf-c-chip-group">
               {isReadOnly ? (
                 <Fragment>
-                  {selected
-                    .slice(0, showOverflow ? selected.length : showOverflowAfter)
+                  {visibleItems
                     .map(selectedItem => (
                       <BasicChip
                         key={selectedItem.id}
-                        text={selectedItem[displayKey]}
-                      />
+                      >
+                        {selectedItem[displayKey]}
+                      </BasicChip>
                     ))
                   }
                 </Fragment>
               ) : (
                 <Fragment>
-                  {selected
-                    .slice(0, showOverflow ? selected.length : showOverflowAfter)
+                  {visibleItems
                     .map(selectedItem => (
                       <Chip
                         key={selectedItem.id}