This is an automated email from the ASF dual-hosted git repository.
pkdotson pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 9da7c1f7b8 feat: hack db connection modal ctabtns (#20017)
9da7c1f7b8 is described below
commit 9da7c1f7b83abea20e3620d5461a47dc4a2ab019
Author: Phillip Kelley-Dotson <[email protected]>
AuthorDate: Tue Jul 5 08:56:12 2022 -0700
feat: hack db connection modal ctabtns (#20017)
* add flow for dbconnmodal to datasetmodal
* fix bug
* second part
* fix dataset to sql lab
* fix lint
* more lint
* add key value
* fix type
* add new styling
* remove undefined from types
---
.../SqlLab/components/SqlEditorLeftBar/index.tsx | 26 ++++++++++++--
.../src/components/DatabaseSelector/index.tsx | 2 +-
.../src/components/TableSelector/index.tsx | 9 +++--
superset-frontend/src/utils/localStorageHelpers.ts | 2 ++
.../data/database/DatabaseModal/ModalHeader.tsx | 4 +--
.../CRUD/data/database/DatabaseModal/index.tsx | 40 ++++++++++++++++++++++
.../CRUD/data/database/DatabaseModal/styles.ts | 2 --
.../views/CRUD/data/dataset/AddDatasetModal.tsx | 14 ++++++++
.../src/views/CRUD/data/dataset/DatasetList.tsx | 7 ++++
9 files changed, 96 insertions(+), 10 deletions(-)
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index f742494654..ed0d99cfa1 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -25,6 +25,7 @@ import React, {
Dispatch,
SetStateAction,
} from 'react';
+import querystring from 'query-string';
import Button from 'src/components/Button';
import { t, styled, css, SupersetTheme } from '@superset-ui/core';
import Collapse from 'src/components/Collapse';
@@ -34,6 +35,11 @@ import { IconTooltip } from 'src/components/IconTooltip';
import { QueryEditor } from 'src/SqlLab/types';
import { DatabaseObject } from 'src/components/DatabaseSelector';
import { EmptyStateSmall } from 'src/components/EmptyState';
+import {
+ getItem,
+ LocalStorageKeys,
+ setItem,
+} from 'src/utils/localStorageHelpers';
import TableElement, { Table, TableElementProps } from '../TableElement';
interface ExtendedTable extends Table {
@@ -105,10 +111,26 @@ export default function SqlEditorLeftBar({
// that require and modify the queryEditor
const queryEditorRef = useRef<QueryEditor>(queryEditor);
const [emptyResultsWithSearch, setEmptyResultsWithSearch] = useState(false);
+ const [userSelectedDb, setUserSelected] = useState<DatabaseObject | null>(
+ null,
+ );
+
+ useEffect(() => {
+ const bool = querystring.parse(window.location.search).db;
+ const userSelected = getItem(
+ LocalStorageKeys.db,
+ null,
+ ) as DatabaseObject | null;
+
+ if (bool && userSelected) {
+ setUserSelected(userSelected);
+ setItem(LocalStorageKeys.db, null);
+ } else setUserSelected(database);
+ }, []);
useEffect(() => {
queryEditorRef.current = queryEditor;
- }, [queryEditor]);
+ }, [queryEditor, database]);
const onEmptyResults = (searchText?: string) => {
setEmptyResultsWithSearch(!!searchText);
@@ -222,7 +244,7 @@ export default function SqlEditorLeftBar({
<TableSelectorMultiple
onEmptyResults={onEmptyResults}
emptyState={emptyStateComponent}
- database={database}
+ database={userSelectedDb}
getDbList={actions.setDatabases}
handleError={actions.addDangerToast}
onDbChange={onDbChange}
diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx
b/superset-frontend/src/components/DatabaseSelector/index.tsx
index 718177a139..4a5e94b2bc 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -87,7 +87,7 @@ export type DatabaseObject = {
type SchemaValue = { label: string; value: string };
export interface DatabaseSelectorProps {
- db?: DatabaseObject;
+ db?: DatabaseObject | null;
emptyState?: ReactNode;
formMode?: boolean;
getDbList?: (arg0: any) => {};
diff --git a/superset-frontend/src/components/TableSelector/index.tsx
b/superset-frontend/src/components/TableSelector/index.tsx
index fcc5dbe10d..d7b867347a 100644
--- a/superset-frontend/src/components/TableSelector/index.tsx
+++ b/superset-frontend/src/components/TableSelector/index.tsx
@@ -81,7 +81,7 @@ const TableLabel = styled.span`
interface TableSelectorProps {
clearable?: boolean;
- database?: DatabaseObject;
+ database?: DatabaseObject | null;
emptyState?: ReactNode;
formMode?: boolean;
getDbList?: (arg0: any) => {};
@@ -166,12 +166,11 @@ const TableSelector:
FunctionComponent<TableSelectorProps> = ({
onTableSelectChange,
}) => {
const [currentDatabase, setCurrentDatabase] = useState<
- DatabaseObject | undefined
+ DatabaseObject | null | undefined
>(database);
const [currentSchema, setCurrentSchema] = useState<string | undefined>(
schema,
);
-
const [tableOptions, setTableOptions] = useState<TableOption[]>([]);
const [tableSelectValue, setTableSelectValue] = useState<
SelectValue | undefined
@@ -190,6 +189,10 @@ const TableSelector: FunctionComponent<TableSelectorProps>
= ({
}
}, [database, tableSelectMode]);
+ useEffect(() => {
+ setCurrentDatabase(database);
+ }, [database]);
+
useEffect(() => {
if (tableSelectMode === 'single') {
setTableSelectValue(
diff --git a/superset-frontend/src/utils/localStorageHelpers.ts
b/superset-frontend/src/utils/localStorageHelpers.ts
index 482f413372..28de043200 100644
--- a/superset-frontend/src/utils/localStorageHelpers.ts
+++ b/superset-frontend/src/utils/localStorageHelpers.ts
@@ -31,6 +31,7 @@ export enum LocalStorageKeys {
* and therefore should be done in a major release.
*/
filter_box_transition_snoozed_at = 'filter_box_transition_snoozed_at',
+ db = 'db',
chart_split_sizes = 'chart_split_sizes',
controls_width = 'controls_width',
datasource_width = 'datasource_width',
@@ -54,6 +55,7 @@ export enum LocalStorageKeys {
export type LocalStorageValues = {
filter_box_transition_snoozed_at: Record<number, number>;
+ db: object | null;
chart_split_sizes: [number, number];
controls_width: number;
datasource_width: number;
diff --git
a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
index 7cdcbaba28..2ec124c341 100644
---
a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
+++
b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
@@ -109,8 +109,8 @@ const ModalHeader = ({
<StyledFormHeader>
<p className="helper-top"> STEP 3 OF 3 </p>
<h4 className="step-3-text">
- Your database was successfully connected! Here are some optional
- settings for your database
+ Your database was successfully connected! Create a dataset to begin
+ visualizing your data as a chart or go to SQL Lab to query your data.
</h4>
<p className="helper-bottom">
Need help? Learn more about{' '}
diff --git
a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
index fbe05ad318..3e681243a0 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -31,6 +31,7 @@ import React, {
useReducer,
Reducer,
} from 'react';
+import { setItem, LocalStorageKeys } from 'src/utils/localStorageHelpers';
import { UploadChangeParam, UploadFile } from 'antd/lib/upload/interface';
import Tabs from 'src/components/Tabs';
import { AntdSelect, Upload } from 'src/components';
@@ -191,6 +192,11 @@ type DBReducerActionType =
};
};
+const StyledBtns = styled.div`
+ margin-bottom: ${({ theme }) => theme.gridUnit * 3}px;
+ margin-left: ${({ theme }) => theme.gridUnit * 3}px;
+`;
+
function dbReducer(
state: Partial<DatabaseObject> | null,
action: DBReducerActionType,
@@ -1109,6 +1115,39 @@ const DatabaseModal:
FunctionComponent<DatabaseModalProps> = ({
return <></>;
};
+ const fetchAndSetDB = () => {
+ setLoading(true);
+ fetchResource(dbFetched?.id as number).then(r => {
+ setItem(LocalStorageKeys.db, r);
+ });
+ };
+
+ const renderCTABtns = () => (
+ <StyledBtns>
+ <Button
+ // eslint-disable-next-line no-return-assign
+ buttonStyle="default"
+ onClick={() => {
+ fetchAndSetDB();
+ window.location.href = '/tablemodelview/list';
+ }}
+ >
+ {' '}
+ {t('CREATE A DATASET')}{' '}
+ </Button>
+ <Button
+ buttonStyle="default"
+ // eslint-disable-next-line no-return-assign
+ onClick={() => {
+ fetchAndSetDB();
+ window.location.href = `/superset/sqllab/?db=true`;
+ }}
+ >
+ {t('QUERY DATA IN SQL LAB')}{' '}
+ </Button>
+ </StyledBtns>
+ );
+
const renderFinishState = () => {
if (!editNewDb) {
return (
@@ -1440,6 +1479,7 @@ const DatabaseModal:
FunctionComponent<DatabaseModalProps> = ({
dbModel={dbModel}
editNewDb={editNewDb}
/>
+ {renderCTABtns()}
{renderFinishState()}
</>
) : (
diff --git
a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
index d3d0b11dd7..de482a7eef 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -40,8 +40,6 @@ export const marginBottom = (theme: SupersetTheme) => css`
`;
export const StyledFormHeader = styled.header`
- border-bottom: ${({ theme }) => `${theme.gridUnit * 0.25}px solid
- ${theme.colors.grayscale.light2};`}
padding: ${({ theme }) => theme.gridUnit * 2}px
${({ theme }) => theme.gridUnit * 4}px;
line-height: ${({ theme }) => theme.gridUnit * 6}px;
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDatasetModal.tsx
b/superset-frontend/src/views/CRUD/data/dataset/AddDatasetModal.tsx
index 10a3b7bb77..dd05e25a9e 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDatasetModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDatasetModal.tsx
@@ -23,6 +23,11 @@ import Modal from 'src/components/Modal';
import TableSelector from 'src/components/TableSelector';
import withToasts from 'src/components/MessageToasts/withToasts';
import { DatabaseObject } from 'src/components/DatabaseSelector';
+import {
+ getItem,
+ LocalStorageKeys,
+ setItem,
+} from 'src/utils/localStorageHelpers';
type DatasetAddObject = {
id: number;
@@ -69,6 +74,14 @@ const DatasetModal: FunctionComponent<DatasetModalProps> = ({
setDisableSave(currentDatabase === undefined || currentTableName === '');
}, [currentTableName, currentDatabase]);
+ useEffect(() => {
+ const currentUserSelectedDb = getItem(
+ LocalStorageKeys.db,
+ null,
+ ) as DatabaseObject;
+ if (currentUserSelectedDb) setCurrentDatabase(currentUserSelectedDb);
+ }, []);
+
const onDbChange = (db: DatabaseObject) => {
setCurrentDatabase(db);
};
@@ -89,6 +102,7 @@ const DatasetModal: FunctionComponent<DatasetModalProps> = ({
};
const hide = () => {
+ setItem(LocalStorageKeys.db, null);
clearModal();
onHide();
};
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx
b/superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx
index 7dd59271e2..c5b182871f 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx
@@ -31,6 +31,7 @@ import {
createFetchDistinct,
createErrorHandler,
} from 'src/views/CRUD/utils';
+import { getItem, LocalStorageKeys } from 'src/utils/localStorageHelpers';
import { ColumnObject } from 'src/views/CRUD/data/dataset/types';
import { useListViewResource } from 'src/views/CRUD/hooks';
import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
@@ -180,6 +181,12 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
hasPerm('can_export') && isFeatureEnabled(FeatureFlag.VERSIONED_EXPORT);
const initialSort = SORT_BY;
+ useEffect(() => {
+ const db = getItem(LocalStorageKeys.db, null);
+ if (!loading && db) {
+ setDatasetAddModalOpen(true);
+ }
+ }, [loading]);
const openDatasetEditModal = useCallback(
({ id }: Dataset) => {
