mirror of
https://github.com/apache/superset.git
synced 2026-04-26 11:34:27 +00:00
feat: Sqllab to Explore UX improvements (#11755)
* create boiler modal component
* hello world modal
* setup modal flow
* setup savemodal for components
* flake8
* fix onclick reference
* working create datasource boiler
* saving spot for callback on text input
* working dataset with input box
* working redirect on completion
* get data for owners dropdown
* fix build with pull from master
* fix the filteroption
* 💯
* move state to upper component
* add overwrite state
* hacked overwrite process
* linting
* fix filter
* cleaning up the coe
* Delete preset.code-workspace
* remove unused code
* remove visualize
* update default value
* remove unneeded vars
* checkout package-lock.json
* linting
* get user id
* remove page filter
* setup proper call for updating columns in dataset
* add move to explore flow
* linting
* add param for overriding columns
* linting
* change title
* fix some tings
* cleanup
* linting
* add types in some places
* save toast
* use moment
* add error toast
* create enum for radio states
* initial state for saving query
* add tpying
* addressing concerns
* update propTypes
* add functionality for CTAS explor btn
* handle CTAS state
* fix onclick to reference upper level component
* formatting
* reset state after closing
* add error message when user doesn't pick an already selected dataset
* remove unneeded todo
* remove styling
* move async calls to api directory
* remove console.log
* add user id param
* typing
* littty
* move put to seperate file
* save
* dsf
* fix typing errors
* adding more types
* fix typing erros
* linting
* add basic spec test
* create dataset modal
* add components reference
* Rename SaveDatasetModal_spec.jsx to SaveDatasetModal_spec.tsx
* remove sinon for now
* fix typing errors on modal files
* fix linting
* address comments
* attempt to fix linting
* add props
* fix test
* fix the linting
* yerp
* fix this references
* spaces
* handleOverwriteCancel reference cleanup
* rename bool value for shouldOverwriteDataset
* fix typing for onChange
* you still the best in the world
* fix spec
* align branches
* push
* fix key names
* fix dataset reference
* lowercase
* fix save bug with tiem
* fixed styling
* fix date state after push to explore
* add disabling states
* plz refactor this
* this is working fully now
* do some renaming
* renaming
* remove console.logs
* still refactoring
* remove unneeded code
* remove unneeded variables
* still cleaning
* added interface
* fix typing issues
* cleanup unused code
* fix npm lnit
* fix initial problems
* add props to test
* remove unneeded files
* skip linting
* saving
* this works
* remove old test
* remove old test
* fix linting
* fix broken test
* remove jsx file
* refactoring
* cleanup
* remove comments
* reset user object
* fix functions
* fix this
* reverting CTAS btn flow
* remove onclick
* save frontend work
* allow for database id to be passed as param in body
* use enum
* fix linting
* style alignment
* get rid of .then
* add function to compute default value with tiem
* lit
* remove ts-error
* fix typing
This commit is contained in:
Hugh A. Miles II
@@ -17,11 +17,12 @@
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import React, { useState, FunctionComponent } from 'react';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import { AutoCompleteProps } from 'antd/lib/auto-complete';
|
||||
import { Radio, AutoComplete, Input } from 'src/common/components';
|
||||
import StyledModal from 'src/common/components/Modal';
|
||||
import Button from 'src/components/Button';
|
||||
import { styled } from '@superset-ui/core';
|
||||
import { styled, t } from '@superset-ui/core';
|
||||
import { RadioChangeEvent } from 'antd/lib/radio';
|
||||
|
||||
interface SaveDatasetModalProps {
|
||||
@@ -29,27 +30,37 @@ interface SaveDatasetModalProps {
|
||||
onOk: () => void;
|
||||
onHide: () => void;
|
||||
handleDatasetNameChange: (e: React.FormEvent<HTMLInputElement>) => void;
|
||||
userDatasetsOwned: Array<Record<string, any>>;
|
||||
handleSaveDatasetModalSearch: (searchText: string) => void;
|
||||
filterAutocompleteOption: (
|
||||
inputValue: string,
|
||||
option: { value: string; datasetId: number },
|
||||
) => boolean;
|
||||
handleSaveDatasetRadioBtnState: (e: RadioChangeEvent) => void;
|
||||
saveDatasetRadioBtnState: number;
|
||||
shouldOverwriteDataset: boolean;
|
||||
handleOverwriteCancel: () => void;
|
||||
handleOverwriteDataset: () => void;
|
||||
handleOverwriteDatasetOption: (
|
||||
data: string,
|
||||
option: Record<string, any>,
|
||||
) => void;
|
||||
onChangeAutoComplete: () => void;
|
||||
defaultCreateDatasetValue: string;
|
||||
disableSaveAndExploreBtn: boolean;
|
||||
saveDatasetRadioBtnState: number;
|
||||
shouldOverwriteDataset: boolean;
|
||||
userDatasetOptions: AutoCompleteProps['options'];
|
||||
}
|
||||
|
||||
const Styles = styled.div`
|
||||
.smd-body {
|
||||
margin: 0 8px;
|
||||
}
|
||||
.smd-input {
|
||||
margin-left: 45px;
|
||||
width: 290px;
|
||||
width: 401px;
|
||||
}
|
||||
.smd-autocomplete {
|
||||
margin-left: 8px;
|
||||
width: 290px;
|
||||
width: 401px;
|
||||
}
|
||||
.smd-radio {
|
||||
display: block;
|
||||
@@ -57,6 +68,9 @@ const Styles = styled.div`
|
||||
margin: 10px 0px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.smd-overwrite-msg {
|
||||
margin: 7px;
|
||||
}
|
||||
`;
|
||||
|
||||
// eslint-disable-next-line no-empty-pattern
|
||||
@@ -65,7 +79,6 @@ export const SaveDatasetModal: FunctionComponent<SaveDatasetModalProps> = ({
|
||||
onOk,
|
||||
onHide,
|
||||
handleDatasetNameChange,
|
||||
userDatasetsOwned,
|
||||
handleSaveDatasetRadioBtnState,
|
||||
saveDatasetRadioBtnState,
|
||||
shouldOverwriteDataset,
|
||||
@@ -73,32 +86,12 @@ export const SaveDatasetModal: FunctionComponent<SaveDatasetModalProps> = ({
|
||||
handleOverwriteDataset,
|
||||
handleOverwriteDatasetOption,
|
||||
defaultCreateDatasetValue,
|
||||
disableSaveAndExploreBtn,
|
||||
handleSaveDatasetModalSearch,
|
||||
filterAutocompleteOption,
|
||||
userDatasetOptions,
|
||||
onChangeAutoComplete,
|
||||
}) => {
|
||||
const [options, setOptions] = useState<
|
||||
{
|
||||
value: string;
|
||||
datasetId: number;
|
||||
}[]
|
||||
>([]);
|
||||
|
||||
const onSearch = (searchText: string) => {
|
||||
setOptions(
|
||||
!searchText
|
||||
? []
|
||||
: userDatasetsOwned.map(d => ({
|
||||
value: d.datasetName,
|
||||
datasetId: d.datasetId,
|
||||
})),
|
||||
);
|
||||
};
|
||||
|
||||
const filterAutocompleteOption = (
|
||||
inputValue: string,
|
||||
option: { value: string; datasetId: number },
|
||||
) => {
|
||||
return option.value.includes(inputValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledModal
|
||||
show={visible}
|
||||
@@ -108,31 +101,27 @@ export const SaveDatasetModal: FunctionComponent<SaveDatasetModalProps> = ({
|
||||
<>
|
||||
{!shouldOverwriteDataset && (
|
||||
<Button
|
||||
buttonSize="sm"
|
||||
disabled={disableSaveAndExploreBtn}
|
||||
buttonSize="medium"
|
||||
buttonStyle="primary"
|
||||
className="m-r-5"
|
||||
onClick={onOk}
|
||||
>
|
||||
Save & Explore
|
||||
{t('Save & Explore')}
|
||||
</Button>
|
||||
)}
|
||||
{shouldOverwriteDataset && (
|
||||
<>
|
||||
<Button
|
||||
buttonSize="sm"
|
||||
buttonStyle="danger"
|
||||
className="m-r-5"
|
||||
onClick={handleOverwriteCancel}
|
||||
>
|
||||
Cancel
|
||||
<Button buttonSize="medium" onClick={handleOverwriteCancel}>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
buttonSize="sm"
|
||||
className="md"
|
||||
buttonSize="medium"
|
||||
buttonStyle="primary"
|
||||
className="m-r-5"
|
||||
onClick={handleOverwriteDataset}
|
||||
disabled={disableSaveAndExploreBtn}
|
||||
>
|
||||
Ok
|
||||
{t('Overwrite & Explore')}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
@@ -155,24 +144,29 @@ export const SaveDatasetModal: FunctionComponent<SaveDatasetModalProps> = ({
|
||||
className="smd-input"
|
||||
defaultValue={defaultCreateDatasetValue}
|
||||
onChange={handleDatasetNameChange}
|
||||
disabled={saveDatasetRadioBtnState !== 1}
|
||||
/>
|
||||
</Radio>
|
||||
<Radio className="smd-radio" value={2}>
|
||||
Overwrite existing
|
||||
<AutoComplete
|
||||
className="smd-autocomplete"
|
||||
options={options}
|
||||
options={userDatasetOptions}
|
||||
onSelect={handleOverwriteDatasetOption}
|
||||
onSearch={onSearch}
|
||||
onSearch={handleSaveDatasetModalSearch}
|
||||
onChange={onChangeAutoComplete}
|
||||
placeholder="Select or type dataset name"
|
||||
filterOption={filterAutocompleteOption}
|
||||
disabled={saveDatasetRadioBtnState !== 2}
|
||||
/>
|
||||
</Radio>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
)}
|
||||
{shouldOverwriteDataset && (
|
||||
<div>Are you sure you want to overwrite this dataset?</div>
|
||||
<div className="smd-overwrite-msg">
|
||||
Are you sure you want to overwrite this dataset?
|
||||
</div>
|
||||
)}
|
||||
</Styles>
|
||||
</StyledModal>
|
||||
|
||||
Reference in New Issue
Block a user