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:14 UTC
[incubator-superset] branch so-1117-savedatasetmodal created (now
7834b19)
This is an automated email from the ASF dual-hosted git repository.
hugh pushed a change to branch so-1117-savedatasetmodal
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git.
at 7834b19 create dataset modal
This branch includes the following new commits:
new 7834b19 create dataset modal
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[incubator-superset] 01/01: create dataset modal
Posted by hu...@apache.org.
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>
+ );
+};