mirror of
https://github.com/apache/superset.git
synced 2026-06-01 05:39:17 +00:00
feat(theming): land Ant Design v5 overhaul — dynamic themes, real dark mode + massive styling refactor (#31590)
Co-authored-by: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com> Co-authored-by: Diego Pucci <diegopucci.me@gmail.com> Co-authored-by: Mehmet Salih Yavuz <salih.yavuz@proton.me> Co-authored-by: Geido <60598000+geido@users.noreply.github.com> Co-authored-by: Alexandru Soare <37236580+alexandrusoare@users.noreply.github.com> Co-authored-by: Damian Pendrak <dpendrak@gmail.com> Co-authored-by: Pius Iniobong <67148161+payose@users.noreply.github.com> Co-authored-by: Enzo Martellucci <enzomartellucci@gmail.com> Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
This commit is contained in:
Maxime Beauchemin
committed by
GitHub
GitHub
parent
2cc1ef88c8
commit
dd129fa403
@@ -36,14 +36,17 @@ import {
|
||||
DatasourceType,
|
||||
} from '@superset-ui/core';
|
||||
import { ColumnMeta, isSavedExpression } from '@superset-ui/chart-controls';
|
||||
import Tabs from 'src/components/Tabs';
|
||||
import Button from 'src/components/Button';
|
||||
import { Select } from 'src/components';
|
||||
import Tabs from '@superset-ui/core/components/Tabs';
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
FormItem,
|
||||
Select,
|
||||
SQLEditor,
|
||||
EmptyState,
|
||||
} from '@superset-ui/core/components';
|
||||
|
||||
import { Form, FormItem } from 'src/components/Form';
|
||||
import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
|
||||
import { SQLEditor } from 'src/components/AsyncAceEditor';
|
||||
import { EmptyState } from 'src/components/EmptyState';
|
||||
import { getColumnKeywords } from 'src/explore/controlUtils/getColumnKeywords';
|
||||
import { StyledColumnOption } from 'src/explore/components/optionRenderers';
|
||||
import {
|
||||
@@ -53,10 +56,16 @@ import {
|
||||
import { ExplorePageState } from 'src/explore/types';
|
||||
import useResizeButton from './useResizeButton';
|
||||
|
||||
const TABS_KEYS = {
|
||||
SAVED: 'saved',
|
||||
SIMPLE: 'simple',
|
||||
SQL_EXPRESSION: 'sqlExpression',
|
||||
};
|
||||
|
||||
const StyledSelect = styled(Select)`
|
||||
.metric-option {
|
||||
& > svg {
|
||||
min-width: ${({ theme }) => `${theme.gridUnit * 4}px`};
|
||||
min-width: ${({ theme }) => `${theme.sizeUnit * 4}px`};
|
||||
}
|
||||
& > .option-label {
|
||||
overflow: hidden;
|
||||
@@ -306,164 +315,175 @@ const ColumnSelectPopover = ({
|
||||
height: ${height}px;
|
||||
width: ${width}px;
|
||||
`}
|
||||
>
|
||||
<Tabs.TabPane
|
||||
key="saved"
|
||||
tab={t('Saved')}
|
||||
disabled={disabledTabs.has('saved')}
|
||||
>
|
||||
{calculatedColumns.length > 0 ? (
|
||||
<FormItem label={savedExpressionsLabel}>
|
||||
<StyledSelect
|
||||
ariaLabel={savedExpressionsLabel}
|
||||
value={selectedCalculatedColumn?.column_name}
|
||||
onChange={onCalculatedColumnChange}
|
||||
allowClear
|
||||
autoFocus={!selectedCalculatedColumn}
|
||||
placeholder={t('%s column(s)', calculatedColumns.length)}
|
||||
options={calculatedColumns.map(calculatedColumn => ({
|
||||
value: calculatedColumn.column_name,
|
||||
label:
|
||||
calculatedColumn.verbose_name ||
|
||||
calculatedColumn.column_name,
|
||||
customLabel: (
|
||||
<StyledColumnOption column={calculatedColumn} showType />
|
||||
),
|
||||
key: calculatedColumn.column_name,
|
||||
}))}
|
||||
/>
|
||||
</FormItem>
|
||||
) : datasourceType === DatasourceType.Table ? (
|
||||
<EmptyState
|
||||
image="empty.svg"
|
||||
size="small"
|
||||
title={
|
||||
isTemporal
|
||||
? t('No temporal columns found')
|
||||
: t('No saved expressions found')
|
||||
}
|
||||
description={
|
||||
isTemporal
|
||||
? t(
|
||||
'Add calculated temporal columns to dataset in "Edit datasource" modal',
|
||||
)
|
||||
: t(
|
||||
'Add calculated columns to dataset in "Edit datasource" modal',
|
||||
)
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<EmptyState
|
||||
image="empty.svg"
|
||||
size="small"
|
||||
title={
|
||||
isTemporal
|
||||
? t('No temporal columns found')
|
||||
: t('No saved expressions found')
|
||||
}
|
||||
description={
|
||||
isTemporal ? (
|
||||
<>
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={setDatasetAndClose}
|
||||
>
|
||||
{t('Create a dataset')}
|
||||
</span>{' '}
|
||||
{t(' to mark a column as a time column')}
|
||||
</>
|
||||
items={[
|
||||
{
|
||||
key: TABS_KEYS.SAVED,
|
||||
label: t('Saved'),
|
||||
disabled: disabledTabs.has('saved'),
|
||||
children: (
|
||||
<>
|
||||
{calculatedColumns.length > 0 ? (
|
||||
<FormItem label={savedExpressionsLabel}>
|
||||
<StyledSelect
|
||||
ariaLabel={savedExpressionsLabel}
|
||||
value={selectedCalculatedColumn?.column_name}
|
||||
onChange={onCalculatedColumnChange}
|
||||
allowClear
|
||||
autoFocus={!selectedCalculatedColumn}
|
||||
placeholder={t('%s column(s)', calculatedColumns.length)}
|
||||
options={calculatedColumns.map(calculatedColumn => ({
|
||||
value: calculatedColumn.column_name,
|
||||
label: (
|
||||
<StyledColumnOption
|
||||
column={calculatedColumn}
|
||||
showType
|
||||
/>
|
||||
),
|
||||
key: calculatedColumn.column_name,
|
||||
}))}
|
||||
/>
|
||||
</FormItem>
|
||||
) : datasourceType === DatasourceType.Table ? (
|
||||
<EmptyState
|
||||
image="empty.svg"
|
||||
size="small"
|
||||
title={
|
||||
isTemporal
|
||||
? t('No temporal columns found')
|
||||
: t('No saved expressions found')
|
||||
}
|
||||
description={
|
||||
isTemporal
|
||||
? t(
|
||||
'Add calculated temporal columns to dataset in "Edit datasource" modal',
|
||||
)
|
||||
: t(
|
||||
'Add calculated columns to dataset in "Edit datasource" modal',
|
||||
)
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={setDatasetAndClose}
|
||||
>
|
||||
{t('Create a dataset')}
|
||||
</span>{' '}
|
||||
{t(' to add calculated columns')}
|
||||
</>
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane
|
||||
key="simple"
|
||||
tab={t('Simple')}
|
||||
disabled={disabledTabs.has('simple')}
|
||||
>
|
||||
{isTemporal && simpleColumns.length === 0 ? (
|
||||
<EmptyState
|
||||
image="empty.svg"
|
||||
size="small"
|
||||
title={t('No temporal columns found')}
|
||||
description={
|
||||
datasourceType === DatasourceType.Table ? (
|
||||
t('Mark a column as temporal in "Edit datasource" modal')
|
||||
<EmptyState
|
||||
image="empty.svg"
|
||||
size="small"
|
||||
title={
|
||||
isTemporal
|
||||
? t('No temporal columns found')
|
||||
: t('No saved expressions found')
|
||||
}
|
||||
description={
|
||||
isTemporal ? (
|
||||
<>
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={setDatasetAndClose}
|
||||
>
|
||||
{t('Create a dataset')}
|
||||
</span>{' '}
|
||||
{t(' to mark a column as a time column')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={setDatasetAndClose}
|
||||
>
|
||||
{t('Create a dataset')}
|
||||
</span>{' '}
|
||||
{t(' to add calculated columns')}
|
||||
</>
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: TABS_KEYS.SIMPLE,
|
||||
label: t('Simple'),
|
||||
disabled: disabledTabs.has('simple'),
|
||||
children: (
|
||||
<>
|
||||
{isTemporal && simpleColumns.length === 0 ? (
|
||||
<EmptyState
|
||||
image="empty.svg"
|
||||
size="small"
|
||||
title={t('No temporal columns found')}
|
||||
description={
|
||||
datasourceType === DatasourceType.Table ? (
|
||||
t(
|
||||
'Mark a column as temporal in "Edit datasource" modal',
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={setDatasetAndClose}
|
||||
>
|
||||
{t('Create a dataset')}
|
||||
</span>{' '}
|
||||
{t(' to mark a column as a time column')}
|
||||
</>
|
||||
)
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={setDatasetAndClose}
|
||||
>
|
||||
{t('Create a dataset')}
|
||||
</span>{' '}
|
||||
{t(' to mark a column as a time column')}
|
||||
</>
|
||||
)
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<FormItem label={simpleColumnsLabel}>
|
||||
<Select
|
||||
ariaLabel={simpleColumnsLabel}
|
||||
value={selectedSimpleColumn?.column_name}
|
||||
onChange={onSimpleColumnChange}
|
||||
allowClear
|
||||
autoFocus={!selectedSimpleColumn}
|
||||
placeholder={t('%s column(s)', simpleColumns.length)}
|
||||
options={simpleColumns.map(simpleColumn => ({
|
||||
value: simpleColumn.column_name,
|
||||
label: simpleColumn.verbose_name || simpleColumn.column_name,
|
||||
customLabel: (
|
||||
<StyledColumnOption column={simpleColumn} showType />
|
||||
),
|
||||
key: simpleColumn.column_name,
|
||||
}))}
|
||||
/>
|
||||
</FormItem>
|
||||
)}
|
||||
</Tabs.TabPane>
|
||||
<FormItem label={simpleColumnsLabel}>
|
||||
<Select
|
||||
ariaLabel={simpleColumnsLabel}
|
||||
value={selectedSimpleColumn?.column_name}
|
||||
onChange={onSimpleColumnChange}
|
||||
allowClear
|
||||
autoFocus={!selectedSimpleColumn}
|
||||
placeholder={t('%s column(s)', simpleColumns.length)}
|
||||
options={simpleColumns.map(simpleColumn => ({
|
||||
value: simpleColumn.column_name,
|
||||
label: (
|
||||
<StyledColumnOption column={simpleColumn} showType />
|
||||
),
|
||||
key: simpleColumn.column_name,
|
||||
}))}
|
||||
/>
|
||||
</FormItem>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: TABS_KEYS.SQL_EXPRESSION,
|
||||
label: t('Custom SQL'),
|
||||
disabled: disabledTabs.has('sqlExpression'),
|
||||
children: (
|
||||
<>
|
||||
<SQLEditor
|
||||
value={
|
||||
adhocColumn?.sqlExpression ||
|
||||
selectedSimpleColumn?.column_name ||
|
||||
selectedCalculatedColumn?.expression
|
||||
}
|
||||
onFocus={onSqlEditorFocus}
|
||||
showLoadingForImport
|
||||
onChange={onSqlExpressionChange}
|
||||
width="100%"
|
||||
height={`${height - 80}px`}
|
||||
showGutter={false}
|
||||
editorProps={{ $blockScrolling: true }}
|
||||
enableLiveAutocompletion
|
||||
className="filter-sql-editor"
|
||||
wrapEnabled
|
||||
ref={sqlEditorRef}
|
||||
keywords={keywords}
|
||||
/>
|
||||
</>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<Tabs.TabPane
|
||||
key="sqlExpression"
|
||||
tab={t('Custom SQL')}
|
||||
disabled={disabledTabs.has('sqlExpression')}
|
||||
>
|
||||
<SQLEditor
|
||||
value={
|
||||
adhocColumn?.sqlExpression ||
|
||||
selectedSimpleColumn?.column_name ||
|
||||
selectedCalculatedColumn?.expression
|
||||
}
|
||||
onFocus={onSqlEditorFocus}
|
||||
showLoadingForImport
|
||||
onChange={onSqlExpressionChange}
|
||||
width="100%"
|
||||
height={`${height - 80}px`}
|
||||
showGutter={false}
|
||||
editorProps={{ $blockScrolling: true }}
|
||||
enableLiveAutocompletion
|
||||
className="filter-sql-editor"
|
||||
wrapEnabled
|
||||
ref={sqlEditorRef}
|
||||
keywords={keywords}
|
||||
/>
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
<div>
|
||||
<Button buttonSize="small" onClick={onResetStateAndClose} cta>
|
||||
{t('Close')}
|
||||
|
||||
Reference in New Issue
Block a user