You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2020/06/19 05:51:12 UTC
[GitHub] [incubator-superset] etr2460 commented on a change in pull request #10104: style: dataset modal view
etr2460 commented on a change in pull request #10104:
URL: https://github.com/apache/incubator-superset/pull/10104#discussion_r442638490
##########
File path: superset-frontend/src/components/Icon.tsx
##########
@@ -18,19 +18,20 @@
*/
import React, { SVGProps } from 'react';
import styled from '@superset-ui/style';
-import { ReactComponent as CheckboxOnIcon } from 'images/icons/checkbox-on.svg';
-import { ReactComponent as CheckboxOffIcon } from 'images/icons/checkbox-off.svg';
+import { ReactComponent as CancelXIcon } from 'images/icons/cancel-x.svg';
import { ReactComponent as CheckboxHalfIcon } from 'images/icons/checkbox-half.svg';
-import { ReactComponent as SortIcon } from 'images/icons/sort.svg';
-import { ReactComponent as SortDescIcon } from 'images/icons/sort-desc.svg';
-import { ReactComponent as SortAscIcon } from 'images/icons/sort-asc.svg';
-import { ReactComponent as TrashIcon } from 'images/icons/trash.svg';
-import { ReactComponent as PencilIcon } from 'images/icons/pencil.svg';
+import { ReactComponent as CheckboxOffIcon } from 'images/icons/checkbox-off.svg';
+import { ReactComponent as CheckboxOnIcon } from 'images/icons/checkbox-on.svg';
import { ReactComponent as CompassIcon } from 'images/icons/compass.svg';
import { ReactComponent as DatasetPhysicalIcon } from 'images/icons/dataset_physical.svg';
import { ReactComponent as DatasetVirtualIcon } from 'images/icons/dataset_virtual.svg';
-import { ReactComponent as CancelXIcon } from 'images/icons/cancel-x.svg';
+import { ReactComponent as PencilIcon } from 'images/icons/pencil.svg';
import { ReactComponent as SearchIcon } from 'images/icons/search.svg';
+import { ReactComponent as SortAscIcon } from 'images/icons/sort-asc.svg';
+import { ReactComponent as SortDescIcon } from 'images/icons/sort-desc.svg';
+import { ReactComponent as SortIcon } from 'images/icons/sort.svg';
+import { ReactComponent as TrashIcon } from 'images/icons/trash.svg';
+import { ReactComponent as warningIcon } from 'images/icons/warning.svg';
Review comment:
nit: `WarningIcon`
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
+import withToasts from '../../messageToasts/enhancers/withToasts';
+
+type option = {
Review comment:
types are normally capitalized, so I'd prefer `Option` here. note to self that we should find a way to enforce this with eslint
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
Review comment:
nit, remove newline
##########
File path: superset-frontend/src/views/datasetList/Button.tsx
##########
@@ -0,0 +1,64 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import BaseButton from 'src/components/Button';
+
+type Button = 'default' | 'primary' | 'secondary';
Review comment:
nit: name `ButtonStyle` or simply `Style`
##########
File path: superset-frontend/src/components/Menu/SubMenu.tsx
##########
@@ -72,43 +73,56 @@ interface Props {
interface State {
selectedMenu: string;
+ isModalOpen: boolean;
}
class SubMenu extends React.PureComponent<Props, State> {
state: State = {
selectedMenu: this.props.childs[0] && this.props.childs[0].label,
+ isModalOpen: false,
};
handleClick = (item: string) => () => {
this.setState({ selectedMenu: item });
};
+ openModal = () => {
+ this.setState({ isModalOpen: true });
+ };
+
+ closeModal = () => {
Review comment:
should we call this `hideModal` to be consistent with the `onHide` attribute? or rename the modal's prop to `onClose`. Either one seems fine, although i slightly prefer updating the prop to `onClose` and keeping this as is
##########
File path: superset-frontend/images/icons/warning.svg
##########
@@ -0,0 +1,26 @@
+<!--
+ 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.
+-->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon / Warning (Solid)">
Review comment:
Could you remove the ids from these fields since they're not really needed? Also, I think you can get rid of at least the outer g tag, and maybe even both of them
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
+import withToasts from '../../messageToasts/enhancers/withToasts';
+
+type option = {
+ label: string;
+ value: string;
+};
+
+interface Props {
+ addDangerToast: (msg: string) => void;
+ addSuccessToast: (msg: string) => void;
+ onChange: any;
+ onDatasourceSave: any;
+ onHide: any;
Review comment:
can we do better than `any` here? It looks like they're functions, so we should at least be able to say `() => unknown` i'd think. or maybe define actual arguments too.
A final note, in general it's better to use `unknown` vs. `any` when you're unsure of a type, because `any` completely removes any type safety from code that uses the prop.
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
+import withToasts from '../../messageToasts/enhancers/withToasts';
+
+type option = {
+ label: string;
+ value: string;
+};
+
+interface Props {
+ addDangerToast: (msg: string) => void;
+ addSuccessToast: (msg: string) => void;
+ onChange: any;
+ onDatasourceSave: any;
+ onHide: any;
+ show: boolean;
+}
+
+interface State {
+ datasource: option;
+ datasources: Array<option>;
+ disableSave: boolean;
+ disableSelectSchema: boolean;
+ disableSelectTable: boolean;
+ schema: option;
+ schemaLoading: boolean;
Review comment:
naming nit: prefer `isSchemaLoading`
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
+import withToasts from '../../messageToasts/enhancers/withToasts';
+
+type option = {
+ label: string;
+ value: string;
+};
+
+interface Props {
+ addDangerToast: (msg: string) => void;
+ addSuccessToast: (msg: string) => void;
+ onChange: any;
+ onDatasourceSave: any;
+ onHide: any;
+ show: boolean;
+}
+
+interface State {
+ datasource: option;
+ datasources: Array<option>;
+ disableSave: boolean;
+ disableSelectSchema: boolean;
+ disableSelectTable: boolean;
+ schema: option;
+ schemaLoading: boolean;
+ schemas: Array<option>;
+ table: option;
+ tableLoading: boolean;
+ tables: Array<option>;
+}
+
+const FieldTitle = styled.p`
+ color: ${({ theme }) => theme.colors.secondary.light2};
+ font-size: ${({ theme }) => theme.typography.sizes.s};
+ margin: 20px 0 10px 0;
+ text-transform: uppercase;
+`;
+
+const StyledIcon = styled(Icon)`
+ margin: auto 10px auto 0;
+`;
+
+class DatasetModal extends React.PureComponent<Props, State> {
+ constructor(props: Props) {
+ super(props);
+
+ this.onDatabaseChange = this.onDatabaseChange.bind(this);
+ this.onSave = this.onSave.bind(this);
+ this.onSchemaChange = this.onSchemaChange.bind(this);
+ this.onTableChange = this.onTableChange.bind(this);
+ this.renderFields = this.renderFields.bind(this);
+ this.renderTitle = this.renderTitle.bind(this);
+ }
+
+ state: State = {
+ datasource: { label: 'Select Datasource', value: 'Select Datasource' },
+ datasources: [],
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ schemaLoading: false,
+ schemas: [],
+ table: { label: 'Select Table', value: 'Select Table' },
+ tableLoading: false,
+ tables: [],
+ };
+
+ componentDidMount() {
+ this.fetchDatabase();
+ }
+
+ onDatabaseChange(datasource: option) {
+ this.setState({
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schemas: [],
+ tables: [],
+ });
+ this.fetchSchemas(`${datasource.value}`);
+ this.setState({
+ datasource,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ table: { label: 'Select Table', value: 'Select Table' },
+ });
+ }
+
+ onSchemaChange(schema: option) {
+ this.setState({ tables: [], disableSelectTable: true, disableSave: true });
+ this.fetchTables(`${schema.value}`);
+ this.setState({ schema });
+ }
+
+ onTableChange(table: option) {
+ const { disableSelectSchema, disableSelectTable } = this.state;
+ const disableSave = disableSelectSchema || disableSelectTable;
+ this.setState({ table, disableSave });
+ }
+
+ onSave() {
+ const { datasource, schema, table } = this.state;
+ const { onHide, addSuccessToast, addDangerToast } = this.props;
+ const data = {
+ database: datasource.value,
+ schema: schema.value,
+ table_name: table.label,
+ };
+
+ SupersetClient.post({
+ endpoint: '/api/v1/dataset/',
+ body: JSON.stringify(data),
+ headers: { 'Content-Type': 'application/json' },
+ parseMethod: 'text',
+ })
+ .then(() => {
+ addSuccessToast(t('The dataset has been saved'));
+ onHide();
+ })
+ .catch(e => {
+ addDangerToast(t('Error while saving dataset'));
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+
+ fetchDatabase() {
+ SupersetClient.get({
+ endpoint: `/api/v1/dataset/related/database`,
+ })
+ .then(({ json: datasourcesJson = {} }) => {
+ const datasources = datasourcesJson.result.map(
+ ({ text, value }: { text: string; value: number }) => ({
+ label: text,
+ value: `${value}`,
+ }),
+ );
+ this.setState({ datasources });
+ })
+ .catch(e => {
+ this.props.addDangerToast(
+ t('An error occurred while fetching datasources'),
+ );
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+
+ fetchSchemas(datasourceId: string) {
+ if (datasourceId) {
+ this.setState({ schemaLoading: true });
+ const endpoint = `/superset/schemas/${datasourceId}/false/`;
+ SupersetClient.get({ endpoint })
+ .then(({ json: schemaJson = {} }) => {
+ const schemas = schemaJson.schemas.map((s: string) => ({
Review comment:
maybe `schema` instead of `s`?
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
+import withToasts from '../../messageToasts/enhancers/withToasts';
+
+type option = {
+ label: string;
+ value: string;
+};
+
+interface Props {
+ addDangerToast: (msg: string) => void;
+ addSuccessToast: (msg: string) => void;
+ onChange: any;
+ onDatasourceSave: any;
+ onHide: any;
+ show: boolean;
+}
+
+interface State {
+ datasource: option;
+ datasources: Array<option>;
+ disableSave: boolean;
+ disableSelectSchema: boolean;
+ disableSelectTable: boolean;
+ schema: option;
+ schemaLoading: boolean;
+ schemas: Array<option>;
+ table: option;
+ tableLoading: boolean;
+ tables: Array<option>;
+}
+
+const FieldTitle = styled.p`
+ color: ${({ theme }) => theme.colors.secondary.light2};
+ font-size: ${({ theme }) => theme.typography.sizes.s};
+ margin: 20px 0 10px 0;
+ text-transform: uppercase;
+`;
+
+const StyledIcon = styled(Icon)`
+ margin: auto 10px auto 0;
+`;
+
+class DatasetModal extends React.PureComponent<Props, State> {
+ constructor(props: Props) {
+ super(props);
+
+ this.onDatabaseChange = this.onDatabaseChange.bind(this);
+ this.onSave = this.onSave.bind(this);
+ this.onSchemaChange = this.onSchemaChange.bind(this);
+ this.onTableChange = this.onTableChange.bind(this);
+ this.renderFields = this.renderFields.bind(this);
+ this.renderTitle = this.renderTitle.bind(this);
+ }
+
+ state: State = {
+ datasource: { label: 'Select Datasource', value: 'Select Datasource' },
+ datasources: [],
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ schemaLoading: false,
+ schemas: [],
+ table: { label: 'Select Table', value: 'Select Table' },
+ tableLoading: false,
+ tables: [],
+ };
+
+ componentDidMount() {
+ this.fetchDatabase();
+ }
+
+ onDatabaseChange(datasource: option) {
+ this.setState({
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schemas: [],
+ tables: [],
+ });
+ this.fetchSchemas(`${datasource.value}`);
+ this.setState({
+ datasource,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ table: { label: 'Select Table', value: 'Select Table' },
+ });
+ }
+
+ onSchemaChange(schema: option) {
+ this.setState({ tables: [], disableSelectTable: true, disableSave: true });
+ this.fetchTables(`${schema.value}`);
+ this.setState({ schema });
+ }
+
+ onTableChange(table: option) {
+ const { disableSelectSchema, disableSelectTable } = this.state;
+ const disableSave = disableSelectSchema || disableSelectTable;
+ this.setState({ table, disableSave });
+ }
+
+ onSave() {
+ const { datasource, schema, table } = this.state;
+ const { onHide, addSuccessToast, addDangerToast } = this.props;
+ const data = {
+ database: datasource.value,
+ schema: schema.value,
+ table_name: table.label,
+ };
+
+ SupersetClient.post({
+ endpoint: '/api/v1/dataset/',
+ body: JSON.stringify(data),
+ headers: { 'Content-Type': 'application/json' },
+ parseMethod: 'text',
+ })
+ .then(() => {
+ addSuccessToast(t('The dataset has been saved'));
+ onHide();
+ })
+ .catch(e => {
+ addDangerToast(t('Error while saving dataset'));
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+
+ fetchDatabase() {
+ SupersetClient.get({
+ endpoint: `/api/v1/dataset/related/database`,
+ })
+ .then(({ json: datasourcesJson = {} }) => {
+ const datasources = datasourcesJson.result.map(
+ ({ text, value }: { text: string; value: number }) => ({
+ label: text,
+ value: `${value}`,
+ }),
+ );
+ this.setState({ datasources });
+ })
+ .catch(e => {
+ this.props.addDangerToast(
+ t('An error occurred while fetching datasources'),
+ );
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+
+ fetchSchemas(datasourceId: string) {
+ if (datasourceId) {
+ this.setState({ schemaLoading: true });
+ const endpoint = `/superset/schemas/${datasourceId}/false/`;
+ SupersetClient.get({ endpoint })
+ .then(({ json: schemaJson = {} }) => {
+ const schemas = schemaJson.schemas.map((s: string) => ({
+ value: s,
+ label: s,
+ }));
+ this.setState({
+ disableSelectSchema: false,
+ schemaLoading: false,
+ schemas,
+ });
+ })
+ .catch(e => {
+ this.setState({ schemaLoading: false, schemas: [] });
+ this.props.addDangerToast(t('Error while fetching schema list'));
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+ }
+
+ fetchTables(schema: string) {
+ const { datasource } = this.state;
+
+ if (datasource && schema) {
+ this.setState(() => ({ tableLoading: true, tables: [] }));
+ const endpoint = encodeURI(
+ `/superset/tables/${datasource.value}/` +
+ `${encodeURIComponent(schema)}/undefined/false/`,
+ );
+ SupersetClient.get({ endpoint })
+ .then(({ json: tableJson = {} }) => {
+ const options = tableJson.options.map((o: option) => ({
Review comment:
you can replace `o` with `option` once you update the type name to `Option`
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
+import withToasts from '../../messageToasts/enhancers/withToasts';
+
+type option = {
+ label: string;
+ value: string;
+};
+
+interface Props {
+ addDangerToast: (msg: string) => void;
+ addSuccessToast: (msg: string) => void;
+ onChange: any;
+ onDatasourceSave: any;
+ onHide: any;
+ show: boolean;
+}
+
+interface State {
+ datasource: option;
+ datasources: Array<option>;
+ disableSave: boolean;
+ disableSelectSchema: boolean;
+ disableSelectTable: boolean;
+ schema: option;
+ schemaLoading: boolean;
+ schemas: Array<option>;
+ table: option;
+ tableLoading: boolean;
+ tables: Array<option>;
+}
+
+const FieldTitle = styled.p`
+ color: ${({ theme }) => theme.colors.secondary.light2};
+ font-size: ${({ theme }) => theme.typography.sizes.s};
+ margin: 20px 0 10px 0;
+ text-transform: uppercase;
+`;
+
+const StyledIcon = styled(Icon)`
+ margin: auto 10px auto 0;
+`;
+
+class DatasetModal extends React.PureComponent<Props, State> {
+ constructor(props: Props) {
+ super(props);
+
+ this.onDatabaseChange = this.onDatabaseChange.bind(this);
+ this.onSave = this.onSave.bind(this);
+ this.onSchemaChange = this.onSchemaChange.bind(this);
+ this.onTableChange = this.onTableChange.bind(this);
+ this.renderFields = this.renderFields.bind(this);
+ this.renderTitle = this.renderTitle.bind(this);
+ }
+
+ state: State = {
+ datasource: { label: 'Select Datasource', value: 'Select Datasource' },
+ datasources: [],
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ schemaLoading: false,
+ schemas: [],
+ table: { label: 'Select Table', value: 'Select Table' },
+ tableLoading: false,
+ tables: [],
+ };
+
+ componentDidMount() {
+ this.fetchDatabase();
+ }
+
+ onDatabaseChange(datasource: option) {
+ this.setState({
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schemas: [],
+ tables: [],
+ });
+ this.fetchSchemas(`${datasource.value}`);
+ this.setState({
+ datasource,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ table: { label: 'Select Table', value: 'Select Table' },
+ });
+ }
+
+ onSchemaChange(schema: option) {
+ this.setState({ tables: [], disableSelectTable: true, disableSave: true });
+ this.fetchTables(`${schema.value}`);
+ this.setState({ schema });
+ }
+
+ onTableChange(table: option) {
+ const { disableSelectSchema, disableSelectTable } = this.state;
+ const disableSave = disableSelectSchema || disableSelectTable;
+ this.setState({ table, disableSave });
+ }
+
+ onSave() {
+ const { datasource, schema, table } = this.state;
+ const { onHide, addSuccessToast, addDangerToast } = this.props;
+ const data = {
+ database: datasource.value,
+ schema: schema.value,
+ table_name: table.label,
+ };
+
+ SupersetClient.post({
+ endpoint: '/api/v1/dataset/',
+ body: JSON.stringify(data),
+ headers: { 'Content-Type': 'application/json' },
+ parseMethod: 'text',
+ })
+ .then(() => {
+ addSuccessToast(t('The dataset has been saved'));
+ onHide();
+ })
+ .catch(e => {
+ addDangerToast(t('Error while saving dataset'));
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+
+ fetchDatabase() {
+ SupersetClient.get({
+ endpoint: `/api/v1/dataset/related/database`,
+ })
+ .then(({ json: datasourcesJson = {} }) => {
+ const datasources = datasourcesJson.result.map(
+ ({ text, value }: { text: string; value: number }) => ({
+ label: text,
+ value: `${value}`,
+ }),
+ );
+ this.setState({ datasources });
+ })
+ .catch(e => {
+ this.props.addDangerToast(
+ t('An error occurred while fetching datasources'),
+ );
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+
+ fetchSchemas(datasourceId: string) {
+ if (datasourceId) {
+ this.setState({ schemaLoading: true });
+ const endpoint = `/superset/schemas/${datasourceId}/false/`;
+ SupersetClient.get({ endpoint })
+ .then(({ json: schemaJson = {} }) => {
+ const schemas = schemaJson.schemas.map((s: string) => ({
+ value: s,
+ label: s,
+ }));
+ this.setState({
+ disableSelectSchema: false,
+ schemaLoading: false,
+ schemas,
+ });
+ })
+ .catch(e => {
+ this.setState({ schemaLoading: false, schemas: [] });
+ this.props.addDangerToast(t('Error while fetching schema list'));
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+ }
+
+ fetchTables(schema: string) {
+ const { datasource } = this.state;
+
+ if (datasource && schema) {
+ this.setState(() => ({ tableLoading: true, tables: [] }));
+ const endpoint = encodeURI(
+ `/superset/tables/${datasource.value}/` +
+ `${encodeURIComponent(schema)}/undefined/false/`,
+ );
+ SupersetClient.get({ endpoint })
+ .then(({ json: tableJson = {} }) => {
+ const options = tableJson.options.map((o: option) => ({
+ value: o.value,
+ label: o.label,
+ }));
+ this.setState(() => ({
+ disableSelectTable: false,
+ tableLoading: false,
+ tables: options,
+ }));
+ })
+ .catch(e => {
+ this.setState(() => ({ tableLoading: false, tables: [] }));
+ this.props.addDangerToast(t('Error while fetching table list'));
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+ }
+
+ renderFields() {
+ const {
+ datasource,
+ datasources,
+ disableSelectSchema,
+ disableSelectTable,
+ schema,
+ schemaLoading,
+ schemas,
+ table,
+ tableLoading,
+ tables,
+ } = this.state;
+ const { onDatabaseChange, onSchemaChange, onTableChange } = this;
+
+ return (
+ <>
+ <FieldTitle>{t('datasource')}</FieldTitle>
+ <Select
+ clearable={false}
+ ignoreAccents={false}
+ name="select-datasource"
+ onChange={onDatabaseChange}
+ options={datasources}
+ placeholder={t('Select Datasource')}
+ value={datasource}
+ width={500}
Review comment:
can you pull this out into a reusable constant for all the Select components here?
or possibly even better, create a const at the top of the file for all the shared select params (`clearable`, `ignoreAccents`, `width`) and then object spread it for all the components here
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
+import withToasts from '../../messageToasts/enhancers/withToasts';
+
+type option = {
+ label: string;
+ value: string;
+};
+
+interface Props {
+ addDangerToast: (msg: string) => void;
+ addSuccessToast: (msg: string) => void;
+ onChange: any;
+ onDatasourceSave: any;
+ onHide: any;
+ show: boolean;
+}
+
+interface State {
+ datasource: option;
+ datasources: Array<option>;
+ disableSave: boolean;
+ disableSelectSchema: boolean;
+ disableSelectTable: boolean;
+ schema: option;
+ schemaLoading: boolean;
+ schemas: Array<option>;
+ table: option;
+ tableLoading: boolean;
Review comment:
naming nit: prefer `isTableLoading`
##########
File path: superset-frontend/src/views/datasetList/Modal.tsx
##########
@@ -0,0 +1,102 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { Modal as BaseModal } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
+import Button from './Button';
+
+type Callback = (...args: any[]) => void;
+
+interface Props {
+ children: React.ReactNode;
+ disableSave: boolean;
+ onHide: Callback;
+ onSave: Callback;
+ show: boolean;
+ title: string | React.ReactNode;
Review comment:
I believe a ReactNode already includes the `string` type, so i think you can remove that here
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
+import withToasts from '../../messageToasts/enhancers/withToasts';
+
+type option = {
+ label: string;
+ value: string;
+};
+
+interface Props {
+ addDangerToast: (msg: string) => void;
+ addSuccessToast: (msg: string) => void;
+ onChange: any;
+ onDatasourceSave: any;
+ onHide: any;
+ show: boolean;
+}
+
+interface State {
+ datasource: option;
+ datasources: Array<option>;
+ disableSave: boolean;
+ disableSelectSchema: boolean;
+ disableSelectTable: boolean;
+ schema: option;
+ schemaLoading: boolean;
+ schemas: Array<option>;
+ table: option;
+ tableLoading: boolean;
+ tables: Array<option>;
+}
+
+const FieldTitle = styled.p`
+ color: ${({ theme }) => theme.colors.secondary.light2};
+ font-size: ${({ theme }) => theme.typography.sizes.s};
+ margin: 20px 0 10px 0;
+ text-transform: uppercase;
+`;
+
+const StyledIcon = styled(Icon)`
+ margin: auto 10px auto 0;
+`;
+
+class DatasetModal extends React.PureComponent<Props, State> {
+ constructor(props: Props) {
+ super(props);
+
+ this.onDatabaseChange = this.onDatabaseChange.bind(this);
+ this.onSave = this.onSave.bind(this);
+ this.onSchemaChange = this.onSchemaChange.bind(this);
+ this.onTableChange = this.onTableChange.bind(this);
+ this.renderFields = this.renderFields.bind(this);
+ this.renderTitle = this.renderTitle.bind(this);
+ }
+
+ state: State = {
+ datasource: { label: 'Select Datasource', value: 'Select Datasource' },
+ datasources: [],
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ schemaLoading: false,
+ schemas: [],
+ table: { label: 'Select Table', value: 'Select Table' },
+ tableLoading: false,
+ tables: [],
+ };
+
+ componentDidMount() {
+ this.fetchDatabase();
+ }
+
+ onDatabaseChange(datasource: option) {
+ this.setState({
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schemas: [],
+ tables: [],
+ });
+ this.fetchSchemas(`${datasource.value}`);
+ this.setState({
+ datasource,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ table: { label: 'Select Table', value: 'Select Table' },
+ });
+ }
+
+ onSchemaChange(schema: option) {
+ this.setState({ tables: [], disableSelectTable: true, disableSave: true });
+ this.fetchTables(`${schema.value}`);
+ this.setState({ schema });
+ }
+
+ onTableChange(table: option) {
+ const { disableSelectSchema, disableSelectTable } = this.state;
+ const disableSave = disableSelectSchema || disableSelectTable;
+ this.setState({ table, disableSave });
+ }
+
+ onSave() {
+ const { datasource, schema, table } = this.state;
+ const { onHide, addSuccessToast, addDangerToast } = this.props;
+ const data = {
+ database: datasource.value,
+ schema: schema.value,
+ table_name: table.label,
+ };
+
+ SupersetClient.post({
+ endpoint: '/api/v1/dataset/',
+ body: JSON.stringify(data),
+ headers: { 'Content-Type': 'application/json' },
+ parseMethod: 'text',
+ })
+ .then(() => {
+ addSuccessToast(t('The dataset has been saved'));
+ onHide();
+ })
+ .catch(e => {
+ addDangerToast(t('Error while saving dataset'));
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+
+ fetchDatabase() {
+ SupersetClient.get({
+ endpoint: `/api/v1/dataset/related/database`,
+ })
+ .then(({ json: datasourcesJson = {} }) => {
+ const datasources = datasourcesJson.result.map(
+ ({ text, value }: { text: string; value: number }) => ({
+ label: text,
+ value: `${value}`,
+ }),
+ );
+ this.setState({ datasources });
+ })
+ .catch(e => {
+ this.props.addDangerToast(
+ t('An error occurred while fetching datasources'),
+ );
+ if (e) {
Review comment:
same comment about the if statement here
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
+import withToasts from '../../messageToasts/enhancers/withToasts';
+
+type option = {
+ label: string;
+ value: string;
+};
+
+interface Props {
+ addDangerToast: (msg: string) => void;
+ addSuccessToast: (msg: string) => void;
+ onChange: any;
+ onDatasourceSave: any;
+ onHide: any;
+ show: boolean;
+}
+
+interface State {
+ datasource: option;
+ datasources: Array<option>;
+ disableSave: boolean;
+ disableSelectSchema: boolean;
+ disableSelectTable: boolean;
+ schema: option;
+ schemaLoading: boolean;
+ schemas: Array<option>;
+ table: option;
+ tableLoading: boolean;
+ tables: Array<option>;
+}
+
+const FieldTitle = styled.p`
+ color: ${({ theme }) => theme.colors.secondary.light2};
+ font-size: ${({ theme }) => theme.typography.sizes.s};
+ margin: 20px 0 10px 0;
+ text-transform: uppercase;
+`;
+
+const StyledIcon = styled(Icon)`
+ margin: auto 10px auto 0;
+`;
+
+class DatasetModal extends React.PureComponent<Props, State> {
+ constructor(props: Props) {
+ super(props);
+
+ this.onDatabaseChange = this.onDatabaseChange.bind(this);
+ this.onSave = this.onSave.bind(this);
+ this.onSchemaChange = this.onSchemaChange.bind(this);
+ this.onTableChange = this.onTableChange.bind(this);
+ this.renderFields = this.renderFields.bind(this);
+ this.renderTitle = this.renderTitle.bind(this);
+ }
+
+ state: State = {
+ datasource: { label: 'Select Datasource', value: 'Select Datasource' },
+ datasources: [],
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ schemaLoading: false,
+ schemas: [],
+ table: { label: 'Select Table', value: 'Select Table' },
+ tableLoading: false,
+ tables: [],
+ };
+
+ componentDidMount() {
+ this.fetchDatabase();
+ }
+
+ onDatabaseChange(datasource: option) {
+ this.setState({
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schemas: [],
+ tables: [],
+ });
+ this.fetchSchemas(`${datasource.value}`);
+ this.setState({
+ datasource,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ table: { label: 'Select Table', value: 'Select Table' },
Review comment:
these labels should use `t` strings
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
+import withToasts from '../../messageToasts/enhancers/withToasts';
+
+type option = {
+ label: string;
+ value: string;
+};
+
+interface Props {
+ addDangerToast: (msg: string) => void;
+ addSuccessToast: (msg: string) => void;
+ onChange: any;
+ onDatasourceSave: any;
+ onHide: any;
+ show: boolean;
+}
+
+interface State {
+ datasource: option;
+ datasources: Array<option>;
+ disableSave: boolean;
+ disableSelectSchema: boolean;
+ disableSelectTable: boolean;
+ schema: option;
+ schemaLoading: boolean;
+ schemas: Array<option>;
+ table: option;
+ tableLoading: boolean;
+ tables: Array<option>;
+}
+
+const FieldTitle = styled.p`
+ color: ${({ theme }) => theme.colors.secondary.light2};
+ font-size: ${({ theme }) => theme.typography.sizes.s};
+ margin: 20px 0 10px 0;
+ text-transform: uppercase;
+`;
+
+const StyledIcon = styled(Icon)`
+ margin: auto 10px auto 0;
+`;
+
+class DatasetModal extends React.PureComponent<Props, State> {
+ constructor(props: Props) {
+ super(props);
+
+ this.onDatabaseChange = this.onDatabaseChange.bind(this);
+ this.onSave = this.onSave.bind(this);
+ this.onSchemaChange = this.onSchemaChange.bind(this);
+ this.onTableChange = this.onTableChange.bind(this);
+ this.renderFields = this.renderFields.bind(this);
+ this.renderTitle = this.renderTitle.bind(this);
+ }
+
+ state: State = {
+ datasource: { label: 'Select Datasource', value: 'Select Datasource' },
+ datasources: [],
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ schemaLoading: false,
+ schemas: [],
+ table: { label: 'Select Table', value: 'Select Table' },
Review comment:
all these labels should use `t` strings i think
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
+import withToasts from '../../messageToasts/enhancers/withToasts';
+
+type option = {
+ label: string;
+ value: string;
+};
+
+interface Props {
+ addDangerToast: (msg: string) => void;
+ addSuccessToast: (msg: string) => void;
+ onChange: any;
+ onDatasourceSave: any;
+ onHide: any;
+ show: boolean;
+}
+
+interface State {
+ datasource: option;
+ datasources: Array<option>;
+ disableSave: boolean;
+ disableSelectSchema: boolean;
+ disableSelectTable: boolean;
+ schema: option;
+ schemaLoading: boolean;
+ schemas: Array<option>;
+ table: option;
+ tableLoading: boolean;
+ tables: Array<option>;
+}
+
+const FieldTitle = styled.p`
+ color: ${({ theme }) => theme.colors.secondary.light2};
+ font-size: ${({ theme }) => theme.typography.sizes.s};
+ margin: 20px 0 10px 0;
+ text-transform: uppercase;
+`;
+
+const StyledIcon = styled(Icon)`
+ margin: auto 10px auto 0;
+`;
+
+class DatasetModal extends React.PureComponent<Props, State> {
+ constructor(props: Props) {
+ super(props);
+
+ this.onDatabaseChange = this.onDatabaseChange.bind(this);
+ this.onSave = this.onSave.bind(this);
+ this.onSchemaChange = this.onSchemaChange.bind(this);
+ this.onTableChange = this.onTableChange.bind(this);
+ this.renderFields = this.renderFields.bind(this);
+ this.renderTitle = this.renderTitle.bind(this);
+ }
+
+ state: State = {
+ datasource: { label: 'Select Datasource', value: 'Select Datasource' },
+ datasources: [],
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ schemaLoading: false,
+ schemas: [],
+ table: { label: 'Select Table', value: 'Select Table' },
+ tableLoading: false,
+ tables: [],
+ };
+
+ componentDidMount() {
+ this.fetchDatabase();
+ }
+
+ onDatabaseChange(datasource: option) {
+ this.setState({
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schemas: [],
+ tables: [],
+ });
+ this.fetchSchemas(`${datasource.value}`);
+ this.setState({
+ datasource,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ table: { label: 'Select Table', value: 'Select Table' },
+ });
+ }
+
+ onSchemaChange(schema: option) {
+ this.setState({ tables: [], disableSelectTable: true, disableSave: true });
+ this.fetchTables(`${schema.value}`);
+ this.setState({ schema });
+ }
+
+ onTableChange(table: option) {
+ const { disableSelectSchema, disableSelectTable } = this.state;
+ const disableSave = disableSelectSchema || disableSelectTable;
+ this.setState({ table, disableSave });
+ }
+
+ onSave() {
+ const { datasource, schema, table } = this.state;
+ const { onHide, addSuccessToast, addDangerToast } = this.props;
+ const data = {
+ database: datasource.value,
+ schema: schema.value,
+ table_name: table.label,
+ };
+
+ SupersetClient.post({
+ endpoint: '/api/v1/dataset/',
+ body: JSON.stringify(data),
+ headers: { 'Content-Type': 'application/json' },
+ parseMethod: 'text',
+ })
+ .then(() => {
+ addSuccessToast(t('The dataset has been saved'));
+ onHide();
+ })
+ .catch(e => {
+ addDangerToast(t('Error while saving dataset'));
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+
+ fetchDatabase() {
+ SupersetClient.get({
+ endpoint: `/api/v1/dataset/related/database`,
+ })
+ .then(({ json: datasourcesJson = {} }) => {
+ const datasources = datasourcesJson.result.map(
+ ({ text, value }: { text: string; value: number }) => ({
+ label: text,
+ value: `${value}`,
+ }),
+ );
+ this.setState({ datasources });
+ })
+ .catch(e => {
+ this.props.addDangerToast(
+ t('An error occurred while fetching datasources'),
+ );
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+
+ fetchSchemas(datasourceId: string) {
+ if (datasourceId) {
+ this.setState({ schemaLoading: true });
+ const endpoint = `/superset/schemas/${datasourceId}/false/`;
+ SupersetClient.get({ endpoint })
+ .then(({ json: schemaJson = {} }) => {
+ const schemas = schemaJson.schemas.map((s: string) => ({
+ value: s,
+ label: s,
+ }));
+ this.setState({
+ disableSelectSchema: false,
+ schemaLoading: false,
+ schemas,
+ });
+ })
+ .catch(e => {
+ this.setState({ schemaLoading: false, schemas: [] });
+ this.props.addDangerToast(t('Error while fetching schema list'));
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+ }
+
+ fetchTables(schema: string) {
+ const { datasource } = this.state;
+
+ if (datasource && schema) {
+ this.setState(() => ({ tableLoading: true, tables: [] }));
+ const endpoint = encodeURI(
+ `/superset/tables/${datasource.value}/` +
+ `${encodeURIComponent(schema)}/undefined/false/`,
Review comment:
why `undefined` and `false` here? That seems kinda odd
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
+import withToasts from '../../messageToasts/enhancers/withToasts';
+
+type option = {
+ label: string;
+ value: string;
+};
+
+interface Props {
+ addDangerToast: (msg: string) => void;
+ addSuccessToast: (msg: string) => void;
+ onChange: any;
+ onDatasourceSave: any;
+ onHide: any;
+ show: boolean;
+}
+
+interface State {
+ datasource: option;
+ datasources: Array<option>;
+ disableSave: boolean;
+ disableSelectSchema: boolean;
+ disableSelectTable: boolean;
+ schema: option;
+ schemaLoading: boolean;
+ schemas: Array<option>;
+ table: option;
+ tableLoading: boolean;
+ tables: Array<option>;
+}
+
+const FieldTitle = styled.p`
+ color: ${({ theme }) => theme.colors.secondary.light2};
+ font-size: ${({ theme }) => theme.typography.sizes.s};
+ margin: 20px 0 10px 0;
+ text-transform: uppercase;
+`;
+
+const StyledIcon = styled(Icon)`
+ margin: auto 10px auto 0;
+`;
+
+class DatasetModal extends React.PureComponent<Props, State> {
+ constructor(props: Props) {
+ super(props);
+
+ this.onDatabaseChange = this.onDatabaseChange.bind(this);
+ this.onSave = this.onSave.bind(this);
+ this.onSchemaChange = this.onSchemaChange.bind(this);
+ this.onTableChange = this.onTableChange.bind(this);
+ this.renderFields = this.renderFields.bind(this);
+ this.renderTitle = this.renderTitle.bind(this);
+ }
+
+ state: State = {
+ datasource: { label: 'Select Datasource', value: 'Select Datasource' },
+ datasources: [],
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ schemaLoading: false,
+ schemas: [],
+ table: { label: 'Select Table', value: 'Select Table' },
+ tableLoading: false,
+ tables: [],
+ };
+
+ componentDidMount() {
+ this.fetchDatabase();
+ }
+
+ onDatabaseChange(datasource: option) {
+ this.setState({
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schemas: [],
+ tables: [],
+ });
+ this.fetchSchemas(`${datasource.value}`);
+ this.setState({
+ datasource,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ table: { label: 'Select Table', value: 'Select Table' },
+ });
+ }
+
+ onSchemaChange(schema: option) {
+ this.setState({ tables: [], disableSelectTable: true, disableSave: true });
+ this.fetchTables(`${schema.value}`);
+ this.setState({ schema });
+ }
+
+ onTableChange(table: option) {
+ const { disableSelectSchema, disableSelectTable } = this.state;
+ const disableSave = disableSelectSchema || disableSelectTable;
+ this.setState({ table, disableSave });
+ }
+
+ onSave() {
+ const { datasource, schema, table } = this.state;
+ const { onHide, addSuccessToast, addDangerToast } = this.props;
+ const data = {
+ database: datasource.value,
+ schema: schema.value,
+ table_name: table.label,
+ };
+
+ SupersetClient.post({
+ endpoint: '/api/v1/dataset/',
+ body: JSON.stringify(data),
+ headers: { 'Content-Type': 'application/json' },
Review comment:
i'm shocked you need to define this header here, i'd think there'd be a param or flag to set this content type. Maybe take a look into the SupersetClient code and make sure. you might not even need to set it at all!
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
+import withToasts from '../../messageToasts/enhancers/withToasts';
+
+type option = {
+ label: string;
+ value: string;
+};
+
+interface Props {
+ addDangerToast: (msg: string) => void;
+ addSuccessToast: (msg: string) => void;
+ onChange: any;
+ onDatasourceSave: any;
+ onHide: any;
+ show: boolean;
+}
+
+interface State {
+ datasource: option;
+ datasources: Array<option>;
+ disableSave: boolean;
+ disableSelectSchema: boolean;
+ disableSelectTable: boolean;
+ schema: option;
+ schemaLoading: boolean;
+ schemas: Array<option>;
+ table: option;
+ tableLoading: boolean;
+ tables: Array<option>;
+}
+
+const FieldTitle = styled.p`
+ color: ${({ theme }) => theme.colors.secondary.light2};
+ font-size: ${({ theme }) => theme.typography.sizes.s};
+ margin: 20px 0 10px 0;
+ text-transform: uppercase;
+`;
+
+const StyledIcon = styled(Icon)`
+ margin: auto 10px auto 0;
+`;
+
+class DatasetModal extends React.PureComponent<Props, State> {
+ constructor(props: Props) {
+ super(props);
+
+ this.onDatabaseChange = this.onDatabaseChange.bind(this);
+ this.onSave = this.onSave.bind(this);
+ this.onSchemaChange = this.onSchemaChange.bind(this);
+ this.onTableChange = this.onTableChange.bind(this);
+ this.renderFields = this.renderFields.bind(this);
+ this.renderTitle = this.renderTitle.bind(this);
+ }
+
+ state: State = {
+ datasource: { label: 'Select Datasource', value: 'Select Datasource' },
+ datasources: [],
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ schemaLoading: false,
+ schemas: [],
+ table: { label: 'Select Table', value: 'Select Table' },
+ tableLoading: false,
+ tables: [],
+ };
+
+ componentDidMount() {
+ this.fetchDatabase();
+ }
+
+ onDatabaseChange(datasource: option) {
+ this.setState({
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schemas: [],
+ tables: [],
+ });
+ this.fetchSchemas(`${datasource.value}`);
+ this.setState({
+ datasource,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ table: { label: 'Select Table', value: 'Select Table' },
+ });
+ }
+
+ onSchemaChange(schema: option) {
+ this.setState({ tables: [], disableSelectTable: true, disableSave: true });
+ this.fetchTables(`${schema.value}`);
+ this.setState({ schema });
+ }
+
+ onTableChange(table: option) {
+ const { disableSelectSchema, disableSelectTable } = this.state;
+ const disableSave = disableSelectSchema || disableSelectTable;
+ this.setState({ table, disableSave });
+ }
+
+ onSave() {
+ const { datasource, schema, table } = this.state;
+ const { onHide, addSuccessToast, addDangerToast } = this.props;
+ const data = {
+ database: datasource.value,
+ schema: schema.value,
+ table_name: table.label,
+ };
+
+ SupersetClient.post({
+ endpoint: '/api/v1/dataset/',
+ body: JSON.stringify(data),
+ headers: { 'Content-Type': 'application/json' },
+ parseMethod: 'text',
+ })
+ .then(() => {
+ addSuccessToast(t('The dataset has been saved'));
+ onHide();
+ })
+ .catch(e => {
+ addDangerToast(t('Error while saving dataset'));
+ if (e) {
Review comment:
shouldn't `e` always be defined here? do you need this check?
##########
File path: superset-frontend/src/views/datasetList/Modal.tsx
##########
@@ -0,0 +1,102 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { Modal as BaseModal } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
+import Button from './Button';
+
+type Callback = (...args: any[]) => void;
Review comment:
This is probably reused in a bunch of different files, should we pull it out into a global types file?
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
+import withToasts from '../../messageToasts/enhancers/withToasts';
+
+type option = {
+ label: string;
+ value: string;
+};
+
+interface Props {
+ addDangerToast: (msg: string) => void;
+ addSuccessToast: (msg: string) => void;
+ onChange: any;
+ onDatasourceSave: any;
+ onHide: any;
+ show: boolean;
+}
+
+interface State {
+ datasource: option;
+ datasources: Array<option>;
+ disableSave: boolean;
+ disableSelectSchema: boolean;
+ disableSelectTable: boolean;
+ schema: option;
+ schemaLoading: boolean;
+ schemas: Array<option>;
+ table: option;
+ tableLoading: boolean;
+ tables: Array<option>;
+}
+
+const FieldTitle = styled.p`
+ color: ${({ theme }) => theme.colors.secondary.light2};
+ font-size: ${({ theme }) => theme.typography.sizes.s};
+ margin: 20px 0 10px 0;
+ text-transform: uppercase;
+`;
+
+const StyledIcon = styled(Icon)`
+ margin: auto 10px auto 0;
+`;
+
+class DatasetModal extends React.PureComponent<Props, State> {
+ constructor(props: Props) {
+ super(props);
+
+ this.onDatabaseChange = this.onDatabaseChange.bind(this);
+ this.onSave = this.onSave.bind(this);
+ this.onSchemaChange = this.onSchemaChange.bind(this);
+ this.onTableChange = this.onTableChange.bind(this);
+ this.renderFields = this.renderFields.bind(this);
+ this.renderTitle = this.renderTitle.bind(this);
+ }
+
+ state: State = {
+ datasource: { label: 'Select Datasource', value: 'Select Datasource' },
+ datasources: [],
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ schemaLoading: false,
+ schemas: [],
+ table: { label: 'Select Table', value: 'Select Table' },
+ tableLoading: false,
+ tables: [],
+ };
+
+ componentDidMount() {
+ this.fetchDatabase();
+ }
+
+ onDatabaseChange(datasource: option) {
+ this.setState({
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schemas: [],
+ tables: [],
+ });
+ this.fetchSchemas(`${datasource.value}`);
+ this.setState({
+ datasource,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ table: { label: 'Select Table', value: 'Select Table' },
+ });
+ }
+
+ onSchemaChange(schema: option) {
+ this.setState({ tables: [], disableSelectTable: true, disableSave: true });
+ this.fetchTables(`${schema.value}`);
+ this.setState({ schema });
+ }
+
+ onTableChange(table: option) {
+ const { disableSelectSchema, disableSelectTable } = this.state;
+ const disableSave = disableSelectSchema || disableSelectTable;
+ this.setState({ table, disableSave });
+ }
+
+ onSave() {
+ const { datasource, schema, table } = this.state;
+ const { onHide, addSuccessToast, addDangerToast } = this.props;
+ const data = {
+ database: datasource.value,
+ schema: schema.value,
+ table_name: table.label,
+ };
+
+ SupersetClient.post({
+ endpoint: '/api/v1/dataset/',
+ body: JSON.stringify(data),
+ headers: { 'Content-Type': 'application/json' },
+ parseMethod: 'text',
+ })
+ .then(() => {
+ addSuccessToast(t('The dataset has been saved'));
+ onHide();
+ })
+ .catch(e => {
+ addDangerToast(t('Error while saving dataset'));
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+
+ fetchDatabase() {
+ SupersetClient.get({
+ endpoint: `/api/v1/dataset/related/database`,
+ })
+ .then(({ json: datasourcesJson = {} }) => {
+ const datasources = datasourcesJson.result.map(
+ ({ text, value }: { text: string; value: number }) => ({
+ label: text,
+ value: `${value}`,
+ }),
+ );
+ this.setState({ datasources });
+ })
+ .catch(e => {
+ this.props.addDangerToast(
+ t('An error occurred while fetching datasources'),
+ );
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+
+ fetchSchemas(datasourceId: string) {
+ if (datasourceId) {
+ this.setState({ schemaLoading: true });
+ const endpoint = `/superset/schemas/${datasourceId}/false/`;
+ SupersetClient.get({ endpoint })
+ .then(({ json: schemaJson = {} }) => {
+ const schemas = schemaJson.schemas.map((s: string) => ({
+ value: s,
+ label: s,
+ }));
+ this.setState({
+ disableSelectSchema: false,
+ schemaLoading: false,
+ schemas,
+ });
+ })
+ .catch(e => {
+ this.setState({ schemaLoading: false, schemas: [] });
+ this.props.addDangerToast(t('Error while fetching schema list'));
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+ }
+
+ fetchTables(schema: string) {
+ const { datasource } = this.state;
+
+ if (datasource && schema) {
+ this.setState(() => ({ tableLoading: true, tables: [] }));
+ const endpoint = encodeURI(
+ `/superset/tables/${datasource.value}/` +
+ `${encodeURIComponent(schema)}/undefined/false/`,
+ );
+ SupersetClient.get({ endpoint })
+ .then(({ json: tableJson = {} }) => {
+ const options = tableJson.options.map((o: option) => ({
+ value: o.value,
+ label: o.label,
+ }));
+ this.setState(() => ({
+ disableSelectTable: false,
+ tableLoading: false,
+ tables: options,
+ }));
+ })
+ .catch(e => {
+ this.setState(() => ({ tableLoading: false, tables: [] }));
+ this.props.addDangerToast(t('Error while fetching table list'));
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+ }
+
+ renderFields() {
+ const {
+ datasource,
+ datasources,
+ disableSelectSchema,
+ disableSelectTable,
+ schema,
+ schemaLoading,
+ schemas,
+ table,
+ tableLoading,
+ tables,
+ } = this.state;
+ const { onDatabaseChange, onSchemaChange, onTableChange } = this;
Review comment:
is this a standard pattern in Superset? I've never seen it before, and am not necessarily opposed to it, but it does read a little weird
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
+import withToasts from '../../messageToasts/enhancers/withToasts';
+
+type option = {
+ label: string;
+ value: string;
+};
+
+interface Props {
+ addDangerToast: (msg: string) => void;
+ addSuccessToast: (msg: string) => void;
+ onChange: any;
+ onDatasourceSave: any;
+ onHide: any;
+ show: boolean;
+}
+
+interface State {
+ datasource: option;
+ datasources: Array<option>;
+ disableSave: boolean;
+ disableSelectSchema: boolean;
+ disableSelectTable: boolean;
+ schema: option;
+ schemaLoading: boolean;
+ schemas: Array<option>;
+ table: option;
+ tableLoading: boolean;
+ tables: Array<option>;
+}
+
+const FieldTitle = styled.p`
+ color: ${({ theme }) => theme.colors.secondary.light2};
+ font-size: ${({ theme }) => theme.typography.sizes.s};
+ margin: 20px 0 10px 0;
+ text-transform: uppercase;
+`;
+
+const StyledIcon = styled(Icon)`
+ margin: auto 10px auto 0;
+`;
+
+class DatasetModal extends React.PureComponent<Props, State> {
+ constructor(props: Props) {
+ super(props);
+
+ this.onDatabaseChange = this.onDatabaseChange.bind(this);
+ this.onSave = this.onSave.bind(this);
+ this.onSchemaChange = this.onSchemaChange.bind(this);
+ this.onTableChange = this.onTableChange.bind(this);
+ this.renderFields = this.renderFields.bind(this);
+ this.renderTitle = this.renderTitle.bind(this);
+ }
+
+ state: State = {
+ datasource: { label: 'Select Datasource', value: 'Select Datasource' },
+ datasources: [],
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ schemaLoading: false,
+ schemas: [],
+ table: { label: 'Select Table', value: 'Select Table' },
+ tableLoading: false,
+ tables: [],
+ };
+
+ componentDidMount() {
+ this.fetchDatabase();
+ }
+
+ onDatabaseChange(datasource: option) {
+ this.setState({
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schemas: [],
+ tables: [],
+ });
+ this.fetchSchemas(`${datasource.value}`);
+ this.setState({
+ datasource,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ table: { label: 'Select Table', value: 'Select Table' },
+ });
+ }
+
+ onSchemaChange(schema: option) {
+ this.setState({ tables: [], disableSelectTable: true, disableSave: true });
+ this.fetchTables(`${schema.value}`);
+ this.setState({ schema });
+ }
+
+ onTableChange(table: option) {
+ const { disableSelectSchema, disableSelectTable } = this.state;
+ const disableSave = disableSelectSchema || disableSelectTable;
+ this.setState({ table, disableSave });
+ }
+
+ onSave() {
+ const { datasource, schema, table } = this.state;
+ const { onHide, addSuccessToast, addDangerToast } = this.props;
+ const data = {
+ database: datasource.value,
+ schema: schema.value,
+ table_name: table.label,
+ };
+
+ SupersetClient.post({
+ endpoint: '/api/v1/dataset/',
+ body: JSON.stringify(data),
+ headers: { 'Content-Type': 'application/json' },
+ parseMethod: 'text',
+ })
+ .then(() => {
+ addSuccessToast(t('The dataset has been saved'));
+ onHide();
+ })
+ .catch(e => {
+ addDangerToast(t('Error while saving dataset'));
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+
+ fetchDatabase() {
+ SupersetClient.get({
+ endpoint: `/api/v1/dataset/related/database`,
+ })
+ .then(({ json: datasourcesJson = {} }) => {
+ const datasources = datasourcesJson.result.map(
+ ({ text, value }: { text: string; value: number }) => ({
+ label: text,
+ value: `${value}`,
Review comment:
this can just be `value`
##########
File path: superset-frontend/src/views/datasetList/DatasetModal.tsx
##########
@@ -0,0 +1,318 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { SupersetClient } from '@superset-ui/connection';
+import { t } from '@superset-ui/translation';
+import Icon from 'src/components/Icon';
+import Select from 'src/components/Select';
+import Modal from './Modal';
+
+import withToasts from '../../messageToasts/enhancers/withToasts';
+
+type option = {
+ label: string;
+ value: string;
+};
+
+interface Props {
+ addDangerToast: (msg: string) => void;
+ addSuccessToast: (msg: string) => void;
+ onChange: any;
+ onDatasourceSave: any;
+ onHide: any;
+ show: boolean;
+}
+
+interface State {
+ datasource: option;
+ datasources: Array<option>;
+ disableSave: boolean;
+ disableSelectSchema: boolean;
+ disableSelectTable: boolean;
+ schema: option;
+ schemaLoading: boolean;
+ schemas: Array<option>;
+ table: option;
+ tableLoading: boolean;
+ tables: Array<option>;
+}
+
+const FieldTitle = styled.p`
+ color: ${({ theme }) => theme.colors.secondary.light2};
+ font-size: ${({ theme }) => theme.typography.sizes.s};
+ margin: 20px 0 10px 0;
+ text-transform: uppercase;
+`;
+
+const StyledIcon = styled(Icon)`
+ margin: auto 10px auto 0;
+`;
+
+class DatasetModal extends React.PureComponent<Props, State> {
+ constructor(props: Props) {
+ super(props);
+
+ this.onDatabaseChange = this.onDatabaseChange.bind(this);
+ this.onSave = this.onSave.bind(this);
+ this.onSchemaChange = this.onSchemaChange.bind(this);
+ this.onTableChange = this.onTableChange.bind(this);
+ this.renderFields = this.renderFields.bind(this);
+ this.renderTitle = this.renderTitle.bind(this);
+ }
+
+ state: State = {
+ datasource: { label: 'Select Datasource', value: 'Select Datasource' },
+ datasources: [],
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ schemaLoading: false,
+ schemas: [],
+ table: { label: 'Select Table', value: 'Select Table' },
+ tableLoading: false,
+ tables: [],
+ };
+
+ componentDidMount() {
+ this.fetchDatabase();
+ }
+
+ onDatabaseChange(datasource: option) {
+ this.setState({
+ disableSave: true,
+ disableSelectSchema: true,
+ disableSelectTable: true,
+ schemas: [],
+ tables: [],
+ });
+ this.fetchSchemas(`${datasource.value}`);
+ this.setState({
+ datasource,
+ schema: { label: 'Select Schema', value: 'Select Schema' },
+ table: { label: 'Select Table', value: 'Select Table' },
+ });
+ }
+
+ onSchemaChange(schema: option) {
+ this.setState({ tables: [], disableSelectTable: true, disableSave: true });
+ this.fetchTables(`${schema.value}`);
+ this.setState({ schema });
+ }
+
+ onTableChange(table: option) {
+ const { disableSelectSchema, disableSelectTable } = this.state;
+ const disableSave = disableSelectSchema || disableSelectTable;
+ this.setState({ table, disableSave });
+ }
+
+ onSave() {
+ const { datasource, schema, table } = this.state;
+ const { onHide, addSuccessToast, addDangerToast } = this.props;
+ const data = {
+ database: datasource.value,
+ schema: schema.value,
+ table_name: table.label,
+ };
+
+ SupersetClient.post({
+ endpoint: '/api/v1/dataset/',
+ body: JSON.stringify(data),
+ headers: { 'Content-Type': 'application/json' },
+ parseMethod: 'text',
+ })
+ .then(() => {
+ addSuccessToast(t('The dataset has been saved'));
+ onHide();
+ })
+ .catch(e => {
+ addDangerToast(t('Error while saving dataset'));
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+
+ fetchDatabase() {
+ SupersetClient.get({
+ endpoint: `/api/v1/dataset/related/database`,
+ })
+ .then(({ json: datasourcesJson = {} }) => {
+ const datasources = datasourcesJson.result.map(
+ ({ text, value }: { text: string; value: number }) => ({
+ label: text,
+ value: `${value}`,
+ }),
+ );
+ this.setState({ datasources });
+ })
+ .catch(e => {
+ this.props.addDangerToast(
+ t('An error occurred while fetching datasources'),
+ );
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+
+ fetchSchemas(datasourceId: string) {
+ if (datasourceId) {
+ this.setState({ schemaLoading: true });
+ const endpoint = `/superset/schemas/${datasourceId}/false/`;
+ SupersetClient.get({ endpoint })
+ .then(({ json: schemaJson = {} }) => {
+ const schemas = schemaJson.schemas.map((s: string) => ({
+ value: s,
+ label: s,
+ }));
+ this.setState({
+ disableSelectSchema: false,
+ schemaLoading: false,
+ schemas,
+ });
+ })
+ .catch(e => {
+ this.setState({ schemaLoading: false, schemas: [] });
+ this.props.addDangerToast(t('Error while fetching schema list'));
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+ }
+
+ fetchTables(schema: string) {
+ const { datasource } = this.state;
+
+ if (datasource && schema) {
+ this.setState(() => ({ tableLoading: true, tables: [] }));
+ const endpoint = encodeURI(
+ `/superset/tables/${datasource.value}/` +
+ `${encodeURIComponent(schema)}/undefined/false/`,
+ );
+ SupersetClient.get({ endpoint })
+ .then(({ json: tableJson = {} }) => {
+ const options = tableJson.options.map((o: option) => ({
+ value: o.value,
+ label: o.label,
+ }));
+ this.setState(() => ({
+ disableSelectTable: false,
+ tableLoading: false,
+ tables: options,
+ }));
+ })
+ .catch(e => {
+ this.setState(() => ({ tableLoading: false, tables: [] }));
+ this.props.addDangerToast(t('Error while fetching table list'));
+ if (e) {
+ console.error(e);
+ }
+ });
+ }
+ }
+
+ renderFields() {
+ const {
+ datasource,
+ datasources,
+ disableSelectSchema,
+ disableSelectTable,
+ schema,
+ schemaLoading,
+ schemas,
+ table,
+ tableLoading,
+ tables,
+ } = this.state;
+ const { onDatabaseChange, onSchemaChange, onTableChange } = this;
+
+ return (
+ <>
+ <FieldTitle>{t('datasource')}</FieldTitle>
+ <Select
+ clearable={false}
+ ignoreAccents={false}
+ name="select-datasource"
+ onChange={onDatabaseChange}
+ options={datasources}
+ placeholder={t('Select Datasource')}
+ value={datasource}
+ width={500}
+ />
+ <FieldTitle>{t('schema')}</FieldTitle>
+ <Select
+ clearable={false}
+ ignoreAccents={false}
+ isDisabled={disableSelectSchema}
+ isLoading={schemaLoading}
+ name="select-schema"
+ onChange={onSchemaChange}
+ options={schemas}
+ placeholder={t('Select Schema')}
+ value={schema}
+ width={500}
+ />
+ <FieldTitle>{t('table')}</FieldTitle>
+ <Select
+ clearable={false}
+ ignoreAccents={false}
+ isDisabled={disableSelectTable}
+ isLoading={tableLoading}
+ name="select-table"
+ onChange={onTableChange}
+ options={tables}
+ placeholder={t('Select Table')}
+ value={table}
+ width={500}
+ />
+ </>
+ );
+ }
+
+ renderTitle() {
Review comment:
this seems a little unnecessary, maybe it's better to inline it on line 310 instead?
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org