[WEB-3166] chore: global empty state components #6414
Conversation
anmolsinghbhatia
requested review from
gurusainath,
rahulramesha and
sriramveeraghanta
|
Pull Request Linked with Plane Issues Comment Automatically Generated by Plane |
1 similar comment
|
Pull Request Linked with Plane Issues Comment Automatically Generated by Plane |
WalkthroughThis pull request introduces a comprehensive set of empty state components and a utility hook for asset path resolution. The changes include three new React components: Changes
Sequence DiagramsequenceDiagram
participant User
participant EmptyStateComponent
participant AssetPathHook
participant ThemeResolver
User->>EmptyStateComponent: Render with props
EmptyStateComponent->>AssetPathHook: Resolve asset path
AssetPathHook->>ThemeResolver: Get current theme
ThemeResolver-->>AssetPathHook: Return theme (light/dark)
AssetPathHook-->>EmptyStateComponent: Return resolved asset path
EmptyStateComponent->>User: Render empty state UI
Possibly related PRs
Suggested reviewers
Poem
Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (7)
web/core/hooks/use-resolved-asset-path.tsx (2)
14-14: Consider handling undefined theme state explicitly.The current theme resolution defaults to "dark" for any non-"light" theme. Consider handling undefined theme state explicitly for better predictability.
- const theme = resolvedTheme === "light" ? "light" : "dark"; + const theme = resolvedTheme === "dark" ? "dark" : "light";
16-16: Simplify path construction logic.The current string concatenation logic is complex and could be simplified for better readability.
- return `${additionalPath && additionalPath !== "" ? `${basePath}${additionalPath}` : basePath}-${theme}.${extension}`; + const path = additionalPath ? `${basePath}${additionalPath}` : basePath; + return `${path}-${theme}.${extension}`;web/core/components/empty-state/section-empty-state-root.tsx (1)
5-10: Consider adding prop-types validation.While TypeScript provides type safety at compile time, consider adding runtime prop-types validation for better debugging in development.
+import PropTypes from 'prop-types'; type Props = { icon: React.ReactNode; title: string; description?: string; actionElement?: React.ReactNode; }; +SectionEmptyState.propTypes = { + icon: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + description: PropTypes.string, + actionElement: PropTypes.node +};web/core/components/empty-state/simple-empty-state-root.tsx (1)
33-37: Optimize static function with useCallback.The
getTitleClassNamefunction can be memoized since it's a static function that only depends on thehasDescriptionparameter.-const getTitleClassName = (hasDescription: boolean) => +const getTitleClassName = React.useCallback((hasDescription: boolean) => cn("font-medium whitespace-pre-line", { "text-sm text-custom-text-400": !hasDescription, "text-lg text-custom-text-300": hasDescription, - }); + }), + [] +);web/core/components/empty-state/detailed-empty-state-root.tsx (3)
11-30: LGTM! Well-structured type definitions.The type definitions are comprehensive and provide good flexibility. Consider using branded types for the size property to improve type safety.
-type EmptyStateSize = "sm" | "md" | "lg"; +const EMPTY_STATE_SIZES = ["sm", "md", "lg"] as const; +type EmptyStateSize = typeof EMPTY_STATE_SIZES[number];
74-75: Consider performance optimization for large screens.The container uses fixed padding which might not scale well on very large screens. Consider using container queries or max-width constraints.
-<div className="flex items-center justify-center min-h-full min-w-full overflow-y-auto py-10 md:px-20 px-5"> +<div className="flex items-center justify-center min-h-full min-w-full overflow-y-auto py-10 px-5 md:px-20 max-w-screen-2xl mx-auto">
77-78: Enhance text elements accessibility.Consider adding ARIA roles and proper heading levels for better screen reader support.
-<h3 className={cn("text-xl font-semibold", { "font-medium": !description })}>{title}</h3> -{description && <p className="text-sm">{description}</p>} +<h3 role="heading" aria-level={3} className={cn("text-xl font-semibold", { "font-medium": !description })}>{title}</h3> +{description && <p role="contentinfo" className="text-sm text-custom-text-300">{description}</p>}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
web/core/components/empty-state/detailed-empty-state-root.tsx(1 hunks)web/core/components/empty-state/index.ts(1 hunks)web/core/components/empty-state/section-empty-state-root.tsx(1 hunks)web/core/components/empty-state/simple-empty-state-root.tsx(1 hunks)web/core/hooks/use-resolved-asset-path.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Analyze (javascript)
- GitHub Check: Analyze (python)
🔇 Additional comments (2)
web/core/components/empty-state/index.ts (1)
4-6: LGTM! Well-organized barrel exports.The new exports follow a consistent naming convention and are well-organized using the barrel pattern.
web/core/components/empty-state/detailed-empty-state-root.tsx (1)
38-57: Verify button size prop type compatibility.The
sizeprop passed to the Button component might have a type mismatch. The EmptyStateSize type ("sm" | "md" | "lg") may not match the Button component's size prop type from @plane/ui.
| <div className="flex flex-col gap-4 items-center justify-center rounded-md border border-custom-border-200 p-10"> | ||
| <div className="flex flex-col items-center gap-2"> | ||
| <div className="flex items-center justify-center size-8 bg-custom-background-80 rounded">{icon}</div> | ||
| <span className="text-sm font-medium">{title}</span> | ||
| {description && <span className="text-xs text-custom-text-300">{description}</span>} | ||
| </div> | ||
| {actionElement && <>{actionElement}</>} | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance accessibility attributes.
Add appropriate ARIA attributes to improve accessibility for screen readers.
- <div className="flex flex-col gap-4 items-center justify-center rounded-md border border-custom-border-200 p-10">
+ <div
+ role="region"
+ aria-label={title}
+ className="flex flex-col gap-4 items-center justify-center rounded-md border border-custom-border-200 p-10"
+ >
<div className="flex flex-col items-center gap-2">
- <div className="flex items-center justify-center size-8 bg-custom-background-80 rounded">{icon}</div>
+ <div className="flex items-center justify-center size-8 bg-custom-background-80 rounded" aria-hidden="true">{icon}</div>
- <span className="text-sm font-medium">{title}</span>
+ <h2 className="text-sm font-medium">{title}</h2>
- {description && <span className="text-xs text-custom-text-300">{description}</span>}
+ {description && <p className="text-xs text-custom-text-300">{description}</p>}
</div>📝 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.
| <div className="flex flex-col gap-4 items-center justify-center rounded-md border border-custom-border-200 p-10"> | |
| <div className="flex flex-col items-center gap-2"> | |
| <div className="flex items-center justify-center size-8 bg-custom-background-80 rounded">{icon}</div> | |
| <span className="text-sm font-medium">{title}</span> | |
| {description && <span className="text-xs text-custom-text-300">{description}</span>} | |
| </div> | |
| {actionElement && <>{actionElement}</>} | |
| </div> | |
| <div | |
| role="region" | |
| aria-label={title} | |
| className="flex flex-col gap-4 items-center justify-center rounded-md border border-custom-border-200 p-10" | |
| > | |
| <div className="flex flex-col items-center gap-2"> | |
| <div className="flex items-center justify-center size-8 bg-custom-background-80 rounded" aria-hidden="true">{icon}</div> | |
| <h2 className="text-sm font-medium">{title}</h2> | |
| {description && <p className="text-xs text-custom-text-300">{description}</p>} | |
| </div> | |
| {actionElement && <>{actionElement}</>} | |
| </div> |
| {assetPath && ( | ||
| <div className={sizeConfig[size].container}> | ||
| <Image | ||
| src={assetPath} | ||
| alt={title} | ||
| height={sizeConfig[size].dimensions} | ||
| width={sizeConfig[size].dimensions} | ||
| layout="responsive" | ||
| lazyBoundary="100%" | ||
| /> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Update Image component implementation.
The current Image component implementation uses deprecated props and lacks error handling.
{assetPath && (
<div className={sizeConfig[size].container}>
<Image
src={assetPath}
alt={title}
height={sizeConfig[size].dimensions}
width={sizeConfig[size].dimensions}
- layout="responsive"
+ style={{ width: '100%', height: 'auto' }}
lazyBoundary="100%"
+ loading="lazy"
+ onError={(e) => {
+ console.error('Failed to load image:', assetPath);
+ e.currentTarget.style.display = 'none';
+ }}
/>
</div>
)}📝 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.
| {assetPath && ( | |
| <div className={sizeConfig[size].container}> | |
| <Image | |
| src={assetPath} | |
| alt={title} | |
| height={sizeConfig[size].dimensions} | |
| width={sizeConfig[size].dimensions} | |
| layout="responsive" | |
| lazyBoundary="100%" | |
| /> | |
| </div> | |
| )} | |
| {assetPath && ( | |
| <div className={sizeConfig[size].container}> | |
| <Image | |
| src={assetPath} | |
| alt={title} | |
| height={sizeConfig[size].dimensions} | |
| width={sizeConfig[size].dimensions} | |
| style={{ width: '100%', height: 'auto' }} | |
| lazyBoundary="100%" | |
| loading="lazy" | |
| onError={(e) => { | |
| console.error('Failed to load image:', assetPath); | |
| e.currentTarget.style.display = 'none'; | |
| }} | |
| /> | |
| </div> | |
| )} |
| return ( | ||
| <div className="text-center flex flex-col gap-2.5 items-center"> | ||
| {assetPath && ( | ||
| <div className={sizeConfig[size].container}> | ||
| <Image | ||
| src={assetPath} | ||
| alt={title} | ||
| height={sizeConfig[size].dimensions} | ||
| width={sizeConfig[size].dimensions} | ||
| layout="responsive" | ||
| lazyBoundary="100%" | ||
| /> | ||
| </div> | ||
| )} | ||
|
|
||
| <h3 className={getTitleClassName(!!description)}>{title}</h3> | ||
|
|
||
| {description && <p className="text-base font-medium text-custom-text-400 whitespace-pre-line">{description}</p>} | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance accessibility attributes.
Add appropriate ARIA attributes and semantic HTML elements to improve accessibility.
- <div className="text-center flex flex-col gap-2.5 items-center">
+ <div
+ role="region"
+ aria-label={title}
+ className="text-center flex flex-col gap-2.5 items-center"
+ >
{assetPath && (
- <div className={sizeConfig[size].container}>
+ <div className={sizeConfig[size].container} aria-hidden="true">
<Image />
</div>
)}
- <h3 className={getTitleClassName(!!description)}>{title}</h3>
+ <h2 className={getTitleClassName(!!description)}>{title}</h2>
- {description && <p className="text-base font-medium text-custom-text-400 whitespace-pre-line">{description}</p>}
+ {description && (
+ <p
+ className="text-base font-medium text-custom-text-400 whitespace-pre-line"
+ aria-describedby={`${title}-description`}
+ id={`${title}-description`}
+ >
+ {description}
+ </p>
+ )}
</div>📝 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.
| return ( | |
| <div className="text-center flex flex-col gap-2.5 items-center"> | |
| {assetPath && ( | |
| <div className={sizeConfig[size].container}> | |
| <Image | |
| src={assetPath} | |
| alt={title} | |
| height={sizeConfig[size].dimensions} | |
| width={sizeConfig[size].dimensions} | |
| layout="responsive" | |
| lazyBoundary="100%" | |
| /> | |
| </div> | |
| )} | |
| <h3 className={getTitleClassName(!!description)}>{title}</h3> | |
| {description && <p className="text-base font-medium text-custom-text-400 whitespace-pre-line">{description}</p>} | |
| </div> | |
| ); | |
| return ( | |
| <div | |
| role="region" | |
| aria-label={title} | |
| className="text-center flex flex-col gap-2.5 items-center" | |
| > | |
| {assetPath && ( | |
| <div className={sizeConfig[size].container} aria-hidden="true"> | |
| <Image | |
| src={assetPath} | |
| alt={title} | |
| height={sizeConfig[size].dimensions} | |
| width={sizeConfig[size].dimensions} | |
| layout="responsive" | |
| lazyBoundary="100%" | |
| /> | |
| </div> | |
| )} | |
| <h2 className={getTitleClassName(!!description)}>{title}</h2> | |
| {description && ( | |
| <p | |
| className="text-base font-medium text-custom-text-400 whitespace-pre-line" | |
| aria-describedby={`${title}-description`} | |
| id={`${title}-description`} | |
| > | |
| {description} | |
| </p> | |
| )} | |
| </div> | |
| ); |
| {assetPath && ( | ||
| <Image src={assetPath} alt={title} width={384} height={250} layout="responsive" lazyBoundary="100%" /> | ||
| )} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Update Image component implementation.
The current implementation has several issues:
- The
layoutprop is deprecated in Next.js Image component - The alt text could be more descriptive
- Missing loading state handling
- No error boundary for image loading failures
-{assetPath && (
- <Image src={assetPath} alt={title} width={384} height={250} layout="responsive" lazyBoundary="100%" />
-)}
+{assetPath && (
+ <div className="relative w-full aspect-[1.536] max-w-[384px] mx-auto">
+ <Image
+ src={assetPath}
+ alt={`Empty state illustration for ${title}`}
+ fill
+ className="object-contain"
+ sizes="(max-width: 384px) 100vw, 384px"
+ priority={false}
+ onError={(e) => {
+ console.error('Failed to load empty state image:', e);
+ }}
+ />
+ </div>
+)}📝 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.
| {assetPath && ( | |
| <Image src={assetPath} alt={title} width={384} height={250} layout="responsive" lazyBoundary="100%" /> | |
| )} | |
| {assetPath && ( | |
| <div className="relative w-full aspect-[1.536] max-w-[384px] mx-auto"> | |
| <Image | |
| src={assetPath} | |
| alt={`Empty state illustration for ${title}`} | |
| fill | |
| className="object-contain" | |
| sizes="(max-width: 384px) 100vw, 384px" | |
| priority={false} | |
| onError={(e) => { | |
| console.error('Failed to load empty state image:', e); | |
| }} | |
| /> | |
| </div> | |
| )} |
Description
This PR includes following changes:
Type of Change
References
[WEB-3166]
Summary by CodeRabbit
New Features
DetailedEmptyState,SimpleEmptyState, andSectionEmptyStateuseResolvedAssetPathfor dynamic asset path resolutionDocumentation