From eaec8d871c47986e2b0d253259020f81b548555a Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Thu, 19 Dec 2024 06:38:46 +0900
Subject: [PATCH] Port ToolButtonsGroup

---
 .../ToolButtonsGroup/ToolButtonsGroup.tsx     | 25 +++++++++++++++++++
 .../internal/container/Errors.tsx             | 17 ++-----------
 2 files changed, 27 insertions(+), 15 deletions(-)
 create mode 100644 packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/ToolButtonsGroup/ToolButtonsGroup.tsx

diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/ToolButtonsGroup/ToolButtonsGroup.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/ToolButtonsGroup/ToolButtonsGroup.tsx
new file mode 100644
index 0000000000000..9be1fb8a42cde
--- /dev/null
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/ToolButtonsGroup/ToolButtonsGroup.tsx
@@ -0,0 +1,25 @@
+import type { DebugInfo } from '../../../../types'
+import { CopyButton } from '../copy-button'
+import { NodejsInspectorCopyButton } from '../nodejs-inspector'
+
+type ToolButtonsGroupProps = {
+  error: Error
+  debugInfo: DebugInfo | undefined
+}
+
+export function ToolButtonsGroup({ error, debugInfo }: ToolButtonsGroupProps) {
+  return (
+    <span>
+      <CopyButton
+        data-nextjs-data-runtime-error-copy-stack
+        actionLabel="Copy error stack"
+        successLabel="Copied"
+        content={error.stack || ''}
+        disabled={!error.stack}
+      />
+      <NodejsInspectorCopyButton
+        devtoolsFrontendUrl={debugInfo?.devtoolsFrontendUrl}
+      />
+    </span>
+  )
+}
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx
index 683811c27042f..8d29db692ec00 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx
@@ -26,8 +26,6 @@ import {
   type HydrationErrorState,
   getHydrationWarningType,
 } from '../helpers/hydration-error-info'
-import { NodejsInspectorCopyButton } from '../components/nodejs-inspector'
-import { CopyButton } from '../components/copy-button'
 import {
   getUnhandledErrorType,
   isUnhandledConsoleOrRejection,
@@ -35,6 +33,7 @@ import {
 import { extractNextErrorCode } from '../../../../../../lib/error-telemetry-utils'
 import { ErrorIndicator } from '../components/Errors/ErrorIndicator/ErrorIndicator'
 import { ErrorPagination } from '../components/Errors/ErrorPagination/ErrorPagination'
+import { ToolButtonsGroup } from '../components/ToolButtonsGroup/ToolButtonsGroup'
 
 export type SupportedErrorEvent = {
   id: number
@@ -297,19 +296,7 @@ export function Errors({
                     ? 'Console Error'
                     : 'Unhandled Runtime Error'}
               </h1>
-              <span>
-                <CopyButton
-                  data-nextjs-data-runtime-error-copy-stack
-                  actionLabel="Copy error stack"
-                  successLabel="Copied"
-                  content={error.stack || ''}
-                  disabled={!error.stack}
-                />
-
-                <NodejsInspectorCopyButton
-                  devtoolsFrontendUrl={debugInfo?.devtoolsFrontendUrl}
-                />
-              </span>
+              <ToolButtonsGroup error={error} debugInfo={debugInfo} />
             </div>
             <p
               id="nextjs__container_errors_desc"