pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: Changes the DatabaseSelector and TableSelector to use the new Select component (#16483)

This commit is contained in:
Michael S. Molina 2021-09-22 07:43:46 -03:00 committed by GitHub
parent 1d5100daa2
commit 596e1cdf9b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 738 additions and 874 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
superset-frontend/spec/javascripts/sqllab/SqlEditorLeftBar_spec.jsx
View File

@ -81,9 +81,13 @@ describe('Left Panel Expansion', () => {
</Provider>
</ThemeProvider>,
);
const dbSelect = screen.getByText(/select a database/i);
const schemaSelect = screen.getByText(/select a schema \(0\)/i);
const dropdown = screen.getByText(/Select table/i);
const dbSelect = screen.getByRole('combobox', {
name: 'Select database or type database name',
});
const schemaSelect = screen.getByRole('combobox', {
name: 'Select schema or type schema name',
});
const dropdown = screen.getByText(/Select table or type table name/i);
const abUser = screen.getByText(/ab_user/i);
expect(dbSelect).toBeInTheDocument();
expect(schemaSelect).toBeInTheDocument();

4
superset-frontend/spec/javascripts/sqllab/SqlEditor_spec.jsx
View File

@ -36,13 +36,14 @@ import { Dropdown } from 'src/common/components';
import {
queryEditorSetFunctionNames,
queryEditorSetSelectedText,
queryEditorSetSchemaOptions,
} from 'src/SqlLab/actions/sqlLab';
import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
import { initialState, queries, table } from './fixtures';
const MOCKED_SQL_EDITOR_HEIGHT = 500;
fetchMock.get('glob:*/api/v1/database/*', {});
fetchMock.get('glob:*/api/v1/database/*', { result: [] });
const middlewares = [thunk];
const mockStore = configureStore(middlewares);
@ -53,6 +54,7 @@ describe('SqlEditor', () => {
actions: {
queryEditorSetFunctionNames,
queryEditorSetSelectedText,
queryEditorSetSchemaOptions,
addDangerToast: jest.fn(),
},
database: {},

9
superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx
View File

@ -91,7 +91,13 @@ export default class SqlEditorLeftBar extends React.PureComponent {
}
onTableChange(tableName, schemaName) {
this.props.actions.addTable(this.props.queryEditor, tableName, schemaName);
if (tableName && schemaName) {
this.props.actions.addTable(
this.props.queryEditor,
tableName,
schemaName,
);
}
}
onToggleTable(tables) {
@ -171,7 +177,6 @@ export default class SqlEditorLeftBar extends React.PureComponent {
onTablesLoad={this.onTablesLoad}
schema={qe.schema}
sqlLabMode
tableNameSticky={false}
/>
<div className="divider" />
<StyledScrollbarContainer>

9
superset-frontend/src/components/CertifiedIcon/index.tsx
View File

@ -18,19 +18,19 @@
*/
import React from 'react';
import { t, supersetTheme } from '@superset-ui/core';
import Icons from 'src/components/Icons';
import Icons, { IconType } from 'src/components/Icons';
import { Tooltip } from 'src/components/Tooltip';
export interface CertifiedIconProps {
certifiedBy?: string;
details?: string;
size?: number;
size?: IconType['iconSize'];
}
function CertifiedIcon({
certifiedBy,
details,
size = 24,
size = 'l',
}: CertifiedIconProps) {
return (
<Tooltip
@ -48,8 +48,7 @@ function CertifiedIcon({
>
<Icons.Certified
iconColor={supersetTheme.colors.primary.base}
height={size}
width={size}
iconSize={size}
/>
</Tooltip>
);

119
superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
View File

@ -26,11 +26,11 @@ import DatabaseSelector from '.';
const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
const createProps = () => ({
dbId: 1,
db: { id: 1, database_name: 'test', backend: 'test-postgresql' },
formMode: false,
isDatabaseSelectEnabled: true,
readOnly: false,
schema: 'public',
schema: undefined,
sqlLabMode: true,
getDbList: jest.fn(),
getTableList: jest.fn(),
@ -57,9 +57,9 @@ beforeEach(() => {
}
return {
json: {
count: 1,
count: 2,
description_columns: {},
ids: [1],
ids: [1, 2],
label_columns: {
allow_csv_upload: 'Allow Csv Upload',
allow_ctas: 'Allow Ctas',
@ -129,12 +129,32 @@ beforeEach(() => {
changed_on: '2021-03-09T19:02:07.141095',
changed_on_delta_humanized: 'a day ago',
created_by: null,
database_name: 'examples',
database_name: 'test-postgres',
explore_database_id: 1,
expose_in_sqllab: true,
force_ctas_schema: null,
id: 1,
},
{
allow_csv_upload: false,
allow_ctas: false,
allow_cvas: false,
allow_dml: false,
allow_multi_schema_metadata_fetch: false,
allow_run_async: false,
allows_cost_estimate: null,
allows_subquery: true,
allows_virtual_table_explore: true,
backend: 'mysql',
changed_on: '2021-03-09T19:02:07.141095',
changed_on_delta_humanized: 'a day ago',
created_by: null,
database_name: 'test-mysql',
explore_database_id: 1,
expose_in_sqllab: true,
force_ctas_schema: null,
id: 2,
},
],
},
} as any;
@ -153,50 +173,95 @@ test('Refresh should work', async () => {
render(<DatabaseSelector {...props} />);
const select = screen.getByRole('combobox', {
name: 'Select schema or type schema name',
});
userEvent.click(select);
await waitFor(() => {
expect(SupersetClientGet).toBeCalledTimes(2);
expect(props.getDbList).toBeCalledTimes(1);
expect(SupersetClientGet).toBeCalledTimes(1);
expect(props.getDbList).toBeCalledTimes(0);
expect(props.getTableList).toBeCalledTimes(0);
expect(props.handleError).toBeCalledTimes(0);
expect(props.onDbChange).toBeCalledTimes(0);
expect(props.onSchemaChange).toBeCalledTimes(0);
expect(props.onSchemasLoad).toBeCalledTimes(1);
expect(props.onSchemasLoad).toBeCalledTimes(0);
expect(props.onUpdate).toBeCalledTimes(0);
});
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('button', { name: 'refresh' }));
await waitFor(() => {
expect(SupersetClientGet).toBeCalledTimes(3);
expect(props.getDbList).toBeCalledTimes(1);
expect(SupersetClientGet).toBeCalledTimes(2);
expect(props.getDbList).toBeCalledTimes(0);
expect(props.getTableList).toBeCalledTimes(0);
expect(props.handleError).toBeCalledTimes(0);
expect(props.onDbChange).toBeCalledTimes(1);
expect(props.onSchemaChange).toBeCalledTimes(1);
expect(props.onDbChange).toBeCalledTimes(0);
expect(props.onSchemaChange).toBeCalledTimes(0);
expect(props.onSchemasLoad).toBeCalledTimes(2);
expect(props.onUpdate).toBeCalledTimes(1);
expect(props.onUpdate).toBeCalledTimes(0);
});
});
test('Should database select display options', async () => {
const props = createProps();
render(<DatabaseSelector {...props} />);
const selector = await screen.findByText('Database:');
expect(selector).toBeInTheDocument();
expect(selector.parentElement).toHaveTextContent(
'Database:postgresql examples',
);
const select = screen.getByRole('combobox', {
name: 'Select database or type database name',
});
expect(select).toBeInTheDocument();
userEvent.click(select);
expect(await screen.findByText('test-mysql')).toBeInTheDocument();
});
test('Should schema select display options', async () => {
const props = createProps();
render(<DatabaseSelector {...props} />);
const selector = await screen.findByText('Schema:');
expect(selector).toBeInTheDocument();
expect(selector.parentElement).toHaveTextContent('Schema: public');
userEvent.click(screen.getByRole('button'));
expect(await screen.findByText('Select a schema (2)')).toBeInTheDocument();
const select = screen.getByRole('combobox', {
name: 'Select schema or type schema name',
});
expect(select).toBeInTheDocument();
userEvent.click(select);
expect(
await screen.findByRole('option', { name: 'public' }),
).toBeInTheDocument();
expect(
await screen.findByRole('option', { name: 'information_schema' }),
).toBeInTheDocument();
});
test('Sends the correct db when changing the database', async () => {
const props = createProps();
render(<DatabaseSelector {...props} />);
const select = screen.getByRole('combobox', {
name: 'Select database or type database name',
});
expect(select).toBeInTheDocument();
userEvent.click(select);
userEvent.click(await screen.findByText('test-mysql'));
await waitFor(() =>
expect(props.onDbChange).toHaveBeenCalledWith(
expect.objectContaining({
id: 2,
database_name: 'test-mysql',
backend: 'mysql',
}),
),
);
});
test('Sends the correct schema when changing the schema', async () => {
const props = createProps();
render(<DatabaseSelector {...props} />);
const select = screen.getByRole('combobox', {
name: 'Select schema or type schema name',
});
expect(select).toBeInTheDocument();
userEvent.click(select);
const schemaOption = await screen.findAllByText('information_schema');
userEvent.click(schemaOption[1]);
await waitFor(() =>
expect(props.onSchemaChange).toHaveBeenCalledWith('information_schema'),
);
});

369
superset-frontend/src/components/DatabaseSelector/index.tsx
View File

@ -16,80 +16,94 @@
* specific language governing permissions and limitations
* under the License.
*/
import React, { ReactNode, useEffect, useState } from 'react';
import React, { ReactNode, useState, useMemo, useEffect } from 'react';
import { styled, SupersetClient, t } from '@superset-ui/core';
import rison from 'rison';
import { Select } from 'src/components/Select';
import { Select } from 'src/components';
import Label from 'src/components/Label';
import { FormLabel } from 'src/components/Form';
import RefreshLabel from 'src/components/RefreshLabel';
import SupersetAsyncSelect from 'src/components/AsyncSelect';
const FieldTitle = styled.p`
color: ${({ theme }) => theme.colors.secondary.light2};
font-size: ${({ theme }) => theme.typography.sizes.s}px;
margin: 20px 0 10px 0;
text-transform: uppercase;
`;
const DatabaseSelectorWrapper = styled.div`
.fa-refresh {
padding-left: 9px;
}
${({ theme }) => `
.refresh {
display: flex;
align-items: center;
width: 30px;
margin-left: ${theme.gridUnit}px;
margin-top: ${theme.gridUnit * 5}px;
}
.refresh-col {
display: flex;
align-items: center;
width: 30px;
margin-left: ${({ theme }) => theme.gridUnit}px;
}
.section {
display: flex;
flex-direction: row;
align-items: center;
}
.section {
padding-bottom: 5px;
display: flex;
flex-direction: row;
}
.select {
flex: 1;
}
.select {
flex-grow: 1;
}
& > div {
margin-bottom: ${theme.gridUnit * 4}px;
}
`}
`;
const DatabaseOption = styled.span`
display: inline-flex;
const LabelStyle = styled.div`
display: flex;
flex-direction: row;
align-items: center;
margin-left: ${({ theme }) => theme.gridUnit - 2}px;
`;
type DatabaseValue = {
label: React.ReactNode;
value: number;
id: number;
database_name: string;
backend: string;
};
type SchemaValue = { label: string; value: string };
interface DatabaseSelectorProps {
dbId: number;
db?: { id: number; database_name: string; backend: string };
formMode?: boolean;
getDbList?: (arg0: any) => {};
getTableList?: (dbId: number, schema: string, force: boolean) => {};
handleError: (msg: string) => void;
isDatabaseSelectEnabled?: boolean;
onDbChange?: (db: any) => void;
onSchemaChange?: (arg0?: any) => {};
onDbChange?: (db: {
id: number;
database_name: string;
backend: string;
}) => void;
onSchemaChange?: (schema?: string) => void;
onSchemasLoad?: (schemas: Array<object>) => void;
readOnly?: boolean;
schema?: string;
sqlLabMode?: boolean;
onUpdate?: ({
dbId,
schema,
}: {
dbId: number;
schema?: string;
tableName?: string;
}) => void;
}
const SelectLabel = ({
backend,
databaseName,
}: {
backend: string;
databaseName: string;
}) => (
<LabelStyle>
<Label>{backend}</Label>
{databaseName}
</LabelStyle>
);
export default function DatabaseSelector({
dbId,
db,
formMode = false,
getDbList,
getTableList,
handleError,
isDatabaseSelectEnabled = true,
onUpdate,
onDbChange,
onSchemaChange,
onSchemasLoad,
@ -97,193 +111,188 @@ export default function DatabaseSelector({
schema,
sqlLabMode = false,
}: DatabaseSelectorProps) {
const [currentDbId, setCurrentDbId] = useState(dbId);
const [currentSchema, setCurrentSchema] = useState<string | undefined>(
schema,
const [loadingSchemas, setLoadingSchemas] = useState(false);
const [schemaOptions, setSchemaOptions] = useState<SchemaValue[]>([]);
const [currentDb, setCurrentDb] = useState<DatabaseValue | undefined>(
db
? {
label: (
<SelectLabel backend={db.backend} databaseName={db.database_name} />
),
value: db.id,
...db,
}
: undefined,
);
const [schemaLoading, setSchemaLoading] = useState(false);
const [schemaOptions, setSchemaOptions] = useState([]);
const [currentSchema, setCurrentSchema] = useState<SchemaValue | undefined>(
schema ? { label: schema, value: schema } : undefined,
);
const [refresh, setRefresh] = useState(0);
function fetchSchemas(databaseId: number, forceRefresh = false) {
const actualDbId = databaseId || dbId;
if (actualDbId) {
setSchemaLoading(true);
const loadDatabases = useMemo(
() => async (
search: string,
page: number,
pageSize: number,
): Promise<{
data: DatabaseValue[];
totalCount: number;
}> => {
const queryParams = rison.encode({
force: Boolean(forceRefresh),
order_columns: 'database_name',
order_direction: 'asc',
page,
page_size: pageSize,
...(formMode || !sqlLabMode
? { filters: [{ col: 'database_name', opr: 'ct', value: search }] }
: {
filters: [
{ col: 'database_name', opr: 'ct', value: search },
{
col: 'expose_in_sqllab',
opr: 'eq',
value: true,
},
],
}),
});
const endpoint = `/api/v1/database/${actualDbId}/schemas/?q=${queryParams}`;
return SupersetClient.get({ endpoint })
.then(({ json }) => {
const options = json.result.map((s: string) => ({
value: s,
label: s,
title: s,
}));
setSchemaOptions(options);
setSchemaLoading(false);
const endpoint = `/api/v1/database/?q=${queryParams}`;
return SupersetClient.get({ endpoint }).then(({ json }) => {
const { result } = json;
if (getDbList) {
getDbList(result);
}
if (result.length === 0) {
handleError(t("It seems you don't have access to any database"));
}
const options = result.map(
(row: { id: number; database_name: string; backend: string }) => ({
label: (
<SelectLabel
backend={row.backend}
databaseName={row.database_name}
/>
),
value: row.id,
id: row.id,
database_name: row.database_name,
backend: row.backend,
}),
);
return {
data: options,
totalCount: options.length,
};
});
},
[formMode, getDbList, handleError, sqlLabMode],
);
useEffect(() => {
if (currentDb) {
setLoadingSchemas(true);
const queryParams = rison.encode({ force: refresh > 0 });
const endpoint = `/api/v1/database/${currentDb.value}/schemas/?q=${queryParams}`;
try {
// TODO: Would be nice to add pagination in a follow-up. Needs endpoint changes.
SupersetClient.get({ endpoint }).then(({ json }) => {
const options = json.result
.map((s: string) => ({
value: s,
label: s,
title: s,
}))
.sort((a: { label: string }, b: { label: string }) =>
a.label.localeCompare(b.label),
);
if (onSchemasLoad) {
onSchemasLoad(options);
}
})
.catch(() => {
setSchemaOptions([]);
setSchemaLoading(false);
handleError(t('Error while fetching schema list'));
setSchemaOptions(options);
});
} finally {
setLoadingSchemas(false);
}
}
return Promise.resolve();
}
}, [currentDb, onSchemasLoad, refresh]);
useEffect(() => {
if (currentDbId) {
fetchSchemas(currentDbId);
}
}, [currentDbId]);
function onSelectChange({ dbId, schema }: { dbId: number; schema?: string }) {
setCurrentDbId(dbId);
setCurrentSchema(schema);
if (onUpdate) {
onUpdate({ dbId, schema, tableName: undefined });
}
}
function dbMutator(data: any) {
if (getDbList) {
getDbList(data.result);
}
if (data.result.length === 0) {
handleError(t("It seems you don't have access to any database"));
}
return data.result.map((row: any) => ({
...row,
// label is used for the typeahead
label: `${row.backend} ${row.database_name}`,
}));
}
function changeDataBase(db: any, force = false) {
const dbId = db ? db.id : null;
setSchemaOptions([]);
if (onSchemaChange) {
onSchemaChange(null);
}
function changeDataBase(
value: { label: string; value: number },
database: DatabaseValue,
) {
setCurrentDb(database);
setCurrentSchema(undefined);
if (onDbChange) {
onDbChange(db);
onDbChange(database);
}
fetchSchemas(dbId, force);
onSelectChange({ dbId, schema: undefined });
}
function changeSchema(schemaOpt: any, force = false) {
const schema = schemaOpt ? schemaOpt.value : null;
if (onSchemaChange) {
onSchemaChange(schema);
}
setCurrentSchema(schema);
onSelectChange({ dbId: currentDbId, schema });
if (getTableList) {
getTableList(currentDbId, schema, force);
onSchemaChange(undefined);
}
}
function renderDatabaseOption(db: any) {
return (
<DatabaseOption title={db.database_name}>
<Label type="default">{db.backend}</Label> {db.database_name}
</DatabaseOption>
);
function changeSchema(schema: SchemaValue) {
setCurrentSchema(schema);
if (onSchemaChange) {
onSchemaChange(schema.value);
}
}
function renderSelectRow(select: ReactNode, refreshBtn: ReactNode) {
return (
<div className="section">
<span className="select">{select}</span>
<span className="refresh-col">{refreshBtn}</span>
<span className="refresh">{refreshBtn}</span>
</div>
);
}
function renderDatabaseSelect() {
const queryParams = rison.encode({
order_columns: 'database_name',
order_direction: 'asc',
page: 0,
page_size: -1,
...(formMode || !sqlLabMode
? {}
: {
filters: [
{
col: 'expose_in_sqllab',
opr: 'eq',
value: true,
},
],
}),
});
return renderSelectRow(
<SupersetAsyncSelect
<Select
ariaLabel={t('Select database or type database name')}
data-test="select-database"
dataEndpoint={`/api/v1/database/?q=${queryParams}`}
onChange={(db: any) => changeDataBase(db)}
onAsyncError={() =>
handleError(t('Error while fetching database list'))
}
clearable={false}
value={currentDbId}
valueKey="id"
valueRenderer={(db: any) => (
<div>
<span className="text-muted m-r-5">{t('Database:')}</span>
{renderDatabaseOption(db)}
</div>
)}
optionRenderer={renderDatabaseOption}
mutator={dbMutator}
placeholder={t('Select a database')}
autoSelect
isDisabled={!isDatabaseSelectEnabled || readOnly}
header={<FormLabel>{t('Database')}</FormLabel>}
onChange={changeDataBase}
value={currentDb}
placeholder={t('Select database or type database name')}
disabled={!isDatabaseSelectEnabled || readOnly}
options={loadDatabases}
/>,
null,
);
}
function renderSchemaSelect() {
const value = schemaOptions.filter(({ value }) => currentSchema === value);
const refresh = !formMode && !readOnly && (
const refreshIcon = !formMode && !readOnly && (
<RefreshLabel
onClick={() => changeDataBase({ id: dbId }, true)}
onClick={() => setRefresh(refresh + 1)}
tooltipContent={t('Force refresh schema list')}
/>
);
return renderSelectRow(
<Select
ariaLabel={t('Select schema or type schema name')}
disabled={readOnly}
header={<FormLabel>{t('Schema')}</FormLabel>}
labelInValue
lazyLoading={false}
loading={loadingSchemas}
name="select-schema"
placeholder={t('Select a schema (%s)', schemaOptions.length)}
placeholder={t('Select schema or type schema name')}
onChange={item => changeSchema(item as SchemaValue)}
options={schemaOptions}
value={value}
valueRenderer={o => (
<div>
<span className="text-muted">{t('Schema:')}</span> {o.label}
</div>
)}
isLoading={schemaLoading}
autosize={false}
onChange={item => changeSchema(item)}
isDisabled={readOnly}
showSearch
value={currentSchema}
/>,
refresh,
refreshIcon,
);
}
return (
<DatabaseSelectorWrapper data-test="DatabaseSelector">
{formMode && <FieldTitle>{t('datasource')}</FieldTitle>}
{renderDatabaseSelect()}
{formMode && <FieldTitle>{t('schema')}</FieldTitle>}
{renderSchemaSelect()}
</DatabaseSelectorWrapper>
);

8
superset-frontend/src/components/Icons/Icon.tsx
View File

@ -53,15 +53,21 @@ export const Icon = (props: IconProps) => {
const name = fileName.replace('_', '-');
useEffect(() => {
let cancelled = false;
async function importIcon(): Promise<void> {
ImportedSVG.current = (
await import(
`!!@svgr/webpack?-svgo,+titleProp,+ref!images/icons/${fileName}.svg`
)
).default;
setLoaded(true);
if (!cancelled) {
setLoaded(true);
}
}
importIcon();
return () => {
cancelled = true;
};
}, [fileName, ImportedSVG]);
return (

291
superset-frontend/src/components/TableSelector/TableSelector.test.jsx
View File

@ -1,291 +0,0 @@
/**
* 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 configureStore from 'redux-mock-store';
import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';
import sinon from 'sinon';
import fetchMock from 'fetch-mock';
import thunk from 'redux-thunk';
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
import DatabaseSelector from 'src/components/DatabaseSelector';
import TableSelector from 'src/components/TableSelector';
import { initialState, tables } from 'spec/javascripts/sqllab/fixtures';
const mockStore = configureStore([thunk]);
const store = mockStore(initialState);
const FETCH_SCHEMAS_ENDPOINT = 'glob:*/api/v1/database/*/schemas/*';
const GET_TABLE_ENDPOINT = 'glob:*/superset/tables/1/*/*';
const GET_TABLE_NAMES_ENDPOINT = 'glob:*/superset/tables/1/main/*';
const mockedProps = {
clearable: false,
database: { id: 1, database_name: 'main' },
dbId: 1,
formMode: false,
getDbList: sinon.stub(),
handleError: sinon.stub(),
horizontal: false,
onChange: sinon.stub(),
onDbChange: sinon.stub(),
onSchemaChange: sinon.stub(),
onTableChange: sinon.stub(),
sqlLabMode: true,
tableName: '',
tableNameSticky: true,
};
const schemaOptions = {
result: ['main', 'erf', 'superset'],
};
const selectedSchema = { label: 'main', title: 'main', value: 'main' };
const selectedTable = {
extra: null,
label: 'birth_names',
schema: 'main',
title: 'birth_names',
type: undefined,
value: 'birth_names',
};
async function mountAndWait(props = mockedProps) {
const mounted = mount(<TableSelector {...props} />, {
context: { store },
wrappingComponent: ThemeProvider,
wrappingComponentProps: { theme: supersetTheme },
});
await waitForComponentToPaint(mounted);
return mounted;
}
describe('TableSelector', () => {
let wrapper;
beforeEach(async () => {
fetchMock.reset();
wrapper = await mountAndWait();
});
it('renders', () => {
expect(wrapper.find(TableSelector)).toExist();
expect(wrapper.find(DatabaseSelector)).toExist();
});
describe('change database', () => {
afterEach(fetchMock.resetHistory);
afterAll(fetchMock.reset);
it('should fetch schemas', async () => {
fetchMock.get(FETCH_SCHEMAS_ENDPOINT, { overwriteRoutes: true });
act(() => {
wrapper.find('[data-test="select-database"]').first().props().onChange({
id: 1,
database_name: 'main',
});
});
await waitForComponentToPaint(wrapper);
expect(fetchMock.calls(FETCH_SCHEMAS_ENDPOINT)).toHaveLength(1);
});
it('should fetch schema options', async () => {
fetchMock.get(FETCH_SCHEMAS_ENDPOINT, schemaOptions, {
overwriteRoutes: true,
});
act(() => {
wrapper.find('[data-test="select-database"]').first().props().onChange({
id: 1,
database_name: 'main',
});
});
await waitForComponentToPaint(wrapper);
wrapper.update();
expect(fetchMock.calls(FETCH_SCHEMAS_ENDPOINT)).toHaveLength(1);
expect(
wrapper.find('[name="select-schema"]').first().props().options,
).toEqual([
{ value: 'main', label: 'main', title: 'main' },
{ value: 'erf', label: 'erf', title: 'erf' },
{ value: 'superset', label: 'superset', title: 'superset' },
]);
});
it('should clear table options', async () => {
act(() => {
wrapper.find('[data-test="select-database"]').first().props().onChange({
id: 1,
database_name: 'main',
});
});
await waitForComponentToPaint(wrapper);
const props = wrapper.find('[name="async-select-table"]').first().props();
expect(props.isDisabled).toBe(true);
expect(props.value).toEqual(undefined);
});
});
describe('change schema', () => {
beforeEach(async () => {
fetchMock.get(FETCH_SCHEMAS_ENDPOINT, schemaOptions, {
overwriteRoutes: true,
});
});
afterEach(fetchMock.resetHistory);
afterAll(fetchMock.reset);
it('should fetch table', async () => {
fetchMock.get(GET_TABLE_NAMES_ENDPOINT, { overwriteRoutes: true });
act(() => {
wrapper.find('[data-test="select-database"]').first().props().onChange({
id: 1,
database_name: 'main',
});
});
await waitForComponentToPaint(wrapper);
act(() => {
wrapper
.find('[name="select-schema"]')
.first()
.props()
.onChange(selectedSchema);
});
await waitForComponentToPaint(wrapper);
expect(fetchMock.calls(GET_TABLE_NAMES_ENDPOINT)).toHaveLength(1);
});
it('should fetch table options', async () => {
fetchMock.get(GET_TABLE_NAMES_ENDPOINT, tables, {
overwriteRoutes: true,
});
act(() => {
wrapper.find('[data-test="select-database"]').first().props().onChange({
id: 1,
database_name: 'main',
});
});
await waitForComponentToPaint(wrapper);
act(() => {
wrapper
.find('[name="select-schema"]')
.first()
.props()
.onChange(selectedSchema);
});
await waitForComponentToPaint(wrapper);
expect(
wrapper.find('[name="select-schema"]').first().props().value[0],
).toEqual(selectedSchema);
expect(fetchMock.calls(GET_TABLE_NAMES_ENDPOINT)).toHaveLength(1);
const { options } = wrapper.find('[name="select-table"]').first().props();
expect({ options }).toEqual(tables);
});
});
describe('change table', () => {
beforeEach(async () => {
fetchMock.get(GET_TABLE_NAMES_ENDPOINT, tables, {
overwriteRoutes: true,
});
});
it('should change table value', async () => {
act(() => {
wrapper
.find('[name="select-schema"]')
.first()
.props()
.onChange(selectedSchema);
});
await waitForComponentToPaint(wrapper);
act(() => {
wrapper
.find('[name="select-table"]')
.first()
.props()
.onChange(selectedTable);
});
await waitForComponentToPaint(wrapper);
expect(
wrapper.find('[name="select-table"]').first().props().value,
).toEqual('birth_names');
});
it('should call onTableChange with schema from table object', async () => {
act(() => {
wrapper
.find('[name="select-schema"]')
.first()
.props()
.onChange(selectedSchema);
});
await waitForComponentToPaint(wrapper);
act(() => {
wrapper
.find('[name="select-table"]')
.first()
.props()
.onChange(selectedTable);
});
await waitForComponentToPaint(wrapper);
expect(mockedProps.onTableChange.getCall(0).args[0]).toBe('birth_names');
expect(mockedProps.onTableChange.getCall(0).args[1]).toBe('main');
});
});
describe('getTableNamesBySubStr', () => {
afterEach(fetchMock.resetHistory);
afterAll(fetchMock.reset);
it('should handle empty', async () => {
act(() => {
wrapper
.find('[name="async-select-table"]')
.first()
.props()
.loadOptions();
});
await waitForComponentToPaint(wrapper);
const props = wrapper.find('[name="async-select-table"]').first().props();
expect(props.isDisabled).toBe(true);
expect(props.value).toEqual('');
});
it('should handle table name', async () => {
wrapper.setProps({ schema: 'main' });
fetchMock.get(GET_TABLE_ENDPOINT, tables, {
overwriteRoutes: true,
});
act(() => {
wrapper
.find('[name="async-select-table"]')
.first()
.props()
.loadOptions();
});
await waitForComponentToPaint(wrapper);
expect(fetchMock.calls(GET_TABLE_ENDPOINT)).toHaveLength(1);
});
});
});

91
superset-frontend/src/components/TableSelector/TableSelector.test.tsx Normal file
View File

@ -0,0 +1,91 @@
/**
* 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 { render, screen, waitFor } from 'spec/helpers/testing-library';
import { SupersetClient } from '@superset-ui/core';
import userEvent from '@testing-library/user-event';
import TableSelector from '.';
const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
const createProps = () => ({
dbId: 1,
schema: 'test_schema',
handleError: jest.fn(),
});
beforeAll(() => {
SupersetClientGet.mockImplementation(
async () =>
({
json: {
options: [
{ label: 'table_a', value: 'table_a' },
{ label: 'table_b', value: 'table_b' },
],
},
} as any),
);
});
test('renders with default props', async () => {
const props = createProps();
render(<TableSelector {...props} />);
const databaseSelect = screen.getByRole('combobox', {
name: 'Select database or type database name',
});
const schemaSelect = screen.getByRole('combobox', {
name: 'Select schema or type schema name',
});
const tableSelect = screen.getByRole('combobox', {
name: 'Select table or type table name',
});
await waitFor(() => {
expect(databaseSelect).toBeInTheDocument();
expect(schemaSelect).toBeInTheDocument();
expect(tableSelect).toBeInTheDocument();
});
});
test('renders table options', async () => {
const props = createProps();
render(<TableSelector {...props} />);
const tableSelect = screen.getByRole('combobox', {
name: 'Select table or type table name',
});
userEvent.click(tableSelect);
expect(
await screen.findByRole('option', { name: 'table_a' }),
).toBeInTheDocument();
expect(
await screen.findByRole('option', { name: 'table_b' }),
).toBeInTheDocument();
});
test('renders disabled without schema', async () => {
const props = createProps();
render(<TableSelector {...props} schema={undefined} />);
const tableSelect = screen.getByRole('combobox', {
name: 'Select table or type table name',
});
await waitFor(() => {
expect(tableSelect).toBeDisabled();
});
});

481
superset-frontend/src/components/TableSelector/index.tsx
View File

@ -18,57 +18,49 @@
*/
import React, {
FunctionComponent,
useEffect,
useState,
ReactNode,
useMemo,
useEffect,
} from 'react';
import { styled, SupersetClient, t } from '@superset-ui/core';
import { AsyncSelect, CreatableSelect, Select } from 'src/components/Select';
import { Select } from 'src/components';
import { FormLabel } from 'src/components/Form';
import Icons from 'src/components/Icons';
import DatabaseSelector from 'src/components/DatabaseSelector';
import RefreshLabel from 'src/components/RefreshLabel';
import CertifiedIcon from 'src/components/CertifiedIcon';
import WarningIconWithTooltip from 'src/components/WarningIconWithTooltip';
const FieldTitle = styled.p`
color: ${({ theme }) => theme.colors.secondary.light2};
font-size: ${({ theme }) => theme.typography.sizes.s}px;
margin: 20px 0 10px 0;
text-transform: uppercase;
`;
const TableSelectorWrapper = styled.div`
.fa-refresh {
padding-left: 9px;
}
${({ theme }) => `
.refresh {
display: flex;
align-items: center;
width: 30px;
margin-left: ${theme.gridUnit}px;
margin-top: ${theme.gridUnit * 5}px;
}
.refresh-col {
display: flex;
align-items: center;
width: 30px;
margin-left: ${({ theme }) => theme.gridUnit}px;
}
.section {
display: flex;
flex-direction: row;
align-items: center;
}
.section {
padding-bottom: 5px;
display: flex;
flex-direction: row;
}
.divider {
border-bottom: 1px solid ${theme.colors.secondary.light5};
margin: 15px 0;
}
.select {
flex-grow: 1;
}
.table-length {
color: ${theme.colors.grayscale.light1};
}
.divider {
border-bottom: 1px solid ${({ theme }) => theme.colors.secondary.light5};
margin: 15px 0;
}
.table-length {
color: ${({ theme }) => theme.colors.grayscale.light1};
}
.select {
flex: 1;
}
`}
`;
const TableLabel = styled.span`
@ -84,32 +76,78 @@ const TableLabel = styled.span`
interface TableSelectorProps {
clearable?: boolean;
database?: any;
database?: {
id: number;
database_name: string;
backend: string;
allow_multi_schema_metadata_fetch: boolean;
};
dbId: number;
formMode?: boolean;
getDbList?: (arg0: any) => {};
handleError: (msg: string) => void;
isDatabaseSelectEnabled?: boolean;
onUpdate?: ({
dbId,
schema,
}: {
dbId: number;
schema?: string;
tableName?: string;
onDbChange?: (db: {
id: number;
database_name: string;
backend: string;
}) => void;
onDbChange?: (db: any) => void;
onSchemaChange?: (arg0?: any) => {};
onSchemaChange?: (schema?: string) => void;
onSchemasLoad?: () => void;
onTableChange?: (tableName: string, schema: string) => void;
onTablesLoad?: (options: Array<any>) => {};
onTableChange?: (tableName?: string, schema?: string) => void;
onTablesLoad?: (options: Array<any>) => void;
readOnly?: boolean;
schema?: string;
sqlLabMode?: boolean;
tableName?: string;
tableNameSticky?: boolean;
}
interface Table {
label: string;
value: string;
type: string;
extra?: {
certification?: {
certified_by: string;
details: string;
};
warning_markdown?: string;
};
}
interface TableOption {
label: JSX.Element;
text: string;
value: string;
}
const TableOption = ({ table }: { table: Table }) => {
const { label, type, extra } = table;
return (
<TableLabel title={label}>
{type === 'view' ? (
<Icons.Eye iconSize="m" />
) : (
<Icons.Table iconSize="m" />
)}
{extra?.certification && (
<CertifiedIcon
certifiedBy={extra.certification.certified_by}
details={extra.certification.details}
size="l"
/>
)}
{extra?.warning_markdown && (
<WarningIconWithTooltip
warningMarkdown={extra.warning_markdown}
size="l"
/>
)}
{label}
</TableLabel>
);
};
const TableSelector: FunctionComponent<TableSelectorProps> = ({
database,
dbId,
@ -117,7 +155,6 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
getDbList,
handleError,
isDatabaseSelectEnabled = true,
onUpdate,
onDbChange,
onSchemaChange,
onSchemasLoad,
@ -127,181 +164,109 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
schema,
sqlLabMode = true,
tableName,
tableNameSticky = true,
}) => {
const [currentDbId, setCurrentDbId] = useState<number | undefined>(dbId);
const [currentSchema, setCurrentSchema] = useState<string | undefined>(
schema,
);
const [currentTableName, setCurrentTableName] = useState<string | undefined>(
tableName,
);
const [tableLoading, setTableLoading] = useState(false);
const [tableOptions, setTableOptions] = useState([]);
const [currentTable, setCurrentTable] = useState<TableOption | undefined>();
const [refresh, setRefresh] = useState(0);
const [previousRefresh, setPreviousRefresh] = useState(0);
const [loadingTables, setLoadingTables] = useState(false);
const [tableOptions, setTableOptions] = useState<TableOption[]>([]);
function fetchTables(
databaseId?: number,
schema?: string,
forceRefresh = false,
substr = 'undefined',
) {
const dbSchema = schema || currentSchema;
const actualDbId = databaseId || dbId;
if (actualDbId && dbSchema) {
const encodedSchema = encodeURIComponent(dbSchema);
const encodedSubstr = encodeURIComponent(substr);
setTableLoading(true);
setTableOptions([]);
useEffect(() => {
if (currentDbId && currentSchema) {
setLoadingTables(true);
const encodedSchema = encodeURIComponent(currentSchema);
const forceRefresh = refresh !== previousRefresh;
// TODO: Would be nice to add pagination in a follow-up. Needs endpoint changes.
const endpoint = encodeURI(
`/superset/tables/${actualDbId}/${encodedSchema}/${encodedSubstr}/${!!forceRefresh}/`,
`/superset/tables/${currentDbId}/${encodedSchema}/undefined/${forceRefresh}/`,
);
return SupersetClient.get({ endpoint })
.then(({ json }) => {
const options = json.options.map((o: any) => ({
value: o.value,
schema: o.schema,
label: o.label,
title: o.title,
type: o.type,
extra: o?.extra,
}));
setTableLoading(false);
setTableOptions(options);
if (previousRefresh !== refresh) {
setPreviousRefresh(refresh);
}
try {
SupersetClient.get({ endpoint }).then(({ json }) => {
const options: TableOption[] = [];
let currentTable;
json.options.forEach((table: Table) => {
const option = {
value: table.value,
label: <TableOption table={table} />,
text: table.label,
};
options.push(option);
if (table.label === tableName) {
currentTable = option;
}
});
if (onTablesLoad) {
onTablesLoad(json.options);
}
})
.catch(() => {
setTableLoading(false);
setTableOptions([]);
handleError(t('Error while fetching table list'));
setTableOptions(
options.sort((a: { text: string }, b: { text: string }) =>
a.text.localeCompare(b.text),
),
);
setCurrentTable(currentTable);
});
} finally {
setLoadingTables(false);
}
}
setTableLoading(false);
setTableOptions([]);
return Promise.resolve();
}
useEffect(() => {
if (dbId && schema) {
fetchTables();
}
}, [dbId, schema]);
function onSelectionChange({
dbId,
schema,
tableName,
}: {
dbId: number;
schema?: string;
tableName?: string;
}) {
setCurrentTableName(tableName);
setCurrentSchema(schema);
if (onUpdate) {
onUpdate({ dbId, schema, tableName });
}
}
function getTableNamesBySubStr(substr = 'undefined') {
if (!dbId || !substr) {
const options: any[] = [];
return Promise.resolve({ options });
}
const encodedSchema = encodeURIComponent(schema || '');
const encodedSubstr = encodeURIComponent(substr);
return SupersetClient.get({
endpoint: encodeURI(
`/superset/tables/${dbId}/${encodedSchema}/${encodedSubstr}`,
),
}).then(({ json }) => {
const options = json.options.map((o: any) => ({
value: o.value,
schema: o.schema,
label: o.label,
title: o.title,
type: o.type,
}));
return { options };
});
}
function changeTable(tableOpt: any) {
if (!tableOpt) {
setCurrentTableName('');
return;
}
const schemaName = tableOpt.schema;
const tableOptTableName = tableOpt.value;
if (tableNameSticky) {
onSelectionChange({
dbId,
schema: schemaName,
tableName: tableOptTableName,
});
}
if (onTableChange) {
onTableChange(tableOptTableName, schemaName);
}
}
function changeSchema(schemaOpt: any, force = false) {
const value = schemaOpt ? schemaOpt.value : null;
if (onSchemaChange) {
onSchemaChange(value);
}
onSelectionChange({
dbId,
schema: value,
tableName: undefined,
});
fetchTables(dbId, currentSchema, force);
}
function renderTableOption(option: any) {
return (
<TableLabel title={option.label}>
<small className="text-muted">
<i className={`fa fa-${option.type === 'view' ? 'eye' : 'table'}`} />
</small>
{option.extra?.certification && (
<CertifiedIcon
certifiedBy={option.extra.certification.certified_by}
details={option.extra.certification.details}
size={20}
/>
)}
{option.extra?.warning_markdown && (
<WarningIconWithTooltip
warningMarkdown={option.extra.warning_markdown}
size={20}
/>
)}
{option.label}
</TableLabel>
);
}
// We are using the refresh state to re-trigger the query
// previousRefresh should be out of dependencies array
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentDbId, currentSchema, onTablesLoad, refresh]);
function renderSelectRow(select: ReactNode, refreshBtn: ReactNode) {
return (
<div className="section">
<span className="select">{select}</span>
<span className="refresh-col">{refreshBtn}</span>
<span className="refresh">{refreshBtn}</span>
</div>
);
}
const internalTableChange = (table?: TableOption) => {
setCurrentTable(table);
if (onTableChange && currentSchema) {
onTableChange(table?.value, currentSchema);
}
};
const internalDbChange = (db: {
id: number;
database_name: string;
backend: string;
}) => {
setCurrentDbId(db?.id);
if (onDbChange) {
onDbChange(db);
}
};
const internalSchemaChange = (schema?: string) => {
setCurrentSchema(schema);
if (onSchemaChange) {
onSchemaChange(schema);
}
internalTableChange(undefined);
};
function renderDatabaseSelector() {
return (
<DatabaseSelector
dbId={dbId}
db={database}
formMode={formMode}
getDbList={getDbList}
getTableList={fetchTables}
handleError={handleError}
onUpdate={onSelectionChange}
onDbChange={readOnly ? undefined : onDbChange}
onSchemaChange={readOnly ? undefined : onSchemaChange}
onDbChange={readOnly ? undefined : internalDbChange}
onSchemaChange={readOnly ? undefined : internalSchemaChange}
onSchemasLoad={onSchemasLoad}
schema={currentSchema}
sqlLabMode={sqlLabMode}
@ -311,96 +276,58 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
);
}
const handleFilterOption = useMemo(
() => (search: string, option: TableOption) => {
const searchValue = search.trim().toLowerCase();
const { text } = option;
return text.toLowerCase().includes(searchValue);
},
[],
);
function renderTableSelect() {
const options = tableOptions;
let select = null;
if (currentSchema && !formMode) {
// dataset editor
select = (
<Select
name="select-table"
isLoading={tableLoading}
ignoreAccents={false}
placeholder={t('Select table or type table name')}
autosize={false}
onChange={changeTable}
options={options}
// @ts-ignore
value={currentTableName}
optionRenderer={renderTableOption}
valueRenderer={renderTableOption}
isDisabled={readOnly}
/>
);
} else if (formMode) {
select = (
<CreatableSelect
name="select-table"
isLoading={tableLoading}
ignoreAccents={false}
placeholder={t('Select table or type table name')}
autosize={false}
onChange={changeTable}
options={options}
// @ts-ignore
value={currentTableName}
optionRenderer={renderTableOption}
/>
);
} else {
// sql lab
let tableSelectPlaceholder;
let tableSelectDisabled = false;
if (database && database.allow_multi_schema_metadata_fetch) {
tableSelectPlaceholder = t('Type to search ...');
} else {
tableSelectPlaceholder = t('Select table ');
tableSelectDisabled = true;
}
select = (
<AsyncSelect
name="async-select-table"
placeholder={tableSelectPlaceholder}
isDisabled={tableSelectDisabled}
autosize={false}
onChange={changeTable}
// @ts-ignore
value={currentTableName}
loadOptions={getTableNamesBySubStr}
optionRenderer={renderTableOption}
/>
);
}
const refresh = !formMode && !readOnly && (
const disabled =
(currentSchema && !formMode && readOnly) ||
(!currentSchema && !database?.allow_multi_schema_metadata_fetch);
const header = sqlLabMode ? (
<FormLabel>{t('See table schema')}</FormLabel>
) : (
<FormLabel>{t('Table')}</FormLabel>
);
const select = (
<Select
ariaLabel={t('Select table or type table name')}
disabled={disabled}
filterOption={handleFilterOption}
header={header}
labelInValue
lazyLoading={false}
loading={loadingTables}
name="select-table"
onChange={(table: TableOption) => internalTableChange(table)}
options={tableOptions}
placeholder={t('Select table or type table name')}
showSearch
value={currentTable}
/>
);
const refreshLabel = !formMode && !readOnly && (
<RefreshLabel
onClick={() => changeSchema({ value: schema }, true)}
onClick={() => setRefresh(refresh + 1)}
tooltipContent={t('Force refresh table list')}
/>
);
return renderSelectRow(select, refresh);
}
function renderSeeTableLabel() {
return (
<div className="section">
<FormLabel>
{t('See table schema')}{' '}
{schema && (
<small className="table-length">
{tableOptions.length} in {schema}
</small>
)}
</FormLabel>
</div>
);
return renderSelectRow(select, refreshLabel);
}
return (
<TableSelectorWrapper>
{renderDatabaseSelector()}
{!formMode && <div className="divider" />}
{sqlLabMode && renderSeeTableLabel()}
{formMode && <FieldTitle>{t('Table')}</FieldTitle>}
{sqlLabMode && !formMode && <div className="divider" />}
{renderTableSelect()}
</TableSelectorWrapper>
);

6
superset-frontend/src/components/WarningIconWithTooltip/index.tsx
View File

@ -18,16 +18,17 @@
*/
import React from 'react';
import { useTheme, SafeMarkdown } from '@superset-ui/core';
import Icons from 'src/components/Icons';
import Icons, { IconType } from 'src/components/Icons';
import { Tooltip } from 'src/components/Tooltip';
export interface WarningIconWithTooltipProps {
warningMarkdown: string;
size?: number;
size?: IconType['iconSize'];
}
function WarningIconWithTooltip({
warningMarkdown,
size,
}: WarningIconWithTooltipProps) {
const theme = useTheme();
return (
@ -37,6 +38,7 @@ function WarningIconWithTooltip({
>
<Icons.AlertSolid
iconColor={theme.colors.alert.base}
iconSize={size}
css={{ marginRight: theme.gridUnit * 2 }}
/>
</Tooltip>

137
superset-frontend/src/datasource/DatasourceEditor.jsx
View File

@ -775,41 +775,47 @@ class DatasourceEditor extends React.PureComponent {
<div>
{this.state.isSqla && (
<>
<Field
fieldKey="databaseSelector"
label={t('virtual')}
control={
<DatabaseSelector
dbId={datasource.database.id}
schema={datasource.schema}
onSchemaChange={schema =>
this.state.isEditMode &&
this.onDatasourcePropChange('schema', schema)
<Col xs={24} md={12}>
<Field
fieldKey="databaseSelector"
label={t('virtual')}
control={
<div css={{ marginTop: 8 }}>
<DatabaseSelector
db={datasource?.database}
schema={datasource.schema}
onSchemaChange={schema =>
this.state.isEditMode &&
this.onDatasourcePropChange('schema', schema)
}
onDbChange={database =>
this.state.isEditMode &&
this.onDatasourcePropChange('database', database)
}
formMode={false}
handleError={this.props.addDangerToast}
readOnly={!this.state.isEditMode}
/>
</div>
}
/>
<div css={{ width: 'calc(100% - 34px)', marginTop: -16 }}>
<Field
fieldKey="table_name"
label={t('Dataset name')}
control={
<TextControl
controlId="table_name"
onChange={table => {
this.onDatasourcePropChange('table_name', table);
}}
placeholder={t('Dataset name')}
disabled={!this.state.isEditMode}
/>
}
onDbChange={database =>
this.state.isEditMode &&
this.onDatasourcePropChange('database', database)
}
formMode={false}
handleError={this.props.addDangerToast}
readOnly={!this.state.isEditMode}
/>
}
/>
<Field
fieldKey="table_name"
label={t('Dataset name')}
control={
<TextControl
controlId="table_name"
onChange={table => {
this.onDatasourcePropChange('table_name', table);
}}
placeholder={t('Dataset name')}
disabled={!this.state.isEditMode}
/>
}
/>
</div>
</Col>
<Field
fieldKey="sql"
label={t('SQL')}
@ -853,33 +859,44 @@ class DatasourceEditor extends React.PureComponent {
fieldKey="tableSelector"
label={t('Physical')}
control={
<TableSelector
clearable={false}
dbId={datasource.database.id}
handleError={this.props.addDangerToast}
schema={datasource.schema}
sqlLabMode={false}
tableName={datasource.table_name}
onSchemaChange={
this.state.isEditMode
? schema =>
this.onDatasourcePropChange('schema', schema)
: undefined
}
onDbChange={
this.state.isEditMode
? database =>
this.onDatasourcePropChange('database', database)
: undefined
}
onTableChange={
this.state.isEditMode
? table =>
this.onDatasourcePropChange('table_name', table)
: undefined
}
readOnly={!this.state.isEditMode}
/>
<div css={{ marginTop: 8 }}>
<TableSelector
clearable={false}
database={{
...datasource.database,
database_name:
datasource.database.database_name ||
datasource.database.name,
}}
dbId={datasource.database.id}
handleError={this.props.addDangerToast}
schema={datasource.schema}
sqlLabMode={false}
tableName={datasource.table_name}
onSchemaChange={
this.state.isEditMode
? schema =>
this.onDatasourcePropChange('schema', schema)
: undefined
}
onDbChange={
this.state.isEditMode
? database =>
this.onDatasourcePropChange(
'database',
database,
)
: undefined
}
onTableChange={
this.state.isEditMode
? table =>
this.onDatasourcePropChange('table_name', table)
: undefined
}
readOnly={!this.state.isEditMode}
/>
</div>
}
description={t(
'The pointer to a physical table (or view). Keep in mind that the chart is ' +

5
superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
View File

@ -227,10 +227,7 @@ class DatasourceControl extends React.PureComponent {
</Tooltip>
)}
{extra?.warning_markdown && (
<WarningIconWithTooltip
warningMarkdown={extra.warning_markdown}
size={30}
/>
<WarningIconWithTooltip warningMarkdown={extra.warning_markdown} />
)}
<Dropdown
overlay={datasourceMenu}

34
superset-frontend/src/views/CRUD/data/dataset/AddDatasetModal.tsx
View File

@ -50,7 +50,7 @@ const DatasetModal: FunctionComponent<DatasetModalProps> = ({
onHide,
show,
}) => {
const [currentSchema, setSchema] = useState('');
const [currentSchema, setSchema] = useState<string | undefined>('');
const [currentTableName, setTableName] = useState('');
const [datasourceId, setDatasourceId] = useState<number>(0);
const [disableSave, setDisableSave] = useState(true);
@ -60,19 +60,27 @@ const DatasetModal: FunctionComponent<DatasetModalProps> = ({
addDangerToast,
);
const onChange = ({
dbId,
schema,
tableName,
}: {
dbId: number;
schema: string;
tableName: string;
const setSaveButtonState = () => {
setDisableSave(isNil(datasourceId) || isEmpty(currentTableName));
};
const onDbChange = (db: {
id: number;
database_name: string;
backend: string;
}) => {
setDatasourceId(dbId);
setDisableSave(isNil(dbId) || isEmpty(tableName));
setDatasourceId(db.id);
setSaveButtonState();
};
const onSchemaChange = (schema?: string) => {
setSchema(schema);
setSaveButtonState();
};
const onTableChange = (tableName: string) => {
setTableName(tableName);
setSaveButtonState();
};
const onSave = () => {
@ -108,7 +116,9 @@ const DatasetModal: FunctionComponent<DatasetModalProps> = ({
dbId={datasourceId}
formMode
handleError={addDangerToast}
onUpdate={onChange}
onDbChange={onDbChange}
onSchemaChange={onSchemaChange}
onTableChange={onTableChange}
schema={currentSchema}
tableName={currentTableName}
/>

2
superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx
View File

@ -243,11 +243,13 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
<CertifiedIcon
certifiedBy={parsedExtra.certification.certified_by}
details={parsedExtra.certification.details}
size="l"
/>
)}
{parsedExtra?.warning_markdown && (
<WarningIconWithTooltip
warningMarkdown={parsedExtra.warning_markdown}
size="l"
/>
)}
{titleLink}

2
superset/datasets/api.py
View File

@ -160,7 +160,7 @@ class DatasetRestApi(BaseSupersetModelRestApi):
"url",
"extra",
]
show_columns = show_select_columns + ["columns.type_generic"]
show_columns = show_select_columns + ["columns.type_generic", "database.backend"]
add_model_schema = DatasetPostSchema()
edit_model_schema = DatasetPutSchema()
add_columns = ["database", "schema", "table_name", "owners"]

21
superset/views/core.py
View File

@ -1057,8 +1057,14 @@ class Superset(BaseSupersetView): # pylint: disable=too-many-public-methods
@event_logger.log_this
@expose("/tables/<int:db_id>/<schema>/<substr>/")
@expose("/tables/<int:db_id>/<schema>/<substr>/<force_refresh>/")
def tables( # pylint: disable=too-many-locals,no-self-use
self, db_id: int, schema: str, substr: str, force_refresh: str = "false"
@expose("/tables/<int:db_id>/<schema>/<substr>/<force_refresh>/<exact_match>")
def tables( # pylint: disable=too-many-locals,no-self-use,too-many-arguments
self,
db_id: int,
schema: str,
substr: str,
force_refresh: str = "false",
exact_match: str = "false",
) -> FlaskResponse:
"""Endpoint to fetch the list of tables for given database"""
# Guarantees database filtering by security access
@ -1071,6 +1077,7 @@ class Superset(BaseSupersetView): # pylint: disable=too-many-public-methods
return json_error_response("Not found", 404)
force_refresh_parsed = force_refresh.lower() == "true"
exact_match_parsed = exact_match.lower() == "true"
schema_parsed = utils.parse_js_uri_path_item(schema, eval_undefined=True)
substr_parsed = utils.parse_js_uri_path_item(substr, eval_undefined=True)
@ -1112,9 +1119,15 @@ class Superset(BaseSupersetView): # pylint: disable=too-many-public-methods
ds_name.table if schema_parsed else f"{ds_name.schema}.{ds_name.table}"
)
def is_match(src: str, target: utils.DatasourceName) -> bool:
target_label = get_datasource_label(target)
if exact_match_parsed:
return src == target_label
return src in target_label
if substr_parsed:
tables = [tn for tn in tables if substr_parsed in get_datasource_label(tn)]
views = [vn for vn in views if substr_parsed in get_datasource_label(vn)]
tables = [tn for tn in tables if is_match(substr_parsed, tn)]
views = [vn for vn in views if is_match(substr_parsed, vn)]
if not schema_parsed and database.default_schemas:
user_schemas = (

14
tests/integration_tests/datasets/api_tests.py
View File

@ -221,6 +221,7 @@ class TestDatasetApi(SupersetTestCase):
Dataset API: Test get dataset item
"""
table = self.get_energy_usage_dataset()
main_db = get_main_database()
self.login(username="admin")
uri = f"api/v1/dataset/{table.id}"
rv = self.get_assert_metric(uri, "get")
@ -228,7 +229,11 @@ class TestDatasetApi(SupersetTestCase):
response = json.loads(rv.data.decode("utf-8"))
expected_result = {
"cache_timeout": None,
"database": {"database_name": "examples", "id": 1},
"database": {
"backend": main_db.backend,
"database_name": "examples",
"id": 1,
},
"default_endpoint": None,
"description": "Energy consumption",
"extra": None,
@ -243,9 +248,10 @@ class TestDatasetApi(SupersetTestCase):
"table_name": "energy_usage",
"template_params": None,
}
assert {
k: v for k, v in response["result"].items() if k in expected_result
} == expected_result
if response["result"]["database"]["backend"] not in ("presto", "hive"):
assert {
k: v for k, v in response["result"].items() if k in expected_result
} == expected_result
assert len(response["result"]["columns"]) == 3
assert len(response["result"]["metrics"]) == 2