-
Notifications
You must be signed in to change notification settings - Fork 557
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Refactor/qp #5012
Refactor/qp #5012
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -44,7 +44,12 @@ const QueryPerformanceToast = () => { | |
return createPortal( | ||
<Toast | ||
duration={SHOWN_FOR} | ||
layout={{ bottom: '100px', vertical: "bottom", horizontal: "center", backgroundColor: theme.custom.toastBackgroundColor}} | ||
layout={{ | ||
bottom: "100px", | ||
vertical: "bottom", | ||
horizontal: "center", | ||
backgroundColor: theme.custom.toastBackgroundColor, | ||
}} | ||
primary={(setOpen) => { | ||
return ( | ||
<Button | ||
|
@@ -54,7 +59,12 @@ const QueryPerformanceToast = () => { | |
open(QP_MODE, "_blank")?.focus(); | ||
setOpen(false); | ||
}} | ||
sx={{ marginLeft: "auto", backgroundColor: theme.primary.main, color: "#FFFFFF", boxShadow: 0 }} // Right align the button | ||
sx={{ | ||
marginLeft: "auto", | ||
backgroundColor: theme.primary.main, | ||
color: theme.text.primary, | ||
boxShadow: 0, | ||
}} // Right align the button | ||
Comment on lines
+62
to
+67
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Remove redundant comment and consider memoizing styles. The comment "Right align the button" is redundant as it's describing what + const primaryButtonStyles = useMemo(() => ({
+ marginLeft: "auto",
+ backgroundColor: theme.primary.main,
+ color: theme.text.primary,
+ boxShadow: 0,
+ }), [theme.primary.main, theme.text.primary]);
<Button
variant="contained"
size="small"
onClick={() => {
open(QP_MODE, "_blank")?.focus();
setOpen(false);
}}
- sx={{
- marginLeft: "auto",
- backgroundColor: theme.primary.main,
- color: theme.text.primary,
- boxShadow: 0,
- }} // Right align the button
+ sx={primaryButtonStyles}
>
|
||
> | ||
View Documentation | ||
</Button> | ||
|
@@ -64,6 +74,7 @@ const QueryPerformanceToast = () => { | |
return ( | ||
<div> | ||
<Button | ||
data-cy="btn-dismiss-query-performance-toast" | ||
variant="text" | ||
color="secondary" | ||
size="small" | ||
|
@@ -84,7 +95,11 @@ const QueryPerformanceToast = () => { | |
<Bolt sx={{ color: theme.custom.lightning, marginRight: "8px" }} /> | ||
<Typography | ||
variant="subtitle1" | ||
sx={{ fontWeight: 500, marginRight: "8px", color: theme.text.primary }} | ||
sx={{ | ||
fontWeight: 500, | ||
marginRight: "8px", | ||
color: theme.text.primary, | ||
}} | ||
Comment on lines
+98
to
+102
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Consider memoizing Typography styles. The sx object is recreated on every render. Consider using + const titleTypographyStyles = useMemo(() => ({
+ fontWeight: 500,
+ marginRight: "8px",
+ color: theme.text.primary,
+ }), [theme.text.primary]);
<Typography
variant="subtitle1"
- sx={{
- fontWeight: 500,
- marginRight: "8px",
- color: theme.text.primary,
- }}
+ sx={titleTypographyStyles}
>
|
||
> | ||
Query Performance is Available! | ||
</Typography> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Consider memoizing the layout object.
The layout object is recreated on every render. Consider using
useMemo
to optimize performance.📝 Committable suggestion