From 060ae2d2a1bfd2c6d3ff192d98f1f23f683e4f97 Mon Sep 17 00:00:00 2001
From: StefanDjokovic <ste.djokovic@gmail.com>
Date: Sun, 6 Nov 2022 19:48:32 +0200
Subject: [PATCH 01/14] feat(devtools): add copy object data explorer

---
 .../react-query-devtools/src/Explorer.tsx     | 38 +++++++++++++++++++
 .../src/__tests__/Explorer.test.tsx           |  1 +
 .../react-query-devtools/src/devtools.tsx     |  1 +
 3 files changed, 40 insertions(+)

diff --git a/packages/react-query-devtools/src/Explorer.tsx b/packages/react-query-devtools/src/Explorer.tsx
index bc55515ade..cbb8b4112d 100644
--- a/packages/react-query-devtools/src/Explorer.tsx
+++ b/packages/react-query-devtools/src/Explorer.tsx
@@ -29,6 +29,16 @@ export const ExpandButton = styled('button', {
   padding: 0,
 })
 
+export const CopyButton = styled('button', {
+  cursor: 'pointer',
+  color: 'inherit',
+  font: 'inherit',
+  outline: 'inherit',
+  background: 'transparent',
+  border: 'none',
+  padding: 0,
+})
+
 export const Value = styled('span', (_props, theme) => ({
   color: theme.danger,
 }))
@@ -49,6 +59,11 @@ type ExpanderProps = {
   style?: React.CSSProperties
 }
 
