expand all json view

Author: warrenday

src/components/CodeView/JsonView.tsx

@@ -1,5 +1,6 @@
-import ReactJson from "@notdutzi/react-json-view"
-import { useDarkTheme } from "../../hooks/useTheme"
+import ReactJson from '@notdutzi/react-json-view'
+import { useDarkTheme } from '../../hooks/useTheme'
+import { useState } from 'react'
 
 interface IJsonViewProps {
   src: object
@@ -8,21 +9,28 @@ interface IJsonViewProps {
 
 export const JsonView = (props: IJsonViewProps) => {
   const isDarkTheme = useDarkTheme()
+  const [expandAll, setExpandAll] = useState<boolean>(false)
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (e.ctrlKey || e.metaKey) {
+      setExpandAll(!expandAll)
+    }
+  }
 
   return (
-    <div className="p-4">
+    <div className="p-4" onClick={handleClick}>
       <ReactJson
         name={null}
         src={props.src}
-        theme={isDarkTheme ? "tomorrow" : "rjv-default"}
+        theme={isDarkTheme ? 'tomorrow' : 'rjv-default'}
         style={{
           fontFamily:
             'Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace',
         }}
         enableClipboard={false}
         displayDataTypes={false}
         displayObjectSize={true}
-        collapsed={props.collapsed || 2}
+        collapsed={expandAll ? 99 : props.collapsed}
       />
     </div>
   )

src/containers/NetworkPanel/NetworkDetails/index.tsx

@@ -40,6 +40,7 @@ export const NetworkDetails = (props: INetworkDetailsProps) => {
 
   return (
     <Tabs
+      key={data.id}
       testId="network-tabs"
       activeTab={activeTab}
       onTabClick={setActiveTab}

src/mocks/mock-requests.ts

@@ -333,6 +333,7 @@ export const mockRequests: IMockRequest[] = [
               id
               title
               genre
+              score
             }
           }
         `,
@@ -348,16 +349,19 @@ export const mockRequests: IMockRequest[] = [
             id: '1',
             title: 'Batman',
             genre: 'Action',
+            score: 8.5,
           },
           {
             id: '2',
             title: 'American Psycho',
             genre: 'Thriller',
+            score: 7.5,
           },
           {
             id: '3',
             title: 'The Godfather',
             genre: 'Drama',
+            score: 0.0000007,
           },
         ],
       },