[Maps] provide isLoading and hasError feedback when legend is collapsed

x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js

@@ -9,11 +9,13 @@ import { LayerControl } from './view';
 import { FLYOUT_STATE } from '../../../reducers/ui';
 import { updateFlyout, setIsLayerTOCOpen } from '../../../actions/ui_actions';
 import { getIsReadOnly, getIsLayerTOCOpen } from '../../../selectors/ui_selectors';
+import { getLayerList } from '../../../selectors/map_selectors';
 
 function mapStateToProps(state = {}) {
   return {
     isReadOnly: getIsReadOnly(state),
     isLayerTOCOpen: getIsLayerTOCOpen(state),
+    layerList: getLayerList(state),
   };
 }
 

x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js

@@ -14,13 +14,51 @@ import {
   EuiSpacer,
   EuiButtonIcon,
   EuiToolTip,
+  EuiLoadingSpinner,
 } from '@elastic/eui';
 import { LayerTOC } from './layer_toc';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
-export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, closeLayerTOC, openLayerTOC }) {
+function renderExpandButton({ hasErrors, isLoading, onClick }) {
+  const expandLabel = i18n.translate('xpack.maps.layerControl.openLayerTOCButtonAriaLabel', {
+    defaultMessage: 'Expand layers panel'
+  });
+
+  if (isLoading) {
+    // Can not use EuiButtonIcon with spinner because spinner is a class and not an icon
+    return (
+      <button
+        className="euiButtonIcon euiButtonIcon--text mapLayerControl__openLayerTOCButton"
+        type="button"
+        onClick={onClick}
+        aria-label={expandLabel}
+      >
+        <EuiLoadingSpinner size="m"/>
+      </button>
+    );
+  }
+
+  return (
+    <EuiButtonIcon
+      className="mapLayerControl__openLayerTOCButton"
+      color="text"
+      onClick={onClick}
+      iconType={hasErrors ? 'alert' : 'menuLeft'}
+      aria-label={expandLabel}
+    />
+  );
+}
+
+export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, closeLayerTOC, openLayerTOC, layerList }) {
   if (!isLayerTOCOpen) {
+    const hasErrors = layerList.some(layer => {
+      return layer.hasErrors();
+    });
+    const isLoading = layerList.some(layer => {
+      return layer.isLayerLoading();
+    });
+
     return (
       <EuiToolTip
         delay="long"
@@ -29,15 +67,7 @@ export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, c
         })}
         position="left"
       >
-        <EuiButtonIcon
-          className="mapLayerControl__openLayerTOCButton"
-          color="text"
-          onClick={openLayerTOC}
-          iconType="menuLeft"
-          aria-label={i18n.translate('xpack.maps.layerControl.openLayerTOCButtonAriaLabel', {
-            defaultMessage: 'Expand layers panel'
-          })}
-        />
+        {renderExpandButton({ hasErrors, isLoading, onClick: openLayerTOC })}
       </EuiToolTip>
     );
   }

x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.test.js

@@ -11,7 +11,7 @@ jest.mock('./layer_toc', () => ({
 }));
 
 import React from 'react';
-import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { shallow } from 'enzyme';
 
 import { LayerControl } from './view';
 
@@ -20,43 +20,75 @@ const defaultProps = {
   closeLayerTOC: () => {},
   openLayerTOC: () => {},
   isLayerTOCOpen: true,
+  layerList: [],
 };
 
 describe('LayerControl', () => {
   test('is rendered', () => {
-    const component = shallowWithIntl(
+    const component = shallow(
       <LayerControl
         {...defaultProps}
       />
     );
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
-  describe('props', () => {
-    test('isReadOnly', () => {
-      const component = shallowWithIntl(
+  test('isReadOnly', () => {
+    const component = shallow(
+      <LayerControl
+        {...defaultProps}
+        isReadOnly={true}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('isLayerTOCOpen', () => {
+
+    test('Should render expand button', () => {
+      const component = shallow(
+        <LayerControl
+          {...defaultProps}
+          isLayerTOCOpen={false}
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('Should render expand button with loading icon when layer is loading', () => {
+      const mockLayerThatIsLoading = {
+        hasErrors: () => { return false; },
+        isLayerLoading: () => { return true; }
+      };
+      const component = shallow(
         <LayerControl
           {...defaultProps}
-          isReadOnly={true}
+          isLayerTOCOpen={false}
+          layerList={[mockLayerThatIsLoading]}
         />
       );
 
-      expect(component)
-        .toMatchSnapshot();
+      expect(component).toMatchSnapshot();
     });
 
-    test('Should not render LayerTOC when isLayerTOCOpen is false', () => {
-      const component = shallowWithIntl(
+    test('Should render expand button with error icon when layer has error', () => {
+      const mockLayerThatHasError = {
+        hasErrors: () => { return true; },
+        isLayerLoading: () => { return false; }
+      };
+      const component = shallow(
         <LayerControl
           {...defaultProps}
           isLayerTOCOpen={false}
+          layerList={[mockLayerThatHasError]}
         />
       );
 
-      expect(component)
-        .toMatchSnapshot();
+      expect(component).toMatchSnapshot();
     });
   });
+
 });