From f9768607b02d11c56347db0301b12910e23f4b0a Mon Sep 17 00:00:00 2001 From: Yuriy Hoy Date: Fri, 8 Nov 2024 10:20:06 -0500 Subject: [PATCH 1/3] feat: show operation name for graphql requests --- .../timelineCommands/ApiResponseCommand/index.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/lib/reactotron-core-ui/src/timelineCommands/ApiResponseCommand/index.tsx b/lib/reactotron-core-ui/src/timelineCommands/ApiResponseCommand/index.tsx index 709e6a08d..fab1d1897 100644 --- a/lib/reactotron-core-ui/src/timelineCommands/ApiResponseCommand/index.tsx +++ b/lib/reactotron-core-ui/src/timelineCommands/ApiResponseCommand/index.tsx @@ -124,6 +124,15 @@ function buildToolbar(commandPayload, copyToClipboard: (text: string) => void) { return toolbarItems } +export function formatOperationName(requestData: string): string { + try { + const parsedData = JSON.parse(requestData) + return parsedData?.operationName?.toString() || "" + } catch (_err) { + return "" + } +} + const ApiResponseCommand: FunctionComponent = ({ command, copyToClipboard, @@ -137,7 +146,9 @@ const ApiResponseCommand: FunctionComponent = ({ const { duration, request, response } = payload const cleanedUrl = request.url.replace(/^http(s):\/\/[^/]+/i, "").replace(/\?.*$/i, "") - const preview = `${(request.method || "").toUpperCase()} ${cleanedUrl}` + const operationName = formatOperationName(request.data) + + const preview = `${(request.method || "").toUpperCase()} ${cleanedUrl} ${operationName}` const summary = { "Status Code": response.status, From a15ff0eac29ebfea52f93e11dbdeb24f26fdda33 Mon Sep 17 00:00:00 2001 From: Yuriy Hoy Date: Fri, 8 Nov 2024 10:31:15 -0500 Subject: [PATCH 2/3] feat: allow filtering commands by request data --- .../filterCommands/filterCommands.test.ts | 62 +++++++++++++++++++ .../src/utils/filterCommands/index.ts | 3 +- 2 files changed, 64 insertions(+), 1 deletion(-) diff --git a/lib/reactotron-core-ui/src/utils/filterCommands/filterCommands.test.ts b/lib/reactotron-core-ui/src/utils/filterCommands/filterCommands.test.ts index 08bcca1cd..f2026d903 100644 --- a/lib/reactotron-core-ui/src/utils/filterCommands/filterCommands.test.ts +++ b/lib/reactotron-core-ui/src/utils/filterCommands/filterCommands.test.ts @@ -12,6 +12,14 @@ const TEST_COMMANDS = [ { type: "ADUMMYOBJ", payload: { request: { url: "SEARCHURL" } } }, { type: "log", payload: { debug: "LOGDEBUG" } }, { type: "client.intro", payload: { connection: "SEARCHCONNECTION" } }, + { + type: "ADUMMYOBJ", + payload: { + request: { + data: '{"operationName":"SEARCHDATA","variables":{"testing":{"nested":"thing"}},"query":"query LaunchList {\\n launches {\\n id\\n }\\n}\\n"}', + }, + }, + }, ] const TESTS = [ @@ -51,6 +59,20 @@ const TESTS = [ search: "SEARCHURL", result: [{ type: "ADUMMYOBJ", payload: { request: { url: "SEARCHURL" } } }], }, + { + name: "payload.request.data", + search: "SEARCHDATA", + result: [ + { + type: "ADUMMYOBJ", + payload: { + request: { + data: '{"operationName":"SEARCHDATA","variables":{"testing":{"nested":"thing"}},"query":"query LaunchList {\\n launches {\\n id\\n }\\n}\\n"}', + }, + }, + }, + ], + }, { name: "log => debug", search: "debug", @@ -82,6 +104,14 @@ const TESTS = [ { type: "ADUMMYOBJ", payload: { triggerType: "SEARCHTRIGGERTYPE" } }, { type: "ADUMMYOBJ", payload: { description: "SEARCHDESCRIPTION" } }, { type: "ADUMMYOBJ", payload: { request: { url: "SEARCHURL" } } }, + { + type: "ADUMMYOBJ", + payload: { + request: { + data: '{"operationName":"SEARCHDATA","variables":{"testing":{"nested":"thing"}},"query":"query LaunchList {\\n launches {\\n id\\n }\\n}\\n"}', + }, + }, + }, ], }, { @@ -96,6 +126,14 @@ const TESTS = [ { type: "ADUMMYOBJ", payload: { triggerType: "SEARCHTRIGGERTYPE" } }, { type: "ADUMMYOBJ", payload: { description: "SEARCHDESCRIPTION" } }, { type: "ADUMMYOBJ", payload: { request: { url: "SEARCHURL" } } }, + { + type: "ADUMMYOBJ", + payload: { + request: { + data: '{"operationName":"SEARCHDATA","variables":{"testing":{"nested":"thing"}},"query":"query LaunchList {\\n launches {\\n id\\n }\\n}\\n"}', + }, + }, + }, ], }, { @@ -104,6 +142,14 @@ const TESTS = [ result: [ { type: "ADUMMYOBJ", payload: { message: "SEARCHMESSAGE" } }, { type: "ADUMMYOBJ", payload: { name: "SEARCHNAME" } }, + { + type: "ADUMMYOBJ", + payload: { + request: { + data: '{"operationName":"SEARCHDATA","variables":{"testing":{"nested":"thing"}},"query":"query LaunchList {\\n launches {\\n id\\n }\\n}\\n"}', + }, + }, + }, ], }, { @@ -112,6 +158,14 @@ const TESTS = [ result: [ { type: "ADUMMYOBJ", payload: { message: "SEARCHMESSAGE" } }, { type: "ADUMMYOBJ", payload: { name: "SEARCHNAME" } }, + { + type: "ADUMMYOBJ", + payload: { + request: { + data: '{"operationName":"SEARCHDATA","variables":{"testing":{"nested":"thing"}},"query":"query LaunchList {\\n launches {\\n id\\n }\\n}\\n"}', + }, + }, + }, ], }, { @@ -125,6 +179,14 @@ const TESTS = [ { type: "ADUMMYOBJ", payload: { triggerType: "SEARCHTRIGGERTYPE" } }, { type: "ADUMMYOBJ", payload: { description: "SEARCHDESCRIPTION" } }, { type: "ADUMMYOBJ", payload: { request: { url: "SEARCHURL" } } }, + { + type: "ADUMMYOBJ", + payload: { + request: { + data: '{"operationName":"SEARCHDATA","variables":{"testing":{"nested":"thing"}},"query":"query LaunchList {\\n launches {\\n id\\n }\\n}\\n"}', + }, + }, + }, ], }, ] diff --git a/lib/reactotron-core-ui/src/utils/filterCommands/index.ts b/lib/reactotron-core-ui/src/utils/filterCommands/index.ts index 004d54ef8..70880f687 100644 --- a/lib/reactotron-core-ui/src/utils/filterCommands/index.ts +++ b/lib/reactotron-core-ui/src/utils/filterCommands/index.ts @@ -24,6 +24,7 @@ const COMMON_MATCHING_PATHS = [ path("payload", "triggerType"), path("payload", "description"), path("payload", "request", "url"), + path("payload", "request", "data"), ] export function filterSearch(commands: any[], search: string) { @@ -34,7 +35,7 @@ export function filterSearch(commands: any[], search: string) { const searchRegex = new RegExp(trimmedSearch.replace(/\s/, "."), "i") const matching = (value: string) => { - if(!value) { + if (!value) { return false } From 82410d5a43c214afd8b942761cabce0e8480e6a0 Mon Sep 17 00:00:00 2001 From: Yuriy Hoy Date: Fri, 20 Dec 2024 10:00:48 -0500 Subject: [PATCH 3/3] update formatting logic for request preview --- .../src/timelineCommands/ApiResponseCommand/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/reactotron-core-ui/src/timelineCommands/ApiResponseCommand/index.tsx b/lib/reactotron-core-ui/src/timelineCommands/ApiResponseCommand/index.tsx index fab1d1897..6ff7a28f9 100644 --- a/lib/reactotron-core-ui/src/timelineCommands/ApiResponseCommand/index.tsx +++ b/lib/reactotron-core-ui/src/timelineCommands/ApiResponseCommand/index.tsx @@ -148,7 +148,9 @@ const ApiResponseCommand: FunctionComponent = ({ const cleanedUrl = request.url.replace(/^http(s):\/\/[^/]+/i, "").replace(/\?.*$/i, "") const operationName = formatOperationName(request.data) - const preview = `${(request.method || "").toUpperCase()} ${cleanedUrl} ${operationName}` + const preview = [(request.method || "").toUpperCase(), cleanedUrl, operationName] + .filter(Boolean) + .join(" ") const summary = { "Status Code": response.status,