make it pretty #4999
make it pretty #4999
Conversation
|
Warning Rate limit exceeded@CamronStaley has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 9 minutes and 2 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. WalkthroughThe changes in this pull request involve updates to the Changes
Possibly related PRs
Suggested reviewers
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
Documentation and Community
|
|
|
||
| const SHOWN_FOR = 10000; | ||
| const SHOWN_FOR = 50000; |
There was a problem hiding this comment.
This might be 50 seconds instead of 5 seconds btw ~
There was a problem hiding this comment.
I just copied this from your PR: #4966. Do you wanna merge that one and I can rebase onto it or merge this one and do the opposite?
There was a problem hiding this comment.
My bad, my PR was WIP so I set a high number for debugging; you can set to 5000 and merge directly to develop.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Outside diff range and nitpick comments (5)
app/packages/components/src/components/Toast/Toast.tsx (3)
Line range hint 4-17: Improve type safety for primary and secondary action props
The primary and secondary props are currently typed as any. Consider adding proper function types to improve type safety and documentation.
interface ToastProps {
message: React.ReactNode;
- primary?: any;
- secondary?: any;
+ primary?: (setOpen: (open: boolean) => void) => React.ReactNode;
+ secondary?: (setOpen: (open: boolean) => void) => React.ReactNode;
duration?: number;
layout?: {89-99: Enhance accessibility and design system consistency
The new layout structure looks good, but consider these improvements:
- Add proper aria-labels for the action area
- Ensure the gap value (4) aligns with your design system spacing scale
<Box
display="flex"
alignItems="center"
justifyContent="space-between"
- gap={4}
+ gap={2} // Assuming your design system uses multiples of 2 for spacing
+ role="presentation"
>
- <Box>{message}</Box>
+ <Box role="alert">{message}</Box>
{action}
</Box>Line range hint 100-107: Use theme values instead of hardcoded colors
The component uses hardcoded color values which may not maintain consistency with the theme. Consider using theme values for better maintainability and consistency.
sx={{
- backgroundColor: layout?.backgroundColor || "#333",
- color: layout?.color || "#fff",
+ backgroundColor: layout?.backgroundColor || (theme) => theme.palette.grey[900],
+ color: layout?.color || (theme) => theme.palette.common.white,
fontSize: layout?.fontSize || "14px",
display: "block",
textAlign: layout?.textAlign || "left",
}}app/packages/app/src/components/QueryPerformanceToast.tsx (2)
Line range hint 57-61: Enhance security and style reusability
Two suggestions for improvement:
- Add security attributes when opening new window
- Extract common button styles to a theme or constant
onClick={() => {
- open(QP_MODE, "_blank")?.focus();
+ open(QP_MODE, "_blank", "noopener,noreferrer")?.focus();
setOpen(false);
}}
sx={{ marginLeft: "auto", backgroundColor: theme.primary.main, color: theme.text.primary, boxShadow: 0 }}94-97: Utilize theme spacing system
Replace hardcoded spacing values with theme.spacing to maintain consistency across the application.
sx={{
color: theme.custom.lightning,
borderRadius: "2px",
- padding: "2px 4px",
+ padding: theme.spacing(0.25, 0.5),
fontSize: "1rem",
}}📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (3)
- app/packages/app/src/components/QueryPerformanceToast.tsx (5 hunks)
- app/packages/components/src/components/ThemeProvider/index.tsx (2 hunks)
- app/packages/components/src/components/Toast/Toast.tsx (1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
app/packages/app/src/components/QueryPerformanceToast.tsx (1)
Pattern **/*.{ts,tsx}: Review the Typescript and React code for conformity with best practices in React, Recoil, Graphql, and Typescript. Highlight any deviations.
app/packages/components/src/components/ThemeProvider/index.tsx (1)
Pattern **/*.{ts,tsx}: Review the Typescript and React code for conformity with best practices in React, Recoil, Graphql, and Typescript. Highlight any deviations.
app/packages/components/src/components/Toast/Toast.tsx (1)
Pattern **/*.{ts,tsx}: Review the Typescript and React code for conformity with best practices in React, Recoil, Graphql, and Typescript. Highlight any deviations.
🔇 Additional comments (2)
app/packages/components/src/components/Toast/Toast.tsx (1)
Line range hint 19-22: Consider setting default toast state to false
The toast's default state is set to true, which means it will show immediately when mounted. This might not be the desired behavior in all scenarios and could lead to unexpected toast appearances.
const toastStateAtom = atom({
key: "toastOpenState",
- default: true,
+ default: false,
});app/packages/components/src/components/ThemeProvider/index.tsx (1)
Line range hint 1-277: Verify toast-related component dependencies.
The changes align with the PR objective to update toast notifications. However, we should verify that all dependent toast components are properly consuming these new theme values.
✅ Verification successful
Let me search for toast-related components and their theme usage to get more context.
Let me check the Toast component implementation to see how it uses the theme properties.
No theme-related issues found with toast implementation
The Toast component is properly implemented with configurable styling through the layout prop, which allows overriding any theme values. The default background color (#333) matches the toastBackgroundColor value defined in both light and dark themes. The component doesn't directly consume theme values, instead opting for a more flexible prop-based approach, which is appropriate for this use case.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for components that might need updates for the new theme properties
echo "Searching for toast-related components and theme usage..."
rg -l "toastBackgroundColor|lightning" app/packages/components/src/
Length of output: 257
Script:
#!/bin/bash
# Search for toast components and their theme usage
echo "Searching for toast-related components..."
rg -g '!*.test.*' -g '!*.stories.*' -l "toast" app/packages/components/src/
# Search for specific toast theme property usage
echo -e "\nSearching for toast theme property usage..."
rg -g '!*.test.*' -g '!*.stories.*' "toastBackgroundColor" app/packages/components/src/
Length of output: 683
Script:
#!/bin/bash
# Check Toast component implementation
echo "Checking Toast component implementation..."
cat app/packages/components/src/components/Toast/Toast.tsx
Length of output: 2739
|
|
||
| const SHOWN_FOR = 10000; | ||
| const SHOWN_FOR = 50000; |
There was a problem hiding this comment.
Consider reducing the toast display duration
50 seconds (50000ms) is an unusually long duration for a toast notification. According to Material Design guidelines, toasts should typically be visible for 5-10 seconds to avoid disrupting user experience while ensuring the message is noticed.
-const SHOWN_FOR = 50000;
+const SHOWN_FOR = 10000; // 10 seconds📝 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.
| const SHOWN_FOR = 50000; | |
| const SHOWN_FOR = 10000; // 10 seconds |
What changes are proposed in this pull request?
Aligning the toast for the query performance panel more closely with the mocks.
How is this patch tested? If it is not, please explain why.
Local dev:
Release Notes
Is this a user-facing change that should be mentioned in the release notes?
notes for FiftyOne users.
What areas of FiftyOne does this PR affect?
fiftyonePython library changesSummary by CodeRabbit
New Features
QueryPerformanceToastto display for a longer duration and show by default.Toastnotifications for a cohesive user experience.Bug Fixes
Chores