4 | v{process.env.REACT_APP_VERSION || '0.0.0'}
5 |
6 | )
7 | }
8 |
9 | export default VersionNumber
10 |
--------------------------------------------------------------------------------
/src/hooks/useHighlight/worker.ts:
--------------------------------------------------------------------------------
1 | import hljs from "highlight.js"
2 | import { MessagePayload } from "./"
3 |
4 | onmessage = (event) => {
5 | const { language, code } = event.data as MessagePayload
6 | const result = hljs.highlight(code, { language })
7 | postMessage(result.value)
8 | }
9 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from "react"
2 | import ReactDOM from "react-dom"
3 | import { App } from "./containers/App"
4 | import "./index.css"
5 |
6 | ReactDOM.render(
7 |
6 |
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/src/hooks/useDebouncedEffect.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react"
2 |
3 | export const useDebouncedEffect = (
4 | cb: () => void,
5 | deps: any[],
6 | delay = 300
7 | ) => {
8 | useEffect(() => {
9 | const timeout = setTimeout(() => {
10 | cb()
11 | }, delay)
12 |
13 | return () => {
14 | clearTimeout(timeout)
15 | }
16 | // eslint-disable-next-line react-hooks/exhaustive-deps
17 | }, [cb, delay, ...deps])
18 | }
19 |
--------------------------------------------------------------------------------
/src/config.ts:
--------------------------------------------------------------------------------
1 | export const config = {
2 | // The maximum request response size in megabytes
3 | // that the app can reasonably handle. For responses
4 | // larger than this we can instead show user-friendly
5 | // messages to avoid freezing/crashing the app.
6 | //
7 | // Examples of where large requests cause issues could be:
8 | // parsing/stringifying json
9 | // rendering formatted code
10 | // rendering tracing views
11 | maxUsableResponseSizeMb: 1.5,
12 | }
13 |
--------------------------------------------------------------------------------
/scripts/set-manifest-version.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs")
2 | const packageJson = require("../package.json")
3 | const manifestPath = "./build/manifest.json"
4 |
5 | const run = async () => {
6 | const json = await fs.promises.readFile(manifestPath, "utf-8")
7 | const manifest = JSON.parse(json)
8 | manifest.version = packageJson.version
9 | manifest.name = "GraphQL Network Inspector"
10 | await fs.promises.writeFile(manifestPath, JSON.stringify(manifest, null, 2))
11 | }
12 | run()
13 |
--------------------------------------------------------------------------------
/scripts/set-chrome-settings.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs")
2 | const manifestPath = "./build/manifest.json"
3 |
4 | const run = async () => {
5 | const json = await fs.promises.readFile(manifestPath, "utf-8")
6 | const manifest = JSON.parse(json)
7 |
8 | // Remove background scripts from the manifest as this is only
9 | // supported in Firefox.
10 | delete manifest.background.scripts
11 |
12 | await fs.promises.writeFile(manifestPath, JSON.stringify(manifest, null, 2))
13 | }
14 | run()
15 |
--------------------------------------------------------------------------------
/src/hooks/useDebounce.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react"
2 |
3 | function useDebounce
12 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # development
12 | /dist
13 |
14 | # production
15 | /build
16 | /build-chrome.zip
17 | /build-firefox.zip
18 |
19 | # misc
20 | .DS_Store
21 | .env.local
22 | .env.development.local
23 | .env.test.local
24 | .env.production.local
25 | .idea/
26 |
27 | npm-debug.log*
28 | yarn-debug.log*
29 | yarn-error.log*
30 |
31 | .env.*
--------------------------------------------------------------------------------
/src/components/Bar/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | interface IBarProps {
4 | children: React.ReactNode
5 | className?: string
6 | testId?: string
7 | }
8 |
9 | export const Bar = (props: IBarProps) => {
10 | const { children, className, testId } = props
11 |
12 | return (
13 | {header}
13 | {body}
14 |
17 | {children}
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/src/helpers/safeJson.ts:
--------------------------------------------------------------------------------
1 | export const stringify = (
2 | value: any,
3 | replacer?: () => any,
4 | space?: string | number
5 | ): string => {
6 | if (!value) {
7 | return ""
8 | }
9 | try {
10 | return JSON.stringify(value, replacer, space)
11 | } catch (e) {
12 | return "{}"
13 | }
14 | }
15 |
16 | export const parse =
17 | {children}
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/src/hooks/useCopy.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react"
2 | import copy from "copy-to-clipboard"
3 |
4 | const useCopy = () => {
5 | const [copied, setCopied] = useState(false)
6 |
7 | useEffect(() => {
8 | if (copied) {
9 | const timeout = setTimeout(() => setCopied(false), 1000)
10 |
11 | return () => {
12 | clearTimeout(timeout)
13 | }
14 | }
15 | }, [copied])
16 |
17 | return {
18 | isCopied: copied,
19 | copy: (text: string) => {
20 | setCopied(true)
21 | copy(text)
22 | },
23 | }
24 | }
25 |
26 | export default useCopy
27 |
--------------------------------------------------------------------------------
/src/hooks/useApolloTracing.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from "react"
2 | import * as safeJson from "@/helpers/safeJson"
3 | import { IApolloServerTracing, IResponseBody, Maybe } from "@/types"
4 |
5 | export const useApolloTracing = (responseBody: Maybe
16 | {leftContent && leftContent}
17 | {children}
18 | {rightContent && (
19 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/CloseButton/index.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react"
2 | import { Button } from "../Button"
3 | import { CloseIcon } from "../Icons/CloseIcon"
4 |
5 | interface ICloseButtonProps {
6 | onClick: () => void
7 | testId?: string
8 | className?: string
9 | }
10 |
11 | export const CloseButton: FC{rightContent}
20 | )}
21 |
8 | {children}
9 |
10 | )
11 | }
12 |
13 | interface IPanelSectionProps {
14 | title?: string
15 | className?: string
16 | }
17 |
18 | export const PanelSection: FC
23 | {title &&
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/src/helpers/compareHeaders.ts:
--------------------------------------------------------------------------------
1 | import type { IHeader } from './networkHelpers'
2 |
3 | /**
4 | * Compare all headers and ensure an exact match
5 | * @param headers
6 | * @param expectedHeaders
7 | */
8 | const compareHeaders = (
9 | headers: IHeader[],
10 | expectedHeaders: IHeader[]
11 | ): boolean => {
12 | if (headers.length !== expectedHeaders.length) {
13 | return false
14 | }
15 |
16 | for (let i = 0; i < headers.length; i++) {
17 | if (headers[i].name !== expectedHeaders[i].name) {
18 | return false
19 | }
20 |
21 | if (headers[i].value !== expectedHeaders[i].value) {
22 | return false
23 | }
24 | }
25 |
26 | return true
27 | }
28 |
29 | export default compareHeaders
30 |
--------------------------------------------------------------------------------
/src/components/Icons/SearchIcon.tsx:
--------------------------------------------------------------------------------
1 | import { SVGAttributes } from "react"
2 |
3 | interface ISearchIconProps extends SVGAttributes<{}> {}
4 |
5 | export const SearchIcon = (props: ISearchIconProps) => {
6 | const { width = "1.5rem", height = "1.5rem" } = props
7 | return (
8 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/helpers/jwt.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Decode a JWT
3 | * @param token the JWT token
4 | * @returns the decoded JWT data
5 | */
6 | const decode = (token: string) => {
7 | try {
8 | const base64Url = token.split(".")[1] // Get the payload part
9 | const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/") // Convert to base64
10 | const jsonPayload = decodeURIComponent(
11 | atob(base64)
12 | .split("")
13 | .map((c) => {
14 | return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2)
15 | })
16 | .join("")
17 | )
18 |
19 | return JSON.parse(jsonPayload)
20 | } catch (error) {
21 | throw new Error("Invalid token")
22 | }
23 | }
24 |
25 | export { decode }
26 |
--------------------------------------------------------------------------------
/src/components/Icons/BinIcon.tsx:
--------------------------------------------------------------------------------
1 | import { SVGAttributes } from "react"
2 |
3 | interface IBinIconProps extends SVGAttributes<{}> {}
4 |
5 | export const BinIcon = (props: IBinIconProps) => {
6 | const { width = "1.5rem", height = "1.5rem" } = props
7 | return (
8 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "isolatedModules": true,
19 | "noEmit": true,
20 | "jsx": "react-jsx",
21 | "noFallthroughCasesInSwitch": true,
22 | "baseUrl": "."
23 | },
24 | "include": [
25 | "src",
26 | "devtools"
27 | ],
28 | "extends": "./tsconfig.base.json"
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/Icons/CodeIcon.tsx:
--------------------------------------------------------------------------------
1 | import { SVGAttributes } from "react"
2 |
3 | interface ICodeIconProps extends SVGAttributes<{}> {}
4 |
5 | export const CodeIcon = (props: ICodeIconProps) => {
6 | const { width = "1.5rem", height = "1.5rem", className } = props
7 |
8 | return (
9 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/Textfield/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | type ITextfieldProps = React.DetailedHTMLProps<
4 | React.InputHTMLAttributes{title}
}
24 | {children}
25 |
17 |
26 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/scripts/set-manifest-content-script.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | require("dotenv").config({ path: `.env.${process.env.NODE_ENV}` })
3 | const fs = require("fs")
4 | const manifestPath = "./build/manifest.json"
5 |
6 | const run = async () => {
7 | const json = await fs.promises.readFile(manifestPath, "utf-8")
8 | const manifest = JSON.parse(json)
9 |
10 | // Ensure URL has scheme, defaulting to HTTPS
11 | const baseUrl = process.env.REACT_APP_SHARE_TARGET_URL || 'https://localhost:3000'
12 | const url = baseUrl.startsWith('http') ? baseUrl : `https://${baseUrl}`
13 |
14 | manifest.content_scripts[0].matches = [
15 | `${url}/draft?*`
16 | ]
17 |
18 | await fs.promises.writeFile(manifestPath, JSON.stringify(manifest, null, 2))
19 | }
20 | run()
21 |
--------------------------------------------------------------------------------
/src/hooks/useFormattedCode.ts:
--------------------------------------------------------------------------------
1 | import PrettierGraphQLParsers from "prettier/parser-graphql"
2 | import prettier from "prettier/standalone"
3 | import { useMemo } from "react"
4 |
5 | export function useFormattedCode(
6 | code: string,
7 | language: string,
8 | enabled = true
9 | ) {
10 | return useMemo(() => {
11 | if (enabled) {
12 | if (language === "graphql") {
13 | try {
14 | return prettier.format(code, {
15 | parser: language,
16 | useTabs: false,
17 | tabWidth: 2,
18 | plugins: [PrettierGraphQLParsers],
19 | })
20 | } catch (e) {
21 | console.error(e)
22 | }
23 | }
24 | }
25 |
26 | return code
27 | }, [code, language, enabled])
28 | }
29 |
--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect'
6 |
7 | Object.defineProperty(window, 'matchMedia', {
8 | writable: true,
9 | value: (query: any) => ({
10 | matches: false,
11 | media: query,
12 | onchange: null,
13 | addEventListener: jest.fn(),
14 | removeEventListener: jest.fn(),
15 | dispatchEvent: jest.fn(),
16 | }),
17 | })
18 |
19 | window.HTMLElement.prototype.scrollIntoView = function () {}
20 |
21 | window.TextDecoder = require('util').TextDecoder
22 | window.TextEncoder = require('util').TextEncoder
23 |
--------------------------------------------------------------------------------
/src/helpers/jwt.test.ts:
--------------------------------------------------------------------------------
1 | import * as jwt from "./jwt"
2 |
3 | describe("jwt.decodeJWT", () => {
4 | it("decodes a JWT token", () => {
5 | const token =
6 | "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
7 |
8 | const decoded = jwt.decode(token)
9 |
10 | expect(decoded).toEqual({
11 | sub: "1234567890",
12 | name: "John Doe",
13 | iat: 1516239022,
14 | })
15 | })
16 |
17 | it("fails to decode an invalid JWT token", () => {
18 | const token = "not-a-token"
19 |
20 | try {
21 | jwt.decode(token)
22 | } catch (error) {
23 | expect((error as Error).message).toBe("Invalid token")
24 | }
25 | })
26 | })
27 |
--------------------------------------------------------------------------------
/src/services/userSettingsService.ts:
--------------------------------------------------------------------------------
1 | import { chromeProvider } from './chromeProvider'
2 |
3 | export interface IUserSettings {
4 | isPreserveLogsActive: boolean
5 | isInvertFilterActive: boolean
6 | isRegexActive: boolean
7 | filter: string
8 | websocketUrlFilter: string
9 | shouldShowFullWebsocketMessage: boolean
10 | }
11 |
12 | export const getUserSettings = (
13 | cb: (settings: Partial
15 |
22 |
23 | )
24 | }
--------------------------------------------------------------------------------
/src/components/AutoFormatToggleButton/index.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "../Button"
2 | import { CodeIcon } from "../Icons/CodeIcon"
3 |
4 | interface IAutoFormatToggleButtonProps {
5 | active?: boolean
6 | onToggle?: (value: boolean) => void
7 | className?: string
8 | }
9 |
10 | export const AutoFormatToggleButton = (props: IAutoFormatToggleButtonProps) => {
11 | const { active, onToggle, className } = props
12 |
13 | return (
14 |
15 | }
19 | onClick={() => {
20 | onToggle?.(!active)
21 | }}
22 | >
23 | Auto Format
24 |
25 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/DelayedLoader/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import useDelay from "@/hooks/useDelay"
3 |
4 | interface IDelayedLoaderProps {
5 | loading: boolean
6 | loader: React.ReactNode
7 | delay?: number
8 | }
9 |
10 | /**
11 | * Rendering a loading indicator when content is loading.
12 | * But delay loadint the indicator before the delay has passed.
13 | *
14 | * This improves the perceived performance of the app as the loader
15 | * does not flash on screen for short periods of time.
16 | *
17 | */
18 | export const DelayedLoader: React.FC
22 | {children}
23 |
24 |
19 | The output is too large to display.
20 |
21 | )
22 | }
23 |
24 | return (
25 |
26 | {tracing ? (
27 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/src/hooks/useBoundingRect.ts:
--------------------------------------------------------------------------------
1 | import { useLayoutEffect, useRef, useState } from "react"
2 | import { debounce } from "@/helpers/debounce"
3 |
4 | interface Listener {
5 | (event?: UIEvent): void
6 | }
7 |
8 | export const useBoundingRect = () => {
9 | const container = useRefNo tracing found.
30 | )} 31 |
22 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/src/hooks/useLatestState.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useRef, useState } from 'react'
2 |
3 | /**
4 | * Has a matching API to useState, but also provides a getter to always
5 | * access the latest state.
6 | *
7 | * This is handled through a ref, so it's safe to use in callbacks or
8 | * other places where the state might be stale.
9 | *
10 | */
11 | const useLatestState = I am tab one
,
9 | },
10 | {
11 | title: "Tab Two",
12 | component: I am tab two
,
13 | },
14 | ]
15 |
16 | const ControlledTabs = (props: { tabs: ITab[] }) => {
17 | const [activeTab, setActiveTab] = useState(0)
18 | return (
19 |
18 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/src/hooks/useSearch.tsx:
--------------------------------------------------------------------------------
1 | import { useState, createContext, useContext, useCallback } from "react"
2 | import { useSearchStart } from "./useSearchStart"
3 |
4 | const SearchContext = createContext<{
5 | searchQuery: string
6 | setSearchQuery: React.Dispatch
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
18 |
48 | )
49 | }
50 |
--------------------------------------------------------------------------------
/src/containers/NetworkPanel/HeaderView/parseAuthHeader.test.ts:
--------------------------------------------------------------------------------
1 | import parseAuthHeader from "./parseAuthHeader"
2 |
3 | describe("parseAuthHeader", () => {
4 | it("parses a bearer token header", () => {
5 | const header = {
6 | name: "Authorization",
7 | value:
8 | "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c",
9 | }
10 |
11 | const result = parseAuthHeader(header)
12 | expect(result).toEqual(
13 | '{"sub":"1234567890","name":"John Doe","iat":1516239022}'
14 | )
15 | })
16 |
17 | it("parses a non-bearer token header", () => {
18 | const header = {
19 | name: "Authorization",
20 | value:
21 | "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c",
22 | }
23 |
24 | const result = parseAuthHeader(header)
25 | expect(result).toEqual(
26 | '{"sub":"1234567890","name":"John Doe","iat":1516239022}'
27 | )
28 | })
29 |
30 | it("returns undefined if the header value is empty", () => {
31 | const header = {
32 | name: "Authorization",
33 | }
34 |
35 | const result = parseAuthHeader(header)
36 | expect(result).toBeUndefined()
37 | })
38 |
39 | it("returns undefined if the header value is not a valid JWT", () => {
40 | const header = {
41 | name: "Authorization",
42 | value: "invalid",
43 | }
44 |
45 | const result = parseAuthHeader(header)
46 | expect(result).toBeUndefined()
47 | })
48 | })
49 |
--------------------------------------------------------------------------------
/craco.config.js:
--------------------------------------------------------------------------------
1 | // Custom config on top of CRA see:
2 | // https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#configuration
3 |
4 | const path = require("path")
5 | const CopyWebpackPlugin = require("copy-webpack-plugin")
6 |
7 | module.exports = ({ env }) => {
8 | const isEnvDevelopment = env === "development"
9 |
10 | return {
11 | style: {
12 | postcssOptions: {
13 | plugins: [require("tailwindcss"), require("autoprefixer")],
14 | },
15 | },
16 | webpack: {
17 | configure: {
18 | // To access source maps during development as an unpacked extension
19 | // we need source maps to be inline, otherwise chrome will not load
20 | // them corretly.
21 | devtool: isEnvDevelopment ? "inline-source-map" : false,
22 | resolve: {
23 | extensions: [".ts", ".tsx", ".json"],
24 | alias: {
25 | "@": path.resolve("src"),
26 | },
27 | },
28 | },
29 | plugins: [
30 | new CopyWebpackPlugin({
31 | patterns: [
32 | {
33 | from: "public",
34 | globOptions: {
35 | ignore: ["**/index.html"],
36 | },
37 | },
38 | ],
39 | }),
40 | ],
41 | },
42 | devServer: {
43 | devMiddleware: {
44 | // This aid in debugging the source maps during development.
45 | // When loading an unpacked extension in chrome we can see the
46 | // source files and easily debug without needing to rebuild the
47 | // entire app.
48 | writeToDisk: true,
49 | },
50 | },
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/hooks/useMark.test.tsx:
--------------------------------------------------------------------------------
1 | import { render } from "@testing-library/react"
2 | import { useMark } from "./useMark"
3 |
4 | const TestComponent = (props: { search: string; done?: () => void }) => {
5 | const ref = useMark(props.search, "", props.done)
6 | return (
7 |
22 |
47 |
8 | The quick brown fox jumps over the lazy dog again
9 |
10 | )
11 | }
12 |
13 | describe("useMark", () => {
14 | it("should mark the searched text within the dom for a single letter", () => {
15 | const search = "a"
16 |
17 | const { container } = render(
27 |
28 | {tabs.map((tab, i) => {
29 | const isActive = i === activeTab
30 | return (
31 |
47 | )
48 | })}
49 |
50 |
59 | )
60 | }
61 |
--------------------------------------------------------------------------------
/src/hooks/useUserSettings.test.ts:
--------------------------------------------------------------------------------
1 | import { renderHook, act } from '@testing-library/react-hooks'
2 | import useUserSettings from './useUserSettings'
3 | import * as userSettingsService from '../services/userSettingsService'
4 |
5 | // Mock the userSettingsService module
6 | jest.mock('../services/userSettingsService')
7 |
8 | const mockUserSettings = userSettingsService as jest.Mocked<
9 | typeof userSettingsService
10 | >
11 |
12 | describe('useUserSettings', () => {
13 | it('should initialize with default settings and allow updates', async () => {
14 | mockUserSettings.getUserSettings.mockImplementation((cb) => {
15 | cb({ isPreserveLogsActive: true })
16 | })
17 |
18 | const { result } = renderHook(() => useUserSettings())
19 |
20 | // Expect initial settings to be loaded into state
21 | expect(result.current[0]).toEqual({
22 | isPreserveLogsActive: true,
23 | isInvertFilterActive: false,
24 | isRegexActive: false,
25 | filter: '',
26 | websocketUrlFilter: '',
27 | shouldShowFullWebsocketMessage: true,
28 | })
29 |
30 | // Update the state
31 | act(() => {
32 | result.current[1]({
33 | isPreserveLogsActive: false,
34 | isInvertFilterActive: true,
35 | })
36 | })
37 |
38 | // Expect state to be updated
39 | expect(result.current[0]).toEqual({
40 | isPreserveLogsActive: false,
41 | isInvertFilterActive: true,
42 | isRegexActive: false,
43 | filter: '',
44 | websocketUrlFilter: '',
45 | shouldShowFullWebsocketMessage: true,
46 | })
47 |
48 | // Expect setUserSettings was called with the new settings
49 | expect(userSettingsService.setUserSettings).toHaveBeenCalledWith({
50 | isPreserveLogsActive: false,
51 | isInvertFilterActive: true,
52 | isRegexActive: false,
53 | filter: '',
54 | websocketUrlFilter: '',
55 | shouldShowFullWebsocketMessage: true,
56 | })
57 | })
58 | })
59 |
--------------------------------------------------------------------------------
/src/hooks/useMaintainScrollBottom.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useLayoutEffect, useRef, useState } from "react"
2 | import { usePrevious } from "./usePrevious"
3 |
4 | interface IUseMaintainScrollBottomArgs {
5 | isActive?: boolean
6 | totalEntries: number
7 | }
8 |
9 | const isScrollBottom = (
10 | scrollableElement: HTMLElement,
11 | thresholdPixels: number
12 | ) => {
13 | const { scrollHeight, clientHeight, scrollTop } = scrollableElement
14 | return (
15 | scrollTop > 0 &&
16 | Math.ceil(scrollTop + clientHeight) >= scrollHeight - thresholdPixels
17 | )
18 | }
19 |
20 | const isScrollable = (scrollableElement: HTMLElement) => {
21 | const { scrollHeight, clientHeight } = scrollableElement
22 | return scrollHeight > clientHeight
23 | }
24 |
25 | export const useMaintainScrollBottom = (args: IUseMaintainScrollBottomArgs) => {
26 | const { totalEntries, isActive } = args
27 | const previousTotalEntried = usePrevious(totalEntries)
28 | const scrollRef = useRef
51 | {tabs[activeTab]?.component}
52 |
53 | {tabs[activeTab]?.bottomComponent && (
54 |
55 | {tabs[activeTab]?.bottomComponent}
56 |
57 | )}
58 |
34 | setIsSearchOpen(false)}
38 | className="mr-2"
39 | />
40 | }
41 | >
42 |
46 |
59 | )
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/CopyAsCurlButton/index.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, fireEvent } from "@testing-library/react"
2 | import { CopyAsCurlButton } from "./"
3 | import { useCopyCurl } from "@/hooks/useCopyCurl/useCopyCurl"
4 | import { ICompleteNetworkRequest } from "@/helpers/networkHelpers"
5 |
6 | jest.mock("@/hooks/useCopyCurl/useCopyCurl")
7 |
8 | describe("CopyAsCurlButton", () => {
9 | const mockCopyAsCurl = jest.fn()
10 |
11 | beforeEach(() => {
12 | jest.clearAllMocks()
13 | ;(useCopyCurl as jest.Mock).mockReturnValue({
14 | copyAsCurl: mockCopyAsCurl,
15 | isCopied: false
16 | })
17 | })
18 |
19 | it("renders with correct label", () => {
20 | const { getByTestId } = render(
43 |
45 | Search
44 |
47 |
49 | {searchResults && (
50 |
51 |
57 | )}
58 | hi
',
9 | loading: false,
10 | }),
11 | }))
12 |
13 | jest.mock('@/services/userSettingsService', () => ({
14 | getUserSettings: jest.fn(),
15 | setUserSettings: jest.fn(),
16 | }))
17 |
18 | const NetworkPanelContainer = () => {
19 | const [userSettings, setUserSettings] = useUserSettings();
20 |
21 | return
40 | {getReadableTime(message.time)} | {message.type}
41 |
42 |
43 | {isGraphQLQuery ? (
44 |
45 |
62 | ) : (
63 |
63 | Copied!
64 |
65 | )}
66 | -
76 | {headers.map((header) => (
77 |
18 |
43 | )
44 | }
45 |
46 | interface IErrorBoundaryState {
47 | hasError: boolean
48 | error: Error | null
49 | }
50 |
51 | export class ErrorBoundary extends React.Component {
52 | state: IErrorBoundaryState = { hasError: false, error: null }
53 |
54 | componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
55 | console.error('Error caught by ErrorBoundary:', error)
56 | console.error('Error details:', errorInfo)
57 | }
58 |
59 | static getDerivedStateFromError(error: Error) {
60 | return { hasError: true, error }
61 | }
62 |
63 | render() {
64 | if (this.state.hasError && this.state.error) {
65 | return (
66 |
19 |
42 | Something went wrong:
20 |
21 | {error.message}
22 | {error.stack &&
24 | {error.stack}}
23 |
25 |
41 |
26 | To help us debug the issue, please report on github and include any
27 | relevant stack traces or print screens.
28 |
29 |
30 |
33 |
34 |
40 |
54 | handleQuickFilterToggle('query')}
57 | active={operationFilters.query}
58 | activeColor={theme.operationColors.query.bg}
59 | >
60 | Queries
61 |
62 | handleQuickFilterToggle('mutation')}
65 | active={operationFilters.mutation}
66 | activeColor={theme.operationColors.mutation.bg}
67 | >
68 | Mutations
69 |
70 | handleQuickFilterToggle('persisted')}
73 | active={operationFilters.persisted}
74 | activeColor={theme.operationColors.persisted.bg}
75 | >
76 | Persisted
77 |
78 | handleQuickFilterToggle('subscription')}
81 | active={operationFilters.subscription}
82 | activeColor={theme.operationColors.subscription.bg}
83 | >
84 | Subscriptions
85 |
86 |
87 |
60 | {marginLeftPercentage > 0 && (
61 |
88 | )
89 | }
90 |
91 | const getBackgroundColors = (type: string = "") => {
92 | switch (type.toUpperCase()) {
93 | case "GREEN":
94 | case "TOTAL":
95 | return "bg-green-400 dark:bg-green-700"
96 | case "PURPLE":
97 | case "QUERY":
98 | case "MUTATION":
99 | case "SUBSCRIPTION":
100 | return "bg-purple-400 dark:bg-purple-700"
101 | default:
102 | case "INDIGO":
103 | return "bg-indigo-400 dark:bg-indigo-700"
104 | }
105 | }
106 |
--------------------------------------------------------------------------------
/src/mocks/mock-chrome.ts:
--------------------------------------------------------------------------------
1 | import { DeepPartial } from 'utility-types'
2 | import EventEmitter from 'eventemitter3'
3 | import { IMockRequest, mockRequests } from '../mocks/mock-requests'
4 |
5 | let mockStorage = {}
6 |
7 | const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
8 |
9 | // Configure an event to add more mock requests
10 | const eventEmitter = new EventEmitter<{
11 | onBeforeRequest: { data: IMockRequest['webRequestBodyDetails'] }
12 | onBeforeSendHeaders: { data: IMockRequest['webRequestHeaderDetails'] }
13 | onRequestFinished: { data: IMockRequest['networkRequest'] }
14 | }>()
15 | const handleKeydown = (e: KeyboardEvent) => {
16 | if (e.code === 'Digit1') {
17 | mockRequests.forEach(async (request) => {
18 | eventEmitter.emit('onBeforeRequest', {
19 | data: request.webRequestBodyDetails,
20 | })
21 | await wait(100)
22 | eventEmitter.emit('onBeforeSendHeaders', {
23 | data: request.webRequestHeaderDetails,
24 | })
25 | await wait(100)
26 | eventEmitter.emit('onRequestFinished', { data: request.networkRequest })
27 | })
28 | }
29 | }
30 | window.addEventListener('keydown', handleKeydown)
31 |
32 | const mockedChrome: DeepPartial
65 | {showBeforeDuration && {name || ""}}
66 |
67 | {showAllBeforeDuration && (
68 | {nsToMs(duration)} ms
69 | )}
70 |
71 | )}
72 |
73 |
77 |
87 |
78 | {!showBeforeDuration && {name || ""}}
79 |
80 | {showAllBeforeDuration ? (
81 | <>
82 | ) : (
83 | {nsToMs(duration)} ms
84 | )}
85 |
86 |
25 | {children}
26 |
27 | )
28 | }
29 | )
30 |
31 | const useVisibilityObserver = (
32 | refs: React.MutableRefObject<(HTMLDivElement | null)[]>
33 | ) => {
34 | const [itemsOnScreen, setItemOnScreen] = useState
75 | {items.map((item, index) => {
76 | const isOnScreen = itemsOnScreen[index] ?? true
77 |
78 | return (
79 | - (itemRefs.current[index] = el)}
82 | isVisible={isOnScreen}
83 | >
84 | {item}
85 |
86 | )
87 | })}
88 |
89 | {isAnyItemOffScreen && (
90 |
108 | )
109 | }
110 |
--------------------------------------------------------------------------------
/src/components/LocalSearchInput/index.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useState } from 'react'
2 | import { Textfield } from '../Textfield'
3 | import { SearchIcon } from '../Icons/SearchIcon'
4 | import { CloseIcon } from '../Icons/CloseIcon'
5 | import { ChevronIcon } from '../Icons/ChevronIcon'
6 |
7 | interface ILocalSearchInputProps {
8 | searchQuery: string
9 | onSearchChange: (query: string) => void
10 | matchCount: number
11 | currentIndex: number
12 | onNext: () => void
13 | onPrevious: () => void
14 | onClose: () => void
15 | }
16 |
17 | export const LocalSearchInput = (props: ILocalSearchInputProps) => {
18 | const {
19 | searchQuery,
20 | onSearchChange,
21 | matchCount,
22 | currentIndex,
23 | onNext,
24 | onPrevious,
25 | onClose,
26 | } = props
27 | const [localValue, setLocalValue] = useState(searchQuery)
28 |
29 | useEffect(() => {
30 | setLocalValue(searchQuery)
31 | }, [searchQuery])
32 |
33 | const handleChange = (event: React.ChangeEvent
91 |
106 | )}
107 |
92 |
105 |
94 | {items.map((item, index) => {
95 | const isOnScreen = itemsOnScreen[index]
96 | if (isOnScreen) {
97 | return null
98 | }
99 |
100 | return - {item}
101 | })}
102 |
103 |
104 |
63 |
105 | )
106 | }
107 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "graphql-network-inspector",
3 | "version": "2.24.0",
4 | "private": true,
5 | "scripts": {
6 | "start": "craco start",
7 | "build": "REACT_APP_VERSION=$npm_package_version INLINE_RUNTIME_CHUNK=false craco build",
8 | "bundle": "yarn bundle:chrome && yarn bundle:firefox",
9 | "bundle:chrome": "yarn build && node ./scripts/set-chrome-settings.js && bestzip build-chrome.zip build/*",
10 | "bundle:firefox": "yarn build && node ./scripts/set-firefox-settings.js && cd build && bestzip ../build-firefox.zip *",
11 | "postbuild": "node ./scripts/set-manifest-version.js && NODE_ENV=production node ./scripts/set-manifest-content-script.js",
12 | "test": "craco test",
13 | "eject": "react-scripts eject",
14 | "lint": "eslint --max-warnings=0 src/**/*.* public/**/*.js",
15 | "check-types": "tsc --noEmit"
16 | },
17 | "dependencies": {
18 | "@headlessui/react": "^1.6.0",
19 | "@notdutzi/react-json-view": "^1.21.8",
20 | "@testing-library/react-hooks": "^8.0.1",
21 | "classnames": "^2.3.1",
22 | "copy-to-clipboard": "^3.3.1",
23 | "dotenv": "^16.3.1",
24 | "eventemitter3": "^5.0.1",
25 | "graphql": "^16.0.1",
26 | "graphql-tag": "^2.11.0",
27 | "highlight.js": "^11.5.0",
28 | "mark.js": "^8.11.1",
29 | "mergeby": "^2.0.1",
30 | "pretty-bytes": "^5.6.0",
31 | "pretty-ms": "^7.0.1",
32 | "react": "^17.0.2",
33 | "react-dom": "^17.0.2",
34 | "react-split-pane": "^0.1.92",
35 | "react-table": "^7.5.0",
36 | "react-virtual": "^2.10.4",
37 | "regex-parser": "^2.2.11",
38 | "tailwind-merge": "^1.10.0",
39 | "ts-debounce": "^4.0.0",
40 | "uniqid": "^5.4.0",
41 | "uuid": "^8.3.0"
42 | },
43 | "devDependencies": {
44 | "@craco/craco": "^6.4.3",
45 | "@tailwindcss/forms": "^0.5.0",
46 | "@testing-library/jest-dom": "^5.11.4",
47 | "@testing-library/react": "^12.1.2",
48 | "@types/chrome": "^0.0.262",
49 | "@types/dedent": "^0.7.0",
50 | "@types/graphql": "^14.5.0",
51 | "@types/jest": "^26.0.24",
52 | "@types/mark.js": "^8.11.7",
53 | "@types/prettier": "^2.6.0",
54 | "@types/react": "^17.0.35",
55 | "@types/react-dom": "^17.0.11",
56 | "@types/react-table": "^7.0.22",
57 | "@types/uniqid": "^5.3.2",
58 | "@types/uuid": "^8.3.0",
59 | "@typescript-eslint/eslint-plugin": "^7.6.0",
60 | "@typescript-eslint/parser": "^7.6.0",
61 | "autoprefixer": "^9",
62 | "bestzip": "^2.2.0",
63 | "copy-webpack-plugin": "^6.4.1",
64 | "dedent": "^0.7.0",
65 | "eslint": "^8.57.0",
66 | "eslint-plugin-react-hooks": "^4.6.0",
67 | "postcss": "^8.4.12",
68 | "prettier": "^2.6.2",
69 | "react-scripts": "^5.0.0",
70 | "tailwindcss": "^3.0.23",
71 | "typescript": "^4.0.3",
72 | "util": "^0.12.5",
73 | "utility-types": "^3.11.0",
74 | "web-streams-polyfill": "^4.0.0"
75 | },
76 | "_resolutions_comment_": "https://stackoverflow.com/a/71855781/2573621",
77 | "resolutions": {
78 | "@types/react": "17.0.35",
79 | "@types/react-dom": "17.0.11"
80 | },
81 | "eslintConfig": {
82 | "extends": "react-app"
83 | },
84 | "browserslist": {
85 | "production": [
86 | ">0.2%",
87 | "not dead",
88 | "not op_mini all"
89 | ],
90 | "development": [
91 | "last 1 chrome version",
92 | "last 1 firefox version",
93 | "last 1 safari version"
94 | ]
95 | },
96 | "jest": {
97 | "moduleNameMapper": {
98 | "^@/(.*)$": "
76 | {searchQuery && displayCount}
77 |
78 |
87 |
96 |
104 |
42 |
45 | )
46 | }
47 |
48 | const SearchResultEntry = (props: ISearchResultEntryProps) => {
49 | const { searchQuery, searchResult, onResultClick, index } = props
50 | const { matches, networkRequest } = searchResult
51 | const { operationName } = networkRequest.request.primaryOperation
52 |
53 | return (
54 | {title}
43 | {children}
44 |
55 | onResultClick(NetworkTabs.HEADER)}
60 | >
61 |
66 | )}
67 | {matches.request && (
68 | onResultClick(NetworkTabs.REQUEST)}
71 | >
72 |
77 | )}
78 | {matches.response && (
79 | onResultClick(NetworkTabs.RESPONSE_RAW)}
82 | >
83 |
88 | )}
89 |
90 | )
91 | }
92 |
93 | export const SearchResults = (props: ISearchResultsProps) => {
94 | const { searchQuery, searchResults, onResultClick } = props
95 | return (
96 | {operationName}
56 | {matches.headers && (
57 |
97 | {searchResults.map((searchResult, index) => (
98 | {
104 | onResultClick(searchResult, searchResultType)
105 | }}
106 | />
107 | ))}
108 |
109 | )
110 | }
111 |
--------------------------------------------------------------------------------
/src/containers/NetworkPanel/NetworkDetails/index.test.tsx:
--------------------------------------------------------------------------------
1 | import { render } from "@testing-library/react"
2 | import { TracingView } from "./TracingView"
3 | import * as safeJson from "@/helpers/safeJson"
4 |
5 | jest.mock("@/hooks/useHighlight", () => ({
6 | useHighlight: () => ({
7 | markup: "hi
",
8 | loading: false,
9 | }),
10 | }))
11 |
12 | describe("NetworkDetails - TracingView", () => {
13 | it("show 'No tracing' message when the tracing object is null", async () => {
14 | const noTracingResponse = safeJson.stringify({
15 | data: {
16 | signedInUser: {
17 | id: "1",
18 | firstName: "Test",
19 | lastName: "User",
20 | },
21 | },
22 | })
23 |
24 | const { queryByText } = render(
28 |
31 | )
32 | }
33 |
34 | const CodeTooLargeMessage = () => {
35 | return (
36 | Formatting...
30 |
37 | The response payload is too large to display.
38 |
39 | )
40 | }
41 |
42 | const CodeRenderer = (props: ICodeViewProps) => {
43 | const { text, language, autoFormat, searchQuery, onSearchResults } = props
44 | const formattedText = useFormattedCode(text, language, autoFormat)
45 |
46 | const { markup: jsonMarkup, loading } = useHighlight(language, formattedText)
47 |
48 | // TODO
49 | // When mark returns results. Show a component to jump to the next/previous
50 | // When the component renders also jump to the first result.
51 |
52 | // Use local search if searchQuery is provided, otherwise use global search
53 | const globalRef = useMarkSearch(jsonMarkup)
54 | const localMarkResult = useLocalMark(searchQuery || '', jsonMarkup)
55 |
56 | const ref = searchQuery ? localMarkResult.ref : globalRef
57 |
58 | // Notify parent of search results if using local search
59 | useEffect(() => {
60 | if (searchQuery && onSearchResults) {
61 | onSearchResults({
62 | matchCount: localMarkResult.matchCount,
63 | currentIndex: localMarkResult.currentIndex,
64 | goToNext: localMarkResult.goToNext,
65 | goToPrevious: localMarkResult.goToPrevious,
66 | })
67 | }
68 | }, [
69 | searchQuery,
70 | onSearchResults,
71 | localMarkResult.matchCount,
72 | localMarkResult.currentIndex,
73 | localMarkResult.goToNext,
74 | localMarkResult.goToPrevious,
75 | ])
76 |
77 | return (
78 |
80 |
86 |
87 | )
88 | }
89 |
90 | export const CodeView = (props: ICodeViewProps) => {
91 | const {
92 | text,
93 | language,
94 | autoFormat,
95 | className,
96 | searchQuery,
97 | onSearchResults,
98 | } = props
99 | const size = useByteSize(text.length, { unit: 'mb' })
100 |
101 | return (
102 |
103 | {size > config.maxUsableResponseSizeMb ? (
104 |
115 | )
116 | }
117 |
--------------------------------------------------------------------------------
/src/containers/NetworkPanel/NetworkTable/index.test.tsx:
--------------------------------------------------------------------------------
1 | import { NetworkTable, INetworkTableDataRow } from "./index"
2 | import { fireEvent, within } from "@testing-library/react"
3 | import { DeepPartial } from "utility-types"
4 | import { render } from "../../../test-utils"
5 |
6 | const request: DeepPartial
2 | 
5 |
6 | 
7 |
8 |
9 |
10 |
11 |
12 | 
13 |
14 | A platform agnostic network inspector specifically built for GraphQL. Clearly see individual GraphQL requests including support for query batching. [View the full docs](https://www.overstacked.io/docs/graphql-network-inspector)
15 |
16 | The plugin is available for both Chrome and Firefox:
17 |
18 | 1. [Chrome Webstore](https://chrome.google.com/webstore/detail/graphql-network-inspector/ndlbedplllcgconngcnfmkadhokfaaln)
19 |
20 | 2. [Firefox Addons](https://addons.mozilla.org/en-US/firefox/addon/graphql-network-inspector)
21 |
22 | ## Features
23 |
24 | We provide a number of productivity features to help you debug and understand your GraphQL requests:
25 |
26 | - Automatically parse and display requests as GraphQL queries.
27 | - Support for query batching, displaying each query individually.
28 | - Export requests to re-run and share with https://www.graphdev.app
29 |
30 | Some shortcuts you may find useful:
31 |
32 | - Click any header to copy to clipboard.
33 | - Double click any JWT token header to both decode and copy to clipboard.
34 | - Press `Cmd/Ctrl + F` to open the full search panel.
35 |
36 | ## Issue with extension not loading
37 |
38 | Some users have raised issues with the extension not loading. This may be due to custom settings in your devtools or conflicts with other extensions. If you are experiencing this issue please try the following:
39 |
40 | 1. Open the devtools and navigate to the settings (cog icon in the top right).
41 | 2. Scroll down to the bottom of the "Preferences" tab and click "Restore defaults and reload".
42 |
43 | If the issue persists please raise an issue with the details of your browser and we'll try to help.
44 |
45 | ## Local Development
46 |
47 | Install dependencies:
48 |
49 | ```bash
50 | yarn
51 | ```
52 |
53 | Run the development server:
54 |
55 | ```bash
56 | yarn start
57 | ```
58 |
59 | This will also cache files in the `build` so you can load the directory as an unpacked extension in your browser. Changes will be loaded automatically, however you often have to close and reopen devtools.
60 |
61 | ## Contribute
62 |
63 | PRs are welcome! The best way to do this is to first fork the repository, create a branch and open a pull request back to this repository.
64 |
65 | If you want to add a large feature please first raise an issue to discuss. This avoids wasted effort.
66 |
67 | ## Sponsors
68 |
69 | GraphQL Network Inspector is proudly sponsored by:
70 |
71 | - The Guild https://the-guild.dev
72 |
73 | ## License
74 |
75 | The MIT License (MIT)
76 |
77 | Copyright (c) 2023 GraphQL Network Inspector authors
78 |
79 | Permission is hereby granted, free of charge, to any person obtaining a copy
80 | of this software and associated documentation files (the "Software"), to deal
81 | in the Software without restriction, including without limitation the rights
82 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
83 | copies of the Software, and to permit persons to whom the Software is
84 | furnished to do so, subject to the following conditions:
85 |
86 | The above copyright notice and this permission notice shall be included in all
87 | copies or substantial portions of the Software.
88 |
89 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
90 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
91 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
92 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
93 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
94 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
95 | SOFTWARE.
96 |
--------------------------------------------------------------------------------
/src/containers/NetworkPanel/NetworkDetails/index.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react'
2 | import { Tabs } from '@/components/Tabs'
3 | import { ICompleteNetworkRequest } from '@/helpers/networkHelpers'
4 | import { HeaderView } from '../HeaderView'
5 | import { RequestView, RequestViewFooter } from './RequestView'
6 | import { ResponseView } from './ResponseView'
7 | import { TracingView } from './TracingView'
8 | import { ResponseRawView } from './ResponseRawView'
9 | import { useNetworkTabs } from '@/hooks/useNetworkTabs'
10 | import { CloseButton } from '@/components/CloseButton'
11 | import { useApolloTracing } from '@/hooks/useApolloTracing'
12 | import { useToggle } from '@/hooks/useToggle'
13 | import { useShareMessage } from '../../../hooks/useShareMessage'
14 |
15 | export interface INetworkDetailsProps {
16 | data: ICompleteNetworkRequest
17 | onClose: () => void
18 | }
19 |
20 | export const NetworkDetails = (props: INetworkDetailsProps) => {
21 | const { data, onClose } = props
22 | const { activeTab, setActiveTab } = useNetworkTabs()
23 | const requestHeaders = data.request.headers
24 | const responseHeaders = data.response?.headers || []
25 | const requestBody = data.request.body
26 | const responseBody = data.response?.body
27 | const responseChunks = data.response?.chunks
28 | const isStreaming = data.response?.isStreaming
29 | const responseCollapsedCount = requestBody.length > 1 ? 3 : 2
30 | const tracing = useApolloTracing(responseBody)
31 | const [autoFormat, toggleAutoFormat] = useToggle()
32 | const { shareNetworkRequest } = useShareMessage()
33 | const operation = data.request.primaryOperation.operation
34 | const isShareable = useMemo(
35 | () => ['query', 'mutation'].includes(operation),
36 | [operation]
37 | )
38 |
39 | const handleShare = () => {
40 | shareNetworkRequest(data)
41 | }
42 |
43 | return (
44 | GraphQL Network Inspector
3 |A better network inspector for viewing and debugging GraphQL requests.
4 |
5 |
6 |
7 |
8 | 9 |
10 |
104 |
116 | {isSearchOpen && (
117 |
105 | {onShare &&
108 |
118 |
128 | )}
129 |
130 | )
131 | }
132 |
--------------------------------------------------------------------------------
/src/components/Table/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | useTable,
3 | HeaderGroup,
4 | TableInstance,
5 | TableOptions,
6 | Row,
7 | } from "react-table"
8 | import { useMaintainScrollBottom } from "../../hooks/useMaintainScrollBottom"
9 |
10 | type RowId = string | number
11 |
12 | export type ITableProps
101 |
103 | )
104 | }
105 |
106 | return null
107 | }
108 |
109 | export const Table = {message}
102 |
131 |
136 |
147 |
149 | )
150 | }
151 |
--------------------------------------------------------------------------------
/src/containers/NetworkPanel/NetworkDetails/ResponseView.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo, useState } from "react"
2 | import * as safeJson from "../../../helpers/safeJson"
3 | import { JsonView } from "@/components/CodeView"
4 | import { CopyButton } from "../../../components/CopyButton"
5 | import { ShareButton } from "../../../components/ShareButton"
6 | import { IResponseChunk } from "@/helpers/networkHelpers"
7 | import { mergeResponseChunks, formatIncrementalResponseTimeline } from "@/helpers/incrementalResponseHelpers"
8 |
9 | interface IResponseViewProps {
10 | response?: string
11 | collapsed?: number
12 | onShare?: () => void
13 | chunks?: IResponseChunk[]
14 | isStreaming?: boolean
15 | }
16 |
17 | export const ResponseView = (props: IResponseViewProps) => {
18 | const { response, collapsed, onShare, chunks, isStreaming } = props
19 | const [viewMode, setViewMode] = useState<'merged' | 'timeline'>('merged')
20 |
21 | const { formattedJson, parsedResponse, hasIncrementalData } = useMemo(() => {
22 | // If we have chunks, merge them
23 | if (chunks && chunks.length > 0) {
24 | const { mergedData, hasIncrementalData } = mergeResponseChunks(chunks)
25 |
26 | // Remove hasNext from the display (it's internal to incremental delivery)
27 | const displayData = mergedData ? { ...mergedData } : {}
28 | if (displayData.hasNext !== undefined) {
29 | delete displayData.hasNext
30 | }
31 |
32 | return {
33 | formattedJson: safeJson.stringify(displayData, undefined, 2),
34 | parsedResponse: displayData,
35 | hasIncrementalData,
36 | }
37 | }
38 |
39 | // Otherwise, use the single response
40 | const parsedResponse = safeJson.parse(response) || {}
41 | return {
42 | formattedJson: safeJson.stringify(parsedResponse, undefined, 2),
43 | parsedResponse,
44 | hasIncrementalData: false,
45 | }
46 | }, [response, chunks])
47 |
48 | const timeline = useMemo(() => {
49 | if (chunks && chunks.length > 0) {
50 | return formatIncrementalResponseTimeline(chunks)
51 | }
52 | return []
53 | }, [chunks])
54 |
55 | return (
56 |
57 |
114 | )
115 | }
116 |
--------------------------------------------------------------------------------
/src/containers/App/Search.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, fireEvent, within, waitFor } from '@testing-library/react'
2 | import { App } from './index'
3 |
4 | jest.mock('@/hooks/useHighlight', () => ({
5 | useHighlight: () => ({
6 | markup: '
58 | {hasIncrementalData && (
59 | <>
60 |
70 |
80 |
81 | )}
82 | {onShare &&
85 |
86 | {isStreaming && (
87 |
88 | Incremental Response (@defer/@stream) - {chunks?.length || 0} chunk(s)
89 |
90 | )}
91 |
92 | {viewMode === 'merged' ? (
93 |
96 | {timeline.map((item, index) => (
97 |
112 | )}
113 |
98 |
110 | ))}
111 |
99 |
100 | Chunk {item.chunkIndex + 1}
101 | {item.isIncremental && (
102 |
103 | Incremental
104 |
105 | )}
106 |
107 |
108 | hi
',
7 | loading: false,
8 | }),
9 | }))
10 |
11 | describe('App - Search', () => {
12 | it('search panel is closed by default', async () => {
13 | const { queryByTestId, getByText } = render(