QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-21 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add empty states to sqlab editor and select (#19598)

Browse Source 
* feat: add empty states to sqlab editor and select

* add suggestions and test

* update type

* lint fix and add suggestions

* fix typo

* run lint

* remove unused code

* fix test

* remove redux for propagation and other suggestions

* add t

* lint

* fix text and remove code

* ts and fix t in p

* fix spelling

* remove unused prop

* add fn to prop change state

* remove unused code

* remove unused types

* update code and test

* fix lint

* fix ts

* update ts

* add type export and fix test

* Update superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Update superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Update superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Update superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* remove handlerror and unused code

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
This commit is contained in:
Phillip Kelley-Dotson
2022-04-15 15:09:07 -07:00
committed by GitHub
parent 154f1ea8c9
commit 06ec88eb99
9 changed files with 147 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
View File

@@ -16,7 +16,15 @@
* specific language governing permissions and limitations
* under the License.
*/
import React, { useEffect, useRef, useCallback, useMemo } from 'react';
import React, {
useEffect,
useRef,
useCallback,
useMemo,
useState,
Dispatch,
SetStateAction,
} from 'react';
import Button from 'src/components/Button';
import { t, styled, css, SupersetTheme } from '@superset-ui/core';
import Collapse from 'src/components/Collapse';
@@ -25,6 +33,7 @@ import { TableSelectorMultiple } from 'src/components/TableSelector';
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 TableElement, { Table, TableElementProps } from '../TableElement';
interface ExtendedTable extends Table {
@@ -54,6 +63,8 @@ interface SqlEditorLeftBarProps {
tables?: ExtendedTable[];
actions: actionsTypes & TableElementProps['actions'];
database: DatabaseObject;
setEmptyState: Dispatch<SetStateAction<boolean>>;
showDisabled: boolean;
}
const StyledScrollbarContainer = styled.div`
@@ -88,15 +99,23 @@ export default function SqlEditorLeftBar({
queryEditor,
tables = [],
height = 500,
setEmptyState,
}: SqlEditorLeftBarProps) {
// Ref needed to avoid infinite rerenders on handlers
// that require and modify the queryEditor
const queryEditorRef = useRef<QueryEditor>(queryEditor);
const [emptyResultsWithSearch, setEmptyResultsWithSearch] = useState(false);
useEffect(() => {
queryEditorRef.current = queryEditor;
}, [queryEditor]);
const onEmptyResults = (searchText?: string) => {
setEmptyResultsWithSearch(!!searchText);
};
const onDbChange = ({ id: dbId }: { id: number }) => {
setEmptyState(false);
actions.queryEditorSetDb(queryEditor, dbId);
actions.queryEditorSetFunctionNames(queryEditor, dbId);
};
@@ -164,6 +183,22 @@ export default function SqlEditorLeftBar({
const shouldShowReset = window.location.search === '?reset=1';
const tableMetaDataHeight = height - 130; // 130 is the height of the selects above
const emptyStateComponent = (
<EmptyStateSmall
image="empty.svg"
title={
emptyResultsWithSearch
? t('No databases match your search')
: t('There are no databases available')
}
description={
<p>
{t('Manage your databases')}{' '}
<a href="/databaseview/list">{t('here')}</a>
</p>
}
/>
);
const handleSchemaChange = useCallback(
(schema: string) => {
if (queryEditorRef.current) {
@@ -185,6 +220,8 @@ export default function SqlEditorLeftBar({
return (
<div className="SqlEditorLeftBar">
<TableSelectorMultiple
onEmptyResults={onEmptyResults}
emptyState={emptyStateComponent}
database={database}
getDbList={actions.setDatabases}
handleError={actions.addDangerToast}