[Git 248] Refactor: Components consolidation core Components#9245
[Git 248] Refactor: Components consolidation core Components#9245codingwolf-at wants to merge 41 commits into
Conversation
…es from web/app/ce
… user interaction
…sUpgrade and remove obsolete components
…w breadcrumb components
…item detail component
…ock component in core
… ExtendedAppHeader, GlobalModals, and SubscriptionPill components
…nboxSourcePill components
…lated components in core
…bar functionality
… and product updates components in core
…date import paths in home and issues sections
…lation options in issue detail components, and introduce new activity helper functions
…troduce it in core filter value input component
…uce new notification components in core
…r PaidPlanUpgradeModal
… for navigation items in core
…s for tour-related files
…ths in profile settings
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
|
React Doctor found 266 issues in 103 files · 14 errors & 252 warnings · score 66 / 100 (Needs work) · vs Errors
252 warnings
202 more warnings not shown. Reviewed by React Doctor for commit |
…ew workflow-related files in core
…e-related files in core
|
|
… components for gantt-chart functionality
…ntrol and publish components in core
…lling-related files in core
…r workspace members functionality
…new workspace-related files
codingwolf-at
changed the base branch from
preview
to
git-240/hooks-consolidation-core-hooks
…ss various modules
… workspace notifications
…onents while updating import paths across various modules
…t paths, and streamline workspace notification card structure
…d files in the projects module
… the command palette module
…ss the issues module
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| </Loader> | ||
| )} | ||
| {/* eslint-disable-next-line react/iframe-missing-sandbox oxlint-disable-next-line jsx_a11y/iframe-has-title */} | ||
| <iframe |
There was a problem hiding this comment.
React Doctor · react-doctor/iframe-has-title (warning)
Screen reader users cannot identify this <iframe> because it has no title. Add a title that describes its content.
Fix → Add a descriptive title so screen reader users know what the embedded frame contains.
| </Loader> | ||
| )} | ||
| {/* eslint-disable-next-line react/iframe-missing-sandbox oxlint-disable-next-line jsx_a11y/iframe-has-title */} | ||
| <iframe |
There was a problem hiding this comment.
React Doctor · react-doctor/iframe-missing-sandbox (warning)
An <iframe> with no sandbox is a security hole: the embedded page gets full access to your site.
Fix → Add sandbox="" or a curated value so embedded pages cannot get full access to your site by default.
| position={block.position} | ||
| /> | ||
| {/* oxlint-disable-next-line jsx_a11y/no-static-element-interactions */} | ||
| <div |
There was a problem hiding this comment.
React Doctor · react-doctor/no-static-element-interactions (warning)
Screen reader users can't tell this click handler is interactive because it has no role, so add a role or use a button or link.
Fix → Give clickable static elements a role, or use a button or link.
| import { HomePageHeader } from "@/plane-web/components/home/header"; | ||
| // local imports | ||
| import { StickiesWidget } from "../stickies/widget"; | ||
| import { HomeLoader, NoProjectsEmptyState, RecentActivityWidget } from "./widgets"; |
There was a problem hiding this comment.
React Doctor · react-doctor/no-barrel-import (warning)
This ships extra code to your users & slows page load. Import directly from: "./widgets/loaders/home-loader", "./widgets/empty-states/no-projects", "./widgets/recents".
Fix → Import from the direct path: import { Button } from './components/Button' instead of ./components
| }, | ||
| }), | ||
| // oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps | ||
| [inboxIssue] |
There was a problem hiding this comment.
React Doctor · react-doctor/exhaustive-deps (warning)
useMemo can run with a stale removeIssue, workspaceSlug, projectId, archiveIssue & show your users old data.
Fix → Don't blindly add missing dependencies. Read the hook callback first.
Bad:
useEffect(() => {
setCount(count + 1);
}, [count]);
Better:
useEffect(() => {
setCount((currentCount) => currentCount + 1);
}, []);
If the missing value is recreated every render, move it inside the hook or stabilize it before adding it to deps.
| @@ -69,6 +68,7 @@ export const NotificationsSidebarRoot = observer(function NotificationsSidebarRo | |||
|
|
|||
| <Header variant={EHeaderVariant.SECONDARY} className="justify-start"> | |||
| {NOTIFICATION_TABS.map((tab) => ( | |||
| // oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions | |||
| <div | |||
There was a problem hiding this comment.
React Doctor · react-doctor/click-events-have-key-events (warning)
Keyboard users can't trigger this click handler because there's no keyboard one, so add onKeyUp, onKeyDown, or onKeyPress.
Fix → Pair onClick with a key handler so keyboard users can trigger it.
| @@ -69,6 +68,7 @@ export const NotificationsSidebarRoot = observer(function NotificationsSidebarRo | |||
|
|
|||
| <Header variant={EHeaderVariant.SECONDARY} className="justify-start"> | |||
| {NOTIFICATION_TABS.map((tab) => ( | |||
| // oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions | |||
| <div | |||
There was a problem hiding this comment.
React Doctor · react-doctor/no-static-element-interactions (warning)
Screen reader users can't tell this click handler is interactive because it has no role, so add a role or use a button or link.
Fix → Give clickable static elements a role, or use a button or link.
|
|
||
| // Prevent typing invalid characters in number input | ||
| // oxlint-disable-next-line unicorn/consistent-function-scoping | ||
| const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { |
There was a problem hiding this comment.
React Doctor · react-doctor/prefer-module-scope-pure-function (warning)
handleKeyDown inside CustomizeNavigationDialog uses no local state but is rebuilt on every render, so it wastes work & breaks memoized children. Move it to the top of the file, outside the component.
Fix → Move the function above the component, at the top of the file. It doesn't use local state, so rebuilding it each update is wasted work.
| {/* state */} | ||
| <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="state"> | ||
| {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */} | ||
| <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}> |
There was a problem hiding this comment.
React Doctor · react-doctor/click-events-have-key-events (warning)
Keyboard users can't trigger this click handler because there's no keyboard one, so add onKeyUp, onKeyDown, or onKeyPress.
Fix → Pair onClick with a key handler so keyboard users can trigger it.
| {/* state */} | ||
| <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="state"> | ||
| {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */} | ||
| <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}> |
There was a problem hiding this comment.
React Doctor · react-doctor/no-static-element-interactions (warning)
Screen reader users can't tell this click handler is interactive because it has no role, so add a role or use a button or link.
Fix → Give clickable static elements a role, or use a button or link.
…n the editor module
| )} | ||
| </div> | ||
| {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */} | ||
| <div |
There was a problem hiding this comment.
React Doctor · react-doctor/click-events-have-key-events (warning)
Keyboard users can't trigger this click handler because there's no keyboard one, so add onKeyUp, onKeyDown, or onKeyPress.
Fix → Pair onClick with a key handler so keyboard users can trigger it.
| )} | ||
| </div> | ||
| {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */} | ||
| <div |
There was a problem hiding this comment.
React Doctor · react-doctor/no-static-element-interactions (warning)
Screen reader users can't tell this click handler is interactive because it has no role, so add a role or use a button or link.
Fix → Give clickable static elements a role, or use a button or link.
| </div> | ||
| {estimatePoints.length > estimateCount.min && ( | ||
| // oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions | ||
| <div |
There was a problem hiding this comment.
React Doctor · react-doctor/click-events-have-key-events (warning)
Keyboard users can't trigger this click handler because there's no keyboard one, so add onKeyUp, onKeyDown, or onKeyPress.
Fix → Pair onClick with a key handler so keyboard users can trigger it.
| </div> | ||
| {estimatePoints.length > estimateCount.min && ( | ||
| // oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions | ||
| <div |
There was a problem hiding this comment.
React Doctor · react-doctor/no-static-element-interactions (warning)
Screen reader users can't tell this click handler is interactive because it has no role, so add a role or use a button or link.
Fix → Give clickable static elements a role, or use a button or link.
| position={block.position} | ||
| /> | ||
| {/* oxlint-disable-next-line jsx_a11y/no-static-element-interactions */} | ||
| <div |
There was a problem hiding this comment.
React Doctor · react-doctor/no-static-element-interactions (warning)
Screen reader users can't tell this click handler is interactive because it has no role, so add a role or use a button or link.
Fix → Give clickable static elements a role, or use a button or link.
| shouldRenderProperty={() => !isDateRangeEnabled} | ||
| > | ||
| {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */} | ||
| <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}> |
There was a problem hiding this comment.
React Doctor · react-doctor/no-static-element-interactions (warning)
Screen reader users can't tell this click handler is interactive because it has no role, so add a role or use a button or link.
Fix → Give clickable static elements a role, or use a button or link.
| {/* assignee */} | ||
| <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="assignee"> | ||
| {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */} | ||
| <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}> |
There was a problem hiding this comment.
React Doctor · react-doctor/click-events-have-key-events (warning)
Keyboard users can't trigger this click handler because there's no keyboard one, so add onKeyUp, onKeyDown, or onKeyPress.
Fix → Pair onClick with a key handler so keyboard users can trigger it.
| {/* assignee */} | ||
| <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="assignee"> | ||
| {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */} | ||
| <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}> |
There was a problem hiding this comment.
React Doctor · react-doctor/no-static-element-interactions (warning)
Screen reader users can't tell this click handler is interactive because it has no role, so add a role or use a button or link.
Fix → Give clickable static elements a role, or use a button or link.
| {projectDetails?.module_view && ( | ||
| <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="modules"> | ||
| {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */} | ||
| <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}> |
There was a problem hiding this comment.
React Doctor · react-doctor/click-events-have-key-events (warning)
Keyboard users can't trigger this click handler because there's no keyboard one, so add onKeyUp, onKeyDown, or onKeyPress.
Fix → Pair onClick with a key handler so keyboard users can trigger it.
| {projectDetails?.module_view && ( | ||
| <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="modules"> | ||
| {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */} | ||
| <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}> |
There was a problem hiding this comment.
React Doctor · react-doctor/no-static-element-interactions (warning)
Screen reader users can't tell this click handler is interactive because it has no role, so add a role or use a button or link.
Fix → Give clickable static elements a role, or use a button or link.
2 participants
Description
Moved Components from
apps/web/ce/componentstoapps/web/core/componentsType of Change