refactor(input): Migrate Input component to Ant Design 5 #30730

msyavuz · 2024-10-28T12:39:00Z

SUMMARY

Migrate Input Component to Ant Design 5 while keeping the visuals consistent.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:
Standalone:

Inside SqlLab Save query:

After:
Standalone:

Inside SqlLab Save query:

TESTING INSTRUCTIONS

Test component visuals before and after in used places or in storybook.

ADDITIONAL INFORMATION

Has associated issue: Fixes Ant Design 5: Upgrade Input component #30727
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

…ow strings by default

geido · 2024-10-29T09:55:34Z

/testenv up

github-actions · 2024-10-29T10:04:52Z

@geido Ephemeral environment spinning up at http://54.201.85.223:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

geido

This is great! A few clarifications needed

geido · 2024-10-29T14:47:52Z

superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx

    } else {
      // Reset search input when menu is closed
-      ref.current?.setValue('');


We don't need this anymore? It seems unrelated to the upgrade

There is no setValue method for Input after the migration so this would give type errors. Binding the value to the already kept state makes this obsolete. Another option would be ref.current?.input?.value = '' which seemed worse to me.

Relevant issue: ant-design/ant-design#34425

geido · 2024-10-29T14:48:07Z

superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx

@@ -311,6 +310,7 @@ export const DrillByMenuItems = ({
                margin: ${theme.gridUnit * 2}px ${theme.gridUnit * 3}px;
                box-shadow: none;
              `}
+              value={searchInput}


Same for this. It seems unrelated to the upgrade? What is this for?

This is said binding of the state.

I think this approach does not work. Watch the example video. I cannot even type right now, it will lag really bad.

COVID.Vaccine.Dashboard.mp4

geido · 2024-10-29T14:49:19Z

superset-frontend/src/explore/components/controls/BoundsControl.test.jsx

@@ -34,7 +34,8 @@ test('renders two inputs', () => {
 test('receives null on non-numeric', async () => {
  render(<BoundsControl {...defaultProps} />);
  const minInput = screen.getAllByRole('spinbutton')[0];
-  userEvent.type(minInput, 'text');
+  userEvent.type(minInput, '1');
+  userEvent.clear(minInput);


I think this will be giving a false positive for this test?

InputNumber only accepts numbers by default on v5 so typing 'text' does not fire onChange. This test might be obsolete alltogether.

superset-frontend/src/features/alerts/AlertReportModal.tsx

geido · 2024-10-29T14:51:53Z

superset-frontend/src/features/alerts/components/AlertReportCronScheduler.tsx

@@ -51,17 +51,15 @@ export const AlertReportCronScheduler: FC<AlertReportCronSchedulerProps> = ({
  onChange,
 }) => {
  const theme = useTheme();
-  const inputRef = useRef<AntdInput>(null);


Is this not necessary after the upgrade?

setValue is obsolete and redundant on the customSetValue callback and i think handlePressEnter can use value directly so this becomes unneccessary.

geido

LGTM!

github-actions · 2024-11-13T11:08:20Z

Ephemeral environment shutdown and build artifacts deleted.

* fix: Exception handling for SQL Lab views (apache#30897) * fix: don't show metadata for embedded dashboards (apache#30875) * feat: add logging durations for screenshot async service (apache#30884) * refactor(Avatar): Migrate Avatar to Ant Design 5 (apache#30740) * refactor(input): Migrate Input component to Ant Design 5 (apache#30730) * fix(empty dashboards): Allow downloading a screenshot of an empty dashboard (apache#30767) Co-authored-by: Geido <[email protected]> * chore(ci): add tai and michael to helm owners (apache#30925) * fix(helm): use submodule on helm release action (apache#30924) * docs: add Free2Move to INTHEWILD.md (apache#30930) * fix: blocks UI elements on right side (apache#30886) Co-authored-by: Evan Rusackas <[email protected]> * chore(deps): Migrate from `crate[sqlalchemy]` to `sqlalchemy-cratedb` (apache#29243) * chore: update change log, UPDATING.md and bug-report.yml for 4.1 release (apache#30915) * chore(docs): Update list of supported databases to include CrateDB (apache#30946) * feat(trino,presto): add missing time grains (apache#30926) * fix(Dashboard): Exclude edit param in async screenshot (apache#30962) * fix(Card): Use correct class names for Ant Design 5 Card component (apache#30964) * chore(Accessibility): Fix accessibility for 'Show x entries' dropdown in tables (apache#30818) * build(deps): bump cross-spawn from 7.0.3 to 7.0.6 in /superset-frontend/cypress-base (apache#30969) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(release validation): scripts now support RSA and EDDSA keys. (apache#30967) * build(deps): bump cross-spawn from 7.0.3 to 7.0.6 in /docs (apache#30970) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore: add performance information to tooltip (apache#30948) * fix(helm-chart): Fix broken PodDisruptionBudget due to introduction of extraLabels. (apache#30966) * chore(helm): bumping app version to 4.1.1 in helm chart (apache#30918) * chore: add unit tests for `is_mutating()` (apache#31021) * chore(🦾): bump python numexpr 2.10.0 -> 2.10.1 (apache#31006) Co-authored-by: GitHub Action <[email protected]> * chore(🦾): bump python cffi 1.16.0 -> 1.17.1 (apache#31002) Co-authored-by: GitHub Action <[email protected]> * chore(🦾): bump python flask-babel subpackage(s) (apache#31000) Co-authored-by: GitHub Action <[email protected]> * fix(Dashboard): Retain colors when color scheme not set (apache#30646) * fix(explore): verified props is not updated (apache#31008) * chore: publish wheels (apache#30981) * docs: Embedded sdk (apache#30972) * fix(imports): import query_context for imports with charts (apache#30887) * docs: Update doc about CSV upload (apache#30867) Co-authored-by: Evan Rusackas <[email protected]> * chore(🦾): bump python cattrs 23.2.3 -> 24.1.2 (apache#30998) Co-authored-by: GitHub Action <[email protected]> * fix(dataset): use sqlglot for DML check (apache#31024) --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Michael S. Molina <[email protected]> Co-authored-by: Joe Li <[email protected]> Co-authored-by: Maxime Beauchemin <[email protected]> Co-authored-by: Mehmet Salih Yavuz <[email protected]> Co-authored-by: Geido <[email protected]> Co-authored-by: Ville Brofeldt <[email protected]> Co-authored-by: Paolo Terzi <[email protected]> Co-authored-by: Sukuna <[email protected]> Co-authored-by: Evan Rusackas <[email protected]> Co-authored-by: Andreas Motl <[email protected]> Co-authored-by: Andreas Motl <[email protected]> Co-authored-by: Levis Mbote <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Elizabeth Thompson <[email protected]> Co-authored-by: Christoph Keller <[email protected]> Co-authored-by: lodu <[email protected]> Co-authored-by: Beto Dealmeida <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: GitHub Action <[email protected]> Co-authored-by: JUST.in DO IT <[email protected]> Co-authored-by: David Hotham <[email protected]> Co-authored-by: Giampaolo Capelli <[email protected]> Co-authored-by: Linden <[email protected]> Co-authored-by: Seiya <[email protected]> Co-authored-by: Asher Manangan <[email protected]>

refactor(input): Migrate Input component to Ant Design 5

fbe7a9c

pull-request-size bot added the size/L label Oct 28, 2024

dosubot bot added change:frontend Requires changing the frontend frontend:refactor:antd5 labels Oct 28, 2024

msyavuz marked this pull request as draft October 28, 2024 12:55

fix(DrillBy): fix typings for Input in DrillByMenuItems

84144ae

michael-s-molina added the review:draft label Oct 28, 2024

msyavuz added 3 commits October 28, 2024 20:37

fix(types): fix typings for useRef hooks

9612d07

test(BoundsControl): fix the test since v5 of InputNumber doesn't all…

898d829

…ow strings by default

refactor(classes): update classnames to antd5

88d9159

msyavuz marked this pull request as ready for review October 28, 2024 19:02

msyavuz requested review from jinghua-qa, geido, eschutho, rusackas and betodealmeida as code owners October 28, 2024 19:02

geido reviewed Oct 29, 2024

View reviewed changes

fix(alert report modal): parse '0' correctly

9613ca6

michael-s-molina removed the review:draft label Oct 29, 2024

geido added preset:bounty Issues that have been selected by Preset and have a bounty attached. hold! On hold labels Oct 31, 2024

fix(debounce): ugly solution

d8f6b45

apache deleted a comment from github-actions bot Nov 7, 2024

Merge branch 'master' into msyavuz/refactor/migrate-input

5e9045f

geido approved these changes Nov 13, 2024

View reviewed changes

geido removed the hold! On hold label Nov 13, 2024

geido merged commit a7069e6 into apache:master Nov 13, 2024
34 of 35 checks passed

jarethholt pushed a commit to raysearchlabs/superset that referenced this pull request Nov 19, 2024

refactor(input): Migrate Input component to Ant Design 5 (apache#30730)

b1f98db

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(input): Migrate Input component to Ant Design 5 #30730

refactor(input): Migrate Input component to Ant Design 5 #30730

msyavuz commented Oct 28, 2024 •

edited

Loading

geido commented Oct 29, 2024

github-actions bot commented Oct 29, 2024

geido left a comment

geido Oct 29, 2024

msyavuz Oct 29, 2024 •

edited

Loading

geido Oct 29, 2024

msyavuz Oct 29, 2024

geido Oct 31, 2024 •

edited

Loading

geido Oct 29, 2024

msyavuz Oct 29, 2024

geido Oct 29, 2024

msyavuz Oct 29, 2024

geido left a comment

github-actions bot commented Nov 13, 2024

refactor(input): Migrate Input component to Ant Design 5 #30730

refactor(input): Migrate Input component to Ant Design 5 #30730

Conversation

msyavuz commented Oct 28, 2024 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

geido commented Oct 29, 2024

github-actions bot commented Oct 29, 2024

geido left a comment

Choose a reason for hiding this comment

geido Oct 29, 2024

Choose a reason for hiding this comment

msyavuz Oct 29, 2024 • edited Loading

Choose a reason for hiding this comment

geido Oct 29, 2024

Choose a reason for hiding this comment

msyavuz Oct 29, 2024

Choose a reason for hiding this comment

geido Oct 31, 2024 • edited Loading

Choose a reason for hiding this comment

geido Oct 29, 2024

Choose a reason for hiding this comment

msyavuz Oct 29, 2024

Choose a reason for hiding this comment

geido Oct 29, 2024

Choose a reason for hiding this comment

msyavuz Oct 29, 2024

Choose a reason for hiding this comment

geido left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 13, 2024

msyavuz commented Oct 28, 2024 •

edited

Loading

msyavuz Oct 29, 2024 •

edited

Loading

geido Oct 31, 2024 •

edited

Loading