mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -04:00
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
This commit is contained in:
parent
4137fe03a0
commit
9da7c1f7b8
@ -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}
|
||||
|
@ -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) => {};
|
||||
|
@ -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(
|
||||
|
@ -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;
|
||||
|
@ -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{' '}
|
||||
|
@ -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()}
|
||||
</>
|
||||
) : (
|
||||
|
@ -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;
|
||||
|
@ -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();
|
||||
};
|
||||
|
@ -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) => {
|
||||
|
Loading…
Reference in New Issue
Block a user