This is an automated email from the ASF dual-hosted git repository. enzomartellucci pushed a commit to branch enxdev/refactor/ui-html-to-antd5 in repository https://gitbox.apache.org/repos/asf/superset.git
commit 3909637d20325cc96233a5a1d1c4a697caf6049b Author: Enzo Martellucci <[email protected]> AuthorDate: Thu Apr 24 17:29:07 2025 +0200 refactor: replace <h3> and <h4> with Ant Design 5 Typography.Title component --- .../src/components/ErrorMessage/ErrorAlert.tsx | 12 +++++++--- .../src/components/IconButton/index.tsx | 2 +- .../components/Typography/Typography.stories.tsx | 2 +- .../src/components/Typography/Typography.test.tsx | 2 +- .../src/components/Typography/index.tsx | 4 +--- .../dashboard/components/PropertiesModal/index.tsx | 27 +++++++++++++++------- .../explore/components/PropertiesModal/index.tsx | 17 ++++++++++---- .../src/features/alerts/AlertReportModal.tsx | 7 +++++- .../alerts/components/ValidatedPanelHeader.tsx | 2 +- .../annotationLayers/AnnotationLayerModal.tsx | 7 +++--- .../src/features/cssTemplates/CssTemplateModal.tsx | 7 +++--- .../DatabaseConnectionForm/TableCatalog.tsx | 5 ++-- .../databases/DatabaseModal/ExtraOptions.tsx | 2 +- .../databases/DatabaseModal/ModalHeader.tsx | 25 ++++++++++++-------- .../databases/UploadDataModel/ColumnsPreview.tsx | 2 +- .../src/features/reports/ReportModal/index.tsx | 10 +++++--- .../src/features/rls/RowLevelSecurityModal.tsx | 5 ++-- 17 files changed, 90 insertions(+), 48 deletions(-) diff --git a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx index 0e4c332592..1bb843fbc9 100644 --- a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx +++ b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx @@ -23,6 +23,7 @@ import { Tooltip } from '../Tooltip'; import { Alert } from '../Alert'; import { Modal } from '../Modal'; import type { ErrorAlertProps } from './types'; +import { Typography } from '../Typography'; export const ErrorAlert: React.FC<ErrorAlertProps> = ({ errorType = t('Error'), @@ -72,14 +73,19 @@ export const ErrorAlert: React.FC<ErrorAlertProps> = ({ <div> {message && <div>{message}</div>} {description && ( - <p style={descriptionPre ? preStyle : {}} data-testid="description"> + <Typography.Paragraph + style={descriptionPre ? preStyle : {}} + data-testid="description" + > {description} - </p> + </Typography.Paragraph> )} {descriptionDetails && ( <div> {isDescriptionVisible && ( - <p style={descriptionPre ? preStyle : {}}>{descriptionDetails}</p> + <Typography.Paragraph style={descriptionPre ? preStyle : {}}> + {descriptionDetails} + </Typography.Paragraph> )} <span role="button" diff --git a/superset-frontend/src/components/IconButton/index.tsx b/superset-frontend/src/components/IconButton/index.tsx index 2d45312a59..e473fd909e 100644 --- a/superset-frontend/src/components/IconButton/index.tsx +++ b/superset-frontend/src/components/IconButton/index.tsx @@ -18,7 +18,7 @@ */ // eslint-disable-next-line -import Typography from 'src/components/Typography'; +import { Typography } from 'src/components/Typography'; import { Icons } from 'src/components/Icons'; import { SupersetTheme, css } from '@superset-ui/core'; import { Card } from '../Card'; diff --git a/superset-frontend/src/components/Typography/Typography.stories.tsx b/superset-frontend/src/components/Typography/Typography.stories.tsx index 01b7aa2053..3cc48f2b6f 100644 --- a/superset-frontend/src/components/Typography/Typography.stories.tsx +++ b/superset-frontend/src/components/Typography/Typography.stories.tsx @@ -17,7 +17,7 @@ * under the License. */ import type { Meta, StoryObj } from '@storybook/react'; -import Typography from 'src/components/Typography'; +import { Typography } from 'src/components/Typography'; export default { title: 'Components/Typography', diff --git a/superset-frontend/src/components/Typography/Typography.test.tsx b/superset-frontend/src/components/Typography/Typography.test.tsx index d0418cb4ba..13c899a21c 100644 --- a/superset-frontend/src/components/Typography/Typography.test.tsx +++ b/superset-frontend/src/components/Typography/Typography.test.tsx @@ -18,7 +18,7 @@ */ import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; -import Typography from 'src/components/Typography'; +import { Typography } from 'src/components/Typography'; describe('Typography Component', () => { test('renders Text component', () => { diff --git a/superset-frontend/src/components/Typography/index.tsx b/superset-frontend/src/components/Typography/index.tsx index 9c8aa82904..1182c1232c 100644 --- a/superset-frontend/src/components/Typography/index.tsx +++ b/superset-frontend/src/components/Typography/index.tsx @@ -16,6 +16,4 @@ * specific language governing permissions and limitations * under the License. */ -import { Typography } from 'antd-v5'; - -export default Typography; +export { Typography, type TypographyProps } from 'antd-v5'; diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx index ba83e002f4..ecc75e2b42 100644 --- a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx +++ b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx @@ -30,6 +30,7 @@ import { Col, Input, } from 'src/components'; +import { Typography } from 'src/components/Typography'; import rison from 'rison'; import { ensureIsArray, @@ -444,7 +445,9 @@ const PropertiesModal = ({ return ( <Row gutter={16}> <Col xs={24} md={12}> - <h3 style={{ marginTop: '1em' }}>{t('Access')}</h3> + <Typography.Title level={3} style={{ marginTop: '1em' }}> + {t('Access')} + </Typography.Title> <StyledFormItem label={t('Owners')}> <AsyncSelect allowClear @@ -465,7 +468,9 @@ const PropertiesModal = ({ </p> </Col> <Col xs={24} md={12}> - <h3 style={{ marginTop: '1em' }}>{t('Colors')}</h3> + <Typography.Title level={3} style={{ marginTop: '1em' }}> + {t('Colors')} + </Typography.Title> <ColorSchemeControlWrapper hasCustomLabelsColor={hasCustomLabelsColor} onChange={onColorSchemeChange} @@ -486,7 +491,9 @@ const PropertiesModal = ({ <> <Row> <Col xs={24} md={24}> - <h3 style={{ marginTop: '1em' }}>{t('Access')}</h3> + <Typography.Title level={3} style={{ marginTop: '1em' }}> + {t('Access')} + </Typography.Title> </Col> </Row> <Row gutter={16}> @@ -646,7 +653,9 @@ const PropertiesModal = ({ > <Row> <Col xs={24} md={24}> - <h3>{t('Basic information')}</h3> + <Typography.Title level={3}> + {t('Basic information')} + </Typography.Title> </Col> </Row> <Row gutter={16}> @@ -673,7 +682,7 @@ const PropertiesModal = ({ : getRowsWithoutRoles()} <Row> <Col xs={24} md={24}> - <h3>{t('Certification')}</h3> + <Typography.Title level={3}>{t('Certification')}</Typography.Title> </Col> </Row> <Row gutter={16}> @@ -700,7 +709,9 @@ const PropertiesModal = ({ {isFeatureEnabled(FeatureFlag.TaggingSystem) ? ( <Row gutter={16}> <Col xs={24} md={12}> - <h3 css={{ marginTop: '1em' }}>{t('Tags')}</h3> + <Typography.Title level={3} css={{ marginTop: '1em' }}> + {t('Tags')} + </Typography.Title> </Col> </Row> ) : null} @@ -725,7 +736,7 @@ const PropertiesModal = ({ ) : null} <Row> <Col xs={24} md={24}> - <h3 style={{ marginTop: '1em' }}> + <Typography.Title level={3} style={{ marginTop: '1em' }}> <Button buttonStyle="link" onClick={() => setIsAdvancedOpen(!isAdvancedOpen)} @@ -740,7 +751,7 @@ const PropertiesModal = ({ /> {t('Advanced')} </Button> - </h3> + </Typography.Title> {isAdvancedOpen && ( <> <StyledFormItem label={t('JSON metadata')}> diff --git a/superset-frontend/src/explore/components/PropertiesModal/index.tsx b/superset-frontend/src/explore/components/PropertiesModal/index.tsx index d41f7a0715..6ac8ecaa97 100644 --- a/superset-frontend/src/explore/components/PropertiesModal/index.tsx +++ b/superset-frontend/src/explore/components/PropertiesModal/index.tsx @@ -46,6 +46,7 @@ import withToasts from 'src/components/MessageToasts/withToasts'; import { loadTags } from 'src/components/Tag/utils'; import { fetchTags, OBJECT_TYPES } from 'src/features/tags/tags'; import TagType from 'src/types/TagType'; +import { Typography } from 'src/components/Typography'; export type PropertiesModalProps = { slice: Slice; @@ -315,7 +316,9 @@ function PropertiesModal({ > <Row gutter={16}> <Col xs={24} md={12}> - <h3>{t('Basic information')}</h3> + <Typography.Title level={3}> + {t('Basic information')} + </Typography.Title> <FormItem label={t('Name')} required> <Input aria-label={t('Name')} @@ -338,7 +341,7 @@ function PropertiesModal({ )} </StyledHelpBlock> </FormItem> - <h3>{t('Certification')}</h3> + <Typography.Title level={3}>{t('Certification')}</Typography.Title> <FormItem> <StyledFormItem label={t('Certified by')} name="certified_by"> <Input aria-label={t('Certified by')} /> @@ -362,7 +365,7 @@ function PropertiesModal({ </FormItem> </Col> <Col xs={24} md={12}> - <h3>{t('Configuration')}</h3> + <Typography.Title level={3}>{t('Configuration')}</Typography.Title> <FormItem> <StyledFormItem label={t('Cache timeout')} name="cache_timeout"> <Input aria-label="Cache timeout" /> @@ -373,7 +376,9 @@ function PropertiesModal({ )} </StyledHelpBlock> </FormItem> - <h3 style={{ marginTop: '1em' }}>{t('Access')}</h3> + <Typography.Title level={3} style={{ marginTop: '1em' }}> + {t('Access')} + </Typography.Title> <FormItem label={ownersLabel}> <AsyncSelect ariaLabel={ownersLabel} @@ -392,7 +397,9 @@ function PropertiesModal({ </StyledHelpBlock> </FormItem> {isFeatureEnabled(FeatureFlag.TaggingSystem) && ( - <h3 css={{ marginTop: '1em' }}>{t('Tags')}</h3> + <Typography.Title level={3} css={{ marginTop: '1em' }}> + {t('Tags')} + </Typography.Title> )} {isFeatureEnabled(FeatureFlag.TaggingSystem) && ( <FormItem> diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx index 651ba28d24..f5c468e9c0 100644 --- a/superset-frontend/src/features/alerts/AlertReportModal.tsx +++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx @@ -78,6 +78,7 @@ import { import { useSelector } from 'react-redux'; import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes'; import { Icons } from 'src/components/Icons'; +import { Typography } from 'src/components/Typography'; import NumberInput from './components/NumberInput'; import { AlertReportCronScheduler } from './components/AlertReportCronScheduler'; import { NotificationMethod } from './components/NotificationMethod'; @@ -1462,7 +1463,11 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({ show={show} width="500px" centered - title={<h4 data-test="alert-report-modal-title">{getTitleText()}</h4>} + title={ + <Typography.Title level={4} data-test="alert-report-modal-title"> + {getTitleText()} + </Typography.Title> + } > <Collapse expandIconPosition="right" diff --git a/superset-frontend/src/features/alerts/components/ValidatedPanelHeader.tsx b/superset-frontend/src/features/alerts/components/ValidatedPanelHeader.tsx index e585861201..a19f82597e 100644 --- a/superset-frontend/src/features/alerts/components/ValidatedPanelHeader.tsx +++ b/superset-frontend/src/features/alerts/components/ValidatedPanelHeader.tsx @@ -19,7 +19,7 @@ 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'; +import { Typography } from 'src/components/Typography'; const ValidatedPanelHeader = ({ title, diff --git a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx index cf98f44e29..8e7352edf9 100644 --- a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx +++ b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx @@ -22,6 +22,7 @@ import { css, styled, t, useTheme } from '@superset-ui/core'; import { useSingleViewResource } from 'src/views/CRUD/hooks'; import { Icons } from 'src/components/Icons'; +import { Typography } from 'src/components/Typography'; import { Input, Modal } from 'src/components'; import withToasts from 'src/components/MessageToasts/withToasts'; @@ -235,7 +236,7 @@ const AnnotationLayerModal: FunctionComponent<AnnotationLayerModalProps> = ({ show={show} width="55%" title={ - <h4 data-test="annotation-layer-modal-title"> + <Typography.Title level={4} data-test="annotation-layer-modal-title"> {isEditMode ? ( <Icons.EditOutlined iconSize="l" @@ -255,11 +256,11 @@ const AnnotationLayerModal: FunctionComponent<AnnotationLayerModalProps> = ({ {isEditMode ? t('Edit annotation layer properties') : t('Add annotation layer')} - </h4> + </Typography.Title> } > <StyledAnnotationLayerTitle> - <h4>{t('Basic information')}</h4> + <Typography.Title level={4}>{t('Basic information')}</Typography.Title> </StyledAnnotationLayerTitle> <LayerContainer> <div className="control-label"> diff --git a/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx b/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx index da37b58a55..423190877f 100644 --- a/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx +++ b/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx @@ -24,6 +24,7 @@ import { useSingleViewResource } from 'src/views/CRUD/hooks'; import { Icons } from 'src/components/Icons'; import withToasts from 'src/components/MessageToasts/withToasts'; import { Input, CssEditor, Modal } from 'src/components'; +import { Typography } from 'src/components/Typography'; import { OnlyKeyWithType } from 'src/utils/types'; import { TemplateObject } from './types'; @@ -231,7 +232,7 @@ const CssTemplateModal: FunctionComponent<CssTemplateModalProps> = ({ show={show} width="55%" title={ - <h4 data-test="css-template-modal-title"> + <Typography.Title level={4} data-test="css-template-modal-title"> {isEditMode ? ( <Icons.EditOutlined iconSize="l" @@ -250,11 +251,11 @@ const CssTemplateModal: FunctionComponent<CssTemplateModalProps> = ({ {isEditMode ? t('Edit CSS template properties') : t('Add CSS template')} - </h4> + </Typography.Title> } > <StyledCssTemplateTitle> - <h4>{t('Basic information')}</h4> + <Typography.Title level={4}>{t('Basic information')}</Typography.Title> </StyledCssTemplateTitle> <TemplateContainer> <div className="control-label"> diff --git a/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx b/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx index de2d9245c6..3f4fca97b6 100644 --- a/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx +++ b/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx @@ -22,6 +22,7 @@ import { LabeledErrorBoundInput as ValidatedInput, } from 'src/components'; import { Icons } from 'src/components/Icons'; +import { Typography } from 'src/components/Typography'; import { StyledFooterButton, StyledCatalogTable } from '../styles'; import { CatalogObject, FieldPropTypes } from '../../types'; @@ -36,9 +37,9 @@ export const TableCatalog = ({ const catalogError = validationErrors || {}; return ( <StyledCatalogTable> - <h4 className="gsheet-title"> + <Typography.Title level={4} className="gsheet-title"> {t('Connect Google Sheets as tables to this database')} - </h4> + </Typography.Title> <div> {tableCatalog?.map((sheet: CatalogObject, idx: number) => ( <> diff --git a/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx b/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx index bb723e8beb..ce30a04205 100644 --- a/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx +++ b/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx @@ -33,7 +33,7 @@ import { InfoTooltip, type CheckboxChangeEvent, } from 'src/components'; -import Typography from 'src/components/Typography'; +import { Typography } from 'src/components/Typography'; import { StyledInputContainer, StyledJsonEditor, diff --git a/superset-frontend/src/features/databases/DatabaseModal/ModalHeader.tsx b/superset-frontend/src/features/databases/DatabaseModal/ModalHeader.tsx index 65308c52e0..304520de9b 100644 --- a/superset-frontend/src/features/databases/DatabaseModal/ModalHeader.tsx +++ b/superset-frontend/src/features/databases/DatabaseModal/ModalHeader.tsx @@ -17,16 +17,17 @@ * under the License. */ +import { t } from '@superset-ui/core'; import { getDatabaseDocumentationLinks } from 'src/views/CRUD/hooks'; import { UploadFile } from 'src/components/Upload'; -import { t } from '@superset-ui/core'; +import { Typography } from 'src/components/Typography'; +import { DatabaseForm, DatabaseObject } from '../types'; import { EditHeaderTitle, EditHeaderSubtitle, StyledFormHeader, StyledStickyHeader, } from './styles'; -import { DatabaseForm, DatabaseObject } from '../types'; const supersetTextDocs = getDatabaseDocumentationLinks(); @@ -100,7 +101,9 @@ const ModalHeader = ({ stepLast: 2, })} </p> - <h4>{t('Enter Primary Credentials')}</h4> + <Typography.Title level={4}> + {t('Enter Primary Credentials')} + </Typography.Title> <p className="helper-bottom"> {t('Need help? Learn how to connect your database')}{' '} <a @@ -124,7 +127,9 @@ const ModalHeader = ({ stepLast: 3, })} </p> - <h4 className="step-3-text">{t('Database connected')}</h4> + <Typography.Title level={4} className="step-3-text"> + {t('Database connected')} + </Typography.Title> <p className="subheader-text"> {t(`Create a dataset to begin visualizing your data as a chart or go to SQL Lab to query your data.`)} @@ -142,11 +147,11 @@ const ModalHeader = ({ stepLast: 3, })} </p> - <h4> + <Typography.Title level={4}> {t('Enter the required %(dbModelName)s credentials', { dbModelName: dbModel.name, })} - </h4> + </Typography.Title> <p className="helper-bottom"> {t('Need help? Learn more about')}{' '} <a @@ -170,7 +175,9 @@ const ModalHeader = ({ stepLast: 3, })} </p> - <h4>{t('Select a database to connect')}</h4> + <Typography.Title level={4}> + {t('Select a database to connect')} + </Typography.Title> </div> </StyledFormHeader> ); @@ -184,11 +191,11 @@ const ModalHeader = ({ stepLast: 2, })} </p> - <h4> + <Typography.Title level={4}> {t('Enter the required %(dbModelName)s credentials', { dbModelName: dbModel.name, })} - </h4> + </Typography.Title> <p className="helper-bottom">{fileCheck ? fileList[0].name : ''}</p> </StyledFormHeader> </StyledStickyHeader> diff --git a/superset-frontend/src/features/databases/UploadDataModel/ColumnsPreview.tsx b/superset-frontend/src/features/databases/UploadDataModel/ColumnsPreview.tsx index a934b7a058..c0a8f23cb1 100644 --- a/superset-frontend/src/features/databases/UploadDataModel/ColumnsPreview.tsx +++ b/superset-frontend/src/features/databases/UploadDataModel/ColumnsPreview.tsx @@ -18,7 +18,7 @@ */ import { FC } from 'react'; import { styled, t } from '@superset-ui/core'; -import Typography from 'src/components/Typography'; +import { Typography } from 'src/components/Typography'; import TagsList from 'src/components/TagsList'; import TagType from 'src/types/TagType'; diff --git a/superset-frontend/src/features/reports/ReportModal/index.tsx b/superset-frontend/src/features/reports/ReportModal/index.tsx index e181f5abce..6b31146c47 100644 --- a/superset-frontend/src/features/reports/ReportModal/index.tsx +++ b/superset-frontend/src/features/reports/ReportModal/index.tsx @@ -44,6 +44,7 @@ import { } from 'src/components'; import TimezoneSelector from 'src/components/TimezoneSelector'; import { Icons } from 'src/components/Icons'; +import { Typography } from 'src/components/Typography'; import { Radio, RadioChangeEvent } from 'src/components/Radio'; import withToasts from 'src/components/MessageToasts/withToasts'; import { ChartState } from 'src/explore/types'; @@ -254,7 +255,7 @@ function ReportModal({ const renderMessageContentSection = ( <> <StyledMessageContentTitle> - <h4>{t('Message content')}</h4> + <Typography.Title level={4}>{t('Message content')}</Typography.Title> </StyledMessageContentTitle> <div className="inline-container"> <Radio.GroupWrapper @@ -350,9 +351,12 @@ function ReportModal({ <StyledBottomSection> <StyledScheduleTitle> - <h4 css={(theme: SupersetTheme) => SectionHeaderStyle(theme)}> + <Typography.Title + level={5} + css={(theme: SupersetTheme) => SectionHeaderStyle(theme)} + > {t('Schedule')} - </h4> + </Typography.Title> <p>{t('The report will be sent to your email at')}</p> </StyledScheduleTitle> diff --git a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx index b745990712..67d589e754 100644 --- a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx +++ b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx @@ -28,6 +28,7 @@ import { LabeledErrorBoundInput, Input, } from 'src/components'; +import { Typography } from 'src/components/Typography'; import rison from 'rison'; import { useSingleViewResource } from 'src/views/CRUD/hooks'; import { FILTER_OPTIONS } from './constants'; @@ -335,7 +336,7 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) { width="30%" maxWidth="1450px" title={ - <h4 data-test="rls-modal-title"> + <Typography.Title level={4} data-test="rls-modal-title"> {isEditMode ? ( <Icons.EditOutlined css={css` @@ -351,7 +352,7 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) { /> )} {isEditMode ? t('Edit Rule') : t('Add Rule')} - </h4> + </Typography.Title> } > <StyledSectionContainer>
