Ensure grpc+json is handled as JSON, not protobuf

Author: pimterry

src/model/events/body-formatting.ts

@@ -142,11 +142,11 @@ export const Formatters: { [key in ViewableContentType]: Formatter } = {
         isEditApplicable: false,
         render: buildAsyncRenderer('protobuf')
     },
-    grpc: {
-        language: 'grpc',
-        cacheKey: Symbol('grpc'),
+    'grpc-proto': {
+        language: 'protobuf',
+        cacheKey: Symbol('grpc-proto'),
         isEditApplicable: false,
-        render: buildAsyncRenderer('grpc')
+        render: buildAsyncRenderer('grpc-proto')
     },
     'url-encoded': {
         layout: 'scrollable',

src/model/events/content-types.ts

@@ -8,18 +8,32 @@ import {
 // Simplify a mime type as much as we can, without throwing any errors
 export const getBaseContentType = (mimeType: string | undefined) => {
     const typeWithoutParams = (mimeType || '').split(';')[0];
-    const [type, combinedSubTypes] = typeWithoutParams.split(/\/(.+)/);
 
+    let [type, combinedSubTypes] = typeWithoutParams.split(/\/(.+)/);
     if (!combinedSubTypes) return type;
 
-    // A list of types from most specific to most generic: [svg, xml] for image/svg+xml
-    const subTypes = combinedSubTypes.split('+');
+    if (DEFAULT_SUBTYPE[combinedSubTypes]) {
+        combinedSubTypes = `${combinedSubTypes}+${DEFAULT_SUBTYPE[combinedSubTypes]}`;
+    }
+
+    // If this is a known type with an exact match, return that directly:
+    if (mimeTypeToContentTypeMap[type + '/' + combinedSubTypes]) {
+        return type + '/' + combinedSubTypes;
+    }
 
+    // Otherwise, wr collect a list of types from most specific to most generic: [svg, xml] for image/svg+xml
+    // and then look through in order to see if there are any matches here:
+    const subTypes = combinedSubTypes.split('+');
     const possibleTypes = subTypes.map(st => type + '/' + st);
-    return _.find(possibleTypes, t => !!mimeTypeToContentTypeMap[t]) ||
+
+    return _.find(possibleTypes, t => !!mimeTypeToContentTypeMap[t]) || // Subtype match
         _.last(possibleTypes)!; // If we recognize none - return the most generic
 }
 
+const DEFAULT_SUBTYPE: { [type: string]: string } = {
+    'grpc': 'proto' // Protobuf is the default gRPC content type (but not the only one!)
+};
+
 export type ViewableContentType =
     | 'raw'
     | 'text'
@@ -34,7 +48,7 @@ export type ViewableContentType =
     | 'yaml'
     | 'image'
     | 'protobuf'
-    | 'grpc';
+    | 'grpc-proto';
 
 export const EditableContentTypes = [
     'text',
@@ -97,7 +111,7 @@ const mimeTypeToContentTypeMap: { [mimeType: string]: ViewableContentType } = {
     'application/proto': 'protobuf', // N.b. this covers all application/XXX+proto values
     'application/x-protobuffer': 'protobuf', // Commonly seen in Google apps
 
-    'application/grpc': 'grpc', // Used in GRPC requests (protobuf with special headers)
+    'application/grpc+proto': 'grpc-proto', // Used in GRPC requests (protobuf but with special headers)
 
     'application/octet-stream': 'raw'
 } as const;
@@ -124,7 +138,7 @@ export function getContentEditorName(contentType: ViewableContentType): string {
         : contentType === 'json' ? 'JSON'
         : contentType === 'css' ? 'CSS'
         : contentType === 'url-encoded' ? 'URL-Encoded'
-        : contentType === 'grpc' ? 'gRPC'
+        : contentType === 'grpc-proto' ? 'gRPC'
         : _.capitalize(contentType);
 }
 
@@ -166,14 +180,15 @@ export function getCompatibleTypes(
         types.add('xml');
     }
 
-    if (!types.has('grpc') && rawContentType && rawContentType === 'application/grpc') {
-        types.add('grpc')
+    if (!types.has('grpc-proto') && rawContentType === 'application/grpc') {
+        types.add('grpc-proto')
     }
+
     if (
         body &&
         isProbablyProtobuf(body) &&
         !types.has('protobuf') &&
-        !types.has('grpc') &&
+        !types.has('grpc-proto') &&
         // If it's probably unmarked protobuf, and it's a manageable size, try
         // parsing it just to check:
         (body.length < 100_000 && isValidProtobuf(body))

src/services/ui-worker-formatters.ts

@@ -93,7 +93,7 @@ const WorkerFormatters = {
             }
         }, 2);
     },
-    grpc: (content: Buffer) => {
+    'grpc-proto': (content: Buffer) => {
         const data = parseGrpcProtobuf(content);
 
         return JSON.stringify(data, (_key, value) => {

test/unit/model/http/content-types.spec.ts

@@ -49,6 +49,21 @@ describe('Content type parsing', () => {
             expect(ct).to.equal('raw');
         });
 
+        it('should render application/grpc as protobuf grpc', () => {
+            const ct = getContentType('application/grpc');
+            expect(ct).to.equal('grpc-proto');
+        });
+
+        it('should render application/grpc+proto as protobuf grpc', () => {
+            const ct = getContentType('application/grpc+proto');
+            expect(ct).to.equal('grpc-proto');
+        });
+
+        it('should render application/grpc+json as JSON', () => {
+            const ct = getContentType('application/grpc+json');
+            expect(ct).to.equal('json');
+        });
+
         it('should return undefined for unknown content', () => {
             const ct = getContentType('application/unknownsomething');
             expect(ct).to.equal(undefined);