From b71b9c249adaa1c43abda2e60bd1c95b3e24c9e9 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Thu, 6 Aug 2020 12:08:57 -0600
Subject: [PATCH] [maps] fix swap hidden/show icons in layer action panel
 (#74549)

---
 .../toc_entry_actions_popover.test.tsx.snap   | 134 +++++++++++++++++-
 .../toc_entry_actions_popover.test.tsx        |  25 +++-
 .../toc_entry_actions_popover.tsx             |   2 +-
 3 files changed, 151 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/__snapshots__/toc_entry_actions_popover.test.tsx.snap b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/__snapshots__/toc_entry_actions_popover.test.tsx.snap
index 388712e1ebccad..8a5b7cf9186a8a 100644
--- a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/__snapshots__/toc_entry_actions_popover.test.tsx.snap
+++ b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/__snapshots__/toc_entry_actions_popover.test.tsx.snap
@@ -82,7 +82,7 @@ exports[`TOCEntryActionsPopover is rendered 1`] = `
               "data-test-subj": "layerVisibilityToggleButton",
               "icon": <EuiIcon
                 size="m"
-                type="eye"
+                type="eyeClosed"
               />,
               "name": "Hide layer",
               "onClick": [Function],
@@ -210,7 +210,7 @@ exports[`TOCEntryActionsPopover should disable fit to data when supportsFitToBou
               "data-test-subj": "layerVisibilityToggleButton",
               "icon": <EuiIcon
                 size="m"
-                type="eye"
+                type="eyeClosed"
               />,
               "name": "Hide layer",
               "onClick": [Function],
@@ -256,7 +256,7 @@ exports[`TOCEntryActionsPopover should disable fit to data when supportsFitToBou
 </EuiPopover>
 `;
 
-exports[`TOCEntryActionsPopover should not show edit actions in read only mode 1`] = `
+exports[`TOCEntryActionsPopover should have "show layer" action when layer is not visible 1`] = `
 <EuiPopover
   anchorClassName="mapLayTocActions__popoverAnchor"
   anchorPosition="leftUp"
@@ -340,6 +340,134 @@ exports[`TOCEntryActionsPopover should not show edit actions in read only mode 1
                 size="m"
                 type="eye"
               />,
+              "name": "Show layer",
+              "onClick": [Function],
+              "toolTipContent": null,
+            },
+            Object {
+              "data-test-subj": "editLayerButton",
+              "disabled": false,
+              "icon": <EuiIcon
+                size="m"
+                type="pencil"
+              />,
+              "name": "Edit layer",
+              "onClick": [Function],
+              "toolTipContent": null,
+            },
+            Object {
+              "data-test-subj": "cloneLayerButton",
+              "icon": <EuiIcon
+                size="m"
+                type="copy"
+              />,
+              "name": "Clone layer",
+              "onClick": [Function],
+              "toolTipContent": null,
+            },
+            Object {
+              "data-test-subj": "removeLayerButton",
+              "icon": <EuiIcon
+                size="m"
+                type="trash"
+              />,
+              "name": "Remove layer",
+              "onClick": [Function],
+              "toolTipContent": null,
+            },
+          ],
+          "title": "Layer actions",
+        },
+      ]
+    }
+  />
+</EuiPopover>
+`;
+
+exports[`TOCEntryActionsPopover should not show edit actions in read only mode 1`] = `
+<EuiPopover
+  anchorClassName="mapLayTocActions__popoverAnchor"
+  anchorPosition="leftUp"
+  button={
+    <EuiToolTip
+      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"
+      position="top"
+      title="layer 1"
+    >
+      <EuiButtonEmpty
+        className="mapTocEntry__layerName eui-textLeft"
+        color="text"
+        data-test-subj="layerTocActionsPanelToggleButtonlayer1"
+        flush="left"
+        onClick={[Function]}
+        size="xs"
+      >
+        <span
+          className="mapTocEntry__layerNameIcon"
+        >
+          <span>
+            mockIcon
+          </span>
+        </span>
+        layer 1
+         
+        <React.Fragment>
+          
+          <span>
+            mockFootnoteIcon
+          </span>
+        </React.Fragment>
+      </EuiButtonEmpty>
+    </EuiToolTip>
+  }
+  className="mapLayTocActions"
+  closePopover={[Function]}
+  display="inlineBlock"
+  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="expand"
+              />,
+              "name": "Fit to data",
+              "onClick": [Function],
+              "toolTipContent": null,
+            },
+            Object {
+              "data-test-subj": "layerVisibilityToggleButton",
+              "icon": <EuiIcon
+                size="m"
+                type="eyeClosed"
+              />,
               "name": "Hide layer",
               "onClick": [Function],
               "toolTipContent": null,
diff --git a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.test.tsx b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.test.tsx
index c7ed5ec74ac7a6..95f13574105b7c 100644
--- a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.test.tsx
+++ b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.test.tsx
@@ -6,7 +6,7 @@
 /* eslint-disable max-classes-per-file */
 
 import React from 'react';
-import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { shallow } from 'enzyme';
 import { AbstractLayer, ILayer } from '../../../../../../classes/layers/layer';
 import { AbstractSource, ISource } from '../../../../../../classes/sources/source';
 import { AbstractStyle, IStyle } from '../../../../../../classes/styles/style';
@@ -76,7 +76,7 @@ describe('TOCEntryActionsPopover', () => {
   });
 
   test('is rendered', async () => {
-    const component = shallowWithIntl(<TOCEntryActionsPopover {...defaultProps} />);
+    const component = shallow(<TOCEntryActionsPopover {...defaultProps} />);
 
     // Ensure all promises resolve
     await new Promise((resolve) => process.nextTick(resolve));
@@ -87,9 +87,7 @@ describe('TOCEntryActionsPopover', () => {
   });
 
   test('should not show edit actions in read only mode', async () => {
-    const component = shallowWithIntl(
-      <TOCEntryActionsPopover {...defaultProps} isReadOnly={true} />
-    );
+    const component = shallow(<TOCEntryActionsPopover {...defaultProps} isReadOnly={true} />);
 
     // Ensure all promises resolve
     await new Promise((resolve) => process.nextTick(resolve));
@@ -101,7 +99,22 @@ describe('TOCEntryActionsPopover', () => {
 
   test('should disable fit to data when supportsFitToBounds is false', async () => {
     supportsFitToBounds = false;
-    const component = shallowWithIntl(<TOCEntryActionsPopover {...defaultProps} />);
+    const component = shallow(<TOCEntryActionsPopover {...defaultProps} />);
+
+    // Ensure all promises resolve
+    await new Promise((resolve) => process.nextTick(resolve));
+    // Ensure the state changes are reflected
+    component.update();
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('should have "show layer" action when layer is not visible', async () => {
+    const layer = new LayerMock();
+    layer.isVisible = () => {
+      return false;
+    };
+    const component = shallow(<TOCEntryActionsPopover {...defaultProps} layer={layer} />);
 
     // Ensure all promises resolve
     await new Promise((resolve) => process.nextTick(resolve));
diff --git a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.tsx b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.tsx
index 5baac0a474ffaa..a1b9026fc57da7 100644
--- a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.tsx
+++ b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.tsx
@@ -158,7 +158,7 @@ export class TOCEntryActionsPopover extends Component<Props, State> {
           : i18n.translate('xpack.maps.layerTocActions.showLayerTitle', {
               defaultMessage: 'Show layer',
             }),
-        icon: <EuiIcon type={this.props.layer.isVisible() ? 'eye' : 'eyeClosed'} size="m" />,
+        icon: <EuiIcon type={this.props.layer.isVisible() ? 'eyeClosed' : 'eye'} size="m" />,
         'data-test-subj': 'layerVisibilityToggleButton',
         toolTipContent: null,
         onClick: () => {