Adding filter bar

Issue-ID: AAI-543
Change-Id: I18ec69f4585a9f01feafd009fcd30493a039b064
Signed-off-by: Shawn Severin <shawn.severin@amdocs.com>

1 files changed, 128 insertions, 56 deletions

diff --git a/src/app/MainScreenHeader.jsx b/src/app/MainScreenHeader.jsx
index af71a97..856a08d 100644
--- a/src/app/MainScreenHeader.jsx
+++ b/src/app/MainScreenHeader.jsx
@@ -1,25 +1,28 @@
 /*
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
  * Copyright © 2017 Amdocs
- * ================================================================================
+ * All rights reserved.
+ * ============================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
- *       http://www.apache.org/licenses/LICENSE-2.0
+ *      http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- * ============LICENSE_END=========================================================
+ * ============LICENSE_END=====================================================
  *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
  */
+
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import FontAwesome from 'react-fontawesome';
@@ -28,7 +31,8 @@ import Modal from 'react-bootstrap/lib/Modal.js';
 import GlobalAutoCompleteSearchBar from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBar.jsx';
 import {postAnalyticsData} from 'app/analytics/AnalyticsActions.js';
 import GlobalInlineMessageBar from 'app/GlobalInlineMessageBar/GlobalInlineMessageBar.jsx';
-import {getClearGlobalMessageEvent} from 'app/GlobalInlineMessageBar/GlobalInlineMessageBarActions.js';
+import {getClearGlobalMessageEvent} from 'app/globalInlineMessageBar/GlobalInlineMessageBarActions.js';
+import {externalUrlRequest, externalMessageRequest} from 'app/contextHandler/ContextHandlerActions.js';
 
 import {
   Route,
@@ -42,25 +46,32 @@ import {
 } from './MainScreenWrapperConstants.js';
 
 import {
-  showMainMenu
+  showMainMenu,
+  clearExtensibleViewData,
+  setSecondaryTitle
 } from './MainScreenWrapperActionHelper.js';
 
 import {clearSuggestionsTextField} from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarActions.js';
-
-import customViews from 'resources/views/customViews.json';
-
+import {changeUrlAddress} from 'utils/Routes.js';
+import extensibleViews from 'resources/views/extensibleViews.json';
+import {clearFilters} from 'generic-components/filterBar/FilterBarUtils.js';
 const mapStateToProps = ({mainWrapper}) => {
   let {
-        showMenu = false,
-        toggleButtonActive = false
-      } = mainWrapper;
+    showMenu = false,
+    toggleButtonActive = false,
+    externalRequestFound = {},
+    secondaryTitle = ''
+  } = mainWrapper;
 
   return {
     showMenu,
-    toggleButtonActive
+    toggleButtonActive,
+    externalRequestFound,
+    secondaryTitle
   };
 };
 
