disable continue creation button and add tooltip for unverified users in draft project page #4896
+78
−17
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes in this pull request enhance the Changes
Possibly related issues
Possibly related PRs
Suggested reviewers
Poem
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: 3
🧹 Outside diff range and nitpick comments (1)
src/components/views/project/ProjectIndex.tsx (1)
101-109: Consider memoizing event handlers for better performanceThe mouse event handlers could be memoized using
useCallbackto prevent unnecessary re-renders.-const handleMouseEnter = () => { +const handleMouseEnter = useCallback(() => { setTooltipVisible(true); -}; +}, []); -const handleMouseLeave = () => { +const handleMouseLeave = useCallback(() => { setTooltipVisible(false); -}; +}, []);
Comment on lines
294
to
321
|
|
||
| {/* Wrapper for hover events */} | ||
| <div | ||
| onMouseEnter={handleMouseEnter} | ||
| onMouseLeave={handleMouseLeave} | ||
| style={{ | ||
| display: 'inline-block', // Ensures it wraps the button | ||
| cursor: !isEmailVerifiedStatus | ||
| ? 'not-allowed' | ||
| : 'pointer', // Pointer only when enabled | ||
| }} | ||
| > | ||
| <ContinueCreationButton | ||
| label={formatMessage({ | ||
| id: 'label.continue_creation', | ||
| })} | ||
| disabled={!isEmailVerifiedStatus} // Button disabled when email is not verified | ||
| buttonType='primary' | ||
| type='submit' | ||
| onClick={() => | ||
| router.push( | ||
| idToProjectEdit( | ||
| projectData?.id || '', | ||
| ), | ||
| ) | ||
| } | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance button wrapper accessibility
The button wrapper should include proper ARIA attributes to indicate the disabled state and relationship with the tooltip.
<div
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
+ role="presentation"
style={{
display: 'inline-block',
cursor: !isEmailVerifiedStatus
? 'not-allowed'
: 'pointer',
}}
>
<ContinueCreationButton
label={formatMessage({
id: 'label.continue_creation',
})}
disabled={!isEmailVerifiedStatus}
buttonType='primary'
type='submit'
+ aria-describedby="email-verification-tooltip"
onClick={() =>
router.push(
idToProjectEdit(
projectData?.id || '',
),
)
}
/>
</div>Committable suggestion skipped: line range outside the PR's diff.
Comment on lines
434
to
463
| const ContinueCreationButton = styled(Button)` | ||
| align-self: flex-end; | ||
| position: relative; | ||
| cursor: pointer; | ||
| `; | ||
|
|
||
| const TooltipWrapper = styled.div` | ||
| position: absolute; | ||
| bottom: -35px; | ||
| left: buttonRect.left + window.scrollX + 10; | ||
| transform: translateX(-50%); | ||
| background: #1a1a1a; | ||
| color: #fff; | ||
| padding: 8px 12px; | ||
| border-radius: 4px; | ||
| font-size: 12px; | ||
| white-space: nowrap; | ||
| opacity: 0; | ||
| visibility: hidden; | ||
| transition: | ||
| opacity 0.2s ease-in-out, | ||
| visibility 0.2s ease-in-out; | ||
| z-index: 1000; | ||
|
|
||
| /* Tooltip on hover */ | ||
| ${ContinueCreationButton}:hover & { | ||
| opacity: 1; | ||
| visibility: visible; | ||
| } | ||
| `; |
There was a problem hiding this comment.
Fix styled components implementation
There are several issues in the styled components implementation:
- Invalid CSS in TooltipWrapper (buttonRect is undefined)
- Redundant cursor style in ContinueCreationButton
- Complex hover selector that might not work as intended
const ContinueCreationButton = styled(Button)`
align-self: flex-end;
position: relative;
- cursor: pointer;
`;
const TooltipWrapper = styled.div<{ $isVisible: boolean }>`
position: absolute;
bottom: -35px;
- left: buttonRect.left + window.scrollX + 10;
+ left: 50%;
transform: translateX(-50%);
background: #1a1a1a;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
- opacity: 0;
- visibility: hidden;
+ opacity: ${props => (props.$isVisible ? 1 : 0)};
+ visibility: ${props => (props.$isVisible ? 'visible' : 'hidden')};
transition:
opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out;
z-index: 1000;
- /* Tooltip on hover */
- ${ContinueCreationButton}:hover & {
- opacity: 1;
- visibility: visible;
- }
`;Committable suggestion skipped: line range outside the PR's diff.
kkatusic
requested changes
Dec 9, 2024
edit style of tooltip
kkatusic
approved these changes
Dec 10, 2024
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
src/components/views/project/ProjectIndex.tsx (1)
101-109: Enhance state management implementationConsider these improvements for better TypeScript support and performance:
- Add explicit type for the state
- Memoize event handlers
-const [isTooltipVisible, setTooltipVisible] = useState(false); +const [isTooltipVisible, setTooltipVisible] = useState<boolean>(false); -const handleMouseEnter = () => { +const handleMouseEnter = useCallback(() => { setTooltipVisible(true); -}; +}, []); -const handleMouseLeave = () => { +const handleMouseLeave = useCallback(() => { setTooltipVisible(false); -}; +}, []);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/components/views/project/ProjectIndex.tsx(3 hunks)
🔇 Additional comments (2)
src/components/views/project/ProjectIndex.tsx (2)
270-305: 🛠️ Refactor suggestion
Improve accessibility and component structure
The implementation needs several improvements:
- Add ARIA attributes for accessibility
- Move styles to styled components
- Simplify the component structure
<Flex
- $justifyContent='flex-end'
- style={{ position: 'relative' }}
+ $justifyContent='flex-end'
+ role="group"
+ aria-label="Project creation controls"
>
- {!isEmailVerifiedStatus && (
- <TooltipWrapper
- isTooltipVisible={isTooltipVisible}
- >
+ <TooltipWrapper
+ $isVisible={!isEmailVerifiedStatus && isTooltipVisible}
+ role="tooltip"
+ id="email-verification-tooltip"
+ >
{formatMessage({
id: 'label.email_tooltip',
})}
- </TooltipWrapper>
- )}
+ </TooltipWrapper>
- <div
+ <ButtonWrapper
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<ContinueCreationButton
label={formatMessage({
id: 'label.continue_creation',
})}
disabled={!isEmailVerifiedStatus}
buttonType='primary'
type='submit'
+ aria-describedby="email-verification-tooltip"
onClick={() =>
router.push(
idToProjectEdit(
projectData?.id || '',
),
)
}
/>
- </div>
+ </ButtonWrapper>
</Flex>418-450:
Fix critical issues in styled components implementation
There are several critical issues in the styled components:
- Invalid CSS using undefined
buttonRectvariable - Incorrect prop destructuring in template literals
- Invalid hover selector implementation
const ContinueCreationButton = styled(Button)`
align-self: flex-end;
position: relative;
- cursor: pointer;
`;
interface TooltipWrapperProps {
- isTooltipVisible: boolean;
+ $isVisible: boolean;
top?: string;
left?: string;
}
const TooltipWrapper = styled.div<TooltipWrapperProps>`
- visibility: ${isTooltipVisible => (isTooltipVisible ? 'visible' : 'hidden')};
- opacity: ${({ isTooltipVisible }) => (isTooltipVisible ? 1 : 0)};
+ visibility: ${({ $isVisible }) => ($isVisible ? 'visible' : 'hidden')};
+ opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};
position: absolute;
bottom: -35px;
- left: buttonRect.left + window.scrollX + 10;
+ left: 50%;
transform: translateX(-50%);
background: #1a1a1a;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
- transition: 'opacity 0.2s ease';
+ transition: opacity 0.2s ease;
z-index: 1000;
- /* Tooltip on hover */
- ${ContinueCreationButton}:hover & {
- opacity: 1;
- visibility: visible;
- display: 'inline-block';
- cursor: !isEmailVerifiedStatus ? 'not-allowed' : 'pointer'
- }
`;
+const ButtonWrapper = styled.div<{ disabled?: boolean }>`
+ display: inline-block;
+ cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+`;Likely invalid or redundant comment.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
#4895
Summary by CodeRabbit
New Features
Bug Fixes
Style