Merge branch 'master' into issues/614

quipucords · Feb 7, 2018 · fe2700a · fe2700a
2 parents 426d55e + 2785736
commit fe2700a
Show file tree

Hide file tree

Showing 21 changed files with 202 additions and 221 deletions.
diff --git a/client/package.json b/client/package.json
@@ -41,7 +41,7 @@
     "jquery": "^3.3.1",
     "js-cookie": "^2.2.0",
     "patternfly": "^3.37.8",
-    "patternfly-react": "^1.6.0",
+    "patternfly-react": "^1.7.0",
     "rcue": "^3.38.0",
     "react": "^16.2.0",
     "react-bootstrap": "^0.32.0",

diff --git a/client/src/components/app.js b/client/src/components/app.js
@@ -1,64 +1,123 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
-import PropTypes from 'prop-types';
-import { AboutModal } from 'patternfly-react';
+
+import {
+  AboutModal,
+  Dropdown,
+  Icon,
+  MenuItem,
+  VerticalNav
+} from 'patternfly-react';
 
 import { routes } from '../routes';
 import Store from '../redux/store';
+
 import Content from './content/content';
-import Masthead from './masthead/masthead';
 import ToastNotificationsList from './toastNotificationList/toastNotificatinsList';
-import VerticalNavigation from './verticalNavigation/verticalNavigation';
 import ConfirmationModal from './confirmationModal/confirmationModal';
 
 import logo from '../styles/images/Red_Hat_logo.svg';
 import productTitle from '../styles/images/title.svg';
