Merge remote-tracking branch 'origin/master' into react-context-api

src/components/DataListToolbar/DataListToolbar.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { I18n } from '@lingui/react';
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/macro';
 import {
   Button,
   Checkbox,
@@ -23,6 +23,7 @@ import {
   SortNumericDownIcon,
   SortNumericUpIcon,
   TrashAltIcon,
+  PlusIcon
 } from '@patternfly/react-icons';
 import {
   Link
@@ -85,7 +86,8 @@ class DataListToolbar extends React.Component {
       onSort,
       sortedColumnKey,
       sortOrder,
-      addUrl
+      addUrl,
+      showExpandCollapse
     } = this.props;
     const {
       // isActionDropdownOpen,
@@ -113,6 +115,22 @@ class DataListToolbar extends React.Component {
       return icon;
     };
 
+    const searchDropdownItems = columns
+      .filter(({ key }) => key !== searchKey)
+      .map(({ key, name }) => (
+        <DropdownItem key={key} component="button">
+          { name }
+        </DropdownItem>
+      ));
+
+    const sortDropdownItems = columns
+      .filter(({ key, isSortable }) => isSortable && key !== sortedColumnKey)
+      .map(({ key, name }) => (
+        <DropdownItem key={key} component="button">
+          { name }
+        </DropdownItem>
+      ));
+
     return (
       <I18n>
         {({ i18n }) => (
@@ -145,13 +163,8 @@ class DataListToolbar extends React.Component {
                               { searchColumnName }
                             </DropdownToggle>
                           )}
-                        >
-                          {columns.filter(({ key }) => key !== searchKey).map(({ key, name }) => (
-                            <DropdownItem key={key} component="button">
-                              { name }
-                            </DropdownItem>
-                          ))}
-                        </Dropdown>
+                          dropdownItems={searchDropdownItems}
+                        />
                         <TextInput
                           type="search"
                           aria-label={i18n._(t`Search text input`)}
@@ -182,15 +195,8 @@ class DataListToolbar extends React.Component {
                             { sortedColumnName }
                           </DropdownToggle>
                         )}
-                      >
-                        {columns
-                          .filter(({ key, isSortable }) => isSortable && key !== sortedColumnKey)
-                          .map(({ key, name }) => (
-                            <DropdownItem key={key} component="button">
-                              { name }
-                            </DropdownItem>
-                          ))}
-                      </Dropdown>
+                        dropdownItems={sortDropdownItems}
+                      />
                     </ToolbarItem>
                     <ToolbarItem>
                       <Button
@@ -202,18 +208,20 @@ class DataListToolbar extends React.Component {
                       </Button>
                     </ToolbarItem>
                   </ToolbarGroup>
-                  <ToolbarGroup>
-                    <ToolbarItem>
-                      <Button variant="plain" aria-label={i18n._(t`Expand`)}>
-                        <BarsIcon />
-                      </Button>
-                    </ToolbarItem>
-                    <ToolbarItem>
-                      <Button variant="plain" aria-label={i18n._(t`Collapse`)}>
-                        <EqualsIcon />
-                      </Button>
-                    </ToolbarItem>
-                  </ToolbarGroup>
+                  { showExpandCollapse && (
+                    <ToolbarGroup>
+                      <ToolbarItem>
+                        <Button variant="plain" aria-label={i18n._(t`Expand`)}>
+                          <BarsIcon />
+                        </Button>
+                      </ToolbarItem>
+                      <ToolbarItem>
+                        <Button variant="plain" aria-label={i18n._(t`Collapse`)}>
+                          <EqualsIcon />
+                        </Button>
+                      </ToolbarItem>
+                    </ToolbarGroup>
+                  )}
                 </Toolbar>
               </LevelItem>
               <LevelItem>
@@ -225,7 +233,7 @@ class DataListToolbar extends React.Component {
                 {addUrl && (
                   <Link to={addUrl}>
                     <Button variant="primary" aria-label={i18n._(t`Add`)}>
-                      <Trans>Add</Trans>
+                      <PlusIcon />
                     </Button>
                   </Link>
                 )}

src/components/DataListToolbar/styles.scss

@@ -33,7 +33,7 @@
   margin-right: 20px;
 }
 
-.awx-toolbar button {
+.awx-toolbar button.pf-c-button {
   height: 30px;
   padding: 0px;
 }
@@ -43,7 +43,7 @@
   height: 30px;
 
   input {
-    padding: 0px;
+    padding: 0 10px;
     width: 300px;
   }
 
@@ -57,7 +57,7 @@
   min-height: 30px;
   min-width: 70px;
   height: 30px;
-  padding: 0px;
+  padding: 0 10px;
   margin: 0px;
 
   .pf-c-dropdown__toggle-icon {
@@ -74,10 +74,9 @@
 .awx-toolbar .pf-c-button.pf-m-primary {
   background-color: #5cb85c;
   min-width: 0px;
-  width: 58px;
+  width: 30px;
   height: 30px;
   text-align: center;
-
   padding: 0px;
   margin: 0px;
   margin-right: 20px;

src/components/NavExpandableGroup.jsx

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import {
+  withRouter
+} from 'react-router-dom';
+import {
+  NavExpandable,
+  NavItem,
+} from '@patternfly/react-core';
+
+class NavExpandableGroup extends Component {
+  constructor (props) {
+    super(props);
+    const { routes } = this.props;
+    // Extract a list of paths from the route params and store them for later. This creates
+    // an array of url paths associated with any NavItem component rendered by this component.
+    this.navItemPaths = routes.map(({ path }) => path);
+  }
+
+  isActiveGroup = () => this.navItemPaths.some(this.isActivePath);
+
+  isActivePath = (path) => {
+    const { history } = this.props;
+
+    return history.location.pathname.startsWith(path);
+  };
+
+  render () {
+    const { routes, groupId, staticContext, ...rest } = this.props;
+    const isActive = this.isActiveGroup();
+
+    return (
+      <NavExpandable
+        isActive={isActive}
+        isExpanded={isActive}
+        groupId={groupId}
+        {...rest}
+      >
+        {routes.map(({ path, title }) => (
+          <NavItem
+            groupId={groupId}
+            isActive={this.isActivePath(path)}
+            key={path}
+            to={`/#${path}`}
+          >
+            {title}
+          </NavItem>
+        ))}
+      </NavExpandable>
+    );
+  }
+}
+
+export default withRouter(NavExpandableGroup);