[Maps] show layer name in tooltip (#97175)

* [Maps] show layer name in tooltip

* update snapshot

* add jest test for Header

* add comment for clarity

* add header element and classes to truncate text

* add layer icon in tooltip header

* handle case where layer does not exist

* tslint and update jest test and snapshot

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/maps/public/classes/layers/layer.tsx

@@ -10,7 +10,7 @@
 import { Map as MbMap } from 'mapbox-gl';
 import { Query } from 'src/plugins/data/public';
 import _ from 'lodash';
-import React, { ReactElement } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { EuiIcon } from '@elastic/eui';
 import uuid from 'uuid/v4';
 import { FeatureCollection } from 'geojson';
@@ -100,7 +100,7 @@ export interface ILayer {
 }
 
 export type CustomIconAndTooltipContent = {
-  icon: ReactElement<any> | null;
+  icon: ReactNode;
   tooltipContent?: string | null;
   areResultsTrimmed?: boolean;
 };

x-pack/plugins/maps/public/connected_components/mb_map/features_tooltip/_index.scss

@@ -30,3 +30,9 @@
     justify-content: flex-end;
   }
 }
+
+.mapFeatureTooltip_layerIcon {
+  img {
+    margin-bottom: 0;
+  }
+}

x-pack/plugins/maps/public/connected_components/mb_map/features_tooltip/features_tooltip.js

@@ -10,7 +10,8 @@ import { EuiIcon, EuiLink } from '@elastic/eui';
 import { FeatureProperties } from './feature_properties';
 import { GEO_JSON_TYPE, ES_GEO_FIELD_TYPE } from '../../../../common/constants';
 import { FeatureGeometryFilterForm } from './feature_geometry_filter_form';
-import { TooltipHeader } from './tooltip_header';
+import { Footer } from './footer';
+import { Header } from './header';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -167,12 +168,12 @@ export class FeaturesTooltip extends Component {
 
     return (
       <Fragment>
-        <TooltipHeader
-          onClose={this.props.closeTooltip}
-          features={this.props.features}
-          isLocked={this.props.isLocked}
+        <Header
+          key={this.state.currentFeature.layerId}
+          layerId={this.state.currentFeature.layerId}
           findLayerById={this.props.findLayerById}
-          setCurrentFeature={this._setCurrentFeature}
+          isLocked={this.props.isLocked}
+          onClose={this.props.closeTooltip}
         />
         <FeatureProperties
           featureId={this.state.currentFeature.id}
@@ -188,6 +189,12 @@ export class FeaturesTooltip extends Component {
           showFilterActions={this._showFilterActionsView}
         />
         {this._renderActions(geoFields)}
+        <Footer
+          features={this.props.features}
+          isLocked={this.props.isLocked}
+          findLayerById={this.props.findLayerById}
+          setCurrentFeature={this._setCurrentFeature}
+        />
       </Fragment>
     );
   }