feat: ant upgrade #421

gabyzif · 2024-09-20T19:50:13Z

Summary

This PR upgrades AntD to 5.20.

The incentive to upgrade Ant Design in Aquarium primarily stems from changes in TypeScript definitions, particularly those related to the Table component. These changes have made the upgrade in Nancy dependent on first implementing the updates in Aquarium.

Changes:

Design tokens: In order to test if the upgrade is working as expected, Design suggested to update the design tokens for the new ones, made with the new version of AntD.
Find replacements for the following types that do not exist anymore in the upgrade:
▪ 'antd/es/checkbox/Group'
▪ 'antd/es/menu/hooks/useItems'
Some other props related to Color in the Watermark
Wraped the BaseCascader in a Flex container to fix the positioning of the dropdown

Testing Plan

Was this tested locally? If not, explain why.
{explain how this has been tested, and what, if any, additional testing should be done}

Reference Issue (For mParticle employees only. Ignore if you are an outside contributor)

Closes https://go.mparticle.com/work/REPLACEME

ilyusha · 2024-09-20T19:50:16Z

Review Forge

Click Here for AI Insights

tibuurcio

Nice work! Can we add some descriptions to the code changes to summarize why the changes were needed for the upgrade?

gabyzif · 2024-09-23T11:26:13Z

design/LightTheme.ts

Design told us that they are trying to stick with the default settings from Ant Design as much as possible and only customize what's absolutely necessary.
For this reason, in this update they removed a lot of tokens - specially for the components

gabyzif · 2024-09-23T11:32:06Z

src/components/data-entry/Checkbox/Checkbox.stories.tsx

@@ -3,11 +3,12 @@ import { type StoryObj } from '@storybook/react'
 import { Checkbox, Divider } from 'src/components'
 import { useState } from 'react'
 import { ExampleStory } from 'src/utils/ExampleStory'
-import { type CheckboxValueType } from 'antd/es/checkbox/Group'


This type doesn't exist anymore in antD 5.20

gabyzif · 2024-09-23T11:37:48Z

src/components/feedback/Watermark/Watermark.stories.tsx