+type CopierProps = {
+  onClick: () => {}
+  style?: React.CSSProperties
+}
+
 export const Expander = ({ expanded, style = {} }: ExpanderProps) => (
   <span
     style={{
@@ -62,6 +77,20 @@ export const Expander = ({ expanded, style = {} }: ExpanderProps) => (
   </span>
 )
 
+export const Copier = ({ onClick, style = {} }: CopierProps) => (
+  <span onClick={onClick} style={{
+    display: 'span',
+    paddingLeft: '1em',
+    ...style,
+  }}>
+    <span>
+    <svg aria-hidden="true" height="12" viewBox="0 0 16 16" width="12">
+      <path fill="currentColor" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill="currentColor" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path>
+    </svg>
+    </span>
+  </span>
+)
+
 type Entry = {
   label: string
 }
@@ -74,6 +103,7 @@ type RendererProps = {
   subEntryPages: Entry[][]
   type: string
   expanded: boolean
+  copiable: boolean
   toggleExpanded: () => void
   pageSize: number
 }
@@ -108,6 +138,7 @@ export const DefaultRenderer: Renderer = ({
   subEntryPages = [],
   type,
   expanded = false,
+  copiable = false,
   toggleExpanded,
   pageSize,
 }) => {
@@ -124,6 +155,9 @@ export const DefaultRenderer: Renderer = ({
               {subEntries.length} {subEntries.length > 1 ? `items` : `item`}
             </Info>
           </ExpandButton>
+          {copiable ? (<CopyButton>
+            <Copier onClick={() => navigator.clipboard.writeText(displayValue(value))} />
+          </CopyButton>) : null}
           {expanded ? (
             subEntryPages.length === 1 ? (
               <SubEntries>{subEntries.map(handleEntry)}</SubEntries>
@@ -166,6 +200,7 @@ export const DefaultRenderer: Renderer = ({
 type ExplorerProps = Partial<RendererProps> & {
   renderer?: Renderer
   defaultExpanded?: true | Record<string, boolean>
+  copiable?: boolean,
 }
 
 type Property = {
@@ -183,6 +218,7 @@ export default function Explorer({
   defaultExpanded,
   renderer = DefaultRenderer,
   pageSize = 100,
+  copiable = false,
   ...rest
 }: ExplorerProps) {
   const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))
@@ -241,6 +277,7 @@ export default function Explorer({
         key={entry.label}
         value={value}
         renderer={renderer}
+        copiable={copiable}
         {...rest}
         {...entry}
       />
@@ -250,6 +287,7 @@ export default function Explorer({
     subEntryPages,
     value,
     expanded,
+    copiable,
     toggleExpanded,
     pageSize,
     ...rest,
diff --git a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
index 5cdccec1f6..20f2756ee0 100644
--- a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
+++ b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
@@ -38,6 +38,7 @@ describe('Explorer', () => {
           toggleExpanded={toggleExpanded}
           pageSize={10}
           expanded={false}
+          copiable={false}
           subEntryPages={[[{ label: 'A lovely label' }]]}
           handleEntry={() => <></>}
           value={undefined}
diff --git a/packages/react-query-devtools/src/devtools.tsx b/packages/react-query-devtools/src/devtools.tsx
index 7d6d0fcc4e..abf797db04 100644
--- a/packages/react-query-devtools/src/devtools.tsx
+++ b/packages/react-query-devtools/src/devtools.tsx
@@ -966,6 +966,7 @@ const ActiveQuery = ({
           label="Data"
           value={activeQueryState.data}
           defaultExpanded={{}}
+          copiable
         />
       </div>
       <div

From 1088b3f19ac609f27edd990d872ef15a00c2ddcf Mon Sep 17 00:00:00 2001
From: StefanDjokovic <ste.djokovic@gmail.com>
Date: Sun, 6 Nov 2022 22:00:13 +0200
Subject: [PATCH 02/14] fix: address code comments

---
 .../react-query-devtools/src/Explorer.tsx     | 26 ++++++++-----------
 .../src/__tests__/Explorer.test.tsx           |  2 +-
 .../react-query-devtools/src/devtools.tsx     |  2 +-
 3 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/packages/react-query-devtools/src/Explorer.tsx b/packages/react-query-devtools/src/Explorer.tsx
index cbb8b4112d..313345df40 100644
--- a/packages/react-query-devtools/src/Explorer.tsx
+++ b/packages/react-query-devtools/src/Explorer.tsx
@@ -60,7 +60,6 @@ type ExpanderProps = {
 }
 
 type CopierProps = {
-  onClick: () => {}
   style?: React.CSSProperties
 }
 
@@ -77,17 +76,14 @@ export const Expander = ({ expanded, style = {} }: ExpanderProps) => (
   </span>
 )
 
-export const Copier = ({ onClick, style = {} }: CopierProps) => (
-  <span onClick={onClick} style={{
-    display: 'span',
+export const Copier = ({ style = {} }: CopierProps) => (
+  <span aria-label="Copy object to clipboard" title="Copy object to clipboard" style={{
     paddingLeft: '1em',
     ...style,
-  }}>
-    <span>
+  }} >
     <svg aria-hidden="true" height="12" viewBox="0 0 16 16" width="12">
       <path fill="currentColor" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill="currentColor" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path>
     </svg>
-    </span>
   </span>
 )
 
@@ -103,7 +99,7 @@ type RendererProps = {
   subEntryPages: Entry[][]
   type: string
   expanded: boolean
-  copiable: boolean
+  copyable: boolean
   toggleExpanded: () => void
   pageSize: number
 }
@@ -138,7 +134,7 @@ export const DefaultRenderer: Renderer = ({
   subEntryPages = [],
   type,
   expanded = false,
-  copiable = false,
+  copyable = false,
   toggleExpanded,
   pageSize,
 }) => {
@@ -155,8 +151,8 @@ export const DefaultRenderer: Renderer = ({
               {subEntries.length} {subEntries.length > 1 ? `items` : `item`}
             </Info>
           </ExpandButton>
-          {copiable ? (<CopyButton>
-            <Copier onClick={() => navigator.clipboard.writeText(displayValue(value))} />
+          {copyable ? (<CopyButton onClick={() => navigator.clipboard.writeText(JSON.stringify(value))} >
+            <Copier />
           </CopyButton>) : null}
           {expanded ? (
             subEntryPages.length === 1 ? (
@@ -200,7 +196,7 @@ export const DefaultRenderer: Renderer = ({
 type ExplorerProps = Partial<RendererProps> & {
   renderer?: Renderer
   defaultExpanded?: true | Record<string, boolean>
-  copiable?: boolean,
+  copyable?: boolean,
 }
 
 type Property = {
@@ -218,7 +214,7 @@ export default function Explorer({
   defaultExpanded,
   renderer = DefaultRenderer,
   pageSize = 100,
-  copiable = false,
+  copyable = false,
   ...rest
 }: ExplorerProps) {
   const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))
@@ -277,7 +273,7 @@ export default function Explorer({
         key={entry.label}
         value={value}
         renderer={renderer}
-        copiable={copiable}
+        copyable={copyable}
         {...rest}
         {...entry}
       />
@@ -287,7 +283,7 @@ export default function Explorer({
     subEntryPages,
     value,
     expanded,
-    copiable,
+    copyable,
     toggleExpanded,
     pageSize,
     ...rest,
diff --git a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
index 20f2756ee0..08e91d09d4 100644
--- a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
+++ b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
@@ -38,7 +38,7 @@ describe('Explorer', () => {
           toggleExpanded={toggleExpanded}
           pageSize={10}
           expanded={false}
-          copiable={false}
+          copyable={false}
           subEntryPages={[[{ label: 'A lovely label' }]]}
           handleEntry={() => <></>}
           value={undefined}
diff --git a/packages/react-query-devtools/src/devtools.tsx b/packages/react-query-devtools/src/devtools.tsx
index abf797db04..38ce21c99d 100644
--- a/packages/react-query-devtools/src/devtools.tsx
+++ b/packages/react-query-devtools/src/devtools.tsx
@@ -966,7 +966,7 @@ const ActiveQuery = ({
           label="Data"
           value={activeQueryState.data}
           defaultExpanded={{}}
-          copiable
+          copyable
         />
       </div>
       <div

From 062d5c6cf6102a37119cfd8112e2eb9b904448cb Mon Sep 17 00:00:00 2001
From: StefanDjokovic <ste.djokovic@gmail.com>
Date: Sun, 6 Nov 2022 22:27:46 +0200
Subject: [PATCH 03/14] fix: add logs to investigate iframe copy issue

---
 .../react-query-devtools/src/Explorer.tsx     | 70 ++++++++++++++++---
 1 file changed, 61 insertions(+), 9 deletions(-)

diff --git a/packages/react-query-devtools/src/Explorer.tsx b/packages/react-query-devtools/src/Explorer.tsx
index 313345df40..a967f9fca6 100644
--- a/packages/react-query-devtools/src/Explorer.tsx
+++ b/packages/react-query-devtools/src/Explorer.tsx
@@ -77,16 +77,51 @@ export const Expander = ({ expanded, style = {} }: ExpanderProps) => (
 )
 
 export const Copier = ({ style = {} }: CopierProps) => (
-  <span aria-label="Copy object to clipboard" title="Copy object to clipboard" style={{
-    paddingLeft: '1em',
-    ...style,
-  }} >
+  <span
+    aria-label="Copy object to clipboard"
+    title="Copy object to clipboard"
+    style={{
+      paddingLeft: '1em',
+      ...style,
+    }}
+  >
     <svg aria-hidden="true" height="12" viewBox="0 0 16 16" width="12">
-      <path fill="currentColor" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill="currentColor" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path>
+      <path
+        fill="currentColor"
+        d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"
+      ></path>
+      <path
+        fill="currentColor"
+        d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"
+      ></path>
     </svg>
   </span>
 )
 
+export const Copied = ({ style = {} }: CopierProps) => (
+  <span
+    aria-label="Object copied to clipboard"
+    title="Object copied to clipboard"
+    style={{
+      paddingLeft: '1em',
+      ...style,
+    }}
+  >
+  <svg
+    aria-hidden="true"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    color="green"
+  >
+    <path
+      fill="green"
+      d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+    ></path>
+  </svg>
+  </span>
+)
+
 type Entry = {
   label: string
 }
@@ -139,6 +174,8 @@ export const DefaultRenderer: Renderer = ({
   pageSize,
 }) => {
   const [expandedPages, setExpandedPages] = React.useState<number[]>([])
+  // TODO: shouldn't be here
+  const [copied, setCopied] = React.useState<boolean>(false)
 
   return (
     <Entry key={label}>
@@ -151,9 +188,24 @@ export const DefaultRenderer: Renderer = ({
               {subEntries.length} {subEntries.length > 1 ? `items` : `item`}
             </Info>
           </ExpandButton>
-          {copyable ? (<CopyButton onClick={() => navigator.clipboard.writeText(JSON.stringify(value))} >
-            <Copier />
-          </CopyButton>) : null}
+          {copyable ? (
+            <CopyButton
+              onClick={() =>
+                navigator.clipboard.writeText(JSON.stringify(value)).then(
+                  // Adding logging on console to temporarily get data on why it's not working on the iframe
+                  () => {
+                    console.log('successfully copied')
+                    setCopied(true)
+                  },
+                  (err) => {
+                    console.log('failed to copy', err)
+                  },
+                )
+              }
+            >
+              {copied ? <Copied /> : <Copier />}
+            </CopyButton>
+          ) : null}
           {expanded ? (
             subEntryPages.length === 1 ? (
               <SubEntries>{subEntries.map(handleEntry)}</SubEntries>
@@ -196,7 +248,7 @@ export const DefaultRenderer: Renderer = ({
 type ExplorerProps = Partial<RendererProps> & {
   renderer?: Renderer
   defaultExpanded?: true | Record<string, boolean>
-  copyable?: boolean,
+  copyable?: boolean
 }
 
 type Property = {

From ef04eddd6911b588d15831448efe7a7cc1c1f758 Mon Sep 17 00:00:00 2001
From: StefanDjokovic <ste.djokovic@gmail.com>
Date: Sun, 6 Nov 2022 22:41:05 +0200
Subject: [PATCH 04/14] feat: add checkmark on copy

---
 .../react-query-devtools/src/Explorer.tsx     | 85 ++++++++++---------
 1 file changed, 46 insertions(+), 39 deletions(-)

diff --git a/packages/react-query-devtools/src/Explorer.tsx b/packages/react-query-devtools/src/Explorer.tsx
index a967f9fca6..c12cbb3787 100644
--- a/packages/react-query-devtools/src/Explorer.tsx
+++ b/packages/react-query-devtools/src/Explorer.tsx
@@ -29,15 +29,39 @@ export const ExpandButton = styled('button', {
   padding: 0,
 })
 
-export const CopyButton = styled('button', {
-  cursor: 'pointer',
-  color: 'inherit',
-  font: 'inherit',
-  outline: 'inherit',
-  background: 'transparent',
-  border: 'none',
-  padding: 0,
-})
+export const CopyButton = ({ value }: { value: unknown}) => {
+  const [copied, setCopied] = React.useState<boolean>(false);
+
+  return (
+    <button
+      onClick={() =>
+        navigator.clipboard.writeText(JSON.stringify(value)).then(
+          // Adding logging on console to temporarily get data on why it's not working on the iframe
+          () => {
+            setCopied(true)
+            setTimeout(() => {
+              setCopied(false);
+            }, 2000)
+          },
+          (err) => {
+            console.error('failed to copy:', err)
+          },
+        )
+      }
+      style={{
+        cursor: 'pointer',
+        color: 'inherit',
+        font: 'inherit',
+        outline: 'inherit',
+        background: 'transparent',
+        border: 'none',
+        padding: 0,
+      }}
+    >
+      {copied ? <Copied /> : <Copier />}
+    </button>
+  )
+}
 
 export const Value = styled('span', (_props, theme) => ({
   color: theme.danger,
@@ -107,18 +131,18 @@ export const Copied = ({ style = {} }: CopierProps) => (
       ...style,
     }}
   >
-  <svg
-    aria-hidden="true"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    color="green"
-  >
-    <path
-      fill="green"
-      d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
-    ></path>
-  </svg>
+    <svg
+      aria-hidden="true"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      color="green"
+    >
+      <path
+        fill="green"
+        d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+      ></path>
+    </svg>
   </span>
 )
 
@@ -174,8 +198,6 @@ export const DefaultRenderer: Renderer = ({
   pageSize,
 }) => {
   const [expandedPages, setExpandedPages] = React.useState<number[]>([])
-  // TODO: shouldn't be here
-  const [copied, setCopied] = React.useState<boolean>(false)
 
   return (
     <Entry key={label}>
@@ -189,22 +211,7 @@ export const DefaultRenderer: Renderer = ({
             </Info>
           </ExpandButton>
           {copyable ? (
-            <CopyButton
-              onClick={() =>
-                navigator.clipboard.writeText(JSON.stringify(value)).then(
-                  // Adding logging on console to temporarily get data on why it's not working on the iframe
-                  () => {
-                    console.log('successfully copied')
-                    setCopied(true)
-                  },
-                  (err) => {
-                    console.log('failed to copy', err)
-                  },
-                )
-              }
-            >
-              {copied ? <Copied /> : <Copier />}
-            </CopyButton>
+            <CopyButton value={value}/>
           ) : null}
           {expanded ? (
             subEntryPages.length === 1 ? (

From 3101359a51f0a23fe181c93b9b2c2abb3eb068b6 Mon Sep 17 00:00:00 2001
From: StefanDjokovic <ste.djokovic@gmail.com>
Date: Mon, 7 Nov 2022 19:35:58 +0200
Subject: [PATCH 05/14] add: error state

---
 .../react-query-devtools/src/Explorer.tsx     | 66 +++++++++++++------
 1 file changed, 47 insertions(+), 19 deletions(-)

diff --git a/packages/react-query-devtools/src/Explorer.tsx b/packages/react-query-devtools/src/Explorer.tsx
index c12cbb3787..4d8eae0235 100644
--- a/packages/react-query-devtools/src/Explorer.tsx
+++ b/packages/react-query-devtools/src/Explorer.tsx
@@ -29,22 +29,31 @@ export const ExpandButton = styled('button', {
   padding: 0,
 })
 
-export const CopyButton = ({ value }: { value: unknown}) => {
-  const [copied, setCopied] = React.useState<boolean>(false);
+enum CopyState {
+  NoCopy,
+  SuccessCopy,
+  ErrorCopy,
+}
+
+export const CopyButton = ({ value }: { value: unknown }) => {
+  const [copyState, setCopyState] = React.useState<CopyState>(CopyState.NoCopy)
 
   return (
     <button
       onClick={() =>
         navigator.clipboard.writeText(JSON.stringify(value)).then(
-          // Adding logging on console to temporarily get data on why it's not working on the iframe
           () => {
-            setCopied(true)
+            setCopyState(CopyState.SuccessCopy)
             setTimeout(() => {
-              setCopied(false);
-            }, 2000)
+              setCopyState(CopyState.NoCopy)
+            }, 1500)
           },
           (err) => {
-            console.error('failed to copy:', err)
+            console.error('Failed to copy: ', err)
+            setCopyState(CopyState.ErrorCopy)
+            setTimeout(() => {
+              setCopyState(CopyState.NoCopy)
+            }, 1500)
           },
         )
       }
@@ -58,7 +67,13 @@ export const CopyButton = ({ value }: { value: unknown}) => {
         padding: 0,
       }}
     >
-      {copied ? <Copied /> : <Copier />}
+      {copyState === CopyState.NoCopy ? (
+        <Copier />
+      ) : copyState === CopyState.SuccessCopy ? (
+        <Copied />
+      ) : copyState === CopyState.ErrorCopy ? (
+        <Error />
+      ) : null}
     </button>
   )
 }
@@ -109,7 +124,7 @@ export const Copier = ({ style = {} }: CopierProps) => (
       ...style,
     }}
   >
-    <svg aria-hidden="true" height="12" viewBox="0 0 16 16" width="12">
+    <svg aria-hidden="true" height="12" viewBox="0 0 16 12" width="10">
       <path
         fill="currentColor"
         d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"
@@ -122,6 +137,27 @@ export const Copier = ({ style = {} }: CopierProps) => (
   </span>
 )
 
+export const Error = ({ style = {} }: CopierProps) => (
+  <span
+    aria-label="Failed copying to clipboard"
+    title="Failed copying to clipboard"
+    style={{
+      paddingLeft: '1em',
+      ...style,
+    }}
+  >
+    <svg aria-hidden="true" height="12" viewBox="0 0 16 12" width="10">
+      <path
+        fill="red"
+        d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
+      ></path>
+    </svg>
+    <span style={{ color: 'red', fontSize: '12px', paddingLeft: '4px' }}>
+      See console
+    </span>
+  </span>
+)
+
 export const Copied = ({ style = {} }: CopierProps) => (
   <span
     aria-label="Object copied to clipboard"
@@ -131,13 +167,7 @@ export const Copied = ({ style = {} }: CopierProps) => (
       ...style,
     }}
   >
-    <svg
-      aria-hidden="true"
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
-      color="green"
-    >
+    <svg aria-hidden="true" height="12" viewBox="0 0 16 12" width="10">
       <path
         fill="green"
         d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
@@ -210,9 +240,7 @@ export const DefaultRenderer: Renderer = ({
               {subEntries.length} {subEntries.length > 1 ? `items` : `item`}
             </Info>
           </ExpandButton>
-          {copyable ? (
-            <CopyButton value={value}/>
-          ) : null}
+          {copyable ? <CopyButton value={value} /> : null}
           {expanded ? (
             subEntryPages.length === 1 ? (
               <SubEntries>{subEntries.map(handleEntry)}</SubEntries>

From 5922f18a3142c817b978481e8e60c1b1df3d65d7 Mon Sep 17 00:00:00 2001
From: StefanDjokovic <ste.djokovic@gmail.com>
Date: Mon, 7 Nov 2022 21:20:44 +0200
Subject: [PATCH 06/14] add: test

---
 .../src/__tests__/Explorer.test.tsx           | 66 ++++++++++++++++++-
 1 file changed, 64 insertions(+), 2 deletions(-)

diff --git a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
index 08e91d09d4..7bd1bd4e99 100644
--- a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
+++ b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
@@ -1,7 +1,8 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
+import { act } from 'react-dom/test-utils'
 
-import { chunkArray, DefaultRenderer } from '../Explorer'
+import { chunkArray, CopyButton, DefaultRenderer } from '../Explorer'
 import { displayValue } from '../utils'
 
 describe('Explorer', () => {
@@ -55,6 +56,67 @@ describe('Explorer', () => {
 
       expect(toggleExpanded).toHaveBeenCalledTimes(1)
     })
+
+    it('when the entry label is clicked, toggle expanded', async () => {
+      // Mock clipboard
+      let clipBoardContent = null
+      const value = 'someValue'
+      Object.defineProperty(navigator, 'clipboard', {
+        value: {
+          writeText: async () => {
+            return new Promise(() => (clipBoardContent = value))
+          },
+        },
+        configurable: true
+      })
+
+      act(() => {
+        render(<CopyButton value={value} />)
+      })
+
+      // After rendering the clipboard content should be null
+      expect(clipBoardContent).toBe(null)
+
+      const copyButton = screen.getByRole('button')
+
+      await screen.findByLabelText('Copy object to clipboard')
+
+      // After clicking the content should be added to the clipboard
+      act(() => {
+        fireEvent.click(copyButton)
+      })
+
+      expect(clipBoardContent).toBe(value)
+    })
+
+    it('when the entry label is clicked, toggle expanded', async () => {
+      // Mock clipboard
+      Object.defineProperty(navigator, 'clipboard', {
+        value: {
+          writeText: async () => {
+            return new Promise(() => {throw Error})
+          },
+        },
+        configurable: true
+      })
+
+      act(() => {
+        render(<CopyButton value={'someValue'} />)
+      })
+
+      const copyButton = screen.getByRole('button')
+
+      await screen.findByLabelText('Copy object to clipboard')
+
+      // After clicking the content should be added to the clipboard
+      await act(async () => {
+        fireEvent.click(copyButton)
+        await new Promise(process.nextTick)
+      })
+
+      // Check that it has failed
+      await screen.findByLabelText('Failed copying to clipboard')
+    })
   })
 
   describe('displayValue', () => {

From 8532dcb3eaa62f6ff2a7653e83e4a2964a8e5c46 Mon Sep 17 00:00:00 2001
From: StefanDjokovic <ste.djokovic@gmail.com>
Date: Mon, 7 Nov 2022 21:24:16 +0200
Subject: [PATCH 07/14] fix: test import

---
 packages/react-query-devtools/src/__tests__/Explorer.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
index 7bd1bd4e99..e4b2714a8f 100644
--- a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
+++ b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { act } from 'react-dom/test-utils'
 

From 8345cc7aa5092ea2ef1517ca874c58cd3876598c Mon Sep 17 00:00:00 2001
From: StefanDjokovic <ste.djokovic@gmail.com>
Date: Wed, 9 Nov 2022 18:59:47 +0200
Subject: [PATCH 08/14] fix: layouts and use superjson

---
 .../react-query-devtools/src/Explorer.tsx     | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/react-query-devtools/src/Explorer.tsx b/packages/react-query-devtools/src/Explorer.tsx
index 4d8eae0235..18d269c6d6 100644
--- a/packages/react-query-devtools/src/Explorer.tsx
+++ b/packages/react-query-devtools/src/Explorer.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import { displayValue, styled } from './utils'
+import superjson from 'superjson';
 
 export const Entry = styled('div', {
   fontFamily: 'Menlo, monospace',
@@ -40,8 +41,8 @@ export const CopyButton = ({ value }: { value: unknown }) => {
 
   return (
     <button
-      onClick={() =>
-        navigator.clipboard.writeText(JSON.stringify(value)).then(
+      onClick={() => {
+        navigator.clipboard.writeText(superjson.stringify(value)).then(
           () => {
             setCopyState(CopyState.SuccessCopy)
             setTimeout(() => {
@@ -55,7 +56,7 @@ export const CopyButton = ({ value }: { value: unknown }) => {
               setCopyState(CopyState.NoCopy)
             }, 1500)
           },
-        )
+        )}
       }
       style={{
         cursor: 'pointer',
@@ -70,9 +71,9 @@ export const CopyButton = ({ value }: { value: unknown }) => {
       {copyState === CopyState.NoCopy ? (
         <Copier />
       ) : copyState === CopyState.SuccessCopy ? (
-        <Copied />
+        <CopiedCopier />
       ) : copyState === CopyState.ErrorCopy ? (
-        <Error />
+        <ErrorCopier />
       ) : null}
     </button>
   )
@@ -98,10 +99,6 @@ type ExpanderProps = {
   style?: React.CSSProperties
 }
 
-type CopierProps = {
-  style?: React.CSSProperties
-}
-
 export const Expander = ({ expanded, style = {} }: ExpanderProps) => (
   <span
     style={{
@@ -115,16 +112,15 @@ export const Expander = ({ expanded, style = {} }: ExpanderProps) => (
   </span>
 )
 
-export const Copier = ({ style = {} }: CopierProps) => (
+export const Copier = () => (
   <span
     aria-label="Copy object to clipboard"
     title="Copy object to clipboard"
     style={{
       paddingLeft: '1em',
-      ...style,
     }}
   >
-    <svg aria-hidden="true" height="12" viewBox="0 0 16 12" width="10">
+    <svg height="12" viewBox="0 0 16 12" width="10">
       <path
         fill="currentColor"
         d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"
@@ -137,37 +133,41 @@ export const Copier = ({ style = {} }: CopierProps) => (
   </span>
 )
 
-export const Error = ({ style = {} }: CopierProps) => (
-  <span
+export const ErrorCopier = () => (
+<span
     aria-label="Failed copying to clipboard"
     title="Failed copying to clipboard"
     style={{
       paddingLeft: '1em',
-      ...style,
+      display: 'flex',
+      alignItems: 'center',
     }}
   >
-    <svg aria-hidden="true" height="12" viewBox="0 0 16 12" width="10">
+    <svg height="12" viewBox="0 0 16 12" width="10" display="block">
       <path
         fill="red"
         d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
       ></path>
     </svg>
-    <span style={{ color: 'red', fontSize: '12px', paddingLeft: '4px' }}>
+    <span style={{ color: 'red', fontSize: '12px', paddingLeft: '4px', position: 'relative', top: '2px' }}>
       See console
     </span>
   </span>
+
+
 )
 
-export const Copied = ({ style = {} }: CopierProps) => (
+export const CopiedCopier = () => (
   <span
     aria-label="Object copied to clipboard"
     title="Object copied to clipboard"
     style={{
       paddingLeft: '1em',
-      ...style,
+      display: 'inline-block',
+      verticalAlign: 'middle',
     }}
   >
-    <svg aria-hidden="true" height="12" viewBox="0 0 16 12" width="10">
+    <svg height="16" viewBox="0 0 16 16" width="16" display="block">
       <path
         fill="green"
         d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"

From 67a9a44f06b27528a7103cd3a6e59274d68c7feb Mon Sep 17 00:00:00 2001
From: StefanDjokovic <ste.djokovic@gmail.com>
Date: Wed, 9 Nov 2022 19:25:46 +0200
Subject: [PATCH 09/14] fix: test comment

---
 packages/react-query-devtools/src/__tests__/Explorer.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
index e4b2714a8f..c30d04bce6 100644
--- a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
+++ b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
@@ -90,7 +90,7 @@ describe('Explorer', () => {
     })
 
     it('when the entry label is clicked, toggle expanded', async () => {
-      // Mock clipboard
+      // Mock clipboard with error state
       Object.defineProperty(navigator, 'clipboard', {
         value: {
           writeText: async () => {
@@ -108,7 +108,7 @@ describe('Explorer', () => {
 
       await screen.findByLabelText('Copy object to clipboard')
 
-      // After clicking the content should be added to the clipboard
+      // After clicking the content should NOT be added to the clipboard
       await act(async () => {
         fireEvent.click(copyButton)
         await new Promise(process.nextTick)

From c076cef9d6cc321ff6f6c62a27eb7c7119d00bea Mon Sep 17 00:00:00 2001
From: StefanDjokovic <ste.djokovic@gmail.com>
Date: Sat, 12 Nov 2022 11:36:30 +0200
Subject: [PATCH 10/14] fix: typing and onclick only on nocopy

---
 .../react-query-devtools/src/Explorer.tsx     | 38 ++++++++-----------
 1 file changed, 16 insertions(+), 22 deletions(-)

diff --git a/packages/react-query-devtools/src/Explorer.tsx b/packages/react-query-devtools/src/Explorer.tsx
index 18d269c6d6..b6783d2063 100644
--- a/packages/react-query-devtools/src/Explorer.tsx
+++ b/packages/react-query-devtools/src/Explorer.tsx
@@ -30,33 +30,29 @@ export const ExpandButton = styled('button', {
   padding: 0,
 })
 
-enum CopyState {
-  NoCopy,
-  SuccessCopy,
-  ErrorCopy,
-}
+type CopyState = "NoCopy" | "SuccessCopy" | "ErrorCopy";
 
 export const CopyButton = ({ value }: { value: unknown }) => {
-  const [copyState, setCopyState] = React.useState<CopyState>(CopyState.NoCopy)
+  const [copyState, setCopyState] = React.useState<CopyState>("NoCopy")
 
   return (
     <button
-      onClick={() => {
+      onClick={copyState === "NoCopy" ? () => {
         navigator.clipboard.writeText(superjson.stringify(value)).then(
           () => {
-            setCopyState(CopyState.SuccessCopy)
+            setCopyState("SuccessCopy" )
             setTimeout(() => {
-              setCopyState(CopyState.NoCopy)
+              setCopyState("NoCopy")
             }, 1500)
           },
           (err) => {
             console.error('Failed to copy: ', err)
-            setCopyState(CopyState.ErrorCopy)
+            setCopyState("ErrorCopy")
             setTimeout(() => {
-              setCopyState(CopyState.NoCopy)
+              setCopyState("NoCopy")
             }, 1500)
           },
-        )}
+        )} : undefined
       }
       style={{
         cursor: 'pointer',
@@ -68,13 +64,13 @@ export const CopyButton = ({ value }: { value: unknown }) => {
         padding: 0,
       }}
     >
-      {copyState === CopyState.NoCopy ? (
+      {copyState === "NoCopy" ? (
         <Copier />
-      ) : copyState === CopyState.SuccessCopy ? (
+      ) : copyState === "SuccessCopy"  ? (
         <CopiedCopier />
-      ) : copyState === CopyState.ErrorCopy ? (
+      ) : (
         <ErrorCopier />
-      ) : null}
+      )}
     </button>
   )
 }
@@ -112,7 +108,7 @@ export const Expander = ({ expanded, style = {} }: ExpanderProps) => (
   </span>
 )
 
-export const Copier = () => (
+const Copier = () => (
   <span
     aria-label="Copy object to clipboard"
     title="Copy object to clipboard"
@@ -133,8 +129,8 @@ export const Copier = () => (
   </span>
 )
 
-export const ErrorCopier = () => (
-<span
+const ErrorCopier = () => (
+  <span
     aria-label="Failed copying to clipboard"
     title="Failed copying to clipboard"
     style={{
@@ -153,11 +149,9 @@ export const ErrorCopier = () => (
       See console
     </span>
   </span>
-
-
 )
 
-export const CopiedCopier = () => (
+const CopiedCopier = () => (
   <span
     aria-label="Object copied to clipboard"
     title="Object copied to clipboard"

From b33cb5537b76e26f27440e54c8d474248812836e Mon Sep 17 00:00:00 2001
From: StefanDjokovic <ste.djokovic@gmail.com>
Date: Sat, 12 Nov 2022 11:37:40 +0200
Subject: [PATCH 11/14] prettier

---
 .../react-query-devtools/src/Explorer.tsx     | 56 +++++++++++--------
 1 file changed, 34 insertions(+), 22 deletions(-)

diff --git a/packages/react-query-devtools/src/Explorer.tsx b/packages/react-query-devtools/src/Explorer.tsx
index b6783d2063..04871143fd 100644
--- a/packages/react-query-devtools/src/Explorer.tsx
+++ b/packages/react-query-devtools/src/Explorer.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import { displayValue, styled } from './utils'
-import superjson from 'superjson';
+import superjson from 'superjson'
 
 export const Entry = styled('div', {
   fontFamily: 'Menlo, monospace',
@@ -30,29 +30,33 @@ export const ExpandButton = styled('button', {
   padding: 0,
 })
 
-type CopyState = "NoCopy" | "SuccessCopy" | "ErrorCopy";
+type CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'
 
 export const CopyButton = ({ value }: { value: unknown }) => {
-  const [copyState, setCopyState] = React.useState<CopyState>("NoCopy")
+  const [copyState, setCopyState] = React.useState<CopyState>('NoCopy')
 
   return (
     <button
-      onClick={copyState === "NoCopy" ? () => {
-        navigator.clipboard.writeText(superjson.stringify(value)).then(
-          () => {
-            setCopyState("SuccessCopy" )
-            setTimeout(() => {
-              setCopyState("NoCopy")
-            }, 1500)
-          },
-          (err) => {
-            console.error('Failed to copy: ', err)
-            setCopyState("ErrorCopy")
-            setTimeout(() => {
-              setCopyState("NoCopy")
-            }, 1500)
-          },
-        )} : undefined
+      onClick={
+        copyState === 'NoCopy'
+          ? () => {
+              navigator.clipboard.writeText(superjson.stringify(value)).then(
+                () => {
+                  setCopyState('SuccessCopy')
+                  setTimeout(() => {
+                    setCopyState('NoCopy')
+                  }, 1500)
+                },
+                (err) => {
+                  console.error('Failed to copy: ', err)
+                  setCopyState('ErrorCopy')
+                  setTimeout(() => {
+                    setCopyState('NoCopy')
+                  }, 1500)
+                },
+              )
+            }
+          : undefined
       }
       style={{
         cursor: 'pointer',
@@ -64,9 +68,9 @@ export const CopyButton = ({ value }: { value: unknown }) => {
         padding: 0,
       }}
     >
-      {copyState === "NoCopy" ? (
+      {copyState === 'NoCopy' ? (
         <Copier />
-      ) : copyState === "SuccessCopy"  ? (
+      ) : copyState === 'SuccessCopy' ? (
         <CopiedCopier />
       ) : (
         <ErrorCopier />
@@ -145,7 +149,15 @@ const ErrorCopier = () => (
         d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
       ></path>
     </svg>
-    <span style={{ color: 'red', fontSize: '12px', paddingLeft: '4px', position: 'relative', top: '2px' }}>
+    <span
+      style={{
+        color: 'red',
+        fontSize: '12px',
+        paddingLeft: '4px',
+        position: 'relative',
+        top: '2px',
+      }}
+    >
       See console
     </span>
   </span>

From 3d197e854c8fa00236b44002fb8055fcf34e00c5 Mon Sep 17 00:00:00 2001
From: StefanDjokovic <ste.djokovic@gmail.com>
Date: Sat, 12 Nov 2022 11:50:45 +0200
Subject: [PATCH 12/14] fix: test error react17

---
 packages/react-query-devtools/src/__tests__/Explorer.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
index c30d04bce6..1ce23a1f02 100644
--- a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
+++ b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
@@ -1,6 +1,6 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, act } from '@testing-library/react'
 import * as React from 'react'
-import { act } from 'react-dom/test-utils'
+
 
 import { chunkArray, CopyButton, DefaultRenderer } from '../Explorer'
 import { displayValue } from '../utils'

From 16c90f57d1f2088f4de71f7241f7deb0e27f663a Mon Sep 17 00:00:00 2001
From: StefanDjokovic <ste.djokovic@gmail.com>
Date: Sat, 12 Nov 2022 19:48:43 +0200
Subject: [PATCH 13/14] fix: format test

---
 .../react-query-devtools/src/__tests__/Explorer.test.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
index 1ce23a1f02..7688e06b5b 100644
--- a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
+++ b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
@@ -1,7 +1,6 @@
 import { fireEvent, render, screen, act } from '@testing-library/react'
 import * as React from 'react'
 
-
 import { chunkArray, CopyButton, DefaultRenderer } from '../Explorer'
 import { displayValue } from '../utils'
 
@@ -67,7 +66,7 @@ describe('Explorer', () => {
             return new Promise(() => (clipBoardContent = value))
           },
         },
-        configurable: true
+        configurable: true,
       })
 
       act(() => {
@@ -94,10 +93,12 @@ describe('Explorer', () => {
       Object.defineProperty(navigator, 'clipboard', {
         value: {
           writeText: async () => {
-            return new Promise(() => {throw Error})
+            return new Promise(() => {
+              throw Error
+            })
           },
         },
-        configurable: true
+        configurable: true,
       })
 
       act(() => {

From 71f3950c29b81f614832c1c4b278ebe71c97bacd Mon Sep 17 00:00:00 2001
From: StefanDjokovic <ste.djokovic@gmail.com>
Date: Sat, 12 Nov 2022 20:53:02 +0200
Subject: [PATCH 14/14] fix: test copy and add await

---
 .../react-query-devtools/src/__tests__/Explorer.test.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
index 7688e06b5b..7d4dd7e00e 100644
--- a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
+++ b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
@@ -56,7 +56,7 @@ describe('Explorer', () => {
       expect(toggleExpanded).toHaveBeenCalledTimes(1)
     })
 
-    it('when the entry label is clicked, toggle expanded', async () => {
+    it('when the copy button is clicked, update the clipboard value', async () => {
       // Mock clipboard
       let clipBoardContent = null
       const value = 'someValue'
@@ -81,14 +81,15 @@ describe('Explorer', () => {
       await screen.findByLabelText('Copy object to clipboard')
 
       // After clicking the content should be added to the clipboard
-      act(() => {
+      await act(async () => {
         fireEvent.click(copyButton)
       })
 
       expect(clipBoardContent).toBe(value)
+      screen.findByLabelText('Object copied to clipboard')
     })
 
-    it('when the entry label is clicked, toggle expanded', async () => {
+    it('when the copy button is clicked but there is an error, show error state', async () => {
       // Mock clipboard with error state
       Object.defineProperty(navigator, 'clipboard', {
         value: {
@@ -112,7 +113,6 @@ describe('Explorer', () => {
       // After clicking the content should NOT be added to the clipboard
       await act(async () => {
         fireEvent.click(copyButton)
-        await new Promise(process.nextTick)
       })
 
       // Check that it has failed