From f882584dddd53b52c56be9bbaf4a20d7b88f4ac0 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Fri, 16 Aug 2019 13:48:04 -0600
Subject: [PATCH] [Maps] add indicator when layer is filtered by search bar
 (#43283)

* [Maps] add indicator when layer is filtered by filter pills and/or query bar

* add message about icon to tooltip
---
 .../layer_toc_actions.test.js.snap            | 45 +++++++++++++++++--
 .../public/components/layer_toc_actions.js    | 31 +++++++++----
 .../components/layer_toc_actions.test.js      | 10 +++--
 .../layer_toc/toc_entry/index.js              |  3 +-
 .../layer_control/layer_toc/toc_entry/view.js |  4 +-
 .../plugins/maps/public/layers/layer.js       | 25 ++++++++---
 .../maps/public/selectors/map_selectors.js    |  6 +++
 7 files changed, 102 insertions(+), 22 deletions(-)

diff --git a/x-pack/legacy/plugins/maps/public/components/__snapshots__/layer_toc_actions.test.js.snap b/x-pack/legacy/plugins/maps/public/components/__snapshots__/layer_toc_actions.test.js.snap
index a402f51465438..9bbca0ea39179 100644
--- a/x-pack/legacy/plugins/maps/public/components/__snapshots__/layer_toc_actions.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/components/__snapshots__/layer_toc_actions.test.js.snap
@@ -9,8 +9,14 @@ exports[`LayerTocActions is rendered 1`] = `
       anchorClassName="mapLayTocActions__tooltipAnchor"
       content={
         <React.Fragment>
-           
           simulated tooltip content at zoom: 0
+          <div>
+            <span>
+              mockFootnoteIcon
+            </span>
+             
+            simulated footnote at isUsingSearch: true
+          </div>
         </React.Fragment>
       }
       delay="regular"
@@ -35,6 +41,13 @@ exports[`LayerTocActions is rendered 1`] = `
           </span>
         </span>
         layer 1
+         
+        <React.Fragment>
+          
+          <span>
+            mockFootnoteIcon
+          </span>
+        </React.Fragment>
       </EuiButtonEmpty>
     </EuiToolTip>
   }
@@ -112,8 +125,14 @@ exports[`LayerTocActions should disable fit to data when supportsFitToBounds is
       anchorClassName="mapLayTocActions__tooltipAnchor"
       content={
         <React.Fragment>
-           
           simulated tooltip content at zoom: 0
+          <div>
+            <span>
+              mockFootnoteIcon
+            </span>
+             
+            simulated footnote at isUsingSearch: true
+          </div>
         </React.Fragment>
       }
       delay="regular"
@@ -138,6 +157,13 @@ exports[`LayerTocActions should disable fit to data when supportsFitToBounds is
           </span>
         </span>
         layer 1
+         
+        <React.Fragment>
+          
+          <span>
+            mockFootnoteIcon
+          </span>
+        </React.Fragment>
       </EuiButtonEmpty>
     </EuiToolTip>
   }
@@ -215,8 +241,14 @@ exports[`LayerTocActions should not show edit actions in read only mode 1`] = `
       anchorClassName="mapLayTocActions__tooltipAnchor"
       content={
         <React.Fragment>
-           
           simulated tooltip content at zoom: 0
+          <div>
+            <span>
+              mockFootnoteIcon
+            </span>
+             
+            simulated footnote at isUsingSearch: true
+          </div>
         </React.Fragment>
       }
       delay="regular"
@@ -241,6 +273,13 @@ exports[`LayerTocActions should not show edit actions in read only mode 1`] = `
           </span>
         </span>
         layer 1
+         
+        <React.Fragment>
+          
+          <span>
+            mockFootnoteIcon
+          </span>
+        </React.Fragment>
       </EuiButtonEmpty>
     </EuiToolTip>
   }