@@ -114,7 +114,7 @@ export const ExampleMultiline: Story = {

 export const ExampleConfig: Story = {
  render: () => {
-    type Color = GetProp<IColorPickerProps, 'color'>


The property color doesn't exist anymore, now is value

gabyzif · 2024-09-23T12:00:34Z

src/components/feedback/Watermark/Watermark.stories.tsx

@@ -144,7 +144,15 @@ export const ExampleConfig: Story = {
      rotate,
      gap,
      offset,
-      font: { color: typeof color === 'string' ? color : color.toRgbString(), fontSize },


when updating ant is was throwing this error:

TS2339: Property toRgbString does not exist on type AggregationColor | { color: SingleValueType; percent: number; }[] Property toRgbString does not exist on type { color: SingleValueType; percent: number; }[] font: { color: typeof color === 'string' ? color : color.toRgbString(), fontSize },

with the new update, we have to check the types because not all color types have the toRgbString method.

gabyzif · 2024-09-23T12:01:42Z

src/components/navigation/GlobalNavigation/NavigationCreate.tsx

@@ -1,5 +1,5 @@
-import type { MenuItemType } from 'antd/es/menu/hooks/useItems'


type { MenuItemType } from 'antd/es/menu/hooks/useItems' does not exist in the new version

gabyzif · 2024-09-23T12:02:04Z

src/components/navigation/GlobalNavigation/NavigationCreate.tsx

@@ -1,5 +1,5 @@
-import type { MenuItemType } from 'antd/es/menu/hooks/useItems'
-import type { MenuItemGroupType } from 'antd/es/menu/hooks/useItems'


import type { MenuItemGroupType } from 'antd/es/menu/hooks/useItems' does not exist in the new version

gabyzif · 2024-09-23T12:07:41Z

src/components/navigation/GlobalNavigation/NavigationCreate.tsx

+export type MenuItemType = Required<MenuProps>['items'][number]
+export type MenuItemGroupType = Required<MenuProps>['items'][number] // Same as menu item type


This replaces

type { MenuItemType } from 'antd/es/menu/hooks/useItems'

and

import type { MenuItemGroupType } from 'antd/es/menu/hooks/useItems'

that do not exist anymore in the upgrade

gabyzif · 2024-09-23T12:08:20Z

src/components/navigation/GlobalNavigation/NavigationList.tsx

@@ -9,6 +9,8 @@ import { Fragment } from 'react'
 import { buildLinkFromHrefOptions } from 'src/utils/utils'
 import { NavigationButtonItem } from 'src/components/navigation/GlobalNavigation/NavigationButtonItem'

+export type MenuItemGroupType = Required<MenuProps>['items'][number] // This works for both groups and items


This replaces

import type { MenuItemGroupType } from 'antd/es/menu/hooks/useItems'

that doesn't exist anymore in the upgrade

gabyzif · 2024-09-23T12:09:02Z

src/components/navigation/Menu/Menu.tsx

-import {
-  type MenuItemType as AndMenuItemType,
-  type MenuItemGroupType as AndMenuItemGroupType,
-  type MenuDividerType as AndMenuDividerType,
-  type SubMenuType as AndSubMenuType,
-} from 'antd/es/menu/hooks/useItems'


This doesn't exist in the upgrade

gabyzif · 2024-09-23T12:09:31Z

src/components/navigation/Menu/Menu.tsx

+export type AndMenuItemType = Required<MenuProps>['items'][number]
+export type AndMenuItemGroupType = Required<MenuProps>['items'][number] // Same type used for menu groups
+export type AndMenuDividerType = Required<MenuProps>['items'][number] // Menu divider uses the same type
+export type AndSubMenuType = Required<MenuProps>['items'][number] // Submenu is also part of 'items'
+


This replaces the types from 'antd/es/menu/hooks/useItems'

# [1.32.0-ant-update.1](v1.31.1...v1.32.0-ant-update.1) (2024-09-23) ### Bug Fixes * fix ts erros ([90864de](90864de)) * remove @esbuild/[email protected] ([54c96e6](54c96e6)) ### Features * add datepicker example ([#408](#408)) ([0b4b46b](0b4b46b)) * antd upgrade ([e3bb862](e3bb862)) * upgrade style ([8d61675](8d61675))

# [1.32.0-ant-update.2](v1.32.0-ant-update.1...v1.32.0-ant-update.2) (2024-09-24) ### Bug Fixes * update cascader dropdown postion ([d855a09](d855a09)) * update dropdown ([660663b](660663b))

tibuurcio

We discussed this on a pair programming and we're only left with changing Menu type imports to come from the Menu component.

tibuurcio

Reviewed this sync with @gabyzif, it's looking good!

github-actions · 2024-09-27T15:25:46Z

PR Preview Action v1.4.8
Preview removed because the pull request was closed.
2024-09-30 14:27 UTC

# [1.33.0-ant-update.1](v1.32.0...v1.33.0-ant-update.1) (2024-09-30) ### Bug Fixes * fix qualifier alignment ([4ff5f32](4ff5f32)) * fix ts erros ([90864de](90864de)) * merge main ([30dbb30](30dbb30)) * remove @esbuild/[email protected] ([54c96e6](54c96e6)) * solve merge conflicts, types cleanup ([0978c40](0978c40)) * update button interface ([442e0ec](442e0ec)) * update cascader dropdown postion ([d855a09](d855a09)) * update dropdown ([660663b](660663b)) * update qualifier position ([65cd477](65cd477)) ### Features * antd upgrade ([e3bb862](e3bb862)) * New storybook documentation structure ([#419](#419)) ([1a870bc](1a870bc)) * upgrade style ([8d61675](8d61675))

# [1.33.0](v1.32.0...v1.33.0) (2024-09-30) ### Features * ant upgrade to 5.20 ([#421](#421)) ([49b4bf8](49b4bf8)) * New storybook documentation structure ([#419](#419)) ([1a870bc](1a870bc))

mparticle-automation · 2024-09-30T16:08:06Z

🎉 This PR is included in version 1.33.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

# 1.0.0-fix-semantic-release.1 (2024-10-28) ### Bug Fixes * Design tokens update + icons alignment fix ([#460](#460)) ([9c93165](9c93165)) * a useEffect Hook has been added to detect if the value received … ([#339](#339)) ([0e1ab5d](0e1ab5d)) * active workspace style ([#148](#148)) ([a276806](a276806)) * add current color fill to icon ([#374](#374)) ([12c698c](12c698c)) * add horizontal gap in suite selector ([#391](#391)) ([74a43d0](74a43d0)) * add icons ([#399](#399)) ([3343c26](3343c26)) * add icons for overview map ([#275](#275)) ([a4bb97d](a4bb97d)) * Add Icons in Aquarium ([#395](#395)) ([d554ed5](d554ed5)) * add info icon ([#381](#381)) ([d3aa957](d3aa957)) * add more icon ([#403](#403)) ([3abc3b7](3abc3b7)) * add new icons ([#380](#380)) ([db88c4e](db88c4e)) * add width auto to be able to manage the wdith from the component ([#368](#368)) ([b47c45f](b47c45f)) * button-alligned center ([#287](#287)) ([d8c056d](d8c056d)) * **cascader:** makes cascader use the aquarium configprovider and theme ([21800e2](21800e2)) * correct QueryItem Cascader and Action cosmetic bugs/flaws ([f5e6032](f5e6032)) * correct usage of Typography in Watermark.stories.tsx ([f8b32cb](f8b32cb)) * ensure PostCSS handles CSS unnesting in Vite config ([#457](#457)) ([1978e65](1978e65)) * export notification center props ([#418](#418)) ([2ea78c2](2ea78c2)) * exported types ([#448](#448)) ([a978175](a978175)) * fix broken stories due to typography update ([d64be86](d64be86)) * fix issue on prettifier ([#446](#446)) ([03668b6](03668b6)) * fix QueryItem.ValueSelector.Cascader's selectedDisplayValue type ([e74053d](e74053d)) * fixes path to be / on UPS cookie creation options ([#240](#240)) ([0cebf44](0cebf44)) * hide expand icon in global navigation lists ([#178](#178)) ([edd21db](edd21db)) * hide minimap after user clicks on a button ([#264](#264)) ([21a399c](21a399c)) * icon color not changing on button hover ([#363](#363)) ([aa07067](aa07067)) * Icon component build issue ([d7e2faf](d7e2faf)) * improve workspace selector performace ([#370](#370)) ([590e231](590e231)) * Input now support refs ([#169](#169)) ([20a7e47](20a7e47)) * **input:** wraps Input.Search in Aquarium ConfigProvider ([0fbba18](0fbba18)) * lazy load ValueSelector to fix Storybook test runner ([#298](#298)) ([4cd501b](4cd501b)) * **lint:** fix linting problems ([c343136](c343136)) * make onChange prop of QueryItem InputText optional ([7a1532f](7a1532f)) * make QueryItem Cascader options reactive ([50f11bc](50f11bc)) * make the workspace-selector label smaller ([#359](#359)) ([05c4338](05c4338)) * minor compatibility changes to QueryItem Qualifier and Cascader ([5065bdd](5065bdd)) * minor tweaks to TextInput to make it fully compatible ([be5deab](be5deab)) * nav link target ([#166](#166)) ([092a3aa](092a3aa)) * **NavigationSearch:** swaps Ctrl for Cmd on Macs ([a0b7d63](a0b7d63)) * notification center export z-index ([#422](#422)) ([ce01227](ce01227)) * PR review suggestions ([f1ed504](f1ed504)) * **queryitem:** change Input.Search to Input in Cascader's popover to prevent preact type error ([80b1469](80b1469)) * remove -t patch from sem release ([fa41baa](fa41baa)) * remove \dist files accidentally committed ([ef5a16b](ef5a16b)) * remove circle-dashed.svg, it's a duplicate ([aac4829](aac4829)) * remove hover effect on active state ([#278](#278)) ([9f89fa1](9f89fa1)) * remove LESS syntax from query-item.css ([643402c](643402c)) * rename icons ([#364](#364)) ([223c47d](223c47d)) * Revert design tokens update ([#361](#361)) ([cd9dbc9](cd9dbc9)) * rollback variables/style ([#310](#310)) ([efcaf5c](efcaf5c)) * signout onclick being triggered on render when there are no orgs ([#337](#337)) ([77f2b1a](77f2b1a)) * style build missing custom rules ([#147](#147)) ([3a66b26](3a66b26)) * sub menu links should open the correct herf ([#167](#167)) ([6b52fea](6b52fea)) * **typography:** fix exporting/structure of Typography and its subtypes ([cd097f8](cd097f8)) * unnest css ([#390](#390)) ([03d3ccb](03d3ccb)) * unnesting minimap styles ([#253](#253)) ([067f24d](067f24d)) * update design tokens ([#375](#375)) ([e818591](e818591)) * update empty component ([#371](#371)) ([655e252](655e252)) * update icons that did not obey the color prop ([#445](#445)) ([68006e3](68006e3)) * update more typography stories ([cd3344c](cd3344c)) * update nav link active background color ([#376](#376)) ([3965e60](3965e60)) * update release.config.cjs ([859b3bb](859b3bb)) * update release.config.cjs tag format version ([93ee2ec](93ee2ec)) * update release.yml to test semantic release ([5dcf0a7](5dcf0a7)) * use semantic release token ([7af705c](7af705c)) * use unique tags ([61d7886](61d7886)) * workspace selector positioning ([#338](#338)) ([9561a49](9561a49)) * **workspaceselector:** fix key duplication in the WorkspaceSelector ([2967c68](2967c68)) * **workspaceselector:** fix performance problems by swapping Antd Menu component with native ul ([8a0257b](8a0257b)) * yet more typography corrections ([81fce66](81fce66)) ### Features * add Action QueryItem ([f76ea2b](f76ea2b)) * add datepicker example ([#408](#408)) ([0b4b46b](0b4b46b)) * Add directory icon ([#319](#319)) ([a2b4132](a2b4132)) * add Help Icon ([6bae0ed](6bae0ed)) * Add links to the minimap ([#246](#246)) ([80bd00c](80bd00c)) * add loadData functionality to QueryItem Cascader ([ced4994](ced4994)) * add lock/unlock icons; rename previous lock to paywall ([#340](#340)) ([eaf6998](eaf6998)) * add mp colors to storybook and remove token to css from pre com… ([#405](#405)) ([40dffbf](40dffbf)) * add notification center ([#416](#416)) ([4c44206](4c44206)) * Add notification icon ([#345](#345)) ([2c9d13e](2c9d13e)) * add overview dt icon ([#362](#362)) ([78d7854](78d7854)) * add placeholder to QueryItem's TextInput ([30bde49](30bde49)) * add premiumDt icon ([#346](#346)) ([b3e2817](b3e2817)) * add prettifier ([#404](#404)) ([a99793f](a99793f)) * add QueryItem-related icons ([89fb3b8](89fb3b8)) * add QueryItem.Text component ([8f0b7bd](8f0b7bd)) * Add size prop to `Typography.Text` component ([#262](#262)) ([0c14f00](0c14f00)) * add value props to Qualifier and Cascader ([16042d7](16042d7)) * add variants to icons ([#355](#355)) ([1112674](1112674)) * add workspace label to Workspace Selector ([#323](#323)) ([bdb3c70](bdb3c70)) * Adds stylelint with recommended configs and rules from Indicative ([#82](#82)) ([4dd5380](4dd5380)) * Adds SuitesReminder hook to get a consistent look across platforms for the reminder notification ([#221](#221)) ([533428e](533428e)) * Allow importing types ([#65](#65)) ([7fe8981](7fe8981)) * Allow override theme for ConfigProvider ([#354](#354)) ([29cc614](29cc614)) * Allows publishing npm versions from feature branches ([#186](#186)) ([044c117](044c117)) * Allows publishing on dev branch/distribution channel ([#162](#162)) ([39530fa](39530fa)) * allows UPS to receive cookie config options ([#261](#261)) ([8ab9ce9](8ab9ce9)) * ant design system ([#9](#9)) ([7c0f090](7c0f090)) * ant upgrade to 5.20 ([#421](#421)) ([49b4bf8](49b4bf8)) * components ([#33](#33)) ([78dfb17](78dfb17)) * Exports bundle without libs (React, Antd) and TS types ([#76](#76)) ([5dbb9df](5dbb9df)) * first story with a simple component and directory structure with readmes ([a60b9b8](a60b9b8)) * focus workspace on icon click ([#163](#163)) ([cea91cd](cea91cd)) * global navigation and styling ([#124](#124)) ([7863d9a](7863d9a)) * icons placeholder ([#385](#385)) ([2503af1](2503af1)) * **icons:** export icons from the Aquarium ([dde4db2](dde4db2)) * install vitest unit test runner ([#143](#143)) ([2ad4075](2ad4075)) * intial add of QueryItem.ValueSelector.Cascader ([c022aa2](c022aa2)) * minimap active state ([#263](#263)) ([ae9a2b0](ae9a2b0)) * move minimap to suite logo ([#369](#369)) ([f2d2437](f2d2437)) * new icons ([#239](#239)) ([a1bfb88](a1bfb88)) * New storybook documentation structure ([#419](#419)) ([1a870bc](1a870bc)) * Organize component directories by type ([#16](#16)) ([6ad046d](6ad046d)) * query select number ([#268](#268)) ([13dc864](13dc864)) * **queryitem:** adding onchange and converting error danger zone text ([91e945f](91e945f)) * **queryitem:** adding QueryItem.Qualifier component ([1fe60d8](1fe60d8)) * **queryitem:** updating styles and adding error message to qualifier ([fa8a8da](fa8a8da)) * replace minimap with suiteSelector component ([#383](#383)) ([2ab27ca](2ab27ca)) * rework Cascader OnChange ([a77c44f](a77c44f)) * Storybook Testing ([#42](#42)) ([876c231](876c231)) * Tag component stories ([#68](#68)) ([4831b25](4831b25)) * update design tokens ([#273](#273)) ([ac2b442](ac2b442)) * update SuiteLogo in GlobalNav to render nav switcher Tour ([#367](#367)) ([a3920af](a3920af)) * UPS code ported from Nancy ([#207](#207)) ([cc153af](cc153af)) * wrap radio group and button components ([#282](#282)) ([6e67439](6e67439))

gabyzif added 2 commits September 20, 2024 21:45

feat: antd upgrade

e3bb862

feat: upgrade style

8d61675

gabyzif added 2 commits September 20, 2024 21:55

fix: remove @esbuild/[email protected]

54c96e6

fix: fix ts erros

90864de

tibuurcio reviewed Sep 20, 2024

View reviewed changes

gabyzif commented Sep 23, 2024

View reviewed changes

mparticle-automation and others added 5 commits September 23, 2024 12:30

Merge branch 'main' into feat/ant-update

37b18b9

fix: update dropdown

660663b

fix: update cascader dropdown postion

d855a09

chore(release): 1.32.0-ant-update.2 [skip ci]

72bb677

# [1.32.0-ant-update.2](v1.32.0-ant-update.1...v1.32.0-ant-update.2) (2024-09-24) ### Bug Fixes * update cascader dropdown postion ([d855a09](d855a09)) * update dropdown ([660663b](660663b))

tibuurcio reviewed Sep 24, 2024

View reviewed changes

fix: solve merge conflicts, types cleanup

0978c40

tibuurcio approved these changes Sep 24, 2024

View reviewed changes

gabyzif changed the title ~~feat: ant upgrade~~ feat: ant upgrade [blocked] Sep 24, 2024

gabyzif added 2 commits September 27, 2024 16:51

fix: merge main

30dbb30

fix: fix qualifier alignment

4ff5f32

gabyzif added 2 commits September 27, 2024 17:57

fix: update button interface

442e0ec

fix: update qualifier position

65cd477

gabyzif changed the title ~~feat: ant upgrade [blocked]~~ feat: ant upgrade Sep 30, 2024

mparticle-automation and others added 2 commits September 30, 2024 14:01

fix: trigger Build

3abb94f

tibuurcio approved these changes Sep 30, 2024

View reviewed changes

tibuurcio merged commit 49b4bf8 into main Sep 30, 2024
9 checks passed

gabyzif deleted the feat/ant-update branch September 30, 2024 14:27

gabyzif restored the feat/ant-update branch September 30, 2024 14:27

mparticle-automation added the released label Sep 30, 2024

gabyzif mentioned this pull request Oct 17, 2024

fix: Design tokens update + icons alignment fix #460

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ant upgrade #421

feat: ant upgrade #421

gabyzif commented Sep 20, 2024 •

edited

Loading

ilyusha commented Sep 20, 2024

tibuurcio left a comment

gabyzif Sep 23, 2024

gabyzif Sep 23, 2024

gabyzif Sep 23, 2024

gabyzif Sep 23, 2024

gabyzif Sep 23, 2024

gabyzif Sep 23, 2024

gabyzif Sep 23, 2024

gabyzif Sep 23, 2024

gabyzif Sep 23, 2024

gabyzif Sep 23, 2024

tibuurcio left a comment

tibuurcio left a comment

github-actions bot commented Sep 27, 2024 •

edited

Loading

mparticle-automation commented Sep 30, 2024

		@@ -1,5 +1,5 @@
		import type { MenuItemType } from 'antd/es/menu/hooks/useItems'

		@@ -1,5 +1,5 @@
		import type { MenuItemType } from 'antd/es/menu/hooks/useItems'
		import type { MenuItemGroupType } from 'antd/es/menu/hooks/useItems'

		export type MenuItemType = Required<MenuProps>['items'][number]
		export type MenuItemGroupType = Required<MenuProps>['items'][number] // Same as menu item type

feat: ant upgrade #421

feat: ant upgrade #421

Conversation

gabyzif commented Sep 20, 2024 • edited Loading

Summary

Testing Plan

Reference Issue (For mParticle employees only. Ignore if you are an outside contributor)

ilyusha commented Sep 20, 2024

Review Forge

tibuurcio left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tibuurcio left a comment

Choose a reason for hiding this comment

tibuurcio left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 27, 2024 • edited Loading

mparticle-automation commented Sep 30, 2024

gabyzif commented Sep 20, 2024 •

edited

Loading

github-actions bot commented Sep 27, 2024 •

edited

Loading