[Maps] provide isLoading and hasError feedback when legend is collapsed (#47157) (#47269)

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

@@ -76,7 +76,7 @@ exports[`LayerControl is rendered 1`] = `
 </Fragment>
 `;
 
-exports[`LayerControl props Should not render LayerTOC when isLayerTOCOpen is false 1`] = `
+exports[`LayerControl isLayerTOCOpen Should render expand button 1`] = `
 <EuiToolTip
   content="Expand layers panel"
   delay="long"
@@ -92,7 +92,42 @@ exports[`LayerControl props Should not render LayerTOC when isLayerTOCOpen is fa
 </EuiToolTip>
 `;
 
-exports[`LayerControl props isReadOnly 1`] = `
+exports[`LayerControl isLayerTOCOpen Should render expand button with error icon when layer has error 1`] = `
+<EuiToolTip
+  content="Expand layers panel"
+  delay="long"
+  position="left"
+>
+  <EuiButtonIcon
+    aria-label="Expand layers panel"
+    className="mapLayerControl__openLayerTOCButton"
+    color="text"
+    iconType="alert"
+    onClick={[Function]}
+  />
+</EuiToolTip>
+`;
+
+exports[`LayerControl isLayerTOCOpen Should render expand button with loading icon when layer is loading 1`] = `
+<EuiToolTip
+  content="Expand layers panel"
+  delay="long"
+  position="left"
+>
+  <button
+    aria-label="Expand layers panel"
+    className="euiButtonIcon euiButtonIcon--text mapLayerControl__openLayerTOCButton"
+    onClick={[Function]}
+    type="button"
+  >
+    <EuiLoadingSpinner
+      size="m"
+    />
+  </button>
+</EuiToolTip>
+`;
+
+exports[`LayerControl isReadOnly 1`] = `
 <Fragment>
   <EuiPanel
     className="mapWidgetControl mapWidgetControl-hasShadow"

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(
-        <LayerControl
-          {...defaultProps}
-          isReadOnly={true}
-        />
-      );
+  test('isReadOnly', () => {
+    const component = shallow(
+      <LayerControl
+        {...defaultProps}
+        isReadOnly={true}
+      />
+    );
 
-      expect(component)
-        .toMatchSnapshot();
-    });
+    expect(component).toMatchSnapshot();
+  });
 
-    test('Should not render LayerTOC when isLayerTOCOpen is false', () => {
-      const component = shallowWithIntl(
+  describe('isLayerTOCOpen', () => {
+
+    test('Should render expand button', () => {
+      const component = shallow(
         <LayerControl
           {...defaultProps}
           isLayerTOCOpen={false}
         />
       );
 
-      expect(component)
-        .toMatchSnapshot();
+      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}
+          isLayerTOCOpen={false}
+          layerList={[mockLayerThatIsLoading]}
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    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();
     });
   });
+
 });