diff --git a/x-pack/legacy/plugins/maps/public/components/layer_toc_actions.js b/x-pack/legacy/plugins/maps/public/components/layer_toc_actions.js
index ae19cceb517ff..9363d2f0c1abe 100644
--- a/x-pack/legacy/plugins/maps/public/components/layer_toc_actions.js
+++ b/x-pack/legacy/plugins/maps/public/components/layer_toc_actions.js
@@ -51,18 +51,30 @@ export class LayerTocActions extends Component {
   };
 
   _renderPopoverToggleButton() {
-    const { icon, tooltipContent, areResultsTrimmed } = this.props.layer.getIconAndTooltipContent(this.props.zoom);
-    const infoButton = areResultsTrimmed ? (<EuiIcon
-      color="subdued"
-      type="iInCircle"
-    />) : null;
-    const tooltip = <Fragment>{infoButton} {tooltipContent}</Fragment>;
+    const {
+      icon,
+      tooltipContent,
+      footnotes,
+    } = this.props.layer.getIconAndTooltipContent(this.props.zoom, this.props.isUsingSearch);
+
+    const footnoteIcons = footnotes.map((footnote, index) => {
+      return <Fragment key={index}>{''}{footnote.icon}</Fragment>;
+    });
+    const footnoteTooltipContent = footnotes.map((footnote, index) => {
+      return <div key={index}>{footnote.icon}{' '}{footnote.message}</div>;
+    });
+
     return (
       <EuiToolTip
         anchorClassName="mapLayTocActions__tooltipAnchor"
         position="top"
         title={this.props.displayName}
-        content={tooltip}
+        content={
+          <Fragment>
+            {tooltipContent}
+            {footnoteTooltipContent}
+          </Fragment>
+        }
       >
         <EuiButtonEmpty
           className="mapTocEntry__layerName eui-textLeft"
@@ -73,9 +85,10 @@ export class LayerTocActions extends Component {
           data-test-subj={`layerTocActionsPanelToggleButton${this.props.escapedDisplayName}`}
         >
           <span className="mapTocEntry__layerNameIcon">{icon}</span>
-          {this.props.displayName}{infoButton}
+          {this.props.displayName}
+          {' '}
+          {footnoteIcons}
         </EuiButtonEmpty>
-
       </EuiToolTip>
     );
   }
diff --git a/x-pack/legacy/plugins/maps/public/components/layer_toc_actions.test.js b/x-pack/legacy/plugins/maps/public/components/layer_toc_actions.test.js
index 36b0b2f3d72cd..231607ecb02c0 100644
--- a/x-pack/legacy/plugins/maps/public/components/layer_toc_actions.test.js
+++ b/x-pack/legacy/plugins/maps/public/components/layer_toc_actions.test.js
@@ -13,11 +13,14 @@ let supportsFitToBounds;
 const layerMock = {
   supportsFitToBounds: () => { return supportsFitToBounds; },
   isVisible: () => { return true; },
-  getIconAndTooltipContent: (zoom) => {
+  getIconAndTooltipContent: (zoom, isUsingSearch) => {
     return {
-      icon: (<span>mockIcon</span>),
+      icon: <span>mockIcon</span>,
       tooltipContent: `simulated tooltip content at zoom: ${zoom}`,
-      areResultsTrimmed: false
+      footnotes: [{
+        icon: <span>mockFootnoteIcon</span>,
+        message: `simulated footnote at isUsingSearch: ${isUsingSearch}`
+      }],
     };
   }
 };
@@ -27,6 +30,7 @@ const defaultProps = {
   escapedDisplayName: 'layer1',
   zoom: 0,
   layer: layerMock,
+  isUsingSearch: true,
 };
 
 describe('LayerTocActions', () => {
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/index.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/index.js
index b825c64a1ee7f..74d8bed66a57c 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/index.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/index.js
@@ -22,7 +22,7 @@ import {
   cloneLayer,
 } from '../../../../../actions/map_actions';
 
-import { hasDirtyState, getSelectedLayer } from '../../../../../selectors/map_selectors';
+import { hasDirtyState, getSelectedLayer, isUsingSearch } from '../../../../../selectors/map_selectors';
 
 function mapStateToProps(state = {}, ownProps) {
   return {
@@ -31,6 +31,7 @@ function mapStateToProps(state = {}, ownProps) {
     selectedLayer: getSelectedLayer(state),
     hasDirtyStateSelector: hasDirtyState(state),
     isLegendDetailsOpen: getOpenTOCDetails(state).includes(ownProps.layer.getId()),
+    isUsingSearch: isUsingSearch(state),
   };
 }
 
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/view.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/view.js
index feb83147e785d..49dfa81798386 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/view.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/view.js
@@ -183,7 +183,8 @@ export class TOCEntry extends React.Component {
       layer,
       zoom,
       toggleVisible,
-      fitToBounds
+      fitToBounds,
+      isUsingSearch
     } = this.props;
 
     return (
@@ -195,6 +196,7 @@ export class TOCEntry extends React.Component {
       >
         <LayerTocActions
           layer={layer}
+          isUsingSearch={isUsingSearch}
           fitToBounds={() => {
             fitToBounds(layer.getId());
           }}
diff --git a/x-pack/legacy/plugins/maps/public/layers/layer.js b/x-pack/legacy/plugins/maps/public/layers/layer.js
index fe2f58c0264a3..8fcb802962ef5 100644
--- a/x-pack/legacy/plugins/maps/public/layers/layer.js
+++ b/x-pack/legacy/plugins/maps/public/layers/layer.js
@@ -119,10 +119,10 @@ export class AbstractLayer {
     };
   }
 
-  getIconAndTooltipContent(zoomLevel) {
+  getIconAndTooltipContent(zoomLevel, isUsingSearch) {
     let icon;
     let tooltipContent = null;
-    let areResultsTrimmed = false;
+    const footnotes = [];
     if (this.hasErrors()) {
       icon = (
         <EuiIcon
@@ -161,15 +161,30 @@ export class AbstractLayer {
       const customIconAndTooltipContent = this.getCustomIconAndTooltipContent();
       if (customIconAndTooltipContent) {
         icon = customIconAndTooltipContent.icon;
-        tooltipContent = customIconAndTooltipContent.tooltipContent;
-        areResultsTrimmed = customIconAndTooltipContent.areResultsTrimmed;
+        if (!customIconAndTooltipContent.areResultsTrimmed) {
+          tooltipContent = customIconAndTooltipContent.tooltipContent;
+        } else {
+          footnotes.push({
+            icon: <EuiIcon color="subdued" type="iInCircle" />,
+            message: customIconAndTooltipContent.tooltipContent
+          });
+        }
+      }
+
+      if (isUsingSearch && this.getQueryableIndexPatternIds().length) {
+        footnotes.push({
+          icon: <EuiIcon color="subdued" type="filter" size="s" />,
+          message: i18n.translate('xpack.maps.layer.isUsingSearchMsg', {
+            defaultMessage: 'Results narrowed by search bar'
+          })
+        });
       }
     }
 
     return {
       icon,
       tooltipContent,
-      areResultsTrimmed
+      footnotes,
     };
   }
 
diff --git a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js
index fb344b15b2693..e5a54bc61ad47 100644
--- a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js
+++ b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js
@@ -108,6 +108,12 @@ export const getQuery = ({ map }) => map.mapState.query;
 
 export const getFilters = ({ map }) => map.mapState.filters;
 
+export const isUsingSearch = (state) => {
+  const filters = getFilters(state).filter(filter => !filter.meta.disabled);
+  const queryString = _.get(getQuery(state), 'query', '');
+  return filters.length || queryString.length;
+};
+
 export const getDrawState = ({ map }) => map.mapState.drawState;
 
 export const getRefreshConfig = ({ map }) => {