[maps] fix Map layer preview blocks adding layer until all tiles are …

…loaded (elastic#161994) Closes elastic#159872 <img width="500" alt="Screen Shot 2023-07-14 at 1 56 45 PM" src="https://github.com/elastic/kibana/assets/373691/b4fc762e-dc5e-48dc-a37f-b0936f02b00b"> Do not disable add layer buttons while preview layer is loading --------- Co-authored-by: kibanamachine <[email protected]>
ThomThomson · Aug 1, 2023 · d9b4e1b · d9b4e1b
1 parent 07f3a18
commit d9b4e1b
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 25 deletions.
diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/index.ts b/x-pack/plugins/maps/public/connected_components/add_layer_panel/index.ts
@@ -22,14 +22,13 @@ import {
 } from '../../actions';
 import { MapStoreState } from '../../reducers/store';
 import { LayerDescriptor } from '../../../common/descriptor_types';
-import { hasPreviewLayers, isLoadingPreviewLayers } from '../../selectors/map_selectors';
+import { hasPreviewLayers } from '../../selectors/map_selectors';
 import { DRAW_MODE } from '../../../common/constants';
 import { getAutoOpenLayerWizardId } from '../../selectors/ui_selectors';
 
 function mapStateToProps(state: MapStoreState) {
   return {
     hasPreviewLayers: hasPreviewLayers(state),
-    isLoadingPreviewLayers: isLoadingPreviewLayers(state),
     autoOpenLayerWizardId: getAutoOpenLayerWizardId(state),
   };
 }

diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx b/x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx
@@ -47,7 +47,6 @@ export interface Props {
   addPreviewLayers: (layerDescriptors: LayerDescriptor[]) => void;
   closeFlyout: () => void;
   hasPreviewLayers: boolean;
-  isLoadingPreviewLayers: boolean;
   addLayersAndClose: () => void;
   addLayersAndContinue: () => void;
   enableEditMode: () => void;
@@ -179,22 +178,17 @@ export class AddLayerPanel extends Component<Props, State> {
       return null;
     }
 
-    let isDisabled = !this.state.isNextStepBtnEnabled;
-    let isLoading = this.state.isStepLoading;
-    if (this.state.currentStep.id === ADD_LAYER_STEP_ID) {
-      isDisabled = !this.props.hasPreviewLayers;
-      isLoading = this.props.isLoadingPreviewLayers;
-    } else {
-      isDisabled = !this.state.isNextStepBtnEnabled;
-      isLoading = this.state.isStepLoading;
-    }
+    const isDisabled =
+      this.state.currentStep.id === ADD_LAYER_STEP_ID
+        ? !this.props.hasPreviewLayers
+        : !this.state.isNextStepBtnEnabled;
 
     const nextButton = (
       <EuiFlexItem grow={false}>
         <EuiButton
           data-test-subj="importFileButton"
-          disabled={isDisabled || isLoading}
-          isLoading={isLoading}
+          disabled={isDisabled || this.state.isStepLoading}
+          isLoading={this.state.isStepLoading}
           iconSide="right"
           iconType={'arrowRight'}
           onClick={this._onNext}
@@ -213,7 +207,7 @@ export class AddLayerPanel extends Component<Props, State> {
           <EuiFlexItem grow={false}>
             {this.state.currentStep.renderSecondaryActionButton({
               isDisabled,
-              isLoading,
+              isLoading: this.state.isStepLoading,
               addLayersAndClose: this.props.addLayersAndClose,
             })}
           </EuiFlexItem>

diff --git a/x-pack/plugins/maps/public/selectors/map_selectors.ts b/x-pack/plugins/maps/public/selectors/map_selectors.ts
@@ -386,16 +386,6 @@ export const hasPreviewLayers = createSelector(getLayerList, (layerList) => {
   });
 });
 
-export const isLoadingPreviewLayers = createSelector(
-  getLayerList,
-  getMapZoom,
-  (layerList, zoom) => {
-    return layerList.some((layer) => {
-      return layer.isPreviewLayer() && layer.isLayerLoading(zoom);
-    });
-  }
-);
-
 export const getMapColors = createSelector(getLayerListRaw, (layerList) =>
   layerList
     .filter((layerDescriptor) => {