+import _ from 'lodash';
+import { aboutTypes } from '../redux/constants';
 
 class App extends React.Component {
   constructor() {
     super();
     this.menu = routes();
   }
 
+  navigateTo(path) {
+    const { history } = this.props;
+    history.push(path);
+  }
+
+  renderMenuItems() {
+    const { location } = this.props;
+
+    return this.menu.map(item => {
+      return (
+        <VerticalNav.Item
+          key={item.to}
+          title={item.title}
+          iconClass={item.iconClass}
+          active={_.startsWith(location.pathname, item.to)}
+          onClick={() => this.navigateTo(item.to)}
+        />
+      );
+    });
+  }
+
+  showAboutModal() {
+    Store.dispatch({ type: aboutTypes.ABOUT_DIALOG_OPEN });
+  }
+
   render() {
     const { showAbout } = this.props;
 
     let closeAbout = () => Store.dispatch({ type: 'ABOUT_DIALOG_CLOSE' });
 
-    return [
-      <Masthead key="masthead" />,
-      <VerticalNavigation menuItems={this.menu} key="navigation" />,
-      <Content key="content" />,
-      <AboutModal
-        key="aboutModal"
-        show={showAbout}
-        onHide={closeAbout}
-        productTitle={
-          <img src={productTitle} alt="Red Hat Entitlements Reporting" />
-        }
-        logo={logo}
-        altLogo="RH ER"
-        trademarkText="Copyright (c) 2018 Red Hat Inc."
-      >
-        <AboutModal.Versions>
-          <AboutModal.VersionItem label="Label" versionText="Version" />
-          <AboutModal.VersionItem label="Label" versionText="Version" />
-          <AboutModal.VersionItem label="Label" versionText="Version" />
-          <AboutModal.VersionItem label="Label" versionText="Version" />
-          <AboutModal.VersionItem label="Label" versionText="Version" />
-          <AboutModal.VersionItem label="Label" versionText="Version" />
-          <AboutModal.VersionItem label="Label" versionText="Version" />
-        </AboutModal.Versions>
-      </AboutModal>,
-      <ToastNotificationsList key="toastList" />,
-      <ConfirmationModal key="confirmationModal" />
-    ];
+    return (
+      <div className="layout-pf layout-pf-fixed">
+        <VerticalNav>
+          <VerticalNav.Masthead>
+            <VerticalNav.Brand titleImg={productTitle} />
+            <nav className="collapse navbar-collapse">
+              <ul className="navbar-iconic nav navbar-nav navbar-right">
+                <Dropdown componentClass="li" id="help">
+                  <Dropdown.Toggle useAnchor className="nav-item-iconic">
+                    <Icon type="pf" name="help" />
+                  </Dropdown.Toggle>
+                  <Dropdown.Menu>
+                    <MenuItem>Help</MenuItem>
+                    <MenuItem onClick={this.showAboutModal}>About</MenuItem>
+                  </Dropdown.Menu>
+                </Dropdown>
+              </ul>
+            </nav>
+          </VerticalNav.Masthead>
+          {this.renderMenuItems()}
+        </VerticalNav>
+        <div className="container-pf-nav-pf-vertical">
+          <Content />
+        </div>
+        <AboutModal
+          key="aboutModal"
+          show={showAbout}
+          onHide={closeAbout}
+          productTitle={
+            <img src={productTitle} alt="Red Hat Entitlements Reporting" />
+          }
+          logo={logo}
+          altLogo="RH ER"
+          trademarkText="Copyright (c) 2018 Red Hat Inc."
+        >
+          <AboutModal.Versions>
+            <AboutModal.VersionItem label="Label" versionText="Version" />
+            <AboutModal.VersionItem label="Label" versionText="Version" />
+            <AboutModal.VersionItem label="Label" versionText="Version" />
+            <AboutModal.VersionItem label="Label" versionText="Version" />
+            <AboutModal.VersionItem label="Label" versionText="Version" />
+            <AboutModal.VersionItem label="Label" versionText="Version" />
+            <AboutModal.VersionItem label="Label" versionText="Version" />
+          </AboutModal.Versions>
+        </AboutModal>
+        <ToastNotificationsList key="toastList" />
+        <ConfirmationModal key="confirmationModal" />
+      </div>
+    );
   }
 }
 
 App.propTypes = {
-  showAbout: PropTypes.bool
+  showAbout: PropTypes.bool,
+  location: PropTypes.object,
+  history: PropTypes.shape({
+    push: PropTypes.func.isRequired
+  }).isRequired
 };
 
 function mapStateToProps(state, ownProps) {

diff --git a/client/src/components/content/content.js b/client/src/components/content/content.js
@@ -1,10 +1,6 @@
-import ClassNames from 'classnames';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { routes } from '../../routes';
-import { withRouter } from 'react-router';
 
 class Content extends React.Component {
   renderRoutes() {
@@ -23,15 +19,10 @@ class Content extends React.Component {
   }
 
   render() {
-    let classes = ClassNames({
-      'container-pf-nav-pf-vertical': true,
-      'collapsed-nav': this.props.navigationBar.collapsed
-    });
-
     const { renderRoutes, redirectRoot } = this.renderRoutes();
 
     return (
-      <div className={classes}>
+      <div className="quipucords-content">
         <Switch>
           {renderRoutes}
           {redirectRoot}
@@ -40,12 +31,5 @@ class Content extends React.Component {
     );
   }
 }
-Content.propTypes = {
-  navigationBar: PropTypes.object
-};
-
-function mapStateToProps(state, ownProps) {
-  return state;
-}
 
-export default withRouter(connect(mapStateToProps)(Content));
+export default Content;
diff --git a/client/src/components/createCredentialDialog/createCredentialDialog.js b/client/src/components/createCredentialDialog/createCredentialDialog.js
@@ -598,7 +598,7 @@ CreateCredentialDialog.propTypes = {
   credentials: PropTypes.array,
 
   newCredential: PropTypes.object,
-  newCredentialType: PropTypes.string,
+  newCredentialType: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
   addCredential: PropTypes.func,
   addFulfilled: PropTypes.bool,
   addError: PropTypes.bool,

diff --git a/client/src/components/credentials/credentialListItem.js b/client/src/components/credentials/credentialListItem.js
@@ -13,8 +13,13 @@ class CredentialListItem extends React.Component {
 
   toggleExpand(expandType) {
     const { item } = this.props;
-    item.expanded = !item.expanded;
-    item.expandType = expandType;
+
+    if (expandType === item.expandType) {
+      item.expanded = !item.expanded;
+    } else {
+      item.expanded = true;
+      item.expandType = expandType;
+    }
     this.forceUpdate();
   }
 

diff --git a/client/src/components/credentials/credentialsToolbar.js b/client/src/components/credentials/credentialsToolbar.js
@@ -68,13 +68,15 @@ class CredentialsToolbar extends React.Component {
     let filter = { field: field, value: value, label: filterText };
     Store.dispatch({
       type: viewToolbarTypes.ADD_FILTER,
+      viewType: viewToolbarTypes.CREDENTIALS_VIEW,
       filter
     });
   }
 
   selectFilterType(filterType) {
     Store.dispatch({
       type: viewToolbarTypes.SET_FILTER_TYPE,
+      viewType: viewToolbarTypes.CREDENTIALS_VIEW,
       filterType
     });
   }
@@ -85,6 +87,7 @@ class CredentialsToolbar extends React.Component {
     let filterValue = newFilterValue;
     Store.dispatch({
       type: viewToolbarTypes.SET_FILTER_VALUE,
+      viewType: viewToolbarTypes.CREDENTIALS_VIEW,
       filterValue
     });
     if (newFilterValue) {
@@ -96,6 +99,7 @@ class CredentialsToolbar extends React.Component {
     let filterValue = event.target.value;
     Store.dispatch({
       type: viewToolbarTypes.SET_FILTER_VALUE,
+      viewType: viewToolbarTypes.CREDENTIALS_VIEW,
       filterValue
     });
   }
@@ -113,26 +117,30 @@ class CredentialsToolbar extends React.Component {
   removeFilter(filter) {
     Store.dispatch({
       type: viewToolbarTypes.REMOVE_FILTER,
+      viewType: viewToolbarTypes.CREDENTIALS_VIEW,
       filter
     });
   }
 
   clearFilters() {
     Store.dispatch({
-      type: viewToolbarTypes.CLEAR_FILTERS
+      type: viewToolbarTypes.CLEAR_FILTERS,
+      viewType: viewToolbarTypes.CREDENTIALS_VIEW
     });
   }
 
   updateCurrentSortType(sortType) {
     Store.dispatch({
       type: viewToolbarTypes.SET_SORT_TYPE,
+      viewType: viewToolbarTypes.CREDENTIALS_VIEW,
       sortType
     });
   }
 
   toggleCurrentSortDirection() {
     Store.dispatch({
-      type: viewToolbarTypes.TOGGLE_SORT_ASCENDING
+      type: viewToolbarTypes.TOGGLE_SORT_ASCENDING,
+      viewType: viewToolbarTypes.CREDENTIALS_VIEW
     });
   }
 
@@ -247,7 +255,7 @@ class CredentialsToolbar extends React.Component {
         {activeFilters && activeFilters.length > 0
           ? `${filteredCount} of `
           : null}
-        {totalCount + (totalCount > 1 ? ' Results' : ' Result')}
+        {totalCount + (totalCount > 1 ? ' Credentials' : ' Credential')}
       </h5>
     );
   }

diff --git a/client/src/components/masthead/masthead.js b/client/src/components/masthead/masthead.js
diff --git a/client/src/components/scans/scanListItem.js b/client/src/components/scans/scanListItem.js
@@ -24,8 +24,13 @@ class ScanListItem extends React.Component {
 
   toggleExpand(expandType) {
     const { item } = this.props;
-    item.expanded = !item.expanded;
-    item.expandType = expandType;
+
+    if (expandType === item.expandType) {
+      item.expanded = !item.expanded;
+    } else {
+      item.expanded = true;
+      item.expandType = expandType;
+    }
     this.forceUpdate();
   }