[8.11] [maps] fix expand layer control is not clickable when layers are loading (#170912) (#171025)

# Backport

This will backport the following commits from `main` to `8.11`:
- [[maps] fix expand layer control is not clickable when layers are
loading (#170912)](https://github.com/elastic/kibana/pull/170912)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nathan
Reese","email":"reese.nathan@elastic.co"},"sourceCommit":{"committedDate":"2023-11-10T14:00:05Z","message":"[maps]
fix expand layer control is not clickable when layers are loading
(#170912)\n\nCloses
https://github.com/elastic/kibana/issues/170911\r\n\r\nroot problem is
that `EuiButton*` components are disabled when passed\r\n`isLoading`
property. Re-worked component to not pass `isLoading`
to\r\n`EuiButton*`\r\n\r\n### Test instructions\r\n1. create new
map\r\n2. click \"Collapse layers panel\" to collapse layer
control\r\n3. open browser dev tools. Open network tab and select \"Slow
3G\"\r\n4. Pan and zoom map to cause basemap tiles to load. \"Expand
layers\r\npanel\" button should be clickable during
loading\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"bc2202df1ae226f97068b4709050741949f35923","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Presentation","Feature:Maps","v8.12.0","v8.11.1"],"number":170912,"url":"https://github.com/elastic/kibana/pull/170912","mergeCommit":{"message":"[maps]
fix expand layer control is not clickable when layers are loading
(#170912)\n\nCloses
https://github.com/elastic/kibana/issues/170911\r\n\r\nroot problem is
that `EuiButton*` components are disabled when passed\r\n`isLoading`
property. Re-worked component to not pass `isLoading`
to\r\n`EuiButton*`\r\n\r\n### Test instructions\r\n1. create new
map\r\n2. click \"Collapse layers panel\" to collapse layer
control\r\n3. open browser dev tools. Open network tab and select \"Slow
3G\"\r\n4. Pan and zoom map to cause basemap tiles to load. \"Expand
layers\r\npanel\" button should be clickable during
loading\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"bc2202df1ae226f97068b4709050741949f35923"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/170912","number":170912,"mergeCommit":{"message":"[maps]
fix expand layer control is not clickable when layers are loading
(#170912)\n\nCloses
https://github.com/elastic/kibana/issues/170911\r\n\r\nroot problem is
that `EuiButton*` components are disabled when passed\r\n`isLoading`
property. Re-worked component to not pass `isLoading`
to\r\n`EuiButton*`\r\n\r\n### Test instructions\r\n1. create new
map\r\n2. click \"Collapse layers panel\" to collapse layer
control\r\n3. open browser dev tools. Open network tab and select \"Slow
3G\"\r\n4. Pan and zoom map to cause basemap tiles to load. \"Expand
layers\r\npanel\" button should be clickable during
loading\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"bc2202df1ae226f97068b4709050741949f35923"}},{"branch":"8.11","label":"v8.11.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Nathan Reese <reese.nathan@elastic.co>

x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/__snapshots__/layer_control.test.tsx.snap

@@ -121,12 +121,8 @@ exports[`LayerControl isLayerTOCOpen Should render expand button 1`] = `
   display="inlineBlock"
   position="left"
 >
-  <EuiButtonIcon
-    aria-label="Expand layers panel"
-    className="mapLayerControl__openLayerTOCButton"
-    color="text"
-    data-test-subj="mapExpandLayerControlButton"
-    iconType="menuLeft"
+  <ExpandButton
+    hasErrors={false}
     isLoading={false}
     onClick={[Function]}
   />
@@ -140,12 +136,8 @@ exports[`LayerControl isLayerTOCOpen Should render expand button with error icon
   display="inlineBlock"
   position="left"
 >
-  <EuiButtonIcon
-    aria-label="Expand layers panel"
-    className="mapLayerControl__openLayerTOCButton"
-    color="text"
-    data-test-subj="mapExpandLayerControlButton"
-    iconType="warning"
+  <ExpandButton
+    hasErrors={true}
     isLoading={false}
     onClick={[Function]}
   />
@@ -159,12 +151,8 @@ exports[`LayerControl isLayerTOCOpen Should render expand button with loading ic
   display="inlineBlock"
   position="left"
 >
-  <EuiButtonIcon
-    aria-label="Expand layers panel"
-    className="mapLayerControl__openLayerTOCButton"
-    color="text"
-    data-test-subj="mapExpandLayerControlButton"
-    iconType="menuLeft"
+  <ExpandButton
+    hasErrors={false}
     isLoading={true}
     onClick={[Function]}
   />

x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/expand_button.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiButtonEmpty, EuiIcon, EuiLoadingSpinner } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+interface Props {
+  hasErrors: boolean;
+  isLoading: boolean;
+  onClick: () => void;
+}
+
+export function ExpandButton({ hasErrors, isLoading, onClick }: Props) {
+  // isLoading indicates at least one layer is loading.
+  // Expand button should never be disabled.
+  // Not using EuiButton* with iconType props because EuiButton* disables button when isLoading prop is true.
+  return (
+    <EuiButtonEmpty
+      aria-label={i18n.translate('xpack.maps.layerControl.openLayerTOCButtonAriaLabel', {
+        defaultMessage: 'Expand layers panel',
+      })}
+      className="mapLayerControl__openLayerTOCButton"
+      color="text"
+      onClick={onClick}
+      data-test-subj="mapExpandLayerControlButton"
+    >
+      {isLoading ? (
+        <div style={{ paddingTop: '6px' }}>
+          <EuiLoadingSpinner />
+        </div>
+      ) : (
+        <EuiIcon type={hasErrors ? 'warning' : 'menuLeft'} />
+      )}
+    </EuiButtonEmpty>
+  );
+}

x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_control.tsx

@@ -7,13 +7,13 @@
 
 import React, { Fragment } from 'react';
 import {
+  EuiButton,
+  EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPanel,
-  EuiButton,
   EuiTitle,
   EuiSpacer,
-  EuiButtonIcon,
   EuiToolTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -21,6 +21,7 @@ import { i18n } from '@kbn/i18n';
 import { LayerTOC } from './layer_toc';
 import { isScreenshotMode } from '../../../kibana_services';
 import { ILayer } from '../../../classes/layers/layer';
+import { ExpandButton } from './expand_button';
 
 export interface Props {
   isReadOnly: boolean;
@@ -35,32 +36,6 @@ export interface Props {
   zoom: number;
 }
 
-function renderExpandButton({
-  hasErrors,
-  isLoading,
-  onClick,
-}: {
-  hasErrors: boolean;
-  isLoading: boolean;
-  onClick: () => void;
-}) {
-  const expandLabel = i18n.translate('xpack.maps.layerControl.openLayerTOCButtonAriaLabel', {
-    defaultMessage: 'Expand layers panel',
-  });
-
-  return (
-    <EuiButtonIcon
-      className="mapLayerControl__openLayerTOCButton"
-      color="text"
-      isLoading={isLoading}
-      onClick={onClick}
-      iconType={hasErrors ? 'warning' : 'menuLeft'}
-      aria-label={expandLabel}
-      data-test-subj="mapExpandLayerControlButton"
-    />
-  );
-}
-
 export function LayerControl({
   isReadOnly,
   isLayerTOCOpen,
@@ -92,7 +67,7 @@ export function LayerControl({
         })}
         position="left"
       >
-        {renderExpandButton({ hasErrors, isLoading, onClick: openLayerTOC })}
+        <ExpandButton hasErrors={hasErrors} isLoading={isLoading} onClick={openLayerTOC} />
       </EuiToolTip>
     );
   }