From 5a7e356474adb0f18694971880c274aa207f4245 Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Thu, 2 Jan 2025 12:54:16 -0800 Subject: [PATCH] type and lint --- .../superset-ui-core/src/theme/Theme.test.tsx | 1 - .../superset-ui-core/src/theme/Theme.tsx | 93 +++++++++++-------- .../superset-ui-core/src/theme/index.tsx | 10 +- superset-frontend/scripts/compileLess.ts | 4 +- superset-frontend/src/preamble.ts | 4 +- 5 files changed, 65 insertions(+), 47 deletions(-) diff --git a/superset-frontend/packages/superset-ui-core/src/theme/Theme.test.tsx b/superset-frontend/packages/superset-ui-core/src/theme/Theme.test.tsx index 7f896adcaa847..35c5c3bb25a55 100644 --- a/superset-frontend/packages/superset-ui-core/src/theme/Theme.test.tsx +++ b/superset-frontend/packages/superset-ui-core/src/theme/Theme.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import { Theme } from './Theme'; import '@testing-library/jest-dom'; diff --git a/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx b/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx index 74b6d0cc9da08..eb9b5d0498c42 100644 --- a/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx +++ b/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx @@ -131,15 +131,9 @@ export interface SupersetTheme extends LegacySupersetTheme { } export class Theme { - private readonly isDarkMode: boolean; + private legacyTheme: LegacySupersetTheme; - private legacyTheme: LegacySupersetTheme | null = null; - - private theme: SupersetTheme | null = null; - - private antdTheme: Record | null = null; - - public antdConfig: ThemeConfig | undefined = undefined; + private antdTheme: Record; private static readonly denyList: RegExp[] = [ /purple.*/, @@ -158,16 +152,20 @@ export class Theme { /orange.*/, ]; + public antdConfig: ThemeConfig; + + public theme: SupersetTheme; + constructor(systemColors?: Partial, isDarkMode = false) { - this.isDarkMode = isDarkMode; this.setThemeWithSystemColors(systemColors || {}, isDarkMode); this.getTheme = this.getTheme.bind(this); + this.updateTheme = this.updateTheme.bind(this); this.SupersetThemeProvider = this.SupersetThemeProvider.bind(this); } getTheme(): SupersetTheme { - if (!this.legacyTheme) { + if (!this.legacyTheme || !this.antdTheme) { throw new Error('Legacy theme is not initialized.'); } return { @@ -225,47 +223,47 @@ export class Theme { private generateColors( systemColors: SystemColors, - isDarkTheme = false, + isDarkMode = false, ): ThemeColors { return { - darkest: isDarkTheme ? '#FFF' : '#000', - lightest: isDarkTheme ? '#000' : '#FFF', + darkest: isDarkMode ? '#FFF' : '#000', + lightest: isDarkMode ? '#000' : '#FFF', text: { label: '#879399', help: '#737373', }, - primary: this.generateColorVariations(systemColors.primary, isDarkTheme), + primary: this.generateColorVariations(systemColors.primary, isDarkMode), secondary: this.generateColorVariations( systemColors.secondary, - isDarkTheme, + isDarkMode, ), - error: this.generateColorVariations(systemColors.error, isDarkTheme), - warning: this.generateColorVariations(systemColors.warning, isDarkTheme), - alert: this.generateColorVariations(systemColors.alert, isDarkTheme), - success: this.generateColorVariations(systemColors.success, isDarkTheme), - info: this.generateColorVariations(systemColors.info, isDarkTheme), + error: this.generateColorVariations(systemColors.error, isDarkMode), + warning: this.generateColorVariations(systemColors.warning, isDarkMode), + alert: this.generateColorVariations(systemColors.alert, isDarkMode), + success: this.generateColorVariations(systemColors.success, isDarkMode), + info: this.generateColorVariations(systemColors.info, isDarkMode), grayscale: this.generateColorVariations( systemColors.grayscale, - isDarkTheme, + isDarkMode, ), }; } private getLegacySupersetTheme( systemColors: Partial, - isDarkTheme = false, + isDarkMode = false, ): LegacySupersetTheme { const allSystemColors: SystemColors = { ...DEFAULT_SYSTEM_COLORS, ...systemColors, }; - const colors = this.generateColors(allSystemColors, isDarkTheme); - let theme: LegacySupersetTheme = { + const colors = this.generateColors(allSystemColors, isDarkMode); + const theme: LegacySupersetTheme = { colors, borderRadius: 4, body: { - backgroundColor: '#FFF', - color: '#000', + backgroundColor: isDarkMode ? '#000' : '#FFF', + color: isDarkMode ? '#FFF' : '#000', }, opacity: { light: '10%', @@ -350,9 +348,12 @@ export class Theme { return filteredTheme; } - private setAntdThemeFromLegacyTheme(legacyTheme: LegacySupersetTheme): void { + private setAntdThemeFromLegacyTheme( + legacyTheme: LegacySupersetTheme, + isDarkMode: boolean, + ): void { const seed = this.getAntdSeedFromLegacyTheme(legacyTheme); - const algorithm = this.isDarkMode + const algorithm = isDarkMode ? antdThemeImport.darkAlgorithm : antdThemeImport.defaultAlgorithm; @@ -364,43 +365,57 @@ export class Theme { this.antdTheme = algorithm(seed as any); } - private updateTheme(legacyTheme: LegacySupersetTheme): void { + private updateTheme( + legacyTheme: LegacySupersetTheme, + isDarkMode: boolean, + ): void { this.legacyTheme = legacyTheme; - this.setAntdThemeFromLegacyTheme(legacyTheme); + this.setAntdThemeFromLegacyTheme(legacyTheme, isDarkMode); this.theme = this.getTheme(); - this.updateProviders({ theme: this.theme, antdConfig: this.antdConfig }); + this.updateProviders( + this.theme, + this.antdConfig, + createCache({ key: 'superset' }), + ); } setThemeWithSystemColors( systemColors: Partial, isDarkMode: boolean, ): void { - this.updateTheme(this.getLegacySupersetTheme(systemColors, isDarkMode)); + const legacyTheme = this.getLegacySupersetTheme(systemColors, isDarkMode); + this.updateTheme(legacyTheme, isDarkMode); } mergeTheme(partialTheme: Partial): void { - this.updateTheme(merge({}, this.legacyTheme, partialTheme)); + const mergedTheme = merge({}, this.legacyTheme, partialTheme); + this.updateTheme(mergedTheme, false); // Assuming isDarkMode = false for mergeTheme } - private updateProviders(theme: SupersetTheme, antdConfig): void {} + private updateProviders( + theme: SupersetTheme, + antdConfig: ThemeConfig, + emotionCache: any, + ): void {} SupersetThemeProvider({ children }: { children: React.ReactNode }) { if (!this.theme || !this.antdConfig) { throw new Error('Theme is not initialized.'); } + // eslint-disable-next-line react-hooks/rules-of-hooks const [themeState, setThemeState] = React.useState({ theme: this.theme, antdConfig: this.antdConfig, + emotionCache: createCache({ key: 'superset' }), }); - this.updateProviders = setThemeState; + this.updateProviders = (theme, antdConfig, emotionCache) => { + setThemeState({ theme, antdConfig, emotionCache }); + }; - const emotionCache = createCache({ - key: 'superset', - }); return ( - + {children} diff --git a/superset-frontend/packages/superset-ui-core/src/theme/index.tsx b/superset-frontend/packages/superset-ui-core/src/theme/index.tsx index 8615174c99222..080ed65264f9e 100644 --- a/superset-frontend/packages/superset-ui-core/src/theme/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/theme/index.tsx @@ -18,7 +18,8 @@ */ import emotionStyled from '@emotion/styled'; import { useTheme as useThemeBasic } from '@emotion/react'; -import { Theme as SupersetThemeClass, SupersetTheme } from './Theme'; +import { Theme as SupersetThemeClass } from './Theme'; +import type { SupersetTheme } from './Theme'; export { css, @@ -47,10 +48,11 @@ export function useTheme() { } const styled = emotionStyled; -const themeObject = new SupersetThemeClass({}, true); -themeObject; -const theme: SupersetTheme = themeObject.getTheme(); +const themeObject = new SupersetThemeClass({}, false); +themeObject.setThemeWithSystemColors({}, true); + +const { theme } = themeObject; const supersetTheme = theme; export { diff --git a/superset-frontend/scripts/compileLess.ts b/superset-frontend/scripts/compileLess.ts index dd177ce461772..f31c4ad222026 100644 --- a/superset-frontend/scripts/compileLess.ts +++ b/superset-frontend/scripts/compileLess.ts @@ -21,9 +21,9 @@ import * as path from 'path'; import Handlebars from 'handlebars'; import { themeObject } from 'packages/superset-ui-core/src/theme'; // Adjust the path as needed -// eslint-disable @no-console +// eslint-disable no-console Handlebars.escapeExpression = (value: string) => value; -const theme = themeObject.getTheme(); +const { theme } = themeObject; // Function to apply a template and generate the output function applyTemplate(filePath: string): void { diff --git a/superset-frontend/src/preamble.ts b/superset-frontend/src/preamble.ts index 44d1249b8360b..e301c64b2099b 100644 --- a/superset-frontend/src/preamble.ts +++ b/superset-frontend/src/preamble.ts @@ -67,7 +67,9 @@ setupFormatters( setupDashboardComponents(); -themeObject.mergeTheme(bootstrapData.common.theme_overrides); +if (bootstrapData?.common?.theme_overrides) { + themeObject.mergeTheme(bootstrapData.common.theme_overrides); +} const getMe = makeApi({ method: 'GET',