Add delete layer warning modal

Signed-off-by: Junqiu Lei <[email protected]>
opensearch-project · Dec 22, 2022 · 9d7358b · 9d7358b
1 parent 9c36083
commit 9d7358b
Showing 1 changed file with 57 additions and 18 deletions.
diff --git a/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx b/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx
@@ -17,6 +17,7 @@ import {
   EuiDraggable,
   EuiDroppable,
   euiDragDropReorder,
+  EuiConfirmModal,
 } from '@elastic/eui';
 import { I18nProvider } from '@osd/i18n/react';
 import { Map as Maplibre } from 'maplibre-gl';
@@ -68,6 +69,10 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
   const [addLayerId, setAddLayerId] = useState('');
   const [isUpdatingLayerRender, setIsUpdatingLayerRender] = useState(false);
   const [isNewLayer, setIsNewLayer] = useState(false);
+  const [isDeleteLayerModalVisible, setIsDeleteLayerModalVisible] = useState(false);
+  const [selectedDeleteLayer, setSelectedDeleteLayer] = useState<
+    MapLayerSpecification | undefined
+  >();
 
   useEffect(() => {
     if (!isUpdatingLayerRender && initialLayersLoaded) {
@@ -207,6 +212,55 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
     const layersClone = [...layers];
     return layersClone.reverse();
   };
+  const onLayerVisibilityChange = (layer: MapLayerSpecification) => {
+    if (layer.visibility === LAYER_VISIBILITY.VISIBLE) {
+      layer.visibility = LAYER_VISIBILITY.NONE;
+      setLayerVisibility(new Map(layerVisibility.set(layer.id, false)));
+    } else {
+      layer.visibility = LAYER_VISIBILITY.VISIBLE;
+      setLayerVisibility(new Map(layerVisibility.set(layer.id, true)));
+    }
+    layersFunctionMap[layer.type]?.hide(maplibreRef, layer);
+  };
+
+  const onDeleteLayerIconClick = (layer: MapLayerSpecification) => {
+    setSelectedDeleteLayer(layer);
+    setIsDeleteLayerModalVisible(true);
+  };
+
+  const onDeleteLayerConfirm = () => {
+    if (selectedDeleteLayer) {
+      layersFunctionMap[selectedDeleteLayer.type]?.remove(maplibreRef, selectedDeleteLayer);
+      removeLayer(selectedDeleteLayer.id);
+      setIsDeleteLayerModalVisible(false);
+      setSelectedDeleteLayer(undefined);
+    }
+  };
+
+  const onCancelDeleteLayer = () => {
+    setIsDeleteLayerModalVisible(false);
+    setSelectedDeleteLayer(undefined);
+  };
+
+  let deleteLayerModal;
+  if (isDeleteLayerModalVisible) {
+    deleteLayerModal = (
+      <EuiConfirmModal
+        title="Delete layer"
+        onCancel={onCancelDeleteLayer}
+        onConfirm={onDeleteLayerConfirm}
+        cancelButtonText="Cancel"
+        confirmButtonText="Delete"
+        buttonColor="danger"
+        defaultFocusedButton="confirm"
+      >
+        <p>
+          Do you want to delete the layer <strong>{selectedDeleteLayer?.name}</strong>? This action
+          cannot be undone.
+        </p>
+      </EuiConfirmModal>
+    );
+  }
 
   if (isLayerControlVisible) {
     return (
@@ -281,20 +335,7 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
                                       : LAYER_PANEL_SHOW_LAYER_ICON
                                   }
                                   size="s"
-                                  onClick={() => {
-                                    if (layer.visibility === LAYER_VISIBILITY.VISIBLE) {
-                                      layer.visibility = LAYER_VISIBILITY.NONE;
-                                      setLayerVisibility(
-                                        new Map(layerVisibility.set(layer.id, false))
-                                      );
-                                    } else {
-                                      layer.visibility = LAYER_VISIBILITY.VISIBLE;
-                                      setLayerVisibility(
-                                        new Map(layerVisibility.set(layer.id, true))
-                                      );
-                                    }
-                                    layersFunctionMap[layer.type]?.hide(maplibreRef, layer);
-                                  }}
+                                  onClick={() => onLayerVisibilityChange(layer)}
                                   aria-label="Hide or show layer"
                                   color="text"
                                 />
@@ -306,10 +347,7 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
                                 <EuiButtonEmpty
                                   size="s"
                                   iconType="trash"
-                                  onClick={() => {
-                                    layersFunctionMap[layer.type]?.remove(maplibreRef, layer);
-                                    removeLayer(layer.id);
-                                  }}
+                                  onClick={() => onDeleteLayerIconClick(layer)}
                                   aria-label="Delete layer"
                                   color="text"
                                 />
@@ -355,6 +393,7 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
               addLayer={addLayer}
               setIsNewLayer={setIsNewLayer}
             />
+            {deleteLayerModal}
           </EuiFlexGroup>
         </EuiPanel>
       </I18nProvider>