[8.11] [maps] fix expand layer control is not clickable when layers a…

…re loading (elastic#170912) (elastic#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 (elastic#170912)](elastic#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":"[email protected]"},"sourceCommit":{"committedDate":"2023-11-10T14:00:05Z","message":"[maps]
fix expand layer control is not clickable when layers are loading
(elastic#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
<[email protected]>","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
(elastic#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
<[email protected]>","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
(elastic#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
<[email protected]>","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 <[email protected]>

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,20 +7,21 @@
 
 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';
 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>
     );
   }