Merge pull request Marklogic-retired#61 in PROD/explorer-ui from ~BAN…

…/explorer-ui:header-fix to develop

* commit '57f8d4e19fa0a95f6898ab06953178157e67f23b':
  added header parameter check and created selected facets component

src/components/search-result/search-result.tsx

@@ -25,8 +25,8 @@ const SearchResult: React.FC<Props> = (props) => {
     entityDef = props.entityDefArray.length && props.entityDefArray.find(entity => entity.name === itemEntityName[0]);
     primaryKeyValue = entityDef.primaryKey ? itemEntityProperties[0][entityDef.primaryKey] : '-';
     // TODO format createdOnVal using momentjs
-    createdOnVal = props.item.extracted.content[0].headers.createdOn.toString().substring(0, 19);
-    sourcesVal = props.item.extracted.content[0].headers.sources.map(src => {
+    createdOnVal = props.item.extracted.content[0].headers.hasOwnProperty('createdOn') && props.item.extracted.content[0].headers.createdOn.toString().substring(0, 19);
+    sourcesVal = props.item.extracted.content[0].headers.hasOwnProperty('sources') && props.item.extracted.content[0].headers.sources.map(src => {
         return src.name;
     }).join(', ');
     fileTypeVal = props.item.format;

src/components/selected-facets/selected-facets.module.scss

@@ -0,0 +1,19 @@
+.clearContainer {
+  margin: 10px 0 0 17px;
+}
+
+.clearAllBtn {
+  margin-right: 2px;
+}
+
+.facetButton {
+  max-width: 150px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin: 0 2px 2px 0;
+}
+
+.dateFacet {
+  width: 225px;
+  margin: 2px 2px 2px 0;
+}

src/components/selected-facets/selected-facets.tsx

@@ -0,0 +1,61 @@
+import React, { useContext } from 'react';
+import { Icon, Button } from 'antd';
+import { SearchContext } from '../../util/search-context';
+import styles from './selected-facets.module.scss';
+
+interface Props {
+  selectedFacets: any[];
+};
+
+const SelectedFacets: React.FC<Props> = (props) => {
+  const { 
+    clearAllFacets,
+    clearFacet,
+    searchOptions,
+    clearDateFacet
+   } = useContext(SearchContext);
+
+  return (
+    <div
+      className={styles.clearContainer}
+      style={ Object.entries(searchOptions.searchFacets).length === 0 ? {'visibility': 'hidden'} : {'visibility': 'visible'}}
+    >
+      <Button 
+        size="small"
+        className={styles.clearAllBtn}
+        onClick={()=> clearAllFacets()}
+      >
+        <Icon type='close'/>
+        Clear All
+      </Button>
+        { props.selectedFacets.map((item, index) => {
+          if (item.constraint === 'createdOnRange') {
+            return (
+              <Button 
+                size="small"
+                className={styles.dateFacet} 
+                key={index}
+                onClick={()=> clearDateFacet()}
+              >
+                <Icon type='close'/>
+                {item.facet.join(' ~ ')}
+              </Button>
+            )
+          }
+          return (
+            <Button 
+              size="small"
+              className={styles.facetButton} 
+              key={index}
+              onClick={()=> clearFacet(item.constraint, item.facet)}
+            >
+              <Icon type='close'/>
+              {item.facet}
+            </Button>
+          )
+        })}
+    </div>
+  );
+}
+
+export default SelectedFacets;

src/components/sidebar/sidebar.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Collapse, Icon, Button, DatePicker } from 'antd';
 import moment from 'moment';
-import { SearchContext } from '../../util/search-context';
 import Facet from '../facet/facet';
+import SelectedFacets from '../selected-facets/selected-facets';
+import { SearchContext } from '../../util/search-context';
 import { facetParser } from '../../util/data-conversion';
 import hubPropertiesConfig from '../../config/hub-properties.config';
 import styles from './sidebar.module.scss';
@@ -12,8 +13,6 @@ const { RangePicker } = DatePicker;
 
 const Sidebar = (props) => {
   const { 
-    clearAllFacets,
-    clearFacet,
     searchOptions,
     setDateFacet,
     clearDateFacet
@@ -71,45 +70,7 @@ const Sidebar = (props) => {
 
   return (
     <>
-      <div
-        className={styles.clearContainer}
-        style={ Object.entries(searchOptions.searchFacets).length === 0 ? {'visibility': 'hidden'} : {'visibility': 'visible'}}
-      >
-        <Button 
-          size="small"
-          className={styles.clearAllBtn}
-          onClick={()=> clearAllFacets()}
-        >
-          <Icon type='close'/>
-          Clear All
-        </Button>
-          { selectedFacets.map((item, index) => {
-            if (item.constraint === 'createdOnRange') {
-              return (
-                <Button 
-                  size="small"
-                  className={styles.dateFacet} 
-                  key={index}
-                  onClick={()=> clearDateFacet()}
-                >
-                  <Icon type='close'/>
-                  {item.facet.join(' ~ ')}
-                </Button>
-              )
-            }
-            return (
-              <Button 
-                size="small"
-                className={styles.facetButton} 
-                key={index}
-                onClick={()=> clearFacet(item.constraint, item.facet)}
-              >
-                <Icon type='close'/>
-                {item.facet}
-              </Button>
-            )
-          })}
-      </div>
+      <SelectedFacets selectedFacets={selectedFacets}/>
       <Collapse 
         className={styles.sidebarContainer}
         defaultActiveKey={['entityProperties', 'hubProperties']}