You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ly...@apache.org on 2022/11/29 16:03:02 UTC
[superset] branch lyndsi/create-dataset-polish created (now 80aa665667)
This is an automated email from the ASF dual-hosted git repository.
lyndsi pushed a change to branch lyndsi/create-dataset-polish
in repository https://gitbox.apache.org/repos/asf/superset.git
at 80aa665667 Create dataset polish/bug fix
This branch includes the following new commits:
new 80aa665667 Create dataset polish/bug fix
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[superset] 01/01: Create dataset polish/bug fix
Posted by ly...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
lyndsi pushed a commit to branch lyndsi/create-dataset-polish
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 80aa66566739e964f1cbf5e37b20daee682f3df7
Author: lyndsiWilliams <kc...@gmail.com>
AuthorDate: Tue Nov 29 10:02:33 2022 -0600
Create dataset polish/bug fix
---
.../SqlLab/components/SqlEditorLeftBar/index.tsx | 40 +++++++++-------
.../AddDataset/DatasetPanel/DatasetPanel.tsx | 54 ++++++++++++++++------
.../CRUD/data/dataset/AddDataset/Header/index.tsx | 35 ++++++++------
.../data/dataset/AddDataset/LeftPanel/index.tsx | 34 +++++++++++---
.../src/views/CRUD/data/dataset/styles.ts | 46 ++++++++++++------
5 files changed, 144 insertions(+), 65 deletions(-)
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index 06a31711db..0a6d5c652d 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -102,6 +102,28 @@ const collapseStyles = (theme: SupersetTheme) => css`
}
`;
+const NO_DATABASES_MATCH_TITLE = t('No databases match your search');
+const NO_DATABASES_AVAILABLE_TITLE = t('There are no databases available');
+const MANAGE_YOUR_DATABASES_TEXT = t('Manage your databases');
+const HERE_TEXT = t('here');
+
+export const emptyStateComponent = (emptyResultsWithSearch: boolean) => (
+ <EmptyStateSmall
+ image="empty.svg"
+ title={
+ emptyResultsWithSearch
+ ? NO_DATABASES_MATCH_TITLE
+ : NO_DATABASES_AVAILABLE_TITLE
+ }
+ description={
+ <p>
+ {MANAGE_YOUR_DATABASES_TEXT}{' '}
+ <a href="/databaseview/list">{HERE_TEXT}</a>
+ </p>
+ }
+ />
+);
+
export default function SqlEditorLeftBar({
actions,
database,
@@ -209,22 +231,6 @@ 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) {
@@ -256,7 +262,7 @@ export default function SqlEditorLeftBar({
<div className="SqlEditorLeftBar">
<TableSelectorMultiple
onEmptyResults={onEmptyResults}
- emptyState={emptyStateComponent}
+ emptyState={emptyStateComponent(emptyResultsWithSearch)}
database={userSelectedDb}
getDbList={actions.setDatabases}
handleError={actions.addDangerToast}
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.tsx
index dac11f64bd..e051856701 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.tsx
@@ -119,13 +119,23 @@ const StyledLoader = styled.div`
`}
`;
-const TableContainer = styled.div`
+const TableContainerWithBanner = styled.div`
${({ theme }) => `
position: relative;
margin: ${theme.gridUnit * MARGIN_MULTIPLIER}px;
margin-left: ${theme.gridUnit * (MARGIN_MULTIPLIER + 3)}px;
overflow: scroll;
- height: calc(100% - ${theme.gridUnit * 36}px);
+ height: calc(100% - ${theme.gridUnit * 60}px);
+ `}
+`;
+
+const TableContainerWithoutBanner = styled.div`
+ ${({ theme }) => `
+ position: relative;
+ margin: ${theme.gridUnit * MARGIN_MULTIPLIER}px;
+ margin-left: ${theme.gridUnit * (MARGIN_MULTIPLIER + 3)}px;
+ overflow: scroll;
+ height: calc(100% - ${theme.gridUnit * 30}px);
`}
`;
@@ -248,6 +258,9 @@ const DatasetPanel = ({
const theme = useTheme();
const hasColumns = columnList?.length > 0 ?? false;
const datasetNames = datasets?.map(dataset => dataset.table_name);
+ const tablesWithDatasets = datasets?.find(
+ dataset => dataset.table_name === tableName,
+ );
let component;
if (loading) {
@@ -263,16 +276,29 @@ const DatasetPanel = ({
component = (
<>
<StyledTitle>{COLUMN_TITLE}</StyledTitle>
- <TableContainer>
- <StyledTable
- loading={loading}
- size={TableSize.SMALL}
- columns={tableColumnDefinition}
- data={columnList}
- pageSizeOptions={pageSizeOptions}
- defaultPageSize={10}
- />
- </TableContainer>
+ {tablesWithDatasets ? (
+ <TableContainerWithBanner>
+ <StyledTable
+ loading={loading}
+ size={TableSize.SMALL}
+ columns={tableColumnDefinition}
+ data={columnList}
+ pageSizeOptions={pageSizeOptions}
+ defaultPageSize={25}
+ />
+ </TableContainerWithBanner>
+ ) : (
+ <TableContainerWithoutBanner>
+ <StyledTable
+ loading={loading}
+ size={TableSize.SMALL}
+ columns={tableColumnDefinition}
+ data={columnList}
+ pageSizeOptions={pageSizeOptions}
+ defaultPageSize={25}
+ />
+ </TableContainerWithoutBanner>
+ )}
</>
);
} else {
@@ -290,9 +316,7 @@ const DatasetPanel = ({
{tableName && (
<>
{datasetNames?.includes(tableName) &&
- renderExistingDatasetAlert(
- datasets?.find(dataset => dataset.table_name === tableName),
- )}
+ renderExistingDatasetAlert(tablesWithDatasets)}
<StyledHeader
position={
!loading && hasColumns ? EPosition.RELATIVE : EPosition.ABSOLUTE
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Header/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Header/index.tsx
index 7c1e4f51e6..c040fb88c0 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Header/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Header/index.tsx
@@ -26,6 +26,7 @@ import { TooltipPlacement } from 'src/components/Tooltip';
import {
HeaderComponentStyles,
disabledSaveBtnStyles,
+ StyledCreateDatasetTitle,
} from 'src/views/CRUD/data/dataset/styles';
import {
DatasetActionType,
@@ -62,10 +63,12 @@ const renderOverlay = () => (
export default function Header({
setDataset,
title = DEFAULT_TITLE,
+ editing = false,
}: {
setDataset: React.Dispatch<DSReducerActionType>;
title?: string | null | undefined;
schema?: string | null | undefined;
+ editing?: boolean;
}) {
const editableTitleProps = {
title: title ?? DEFAULT_TITLE,
@@ -82,19 +85,25 @@ export default function Header({
return (
<HeaderComponentStyles>
- <PageHeaderWithActions
- editableTitleProps={editableTitleProps}
- showTitlePanelItems={false}
- showFaveStar={false}
- faveStarProps={{ itemId: 1, saveFaveStar: () => {} }}
- titlePanelAdditionalItems={<></>}
- rightPanelAdditionalItems={renderDisabledSaveButton()}
- additionalActionsMenu={renderOverlay()}
- menuDropdownProps={{
- disabled: true,
- }}
- tooltipProps={tooltipProps}
- />
+ {editing ? (
+ <PageHeaderWithActions
+ editableTitleProps={editableTitleProps}
+ showTitlePanelItems={false}
+ showFaveStar={false}
+ faveStarProps={{ itemId: 1, saveFaveStar: () => {} }}
+ titlePanelAdditionalItems={<></>}
+ rightPanelAdditionalItems={renderDisabledSaveButton()}
+ additionalActionsMenu={renderOverlay()}
+ menuDropdownProps={{
+ disabled: true,
+ }}
+ tooltipProps={tooltipProps}
+ />
+ ) : (
+ <StyledCreateDatasetTitle>
+ {title ?? DEFAULT_TITLE}
+ </StyledCreateDatasetTitle>
+ )}
</HeaderComponentStyles>
);
}
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx
index 05ec47b4c0..f5c6be4122 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx
@@ -37,6 +37,7 @@ import DatabaseSelector, {
} from 'src/components/DatabaseSelector';
import { EmptyStateMedium } from 'src/components/EmptyState';
import { useToasts } from 'src/components/MessageToasts/withToasts';
+import { emptyStateComponent } from 'src/SqlLab/components/SqlEditorLeftBar';
import { DatasetActionType } from '../types';
interface LeftPanelProps {
@@ -63,7 +64,7 @@ const LeftPanelStyle = styled.div`
}
.refresh {
position: absolute;
- top: ${theme.gridUnit * 37.25}px;
+ top: ${theme.gridUnit * 38.75}px;
left: ${theme.gridUnit * 16.75}px;
span[role="button"]{
font-size: ${theme.gridUnit * 4.25}px;
@@ -87,6 +88,10 @@ const LeftPanelStyle = styled.div`
left: ${theme.gridUnit * 3.25}px;
right: 0;
+ .no-scrollbar {
+ margin-right: ${theme.gridUnit * 4}px;
+ }
+
.options {
cursor: pointer;
padding: ${theme.gridUnit * 1.75}px;
@@ -112,7 +117,7 @@ const LeftPanelStyle = styled.div`
}
form > span[aria-label="refresh"] {
position: absolute;
- top: ${theme.gridUnit * 67.5}px;
+ top: ${theme.gridUnit * 69}px;
left: ${theme.gridUnit * 42.75}px;
font-size: ${theme.gridUnit * 4.25}px;
}
@@ -121,13 +126,13 @@ const LeftPanelStyle = styled.div`
}
.loading-container {
position: absolute;
- top: 359px;
+ top: ${theme.gridUnit * 89.75}px;
left: 0;
right: 0;
text-align: center;
img {
width: ${theme.gridUnit * 20}px;
- margin-bottom: 10px;
+ margin-bottom: ${theme.gridUnit * 2.5}px;
}
p {
color: ${theme.colors.grayscale.light1};
@@ -240,6 +245,15 @@ export default function LeftPanel({
const REFRESH_TABLES_TEXT = t('Refresh tables');
const SEARCH_TABLES_PLACEHOLDER_TEXT = t('Search tables');
+ const optionsList = document.getElementsByClassName('options-list');
+ const scrollableOptionsList =
+ optionsList[0]?.scrollHeight > optionsList[0]?.clientHeight;
+ const [emptyResultsWithSearch, setEmptyResultsWithSearch] = useState(false);
+
+ const onEmptyResults = (searchText?: string) => {
+ setEmptyResultsWithSearch(!!searchText);
+ };
+
return (
<LeftPanelStyle>
<p className="section-title db-schema">
@@ -249,6 +263,8 @@ export default function LeftPanel({
handleError={addDangerToast}
onDbChange={setDatabase}
onSchemaChange={setSchema}
+ emptyState={emptyStateComponent(emptyResultsWithSearch)}
+ onEmptyResults={onEmptyResults}
/>
{loadTables && !refresh && Loader(TABLE_LOADING_TEXT)}
{schema && !loadTables && !tableOptions.length && !searchVal && (
@@ -291,7 +307,13 @@ export default function LeftPanel({
filteredOptions.map((option, i) => (
<div
className={
- selectedTable === i ? 'options-highlighted' : 'options'
+ selectedTable === i
+ ? scrollableOptionsList
+ ? 'options-highlighted'
+ : 'options-highlighted no-scrollbar'
+ : scrollableOptionsList
+ ? 'options'
+ : 'options no-scrollbar'
}
key={i}
role="button"
@@ -308,7 +330,7 @@ export default function LeftPanel({
}
iconSize="m"
css={css`
- margin-right: ${theme.gridUnit * 6}px;
+ margin-right: ${theme.gridUnit * 2}px;
`}
/>
)}
diff --git a/superset-frontend/src/views/CRUD/data/dataset/styles.ts b/superset-frontend/src/views/CRUD/data/dataset/styles.ts
index 82461a62f3..ac8ba34420 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/styles.ts
+++ b/superset-frontend/src/views/CRUD/data/dataset/styles.ts
@@ -65,19 +65,31 @@ export const FooterRow = styled(Row)`
`;
export const StyledLayoutHeader = styled.div`
+ ${({ theme }) => `
flex: 0 0 auto;
- height: ${({ theme }) => theme.gridUnit * 16}px;
- border-bottom: 2px solid ${({ theme }) => theme.colors.grayscale.light2};
+ height: ${theme.gridUnit * 16}px;
+ border-bottom: 2px solid ${theme.colors.grayscale.light2};
.header-with-actions {
- height: ${({ theme }) => theme.gridUnit * 15.5}px;
+ height: ${theme.gridUnit * 15.5}px;
}
+ `}
+`;
+
+export const StyledCreateDatasetTitle = styled.div`
+ ${({ theme }) => `
+ margin: ${theme.gridUnit * 4}px;
+ font-size: ${theme.typography.sizes.xl}px;
+ font-weight: ${theme.typography.weights.bold};
+ `}
`;
export const StyledLayoutLeftPanel = styled.div`
- width: ${({ theme }) => theme.gridUnit * 80}px;
+ ${({ theme }) => `
+ width: ${theme.gridUnit * 80}px;
height: 100%;
- border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ border-right: 1px solid ${theme.colors.grayscale.light2};
+ `}
`;
export const StyledLayoutDatasetPanel = styled.div`
@@ -85,21 +97,27 @@ export const StyledLayoutDatasetPanel = styled.div`
`;
export const StyledLayoutRightPanel = styled.div`
- border-left: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- color: ${({ theme }) => theme.colors.success.base};
+ ${({ theme }) => `
+ border-left: 1px solid ${theme.colors.grayscale.light2};
+ color: ${theme.colors.success.base};
+ `}
`;
export const StyledLayoutFooter = styled.div`
- height: ${({ theme }) => theme.gridUnit * 16}px;
+ ${({ theme }) => `
+ height: ${theme.gridUnit * 16}px;
width: 100%;
- border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- color: ${({ theme }) => theme.colors.info.base};
- border-top: ${({ theme }) => theme.gridUnit / 4}px solid
- ${({ theme }) => theme.colors.grayscale.light2};
- padding: ${({ theme }) => theme.gridUnit * 4}px;
+ border-top: 1px solid ${theme.colors.grayscale.light2};
+ border-bottom: 1px solid ${theme.colors.grayscale.light2};
+ color: ${theme.colors.info.base};
+ border-top: ${theme.gridUnit / 4}px solid
+ ${theme.colors.grayscale.light2};
+ padding: ${theme.gridUnit * 4}px;
display: flex;
justify-content: flex-end;
+ background-color: ${theme.colors.grayscale.light5};
+ z-index: ${theme.zIndex.max}
+ `}
`;
export const HeaderComponentStyles = styled.div`