Merge pull request Marklogic-retired#15 in PROD/explorer-ui from ~TIS…

…ANGUL/explorer-ui:DHFPROD-2861 to develop

* commit 'd2c7c9687b3138c0941c610ea60c5afb236cf6fc':
  Aries's fix for the search pagination
  removed interface
  added interface
  Select one entity before starting the search for documents

src/components/search-bar/search-bar.tsx

@@ -2,20 +2,17 @@ import React from 'react';
 import { Select, Input } from 'antd';
 import styles from './search-bar.module.scss';
 
-function handleChange(value) {
-    console.log(`selected ${value}`);
-}
-
-const SearchBar = ({ searchCallback }) => {
+const SearchBar = ({ searchCallback, optionSelectCallback, entities }) => {
     const { Search } = Input;
     const { Option } = Select;
 
-    const entities = ['All Entities', 'Product', 'Order'];
+    entities = ['All Entities', ...entities];
+
     const options = entities.map((e, i) => 
         <Option value={e} key={i}>{e}</Option>
     );
     const entityMenu = (
-        <Select defaultValue="All Entities" style={{ width: 180 }} onChange={handleChange}>
+        <Select defaultValue="All Entities" style={{ width: 180 }} onChange={value => optionSelectCallback(value)}>
             {options}
         </Select>
     );

src/pages/Browse.tsx

@@ -6,19 +6,30 @@ import SearchPagination from '../components/search-pagination/search-pagination'
 import { Layout, Spin } from 'antd';
 import SearchSummary from '../components/search-summary/search-summary';
 import SearchResults from '../components/search-results/search-results';
+import { entityFromJSON } from '../util/data-conversion';
 
 const Browse: React.FC = () => {
   const { Content, Sider } = Layout;
 
   const [data, setData] = useState();
+  const [entities, setEntites] = useState<any[]>([]);
   const [facets, setFacets] = useState();
   const [searchUrl, setSearchUrl] = useState<any>({ url: `/datahub/v2/search`, method: 'post' });
   const [searchQuery, setSearchQuery] = useState();
-  const [searchParams, setSearchParams] = useState({ start: 1, pageLength: 10 });
+  const [searchParams, setSearchParams] = useState({ start: 1, pageLength: 10, entities: entities });
   const [searchFacets, setSearchFacets] = useState({});
   const [isLoading, setIsLoading] = useState(false);
   const [totalDocuments, setTotalDocuments] = useState();
 
+  const getEntityModel = async () => {
+    try {
+      const response = await axios(`/datahub/v2/models`);
+      setEntites([ ...entityFromJSON(response.data).map(entity => entity.info.title)]);
+    } catch (error) {
+      // console.log('error', error.response);
+    }
+  }
+
   const getSearchResults = async () => {
     try {
       setIsLoading(true);
@@ -27,7 +38,7 @@ const Browse: React.FC = () => {
         url: searchUrl.url,
         data: {
           query: searchQuery,
-          entityNames: [], // TODO handle entity selection
+          entityNames: searchParams.entities,
           start: searchParams.start,
           pageLength: searchParams.pageLength,
           facets: searchFacets
@@ -44,12 +55,14 @@ const Browse: React.FC = () => {
   }
 
   useEffect(() => {
+    getEntityModel();
     getSearchResults();
   }, [searchQuery, searchParams, searchFacets]);
 
   const handleSearch = (searchString: string) => {
     console.log('The user typed string is ' + searchString);
     setSearchQuery(searchString);
+    setSearchParams({ ...searchParams, start: 1});
   }
 
   const handlePageChange = (pageNumber: number) => {
@@ -71,6 +84,12 @@ const Browse: React.FC = () => {
       delete newSearchFacets[constraint];
       setSearchFacets(newSearchFacets);
     }
+    setSearchParams({ ...searchParams, start: 1});
+  }
+
+  const handleOptionSelect = (option: string) => {
+    console.log('Selected Option is ' + option);
+    option === 'All Entities' ?  setSearchParams({ ...searchParams, entities: []}) :  setSearchParams({ ...searchParams, entities: [option]});
   }
 
   return (
@@ -82,7 +101,7 @@ const Browse: React.FC = () => {
         />
       </Sider>
       <Content style={{ background: '#fff', padding: '24px' }}>
-        <SearchBar searchCallback={handleSearch} />
+      <SearchBar searchCallback={handleSearch} optionSelectCallback={handleOptionSelect} entities={entities}/>
         {isLoading ? 
           <Spin tip="Loading..." style={{ margin: '100px auto', width: '100%'}} />
           :