feat: migration to latest ui components library with file viewer#2281
Draft
kemuru wants to merge 13 commits into
Draft
feat: migration to latest ui components library with file viewer#2281kemuru wants to merge 13 commits into
kemuru wants to merge 13 commits into
Conversation
❌ Deploy Preview for kleros-v2-testnet-devtools failed. Why did it fail? →
|
❌ Deploy Preview for kleros-v2-testnet failed. Why did it fail? →
|
❌ Deploy Preview for kleros-v2-neo failed. Why did it fail? →
|
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughUpgrade UI library to v3, add global library CSS, migrate Field→TextField and event-based onChange→value, remap Button props (disabled→isDisabled, onClick→onPress), reshape Dropdown/Cascader items, migrate timeline/tabs typings, and apply assorted styling and small API fixes. ChangesKleros UI v3 migration
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/src/pages/Resolver/Parameters/Jurors.tsx (1)
81-82:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winAvoid rendering
"undefined"in the jurors input.Line 88 stringifies
noOfVotesunconditionally. WhendisputeData.numberOfJurorsisundefined, the field shows"undefined"instead of empty input.💡 Proposed fix
- const noOfVotes = Number.isNaN(disputeData.numberOfJurors) ? "" : disputeData.numberOfJurors; + const noOfVotes = + isUndefined(disputeData.numberOfJurors) || Number.isNaN(disputeData.numberOfJurors) + ? "" + : String(disputeData.numberOfJurors); ... - value={String(noOfVotes)} + value={noOfVotes}Also applies to: 88-88
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/src/pages/Resolver/Parameters/Jurors.tsx` around lines 81 - 82, The jurors input shows "undefined" because noOfVotes is set using Number.isNaN(disputeData.numberOfJurors) which returns false for undefined; change the assignment so non-numeric or null/undefined values map to an empty string. For example, update the noOfVotes calculation (the noOfVotes variable that reads disputeData.numberOfJurors) to: if typeof disputeData.numberOfJurors === 'number' && !Number.isNaN(disputeData.numberOfJurors) use the numeric value, otherwise use ""; also ensure when rendering you convert only numeric noOfVotes to a string (e.g., noOfVotes === "" ? "" : String(noOfVotes)) so the input never displays "undefined".
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web/src/components/LabeledInput.tsx`:
- Around line 28-33: The label is using id={label} and the input id is derived
from label text which is unstable; update the LabeledInput component to generate
a stable unique id (use React.useId()) and use that id for the input
(StyledField) and htmlFor on the label (StyledLabel); if props includes an
explicit id respect and use props.id fallback, otherwise generate idFromHook and
use that, and only render StyledLabel with htmlFor when a label exists.
In `@web/src/components/Radio.tsx`:
- Around line 23-33: The radio input's explicit cursor rule overrides the
label's disabled state; update the Radio component styles to set the input's
cursor to not-allowed when disabled (target the input[type="radio"]:disabled
selector inside the Radio component or inside the &:has(input:disabled) block)
so both the label and the actual input show the not-allowed cursor when
disabled, preserving the existing accent-color/size rules and only changing the
cursor for disabled inputs.
In `@web/src/pages/Resolver/Parameters/VotingOptions/OptionsFields.tsx`:
- Around line 56-59: handleOptionWrite is mutating disputeData.answers in place
which can break memoization; instead create a new answers array and a new answer
object for the specific key and call setDisputeData with a new disputeData
object. Concretely, in handleOptionWrite copy disputeData.answers (e.g., const
newAnswers = [...disputeData.answers]), replace newAnswers[key] with a
shallow-copied updated object, then call setDisputeData({ ...disputeData,
answers: newAnswers }) to avoid mutating answers by reference.
---
Outside diff comments:
In `@web/src/pages/Resolver/Parameters/Jurors.tsx`:
- Around line 81-82: The jurors input shows "undefined" because noOfVotes is set
using Number.isNaN(disputeData.numberOfJurors) which returns false for
undefined; change the assignment so non-numeric or null/undefined values map to
an empty string. For example, update the noOfVotes calculation (the noOfVotes
variable that reads disputeData.numberOfJurors) to: if typeof
disputeData.numberOfJurors === 'number' &&
!Number.isNaN(disputeData.numberOfJurors) use the numeric value, otherwise use
""; also ensure when rendering you convert only numeric noOfVotes to a string
(e.g., noOfVotes === "" ? "" : String(noOfVotes)) so the input never displays
"undefined".
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: d591b8fd-b856-4877-9e8a-6a1a2c432cbe
📒 Files selected for processing (71)
web/package.jsonweb/src/app.tsxweb/src/components/CasesDisplay/Filters.tsxweb/src/components/CasesDisplay/Search.tsxweb/src/components/ClaimPnkButton.tsxweb/src/components/ConnectWallet/index.tsxweb/src/components/DisputeFeatures/Features/GatedErc1155.tsxweb/src/components/DisputeFeatures/Features/GatedErc20.tsxweb/src/components/DisputeFeatures/Features/index.tsxweb/src/components/EnsureAuth.tsxweb/src/components/FileViewer/Viewers/MarkdownViewer.tsxweb/src/components/FileViewer/index.tsxweb/src/components/LabeledInput.tsxweb/src/components/LightButton.tsxweb/src/components/Loader.tsxweb/src/components/NumberInputField.tsxweb/src/components/Radio.tsxweb/src/components/Verdict/DisputeTimeline.tsxweb/src/hooks/queries/useCourtTree.tsweb/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsxweb/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsxweb/src/layout/Header/navbar/Menu/Settings/index.tsxweb/src/pages/AttachmentDisplay/index.tsxweb/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsxweb/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsxweb/src/pages/Cases/CaseDetails/Appeal/Shutter/Fund.tsxweb/src/pages/Cases/CaseDetails/Evidence/EvidenceSearch.tsxweb/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsxweb/src/pages/Cases/CaseDetails/MaintenanceButtons/DistributeRewards.tsxweb/src/pages/Cases/CaseDetails/MaintenanceButtons/DrawButton.tsxweb/src/pages/Cases/CaseDetails/MaintenanceButtons/ExecuteRuling.tsxweb/src/pages/Cases/CaseDetails/MaintenanceButtons/PassPeriodButton.tsxweb/src/pages/Cases/CaseDetails/MaintenanceButtons/SetJurorsButton.tsxweb/src/pages/Cases/CaseDetails/MaintenanceButtons/WithdrawAppealFees.tsxweb/src/pages/Cases/CaseDetails/Tabs.tsxweb/src/pages/Cases/CaseDetails/Voting/Classic/Reveal.tsxweb/src/pages/Cases/CaseDetails/Voting/OptionsContainer.tsxweb/src/pages/Cases/CaseDetails/Voting/Shutter/Reveal.tsxweb/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsxweb/src/pages/Courts/CourtDetails/Description.tsxweb/src/pages/Courts/CourtDetails/JurorsStakedByCourt/Search.tsxweb/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsxweb/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/index.tsxweb/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/stakeSteps.tsxweb/src/pages/Courts/CourtDetails/StakingHistoryByCourt/Search.tsxweb/src/pages/Courts/CourtDetails/TopSearch.tsxweb/src/pages/Courts/StakeMaintenanceButton/ExecuteDelayedStakeButton.tsxweb/src/pages/Courts/StakeMaintenanceButton/PassPhaseButton.tsxweb/src/pages/Home/CourtOverview/Chart.tsxweb/src/pages/Home/CourtOverview/ExtraStats.tsxweb/src/pages/Jurors/Search.tsxweb/src/pages/Jurors/StatsAndFilters.tsxweb/src/pages/Profile/JurorCard/BottomContent/Coherence.tsxweb/src/pages/Profile/Votes/StatsAndFilters/Filters.tsxweb/src/pages/Profile/index.tsxweb/src/pages/Resolver/Briefing/Title.tsxweb/src/pages/Resolver/Landing/CreationCard.tsxweb/src/pages/Resolver/Landing/index.tsxweb/src/pages/Resolver/NavigationButtons/NextButton.tsxweb/src/pages/Resolver/NavigationButtons/SubmitBatchDisputesButton.tsxweb/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsxweb/src/pages/Resolver/Parameters/Category.tsxweb/src/pages/Resolver/Parameters/Court/index.tsxweb/src/pages/Resolver/Parameters/Jurors.tsxweb/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsxweb/src/pages/Resolver/Parameters/VotingOptions/OptionsFields.tsxweb/src/pages/Resolver/Parameters/VotingOptions/index.tsxweb/src/pages/Resolver/Preview/BatchCreationCard.tsxweb/src/styles/styled.d.tsweb/src/styles/themes.tsweb/src/utils/uiComponentsTypes.ts
💤 Files with no reviewable changes (3)
- web/src/components/FileViewer/Viewers/MarkdownViewer.tsx
- web/src/components/FileViewer/index.tsx
- web/src/styles/themes.ts
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web/src/pages/AttachmentDisplay/index.tsx`:
- Line 16: The lazy-loaded FileViewer (const FileViewer = lazy(...)) can throw
on chunk load failures and currently only has Suspense for loading; wrap the
Suspense subtree (where FileViewer is rendered) with an ErrorBoundary component
to catch import/rejection errors and render a fallback UI. Add or reuse an
ErrorBoundary component (or create one) and place it as the parent of the
Suspense that renders FileViewer so any lazy import failures are caught and
handled instead of crashing the tree.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 01996863-7c8e-4d49-95b6-d9ce75a6910d
📒 Files selected for processing (1)
web/src/pages/AttachmentDisplay/index.tsx
tractorss
reviewed
May 16, 2026
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web/src/components/LabeledInput.tsx`:
- Around line 28-33: LabeledInput currently overwrites any caller-provided
inputProps by setting inputProps={{ id: inputId, dir: "auto" }} on StyledField;
instead, merge the caller's inputProps with the injected id/dir so existing
properties are preserved. Locate the LabeledInput component (inputId) and change
the StyledField prop to combine props.inputProps (or props.inputProps ?? {})
with { id: inputId, dir: "auto" } before passing it to StyledField, ensuring
other props from callers remain intact.
In `@web/src/styles/base-elements.css`:
- Around line 58-64: The global CSS rule for the selector "a" in
base-elements.css removes the underline and relies solely on color, which breaks
accessibility; restore a non-color affordance by removing the blanket
text-decoration:none from the global "a" rule (or restrict that removal to a
specific utility class like ".no-underline"), and ensure links retain an
underline or another clear non-color indicator (and visible focus/hover styles)
so that the "a" rule, focus states, and any new ".no-underline" utility behave
accessibly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ad550fb5-7d85-4bb1-a495-3e7b787fd7fd
📒 Files selected for processing (69)
web/src/app.tsxweb/src/components/CaseStarButton.tsxweb/src/components/CasesDisplay/Filters.tsxweb/src/components/ClaimPnkButton.tsxweb/src/components/ConnectWallet/index.tsxweb/src/components/DisputeFeatures/GroupsUI.tsxweb/src/components/EnsureAuth.tsxweb/src/components/ErrorFallback.tsxweb/src/components/ExternalLinkWarning.tsxweb/src/components/Field.tsxweb/src/components/LabeledInput.tsxweb/src/components/LightButton.tsxweb/src/components/Popup/Description/SwapSuccess.tsxweb/src/components/Popup/index.tsxweb/src/components/Tag.tsxweb/src/components/Verdict/DisputeTimeline.tsxweb/src/index.htmlweb/src/layout/Header/DesktopHeader.tsxweb/src/layout/Header/MobileHeader.tsxweb/src/layout/Header/navbar/Menu/Settings/General/index.tsxweb/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/EmailVerificationInfo.tsxweb/src/layout/Header/navbar/Menu/Settings/index.tsxweb/src/layout/Header/navbar/Menu/index.tsxweb/src/layout/Header/navbar/index.tsxweb/src/pages/AttachmentDisplay/Header.tsxweb/src/pages/AttachmentDisplay/index.tsxweb/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsxweb/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsxweb/src/pages/Cases/CaseDetails/Appeal/Shutter/Fund.tsxweb/src/pages/Cases/CaseDetails/Evidence/EvidenceSearch.tsxweb/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsxweb/src/pages/Cases/CaseDetails/Evidence/index.tsxweb/src/pages/Cases/CaseDetails/MaintenanceButtons/DistributeRewards.tsxweb/src/pages/Cases/CaseDetails/MaintenanceButtons/DrawButton.tsxweb/src/pages/Cases/CaseDetails/MaintenanceButtons/ExecuteRuling.tsxweb/src/pages/Cases/CaseDetails/MaintenanceButtons/PassPeriodButton.tsxweb/src/pages/Cases/CaseDetails/MaintenanceButtons/SetJurorsButton.tsxweb/src/pages/Cases/CaseDetails/MaintenanceButtons/WithdrawAppealFees.tsxweb/src/pages/Cases/CaseDetails/Tabs.tsxweb/src/pages/Cases/CaseDetails/Timeline.tsxweb/src/pages/Cases/CaseDetails/Voting/Classic/Reveal.tsxweb/src/pages/Cases/CaseDetails/Voting/OptionsContainer.tsxweb/src/pages/Cases/CaseDetails/Voting/Shutter/Reveal.tsxweb/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsxweb/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsxweb/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsxweb/src/pages/Courts/CourtDetails/Description.tsxweb/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsxweb/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/index.tsxweb/src/pages/Courts/CourtDetails/Stats/index.tsxweb/src/pages/Courts/StakeMaintenanceButton/ExecuteDelayedStakeButton.tsxweb/src/pages/Courts/StakeMaintenanceButton/PassPhaseButton.tsxweb/src/pages/Home/CourtOverview/Chart.tsxweb/src/pages/Home/CourtOverview/ExtraStats.tsxweb/src/pages/Home/CourtOverview/Header.tsxweb/src/pages/Jurors/StatsAndFilters.tsxweb/src/pages/Profile/Votes/StatsAndFilters/Filters.tsxweb/src/pages/Profile/index.tsxweb/src/pages/Resolver/Landing/index.tsxweb/src/pages/Resolver/NavigationButtons/NextButton.tsxweb/src/pages/Resolver/NavigationButtons/PreviousButton.tsxweb/src/pages/Resolver/NavigationButtons/SubmitBatchDisputesButton.tsxweb/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsxweb/src/pages/Resolver/Parameters/VotingOptions/OptionsFields.tsxweb/src/pages/Resolver/Timeline.tsxweb/src/styles/base-elements.cssweb/src/styles/global-style.tsweb/src/styles/themes.tsweb/src/utils/uiComponentsTypes.ts
💤 Files with no reviewable changes (1)
- web/src/utils/uiComponentsTypes.ts
✅ Files skipped from review due to trivial changes (6)
- web/src/app.tsx
- web/src/layout/Header/navbar/Menu/Settings/General/index.tsx
- web/src/pages/Home/CourtOverview/Header.tsx
- web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx
- web/src/pages/Cases/CaseDetails/Timeline.tsx
- web/src/pages/Resolver/Timeline.tsx
Three errors the new pre-commit tsc caught after rebasing the ui-components-library migration onto dev: - StepItem is no longer exported by the library; derive it via ComponentProps in uiComponentsTypes (matches existing pattern) - Button onPress receives a PressEvent, not a MouseEvent; drop the unused preventDefault in resendVerificationEmail - restore the cast on the recursive rootCourtToItems call (the migration dropped dev's `as Court`) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
kyrers
reviewed
May 28, 2026
|
Resolve conflict in FormContactDetails/index.tsx: keep dev's unsubscribe flow and apply the @kleros/ui-components-library 3.8.0 Button API (disabled -> isDisabled, type="submit" on save). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
needs also:
Summary by CodeRabbit
New Features
Bug Fixes
Improvements
Chores
PR-Codex overview
This PR primarily focuses on updating various components to improve styling and functionality, particularly enhancing accessibility by replacing
onClickwithonPressin multiple instances. It also includes adjustments to layouts, props, and translations.Detailed summary
onClickwithonPressin multiple components for better accessibility.flexandgridfor improved layouts.isDisabled.