From 0115ab31139cf65f70898bf8b840c6fdddd1da2f Mon Sep 17 00:00:00 2001
From: Michael Judd <michaelmurrayjudd@gmail.com>
Date: Thu, 23 Mar 2023 05:38:15 -0700
Subject: [PATCH] feat(network-plugin): add support for optional "gql operation
 name" in data table (#4625)

Summary:
Using this network tab explorer at a company that works in graphql is very difficult because everything comes from the same HTTP route. I've added support for an optional (not visible by default) "GraphQL operation name" field for people who want to use that.

## Changelog
Adds a new optional column in the desktop network plugin called "GraphQL operation name" which will display the operation name if its available.

Pull Request resolved: https://github.com/facebook/flipper/pull/4625

Test Plan:
I didn't see much in the way of component testing for this behaviour. Looking for some guidance here. I'm happy to add some if we think that makes sense

https://user-images.githubusercontent.com/17029928/227016610-b6da1ff3-4a7e-45c6-88da-ceaa6fad53ad.mp4

Reviewed By: ivanmisuno

Differential Revision: D44331605

Pulled By: aigoncharov

fbshipit-source-id: fe7a7812541c235871ae8a71e5461ea2adbd2560
---
 desktop/plugins/public/network/index.tsx | 8 ++++++++
 desktop/plugins/public/network/utils.tsx | 9 +++++++++
 2 files changed, 17 insertions(+)

diff --git a/desktop/plugins/public/network/index.tsx b/desktop/plugins/public/network/index.tsx
index b1239df2e..0c9f6590b 100644
--- a/desktop/plugins/public/network/index.tsx
+++ b/desktop/plugins/public/network/index.tsx
@@ -55,6 +55,7 @@ import {
   formatDuration,
   requestsToText,
   decodeBody,
+  formatOperationName,
 } from './utils';
 import RequestDetails from './RequestDetails';
 import {assembleChunksIfResponseIsComplete} from './chunks';
@@ -661,6 +662,13 @@ const baseColumns: DataTableColumn<Request>[] = [
     width: 120,
     visible: false,
   },
+  {
+    key: 'requestData',
+    title: 'GraphQL operation name',
+    width: 120,
+    visible: false,
+    formatters: formatOperationName,
+  },
   {
     key: 'domain',
   },
diff --git a/desktop/plugins/public/network/utils.tsx b/desktop/plugins/public/network/utils.tsx
index c3638becc..b5143f459 100644
--- a/desktop/plugins/public/network/utils.tsx
+++ b/desktop/plugins/public/network/utils.tsx
@@ -264,6 +264,15 @@ export function formatStatus(status: number | undefined) {
   return status ? '' + status : '';
 }
 
+export function formatOperationName(requestData: string): string {
+  try {
+    const parsedData = JSON.parse(requestData);
+    return parsedData?.operationName;
+  } catch (_err) {
+    return '';
+  }
+}
+
 export function requestsToText(requests: Request[]): string {
   const request = requests[0];
   if (!request || !request.url) {