+
 const mapActionsToProps = (dispatch) => {
   return {
     onShowMenu: () => dispatch(showMainMenu(true)),
@@ -72,6 +83,15 @@ const mapActionsToProps = (dispatch) => {
     onRouteChange: () => {
       dispatch(getClearGlobalMessageEvent());
       dispatch(clearSuggestionsTextField());
+      dispatch(clearExtensibleViewData());
+      dispatch(clearFilters());
+      dispatch(setSecondaryTitle(undefined));
+    },
+    onExternalUrlRequest: (urlParamString) => {
+      dispatch(externalUrlRequest(urlParamString));
+    },
+    onExternalMessageRecieved: (messageJson) => {
+      dispatch(externalMessageRequest(messageJson));
     }
   };
 };
@@ -79,7 +99,9 @@ const mapActionsToProps = (dispatch) => {
 class MainScreenHeader extends Component {
   static propTypes = {
     showMenu: React.PropTypes.bool,
-    toggleButtonActive: React.PropTypes.bool
+    toggleButtonActive: React.PropTypes.bool,
+    externalRequestFound: React.PropTypes.object,
+    secondaryTitle: React.PropTypes.string
   };
 
   navigationLinkAndCurrentPathMatch(location, to) {
@@ -101,10 +123,23 @@ class MainScreenHeader extends Component {
       return false;
     }
   }
-
+  isValidExternalURL(url) {
+    if(decodeURIComponent(url).indexOf('&') > 0 ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  componentWillMount() {
+    if(this.props.match.params.externalUrl !== undefined &&
+      this.isValidExternalURL(this.props.match.params.externalUrl)) {
+      this.props.onExternalUrlRequest(this.props.match.params.externalUrl);
+    }
+  }
   componentWillReceiveProps(nextProps) {
     if (this.props.location &&
-      this.props.location.pathname !== nextProps.location.pathname) {
+      this.props.location.pathname !==
+      nextProps.location.pathname) {
       // update analytics
       this.props.dispatchAnalyticsData();
 
@@ -113,15 +148,50 @@ class MainScreenHeader extends Component {
         this.props.onRouteChange();
       }
     }
+
+    if(nextProps.match.params.externalUrl !== undefined &&
+      nextProps.match.params.externalUrl !== this.props.match.params.externalUrl &&
+      this.isValidExternalURL(nextProps.match.params.externalUrl)) {
+      this.props.onExternalUrlRequest(nextProps.match.params.externalUrl);
+    }
+    /* if the externalURL is not valid, we do not add any message as other proper
+    views will get that messages since the route will be this parameter.*/
+
+    if(this.props.externalRequestFound !== nextProps.externalRequestFound &&
+      nextProps.externalRequestFound !== undefined && nextProps.externalRequestFound.suggestion !== undefined) {
+      changeUrlAddress(nextProps.externalRequestFound.suggestion, nextProps.history);
+    }
+  }
+
+  receiveMessage(event) {
+    function isJson(str) {
+      try {
+        JSON.parse(str);
+      } catch (e) {
+        return false;
+      }
+      return true;
+    }
+    let messageData = event.data.message;
+    if(isJson(messageData)) {
+      this.props.onExternalMessageRecieved(JSON.parse(messageData));
+    }
+  }
+  componentDidMount() {
+    window.addEventListener('message', this.receiveMessage, false);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('message', this.receiveMessage);
   }
 
   render() {
     let {
-          showMenu,
-          onShowMenu,
-          onHideMenu,
-          toggleButtonActive
-        } = this.props;
+      showMenu,
+      onShowMenu,
+      onHideMenu,
+      toggleButtonActive,
+      secondaryTitle
+    } = this.props;
 
     let menuOptions = [];
 
@@ -138,54 +208,56 @@ class MainScreenHeader extends Component {
 
     // add Tier Support view
     menuOptions.push(
-      <MenuItem to='/viewInspect' label={MENU_ITEM_TIER_SUPPORT}
+      <MenuItem key='schemaMenu' to='/schema' label={MENU_ITEM_TIER_SUPPORT}
                 iconClass='button-icon view-inspect-button-icon'/>
     );
 
     // add VNF view
-    // 2172a3c25ae56e4995038ffbc1f055692bfc76c0b8ceda1205bc745a9f7a805d is
-    // the hash for 'VNFs' ... ensures VNF Search screen defaults to the
-    // aggregate VNF results
     menuOptions.push(
-      <MenuItem
-        to='/vnfSearch/2172a3c25ae56e4995038ffbc1f055692bfc76c0b8ceda1205bc745a9f7a805d'
+      <MenuItem key='vnfSearchMenu'
+        to='/vnfSearch'
         label={MENU_ITEM_VNF_SEARCH}
         iconClass='button-icon vnf-search-button-icon'/>
     );
 
     // add all custom view menu options
-    for (let view in customViews) {
+    for (let view in extensibleViews) {
       menuOptions.push(
-        <MenuItem to={customViews[view]['viewName']}
-                  label={customViews[view]['displayName']}
-                  iconClass='button-icon inventory-button-icon'/>
+        <MenuItem key={extensibleViews[view]['viewName'] + 'Menu'} to={'/' + extensibleViews[view]['viewName']}
+                  label={extensibleViews[view]['displayName']}
+                  iconClass={'button-icon ' + extensibleViews[view]['iconClass']}/>
       );
     }
 
+    let secondaryTitleClass = 'secondary-header';
+    if (secondaryTitle === undefined || secondaryTitle === '') {
+      secondaryTitleClass = secondaryTitleClass + ' hidden';
+    }
+
     return (
-      <div>
-        <div className='header'>
-          <div>
-            <Button
-              bsClass={(toggleButtonActive)
-              ? 'toggle-view-button-active'
-              : 'toggle-view-button'}
-              onClick={onShowMenu}>
-              <FontAwesome name='bars'/>
-            </Button>
-            <Modal show={showMenu} onHide={onHideMenu}
-                   dialogClassName='modal-main-menu'>
-              <Modal.Body>
-                {menuOptions}
-              </Modal.Body>
-            </Modal>
-            <span className='application-title'>{AAI_TITLE}</span>
-            <GlobalAutoCompleteSearchBar history={this.props.history}/>
-          </div>
-          <GlobalInlineMessageBar />
+      <div className='header'>
+        <div>
+          <Button
+            bsClass={(toggleButtonActive)
+            ? 'toggle-view-button-active'
+            : 'toggle-view-button'}
+            onClick={onShowMenu}>
+            <FontAwesome name='bars'/>
+          </Button>
+          <Modal show={showMenu} onHide={onHideMenu}
+                 dialogClassName='modal-main-menu'>
+            <Modal.Body>
+              {menuOptions}
+            </Modal.Body>
+          </Modal>
+          <span className='application-title'>{AAI_TITLE}</span>
+          <GlobalAutoCompleteSearchBar history={this.props.history}/>
+        </div>
+        <GlobalInlineMessageBar />
+        <div className={secondaryTitleClass}>
+          <span className='secondary-title'>{secondaryTitle}</span>
         </div>
       </div>
-
     );
   }
 }