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 <[email protected]> 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`
