[WEB-5404] chore: update next images with html default images #8101
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAll usages of the Next.js Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
⏰ 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)
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 |
sriramveeraghanta
changed the title
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 13
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
apps/web/core/components/instance/maintenance-view.tsx (1)
22-28: Conflicting sizing attributes and potential image distortion.The
imgelement has conflicting sizing directives:
- HTML attributes
height="176" width="288"are overridden by Tailwind'sw-full h-fullobject-fillwill stretch the image to fill the container, distorting the aspect ratio of the maintenance illustrationApply this diff to fix the sizing approach:
- <img - src={maintenanceModeImage} - height="176" - width="288" - alt="ProjectSettingImg" - className="w-full h-full object-fill object-center" - /> + <img + src={maintenanceModeImage} + alt="ProjectSettingImg" + className="w-full object-contain" + />This ensures the image scales to fit the container width while preserving its aspect ratio without distortion.
apps/web/core/components/empty-state/simple-empty-state-root.tsx (2)
16-25: Remove unuseddimensionsproperty from sizeConfig.The
dimensionsproperty is no longer used after replacing Next.js Image with a standard img tag. The sizing is now handled entirely by thecontainerCSS classes.Apply this diff to remove the unused property:
const sizeConfig = { sm: { container: "size-24", - dimensions: 78, }, lg: { container: "size-28", - dimensions: 96, }, } as const;
33-33: Remove unnecessaryobserverwrapper from SimpleEmptyState.The component doesn't access any MobX observables internally and receives only static props. The
observerwrapper adds unnecessary overhead and should be removed.
♻️ Duplicate comments (3)
apps/web/core/components/icons/attachment/svg-file-icon.tsx (1)
8-8: Remove redundant width/height attributes (same as other icon files).This file has the same conflicting sizing issue as png-file-icon.tsx: both explicit width/height attributes and
className="h-full w-full"are specified, with the Tailwind classes overriding the attributes.Apply this diff:
- <img src={SvgFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="SvgFileIcon" /> + <img src={SvgFileIcon} className="h-full w-full object-contain" alt="SvgFileIcon" />apps/web/core/components/icons/attachment/sheet-file-icon.tsx (1)
8-8: Remove redundant width/height attributes (same as other icon files).This file has the same conflicting sizing issue as the other attachment icon files (png, svg, jpg): both explicit width/height attributes and
className="h-full w-full"create redundant sizing rules.Apply this diff:
- <img src={SheetFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="SheetFileIcon" /> + <img src={SheetFileIcon} className="h-full w-full object-contain" alt="SheetFileIcon" />apps/web/core/components/icons/attachment/jpg-file-icon.tsx (1)
8-8: Remove redundant width/height attributes (same as other icon files).This file has the same conflicting sizing issue as the other attachment icon files: both explicit width/height attributes and
className="h-full w-full"are specified, with the Tailwind classes overriding the attributes.Apply this diff:
- <img src={JpgFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JpgFileIcon" /> + <img src={JpgFileIcon} className="h-full w-full object-contain" alt="JpgFileIcon" />
🧹 Nitpick comments (26)
apps/web/core/components/api-token/empty-state.tsx (1)
21-21: Implementation looks correct; consider improving alt text for accessibility.The refactor from Next.js Image to standard HTML img is correctly implemented. The SVG import with
?urlsuffix and the use of Tailwind classes (w-52 sm:w-60 object-contain) are appropriate.The alt text "empty" is generic. For better accessibility, consider a more descriptive alternative:
- <img src={emptyApiTokens} className="w-52 sm:w-60 object-contain" alt="empty" /> + <img src={emptyApiTokens} className="w-52 sm:w-60 object-contain" alt="No API tokens illustration" />apps/space/core/components/issues/issue-layouts/error.tsx (1)
9-9: LGTM! Clean migration from Next.js Image to standard img.The replacement is correctly implemented with proper src and alt attributes. The SVG import using Vite's
?urlsuffix is appropriate.Optional: Add explicit dimensions to prevent layout shift.
Consider adding width and height attributes for better layout stability:
- <img src={SomethingWentWrongImage} alt="Oops! Something went wrong" /> + <img src={SomethingWentWrongImage} alt="Oops! Something went wrong" width="128" height="128" />This helps prevent cumulative layout shift (CLS), though the fixed-size parent container (h-32 w-32) already mitigates most concerns.
apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx (1)
39-39: Optional: Simplify redundant accessibility attributes.The
altattribute is redundant whenaria-hidden="true"is present, as screen readers ignore hidden elements. Since the parent anchor already provides an accessible label viaaria-label, the image is correctly marked as decorative.Consider simplifying to:
- <img src={imageSrc} className="h-4 w-4 object-contain" alt="GitHub Logo" aria-hidden="true" /> + <img src={imageSrc} className="h-4 w-4 object-contain" alt="" aria-hidden="true" />Note on the migration: The switch from Next.js
Imageto nativeimgis well-executed and aligns with the PR's refactoring goals. For small, always-visible icons like this, the trade-off of losing automatic optimization features is acceptable.apps/web/core/components/integration/jira/root.tsx (1)
107-107: Image replacement looks good; consider removing redundant attributes.The migration from Next.js Image to standard img tag aligns with the PR objectives. However, the
width="100%"andheight="100%"HTML attributes are redundant with the Tailwindw-full h-fullclasses.Apply this diff to remove the redundant attributes:
- <img src={JiraLogo} width="100%" height="100%" className="w-full h-full object-cover" alt="jira logo" /> + <img src={JiraLogo} className="w-full h-full object-cover" alt="jira logo" />apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx (1)
20-20: LGTM! Clean refactoring to standard img tag.The replacement of the Next.js Image component with a standard HTML img element is implemented correctly. The alt text is descriptive, the dynamic src path based on theme is preserved, and the styling (
object-contain) ensures proper aspect ratio handling.Optional performance enhancement:
Consider adding
loading="lazy"to defer loading until the image is near the viewport:- <img src={resolvedPath} className="w-full h-full object-contain" alt="No projects yet" /> + <img src={resolvedPath} className="w-full h-full object-contain" alt="No projects yet" loading="lazy" />apps/web/core/components/modules/archived-modules/view.tsx (1)
33-37: Clean migration to standard img element.The replacement correctly preserves the conditional src logic and styling. The change aligns with the PR's objective to remove Next.js Image components.
Consider adding explicit dimensions and lazy loading for better performance characteristics:
<img src={archivedModulesSearchQuery.trim() === "" ? AllFiltersImage : NameFilterImage} className="h-36 sm:h-48 w-36 sm:w-48 mx-auto" alt="No matching modules" + width="192" + height="192" + loading="lazy" />This helps prevent cumulative layout shift and defers loading for below-the-fold content, though the impact is minor for empty-state SVGs.
apps/space/core/components/instance/instance-failure-view.tsx (1)
22-22: LGTM - Appropriate for SVG error view.The replacement of Next.js Image with a standard
imgtag is appropriate here since SVG images are already optimized and don't benefit from Next.js image optimization. The alt text is descriptive, and for an error view that should display immediately, no lazy loading is needed.Optionally, consider adding explicit dimensions to prevent layout shifts:
- <img src={instanceImage} alt="Plane instance failure image" /> + <img src={instanceImage} alt="Plane instance failure image" width="400" height="300" />Note: Adjust the width/height values to match the actual SVG dimensions.
apps/web/core/components/analytics/empty-state.tsx (1)
30-32: Migration to native img tags looks clean; consider adding optimizations.The replacement of Next.js
Imagewith standardimgtags is correctly implemented with proper alt text and styling. However, this refactor trades away several Next.js Image optimizations:
- Automatic lazy loading
- Responsive image generation with srcset
- Request-time image optimization
- Built-in blur placeholders during load
To partially mitigate these concerns:
Add lazy loading:
- <img src={assetPath} alt={title} className="z-10 h-2/3 w-2/3 object-contain" /> + <img src={assetPath} alt={title} loading="lazy" className="z-10 h-2/3 w-2/3 object-contain" />- <img src={backgroundReolvedPath} alt={title} className="h-full w-full object-contain" /> + <img src={backgroundReolvedPath} alt={title} loading="lazy" className="h-full w-full object-contain" />Consider adding explicit dimensions to prevent Cumulative Layout Shift (CLS):
<img src={assetPath} alt={title} width={200} height={200} loading="lazy" className="z-10 h-2/3 w-2/3 object-contain" />Please verify that the performance trade-offs of removing Next.js Image optimizations are acceptable for your use case, especially considering this is part of a broader migration across the codebase.
apps/web/core/components/icons/attachment/audio-file-icon.tsx (1)
11-11: Improve alt text for accessibility.The alt text "AudioFileIcon" simply echoes the variable name and isn't descriptive for screen readers. Consider a more meaningful description.
Apply this diff:
- <img src={AudioFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="AudioFileIcon" /> + <img src={AudioFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="Audio file" />apps/web/core/components/empty-state/simple-empty-state-root.tsx (1)
40-40: Consider adding lazy loading for performance.The img tag doesn't include lazy loading, which could impact performance if multiple empty states are rendered on the same page.
Apply this diff to add lazy loading:
- <img src={assetPath} alt={title} className="h-full w-full object-contain" /> + <img src={assetPath} alt={title} className="h-full w-full object-contain" loading="lazy" />apps/web/core/components/icons/attachment/rar-file-icon.tsx (1)
8-8: Improve alt text for accessibility.The alt text "RarFileIcon" is a technical identifier rather than a descriptive label. For better accessibility, consider a more user-friendly description like "RAR archive file icon".
Note: The
h-full w-fullclasses are redundant when explicitwidthandheightattributes are provided (which is how this component is always used), but this doesn't cause styling issues—the inline attributes simply take precedence. This pattern is consistent across all icon components in this directory, so consider addressing it repository-wide if standardizing the approach.apps/web/core/components/integration/single-integration-card.tsx (1)
110-116: Remove redundant width/height attributes.The
width="100%"andheight="100%"attributes are redundant since theclassName="w-full h-full object-cover"already handles the sizing. Additionally, HTML width/height attributes should be numeric pixel values, not percentage strings.Apply this diff to simplify:
- <img - src={integrationDetails[integration.provider].logo} - width="100%" - height="100%" - className="w-full h-full object-cover" - alt={`${integration.title} Logo`} - /> + <img + src={integrationDetails[integration.provider].logo} + className="w-full h-full object-cover" + alt={`${integration.title} Logo`} + />apps/web/core/components/project/integration-card.tsx (1)
89-95: Remove redundant width/height attributes.The
width="100%"andheight="100%"attributes are redundant since theclassName="w-full h-full object-cover"already handles the sizing. Additionally, HTML width/height attributes should be numeric pixel values, not percentage strings.Apply this diff to simplify:
- <img - src={integrationDetails[integration.integration_detail.provider].logo} - width="100%" - height="100%" - className="w-full h-full object-cover" - alt={`${integration.integration_detail.title} Logo`} - /> + <img + src={integrationDetails[integration.integration_detail.provider].logo} + className="w-full h-full object-cover" + alt={`${integration.integration_detail.title} Logo`} + />apps/web/core/components/icons/attachment/html-file-icon.tsx (1)
8-8: LGTM – Clean replacement of Next.js Image with standard img.The img element correctly includes width, height, and object-contain styling to preserve the layout behavior. The refactor is straightforward and maintains the component's visual appearance.
Optional: Consider a more descriptive alt text like "HTML file icon" instead of "HtmlFileIcon" for improved accessibility. However, for decorative icon components this is not critical.
apps/web/core/components/auth-screens/not-authorized-view.tsx (1)
28-28: Improve alt text for better accessibility.The alt text "ProjectSettingImg" is a technical identifier rather than a meaningful description. Consider using descriptive text that conveys the purpose of the image to screen reader users.
Apply this diff for a more descriptive alt attribute:
- <img src={asset} className="h-[176px] w-[288px] object-contain" alt="ProjectSettingImg" /> + <img src={asset} className="h-[176px] w-[288px] object-contain" alt="Not authorized illustration" />apps/web/core/components/ui/profile-empty-state.tsx (1)
13-13: Remove conflicting width/height attributes.The explicit width="32" height="32" attributes conflict with the className="w-full h-full" which will make the image fill its container (56×56px based on the parent's h-14 w-14). The numeric attributes are unnecessary and create confusion about the intended sizing.
Apply this diff to remove the conflicting attributes:
- <img src={image} width="32" height="32" className="w-full h-full object-cover" alt={title} /> + <img src={image} className="w-full h-full object-cover" alt={title} />apps/web/core/components/icons/attachment/img-file-icon.tsx (1)
8-8: Improve alt text for better accessibility.The alt text "ImgFileIcon" is a technical identifier. For file type icons, consider using more descriptive text like "Image file" or "IMG file icon" to better convey meaning to screen reader users.
Apply this diff:
- <img src={ImgFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="ImgFileIcon" /> + <img src={ImgFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="Image file icon" />apps/web/core/components/icons/attachment/png-file-icon.tsx (1)
8-8: Remove redundant width/height attributes.The img element has both explicit width/height attributes and
className="h-full w-full", which creates conflicting sizing rules. The Tailwind classesh-full w-fullwill override the explicit dimensions, making the width/height attributes redundant.Apply this diff:
- <img src={PngFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="PngFileIcon" /> + <img src={PngFileIcon} className="h-full w-full object-contain" alt="PngFileIcon" />Note: This same pattern appears in other attachment icon files (jpg-file-icon.tsx, svg-file-icon.tsx, sheet-file-icon.tsx) and should be addressed consistently across all of them.
apps/web/core/components/web-hooks/empty-state.tsx (1)
20-20: Consider simplifying the sizing approach.The img uses both width/height="100%" attributes and Tailwind width classes (
w-52 sm:w-60). While functional, this mixing of sizing approaches is slightly redundant since the Tailwind classes will control the width andobject-coverwill handle the sizing.Consider this cleaner approach:
- <img src={EmptyWebhook} width="100%" height="100%" className="w-52 sm:w-60 object-cover" alt="empty" /> + <img src={EmptyWebhook} className="w-52 sm:w-60 h-auto object-cover" alt="empty" />apps/web/core/components/cycles/archived-cycles/view.tsx (1)
33-37: Consider adding lazy loading for performance.The img element is correctly implemented with conditional src and responsive sizing. For improved performance on larger pages, consider adding
loading="lazy"to defer loading until the image is near the viewport.- <img + <img + loading="lazy" src={archivedCyclesSearchQuery.trim() === "" ? AllFiltersImage : NameFilterImage} className="h-36 sm:h-48 w-36 sm:w-48 mx-auto" alt="No matching cycles" />apps/web/core/components/core/sidebar/progress-stats/assignee.tsx (1)
72-72: Consider lazy loading for the empty state illustration.The img element correctly uses fixed dimensions and object-contain. Adding
loading="lazy"would improve performance when this empty state is conditionally rendered.- <img src={emptyMembers} className="h-12 w-12 object-contain" alt="empty members" /> + <img src={emptyMembers} loading="lazy" className="h-12 w-12 object-contain" alt="empty members" />apps/web/core/components/cycles/cycles-view.tsx (1)
39-43: Consider lazy loading for better performance.The img implementation is correct with conditional src and responsive sizing. Adding
loading="lazy"would defer loading until needed.<img + loading="lazy" src={searchQuery.trim() === "" ? AllFiltersImage : NameFilterImage} className="mx-auto h-36 w-36 sm:h-48 sm:w-48 object-contain" alt="No matching cycles" />apps/web/core/components/core/sidebar/progress-stats/label.tsx (1)
78-78: Consider adding explicit dimensions for better CLS.The implementation is correct with
object-containfor aspect ratio preservation. However, adding explicit width/height attributes would improve Cumulative Layout Shift (CLS) metrics.-<img src={emptyLabel} className="h-12 w-12 object-contain" alt="empty label" /> +<img src={emptyLabel} className="h-12 w-12 object-contain" alt="empty label" width={48} height={48} loading="lazy" />apps/web/core/components/common/empty-state.tsx (1)
30-30: Add explicit dimensions and lazy loading for better performance.Since
EmptyStateis a reusable component that may appear multiple times, adding explicit dimensions and lazy loading would improve performance and prevent layout shift.-<img src={image} className="w-52 sm:w-60 object-contain" alt={primaryButton?.text || "button image"} /> +<img src={image} className="w-52 sm:w-60 object-contain" alt={primaryButton?.text || "Empty state illustration"} width={240} height={240} loading="lazy" />Note: This also improves the alt text fallback to be more descriptive than "button image".
apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx (1)
75-80: Clean implementation with theme-aware image selection.The migration maintains theme-aware rendering and includes explicit dimensions to prevent layout shift. The implementation correctly uses the theme resolution utility.
Consider adding lazy loading:
<img src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage} height={24} width={24} alt="GitHub Logo" + loading="lazy" />apps/web/core/components/common/logo-spinner.tsx (1)
13-13: Consider adding explicit height for CLS prevention.The implementation correctly handles theme-aware GIF selection. Since this is a spinner/loading indicator, it should load immediately (no lazy loading). However, adding an explicit height would help prevent layout shift.
-<img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11 object-contain" /> +<img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11 object-contain" height={44} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (79)
apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx(1 hunks)apps/admin/app/(all)/(home)/auth-helpers.tsx(2 hunks)apps/admin/app/types/next-image.d.ts(0 hunks)apps/admin/ce/components/authentication/authentication-modes.tsx(2 hunks)apps/admin/core/components/common/empty-state.tsx(1 hunks)apps/admin/core/components/common/logo-spinner.tsx(1 hunks)apps/admin/core/components/instance/failure.tsx(1 hunks)apps/admin/core/components/instance/instance-not-ready.tsx(1 hunks)apps/admin/core/components/instance/loading.tsx(1 hunks)apps/admin/core/components/new-user-popup.tsx(1 hunks)apps/admin/vite.config.ts(0 hunks)apps/space/app/not-found.tsx(1 hunks)apps/space/app/types/next-image.d.ts(0 hunks)apps/space/core/components/account/auth-forms/auth-root.tsx(4 hunks)apps/space/core/components/account/user-logged-in.tsx(1 hunks)apps/space/core/components/common/logo-spinner.tsx(2 hunks)apps/space/core/components/instance/instance-failure-view.tsx(1 hunks)apps/space/core/components/issues/issue-layouts/error.tsx(1 hunks)apps/space/core/components/ui/not-found.tsx(1 hunks)apps/space/core/lib/instance-provider.tsx(1 hunks)apps/space/vite.config.ts(0 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx(1 hunks)apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx(1 hunks)apps/web/app/(all)/create-workspace/page.tsx(1 hunks)apps/web/app/not-found.tsx(1 hunks)apps/web/app/types/next-image.d.ts(0 hunks)apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx(1 hunks)apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsx(1 hunks)apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx(1 hunks)apps/web/core/components/account/auth-forms/auth-root.tsx(3 hunks)apps/web/core/components/analytics/empty-state.tsx(1 hunks)apps/web/core/components/api-token/empty-state.tsx(1 hunks)apps/web/core/components/auth-screens/not-authorized-view.tsx(1 hunks)apps/web/core/components/auth-screens/project/join-project.tsx(1 hunks)apps/web/core/components/common/empty-state.tsx(1 hunks)apps/web/core/components/common/latest-feature-block.tsx(1 hunks)apps/web/core/components/common/logo-spinner.tsx(1 hunks)apps/web/core/components/common/new-empty-state.tsx(1 hunks)apps/web/core/components/core/image-picker-popover.tsx(1 hunks)apps/web/core/components/core/sidebar/progress-stats/assignee.tsx(1 hunks)apps/web/core/components/core/sidebar/progress-stats/label.tsx(1 hunks)apps/web/core/components/cycles/archived-cycles/view.tsx(1 hunks)apps/web/core/components/cycles/cycles-view.tsx(1 hunks)apps/web/core/components/empty-state/simple-empty-state-root.tsx(1 hunks)apps/web/core/components/icons/attachment/audio-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/css-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/csv-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/default-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/doc-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/figma-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/html-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/img-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/jpg-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/js-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/pdf-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/png-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/rar-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/sheet-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/svg-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/txt-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/video-file-icon.tsx(1 hunks)apps/web/core/components/icons/attachment/zip-file-icon.tsx(1 hunks)apps/web/core/components/instance/maintenance-view.tsx(1 hunks)apps/web/core/components/instance/not-ready-view.tsx(1 hunks)apps/web/core/components/integration/github/root.tsx(1 hunks)apps/web/core/components/integration/guide.tsx(1 hunks)apps/web/core/components/integration/jira/root.tsx(1 hunks)apps/web/core/components/integration/single-integration-card.tsx(1 hunks)apps/web/core/components/modules/archived-modules/view.tsx(1 hunks)apps/web/core/components/onboarding/tour/root.tsx(1 hunks)apps/web/core/components/project/empty-state.tsx(1 hunks)apps/web/core/components/project/integration-card.tsx(1 hunks)apps/web/core/components/ui/profile-empty-state.tsx(1 hunks)apps/web/core/components/web-hooks/empty-state.tsx(1 hunks)apps/web/core/layouts/auth-layout/workspace-wrapper.tsx(1 hunks)apps/web/vite.config.ts(0 hunks)
💤 Files with no reviewable changes (6)
- apps/space/vite.config.ts
- apps/web/app/types/next-image.d.ts
- apps/admin/app/types/next-image.d.ts
- apps/admin/vite.config.ts
- apps/space/app/types/next-image.d.ts
- apps/web/vite.config.ts
🧰 Additional context used
🧠 Learnings (7)
📚 Learning: 2025-10-21T17:22:05.204Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7989
File: apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx:45-46
Timestamp: 2025-10-21T17:22:05.204Z
Learning: In the makeplane/plane repository, the refactor from useParams() to params prop is specifically scoped to page.tsx and layout.tsx files in apps/web/app (Next.js App Router pattern). Other components (hooks, regular client components, utilities) should continue using the useParams() hook as that is the correct pattern for non-route components.
Applied to files:
apps/web/core/components/integration/single-integration-card.tsxapps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsxapps/web/core/components/onboarding/tour/root.tsxapps/admin/app/(all)/(dashboard)/authentication/github/page.tsxapps/space/core/components/account/auth-forms/auth-root.tsxapps/web/core/components/project/integration-card.tsxapps/admin/core/components/instance/instance-not-ready.tsxapps/web/core/components/integration/github/root.tsxapps/web/core/components/analytics/empty-state.tsxapps/web/core/components/common/empty-state.tsxapps/web/app/(all)/create-workspace/page.tsxapps/admin/core/components/common/empty-state.tsxapps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsxapps/web/core/components/account/auth-forms/auth-root.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsxapps/web/core/components/integration/jira/root.tsxapps/web/core/components/auth-screens/project/join-project.tsxapps/web/core/components/integration/guide.tsxapps/web/core/layouts/auth-layout/workspace-wrapper.tsxapps/space/core/components/account/user-logged-in.tsxapps/web/core/components/api-token/empty-state.tsxapps/web/core/components/web-hooks/empty-state.tsxapps/web/core/components/project/empty-state.tsxapps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsxapps/web/app/not-found.tsxapps/web/core/components/common/new-empty-state.tsxapps/web/core/components/instance/not-ready-view.tsx
📚 Learning: 2025-10-09T20:42:31.843Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.
Applied to files:
apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsxapps/web/core/components/cycles/cycles-view.tsxapps/web/core/components/onboarding/tour/root.tsxapps/admin/app/(all)/(dashboard)/authentication/github/page.tsxapps/space/core/components/account/auth-forms/auth-root.tsxapps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsxapps/web/core/components/analytics/empty-state.tsxapps/web/app/(all)/create-workspace/page.tsxapps/admin/core/components/common/empty-state.tsxapps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsxapps/web/core/components/account/auth-forms/auth-root.tsxapps/web/core/components/core/sidebar/progress-stats/label.tsxapps/web/core/components/core/sidebar/progress-stats/assignee.tsxapps/web/core/layouts/auth-layout/workspace-wrapper.tsxapps/web/core/components/cycles/archived-cycles/view.tsxapps/web/core/components/modules/archived-modules/view.tsxapps/web/core/components/project/empty-state.tsxapps/web/core/components/empty-state/simple-empty-state-root.tsxapps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsxapps/web/core/components/instance/not-ready-view.tsx
📚 Learning: 2025-09-02T08:14:49.260Z
Learnt from: sriramveeraghanta
Repo: makeplane/plane PR: 7697
File: apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx:12-13
Timestamp: 2025-09-02T08:14:49.260Z
Learning: The star-us-link.tsx file in apps/web/app/(all)/[workspaceSlug]/(projects)/ already has "use client" directive at the top, making it a proper Client Component for hook usage.
Applied to files:
apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsxapps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsxapps/admin/core/components/instance/instance-not-ready.tsxapps/web/core/components/integration/github/root.tsxapps/web/core/components/common/empty-state.tsxapps/admin/core/components/common/empty-state.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsxapps/web/core/components/integration/jira/root.tsxapps/space/core/lib/instance-provider.tsxapps/web/core/components/auth-screens/project/join-project.tsxapps/space/core/components/account/user-logged-in.tsxapps/web/core/components/api-token/empty-state.tsxapps/web/core/components/web-hooks/empty-state.tsxapps/space/app/not-found.tsxapps/space/core/components/instance/instance-failure-view.tsxapps/admin/core/components/new-user-popup.tsxapps/web/core/components/project/empty-state.tsxapps/web/core/components/empty-state/simple-empty-state-root.tsxapps/web/app/not-found.tsxapps/web/core/components/common/new-empty-state.tsxapps/space/core/components/common/logo-spinner.tsxapps/web/core/components/instance/not-ready-view.tsx
📚 Learning: 2025-10-09T22:12:26.424Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T22:12:26.424Z
Learning: When `types/react` is installed in a TypeScript project (which is standard for React + TypeScript codebases), React types (React.FC, React.ReactNode, React.ComponentProps, etc.) are globally available by design. These type annotations can and should be used without explicitly importing the React namespace. This is a TypeScript/DefinitelyTyped feature, not codebase-specific configuration.
Applied to files:
apps/web/core/components/cycles/cycles-view.tsxapps/web/core/components/account/auth-forms/auth-root.tsxapps/web/core/layouts/auth-layout/workspace-wrapper.tsxapps/web/core/components/cycles/archived-cycles/view.tsxapps/web/core/components/modules/archived-modules/view.tsx
📚 Learning: 2025-10-09T20:43:07.762Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/core/components/new-user-popup.tsx:4-6
Timestamp: 2025-10-09T20:43:07.762Z
Learning: The `next-themes` library is React-compatible and can be used outside of Next.js applications. It's not Next.js-specific despite its name.
Applied to files:
apps/web/core/components/instance/maintenance-view.tsxapps/admin/app/(all)/(dashboard)/authentication/github/page.tsxapps/space/core/components/account/auth-forms/auth-root.tsxapps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsxapps/admin/core/components/instance/failure.tsxapps/web/core/components/analytics/empty-state.tsxapps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsxapps/admin/core/components/instance/loading.tsxapps/web/core/components/account/auth-forms/auth-root.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsxapps/space/core/lib/instance-provider.tsxapps/web/core/components/common/latest-feature-block.tsxapps/admin/core/components/common/logo-spinner.tsxapps/admin/ce/components/authentication/authentication-modes.tsxapps/web/core/components/common/logo-spinner.tsxapps/space/core/components/instance/instance-failure-view.tsxapps/admin/core/components/new-user-popup.tsxapps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsxapps/space/core/components/common/logo-spinner.tsxapps/web/core/components/instance/not-ready-view.tsx
📚 Learning: 2025-06-04T16:22:44.344Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7164
File: packages/ui/.storybook/main.ts:24-47
Timestamp: 2025-06-04T16:22:44.344Z
Learning: In packages/ui/.storybook/main.ts, the webpackFinal function intentionally overrides the CSS loader strategy by finding and replacing existing CSS rules. This is a temporary workaround for a known upstream issue in Storybook's CSS handling that has been communicated to the Storybook maintainers. The current implementation should not be changed until the upstream issue is resolved.
Applied to files:
apps/web/core/components/icons/attachment/css-file-icon.tsx
📚 Learning: 2025-10-01T15:30:17.605Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7888
File: packages/propel/src/avatar/avatar.stories.tsx:2-3
Timestamp: 2025-10-01T15:30:17.605Z
Learning: In the makeplane/plane repository, avoid suggesting inline type imports (e.g., `import { Avatar, type TAvatarSize }`) due to bundler compatibility issues. Keep type imports and value imports as separate statements.
Applied to files:
apps/admin/core/components/instance/instance-not-ready.tsxapps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsxapps/web/core/components/core/sidebar/progress-stats/label.tsxapps/web/core/components/core/sidebar/progress-stats/assignee.tsxapps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsxapps/web/core/components/instance/not-ready-view.tsx
🧬 Code graph analysis (1)
apps/admin/ce/components/authentication/authentication-modes.tsx (4)
apps/admin/core/components/authentication/google-config.tsx (1)
GoogleConfiguration(20-56)apps/admin/core/components/authentication/gitlab-config.tsx (1)
GitlabConfiguration(20-56)apps/admin/core/components/authentication/gitea-config.tsx (1)
GiteaConfiguration(20-58)apps/admin/ce/components/common/upgrade-button.tsx (1)
UpgradeButton(10-15)
⏰ 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). (4)
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: Agent
- GitHub Check: Build and lint web apps
- GitHub Check: Analyze (javascript)
🔇 Additional comments (42)
apps/web/core/components/onboarding/tour/root.tsx (1)
153-159: Verify the intentional removal of Next.js Image optimization.Replacing Next.js
Imagewith standardimgremoves automatic optimizations (lazy loading, responsive images, format conversion). Please confirm this trade-off aligns with the PR objectives for removing the Next.js Image compatibility layer.apps/web/core/components/icons/attachment/js-file-icon.tsx (1)
7-9: Verify image optimization strategy.Replacing Next.js
Imagewith standardimgremoves automatic optimizations such as lazy loading, responsive srcset generation, and image compression. Since this change is applied systematically across the application, ensure that:
- The performance impact has been evaluated
- Alternative optimization strategies are in place if needed (e.g., manual lazy loading, pre-optimized assets)
- The trade-off aligns with the application's performance requirements
apps/web/core/components/integration/guide.tsx (1)
105-109: LGTM!Clean replacement of Next.js Image with standard img element. The sizing and alt text are properly configured.
apps/web/core/components/common/latest-feature-block.tsx (1)
28-34: LGTM!The replacement preserves the theme-based styling and maintains proper alt text and sizing.
apps/admin/core/components/instance/loading.tsx (1)
13-13: LGTM!Clean replacement that preserves the responsive sizing and proper alt text.
apps/space/core/components/account/user-logged-in.tsx (1)
30-30: LGTM!Clean replacement with proper alt text.
apps/space/core/lib/instance-provider.tsx (2)
54-54: LGTM!Clean replacement for the logo with proper alt text.
59-59: LGTM!Clean replacement for the background pattern with proper alt text and styling classes.
apps/admin/core/components/new-user-popup.tsx (1)
41-46: LGTM!Clean replacement with proper numeric dimensions and descriptive alt text.
apps/web/core/components/icons/attachment/zip-file-icon.tsx (1)
8-8: LGTM – Consistent image replacement.The refactor follows the same pattern as other attachment icons with proper width, height, and containment styling.
apps/web/core/components/icons/attachment/default-file-icon.tsx (1)
8-14: LGTM – Well-formatted image element.The multiline formatting improves readability while maintaining all necessary attributes for proper rendering.
apps/web/core/components/icons/attachment/video-file-icon.tsx (1)
8-8: LGTM – Consistent with other attachment icon refactors.apps/web/core/components/icons/attachment/csv-file-icon.tsx (1)
8-8: LGTM – Straightforward image replacement.apps/web/core/components/icons/attachment/txt-file-icon.tsx (1)
8-8: LGTM – Consistent icon component refactor.apps/web/core/components/icons/attachment/pdf-file-icon.tsx (1)
8-8: LGTM!The replacement of Next.js Image with a standard img element is clean and preserves all necessary attributes. The sizing is appropriately handled with both explicit dimensions and CSS classes.
apps/admin/core/components/instance/instance-not-ready.tsx (1)
13-13: LGTM!The transition to a standard img element is straightforward. The image will render at its natural dimensions within the flex container.
apps/space/core/components/account/auth-forms/auth-root.tsx (4)
164-164: LGTM!Clean replacement of the Google logo Image component with an img element. Dimensions and alt text are properly preserved.
174-180: LGTM!The GitHub logo rendering correctly uses theme-based image selection and maintains proper dimensions and accessibility attributes.
189-189: LGTM!GitLab logo replacement is consistent with the other OAuth providers.
198-198: LGTM!Gitea logo replacement completes the consistent pattern across all OAuth providers.
apps/admin/app/(all)/(home)/auth-helpers.tsx (3)
137-137: LGTM!Google logo replacement maintains proper dimensions and accessibility.
145-150: LGTM!GitHub logo correctly uses theme-based image selection via
resolveGeneralThemehelper and maintains proper attributes.
158-158: LGTM!GitLab logo replacement is consistent with the authentication modes pattern.
apps/web/core/layouts/auth-layout/workspace-wrapper.tsx (1)
180-186: LGTM!The workspace not found illustration replacement is correct. The sizing combines explicit dimensions with CSS classes to ensure the image renders at 220px height while maintaining aspect ratio via
object-contain.apps/web/app/(all)/create-workspace/page.tsx (1)
73-77: LGTM!The workspace creation disabled illustration correctly uses CSS classes for responsive sizing within its container. The
object-containclass ensures the image maintains its aspect ratio.apps/web/core/components/common/new-empty-state.tsx (1)
49-49: LGTM!The image rendering is appropriately sized using CSS classes, and the alt text provides a reasonable fallback. This maintains consistency with the component's responsive design.
apps/space/core/components/common/logo-spinner.tsx (1)
15-15: LGTM!The logo spinner correctly uses responsive CSS classes for sizing and preserves the theme-based logo selection. The
w-autoclass maintains the aspect ratio appropriately.apps/web/core/components/project/empty-state.tsx (1)
30-36: LGTM!The migration from Next.js Image to standard img element is implemented correctly. The responsive sizing classes and alt text handling (derived from button text with empty string fallback) are appropriate.
apps/admin/core/components/common/empty-state.tsx (1)
29-29: LGTM!The img element is conditionally rendered and includes appropriate sizing classes and alt text with a sensible fallback.
apps/admin/core/components/common/logo-spinner.tsx (1)
12-12: LGTM!The img element correctly preserves the theme-based logo switching logic and includes appropriate responsive sizing classes.
apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsx (1)
19-23: LGTM!The migration preserves the theme-based asset switching logic and includes descriptive alt text and appropriate sizing classes.
apps/web/core/components/account/auth-forms/auth-root.tsx (1)
114-114: LGTM!All OAuth provider icons are consistently migrated from Next.js Image to img elements with appropriate sizing classes and descriptive alt text. The theme-based GitHub logo selection logic is preserved correctly.
Also applies to: 124-128, 138-138
apps/admin/ce/components/authentication/authentication-modes.tsx (1)
60-103: LGTM! Clean migration from Next.js Image to standard img tags.The replacement of Next.js Image components with standard img elements is consistent throughout the authentication modes. All images retain proper sizing (width/height attributes), alt text, and the GitHub icon correctly preserves theme-based source resolution.
apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx (1)
19-23: LGTM! Clean implementation with theme-aware image selection.The migration from Next.js Image to standard img is well-executed. The sizing is cleanly handled via className only (no conflicting attributes), and theme-based source resolution is correctly preserved.
apps/web/core/components/core/image-picker-popover.tsx (1)
331-335: LGTM! Proper migration with appropriate object-fit behavior.The replacement of Next.js Image with standard img is correctly implemented. The sizing is cleanly handled via className only,
object-coveris appropriate for the preview display, and the dynamic src construction from either uploaded file or existing value is correct.apps/web/core/components/icons/attachment/css-file-icon.tsx (1)
8-8: LGTM! Clean migration from Next.js Image to standard img.The change correctly preserves width, height, and alt attributes while adding object-contain for aspect ratio control. This is consistent with the PR's architectural shift away from next/image.
apps/web/core/components/icons/attachment/doc-file-icon.tsx (1)
8-8: LGTM! Consistent refactoring.The img tag properly includes width, height, and alt attributes with object-contain for sizing control.
apps/space/core/components/ui/not-found.tsx (1)
11-11: LGTM! Appropriate for 404 page.The img tag is correctly sized by its parent container and doesn't need lazy loading since it's the primary content of the page.
apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx (1)
65-65: LGTM! Proper icon rendering with explicit dimensions.The img tag correctly specifies width, height, and alt text for the authentication provider logo. Explicit dimensions prevent layout shift.
apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx (1)
66-66: LGTM! Consistent authentication icon implementation.The img tag properly includes explicit dimensions and alt text, matching the pattern used for other authentication providers.
apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx (1)
67-67: Consistent migration from Next.js Image to standard img.The replacement is clean and includes explicit dimensions (height/width) which helps prevent layout shift. However, note that this loses Next.js Image's automatic optimization, lazy loading, and responsive image features.
Consider adding
loading="lazy"for better performance on pages with multiple images:-<img src={giteaLogo} height={24} width={24} alt="Gitea Logo" /> +<img src={giteaLogo} height={24} width={24} alt="Gitea Logo" loading="lazy" />apps/web/app/not-found.tsx (1)
21-21: LGTM - Parent container provides layout stability.The implementation is sound. While the img itself lacks explicit dimensions, the parent container has explicit sizing (
h-60 w-60 lg:h-80 lg:w-80), which prevents layout shift. Theobject-containclass ensures proper aspect ratio handling.
apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
Show resolved
Hide resolved
| <div className="relative hidden w-1/2 lg:block"> | ||
| <span className="absolute bottom-0 right-0"> | ||
| <Image src={isDarkMode ? ctaR1Dark : ctaR1Light} height={420} width={500} alt="r-1" /> | ||
| <img src={isDarkMode ? ctaR1Dark : ctaR1Light} className="w-full h-full object-contain" alt="r-1" /> | ||
| </span> | ||
| <span className="absolute -bottom-16 right-1/2 rounded-xl"> | ||
| <Image src={isDarkMode ? ctaR2Dark : ctaR2Light} height={210} width={280} alt="r-2" /> | ||
| <img src={isDarkMode ? ctaR2Dark : ctaR2Light} className="w-full h-full object-contain" alt="r-2" /> | ||
| </span> | ||
| </div> |
There was a problem hiding this comment.
🧩 Analysis chain
Verify image sizing and improve accessibility.
Two concerns with these images:
-
Alt text: "r-1" and "r-2" are not descriptive. Use
alt=""if decorative or provide meaningful descriptions. -
Dimensional constraints:
w-full h-fullon images inside absolutely positioned<span>elements without explicit dimensions may not render correctly. The images might collapse or display at unexpected sizes since the parent spans have no width/height constraints.
Apply this diff to fix alt text and add loading optimization:
<span className="absolute bottom-0 right-0">
- <img src={isDarkMode ? ctaR1Dark : ctaR1Light} className="w-full h-full object-contain" alt="r-1" />
+ <img src={isDarkMode ? ctaR1Dark : ctaR1Light} className="w-full h-full object-contain" alt="" loading="lazy" />
</span>
<span className="absolute -bottom-16 right-1/2 rounded-xl">
- <img src={isDarkMode ? ctaR2Dark : ctaR2Light} className="w-full h-full object-contain" alt="r-2" />
+ <img src={isDarkMode ? ctaR2Dark : ctaR2Light} className="w-full h-full object-contain" alt="" loading="lazy" />
</span>Please verify the images render correctly at the intended sizes. Consider adding explicit dimensions (either inline width/height attributes or fixed Tailwind classes) to prevent layout issues.
Wait, that won't work without cloning. Let me correct:
🏁 Script executed:
#!/bin/bash
# Check if file exists and examine lines 100-120 for full context
if [ -f "apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx" ]; then
echo "=== File found. Context around lines 107-114 ==="
sed -n '100,120p' "apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx" | cat -n
echo ""
echo "=== Full file to understand parent structure ==="
wc -l "apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx"
else
echo "File not found at expected path"
fiLength of output: 1395
🏁 Script executed:
#!/bin/bash
# Examine the file context around lines 107-114
sed -n '95,125p' "apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx" | cat -nLength of output: 1676
🏁 Script executed:
#!/bin/bash
# Search for any CSS or Tailwind overrides related to these spans or images
rg -n "ctaR1|ctaR2" apps/web/ce/components/active-cycles/Length of output: 1023
🏁 Script executed:
#!/bin/bash
# Check if these image sources are imported and understand their nature
rg -n "import.*ctaR" apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsxLength of output: 351
🏁 Script executed:
#!/bin/bash
# Look at the component structure to understand parent dimensions
sed -n '1,130p' "apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx"Length of output: 5336
🌐 Web query:
Tailwind CSS w-full h-full on absolutely positioned elements without parent dimensions
💡 Result:
Short answer: h-full needs a defined parent height, so w-full/h-full on an absolutely positioned child will only fill what the parent’s dimensions provide. To make an absolutely positioned element fill its parent, give the parent positioning (usually position: relative) and use inset-0 (or top-0 right-0 bottom-0 left-0) on the child — or give the parent an explicit height (h-, h-screen, min-h-, or make it a flex column with flex-1). Tailwind docs: h-full is 100% of the parent and requires the parent to have a defined height. [1][2]
Examples:
-
Parent with explicit height
-
Fill viewport if parent height unknown
... -
Using flex (parent height comes from layout)
...
Notes:
- inset-0 is equivalent to top-0 right-0 bottom-0 left-0 and is the usual Tailwind way to stretch an absolute child to its positioned parent. [1][2]
- If you don’t or can’t set the parent’s height, h-full won’t work — use h-screen/min-h-screen or ensure the parent’s height is computed (e.g., via flex or an explicit value). [1][3]
Sources: Tailwind height docs and sizing examples; CSS absolute-positioning behavior. [1][2][3]
References:
[1] Tailwind CSS — height / sizing docs.
[2] Tailwind CSS — height examples (h-full, h-screen, inset).
[3] Explanation of absolute positioning relative to positioned parent.
Alt text is too vague, and dimensional constraints remain unresolved.
The sizing concern is valid: the <span> elements lack explicit width/height, so w-full h-full on the images may not render correctly. The left image uses explicit w-[125px] h-[125px]—the right images should follow the same pattern. The proposed diff addresses alt text and loading but skips the dimensional fix entirely.
Required changes:
- Fix alt text (use
alt=""if decorative, or meaningful descriptions) - Add explicit dimensions to spans or images, or add
h-full+ explicit height to parent<div className="relative w-1/2"> - Add
loading="lazy"for performance
Verify the images render at intended sizes after applying dimensional fixes.
| <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center"> | ||
| <div className="h-44 w-72"> | ||
| <Image src={Unauthorized} height="176" width="288" alt="JoinProject" /> | ||
| <img src={Unauthorized} className="h-[176px] w-[288px] object-contain" alt="JoinProject" /> |
There was a problem hiding this comment.
Improve alt text for better accessibility.
The alt text "JoinProject" is too generic. It should describe what the image shows to assistive technology users.
Apply this diff:
- <img src={Unauthorized} className="h-[176px] w-[288px] object-contain" alt="JoinProject" />
+ <img src={Unauthorized} className="h-[176px] w-[288px] object-contain" alt="Unauthorized access illustration" />Additionally, consider using width/height attributes instead of (or alongside) Tailwind classes for better layout stability:
- <img src={Unauthorized} className="h-[176px] w-[288px] object-contain" alt="Unauthorized access illustration" />
+ <img src={Unauthorized} width={288} height={176} className="h-[176px] w-[288px] object-contain" alt="Unauthorized access illustration" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <img src={Unauthorized} className="h-[176px] w-[288px] object-contain" alt="JoinProject" /> | |
| <img src={Unauthorized} className="h-[176px] w-[288px] object-contain" alt="Unauthorized access illustration" /> |
🤖 Prompt for AI Agents
In apps/web/core/components/auth-screens/project/join-project.tsx around line
41, the <img> alt is too generic; replace "JoinProject" with a descriptive alt
that conveys the image content (e.g., "illustration of two people joining a
project" or similar accurate description) and add explicit width and height
attributes (matching the Tailwind sizes, e.g., width="288" height="176")
alongside the existing className to improve accessibility and layout stability.
|
|
||
| export const JavaScriptIcon: React.FC<ImageIconPros> = ({ width, height }) => ( | ||
| <Image src={JsFileIcon} height={height} width={width} alt="JsFileIcon" /> | ||
| <img src={JsFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JsFileIcon" /> |
There was a problem hiding this comment.
Improve alt text for accessibility.
The alt text "JsFileIcon" appears to be a variable name rather than a descriptive label. For better accessibility, use a user-friendly description.
Apply this diff:
- <img src={JsFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JsFileIcon" />
+ <img src={JsFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JavaScript file icon" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <img src={JsFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JsFileIcon" /> | |
| <img src={JsFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JavaScript file icon" /> |
🤖 Prompt for AI Agents
In apps/web/core/components/icons/attachment/js-file-icon.tsx around line 8, the
img alt text is a variable-style label ("JsFileIcon") which is not user-friendly
for screen readers; replace it with a descriptive, accessible string such as
"JavaScript file icon" (or "JavaScript file" if context prefers) so the alt
attribute conveys the image's meaning to users relying on assistive technology.
CSS class conflict with explicit dimensions.
The className="h-full w-full" will make the image fill its parent container's dimensions, which may override or conflict with the explicit width and height props. This could lead to unexpected sizing behavior where the props are ignored.
Consider one of these approaches:
- Remove
h-full w-fullif you want the explicit dimensions to control the size - Remove the
widthandheightprops if you want the image to fill its container
Apply this diff if explicit dimensions should be respected:
- <img src={JsFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JsFileIcon" />
+ <img src={JsFileIcon} width={width} height={height} className="object-contain" alt="JsFileIcon" />Or apply this diff if container-filling is the intended behavior:
-export const JavaScriptIcon: React.FC<ImageIconPros> = ({ width, height }) => (
- <img src={JsFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JsFileIcon" />
+export const JavaScriptIcon: React.FC<ImageIconPros> = () => (
+ <img src={JsFileIcon} className="h-full w-full object-contain" alt="JavaScript file icon" />
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <img src={JsFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JsFileIcon" /> | |
| <img src={JsFileIcon} width={width} height={height} className="object-contain" alt="JsFileIcon" /> |
🤖 Prompt for AI Agents
In apps/web/core/components/icons/attachment/js-file-icon.tsx around line 8, the
img element uses className="h-full w-full" which conflicts with the explicit
width and height props; if you want the explicit dimensions to take effect,
remove the h-full and w-full classes so the width/height props control sizing,
or if you intend the image to fill its parent, remove the width and height props
and keep the h-full w-full classes (or replace them with appropriate responsive
utility classes); update the file accordingly so only one sizing approach is
used.
| <img | ||
| src={patternBackground} | ||
| width="100%" | ||
| height="100%" | ||
| className="object-cover" | ||
| alt="Plane background pattern" | ||
| /> |
There was a problem hiding this comment.
Remove invalid width/height attribute values.
The width="100%" and height="100%" attributes are invalid HTML—the width and height attributes expect unitless integer values representing pixels, not percentage strings. Since the parent container and CSS classes already control the sizing, remove these attributes entirely.
Additionally, since this is a decorative background pattern, consider using an empty alt="" attribute instead of descriptive text to indicate its decorative nature to assistive technologies.
Apply this diff:
- <img
- src={patternBackground}
- width="100%"
- height="100%"
- className="object-cover"
- alt="Plane background pattern"
- />
+ <img
+ src={patternBackground}
+ className="w-full h-full object-cover"
+ alt=""
+ />🤖 Prompt for AI Agents
In apps/web/core/components/instance/not-ready-view.tsx around lines 30 to 36,
remove the invalid attributes width="100%" and height="100%" from the img tag
(those attributes must be unitless pixels) and rely on the parent/container CSS
and the "object-cover" class for sizing; also change the alt text to an empty
string alt="" since the image is decorative to assistive technologies.
| <img | ||
| src={GithubLogo} | ||
| width="100%" | ||
| height="100%" | ||
| className="w-full h-full object-cover" | ||
| alt="GitHubLogo" | ||
| /> |
There was a problem hiding this comment.
Remove redundant attributes and improve accessibility.
The inline width="100%" and height="100%" attributes are redundant since the Tailwind classes w-full h-full already achieve full sizing. Additionally, consider improving the alt text for better accessibility.
Apply this diff to clean up the attributes:
-<img
- src={GithubLogo}
- width="100%"
- height="100%"
- className="w-full h-full object-cover"
- alt="GitHubLogo"
-/>
+<img
+ src={GithubLogo}
+ className="w-full h-full object-contain"
+ alt="GitHub Logo"
+/>Note: Changed object-cover to object-contain to ensure the entire logo is visible without cropping, which is typically preferable for brand logos. If the current cropping behavior is intentional, you can keep object-cover.
🤖 Prompt for AI Agents
In apps/web/core/components/integration/github/root.tsx around lines 170 to 176,
remove the redundant inline attributes width="100%" and height="100%" from the
img element (Tailwind classes w-full h-full already handle sizing), update the
alt text to a more descriptive accessible string like "GitHub logo" or "GitHub
integration logo" and replace the class "object-cover" with "object-contain" so
the full logo is visible without cropping (if cropping is intentional, keep
object-cover instead).
There was a problem hiding this comment.
Pull Request Overview
This pull request migrates from Next.js Image components to standard HTML img elements across the entire codebase. The change removes Next.js compatibility shims for images in three apps (web, space, and admin) and updates all component imports and usages accordingly.
Key Changes:
- Removed
next/imagemodule aliases from Vite configurations and TypeScript definitions - Replaced all
Imagecomponent instances with standardimgtags - Added CSS classes for image sizing and object-fit properties
Reviewed Changes
Copilot reviewed 76 out of 79 changed files in this pull request and generated 27 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/web/vite.config.ts | Removed next/image alias from Vite configuration |
| apps/web/app/types/next-image.d.ts | Deleted Next.js Image type declarations |
| apps/web/core/layouts/auth-layout/workspace-wrapper.tsx | Replaced Image with img tag for workspace unavailable state |
| apps/web/core/components/**/empty-state.tsx | Updated various empty state components to use img tags |
| apps/web/core/components/integration/*.tsx | Migrated integration logo displays from Image to img |
| apps/web/core/components/icons/attachment/*.tsx | Converted file type icon components to use img tags |
| apps/web/core/components/account/auth-forms/auth-root.tsx | Updated OAuth provider logos to use img tags |
| apps/space/vite.config.ts | Removed next/image alias from space app Vite config |
| apps/space/app/types/next-image.d.ts | Deleted Next.js Image type declarations |
| apps/space/core/components/**/*.tsx | Updated space app components to use img tags |
| apps/admin/vite.config.ts | Removed next/image alias from admin app Vite config |
| apps/admin/app/types/next-image.d.ts | Deleted Next.js Image type declarations |
| apps/admin/core/components/**/*.tsx | Updated admin app components to use img tags |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| return ( | ||
| <div className="flex items-center justify-center"> | ||
| <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" /> | ||
| <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" /> |
There was a problem hiding this comment.
Consider adding object-contain class for consistency with other image replacements in this PR, to ensure proper aspect ratio handling.
| <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" /> | |
| <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11 object-contain" /> |
| return ( | ||
| <div className="flex items-center justify-center"> | ||
| <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" /> | ||
| <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" /> |
There was a problem hiding this comment.
Consider adding object-contain class for consistency with other image replacements in this PR, to ensure proper aspect ratio handling.
| <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" /> | |
| <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11 object-contain" /> |
| <img | ||
| src={WorkSpaceNotAvailable} | ||
| width="100%" | ||
| height="100%" |
There was a problem hiding this comment.
The width="100%" and height="100%" attributes on img tags are not valid HTML. These should be removed since the sizing is already controlled by CSS classes like w-full h-full. The percentage strings are not valid attribute values for width/height - these attributes expect numeric pixel values or should be omitted in favor of CSS.
| width="100%" | ||
| height="100%" |
There was a problem hiding this comment.
The width="100%" and height="100%" attributes are invalid HTML. Remove these attributes as the sizing is already controlled by CSS classes w-full h-full.
| width="100%" | ||
| height="100%" |
There was a problem hiding this comment.
The width="100%" and height="100%" attributes are invalid HTML. Remove these attributes as the sizing is already controlled by CSS classes w-52 sm:w-60.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/space/app/not-found.tsx (1)
11-11: Fixed dimensions cause mobile layout overflow.The image has fixed
width={128}andheight={128}, but its parent container is responsive (size-16on mobile = 64px,size-32on md+ = 128px). On mobile viewports, the 128px image will overflow the 64px container.Add CSS classes to make the image fit responsively within its container:
- <img src={SomethingWentWrongImage} alt="Something went wrong" width={128} height={128} /> + <img src={SomethingWentWrongImage} alt="Something went wrong" width={128} height={128} className="w-full h-full object-contain" />The
widthandheightattributes can remain as intrinsic size hints for aspect ratio preservation, while CSS ensures the image scales to fit its container.
🧹 Nitpick comments (1)
apps/admin/core/components/instance/failure.tsx (1)
25-25: Consider adding explicit dimensions to prevent layout shift.While the migration to native
<img>is correct per the PR objectives, adding explicit dimensions would prevent Cumulative Layout Shift (CLS) during image loading and improve the user experience.Apply this diff to add sizing constraints:
- <img src={instanceImage} alt="Instance failure illustration" /> + <img src={instanceImage} alt="Instance failure illustration" className="w-full h-auto" />Alternatively, if you need more control over the image's aspect ratio within its container:
- <img src={instanceImage} alt="Instance failure illustration" /> + <img src={instanceImage} alt="Instance failure illustration" className="w-full h-full object-contain" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/admin/core/components/instance/failure.tsx(1 hunks)apps/space/app/not-found.tsx(1 hunks)apps/space/core/components/account/user-logged-in.tsx(1 hunks)apps/space/core/components/issues/issue-layouts/error.tsx(1 hunks)apps/space/core/components/ui/not-found.tsx(1 hunks)apps/space/core/lib/instance-provider.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/space/core/components/account/user-logged-in.tsx
- apps/space/core/lib/instance-provider.tsx
- apps/space/core/components/issues/issue-layouts/error.tsx
- apps/space/core/components/ui/not-found.tsx
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-09-02T08:14:49.260Z
Learnt from: sriramveeraghanta
Repo: makeplane/plane PR: 7697
File: apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx:12-13
Timestamp: 2025-09-02T08:14:49.260Z
Learning: The star-us-link.tsx file in apps/web/app/(all)/[workspaceSlug]/(projects)/ already has "use client" directive at the top, making it a proper Client Component for hook usage.
Applied to files:
apps/space/app/not-found.tsx
📚 Learning: 2025-10-09T20:43:07.762Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/core/components/new-user-popup.tsx:4-6
Timestamp: 2025-10-09T20:43:07.762Z
Learning: The `next-themes` library is React-compatible and can be used outside of Next.js applications. It's not Next.js-specific despite its name.
Applied to files:
apps/admin/core/components/instance/failure.tsx
🔇 Additional comments (1)
apps/admin/core/components/instance/failure.tsx (1)
25-25: Alt text improvement looks good!The alt text has been updated from "Plane Logo" to "Instance failure illustration", which accurately describes the illustration's purpose for assistive technology users.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/core/components/project/empty-state.tsx (1)
10-10: Refine the type for theimageprop.The
imageprop is typed asany, which defeats TypeScript's type safety. Since it's used as thesrcattribute of an<img>element, it should be typed asstring.Apply this diff:
- image: any; + image: string;
♻️ Duplicate comments (2)
apps/web/core/components/integration/github/root.tsx (1)
170-170: Alt text and object-fit suggestions from previous review still outstanding.The inline
widthandheightattributes flagged in the previous review are no longer present—good. However, the previous suggestions to improve the alt text (e.g., "GitHub Logo" instead of "GitHubLogo") and considerobject-containinstead ofobject-cover(to avoid cropping the logo) remain unaddressed.apps/web/core/components/instance/not-ready-view.tsx (1)
30-30: Use empty alt attribute for decorative background image.The background pattern image is decorative and should use
alt=""instead of descriptive text. This follows accessibility best practices by preventing screen readers from announcing purely decorative images, reducing noise for assistive technology users.Apply this diff:
- <img src={patternBackground} className="w-full h-full object-cover" alt="Plane background pattern" /> + <img src={patternBackground} className="w-full h-full object-cover" alt="" />
🧹 Nitpick comments (1)
apps/web/core/components/project/empty-state.tsx (1)
30-30: Consider usingobject-containfor empty state illustrations.The current implementation uses
object-cover, which crops the image to fill the container. For empty state illustrations,object-containis typically more appropriate as it ensures the entire illustration remains visible without cropping, which better preserves the designer's intent.If you agree, apply this diff:
- <img src={image} className="w-52 sm:w-60 object-cover" alt={primaryButton?.text ?? ""} /> + <img src={image} className="w-52 sm:w-60 object-contain" alt={primaryButton?.text ?? ""} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
apps/web/core/components/core/sidebar/progress-stats/assignee.tsx(2 hunks)apps/web/core/components/instance/not-ready-view.tsx(1 hunks)apps/web/core/components/integration/github/root.tsx(1 hunks)apps/web/core/components/integration/jira/root.tsx(1 hunks)apps/web/core/components/integration/single-integration-card.tsx(1 hunks)apps/web/core/components/onboarding/tour/root.tsx(1 hunks)apps/web/core/components/project/empty-state.tsx(1 hunks)apps/web/core/components/project/integration-card.tsx(1 hunks)apps/web/core/components/web-hooks/empty-state.tsx(1 hunks)apps/web/core/layouts/auth-layout/workspace-wrapper.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (6)
- apps/web/core/components/onboarding/tour/root.tsx
- apps/web/core/components/project/integration-card.tsx
- apps/web/core/components/integration/jira/root.tsx
- apps/web/core/components/web-hooks/empty-state.tsx
- apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
- apps/web/core/components/integration/single-integration-card.tsx
🧰 Additional context used
🧠 Learnings (5)
📚 Learning: 2025-09-02T08:14:49.260Z
Learnt from: sriramveeraghanta
Repo: makeplane/plane PR: 7697
File: apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx:12-13
Timestamp: 2025-09-02T08:14:49.260Z
Learning: The star-us-link.tsx file in apps/web/app/(all)/[workspaceSlug]/(projects)/ already has "use client" directive at the top, making it a proper Client Component for hook usage.
Applied to files:
apps/web/core/components/project/empty-state.tsxapps/web/core/components/instance/not-ready-view.tsxapps/web/core/components/integration/github/root.tsx
📚 Learning: 2025-10-21T17:22:05.204Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7989
File: apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx:45-46
Timestamp: 2025-10-21T17:22:05.204Z
Learning: In the makeplane/plane repository, the refactor from useParams() to params prop is specifically scoped to page.tsx and layout.tsx files in apps/web/app (Next.js App Router pattern). Other components (hooks, regular client components, utilities) should continue using the useParams() hook as that is the correct pattern for non-route components.
Applied to files:
apps/web/core/components/project/empty-state.tsxapps/web/core/components/instance/not-ready-view.tsxapps/web/core/components/integration/github/root.tsx
📚 Learning: 2025-10-09T20:42:31.843Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.
Applied to files:
apps/web/core/components/project/empty-state.tsxapps/web/core/components/core/sidebar/progress-stats/assignee.tsxapps/web/core/components/instance/not-ready-view.tsx
📚 Learning: 2025-10-01T15:30:17.605Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7888
File: packages/propel/src/avatar/avatar.stories.tsx:2-3
Timestamp: 2025-10-01T15:30:17.605Z
Learning: In the makeplane/plane repository, avoid suggesting inline type imports (e.g., `import { Avatar, type TAvatarSize }`) due to bundler compatibility issues. Keep type imports and value imports as separate statements.
Applied to files:
apps/web/core/components/core/sidebar/progress-stats/assignee.tsxapps/web/core/components/instance/not-ready-view.tsx
📚 Learning: 2025-10-09T20:43:07.762Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/core/components/new-user-popup.tsx:4-6
Timestamp: 2025-10-09T20:43:07.762Z
Learning: The `next-themes` library is React-compatible and can be used outside of Next.js applications. It's not Next.js-specific despite its name.
Applied to files:
apps/web/core/components/instance/not-ready-view.tsx
⏰ 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 and lint web apps
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
apps/web/core/components/core/sidebar/progress-stats/assignee.tsx (2)
59-59: LGTM! Correct migration from Next.js Image to native img.The native
<img>tag correctly replaces the Next.js Image component. The classesw-full h-full object-coverproperly fill the parent container while maintaining aspect ratio within the circular frame.
72-72: LGTM! Correct migration with appropriate sizing.The native
<img>tag correctly replaces the Next.js Image component for the empty state illustration. Theobject-containclass preserves the SVG's aspect ratio, and the explicith-12 w-12sizing within the largerh-20 w-20container creates intentional visual padding for the centered empty state.apps/web/core/components/instance/not-ready-view.tsx (1)
38-38: Verify image sizing withobject-contain.The
object-containutility typically requires explicit dimensions to scale properly. Without sizing classes likew-full h-full, the image will render at its intrinsic size. Please verify this produces the intended visual result, or add explicit dimensions if needed.
| <div className="flex h-full w-full items-center justify-center px-5 md:px-10 lg:p-20"> | ||
| <div className="relative h-full w-full max-w-6xl"> | ||
| <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text ?? ""} layout="fill" /> | ||
| <img src={image} className="w-52 sm:w-60 object-cover" alt={primaryButton?.text ?? ""} /> |
There was a problem hiding this comment.
Improve alt text for accessibility.
The alt text falls back to an empty string when primaryButton is undefined, and uses the button text when it is defined. This is problematic because:
- Empty state illustrations convey meaning and context to users, so an empty alt text makes them inaccessible to screen readers.
- Button text (
primaryButton.text) describes the action, not the image content itself.
Consider requiring a dedicated imageAlt prop or deriving meaningful alt text from the title prop.
🤖 Prompt for AI Agents
In apps/web/core/components/project/empty-state.tsx around line 30, the img alt
currently falls back to an empty string or to primaryButton.text which is action
text, not a description; change the component to accept a dedicated imageAlt
prop (required or optional with a sensible fallback) and use that for the img
alt attribute, and if imageAlt is not provided derive a meaningful alt from the
title prop (e.g., `${title} illustration`) instead of using button text or an
empty string; update the component props/type definition and any call sites to
pass imageAlt where appropriate.
…ane#8101) * chore: update next images with html default images * chore: sync related changes * Update apps/admin/core/components/instance/failure.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update apps/space/app/not-found.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update apps/space/core/components/issues/issue-layouts/error.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update apps/space/core/components/ui/not-found.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * chore: replace classname styles in space * fix: copoilot suggestions * fix: copilot suggestions * chore: format files --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…ane#8101) * chore: update next images with html default images * chore: sync related changes * Update apps/admin/core/components/instance/failure.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update apps/space/app/not-found.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update apps/space/core/components/issues/issue-layouts/error.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update apps/space/core/components/ui/not-found.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * chore: replace classname styles in space * fix: copoilot suggestions * fix: copilot suggestions * chore: format files --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…ane#8101) * chore: update next images with html default images * chore: sync related changes * Update apps/admin/core/components/instance/failure.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update apps/space/app/not-found.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update apps/space/core/components/issues/issue-layouts/error.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update apps/space/core/components/ui/not-found.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * chore: replace classname styles in space * fix: copoilot suggestions * fix: copilot suggestions * chore: format files --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Type of Change
Summary by CodeRabbit