RequestAlert

Summary: Let's infer what type of payload we are looking at and suggest better plugins we can

Differential Revision: D65296211

fbshipit-source-id: 7699160987b0f77de77cc7b19328750fdf724f22

desktop/plugins/public/network/RequestDetails.tsx

@@ -36,6 +36,7 @@ import {ProtobufDefinitionsRepository} from './ProtobufDefinitionsRepository';
 import {KeyValueItem, KeyValueTable} from './KeyValueTable';
 import {CopyOutlined} from '@ant-design/icons';
 import {stringify} from 'lossless-json';
+import {RequestAlert} from './fb-stubs/RequestAlert';
 
 const {Text} = Typography;
 
@@ -75,6 +76,8 @@ export default class RequestDetails extends Component<RequestDetailsProps> {
 
     return (
       <>
+        <RequestAlert request={request} />
+
         <Panel key="request" title={'Request'}>
           <KeyValueTable items={this.urlColumns(url)} />
         </Panel>
@@ -553,7 +556,7 @@ class GraphQLBatchFormatter {
   }
 }
 
-class GraphQLFormatter {
+export class GraphQLFormatter {
   parsedServerTimeForFirstFlush(data: any) {
     const firstResponse =
       Array.isArray(data) && data.length > 0 ? data[0] : data;
@@ -579,19 +582,24 @@ class GraphQLFormatter {
       </Text>
     );
   }
+  static requestToObject(request: RequestWithData) {
+    const decoded = request.requestData;
+    if (!decoded) {
+      return undefined;
+    }
+    const data = queryToObj(bodyAsString(decoded));
+    if (typeof data.variables === 'string') {
+      data.variables = JSON.parse(data.variables);
+    }
+    if (typeof data.query_params === 'string') {
+      data.query_params = JSON.parse(data.query_params);
+    }
+
+    return data;
+  }
   formatRequest(request: RequestWithData) {
     if (request.url.indexOf('graphql') > 0) {
-      const decoded = request.requestData;
-      if (!decoded) {
-        return undefined;
-      }
-      const data = queryToObj(bodyAsString(decoded));
-      if (typeof data.variables === 'string') {
-        data.variables = JSON.parse(data.variables);
-      }
-      if (typeof data.query_params === 'string') {
-        data.query_params = JSON.parse(data.query_params);
-      }
+      const data = GraphQLFormatter.requestToObject(request);
       return <DataInspector expandRoot data={data} />;
     }
   }

desktop/plugins/public/network/fb-stubs/RequestAlert.tsx

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {RequestWithData} from '../types';
+
+export const RequestAlert = (_props: {request: RequestWithData}) => {
+  return null;
+};

desktop/plugins/public/network/index.tsx

@@ -437,6 +437,7 @@ export function plugin(client: PluginClient<Events, Methods>) {
 
   return {
     db,
+    client,
     columns,
     routes,
     nextRouteId,