feat(critical facility details): displayer critical facility name and details in header

Author: Mloweedgar

src/GeographicalFeatures/CriticalFacilities/DetailsView/Header.js

@@ -1,15 +1,30 @@
 import React from 'react';
+import { PageHeader } from 'antd';
+import PropTypes from 'prop-types';
 
 /**
+ * @param root0
+ * @param root0.name
+ * @param root0.description
+ * @param root0.onBack
  * @function
  * @name CriticalFacilityDetailsViewHeader
  * @description header details of a critical facility
  * @returns {object} React component
  * @version 0.1.0
  * @since 0.1.0
  */
-const CriticalFacilityDetailsViewHeader = () => {
-  return <div>This is header</div>;
-};
+const CriticalFacilityDetailsViewHeader = ({ name, description, onBack }) => (
+  <PageHeader
+    title={<span style={{ fontSize: '16px', fontWeight: 500 }}>{name}</span>}
+    subTitle={description}
+    onBack={() => onBack()}
+  />
+);
 
 export default CriticalFacilityDetailsViewHeader;
+CriticalFacilityDetailsViewHeader.propTypes = {
+  name: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  onBack: PropTypes.func.isRequired,
+};

src/GeographicalFeatures/CriticalFacilities/index.js

@@ -637,10 +637,8 @@ class FeatureList extends Component {
         <Drawer
           title={
             <CriticalFacilityDetailsViewHeader
-              number={get(feature, 'number', 'N/A')}
-              description={get(feature, 'description', 'N/A')}
-              type={get(feature, 'type.strings.name.en', 'N/A')}
-              stage={get(feature, 'stage', 'N/A')}
+              name={get(feature, 'strings.name.en', 'N/A')}
+              description={get(feature, 'strings.description.en', 'N/A')}
               onBack={this.closeDetails}
             />
           }