feat(explore): Frontend implementation of dataset creation from infobox (#19855)

* Frontend implementation of create dataset from infobox

* Fixed sl_dataset type

* Fix test

* Fixed sl_dataset type (forgot to save)

* RTL testing

* Adjusted styling/text on infobox and save dataset modal

* Appease lint

* Make infobox invisible and fix tests

* Remove unnecessary placeholder

* Move types to sql lab

* Moved logic into save dataset modal

* Change DatasourceMeta type to Dataset

* Add ExploreDatasource union type to save dataset modal

* Get user info from redux inside save dataset modal

* Addressed comments

* Adjusting to new query type

* Fixed save dataset in explore and union type

* Added testing

* Defined d for queries

* Remove dataset from SaveDatasetModal

* Clarify useSelector parameter

* Fix dndControls union type

* Fix shared-controls union type

* Fix controlPanel union type

* Move ExploreRootState to explore type file

* Remove unnecessary testing playground

* Move datasource type check in DatasourcePanel to a function

* Make all sqllab Query imports reference @superset-ui/core Query type

* Deconstruct query props in ResultSet

* Fix union type in /legacy-plugin-chart-heatmap/src/controlPanel

* Change SaveDatasetModal tests to RTL

* Cleaned datasourceTypeCheck

* Fix infobox styling

* Fix SaveDatasetModal test

* Fix query fixture in sqllab and Query type in SaveDatasetModal test

* Fix Query type and make test query fixture

* Added columns to Query type, separated results property, created QueryResponse union type, and fixed all types affected

* Fixed a couple missed broken types

* Added ExploreDatasource to SqlLab type file

* Removed unneeded Query import from DatasourcePanel

* Address PR comments

* Fix columnChoices

* Fix all incorrect column property checks

* Fix logic on dndGroupByControl

* Dry up savedMetrics type check

* Fixed TIME_COLUMN_OPTION

* Dried savedMetrics type check even further

* Change savedMetricsTypeCheck to defineSavedMetrics

* Change datasourceTypeCheck to isValidDatasourceType

* Fix Query path in groupByControl

* dnd_granularity_sqla now sorts Query types with is_dttm at the top

* Fixed/cleaned query sort

* Add sortedQueryColumns and proper optional chaining to granularity_sqla

* Move testQuery to core-ui, add test coverage for Queries in columnChoices

* Moved DEFAULT_METRICS to core-ui and wrote a test for defineSavedMetrics

* Add license and clean dataset test object

* Change DatasourceType.Dataset to dataset

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

@@ -17,44 +17,60 @@
  * under the License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
-import { Radio } from 'src/components/Radio';
-import { AutoComplete } from 'src/components';
-import { Input } from 'src/components/Input';
+import { QueryResponse, testQuery } from '@superset-ui/core';
 import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
+import { render, screen } from 'spec/helpers/testing-library';
 
-describe('SaveDatasetModal', () => {
-  const mockedProps = {
-    visible: false,
-    onOk: () => {},
-    onHide: () => {},
-    handleDatasetNameChange: () => {},
-    handleSaveDatasetRadioBtnState: () => {},
-    saveDatasetRadioBtnState: 1,
-    handleOverwriteCancel: () => {},
-    handleOverwriteDataset: () => {},
-    handleOverwriteDatasetOption: () => {},
-    defaultCreateDatasetValue: 'someDatasets',
-    shouldOverwriteDataset: false,
-    userDatasetOptions: [],
-    disableSaveAndExploreBtn: false,
-    handleSaveDatasetModalSearch: () => Promise,
-    filterAutocompleteOption: () => false,
-    onChangeAutoComplete: () => {},
-  };
-  it('renders a radio group btn', () => {
-    // @ts-ignore
-    const wrapper = shallow(<SaveDatasetModal {...mockedProps} />);
-    expect(wrapper.find(Radio.Group)).toExist();
+const mockedProps = {
+  visible: true,
+  onHide: () => {},
+  buttonTextOnSave: 'Save',
+  buttonTextOnOverwrite: 'Overwrite',
+  datasource: testQuery as QueryResponse,
+};
+
+describe('SaveDatasetModal RTL', () => {
+  it('renders a "Save as new" field', () => {
+    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+
+    const saveRadioBtn = screen.getByRole('radio', {
+      name: /save as new unimportant/i,
+    });
+    const fieldLabel = screen.getByText(/save as new/i);
+    const inputField = screen.getByRole('textbox');
+    const inputFieldText = screen.getByDisplayValue(/unimportant/i);
+
+    expect(saveRadioBtn).toBeVisible();
+    expect(fieldLabel).toBeVisible();
+    expect(inputField).toBeVisible();
+    expect(inputFieldText).toBeVisible();
   });
-  it('renders a autocomplete', () => {
-    // @ts-ignore
-    const wrapper = shallow(<SaveDatasetModal {...mockedProps} />);
-    expect(wrapper.find(AutoComplete)).toExist();
+
+  it('renders an "Overwrite existing" field', () => {
+    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+
+    const overwriteRadioBtn = screen.getByRole('radio', {
+      name: /overwrite existing select or type dataset name/i,
+    });
+    const fieldLabel = screen.getByText(/overwrite existing/i);
+    const inputField = screen.getByRole('combobox');
+    const placeholderText = screen.getByText(/select or type dataset name/i);
+
+    expect(overwriteRadioBtn).toBeVisible();
+    expect(fieldLabel).toBeVisible();
+    expect(inputField).toBeVisible();
+    expect(placeholderText).toBeVisible();
   });
-  it('renders an input form', () => {
-    // @ts-ignore
-    const wrapper = shallow(<SaveDatasetModal {...mockedProps} />);
-    expect(wrapper.find(Input)).toExist();
+
+  it('renders a save button', () => {
+    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+
+    expect(screen.getByRole('button', { name: /save/i })).toBeVisible();
+  });
+
+  it('renders a close button', () => {
+    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+
+    expect(screen.getByRole('button', { name: /close/i })).toBeVisible();
   });
 });