You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by hu...@apache.org on 2020/11/30 21:48:15 UTC
[incubator-superset] 01/01: create dataset modal
This is an automated email from the ASF dual-hosted git repository.
hugh pushed a commit to branch so-1117-savedatasetmodal
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit 7834b193369fbe69b13d6424018ffcb12002b432
Author: hughhhh <hu...@gmail.com>
AuthorDate: Mon Nov 30 13:44:51 2020 -0800
create dataset modal
---
.../javascripts/sqllab/SaveDatasetModal_spec.jsx | 39 +++++
.../src/SqlLab/components/SaveDatasetModal.tsx | 178 +++++++++++++++++++++
2 files changed, 217 insertions(+)
diff --git a/superset-frontend/spec/javascripts/sqllab/SaveDatasetModal_spec.jsx b/superset-frontend/spec/javascripts/sqllab/SaveDatasetModal_spec.jsx
new file mode 100644
index 0000000..89fa756
--- /dev/null
+++ b/superset-frontend/spec/javascripts/sqllab/SaveDatasetModal_spec.jsx
@@ -0,0 +1,39 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+import { Radio, AutoComplete, Input } from 'src/common/components';
+import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
+
+describe('SaveDatasetModal', () => {
+ const mockedProps = {};
+ it('renders a radio group btn', () => {
+ const wrapper = shallow(<SaveDatasetModal {...mockedProps} />);
+ expect(wrapper.find(Radio.Group)).toExist();
+ });
+ it('renders a autocomplete', () => {
+ const wrapper = shallow(<SaveDatasetModal {...mockedProps} />);
+ expect(wrapper.find(AutoComplete)).toExist();
+ });
+ it('renders an input form ', () => {
+ const wrapper = shallow(<SaveDatasetModal {...mockedProps} />);
+ expect(wrapper.find(Input)).toExist();
+ });
+});
diff --git a/superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx b/superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx
new file mode 100644
index 0000000..2cdc4e7
--- /dev/null
+++ b/superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx
@@ -0,0 +1,178 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState, FunctionComponent } from 'react';
+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';
+
+interface SaveDatasetModalProps {
+ visible: boolean;
+ onOk: () => void;
+ onCancel: () => void;
+ handleDatasetNameChange: (e: { target: { value: any } }) => void;
+ userDatasetsOwned: Array<Record<string, any>>;
+ handleSaveDatasetRadioBtnState: (e: { target: { value: any } }) => void;
+ saveDatasetRadioBtnState: number;
+ overwriteDataSet: boolean;
+ handleOverwriteCancel: () => void;
+ handleOverwriteDataset: () => void;
+ handleOverwriteDatasetOption: (
+ data: string,
+ option: Record<string, any>,
+ ) => void;
+ defaultCreateDatasetValue: string;
+}
+
+const Styles = styled.div`
+ .smd-input {
+ margin-left: 45px;
+ width: 290px;
+ }
+ .smd-autocomplete {
+ margin-left: 8px;
+ width: 290px;
+ }
+ .smd-radio {
+ display: block;
+ height: 30px;
+ margin: 10px 0px;
+ line-height: 30px;
+ }
+`;
+
+// eslint-disable-next-line no-empty-pattern
+export const SaveDatasetModal: FunctionComponent<SaveDatasetModalProps> = ({
+ visible,
+ onOk,
+ onCancel,
+ handleDatasetNameChange,
+ userDatasetsOwned,
+ handleSaveDatasetRadioBtnState,
+ saveDatasetRadioBtnState,
+ overwriteDataSet,
+ handleOverwriteCancel,
+ handleOverwriteDataset,
+ handleOverwriteDatasetOption,
+ defaultCreateDatasetValue,
+}) => {
+ const [options, setOptions] = useState([]);
+
+ const onSearch = (searchText: any) => {
+ setOptions(
+ !searchText
+ ? []
+ : userDatasetsOwned.map((d: { dataSetName: any; dataSetId: any }) => ({
+ value: d.dataSetName,
+ dataSetId: d.dataSetId,
+ })),
+ );
+ };
+
+ const filterAutocompleteOption = (
+ inputValue: any,
+ option: { value: string | any[] },
+ ) => {
+ return option.value.includes(inputValue);
+ };
+
+ return (
+ <StyledModal
+ show={visible}
+ onHide={() => {}}
+ title="Save or Overwrite Dataset"
+ onCancel={onCancel}
+ footer={
+ <>
+ {!overwriteDataSet && (
+ <Button
+ buttonSize="sm"
+ buttonStyle="primary"
+ className="m-r-5"
+ onClick={onOk}
+ >
+ Save & Explore
+ </Button>
+ )}
+ {overwriteDataSet && (
+ <>
+ {' '}
+ <Button
+ buttonSize="sm"
+ buttonStyle="danger"
+ className="m-r-5"
+ onClick={() => {
+ handleOverwriteCancel();
+ }}
+ >
+ Cancel
+ </Button>
+ <Button
+ buttonSize="sm"
+ buttonStyle="primary"
+ className="m-r-5"
+ onClick={handleOverwriteDataset}
+ >
+ Ok
+ </Button>{' '}
+ </>
+ )}
+ </>
+ }
+ >
+ <Styles>
+ {!overwriteDataSet && (
+ <div className="smd-body">
+ <div className="smd-prompt">
+ Save this query as virtual dataset to continue exploring.
+ </div>
+ <Radio.Group
+ onChange={handleSaveDatasetRadioBtnState}
+ value={saveDatasetRadioBtnState}
+ >
+ <Radio className="smd-radio" value={1}>
+ Save as new
+ <Input
+ className="smd-input"
+ defaultValue={defaultCreateDatasetValue}
+ onChange={handleDatasetNameChange}
+ />
+ </Radio>
+ <Radio className="smd-radio" value={2}>
+ Overwrite existing
+ <AutoComplete
+ className="smd-autocomplete"
+ options={options}
+ onSelect={handleOverwriteDatasetOption}
+ onSearch={onSearch}
+ placeholder="Select or type dataset name"
+ filterOption={filterAutocompleteOption}
+ />
+ </Radio>
+ </Radio.Group>
+ </div>
+ )}
+ {overwriteDataSet && (
+ <div>Are you sure you want to overwrite this dataset?</div>
+ )}
+ </Styles>
+ </StyledModal>
+ );
+};