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
2025-06-20 13:38:58 -07:00
committed by GitHub
parent 2cc1ef88c8
commit dd129fa403
1267 changed files with 32958 additions and 23592 deletions

View File

@@ -30,24 +30,26 @@ import {
} from '@superset-ui/core';
import { getTemporalColumns } from '@superset-ui/chart-controls';
import { getUrlParam } from 'src/utils/urlUtils';
import { Dropdown } from 'src/components/Dropdown';
import { Menu } from 'src/components/Menu';
import { Tooltip } from 'src/components/Tooltip';
import { Icons } from 'src/components/Icons';
import {
Dropdown,
Tooltip,
Button,
ModalTrigger,
} from '@superset-ui/core/components';
import {
ChangeDatasourceModal,
DatasourceModal,
} from 'src/components/Datasource';
import Button from 'src/components/Button';
import ErrorAlert from 'src/components/ErrorMessage/ErrorAlert';
import WarningIconWithTooltip from 'src/components/WarningIconWithTooltip';
ErrorAlert,
} from 'src/components';
import { Menu } from '@superset-ui/core/components/Menu';
import { Icons } from '@superset-ui/core/components/Icons';
import WarningIconWithTooltip from '@superset-ui/core/components/WarningIconWithTooltip';
import { URL_PARAMS } from 'src/constants';
import { getDatasourceAsSaveableDataset } from 'src/utils/datasourceUtils';
import {
userHasPermission,
isUserAdmin,
} from 'src/dashboard/util/permissionUtils';
import ModalTrigger from 'src/components/ModalTrigger';
import ViewQueryModalFooter from 'src/explore/components/controls/ViewQueryModalFooter';
import ViewQuery from 'src/explore/components/controls/ViewQuery';
import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
@@ -76,15 +78,15 @@ const Styles = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
padding: ${({ theme }) => 4 * theme.gridUnit}px;
padding-right: ${({ theme }) => 2 * theme.gridUnit}px;
border-bottom: 1px solid ${({ theme }) => theme.colorSplit};
padding: ${({ theme }) => 4 * theme.sizeUnit}px;
padding-right: ${({ theme }) => 2 * theme.sizeUnit}px;
}
.error-alert {
margin: ${({ theme }) => 2 * theme.gridUnit}px;
margin: ${({ theme }) => 2 * theme.sizeUnit}px;
}
.antd5-dropdown-trigger {
margin-left: ${({ theme }) => 2 * theme.gridUnit}px;
.ant-dropdown-trigger {
margin-left: ${({ theme }) => 2 * theme.sizeUnit}px;
}
.btn-group .open .dropdown-toggle {
box-shadow: none;
@@ -93,32 +95,30 @@ const Styles = styled.div`
}
}
i.angle {
color: ${({ theme }) => theme.colors.primary.base};
color: ${({ theme }) => theme.colorPrimary};
}
svg.datasource-modal-trigger {
color: ${({ theme }) => theme.colors.primary.base};
color: ${({ theme }) => theme.colorPrimary};
cursor: pointer;
}
.title-select {
flex: 1 1 100%;
display: inline-block;
background-color: ${({ theme }) => theme.colors.grayscale.light3};
padding: ${({ theme }) => theme.gridUnit * 2}px;
padding: ${({ theme }) => theme.sizeUnit * 2}px 0px;
border-radius: ${({ theme }) => theme.borderRadius}px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.datasource-svg {
margin-right: ${({ theme }) => 2 * theme.gridUnit}px;
margin-right: ${({ theme }) => 2 * theme.sizeUnit}px;
flex: none;
}
span[aria-label='dataset-physical'] {
color: ${({ theme }) => theme.colors.grayscale.base};
}
span[aria-label='more'] {
color: ${({ theme }) => theme.colors.primary.base};
color: ${({ theme }) => theme.colorPrimary};
}
`;
@@ -403,9 +403,9 @@ class DatasourceControl extends PureComponent {
<Tooltip title={healthCheckMessage}>
<Icons.WarningOutlined
css={css`
margin-left: ${theme.gridUnit * 2}px;
margin-left: ${theme.sizeUnit * 2}px;
`}
iconColor={theme.colors.warning.base}
iconColor={theme.colorWarning}
/>
</Tooltip>
)}
@@ -444,19 +444,27 @@ class DatasourceControl extends PureComponent {
{isMissingDatasource && !isMissingParams && (
<div className="error-alert">
<ErrorAlert
level="warning"
type="warning"
errorType={t('Missing dataset')}
description={
descriptionPre={false}
descriptionDetailsCollapsed={false}
descriptionDetails={
<>
{t('The dataset linked to this chart may have been deleted.')}
<Button
buttonStyle="primary"
onClick={() =>
this.handleMenuItemClick({ key: CHANGE_DATASET })
}
>
{t('Swap dataset')}
</Button>
<p>
{t(
'The dataset linked to this chart may have been deleted.',
)}
</p>
<p>
<Button
buttonStyle="warning"
onClick={() =>
this.handleMenuItemClick({ key: CHANGE_DATASET })
}
>
{t('Swap dataset')}
</Button>
</p>
</>
}
/>