From 7f092e45c98eb376f894605d71c5832712a00625 Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Tue, 16 Nov 2021 01:22:47 +1300
Subject: [PATCH 01/19] refactor(devtools): add types to Explorer

Add types to Explorer component with as minimal functional changes as
possible while still getting type safety

2742
---
 src/devtools/Explorer.tsx | 79 +++++++++++++++++++++++++++------------
 1 file changed, 56 insertions(+), 23 deletions(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index b409bc2ce0..c442e0e63e 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 import React from 'react'
 
 import { styled } from './utils'
@@ -17,7 +15,7 @@ export const Label = styled('span', {
   color: 'white',
 })
 
-export const Value = styled('span', (props, theme) => ({
+export const Value = styled('span', (_props, theme) => ({
   color: theme.danger,
 }))
 
@@ -32,7 +30,12 @@ export const Info = styled('span', {
   fontSize: '.7em',
 })
 
-export const Expander = ({ expanded, style = {}, ...rest }) => (
+type ExpanderProps = {
+  expanded: boolean
+  style?: React.CSSProperties
+}
+
+export const Expander = ({ expanded, style = {} }: ExpanderProps) => (
   <span
     style={{
       display: 'inline-block',
@@ -44,21 +47,38 @@ export const Expander = ({ expanded, style = {}, ...rest }) => (
     ▶
   </span>
 )
+type Entry = {
+  label: string
+}
+
+type RendererProps = {
+  handleEntry?: (entry: Entry) => JSX.Element
+  label?: string
+  value?: any
+  subEntries?: Entry[]
+  subEntryPages?: Entry[][]
+  type?: string
+  expanded?: boolean
+  toggle: (set?: boolean) => void
+  pageSize: number
+}
+
+type Renderer = (props: RendererProps) => JSX.Element
 
-const DefaultRenderer = ({
-  handleEntry,
+const DefaultRenderer: Renderer = ({
+  handleEntry = () => null,
   label,
   value,
   // path,
-  subEntries,
-  subEntryPages,
+  subEntries = [],
+  subEntryPages = [],
   type,
   // depth,
-  expanded,
+  expanded = false,
   toggle,
   pageSize,
 }) => {
-  const [expandedPages, setExpandedPages] = React.useState([])
+  const [expandedPages, setExpandedPages] = React.useState<number[]>([])
 
   return (
     <Entry key={label}>
@@ -117,6 +137,12 @@ const DefaultRenderer = ({
   )
 }
 
+type ExplorerProps = Partial<RendererProps> & {
+  renderer?: Renderer
+  depth?: number
+  defaultExpanded?: true | Record<string, boolean>
+}
+
 export default function Explorer({
   value,
   defaultExpanded,
@@ -124,20 +150,29 @@ export default function Explorer({
   pageSize = 100,
   depth = 0,
   ...rest
-}) {
-  const [expanded, setExpanded] = React.useState(defaultExpanded)
+}: ExplorerProps) {
+  const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))
 
-  const toggle = set => {
-    setExpanded(old => (typeof set !== 'undefined' ? set : !old))
+  const toggle = (set?: boolean): void => {
+    setExpanded(old => (typeof set !== 'undefined' ? set : !Boolean(old)))
   }
 
-  const path = []
-
-  let type = typeof value
+  const path: string[] = []
+  let type:
+    | 'string'
+    | 'number'
+    | 'bigint'
+    | 'boolean'
+    | 'symbol'
+    | 'undefined'
+    | 'object'
+    | 'function'
+    | 'array'
+    | 'Iterable' = typeof value
   let subEntries
   const subEntryPages = []
 
-  const makeProperty = sub => {
+  const makeProperty = (sub: { label: string; value: unknown }) => {
     const newPath = path.concat(sub.label)
     const subDefaultExpanded =
       defaultExpanded === true
@@ -155,7 +190,7 @@ export default function Explorer({
     type = 'array'
     subEntries = value.map((d, i) =>
       makeProperty({
-        label: i,
+        label: i.toString(),
         value: d,
       })
     )
@@ -167,7 +202,7 @@ export default function Explorer({
     type = 'Iterable'
     subEntries = Array.from(value, (val, i) =>
       makeProperty({
-        label: i,
+        label: i.toString(),
         value: val,
       })
     )
@@ -193,14 +228,12 @@ export default function Explorer({
 
   return renderer({
     handleEntry: entry => (
-      <Explorer key={entry.label} renderer={renderer} {...rest} {...entry} />
+      <Explorer value={value} renderer={renderer} {...rest} {...entry} />
     ),
     type,
     subEntries,
     subEntryPages,
-    depth,
     value,
-    path,
     expanded,
     toggle,
     pageSize,

From 719c5d12ef61776c1c476dc2c50110baf50a65f9 Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Fri, 19 Nov 2021 19:31:59 +1300
Subject: [PATCH 02/19] remove unused set param from explorer toggle

---
 src/devtools/Explorer.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index c442e0e63e..3695700ec7 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -59,7 +59,7 @@ type RendererProps = {
   subEntryPages?: Entry[][]
   type?: string
   expanded?: boolean
-  toggle: (set?: boolean) => void
+  toggle: () => void
   pageSize: number
 }
 
@@ -153,9 +153,7 @@ export default function Explorer({
 }: ExplorerProps) {
   const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))
 
-  const toggle = (set?: boolean): void => {
-    setExpanded(old => (typeof set !== 'undefined' ? set : !Boolean(old)))
-  }
+  const toggle = () => setExpanded(old => !old)
 
   const path: string[] = []
   let type:

From bc9e61f1e97394824a965ca943e5a8ae2ea1149b Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Fri, 19 Nov 2021 19:38:24 +1300
Subject: [PATCH 03/19] Wrap Explorer toggle with useCallback

---
 src/devtools/Explorer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index 3695700ec7..2141672a74 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -153,7 +153,7 @@ export default function Explorer({
 }: ExplorerProps) {
   const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))
 
-  const toggle = () => setExpanded(old => !old)
+  const toggle = React.useCallback(() => setExpanded(old => !old), [])
 
   const path: string[] = []
   let type:

From 36cac2e782a6e9fb6b0ba6253be21f56d9a98c3f Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Fri, 19 Nov 2021 19:43:49 +1300
Subject: [PATCH 04/19] Rename Explorer toggle to toggleExpanded

---
 src/devtools/Explorer.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index 2141672a74..32537b468a 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -59,7 +59,7 @@ type RendererProps = {
   subEntryPages?: Entry[][]
   type?: string
   expanded?: boolean
-  toggle: () => void
+  toggleExpanded: () => void
   pageSize: number
 }
 
@@ -75,7 +75,7 @@ const DefaultRenderer: Renderer = ({
   type,
   // depth,
   expanded = false,
-  toggle,
+  toggleExpanded,
   pageSize,
 }) => {
   const [expandedPages, setExpandedPages] = React.useState<number[]>([])
@@ -84,7 +84,7 @@ const DefaultRenderer: Renderer = ({
     <Entry key={label}>
       {subEntryPages?.length ? (
         <>
-          <Label onClick={() => toggle()}>
+          <Label onClick={() => toggleExpanded()}>
             <Expander expanded={expanded} /> {label}{' '}
             <Info>
               {String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : ''}
@@ -152,8 +152,7 @@ export default function Explorer({
   ...rest
 }: ExplorerProps) {
   const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))
-
-  const toggle = React.useCallback(() => setExpanded(old => !old), [])
+  const toggleExpanded = React.useCallback(() => setExpanded(old => !old), [])
 
   const path: string[] = []
   let type:
@@ -233,7 +232,7 @@ export default function Explorer({
     subEntryPages,
     value,
     expanded,
-    toggle,
+    toggleExpanded,
     pageSize,
     ...rest,
   })

From f296533b223f88afd5e4bff825f7a122da218653 Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Fri, 19 Nov 2021 20:10:01 +1300
Subject: [PATCH 05/19] Remove unused path

---
 src/devtools/Explorer.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index 32537b468a..4715baf577 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -69,7 +69,6 @@ const DefaultRenderer: Renderer = ({
   handleEntry = () => null,
   label,
   value,
-  // path,
   subEntries = [],
   subEntryPages = [],
   type,
@@ -154,7 +153,6 @@ export default function Explorer({
   const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))
   const toggleExpanded = React.useCallback(() => setExpanded(old => !old), [])
 
-  const path: string[] = []
   let type:
     | 'string'
     | 'number'
@@ -170,14 +168,12 @@ export default function Explorer({
   const subEntryPages = []
 
   const makeProperty = (sub: { label: string; value: unknown }) => {
-    const newPath = path.concat(sub.label)
     const subDefaultExpanded =
       defaultExpanded === true
         ? { [sub.label]: true }
         : defaultExpanded?.[sub.label]
     return {
       ...sub,
-      path: newPath,
       depth: depth + 1,
       defaultExpanded: subDefaultExpanded,
     }

From d266a2d3f537772a7890c9c8d2c7fb19ed07c2e3 Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Fri, 19 Nov 2021 20:14:10 +1300
Subject: [PATCH 06/19] Move subEntryPages definition next to usage

---
 src/devtools/Explorer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index 4715baf577..c812c420b4 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -165,7 +165,6 @@ export default function Explorer({
     | 'array'
     | 'Iterable' = typeof value
   let subEntries
-  const subEntryPages = []
 
   const makeProperty = (sub: { label: string; value: unknown }) => {
     const subDefaultExpanded =
@@ -210,6 +209,7 @@ export default function Explorer({
     )
   }
 
+  const subEntryPages = []
   if (subEntries) {
     let i = 0
 

From 00c564da52be55b1dd6b6b0eab6faf9ccffca444 Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Fri, 19 Nov 2021 20:16:15 +1300
Subject: [PATCH 07/19] Set type to be a string instead of string union

---
 src/devtools/Explorer.tsx | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index c812c420b4..5dd07f9c7f 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -153,17 +153,7 @@ export default function Explorer({
   const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))
   const toggleExpanded = React.useCallback(() => setExpanded(old => !old), [])
 
-  let type:
-    | 'string'
-    | 'number'
-    | 'bigint'
-    | 'boolean'
-    | 'symbol'
-    | 'undefined'
-    | 'object'
-    | 'function'
-    | 'array'
-    | 'Iterable' = typeof value
+  let type: string = typeof value
   let subEntries
 
   const makeProperty = (sub: { label: string; value: unknown }) => {

From 866f8d64152c16d67521ea4cd4c8cb064f20e8f5 Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Fri, 19 Nov 2021 20:18:03 +1300
Subject: [PATCH 08/19] Remove unused depth prop

---
 src/devtools/Explorer.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index 5dd07f9c7f..ff85085bd8 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -72,7 +72,6 @@ const DefaultRenderer: Renderer = ({
   subEntries = [],
   subEntryPages = [],
   type,
-  // depth,
   expanded = false,
   toggleExpanded,
   pageSize,
@@ -138,7 +137,6 @@ const DefaultRenderer: Renderer = ({
 
 type ExplorerProps = Partial<RendererProps> & {
   renderer?: Renderer
-  depth?: number
   defaultExpanded?: true | Record<string, boolean>
 }
 
@@ -147,7 +145,6 @@ export default function Explorer({
   defaultExpanded,
   renderer = DefaultRenderer,
   pageSize = 100,
-  depth = 0,
   ...rest
 }: ExplorerProps) {
   const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))
@@ -163,7 +160,6 @@ export default function Explorer({
         : defaultExpanded?.[sub.label]
     return {
       ...sub,
-      depth: depth + 1,
       defaultExpanded: subDefaultExpanded,
     }
   }

From aab375c48fe0ed7b88512bb850d73281555aac10 Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Sun, 21 Nov 2021 12:36:06 +1300
Subject: [PATCH 09/19] Move chunkArrays to own tested function

---
 src/devtools/Explorer.tsx            | 30 +++++++++++++++++++---------
 src/devtools/tests/Explorer.test.tsx | 26 ++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 9 deletions(-)
 create mode 100644 src/devtools/tests/Explorer.test.tsx

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index ff85085bd8..a4841fc724 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -47,6 +47,7 @@ export const Expander = ({ expanded, style = {} }: ExpanderProps) => (
     ▶
   </span>
 )
+
 type Entry = {
   label: string
 }
@@ -63,6 +64,25 @@ type RendererProps = {
   pageSize: number
 }
 
+/**
+ * Chunk elements in the array by size
+ *
+ * when the array cannot be chunked evenly by size, the last chunk will be
+ * filled with the remaining elements
+ *
+ * @example
+ * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
+ */
+export function chunkArray<T>(array: T[], size: number): T[][] {
+  let i = 0
+  const result: T[][] = []
+  while (i < array.length) {
+    result.push(array.slice(i, i + size))
+    i = i + size
+  }
+  return result
+}
+
 type Renderer = (props: RendererProps) => JSX.Element
 
 const DefaultRenderer: Renderer = ({
@@ -195,15 +215,7 @@ export default function Explorer({
     )
   }
 
-  const subEntryPages = []
-  if (subEntries) {
-    let i = 0
-
-    while (i < subEntries.length) {
-      subEntryPages.push(subEntries.slice(i, i + pageSize))
-      i = i + pageSize
-    }
-  }
+  const subEntryPages = chunkArray(subEntries ?? [], pageSize)
 
   return renderer({
     handleEntry: entry => (
diff --git a/src/devtools/tests/Explorer.test.tsx b/src/devtools/tests/Explorer.test.tsx
new file mode 100644
index 0000000000..517147da20
--- /dev/null
+++ b/src/devtools/tests/Explorer.test.tsx
@@ -0,0 +1,26 @@
+import { chunkArray } from '../Explorer'
+
+describe('Explorer', () => {
+  describe('chunkArray', () => {
+    it('when the size is less than one return an empty array', () => {
+      expect(chunkArray([1, 2, 3], 0)).toStrictEqual([])
+    })
+
+    it('when the array is empty return an empty array', () => {
+      expect(chunkArray([], 2)).toStrictEqual([])
+    })
+
+    it('when the array is evenly chunked return chu ', () => {
+      expect(chunkArray([1, 2, 3, 4], 2)).toStrictEqual([
+        [1, 2],
+        [3, 4],
+      ])
+    })
+
+    it('when the array is not evenly chunkable by size the last item is the remaining elements  ', () => {
+      const chunks = chunkArray([1, 2, 3, 4, 5], 2)
+      const lastChunk = chunks[chunks.length - 1]
+      expect(lastChunk).toStrictEqual([5])
+    })
+  })
+})

From 0d7761a7f9907099e5a0f7ddced7d8d091ab4182 Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Sun, 21 Nov 2021 12:56:45 +1300
Subject: [PATCH 10/19] set handleEntry as required

---
 src/devtools/Explorer.tsx            |  6 +++---
 src/devtools/tests/Explorer.test.tsx | 26 +++++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index a4841fc724..29cd8afe9e 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -53,7 +53,7 @@ type Entry = {
 }
 
 type RendererProps = {
-  handleEntry?: (entry: Entry) => JSX.Element
+  handleEntry: (entry: Entry) => JSX.Element
   label?: string
   value?: any
   subEntries?: Entry[]
@@ -85,8 +85,8 @@ export function chunkArray<T>(array: T[], size: number): T[][] {
 
 type Renderer = (props: RendererProps) => JSX.Element
 
-const DefaultRenderer: Renderer = ({
-  handleEntry = () => null,
+export const DefaultRenderer: Renderer = ({
+  handleEntry,
   label,
   value,
   subEntries = [],
diff --git a/src/devtools/tests/Explorer.test.tsx b/src/devtools/tests/Explorer.test.tsx
index 517147da20..80a6350005 100644
--- a/src/devtools/tests/Explorer.test.tsx
+++ b/src/devtools/tests/Explorer.test.tsx
@@ -1,4 +1,8 @@
-import { chunkArray } from '../Explorer'
+import React from 'react'
+import { fireEvent, screen } from '@testing-library/react'
+
+import { chunkArray, DefaultRenderer } from '../Explorer'
+import { renderWithClient, createQueryClient } from './utils'
 
 describe('Explorer', () => {
   describe('chunkArray', () => {
@@ -23,4 +27,24 @@ describe('Explorer', () => {
       expect(lastChunk).toStrictEqual([5])
     })
   })
+
+  describe('DefaultRenderer', () => {
+    it('when the entry label is clicked, toggle expanded', () => {
+      const toggleExpanded = jest.fn()
+      const { queryClient } = createQueryClient()
+      renderWithClient(
+        queryClient,
+        <DefaultRenderer
+          label="example label"
+          toggleExpanded={toggleExpanded}
+          pageSize={10}
+          handleEntry={() => <></>}
+        />,
+        {}
+      )
+      const label = screen.getByRole('button', { name: /example label/i })
+      fireEvent.click(label)
+      expect(toggleExpanded).toHaveBeenCalledTimes(1)
+    })
+  })
 })

From ce94d1a0d1ba7bcabc1ddfb5b49db45052aa26b4 Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Thu, 25 Nov 2021 00:27:00 +1300
Subject: [PATCH 11/19] Add LabelButton for accesibility

---
 src/devtools/Explorer.tsx            | 13 +++++++++----
 src/devtools/tests/Explorer.test.tsx | 27 +++++++++++++++------------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index 29cd8afe9e..18331630cb 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -11,6 +11,10 @@ export const Entry = styled('div', {
 })
 
 export const Label = styled('span', {
+  color: 'white',
+})
+
+export const LabelButton = styled('button', {
   cursor: 'pointer',
   color: 'white',
 })
@@ -74,6 +78,7 @@ type RendererProps = {
  * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
  */
 export function chunkArray<T>(array: T[], size: number): T[][] {
+  if (size < 1) return []
   let i = 0
   const result: T[][] = []
   while (i < array.length) {
@@ -102,13 +107,13 @@ export const DefaultRenderer: Renderer = ({
     <Entry key={label}>
       {subEntryPages?.length ? (
         <>
-          <Label onClick={() => toggleExpanded()}>
+          <button onClick={() => toggleExpanded()}>
             <Expander expanded={expanded} /> {label}{' '}
             <Info>
               {String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : ''}
               {subEntries.length} {subEntries.length > 1 ? `items` : `item`}
             </Info>
-          </Label>
+          </button>
           {expanded ? (
             subEntryPages.length === 1 ? (
               <SubEntries>
@@ -119,7 +124,7 @@ export const DefaultRenderer: Renderer = ({
                 {subEntryPages.map((entries, index) => (
                   <div key={index}>
                     <Entry>
-                      <Label
+                      <LabelButton
                         onClick={() =>
                           setExpandedPages(old =>
                             old.includes(index)
@@ -130,7 +135,7 @@ export const DefaultRenderer: Renderer = ({
                       >
                         <Expander expanded={expanded} /> [{index * pageSize} ...{' '}
                         {index * pageSize + pageSize - 1}]
-                      </Label>
+                      </LabelButton>
                       {expandedPages.includes(index) ? (
                         <SubEntries>
                           {entries.map(entry => handleEntry(entry))}
diff --git a/src/devtools/tests/Explorer.test.tsx b/src/devtools/tests/Explorer.test.tsx
index 80a6350005..8853bbacdb 100644
--- a/src/devtools/tests/Explorer.test.tsx
+++ b/src/devtools/tests/Explorer.test.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
-import { fireEvent, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 
 import { chunkArray, DefaultRenderer } from '../Explorer'
-import { renderWithClient, createQueryClient } from './utils'
 
 describe('Explorer', () => {
   describe('chunkArray', () => {
@@ -14,7 +13,7 @@ describe('Explorer', () => {
       expect(chunkArray([], 2)).toStrictEqual([])
     })
 
-    it('when the array is evenly chunked return chu ', () => {
+    it('when the array is evenly chunked return full chunks ', () => {
       expect(chunkArray([1, 2, 3, 4], 2)).toStrictEqual([
         [1, 2],
         [3, 4],
@@ -29,21 +28,25 @@ describe('Explorer', () => {
   })
 
   describe('DefaultRenderer', () => {
-    it('when the entry label is clicked, toggle expanded', () => {
+    it('when the entry label is clicked, toggle expanded', async () => {
       const toggleExpanded = jest.fn()
-      const { queryClient } = createQueryClient()
-      renderWithClient(
-        queryClient,
+
+      render(
         <DefaultRenderer
-          label="example label"
+          label="a lovely label"
           toggleExpanded={toggleExpanded}
           pageSize={10}
           handleEntry={() => <></>}
-        />,
-        {}
+          expanded={true}
+        />
+      )
+
+      fireEvent.click(
+        screen.getByRole('button', {
+          name: /a lovely label/i,
+        })
       )
-      const label = screen.getByRole('button', { name: /example label/i })
-      fireEvent.click(label)
+
       expect(toggleExpanded).toHaveBeenCalledTimes(1)
     })
   })

From 325be97ff353cbe1d5c90970a10843d79f4356ac Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Thu, 25 Nov 2021 00:55:44 +1300
Subject: [PATCH 12/19] fix test

---
 src/devtools/tests/Explorer.test.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/devtools/tests/Explorer.test.tsx b/src/devtools/tests/Explorer.test.tsx
index 8853bbacdb..214eae573c 100644
--- a/src/devtools/tests/Explorer.test.tsx
+++ b/src/devtools/tests/Explorer.test.tsx
@@ -33,19 +33,20 @@ describe('Explorer', () => {
 
       render(
         <DefaultRenderer
-          label="a lovely label"
+          label="the top level label"
           toggleExpanded={toggleExpanded}
           pageSize={10}
           handleEntry={() => <></>}
-          expanded={true}
+          expanded={false}
+          subEntryPages={[[{ label: 'A lovely lable' }]]}
         />
       )
 
-      fireEvent.click(
-        screen.getByRole('button', {
-          name: /a lovely label/i,
-        })
-      )
+      const expandButton = screen.getByRole('button', {
+        name: /▶ the top level label 0 item/i,
+      })
+
+      fireEvent.click(expandButton)
 
       expect(toggleExpanded).toHaveBeenCalledTimes(1)
     })

From b714fdf747a831735df24939922233493b0ba81f Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Sat, 27 Nov 2021 16:20:21 +1300
Subject: [PATCH 13/19] Remove shadowing

---
 src/devtools/Explorer.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index 18331630cb..b26cf29ef5 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -211,11 +211,10 @@ export default function Explorer({
     )
   } else if (typeof value === 'object' && value !== null) {
     type = 'object'
-    // eslint-disable-next-line no-shadow
-    subEntries = Object.entries(value).map(([label, value]) =>
+    subEntries = Object.entries(value).map(([key, val]) =>
       makeProperty({
-        label,
-        value,
+        label: key,
+        value: val,
       })
     )
   }

From ab14b94526b60e893e5abc1249a849a9adc8fbc0 Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Sat, 27 Nov 2021 16:23:34 +1300
Subject: [PATCH 14/19] Set subEntries as empty array by default

---
 src/devtools/Explorer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index b26cf29ef5..42bff922db 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -176,7 +176,7 @@ export default function Explorer({
   const toggleExpanded = React.useCallback(() => setExpanded(old => !old), [])
 
   let type: string = typeof value
-  let subEntries
+  let subEntries = []
 
   const makeProperty = (sub: { label: string; value: unknown }) => {
     const subDefaultExpanded =
@@ -219,7 +219,7 @@ export default function Explorer({
     )
   }
 
-  const subEntryPages = chunkArray(subEntries ?? [], pageSize)
+  const subEntryPages = chunkArray(subEntries, pageSize)
 
   return renderer({
     handleEntry: entry => (

From a7f6077ed5be3363fabf37223286f649b66ec851 Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Sat, 27 Nov 2021 16:26:47 +1300
Subject: [PATCH 15/19] Add type for property

---
 src/devtools/Explorer.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index 42bff922db..f3bf877cd6 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -165,6 +165,12 @@ type ExplorerProps = Partial<RendererProps> & {
   defaultExpanded?: true | Record<string, boolean>
 }
 
+type Property = {
+  defaultExpanded?: boolean | Record<string, boolean>
+  label: string
+  value: unknown
+}
+
 export default function Explorer({
   value,
   defaultExpanded,
@@ -176,9 +182,9 @@ export default function Explorer({
   const toggleExpanded = React.useCallback(() => setExpanded(old => !old), [])
 
   let type: string = typeof value
-  let subEntries = []
+  let subEntries: Property[] = []
 
-  const makeProperty = (sub: { label: string; value: unknown }) => {
+  const makeProperty = (sub: { label: string; value: unknown }): Property => {
     const subDefaultExpanded =
       defaultExpanded === true
         ? { [sub.label]: true }

From 5de07c6a1cae05300172e34c71989574e9c5eaca Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Sat, 27 Nov 2021 17:22:07 +1300
Subject: [PATCH 16/19] Convert handleEntry function to react component with
 entry props

---
 src/devtools/Explorer.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index f3bf877cd6..6b7433fa6b 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -57,7 +57,7 @@ type Entry = {
 }
 
 type RendererProps = {
-  handleEntry: (entry: Entry) => JSX.Element
+  HandleEntry: HandleEntryComponent
   label?: string
   value?: any
   subEntries?: Entry[]
@@ -91,7 +91,7 @@ export function chunkArray<T>(array: T[], size: number): T[][] {
 type Renderer = (props: RendererProps) => JSX.Element
 
 export const DefaultRenderer: Renderer = ({
-  handleEntry,
+  HandleEntry,
   label,
   value,
   subEntries = [],
@@ -117,7 +117,9 @@ export const DefaultRenderer: Renderer = ({
           {expanded ? (
             subEntryPages.length === 1 ? (
               <SubEntries>
-                {subEntries.map(entry => handleEntry(entry))}
+                {subEntries.map(entry => (
+                  <HandleEntry entry={entry} />
+                ))}
               </SubEntries>
             ) : (
               <SubEntries>
@@ -138,7 +140,9 @@ export const DefaultRenderer: Renderer = ({
                       </LabelButton>
                       {expandedPages.includes(index) ? (
                         <SubEntries>
-                          {entries.map(entry => handleEntry(entry))}
+                          {entries.map(entry => (
+                            <HandleEntry entry={entry} />
+                          ))}
                         </SubEntries>
                       ) : null}
                     </Entry>
@@ -160,6 +164,8 @@ export const DefaultRenderer: Renderer = ({
   )
 }
 
+type HandleEntryComponent = (props: { entry: Entry }) => JSX.Element
+
 type ExplorerProps = Partial<RendererProps> & {
   renderer?: Renderer
   defaultExpanded?: true | Record<string, boolean>
@@ -228,7 +234,7 @@ export default function Explorer({
   const subEntryPages = chunkArray(subEntries, pageSize)
 
   return renderer({
-    handleEntry: entry => (
+    HandleEntry: ({ entry }) => (
       <Explorer value={value} renderer={renderer} {...rest} {...entry} />
     ),
     type,

From 5bc51d8949ec0be5f6e6cf9811f344ec198ff6f6 Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Fri, 4 Mar 2022 18:51:12 +1300
Subject: [PATCH 17/19] Use unknown for value

---
 src/devtools/Explorer.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index 6b7433fa6b..4db5f146c6 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -59,7 +59,7 @@ type Entry = {
 type RendererProps = {
   HandleEntry: HandleEntryComponent
   label?: string
-  value?: any
+  value?: unknown
   subEntries?: Entry[]
   subEntryPages?: Entry[][]
   type?: string
@@ -177,6 +177,10 @@ type Property = {
   value: unknown
 }
 
+function isIterable(x: any): x is Iterable<unknown> {
+  return Symbol.iterator in x
+}
+
 export default function Explorer({
   value,
   defaultExpanded,
@@ -212,6 +216,7 @@ export default function Explorer({
   } else if (
     value !== null &&
     typeof value === 'object' &&
+    isIterable(value) &&
     typeof value[Symbol.iterator] === 'function'
   ) {
     type = 'Iterable'

From 3b4aeef4bfa5ed8b3838593cc9558b39785bb4fc Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Fri, 4 Mar 2022 18:53:16 +1300
Subject: [PATCH 18/19] Set RenderProps to required where possible

---
 src/devtools/Explorer.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index 4db5f146c6..7c97ae6f94 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -59,11 +59,11 @@ type Entry = {
 type RendererProps = {
   HandleEntry: HandleEntryComponent
   label?: string
-  value?: unknown
-  subEntries?: Entry[]
-  subEntryPages?: Entry[][]
-  type?: string
-  expanded?: boolean
+  value: unknown
+  subEntries: Entry[]
+  subEntryPages: Entry[][]
+  type: string
+  expanded: boolean
   toggleExpanded: () => void
   pageSize: number
 }

From e39f9718b16ce8c3a081a8fe2d9adb42835779ec Mon Sep 17 00:00:00 2001
From: liam-tait <liamr60@gmail.com>
Date: Sat, 5 Mar 2022 20:54:49 +1300
Subject: [PATCH 19/19] Add required attributes to Explorer tests

---
 src/devtools/tests/Explorer.test.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/devtools/tests/Explorer.test.tsx b/src/devtools/tests/Explorer.test.tsx
index 214eae573c..7a14ad404c 100644
--- a/src/devtools/tests/Explorer.test.tsx
+++ b/src/devtools/tests/Explorer.test.tsx
@@ -36,9 +36,12 @@ describe('Explorer', () => {
           label="the top level label"
           toggleExpanded={toggleExpanded}
           pageSize={10}
-          handleEntry={() => <></>}
           expanded={false}
-          subEntryPages={[[{ label: 'A lovely lable' }]]}
+          subEntryPages={[[{ label: 'A lovely label' }]]}
+          HandleEntry={() => <></>}
+          value={undefined}
+          subEntries={[]}
+          type="string"
         />
       )