Adds sort to IG modal

src/components/DataListToolbar/DataListToolbar.jsx

@@ -31,6 +31,11 @@ import {
 } from 'react-router-dom';
 
 import Tooltip from '../Tooltip';
+import VerticalSeparator from '../VerticalSeparator';
+
+const flexGrowStyling = {
+  flexGrow: '1'
+};
 
 class DataListToolbar extends React.Component {
   constructor (props) {
@@ -111,7 +116,6 @@ class DataListToolbar extends React.Component {
       showSelectAll
     } = this.props;
     const {
-      // isActionDropdownOpen,
       isSearchDropdownOpen,
       isSortDropdownOpen,
       searchKey,
@@ -150,8 +154,8 @@ class DataListToolbar extends React.Component {
         {({ i18n }) => (
           <div className="awx-toolbar">
             <Level>
-              <LevelItem>
-                <Toolbar style={{ marginLeft: '20px' }}>
+              <LevelItem style={{ display: 'flex', flexBasis: '700px' }}>
+                <Toolbar style={{ marginLeft: showSelectAll ? '20px' : '0px', flexGrow: '1' }}>
                   { showSelectAll && (
                     <ToolbarGroup>
                       <ToolbarItem>
@@ -162,10 +166,11 @@ class DataListToolbar extends React.Component {
                           id="select-all"
                         />
                       </ToolbarItem>
+                      <VerticalSeparator />
                     </ToolbarGroup>
                   )}
-                  <ToolbarGroup>
-                    <ToolbarItem>
+                  <ToolbarGroup style={flexGrowStyling}>
+                    <ToolbarItem style={flexGrowStyling}>
                       <div className="pf-c-input-group">
                         <Dropdown
                           className="searchKeyDropdown"
@@ -187,6 +192,7 @@ class DataListToolbar extends React.Component {
                           aria-label={i18n._(t`Search text input`)}
                           value={searchValue}
                           onChange={this.handleSearchInputChange}
+                          style={{ height: '30px' }}
                         />
                         <Button
                           variant="tertiary"
@@ -197,26 +203,29 @@ class DataListToolbar extends React.Component {
                         </Button>
                       </div>
                     </ToolbarItem>
+                    <VerticalSeparator />
                   </ToolbarGroup>
                   <ToolbarGroup
                     className="sortDropdownGroup"
                   >
-                    <ToolbarItem>
-                      <Dropdown
-                        onToggle={this.onSortDropdownToggle}
-                        onSelect={this.onSortDropdownSelect}
-                        direction={up}
-                        isOpen={isSortDropdownOpen}
-                        toggle={(
-                          <DropdownToggle
-                            onToggle={this.onSortDropdownToggle}
-                          >
-                            {sortedColumnName}
-                          </DropdownToggle>
-                        )}
-                        dropdownItems={sortDropdownItems}
-                      />
-                    </ToolbarItem>
+                    { sortDropdownItems.length > 1 && (
+                      <ToolbarItem>
+                        <Dropdown
+                          onToggle={this.onSortDropdownToggle}
+                          onSelect={this.onSortDropdownSelect}
+                          direction={up}
+                          isOpen={isSortDropdownOpen}
+                          toggle={(
+                            <DropdownToggle
+                              onToggle={this.onSortDropdownToggle}
+                            >
+                              {sortedColumnName}
+                            </DropdownToggle>
+                          )}
+                          dropdownItems={sortDropdownItems}
+                        />
+                      </ToolbarItem>
+                    )}
                     <ToolbarItem>
                       <Button
                         onClick={this.onSort}
@@ -226,6 +235,9 @@ class DataListToolbar extends React.Component {
                         <SortIcon />
                       </Button>
                     </ToolbarItem>
+                    { (showExpandCollapse || showDelete || addUrl) && (
+                      <VerticalSeparator />
+                    )}
                   </ToolbarGroup>
                   {showExpandCollapse && (
                     <ToolbarGroup>
@@ -245,6 +257,9 @@ class DataListToolbar extends React.Component {
                           <EqualsIcon />
                         </Button>
                       </ToolbarItem>
+                      { (showDelete || addUrl) && (
+                        <VerticalSeparator />
+                      )}
                     </ToolbarGroup>
                   )}
                 </Toolbar>

src/components/DataListToolbar/styles.scss

@@ -28,16 +28,6 @@
     --pf-l-toolbar__group--MarginLeft: 0px;
 }
 
-.awx-toolbar .pf-l-toolbar__group:after {
-  content: "";
-  background-color: #d7d7d7;
-  width: 1px;
-  height: 30px;
-  display: block;
-  margin-left: 20px;
-  margin-right: 20px;
-}
-
 .awx-toolbar button.pf-c-button {
   height: 30px;
   padding: 0px;
@@ -47,12 +37,6 @@
   min-height: 0px;
   height: 30px;
 
-  input {
-    height: 30px;
-    padding: 0 10px;
-    width: 300px;
-  }
-
   .pf-m-tertiary {
     width: 34px;
     padding: 0px;

src/components/Lookup/Lookup.jsx

@@ -13,6 +13,7 @@ import { I18n } from '@lingui/react';
 import { Trans, t } from '@lingui/macro';
 
 import CheckboxListItem from '../ListItem';
+import DataListToolbar from '../DataListToolbar';
 import SelectedList from '../SelectedList';
 import Pagination from '../Pagination';
 
@@ -34,7 +35,9 @@ class Lookup extends React.Component {
       count: 0,
       page: 1,
       page_size: 5,
-      error: null
+      error: null,
+      sortOrder: 'ascending',
+      sortedColumnKey: props.sortedColumnKey
     };
     this.onSetPage = this.onSetPage.bind(this);
     this.handleModalToggle = this.handleModalToggle.bind(this);
@@ -42,6 +45,8 @@ class Lookup extends React.Component {
     this.toggleSelected = this.toggleSelected.bind(this);
     this.saveModal = this.saveModal.bind(this);
     this.getData = this.getData.bind(this);
+    this.onSearch = this.onSearch.bind(this);
+    this.onSort = this.onSort.bind(this);
   }
 
   componentDidMount () {
@@ -49,18 +54,35 @@ class Lookup extends React.Component {
     this.getData({ page_size, page });
   }
 
-  async getData (queryParams) {
+  onSearch () {
+    const { sortedColumnKey, sortOrder } = this.state;
+    this.onSort(sortedColumnKey, sortOrder);
+  }
+
+  onSort (sortedColumnKey, sortOrder) {
+    this.setState({ page: 1, sortedColumnKey, sortOrder }, this.getData);
+  }
+
+  async getData () {
     const { getItems } = this.props;
-    const { page } = queryParams;
+    const { page, page_size, sortedColumnKey, sortOrder } = this.state;
 
     this.setState({ error: false });
 
+    const queryParams = {
+      page,
+      page_size
+    };
+
+    if (sortedColumnKey) {
+      queryParams.order_by = sortOrder === 'descending' ? `-${sortedColumnKey}` : sortedColumnKey;
+    }
+
     try {
       const { data } = await getItems(queryParams);
       const { results, count } = data;
 
       const stateToUpdate = {
-        page,
         results,
         count
       };
@@ -74,7 +96,7 @@ class Lookup extends React.Component {
   onSetPage = async (pageNumber, pageSize) => {
     const page = parseInt(pageNumber, 10);
     const page_size = parseInt(pageSize, 10);
-    this.getData({ page_size, page });
+    this.setState({ page, page_size }, this.getData);
   };
 
   toggleSelected (row) {
@@ -124,8 +146,18 @@ class Lookup extends React.Component {
   }
 
   render () {
-    const { isModalOpen, lookupSelectedItems, error, results, count, page, page_size } = this.state;
-    const { lookupHeader, value } = this.props;
+    const {
+      isModalOpen,
+      lookupSelectedItems,
+      error,
+      results,
+      count,
+      page,
+      page_size,
+      sortedColumnKey,
+      sortOrder
+    } = this.state;
+    const { lookupHeader = 'items', value, columns } = this.props;
 
     return (
       <I18n>
@@ -157,6 +189,13 @@ class Lookup extends React.Component {
                 </EmptyState>
               ) : (
                 <Fragment>
+                  <DataListToolbar
+                    sortedColumnKey={sortedColumnKey}
+                    sortOrder={sortOrder}
+                    columns={columns}
+                    onSearch={this.onSearch}
+                    onSort={this.onSort}
+                  />
                   <ul className="pf-c-data-list awx-c-list">
                     {results.map(i => (
                       <CheckboxListItem

src/components/SelectedList/SelectedList.jsx

@@ -4,6 +4,8 @@ import {
   Chip
 } from '@patternfly/react-core';
 
+import VerticalSeparator from '../VerticalSeparator';
+
 const selectedRowStyling = {
   paddingTop: '15px',
   paddingBottom: '5px',
@@ -41,6 +43,7 @@ class SelectedList extends Component {
           <div className="pf-l-split__item" style={selectedLabelStyling}>
             {label}
           </div>
+          <VerticalSeparator />
           <div className="pf-l-split__item">
             <div className="pf-c-chip-group">
               {selected

src/components/SelectedList/styles.scss

@@ -15,15 +15,6 @@
     white-space: nowrap;
     height: 30px;
   }
-  .pf-l-split__item:not(:last-child):after {
-    content: "";
-    background-color: var(--awx-selectedList--BorderColor);
-    width: 1px;
-    height: 30px;
-    display: block;
-    margin-left: 20px;
-    margin-right: 20px;
-  }
   .pf-c-chip {
     margin-right: 10px;
     margin-bottom: 10px;

src/components/VerticalSeparator/VerticalSeparator.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const VerticalSeparator = () => (
+  <span style={{
+    content: '',
+    backgroundColor: '#d7d7d7',
+    width: '1px',
+    height: '30px',
+    display: 'block',
+    marginLeft: '20px',
+    marginRight: '20px'
+  }}
+  />
+);
+
+export default VerticalSeparator;

src/components/VerticalSeparator/index.js

@@ -0,0 +1,3 @@
+import VerticalSeparator from './VerticalSeparator';
+
+export default VerticalSeparator;