feat: massive collaboratvie theming feature branch #31590

mistercrunch · 2024-12-20T22:32:36Z

Excuse the large PR, but this is fairly tangled up, and working on fixing up theming probably requires some massive PRs as it's really hard to proceed PR-by-PR - especially during the holiday break...

Introducing less handlebars templates

First. Clearly we should move away from less and commit to emotion/antd for theming Now deleting the less files is going to be difficult. In the meantime, I wanted to provide a way for less files to source from the main theme object. I decided to go with handlebars since that should be part of the build process.

Considerations:

this is temporary, goal is to get rid of less altogether. Having this enables layering the theming work, and allows to make the theme DRY, instead of referncing the same colors a bunch of times
eventually could remove the .less files from the repo, and make sure they are dynamically generated on every builds. In the meantime I thought I'd leave them here, and we can instruct people to alter .less.hds files and run npm run compile-less on demand, if/when altering the main theme

Large refactor - what's in this PR?

less templates - as described above
New Theme object and subpackage as commented in the theming SIP
Refactoring/fixing out-of-theme, css-heavy components
- Alert - vanilla is better!
- AceEditor
- EmptyState refactor (that component WAS A MESS, felt almost like on-purpose maze of indirections), fixed the svg so it can receive currentColor as opposed to using an tag - required for making it themable/dark-modable
- ErrorAlert refactor (also a huge mess, simplifying quite a bit here)
Making antd components more vanilla
Getting rid of a bunch of CSS
Start aligning our css-in-js across the app to use the antd theme tokens
storybook improvements
- improving the theme stories

what's NOT in this PR? - yet to come

more theme.antd referencing in emotion
move CSS / LESS deletion
antd v5 migrations
ability to configure an antd ThemeConfig as the theme setup, this will require more moving from legacy theme object to antd

Compiling TODOs / visual bug as of 3/4/25

ok did a round of updates here, tackled some and left some TODOs in the list... thanks to @kgabryje and others for finding these issues!

Spacing between the header and the filters section is smaller
Import dashboards icon has different color
Table chart looks a bit different - now the header is gray, and before every other row had a light gray background, now its all white
Native filters modal - spacings are a bit off, the settings/scoping tabs background is gray
Explore Borders is controls are much darker
Explore: In table chart, when I applied conditional formatting, the colors are much lighter (more transparent??) than before

antd-v5-related

these should fix themselves as we migrate the components to antd-v5

Filters placeholders were light grey before
When you click on a filter, the active option in the menu has darker color than before

korbit-ai · 2024-12-20T22:32:40Z

Based on your review schedule, I'll hold off on reviewing this PR until it's marked as ready for review. If you'd like me to take a look now, comment /korbit-review.

Your admin can change your review schedule in the Korbit Console

Chiseling at #31590 and bringing what's atomically committable out of there. This simply adds eslint checks to pre-commit. Note that: - it requires having run `npm i` in superset-frontend - it's set up to NOT run in CI as part of the pre-commit validation workflow, since we run eslint more formally in another workflow Why doing this? Currently it's common to forget to run `npm run lint` prior to committing/pushing, so people can waste time waiting for CI to fail where it could be caught easily. It's nice to have pre-commit do the check itself because it will only evaluate the files that have changed, making it much faster than running a full lint run against all files.

…rt/e2e.ts While working on #31590, I noticed that `expect` was not properly imported. It was using it from global for some unknown reason.

Chiseling at #31590 that has gotten big / unruly, in this PR is a refactor of Alert-related components, going vanilla AntD. Also. Deprecating colors.alerts since it's ambiguous/redundant with warning/error and does not exist in antd-v5

superset-frontend/src/features/home/Menu.tsx

