From 20a90c55da8f34a829bd783da99c82d28d6da159 Mon Sep 17 00:00:00 2001 From: Jiwon Choi Date: Wed, 29 Jan 2025 04:39:54 +0900 Subject: [PATCH 01/51] [dev-overlay] fix: do not open error overlay when click indicator (#75404) ### Why? As we added back the "open/dismiss issues" label next to the indicator at https://github.com/vercel/next.js/pull/74975, no need to open error overlay when clicked the indicator. ### Before https://github.com/user-attachments/assets/52fac449-7f92-4793-84d5-599f85b4a8bf ### After https://github.com/user-attachments/assets/962bb3e2-9b25-4d16-88d7-1e5d05cc9a38 Closes https://linear.app/vercel/issue/NDX-721/fix-toggle-behavior-for-collapsed-pill-and-issue-button --- .../dev-tools-indicator/dev-tools-indicator.tsx | 9 ++++----- .../dev-tools-indicator/internal/next-logo.tsx | 13 ++++++------- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx index bc4a394980810..69b1cdf890cfa 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx @@ -157,7 +157,7 @@ function DevToolsPopover({ } } - function onIssuesClick() { + function openErrorOverlay() { if (issueCount > 0) { setIsErrorOverlayOpen(true) } @@ -165,7 +165,6 @@ function DevToolsPopover({ function onTriggerClick() { setIsMenuOpen((prev) => !prev) - onIssuesClick() } function closeMenu() { @@ -193,9 +192,9 @@ function DevToolsPopover({ aria-label={`${isMenuOpen ? 'Close' : 'Open'} Next.js Dev Tools`} data-nextjs-dev-tools-button issueCount={issueCount} - onClick={onTriggerClick} + onTriggerClick={onTriggerClick} onKeyDown={onTriggerKeydown} - onIssuesClick={onIssuesClick} + openErrorOverlay={openErrorOverlay} isDevBuilding={useIsDevBuilding()} isDevRendering={useIsDevRendering()} /> @@ -231,7 +230,7 @@ function DevToolsPopover({ index={0} label="Issues" value={{issueCount}} - onClick={onIssuesClick} + onClick={openErrorOverlay} /> { issueCount: number isDevBuilding: boolean isDevRendering: boolean - onClick: () => void - onIssuesClick: () => void + onTriggerClick: () => void + openErrorOverlay: () => void } const SIZE = 36 @@ -18,8 +18,8 @@ export const NextLogo = forwardRef(function NextLogo( issueCount, isDevBuilding, isDevRendering, - onClick, - onIssuesClick, + onTriggerClick, + openErrorOverlay, ...props }: Props, propRef: React.Ref @@ -32,7 +32,6 @@ export const NextLogo = forwardRef(function NextLogo( const isLoading = useMinimumLoadingTimeMultiple( isDevBuilding || isDevRendering ) - return (
@@ -297,7 +296,7 @@ export const NextLogo = forwardRef(function NextLogo(