X-Git-Url: https://gerrit.onap.org/r/gitweb?p=aai%2Fsparky-fe.git;a=blobdiff_plain;f=src%2Fgeneric-components%2FautoCompleteSearchBar%2FAutoCompleteSearchBar.jsx;h=3bc950898f516acc4440ed8b7f1c4a48e79e8736;hp=2daefb348e90f864203c46c537a7df61ccc55734;hb=5ee7367a101143715c2869d72ea4a6fbf55f5af6;hpb=1580adb8ab521e55a129afc32693071620d85c02

diff --git a/src/generic-components/autoCompleteSearchBar/AutoCompleteSearchBar.jsx b/src/generic-components/autoCompleteSearchBar/AutoCompleteSearchBar.jsx
index 2daefb3..3bc9508 100644
--- a/src/generic-components/autoCompleteSearchBar/AutoCompleteSearchBar.jsx
+++ b/src/generic-components/autoCompleteSearchBar/AutoCompleteSearchBar.jsx
@@ -2,8 +2,8 @@
  * ============LICENSE_START=======================================================
  * org.onap.aai
  * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
+ * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
+ * Copyright © 2017-2018 Amdocs
  * ================================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,22 +17,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * ============LICENSE_END=========================================================
- *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 import {Button} from 'react-bootstrap';
 import AutoSuggest from 'react-autosuggest';
 import Highlighter from 'react-highlight-words';
 import debounce from 'lodash.debounce';
 import {ButtonGroup} from 'react-bootstrap';
+import Modal from 'react-bootstrap/lib/Modal';
 import {Link} from 'react-router-dom';
+import {genericRequest} from 'app/networking/NetworkCalls.js';
 
 import {changeUrlAddress} from 'utils/Routes.js';
 
 import {
   ICON_CLASS_SEARCH,
   ICON_CLASS_CLEAR,
+  ICON_CLASS_HELP,
   SEARCH_DEBOUNCE_TIME,
   NO_MATCHES_FOUND,
   SEARCH_PLACEHOLDER_TEXT
@@ -40,10 +42,19 @@ import {
 
 export default class AutoCompleteSearchBar extends Component {
   static propTypes = {
-    value: React.PropTypes.string,
-    suggestions: React.PropTypes.array,
-    cachedSuggestions: React.PropTypes.array,
-    suggestionName: React.PropTypes.string
+    value: PropTypes.string,
+    suggestions: PropTypes.array,
+    cachedSuggestions: PropTypes.array,
+    suggestionName: PropTypes.string
+  };
+
+  constructor(props) {
+    console.log(props);
+    super(props);
+    this.state = {
+      helpModalShow: false,
+      searchable: []
+    };
   };
 
   componentWillMount() {
@@ -95,22 +106,53 @@ export default class AutoCompleteSearchBar extends Component {
 
   render() {
     const {
-            value, suggestions,
-            suggestionName, cachedSuggestions,
-            onInputChange, onInvalidSearch,
-            onClearSuggestionsTextFieldRequested,
-            onSuggestionsClearRequested,
-            dispatchAnalytics
-          } = this.props;
+      value, suggestions,
+      suggestionName, cachedSuggestions,
+      onInputChange, onInvalidSearch,
+      onClearSuggestionsTextFieldRequested,
+      onSuggestionsClearRequested,
+      dispatchAnalytics
+    } = this.props;
     const inputProps = {
       placeholder: SEARCH_PLACEHOLDER_TEXT,
       value,
       onChange: onInputChange
     };
 
+    let closeHelpModal = () => {
+      this.setState({helpModalShow: false});
+    };
+    let showHelpModal = () => {
+      genericRequest('/schema/searchable', true, 'GET').then(res=>{
+        let searchDOM =  res.sort(function(a, b) {
+          var compareA = (a['node-type']).toLowerCase();
+          var compareB = (b['node-type']).toLowerCase();
+          if(compareA < compareB){
+            return -1;
+          };
+          if(compareA > compareB){
+            return 1;
+          };
+          return 0;
+        }).map((prop) => {
+          return (
+            <div><p><strong>{prop['node-type']}:</strong></p><p>{prop['searchable-attributes']}</p></div>
+          );
+        });
+        this.setState({searchable: searchDOM, helpModalShow: true});
+      }, error => {
+        console.log(error);
+        this.setState({searchable: 'An error occurred, please try again later.', helpModalShow: true});
+      }).catch(error => {
+        console.log(error);
+        this.setState({searchable: 'An error occurred, please try again later.', helpModalShow: true});
+      });
+    };
+
     let clearButtonClass = (value.length > 0)
       ? 'auto-complete-clear-button'
       : 'auto-complete-clear-button hidden';
+
     return (
       <div className='auto-complete-search'>
         <AutoSuggest
@@ -128,10 +170,12 @@ export default class AutoCompleteSearchBar extends Component {
           renderSuggestionsContainer={this.renderSuggestionsContainer}/>
         <ButtonGroup className='auto-complete-search-button-group'>
           <Button type='submit' className={clearButtonClass}
-                  onClick={onClearSuggestionsTextFieldRequested}>
+            onClick={onClearSuggestionsTextFieldRequested}>
             <i className={ICON_CLASS_CLEAR} aria-hidden='true'/>
           </Button>
-
+          <Button type='submit' className='auto-complete-help-button' onClick={showHelpModal}>
+            <i className={ICON_CLASS_HELP} aria-hidden='true'/>
+          </Button>
           <Button type='submit' className='auto-complete-search-button' onClick={() => {
             this.newSearchSelected(this.getSelectedSuggestionObj(value, cachedSuggestions),
               onInvalidSearch, dispatchAnalytics, value);
@@ -140,6 +184,21 @@ export default class AutoCompleteSearchBar extends Component {
             <i className={ICON_CLASS_SEARCH} aria-hidden='true'/>
           </Button>
         </ButtonGroup>
+        <div className='static-modal'>
+          <Modal show={this.state.helpModalShow} onHide={closeHelpModal}>
+            <Modal.Header>
+            	<Modal.Title>Searchable Fields</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+              <div className='modal-searchable'>
+                {this.state.searchable}
+              </div>
+            </Modal.Body>
+            <Modal.Footer>
+            	<Button onClick={closeHelpModal}>Close</Button>
+            </Modal.Footer>
+          </Modal>
+        </div>
       </div>
     );
   }
@@ -165,7 +224,8 @@ export default class AutoCompleteSearchBar extends Component {
                     <Highlighter key={arrayIndex + 'high'}
                                  highlightClassName='highlight'
                                  searchWords={toHighLightArray}
-                                 textToHighlight={suggestionTextArray[arrayIndex]}/>
+                                 textToHighlight={suggestionTextArray[arrayIndex]}
+                                 autoEscape={true}/>
                     { ++arrayIndex ? ' ' : ' '}
                  </span>);
 
@@ -186,7 +246,8 @@ export default class AutoCompleteSearchBar extends Component {
                       <Highlighter key={arrayIndex + 'high'}
                                    highlightClassName='highlight'
                                    searchWords={toHighLightArray}
-                                   textToHighlight={suggestionTextArray[arrayIndex]}/>
+                                   textToHighlight={suggestionTextArray[arrayIndex]}
+                                   autoEscape={true}/>
                       { ++arrayIndex ? ' ' : ' '}
                    </span>);
 
@@ -202,7 +263,7 @@ export default class AutoCompleteSearchBar extends Component {
       rest.className = 'react-autosuggest__suggestions-containerCopy';
     }
     return (
-      <div {...rest}>
+      <div {...rest.containerProps} {...rest}>
         {children}
       </div>
     );