+      // Kept as is for backwards compatibility with the old theme system / superset_config.py
+      link = (
+        <GenericLink className="navbar-brand" to={brand.path}>
+          <img src={brand.icon} alt={brand.alt} />


To fix the problem, we need to ensure that the brand.icon value is properly sanitized before being used in the src attribute of the img tag. This can be achieved by using a library like DOMPurify to sanitize the URL or by ensuring that the value is a safe URL.

Import the DOMPurify library to sanitize the brand.icon value.

Sanitize the brand.icon value before using it in the src attribute of the img tag.

Make changes in the superset-frontend/src/features/home/Menu.tsx file to implement the sanitization.

superset-frontend/src/features/home/Menu.tsx

+      );
+    } else {
+      link = (
+        <a className="navbar-brand" href={brand.path} tabIndex={-1}>


To fix the problem, we need to ensure that the brand.path value is properly sanitized before being used in the href attribute. This can be achieved by using a library like DOMPurify to sanitize the value. We will import DOMPurify and use it to sanitize the brand.path value before rendering it in the href attribute.

superset-frontend/src/features/home/Menu.tsx

+    } else {
+      link = (
+        <a className="navbar-brand" href={brand.path} tabIndex={-1}>
+          <img src={brand.icon} alt={brand.alt} />


To fix the problem, we need to ensure that the brand.icon value is properly sanitized before it is used in the img tag's src attribute. This can be achieved by using a library like DOMPurify to sanitize the value.

Install the DOMPurify library.

Import DOMPurify in the relevant file.

Use DOMPurify to sanitize the brand.icon value before using it in the img tag.

…#32705) Co-authored-by: Diego Pucci <[email protected]> Co-authored-by: Geido <[email protected]> Co-authored-by: Mehmet Salih Yavuz <[email protected]>

Co-authored-by: Maxime Beauchemin <[email protected]>

Co-authored-by: Maxime Beauchemin <[email protected]> Co-authored-by: Diego Pucci <[email protected]>

Co-authored-by: Geido <[email protected]>

…32989)

Co-authored-by: Diego Pucci <[email protected]>

Recently looked into typescript's import `type` keyword and its implications. Turns out using it should have noticeable impacts on bundle size and memory usage (yeh!), and there's a nice lint rule for it. This PR is DRAFT and will be on hold until we merge the Theming branch to avoid a lot of conflicts. Note that: - there are north of 2k lint instance - `--fix` seems to cover most cases, short by 100-200 - unclear how much we'll save on bundle size, but clearly is good hygiene Let's pick this up after the great merge of #31590

pull-request-size bot added the size/XXL label Dec 20, 2024

github-actions bot added dependencies:npm packages preset-io labels Dec 20, 2024

sadpandajoe added the review:draft label Dec 20, 2024

rusackas self-requested a review December 20, 2024 23:27

mistercrunch force-pushed the template_less branch 2 times, most recently from f1c7929 to 43452ff Compare December 24, 2024 04:49

github-actions bot added the plugins label Dec 27, 2024

mistercrunch force-pushed the template_less branch from 97e182d to 0655910 Compare December 28, 2024 01:08

mistercrunch changed the title ~~feat: feat(less): templatize .less files to reference main theme~~ feat: feat(less): massive theming-related PR Dec 30, 2024

mistercrunch changed the title ~~feat: feat(less): massive theming-related PR~~ feat: massive theming-related PR Dec 30, 2024

mistercrunch force-pushed the template_less branch from 1ca8e6e to 6c6532e Compare December 30, 2024 15:43

github-actions bot added the github_actions Pull requests that update GitHub Actions code label Jan 5, 2025

mistercrunch mentioned this pull request Jan 6, 2025

[SIP-82] Improving Superset Theming #20159

Closed

mistercrunch force-pushed the template_less branch 2 times, most recently from 003f992 to 1652452 Compare January 9, 2025 07:07

mistercrunch mentioned this pull request Jan 14, 2025

chore: add eslint to pre-commit hooks #31845

Merged

mistercrunch mentioned this pull request Jan 14, 2025

chore: properly import expect from chai in cypress-base/cypress/support/e2e.ts #31846

Merged

mistercrunch force-pushed the template_less branch from 1652452 to f89a23b Compare January 14, 2025 22:22

github-actions bot removed the github_actions Pull requests that update GitHub Actions code label Jan 14, 2025

mistercrunch mentioned this pull request Jan 15, 2025

chore: refactor Alert-related components #31858

Merged

mistercrunch and others added 6 commits April 1, 2025 00:45

Merge branch 'master' into template_less

e3342bb

refactor(form): Migrate Form component to Ant Design 5 (#32729)

9717159

force colorLink in GlobalStyles

27d723f

fix links and bring GlobalStyles to superset-ui/core

952658e

remove console.log

d266835

theming the viz picker

70a5925

michael-s-molina mentioned this pull request Apr 2, 2025

feat(charts): chart publishing UI #32969

Open

7 tasks

mistercrunch and others added 5 commits April 2, 2025 13:21

fix some type issues

bc85a11

refactor(theming): Fixes to previously migrated components (#32845)

6f73e58

feat: Theme to include brand logo configuration

6b58ef1

Merge branch 'master' into template_less

2580a8b

fix merge-related issues

e6df194

github-advanced-security bot found potential problems Apr 3, 2025

View reviewed changes

EnxDev and others added 3 commits April 7, 2025 14:48

refactor(Components): Create wrappers for Ant Design 5 direct exports (…

6254db3

…#32705) Co-authored-by: Diego Pucci <[email protected]> Co-authored-by: Geido <[email protected]> Co-authored-by: Mehmet Salih Yavuz <[email protected]>

refactor(Tabs): Upgrade Tabs to Antd5 (#32810)

33febb6

Co-authored-by: Maxime Beauchemin <[email protected]>

Merge branch 'master' into template_less

c7d2881

mistercrunch changed the title ~~feat: massive theming-related PR~~ feat: massive collaboratvie theming feature branch Apr 7, 2025

DamianPendrak and others added 10 commits April 7, 2025 14:35

refactor(Collapse): Upgrade Collapse to Antd5 (#32959)

3950cf0

Co-authored-by: Maxime Beauchemin <[email protected]>

refactor(Select): Migrate Select component to Ant Design 5 (#32514)

b835478

Co-authored-by: Maxime Beauchemin <[email protected]> Co-authored-by: Diego Pucci <[email protected]>

use colorBorder in AddSliceCard

a9bc465

Merge branch 'master' into template_less

c993abe

refactor(Table): Use our custom Table component in CRUD views (#32964)

3b198ab

Co-authored-by: Geido <[email protected]>

Fix theming in Explore west panel - Search Input

6c8e72b

restyling page header and buttons

7c2fd55

fix: use Input & TextArea instead of native <input> and <textarea> (#…

8bb02e2

…32989)

refactor(Checkbox): Upgrade component to Ant Design v5 (#32980)

739caa1

Co-authored-by: Diego Pucci <[email protected]>

Merge branch 'master' into template_less

6a4730b

mistercrunch mentioned this pull request Apr 9, 2025

chore: implement eslint typescript-eslint/consistent-type-imports #33069

Draft

@@ -19,2 +19,3 @@
             import { useState, useEffect } from 'react';
+            import DOMPurify from 'dompurify';
             import { styled, css, useTheme } from '@superset-ui/core';
@@ -282,3 +283,3 @@
                     <GenericLink className="navbar-brand" to={brand.path}>
-                      <img src={brand.icon} alt={brand.alt} />
+                      <img src={DOMPurify.sanitize(brand.icon)} alt={brand.alt} />
                     </GenericLink>
@@ -288,3 +289,3 @@
                     <a className="navbar-brand" href={brand.path} tabIndex={-1}>
-                      <img src={brand.icon} alt={brand.alt} />
+                      <img src={DOMPurify.sanitize(brand.icon)} alt={brand.alt} />
                     </a>

@@ -219,3 +219,4 @@
                 "use-query-params": "^1.1.9",
-                "yargs": "^17.7.2"
+                "yargs": "^17.7.2",
+                "dompurify": "^3.2.5"
               },

Package	Version	Security advisories
dompurify (npm)	3.2.5	None

@@ -19,2 +19,3 @@
             import { useState, useEffect } from 'react';
+            import DOMPurify from 'dompurify';
             import { styled, css, useTheme } from '@superset-ui/core';
@@ -287,3 +288,3 @@
                   link = (
-                    <a className="navbar-brand" href={brand.path} tabIndex={-1}>
+                    <a className="navbar-brand" href={DOMPurify.sanitize(brand.path)} tabIndex={-1}>
                       <img src={brand.icon} alt={brand.alt} />

@@ -219,3 +219,4 @@
                 "use-query-params": "^1.1.9",
-                "yargs": "^17.7.2"
+                "yargs": "^17.7.2",
+                "dompurify": "^3.2.5"
               },

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: massive collaboratvie theming feature branch #31590

feat: massive collaboratvie theming feature branch #31590

mistercrunch commented Dec 20, 2024 •

edited

Loading

korbit-ai bot commented Dec 20, 2024

Check warning

Copilot Autofix

Check warning

Copilot Autofix

Check warning

Copilot Autofix

feat: massive collaboratvie theming feature branch #31590

Are you sure you want to change the base?

feat: massive collaboratvie theming feature branch #31590

Conversation

mistercrunch commented Dec 20, 2024 • edited Loading

Introducing less handlebars templates

Large refactor - what's in this PR?

what's NOT in this PR? - yet to come

Compiling TODOs / visual bug as of 3/4/25

antd-v5-related

korbit-ai bot commented Dec 20, 2024

Check warning

Copilot Autofix

Check warning

Copilot Autofix

Check warning

Copilot Autofix

mistercrunch commented Dec 20, 2024 •

edited

Loading