This is an automated email from the ASF dual-hosted git repository.
msyavuz pushed a commit to branch template_less
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/template_less by this push:
new 50535a92a0 fix: upgrade tabs in database modal (#33038)
50535a92a0 is described below
commit 50535a92a071f13a030336ee0e65f42c6c0c2487
Author: Damian Pendrak <[email protected]>
AuthorDate: Wed Apr 16 20:39:49 2025 +0200
fix: upgrade tabs in database modal (#33038)
Co-authored-by: Maxime Beauchemin <[email protected]>
Co-authored-by: Mehmet Salih Yavuz <[email protected]>
---
.../src/components/Collapse/Collapse.stories.tsx | 1 +
.../src/components/Collapse/index.tsx | 7 +++++
superset-frontend/src/components/Collapse/types.ts | 1 +
.../FiltersConfigForm/FiltersConfigForm.tsx | 1 +
.../src/features/alerts/AlertReportModal.tsx | 1 +
.../alerts/components/ValidatedPanelHeader.tsx | 36 +++++++++++++++++-----
.../databases/DatabaseModal/ExtraOptions.tsx | 26 +++++++++++-----
.../features/databases/UploadDataModel/index.tsx | 1 +
8 files changed, 58 insertions(+), 16 deletions(-)
diff --git a/superset-frontend/src/components/Collapse/Collapse.stories.tsx
b/superset-frontend/src/components/Collapse/Collapse.stories.tsx
index c3ae01a5a3..a75646ad6b 100644
--- a/superset-frontend/src/components/Collapse/Collapse.stories.tsx
+++ b/superset-frontend/src/components/Collapse/Collapse.stories.tsx
@@ -48,6 +48,7 @@ InteractiveCollapse.args = {
bordered: true,
accordion: false,
animateArrows: false,
+ modalMode: false,
};
InteractiveCollapse.argTypes = {
diff --git a/superset-frontend/src/components/Collapse/index.tsx
b/superset-frontend/src/components/Collapse/index.tsx
index faf1eda5ec..2a61c088f3 100644
--- a/superset-frontend/src/components/Collapse/index.tsx
+++ b/superset-frontend/src/components/Collapse/index.tsx
@@ -23,6 +23,13 @@ import type { CollapseProps } from './types';
export const Collapse = styled((props: CollapseProps) => (
<AntdCollapse {...props} />
))`
+ ${({ modalMode }) =>
+ modalMode &&
+ `
+ border-radius: 0;
+ border-left: 0;
+ border-right: 0;
+ `}
.antd5-collapse-item {
.antd5-collapse-header {
.antd5-collapse-arrow svg {
diff --git a/superset-frontend/src/components/Collapse/types.ts
b/superset-frontend/src/components/Collapse/types.ts
index 54731170f5..18dff1e9ad 100644
--- a/superset-frontend/src/components/Collapse/types.ts
+++ b/superset-frontend/src/components/Collapse/types.ts
@@ -20,4 +20,5 @@ import type { CollapseProps as AntdCollapseProps } from
'antd-v5';
export interface CollapseProps extends AntdCollapseProps {
animateArrows?: boolean;
+ modalMode?: boolean;
}
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
index 6a8d4056e0..33dca064d4 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -877,6 +877,7 @@ const FiltersConfigForm = (
</StyledRowContainer>
)}
<Collapse
+ modalMode
defaultActiveKey={activeFilterPanelKeys}
onChange={key => {
handleActiveFilterPanelChange(key);
diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx
b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index 4aa803d237..651ba28d24 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -1468,6 +1468,7 @@ const AlertReportModal:
FunctionComponent<AlertReportModalProps> = ({
expandIconPosition="right"
defaultActiveKey="general"
accordion
+ modalMode
items={[
{
key: 'general',
diff --git
a/superset-frontend/src/features/alerts/components/ValidatedPanelHeader.tsx
b/superset-frontend/src/features/alerts/components/ValidatedPanelHeader.tsx
index 46411bbc3f..e585861201 100644
--- a/superset-frontend/src/features/alerts/components/ValidatedPanelHeader.tsx
+++ b/superset-frontend/src/features/alerts/components/ValidatedPanelHeader.tsx
@@ -18,6 +18,8 @@
*/
import { t, useTheme } from '@superset-ui/core';
import { Icons } from 'src/components/Icons';
+import { Space } from 'src/components/Space';
+import Typography from 'src/components/Typography';
const ValidatedPanelHeader = ({
title,
@@ -38,18 +40,36 @@ const ValidatedPanelHeader = ({
/>
);
return (
- <div className="collapse-panel-header">
- <div className="collapse-panel-title" data-test={testId}>
- <span>{t(title)}</span>
+ <div>
+ <Space size="small" data-test={testId}>
+ <Typography.Title
+ level={5}
+ style={{
+ margin: 0,
+ }}
+ >
+ {t(title)}
+ </Typography.Title>
{validateCheckStatus ? (
- <span className="validation-checkmark">{checkmark}</span>
+ <span>{checkmark}</span>
) : (
- <span className="collapse-panel-asterisk">{' *'}</span>
+ <span
+ style={{
+ color: theme.colors.error.base,
+ fontSize: theme.fontSizeLG,
+ }}
+ >
+ *
+ </span>
)}
- </div>
- <p className="collapse-panel-subtitle">
+ </Space>
+ <Typography.Paragraph
+ style={{
+ margin: 0,
+ }}
+ >
{subtitle ? t(subtitle) : undefined}
- </p>
+ </Typography.Paragraph>
</div>
);
};
diff --git
a/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx
b/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx
index 96020eba95..bb723e8beb 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx
@@ -33,6 +33,7 @@ import {
InfoTooltip,
type CheckboxChangeEvent,
} from 'src/components';
+import Typography from 'src/components/Typography';
import {
StyledInputContainer,
StyledJsonEditor,
@@ -93,13 +94,16 @@ const ExtraOptions = ({
<Collapse
expandIconPosition="right"
accordion
+ modalMode
items={[
{
key: 'sql-lab',
label: (
<div>
- <h4>{t('SQL Lab')}</h4>
- <p>{t('Adjust how this database will interact with SQL
Lab.')}</p>
+ <Typography.Title level={4}>{t('SQL Lab')}</Typography.Title>
+ <Typography.Paragraph>
+ {t('Adjust how this database will interact with SQL Lab.')}
+ </Typography.Paragraph>
</div>
),
children: (
@@ -286,8 +290,10 @@ const ExtraOptions = ({
key: 'performance',
label: (
<div>
- <h4>{t('Performance')}</h4>
- <p>{t('Adjust performance settings of this database.')}</p>
+ <Typography.Title level={4}>{t('Performance')}</Typography.Title>
+ <Typography.Paragraph>
+ {t('Adjust performance settings of this database.')}
+ </Typography.Paragraph>
</div>
),
children: (
@@ -411,8 +417,10 @@ const ExtraOptions = ({
key: 'security',
label: (
<div>
- <h4>{t('Security')}</h4>
- <p>{t('Add extra connection information.')}</p>
+ <Typography.Title level={4}>{t('Security')}</Typography.Title>
+ <Typography.Paragraph>
+ {t('Add extra connection information.')}
+ </Typography.Paragraph>
</div>
),
children: (
@@ -566,8 +574,10 @@ const ExtraOptions = ({
key: 'other',
label: (
<div>
- <h4>{t('Other')}</h4>
- <p>{t('Additional settings.')}</p>
+ <Typography.Title level={4}>{t('Other')}</Typography.Title>
+ <Typography.Paragraph>
+ {t('Additional settings.')}
+ </Typography.Paragraph>
</div>
),
children: (
diff --git a/superset-frontend/src/features/databases/UploadDataModel/index.tsx
b/superset-frontend/src/features/databases/UploadDataModel/index.tsx
index 2a7cdbd420..17a46396ac 100644
--- a/superset-frontend/src/features/databases/UploadDataModel/index.tsx
+++ b/superset-frontend/src/features/databases/UploadDataModel/index.tsx
@@ -598,6 +598,7 @@ const UploadDataModal:
FunctionComponent<UploadDataModalProps> = ({
expandIconPosition="right"
accordion
defaultActiveKey="general"
+ modalMode
items={[
{
key: 'general',
