Antd v6 Follow-ups #9152
Antd v6 Follow-ups #9152
Conversation
|
Warning Rate limit exceeded@hotzenklotz has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 16 minutes and 17 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (4)
📝 WalkthroughWalkthroughSmall frontend changes: Ant Design prop updates (Alert.message→title, Drawer.width→size, destroyOnClose→destroyOnHidden), layout refactors to use AntD Flex/Space, disabled-state UI switched to Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/javascripts/navbar.tsx (1)
747-747: UnnecessarySpacewrapper around single element.The
Spacecomponent here wraps only{content}, which is a single element.Spaceis designed to add spacing between multiple children. This wrapper could be simplified to just returncontentdirectly.- return <Space>{content}</Space>; + return content;
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
frontend/javascripts/admin/task/task_create_form_view.tsx(1 hunks)frontend/javascripts/dashboard/dashboard_task_list_view.tsx(1 hunks)frontend/javascripts/dashboard/explorative_annotations_view.tsx(2 hunks)frontend/javascripts/navbar.tsx(6 hunks)frontend/javascripts/viewer/view/ai_jobs/ai_jobs_drawer.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/viewer/view/nml_upload_zone_container.tsx:186-186
Timestamp: 2025-12-04T14:12:26.493Z
Learning: For Ant Design v6 component API documentation and migration guidance, use https://ant.design/llms-full.txt as the authoritative source. This llms-full.txt file contains the official v6 component APIs, including deprecated props and their replacements.
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/viewer/view/nml_upload_zone_container.tsx:186-186
Timestamp: 2025-12-04T13:41:44.919Z
Learning: In Ant Design v6, the Alert component's `message` prop has been deprecated and replaced by `title`. When migrating from v5 to v6, Alert components should use `title` for the main content (and optionally `description` for additional details).
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 8849
File: frontend/javascripts/viewer/view/action-bar/ai_job_modals/components/collapsible_split_merger_evaluation_settings.tsx:39-51
Timestamp: 2025-08-14T14:12:03.293Z
Learning: Since Ant Design version 5.18, Form.Item components support the layout prop (layout="horizontal", layout="vertical", layout="inline"), allowing individual form items to override the parent Form's layout setting. This enables mixed layouts within a single form and was added as a new API feature in v5.18 according to the official changelog.
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 8849
File: frontend/javascripts/viewer/view/action-bar/ai_job_modals/components/collapsible_split_merger_evaluation_settings.tsx:39-51
Timestamp: 2025-08-14T14:12:03.293Z
Learning: Since Ant Design version 5.18, Form.Item components support the layout prop (layout="horizontal", layout="vertical", etc.), allowing individual form items to override the parent Form's layout setting. This is a newer API addition that provides more granular control over form item layouts.
📚 Learning: 2025-12-11T15:25:53.526Z
Learnt from: knollengewaechs
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/admin/statistic/time_tracking_overview.tsx:261-279
Timestamp: 2025-12-11T15:25:53.526Z
Learning: Ant Design v6 Select: when using the Select component, consider supplying a prefix prop to render an icon or element before the input for better visual context. Apply this guideline to TS and TSX files across the codebase where Ant Design Select is used; ensure prefix usage is accessible (e.g., provide meaningful aria-label if needed) and avoid unnecessary prefixes on simple inputs.
Applied to files:
frontend/javascripts/viewer/view/ai_jobs/ai_jobs_drawer.tsxfrontend/javascripts/admin/task/task_create_form_view.tsxfrontend/javascripts/dashboard/explorative_annotations_view.tsxfrontend/javascripts/dashboard/dashboard_task_list_view.tsxfrontend/javascripts/navbar.tsx
📚 Learning: 2025-12-11T15:33:06.880Z
Learnt from: knollengewaechs
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/admin/task/task_search_form.tsx:151-151
Timestamp: 2025-12-11T15:33:06.880Z
Learning: In Ant Design v6, do not use optionFilterProp as a standalone prop on Select. Instead, pass it inside showSearch as optionFilterProp, e.g. showSearch={{ optionFilterProp: 'label' }}. showSearch accepts boolean or an object with keys like optionFilterProp, filterOption, autoClearSearchValue. Update all Select components that use optionFilterProp to adopt the new pattern and adjust types accordingly to maintain compatibility and avoid deprecation warnings.
Applied to files:
frontend/javascripts/viewer/view/ai_jobs/ai_jobs_drawer.tsxfrontend/javascripts/admin/task/task_create_form_view.tsxfrontend/javascripts/dashboard/explorative_annotations_view.tsxfrontend/javascripts/dashboard/dashboard_task_list_view.tsxfrontend/javascripts/navbar.tsx
📚 Learning: 2025-12-11T15:54:47.778Z
Learnt from: knollengewaechs
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx:131-134
Timestamp: 2025-12-11T15:54:47.778Z
Learning: In Ant Design v6, Dropdown uses a flat classNames structure: classNames={{ root: '…' }}. Other components (Select, AutoComplete, Cascader, TreeSelect) use a nested structure. The deprecated overlayClassName prop for Dropdown should be replaced with classNames.root. In reviews, flag Dropdown usage that relies on overlayClassName and replace it with classNames={{ root: '…' }}. If you encounter related components, verify the correct classNames shape (flat for Dropdown, nested for others) and update accordingly. This guideline covers TSX files under the frontend codebase where Ant Design components are used.
Applied to files:
frontend/javascripts/viewer/view/ai_jobs/ai_jobs_drawer.tsxfrontend/javascripts/admin/task/task_create_form_view.tsxfrontend/javascripts/dashboard/explorative_annotations_view.tsxfrontend/javascripts/dashboard/dashboard_task_list_view.tsxfrontend/javascripts/navbar.tsx
📚 Learning: 2025-12-04T13:41:44.919Z
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/viewer/view/nml_upload_zone_container.tsx:186-186
Timestamp: 2025-12-04T13:41:44.919Z
Learning: In Ant Design v6, the Alert component's `message` prop has been deprecated and replaced by `title`. When migrating from v5 to v6, Alert components should use `title` for the main content (and optionally `description` for additional details).
Applied to files:
frontend/javascripts/admin/task/task_create_form_view.tsx
📚 Learning: 2025-10-21T10:54:16.468Z
Learnt from: knollengewaechs
Repo: scalableminds/webknossos PR: 8961
File: frontend/javascripts/viewer/model/actions/annotation_actions.ts:80-82
Timestamp: 2025-10-21T10:54:16.468Z
Learning: In frontend/javascripts/viewer/model/actions/annotation_actions.ts, the ShowManyBucketUpdatesWarningAction is intentionally not included in the AnnotationActionTypes union because it's a UI-only action that doesn't modify the annotation state through reducers.
Applied to files:
frontend/javascripts/dashboard/explorative_annotations_view.tsx
🧬 Code graph analysis (1)
frontend/javascripts/dashboard/explorative_annotations_view.tsx (1)
frontend/javascripts/components/link_button.tsx (1)
LinkButton(7-9)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build-smoketest-push
- GitHub Check: backend-tests
🔇 Additional comments (6)
frontend/javascripts/dashboard/dashboard_task_list_view.tsx (1)
511-511: LGTM!The simplified heading element is cleaner and maintains the same visual output.
frontend/javascripts/admin/task/task_create_form_view.tsx (1)
167-172: LGTM!Correctly migrated from the deprecated
messageprop totitlefor Ant Design v6 Alert component. Based on learnings, this aligns with the v6 API wheremessagehas been replaced bytitle.frontend/javascripts/dashboard/explorative_annotations_view.tsx (1)
627-635: LGTM!Using disabled
LinkButtoncomponents for read-only and locked state indicators standardizes the UI and leverages Ant Design's built-in disabled styling instead of custom inline styles.frontend/javascripts/navbar.tsx (2)
947-949: LGTM!Good use of Ant Design
Flexcomponent to manage trailing navbar items layout with proper alignment and spacing. This replaces inline styles with a cleaner, more maintainable approach.
720-743: LGTM!The
Tagcomponents correctly usevariant="outlined"which is the Ant Design v6 approach (replacing the previousborderedprop style).frontend/javascripts/viewer/view/ai_jobs/ai_jobs_drawer.tsx (1)
58-61: Replacesize={1200}withwidth={1200}for custom Drawer width.In Ant Design v6, the
sizeprop accepts only preset string values ("default" | "large"). To set a custom pixel width like 1200px, use thewidthprop instead.Likely an incorrect or invalid review comment.
|
Oh, actually, I found two more things. For non-admins, the navbar has some irregular spacing. Next to that, is it on purpose that the tags for "read-only" and "locked" are not aligned? Or is it not worth the individualized code? both screenshots are from https://followupantdv6.webknossos.xyz/ |
|
Thanks for the thorough review. I fixed the width of the "read-only" icon.
Hmm, I am not sure I follow. Perhaps you can show me. Image with some drawing or in person? |
In the picture, the space between icon and text is smaller for "Time Tracking" than for "Dashboard" and "Analysis". Do you see what I mean? Its only true if a user is neither admin nor manager |
|
@knollengewaechs I found the missing margin and fixed it. I guess this has been like this for a while now. Well spotted. |
This PR fixes a bunch of layouting quirks introduced by the antd v6 update. (#9117):
Issues:
read-onlyandlockedannotation label wrapingannotation locked by ownerhas no margin/spacing rightFix WK logo spacing in navbar. The margin left should now be smaller
A few deprecation warnings of renamed component props
URL of deployed dev instance (used for testing):
Issues:
(Please delete unneeded items, merge only when none are left open)
$PR_NUMBER.mdfile inunreleased_changesor use./tools/create-changelog-entry.py)