[Maps] show eye closed icon when layer is not visible in TOC (#36250) (#36402)

* [Maps] show eye closed icon when layer is not visible in TOC

* use minusInCircle icon when layer is outside visible zoom level

* use expand icon to signal layer is out of visible zoom range

* review feedback

x-pack/plugins/maps/public/shared/components/__snapshots__/layer_toc_actions.test.js.snap

@@ -5,25 +5,31 @@ exports[`LayerTocActions is rendered 1`] = `
   anchorClassName="mapLayTocActions__popoverAnchor"
   anchorPosition="leftUp"
   button={
-    <EuiButtonEmpty
-      className="mapTocEntry__layerName eui-textLeft"
-      color="text"
-      data-test-subj="layerTocActionsPanelToggleButtonlayer1"
-      flush="left"
-      iconSide="left"
-      onClick={[Function]}
-      size="xs"
-      type="button"
+    <EuiToolTip
+      delay="regular"
+      position="top"
+      title="layer 1"
     >
-      <span
-        className="mapTocEntry__layerNameIcon"
+      <EuiButtonEmpty
+        className="mapTocEntry__layerName eui-textLeft"
+        color="text"
+        data-test-subj="layerTocActionsPanelToggleButtonlayer1"
+        flush="left"
+        iconSide="left"
+        onClick={[Function]}
+        size="xs"
+        type="button"
       >
-        <div>
-          icon mock
-        </div>
-      </span>
-      layer 1
-    </EuiButtonEmpty>
+        <span
+          className="mapTocEntry__layerNameIcon"
+        >
+          <div>
+            icon mock
+          </div>
+        </span>
+        layer 1
+      </EuiButtonEmpty>
+    </EuiToolTip>
   }
   className="mapLayTocActions"
   closePopover={[Function]}
@@ -94,25 +100,31 @@ exports[`LayerTocActions should disable fit to data when supportsFitToBounds is
   anchorClassName="mapLayTocActions__popoverAnchor"
   anchorPosition="leftUp"
   button={
-    <EuiButtonEmpty
-      className="mapTocEntry__layerName eui-textLeft"
-      color="text"
-      data-test-subj="layerTocActionsPanelToggleButtonlayer1"
-      flush="left"
-      iconSide="left"
-      onClick={[Function]}
-      size="xs"
-      type="button"
+    <EuiToolTip
+      delay="regular"
+      position="top"
+      title="layer 1"
     >
-      <span
-        className="mapTocEntry__layerNameIcon"
+      <EuiButtonEmpty
+        className="mapTocEntry__layerName eui-textLeft"
+        color="text"
+        data-test-subj="layerTocActionsPanelToggleButtonlayer1"
+        flush="left"
+        iconSide="left"
+        onClick={[Function]}
+        size="xs"
+        type="button"
       >
-        <div>
-          icon mock
-        </div>
-      </span>
-      layer 1
-    </EuiButtonEmpty>
+        <span
+          className="mapTocEntry__layerNameIcon"
+        >
+          <div>
+            icon mock
+          </div>
+        </span>
+        layer 1
+      </EuiButtonEmpty>
+    </EuiToolTip>
   }
   className="mapLayTocActions"
   closePopover={[Function]}
@@ -183,25 +195,31 @@ exports[`LayerTocActions should display spinner when layer is loading 1`] = `
   anchorClassName="mapLayTocActions__popoverAnchor"
   anchorPosition="leftUp"
   button={
-    <EuiButtonEmpty
-      className="mapTocEntry__layerName eui-textLeft"
-      color="text"
-      data-test-subj="layerTocActionsPanelToggleButtonlayer1"
-      flush="left"
-      iconSide="left"
-      onClick={[Function]}
-      size="xs"
-      type="button"
+    <EuiToolTip
+      delay="regular"
+      position="top"
+      title="layer 1"
     >
-      <span
-        className="mapTocEntry__layerNameIcon"
+      <EuiButtonEmpty
+        className="mapTocEntry__layerName eui-textLeft"
+        color="text"
+        data-test-subj="layerTocActionsPanelToggleButtonlayer1"
+        flush="left"
+        iconSide="left"
+        onClick={[Function]}
+        size="xs"
+        type="button"
       >
-        <EuiLoadingSpinner
-          size="m"
-        />
-      </span>
-      layer 1
-    </EuiButtonEmpty>
+        <span
+          className="mapTocEntry__layerNameIcon"
+        >
+          <EuiLoadingSpinner
+            size="m"
+          />
+        </span>
+        layer 1
+      </EuiButtonEmpty>
+    </EuiToolTip>
   }
   className="mapLayTocActions"
   closePopover={[Function]}
@@ -272,103 +290,31 @@ exports[`LayerTocActions should not show edit actions in read only mode 1`] = `
   anchorClassName="mapLayTocActions__popoverAnchor"
   anchorPosition="leftUp"
   button={
-    <EuiButtonEmpty
-      className="mapTocEntry__layerName eui-textLeft"
-      color="text"
-      data-test-subj="layerTocActionsPanelToggleButtonlayer1"
-      flush="left"
-      iconSide="left"
-      onClick={[Function]}
-      size="xs"
-      type="button"
+    <EuiToolTip
+      delay="regular"
+      position="top"
+      title="layer 1"
     >
-      <span
-        className="mapTocEntry__layerNameIcon"
+      <EuiButtonEmpty
+        className="mapTocEntry__layerName eui-textLeft"
+        color="text"
+        data-test-subj="layerTocActionsPanelToggleButtonlayer1"
+        flush="left"
+        iconSide="left"
+        onClick={[Function]}
+        size="xs"
+        type="button"
       >
-        <div>
-          icon mock
-        </div>
-      </span>
-      layer 1
-    </EuiButtonEmpty>
-  }
-  className="mapLayTocActions"
-  closePopover={[Function]}
-  hasArrow={true}
-  id="contextMenu"
-  isOpen={false}
-  ownFocus={false}
-  panelPaddingSize="none"
-  withTitle={true}
->
-  <EuiContextMenu
-    data-test-subj="layerTocActionsPanellayer1"
-    initialPanelId={0}
-    panels={
-      Array [
-        Object {
-          "id": 0,
-          "items": Array [
-            Object {
-              "data-test-subj": "fitToBoundsButton",
-              "disabled": false,
-              "icon": <EuiIcon
-                size="m"
-                type="search"
-              />,
-              "name": "Fit to data",
-              "onClick": [Function],
-              "toolTipContent": null,
-            },
-            Object {
-              "data-test-subj": "layerVisibilityToggleButton",
-              "icon": <EuiIcon
-                size="m"
-                type="eye"
-              />,
-              "name": "Hide layer",
-              "onClick": [Function],
-            },
-          ],
-          "title": "Layer actions",
-        },
-      ]
-    }
-  />
-</EuiPopover>
-`;
-
-exports[`LayerTocActions should provide feedback when layer is not visible because of current zoom level 1`] = `
-<EuiPopover
-  anchorClassName="mapLayTocActions__popoverAnchor"
-  anchorPosition="leftUp"
-  button={
-    <EuiButtonEmpty
-      className="mapTocEntry__layerName eui-textLeft"
-      color="text"
-      data-test-subj="layerTocActionsPanelToggleButtonlayer1"
-      flush="left"
-      iconSide="left"
-      onClick={[Function]}
-      size="xs"
-      type="button"
-    >
-      <span
-        className="mapTocEntry__layerNameIcon"
-      >
-        <EuiToolTip
-          content="Map is at zoom level 0.
-          This layer is only visible between zoom levels 2 to 3."
-          delay="regular"
-          position="top"
+        <span
+          className="mapTocEntry__layerNameIcon"
         >
           <div>
             icon mock
           </div>
-        </EuiToolTip>
-      </span>
-      layer 1
-    </EuiButtonEmpty>
+        </span>
+        layer 1
+      </EuiButtonEmpty>
+    </EuiToolTip>
   }
   className="mapLayTocActions"
   closePopover={[Function]}
@@ -407,24 +353,6 @@ exports[`LayerTocActions should provide feedback when layer is not visible becau
               "name": "Hide layer",
               "onClick": [Function],
             },
-            Object {
-              "data-test-subj": "editLayerButton",
-              "icon": <EuiIcon
-                size="m"
-                type="pencil"
-              />,
-              "name": "Edit layer",
-              "onClick": [Function],
-            },
-            Object {
-              "data-test-subj": "cloneLayerButton",
-              "icon": <EuiIcon
-                size="m"
-                type="copy"
-              />,
-              "name": "Clone layer",
-              "onClick": [Function],
-            },
           ],
           "title": "Layer actions",
         },
@@ -439,25 +367,33 @@ exports[`LayerTocActions should show visible toggle when layer is not visible 1`
   anchorClassName="mapLayTocActions__popoverAnchor"
   anchorPosition="leftUp"
   button={
-    <EuiButtonEmpty
-      className="mapTocEntry__layerName eui-textLeft"
-      color="text"
-      data-test-subj="layerTocActionsPanelToggleButtonlayer1"
-      flush="left"
-      iconSide="left"
-      onClick={[Function]}
-      size="xs"
-      type="button"
+    <EuiToolTip
+      content="Layer is hidden."
+      delay="regular"
+      position="top"
+      title="layer 1"
     >
-      <span
-        className="mapTocEntry__layerNameIcon"
+      <EuiButtonEmpty
+        className="mapTocEntry__layerName eui-textLeft"
+        color="text"
+        data-test-subj="layerTocActionsPanelToggleButtonlayer1"
+        flush="left"
+        iconSide="left"
+        onClick={[Function]}
+        size="xs"
+        type="button"
       >
-        <div>
-          icon mock
-        </div>
-      </span>
-      layer 1
-    </EuiButtonEmpty>
+        <span
+          className="mapTocEntry__layerNameIcon"
+        >
+          <EuiIcon
+            size="m"
+            type="eyeClosed"
+          />
+        </span>
+        layer 1
+      </EuiButtonEmpty>
+    </EuiToolTip>
   }
   className="mapLayTocActions"
   closePopover={[Function]}
@@ -528,29 +464,132 @@ exports[`LayerTocActions should show warning when layer has errors 1`] = `
   anchorClassName="mapLayTocActions__popoverAnchor"
   anchorPosition="leftUp"
   button={
-    <EuiButtonEmpty
-      className="mapTocEntry__layerName eui-textLeft"
-      color="text"
-      data-test-subj="layerTocActionsPanelToggleButtonlayer1"
-      flush="left"
-      iconSide="left"
-      onClick={[Function]}
-      size="xs"
-      type="button"
+    <EuiToolTip
+      content="simulated layer error"
+      delay="regular"
+      position="top"
+      title="layer 1"
     >
-      <span
-        className="mapTocEntry__layerNameIcon"
+      <EuiButtonEmpty
+        className="mapTocEntry__layerName eui-textLeft"
+        color="text"
+        data-test-subj="layerTocActionsPanelToggleButtonlayer1"
+        flush="left"
+        iconSide="left"
+        onClick={[Function]}
+        size="xs"
+        type="button"
       >
-        <EuiIconTip
-          aria-label="Load warning"
-          color="warning"
-          content="simulated layer error"
-          size="m"
-          type="alert"
-        />
-      </span>
-      layer 1
-    </EuiButtonEmpty>
+        <span
+          className="mapTocEntry__layerNameIcon"
+        >
+          <EuiIcon
+            aria-label="Load warning"
+            color="warning"
+            size="m"
+            type="alert"
+          />
+        </span>
+        layer 1
+      </EuiButtonEmpty>
+    </EuiToolTip>
+  }
+  className="mapLayTocActions"
+  closePopover={[Function]}
+  hasArrow={true}
+  id="contextMenu"
+  isOpen={false}
+  ownFocus={false}
+  panelPaddingSize="none"
+  withTitle={true}
+>
+  <EuiContextMenu
+    data-test-subj="layerTocActionsPanellayer1"
+    initialPanelId={0}
+    panels={
+      Array [
+        Object {
+          "id": 0,
+          "items": Array [
+            Object {
+              "data-test-subj": "fitToBoundsButton",
+              "disabled": false,
+              "icon": <EuiIcon
+                size="m"
+                type="search"
+              />,
+              "name": "Fit to data",
+              "onClick": [Function],
+              "toolTipContent": null,
+            },
+            Object {
+              "data-test-subj": "layerVisibilityToggleButton",
+              "icon": <EuiIcon
+                size="m"
+                type="eye"
+              />,
+              "name": "Hide layer",
+              "onClick": [Function],
+            },
+            Object {
+              "data-test-subj": "editLayerButton",
+              "icon": <EuiIcon
+                size="m"
+                type="pencil"
+              />,
+              "name": "Edit layer",
+              "onClick": [Function],
+            },
+            Object {
+              "data-test-subj": "cloneLayerButton",
+              "icon": <EuiIcon
+                size="m"
+                type="copy"
+              />,
+              "name": "Clone layer",
+              "onClick": [Function],
+            },
+          ],
+          "title": "Layer actions",
+        },
+      ]
+    }
+  />
+</EuiPopover>
+`;
+
+exports[`LayerTocActions should show when layer is not visible because zoom settings are outside of the current zoom level 1`] = `
+<EuiPopover
+  anchorClassName="mapLayTocActions__popoverAnchor"
+  anchorPosition="leftUp"
+  button={
+    <EuiToolTip
+      content="Layer is visible between zoom levels 2 to 3."
+      delay="regular"
+      position="top"
+      title="layer 1"
+    >
+      <EuiButtonEmpty
+        className="mapTocEntry__layerName eui-textLeft"
+        color="text"
+        data-test-subj="layerTocActionsPanelToggleButtonlayer1"
+        flush="left"
+        iconSide="left"
+        onClick={[Function]}
+        size="xs"
+        type="button"
+      >
+        <span
+          className="mapTocEntry__layerNameIcon"
+        >
+          <EuiIcon
+            size="m"
+            type="expand"
+          />
+        </span>
+        layer 1
+      </EuiButtonEmpty>
+    </EuiToolTip>
   }
   className="mapLayTocActions"
   closePopover={[Function]}

x-pack/plugins/maps/public/shared/components/layer_toc_actions.js

@@ -13,7 +13,6 @@ import {
   EuiIcon,
   EuiLoadingSpinner,
   EuiToolTip,
-  EuiIconTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
@@ -40,7 +39,7 @@ export class LayerTocActions extends Component {
     }
   }
 
-  _onClick = () => {
+  _togglePopover = () => {
     this.setState(prevState => ({
       isPopoverOpen: !prevState.isPopoverOpen,
     }));
@@ -52,73 +51,79 @@ export class LayerTocActions extends Component {
     }));
   };
 
-  _renderButton() {
-    const icon = this._renderIcon();
+  _renderPopoverToggleButton() {
+    const { icon, tooltipContent } = this._getIconAndTooltipContent();
     return (
-      <EuiButtonEmpty
-        className="mapTocEntry__layerName eui-textLeft"
-        size="xs"
-        flush="left"
-        color="text"
-        onClick={this._onClick}
-        data-test-subj={`layerTocActionsPanelToggleButton${this.props.escapedDisplayName}`}
-        // textProps="mapTocEntry__layerNameText"
+      <EuiToolTip
+        position="top"
+        title={this.props.displayName}
+        content={tooltipContent}
       >
-        <span className="mapTocEntry__layerNameIcon">{icon}</span>
-        {this.props.displayName}
-      </EuiButtonEmpty>);
+        <EuiButtonEmpty
+          className="mapTocEntry__layerName eui-textLeft"
+          size="xs"
+          flush="left"
+          color="text"
+          onClick={this._togglePopover}
+          data-test-subj={`layerTocActionsPanelToggleButton${this.props.escapedDisplayName}`}
+        >
+          <span className="mapTocEntry__layerNameIcon">{icon}</span>
+          {this.props.displayName}
+        </EuiButtonEmpty>
+      </EuiToolTip>
+    );
   }
 
-
-  _getVisbilityIcon() {
-    const iconType = this.props.layer.isVisible() ? 'eye' : 'eyeClosed';
-    return (
-      <EuiIcon
-        type={iconType}
-        size="m"
-      />);
-  }
-
-  _renderIcon() {
+  _getIconAndTooltipContent() {
     const { zoom, layer } = this.props;
-    let smallLegendIcon;
+
+    let icon;
+    let tooltipContent;
     if (layer.hasErrors()) {
-      smallLegendIcon = (
-        <EuiIconTip
+      icon = (
+        <EuiIcon
           aria-label={i18n.translate('xpack.maps.layerTocActions.loadWarningAriaLabel', { defaultMessage: 'Load warning' })}
           size="m"
           type="alert"
           color="warning"
-          content={layer.getErrors()}
         />
       );
+      tooltipContent = layer.getErrors();
     } else if (layer.isLayerLoading()) {
-      smallLegendIcon = <EuiLoadingSpinner size="m"/>;
+      icon = (<EuiLoadingSpinner size="m"/>);
+    } else if (!layer.isVisible()) {
+      icon = (
+        <EuiIcon
+          size="m"
+          type="eyeClosed"
+        />
+      );
+      tooltipContent = i18n.translate('xpack.maps.layerTocActions.layerHiddenTooltip', {
+        defaultMessage: `Layer is hidden.`
+      });
     } else if (!layer.showAtZoomLevel(zoom)) {
       const { minZoom, maxZoom } = layer.getZoomConfig();
-      const icon = layer.getIcon();
-      smallLegendIcon = (
-        <EuiToolTip
-          position="top"
-          content={
-            i18n.translate('xpack.maps.layerTocActions.zoomFeedbackTooltip', {
-              defaultMessage: `Map is at zoom level {zoom}.
-          This layer is only visible between zoom levels {minZoom} to {maxZoom}.`,
-              values: { minZoom, maxZoom, zoom }
-            })}
-        >
-          {icon}
-        </EuiToolTip>
+      icon = (
+        <EuiIcon
+          size="m"
+          type="expand"
+        />
       );
+      tooltipContent = i18n.translate('xpack.maps.layerTocActions.zoomFeedbackTooltip', {
+        defaultMessage: `Layer is visible between zoom levels {minZoom} to {maxZoom}.`,
+        values: { minZoom, maxZoom }
+      });
     } else {
-      smallLegendIcon = layer.getIcon();
+      icon = layer.getIcon();
     }
-    return smallLegendIcon;
+
+    return {
+      icon,
+      tooltipContent
+    };
   }
 
-  _getPanels() {
-
-    const visibilityToggle = this._getVisbilityIcon();
+  _getActionsPanel() {
     const actionItems = [
       {
         name: i18n.translate('xpack.maps.layerTocActions.fitToDataTitle', {
@@ -146,7 +151,12 @@ export class LayerTocActions extends Component {
         }) : i18n.translate('xpack.maps.layerTocActions.showLayerTitle', {
           defaultMessage: 'Show layer',
         }),
-        icon: visibilityToggle,
+        icon: (
+          <EuiIcon
+            type={this.props.layer.isVisible() ? 'eye' : 'eyeClosed'}
+            size="m"
+          />
+        ),
         'data-test-subj': 'layerVisibilityToggleButton',
         onClick: () => {
           this._closePopover();
@@ -190,15 +200,13 @@ export class LayerTocActions extends Component {
       });
     }
 
-    const actionsPanel = {
+    return {
       id: 0,
       title: i18n.translate('xpack.maps.layerTocActions.layerActionsTitle', {
         defaultMessage: 'Layer actions',
       }),
       items: actionItems,
     };
-
-    return [actionsPanel];
   }
 
   render() {
@@ -206,7 +214,7 @@ export class LayerTocActions extends Component {
       <EuiPopover
         id="contextMenu"
         className="mapLayTocActions"
-        button={this._renderButton()}
+        button={this._renderPopoverToggleButton()}
         isOpen={this.state.isPopoverOpen}
         closePopover={this._closePopover}
         panelPaddingSize="none"
@@ -216,7 +224,7 @@ export class LayerTocActions extends Component {
       >
         <EuiContextMenu
           initialPanelId={0}
-          panels={this._getPanels()}
+          panels={[this._getActionsPanel()]}
           data-test-subj={`layerTocActionsPanel${this.props.escapedDisplayName}`}
         />
       </EuiPopover>);

x-pack/plugins/maps/public/shared/components/layer_toc_actions.test.js

@@ -142,7 +142,7 @@ describe('LayerTocActions', () => {
       .toMatchSnapshot();
   });
 
-  test('should provide feedback when layer is not visible because of current zoom level', async () => {
+  test('should show when layer is not visible because zoom settings are outside of the current zoom level', async () => {
     showAtZoomLevel = false;
     const component = shallowWithIntl(
       <LayerTocActions