Refactor delete layer modal (#242) (#266)

Signed-off-by: Vijayan Balasubramanian <[email protected]>
(cherry picked from commit c688c23)

Co-authored-by: Vijayan Balasubramanian <[email protected]>

package.json

@@ -30,6 +30,7 @@
     "wellknown": "^0.5.0"
   },
   "devDependencies": {
+    "@types/react-test-renderer": "^18.0.0",
     "cypress": "9.5.4",
     "cypress-multi-reporters": "^1.5.0",
     "prettier": "^2.1.1"

public/components/layer_control_panel/delete_layer_modal.test.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DeleteLayerModal } from './delete_layer_modal';
+import React from 'react';
+import { EuiConfirmModal } from '@elastic/eui';
+import TestRenderer from 'react-test-renderer';
+
+describe('test delete layer modal', function () {
+  it('should show modal', function () {
+    const deleteLayerModal = TestRenderer.create(
+      <DeleteLayerModal layerName={'test-layer'} onCancel={() => {}} onConfirm={() => {}} />
+    );
+    const testInstance = deleteLayerModal.root;
+    expect(testInstance.findByType(EuiConfirmModal).props.title).toBe('Delete layer');
+    expect(testInstance.findByType(EuiConfirmModal).props.confirmButtonText).toBe('Delete');
+    expect(testInstance.findByType(EuiConfirmModal).props.cancelButtonText).toBe('Cancel');
+    expect(testInstance.findByType(EuiConfirmModal).props.buttonColor).toBe('danger');
+    expect(testInstance.findByType(EuiConfirmModal).props.defaultFocusedButton).toBe('confirm');
+  });
+});

public/components/layer_control_panel/delete_layer_modal.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiConfirmModal } from '@elastic/eui';
+import React from 'react';
+
+interface DeleteLayerModalProps {
+  onCancel: () => void;
+  onConfirm: () => void;
+  layerName: string;
+}
+export const DeleteLayerModal = ({ onCancel, onConfirm, layerName }: DeleteLayerModalProps) => {
+  return (
+    <EuiConfirmModal
+      title="Delete layer"
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      cancelButtonText="Cancel"
+      confirmButtonText="Delete"
+      buttonColor="danger"
+      defaultFocusedButton="confirm"
+    >
+      <p>
+        Do you want to delete layer <strong>{layerName}</strong>?
+      </p>
+    </EuiConfirmModal>
+  );
+};

public/components/layer_control_panel/layer_control_panel.tsx

@@ -44,6 +44,7 @@ import {
 import { MapState } from '../../model/mapState';
 import { ConfigSchema } from '../../../common/config';
 import { moveLayers, removeLayers, updateLayerVisibility } from '../../model/map/layer_operations';
+import { DeleteLayerModal } from './delete_layer_modal';
 
 interface MaplibreRef {
   current: Maplibre | null;
@@ -309,25 +310,6 @@ export const LayerControlPanel = memo(
       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 layer <strong>{selectedDeleteLayer?.name}</strong>?
-          </p>
-        </EuiConfirmModal>
-      );
-    }
-
     const getLayerTooltipContent = (layer: MapLayerSpecification) => {
       if (zoom < layer.zoomRange[0] || zoom > layer.zoomRange[1]) {
         return `Layer is not visible outside of zoom range ${layer.zoomRange[0]} - ${layer.zoomRange[1]}`;
@@ -510,7 +492,13 @@ export const LayerControlPanel = memo(
                 mapConfig={mapConfig}
                 layerCount={layers.length}
               />
-              {deleteLayerModal}
+              {isDeleteLayerModalVisible && (
+                <DeleteLayerModal
+                  onCancel={onCancelDeleteLayer}
+                  onConfirm={onDeleteLayerConfirm}
+                  layerName={selectedDeleteLayer?.name!}
+                />
+              )}
             </EuiFlexGroup>
           </EuiPanel>
         </I18nProvider>