feat(SqlLab): Change Save Dataset Button to Split Save Query Button IV (#20852)

* Moving entire split save btn PR

* Addressed review comments

* Remove arbitrary div from ErrorBoundary in Chart

* Added accidentally removed comment

* Fix act errors in SaveQuery tests

* Fix SaveDatasetActionButton test

* SaveDatasetModal test almost working

* SaveDatasetModal tests all passing

* Clean SaveDatasetModal test

* Fix create chart button and SaveDatasetModal text in SQL Lab

* Fix untitled dataset name on SaveDatasetModal in explore

* Fix styling on split save button

superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx

@@ -17,35 +17,12 @@
  * under the License.
  */
 import React from 'react';
-import {
-  ISaveableDatasource,
-  SaveDatasetModal,
-} from 'src/SqlLab/components/SaveDatasetModal';
-import { render, screen } from 'spec/helpers/testing-library';
-import { DatasourceType } from '@superset-ui/core';
-
-const testQuery: ISaveableDatasource = {
-  name: 'unimportant',
-  dbId: 1,
-  sql: 'SELECT *',
-  columns: [
-    {
-      name: 'Column 1',
-      type: DatasourceType.Query,
-      is_dttm: false,
-    },
-    {
-      name: 'Column 3',
-      type: DatasourceType.Query,
-      is_dttm: false,
-    },
-    {
-      name: 'Column 2',
-      type: DatasourceType.Query,
-      is_dttm: true,
-    },
-  ],
-};
+import * as reactRedux from 'react-redux';
+import { render, screen, waitFor, within } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import fetchMock from 'fetch-mock';
+import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
+import { user, testQuery, mockdatasets } from 'src/SqlLab/fixtures';
 
 const mockedProps = {
   visible: true,
@@ -55,8 +32,17 @@ const mockedProps = {
   datasource: testQuery,
 };
 
-describe('SaveDatasetModal RTL', () => {
-  it('renders a "Save as new" field', () => {
+fetchMock.get('glob:*/api/v1/dataset?*', {
+  result: mockdatasets,
+  dataset_count: 3,
+});
+
+// Mock the user
+const useSelectorMock = jest.spyOn(reactRedux, 'useSelector');
+beforeEach(() => useSelectorMock.mockClear());
+
+describe('SaveDatasetModal', () => {
+  it('renders a "Save as new" field', async () => {
     render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
 
     const saveRadioBtn = screen.getByRole('radio', {
@@ -73,7 +59,7 @@ describe('SaveDatasetModal RTL', () => {
     expect(inputFieldText).toBeVisible();
   });
 
-  it('renders an "Overwrite existing" field', () => {
+  it('renders an "Overwrite existing" field', async () => {
     render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
 
     const overwriteRadioBtn = screen.getByRole('radio', {
@@ -89,15 +75,61 @@ describe('SaveDatasetModal RTL', () => {
     expect(placeholderText).toBeVisible();
   });
 
-  it('renders a save button', () => {
-    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
-
-    expect(screen.getByRole('button', { name: /save/i })).toBeVisible();
-  });
-
-  it('renders a close button', () => {
+  it('renders a close button', async () => {
     render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
 
     expect(screen.getByRole('button', { name: /close/i })).toBeVisible();
   });
+
+  it('renders a save button when "Save as new" is selected', async () => {
+    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+
+    // "Save as new" is selected when the modal opens by default
+    expect(screen.getByRole('button', { name: /save/i })).toBeVisible();
+  });
+
+  it('renders a back and overwrite button when "Overwrite existing" is selected', async () => {
+    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+
+    // Click the overwrite radio button to reveal the overwrite confirmation and back buttons
+    const overwriteRadioBtn = screen.getByRole('radio', {
+      name: /overwrite existing/i,
+    });
+    userEvent.click(overwriteRadioBtn);
+
+    expect(screen.getByRole('button', { name: /back/i })).toBeVisible();
+    expect(screen.getByRole('button', { name: /overwrite/i })).toBeVisible();
+  });
+
+  it('renders the overwrite button as disabled until an existing dataset is selected', async () => {
+    useSelectorMock.mockReturnValue({ ...user });
+    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+
+    // Click the overwrite radio button
+    const overwriteRadioBtn = screen.getByRole('radio', {
+      name: /overwrite existing/i,
+    });
+    await waitFor(async () => {
+      userEvent.click(overwriteRadioBtn);
+    });
+
+    // Overwrite confirmation button should be disabled at this point
+    const overwriteConfirmationBtn = screen.getByRole('button', {
+      name: /overwrite/i,
+    });
+    expect(overwriteConfirmationBtn).toBeDisabled();
+
+    // Click the select component
+    const select = screen.getByRole('combobox', { name: /existing dataset/i })!;
+    await waitFor(async () => userEvent.click(select));
+
+    // Select the first "existing dataset" from the listbox
+    const option = within(
+      document.querySelector('.rc-virtual-list')!,
+    ).getByText('coolest table 0')!;
+    userEvent.click(option);
+
+    // Overwrite button should now be enabled
+    expect(overwriteConfirmationBtn).toBeEnabled();
+  });
 });