update layover

Signed-off-by: Shey Gao <[email protected]>

src/plugins/opensearch_dashboards_react/public/table_list_view/edit_action_dropdown.test.tsx

@@ -7,20 +7,41 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import { EditActionDropdown, VisualizationItem } from './edit_action_dropdown';
-import { EuiContextMenuPanel, EuiIcon, EuiPopover, EuiContextMenuItem } from '@elastic/eui';
+import {
+  EuiContextMenuPanel,
+  EuiIcon,
+  EuiPopover,
+  EuiContextMenuItem,
+  EuiConfirmModal,
+} from '@elastic/eui';
+import { useOpenSearchDashboards } from '../context';
+
+// Mock the useOpenSearchDashboards hook
+jest.mock('../context', () => ({
+  useOpenSearchDashboards: jest.fn(),
+}));
 
 describe('EditActionDropdown', () => {
   let component: any;
   const mockEditItem = jest.fn();
   const mockVisbuilderEditItem = jest.fn();
+  const mockOpenModal = jest.fn();
+  const mockCloseModal = jest.fn();
 
   const defaultItem: VisualizationItem = {
     typeTitle: 'Area',
     id: '1',
     version: 1,
   };
 
+  const mockOverlays = {
+    openModal: mockOpenModal.mockReturnValue({ close: mockCloseModal }),
+  };
+
   beforeEach(() => {
+    // Cast the mocked function to any to avoid TypeScript errors
+    (useOpenSearchDashboards as jest.Mock).mockReturnValue({ overlays: mockOverlays });
+
     component = mount(
       <EditActionDropdown
         item={defaultItem}
@@ -85,15 +106,52 @@ describe('EditActionDropdown', () => {
     expect(mockEditItem).toHaveBeenCalledWith(defaultItem);
   });
 
-  it('calls visbuilderEditItem when Import to VisBuilder option is clicked', () => {
+  it('opens a confirmation modal when Import to VisBuilder option is clicked', () => {
     act(() => {
       component.find(EuiIcon).first().simulate('click');
     });
     component.update();
     act(() => {
       component.find(EuiContextMenuItem).at(1).simulate('click');
     });
+    expect(mockOpenModal).toHaveBeenCalled();
+    expect(mockOpenModal.mock.calls[0][0].type).toBe(EuiConfirmModal);
+  });
+
+  it('calls visbuilderEditItem when confirmation modal is confirmed', () => {
+    act(() => {
+      component.find(EuiIcon).first().simulate('click');
+    });
+    component.update();
+    act(() => {
+      component.find(EuiContextMenuItem).at(1).simulate('click');
+    });
+
+    const modalProps = mockOpenModal.mock.calls[0][0].props;
+    act(() => {
+      modalProps.onConfirm();
+    });
+
     expect(mockVisbuilderEditItem).toHaveBeenCalledWith(defaultItem);
+    expect(mockCloseModal).toHaveBeenCalled();
+  });
+
+  it('does not call visbuilderEditItem when confirmation modal is cancelled', () => {
+    act(() => {
+      component.find(EuiIcon).first().simulate('click');
+    });
+    component.update();
+    act(() => {
+      component.find(EuiContextMenuItem).at(1).simulate('click');
+    });
+
+    const modalProps = mockOpenModal.mock.calls[0][0].props;
+    act(() => {
+      modalProps.onCancel();
+    });
+
+    expect(mockVisbuilderEditItem).not.toHaveBeenCalled();
+    expect(mockCloseModal).toHaveBeenCalled();
   });
 
   it('closes the popover after an action is selected', () => {

src/plugins/opensearch_dashboards_react/public/table_list_view/edit_action_dropdown.tsx

@@ -4,8 +4,16 @@
  */
 
 import React, { useState } from 'react';
-import { EuiIcon, EuiPopover, EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui';
+import {
+  EuiIcon,
+  EuiPopover,
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
+  EuiText,
+  EuiConfirmModal,
+} from '@elastic/eui';
 import { i18n } from '@osd/i18n';
+import { useOpenSearchDashboards } from '../context';
 
 // TODO: include more types once VisBuilder supports more visualization types
 const types = ['Area', 'Vertical Bar', 'Line', 'Metric', 'Table'];
@@ -14,6 +22,7 @@ export interface VisualizationItem {
   typeTitle: string;
   id?: string;
   version?: number;
+  overlays?: any;
 }
 
 interface EditActionDropdownProps {
@@ -27,6 +36,7 @@ export const EditActionDropdown: React.FC<EditActionDropdownProps> = ({
   editItem,
   visbuilderEditItem,
 }) => {
+  const { overlays } = useOpenSearchDashboards();
   const [isPopoverOpen, setPopoverOpen] = useState(false);
   const onButtonClick = () => {
     setPopoverOpen(!isPopoverOpen);
@@ -42,6 +52,34 @@ export const EditActionDropdown: React.FC<EditActionDropdownProps> = ({
   const isVisBuilderCompatible =
     types.includes(typeName) && itemVersion !== undefined && itemVersion <= 1;
 
+  const handleImportToVisBuilder = () => {
+    closePopover(); // Close the popover first
+
+    const modal = overlays.openModal(
+      <EuiConfirmModal
+        title="Partial Import"
+        onCancel={() => modal.close()}
+        onConfirm={async () => {
+          modal.close();
+          // Call visbuilderEditItem with the item
+          if (visbuilderEditItem) {
+            await visbuilderEditItem(item);
+          }
+        }}
+        cancelButtonText="Cancel"
+        confirmButtonText="Import"
+      >
+        <EuiText>
+          <p>
+            {' '}
+            Note that not all settings have been migrated from the original visualization. More will
+            be included as VisBuilder supports additional settings.{' '}
+          </p>
+        </EuiText>
+      </EuiConfirmModal>
+    );
+  };
+
   const items = [
     <EuiContextMenuItem
       key="edit"
@@ -60,10 +98,7 @@ export const EditActionDropdown: React.FC<EditActionDropdownProps> = ({
       <EuiContextMenuItem
         key="importToVisBuilder"
         icon={<EuiIcon type="importAction" />}
-        onClick={() => {
-          closePopover();
-          visbuilderEditItem?.(item);
-        }}
+        onClick={handleImportToVisBuilder}
         data-test-subj="dashboardImportToVisBuilder"
       >
         {i18n.translate('editActionDropdown.importToVisBuilder', {