Add some last small fixes/tweaks for gRPC compression change

Author: pimterry

src/components/editor/content-viewer.tsx

@@ -10,6 +10,7 @@ import { styled } from '../../styles';
 import { ObservablePromise, isObservablePromise } from '../../util/observable';
 import { asError, unreachableCheck } from '../../util/error';
 import { stringToBuffer } from '../../util/buffer';
+import { lastHeader } from '../../util/headers';
 
 import { ViewableContentType } from '../../model/events/content-types';
 import { Formatters, isEditorFormatter } from '../../model/events/body-formatting';
@@ -200,7 +201,7 @@ export class ContentViewer extends React.Component<ContentViewerProps> {
             return <FormatterContainer expanded={this.props.expanded}>
                 <formatterConfig.Component
                     content={this.contentBuffer}
-                    headers={this.props.headers}
+                    rawContentType={lastHeader(this.props.headers?.['content-type'])}
                 />
             </FormatterContainer>;
         }

src/components/intercept/config/android-device-config.tsx

@@ -64,7 +64,10 @@ const Spacer = styled.div`
 `;
 
 function urlSafeBase64(content: string) {
-    return stringToBuffer(content).toString('base64url');
+    return stringToBuffer(content)
+        .toString('base64')
+        .replace(/\+/g, '-')
+        .replace(/\//g, '_');
 }
 
 function getConfigRequestIds(eventsStore: EventsStore) {

src/model/events/body-formatting.ts

@@ -19,7 +19,7 @@ export interface EditorFormatter {
 
 type FormatComponentProps = {
     content: Buffer;
-    headers?: Headers;
+    rawContentType: string | undefined;
 };
 
 type FormatComponent = React.ComponentType<FormatComponentProps>;
@@ -65,7 +65,7 @@ export const Formatters: { [key in ViewableContentType]: Formatter } = {
         language: 'text',
         cacheKey: Symbol('text'),
         isEditApplicable: false,
-        render: (input: Buffer, headers?: Headers) => {
+        render: (input: Buffer) => {
             return bufferToString(input);
         }
     },
@@ -112,7 +112,9 @@ export const Formatters: { [key in ViewableContentType]: Formatter } = {
                     // showing the loading spinner that churns the layout in short content cases.
                     return JSON.stringify(
                         JSON.parse(inputAsString),
-                        null, 2);
+                        null,
+                        2
+                    );
                     // ^ Same logic as in UI-worker-formatter
                 } catch (e) {
                     // Fallback to showing the raw un-formatted JSON:

src/model/events/content-types.ts

@@ -153,7 +153,7 @@ export function getDefaultMimeType(contentType: ViewableContentType): string {
     return _.findKey(mimeTypeToContentTypeMap, (c) => c === contentType)!;
 }
 
-function isValidAlphaNumOrSpace(byte: number) {
+function isAlphaNumOrEquals(byte: number) {
     return (byte >= 65 && byte <= 90) || // A-Z
         (byte >= 97 && byte <= 122) ||   // a-z
         (byte >= 48 && byte <= 57) ||    // 0-9
@@ -162,14 +162,16 @@ function isValidAlphaNumOrSpace(byte: number) {
 
 function isValidStandardBase64Byte(byte: number) {
     // + / (standard)
-    return byte === 43 || byte === 47
-        || isValidAlphaNumOrSpace(byte);
+    return byte === 43 ||
+        byte === 47 ||
+        isAlphaNumOrEquals(byte);
 }
 
 function isValidURLSafeBase64Byte(byte: number) {
     // - _ (URL-safe version)
-    return byte === 45 || byte === 95
-        || isValidAlphaNumOrSpace(byte);
+    return byte === 45 ||
+        byte === 95 ||
+        isAlphaNumOrEquals(byte);
 }
 
 export function getCompatibleTypes(

src/model/http/har.ts

@@ -57,9 +57,9 @@ export type RequestContentData = {
 
 export interface ExtendedHarRequest extends HarFormat.Request {
     _requestBodyStatus?:
-    | 'discarded:too-large'
-    | 'discarded:not-representable' // to indicate that extended field `_content` is populated with base64 `postData`
-    | 'discarded:not-decodable';
+        | 'discarded:too-large'
+        | 'discarded:not-representable' // to indicate that extended field `_content` is populated with base64 `postData`
+        | 'discarded:not-decodable';
     _content?: RequestContentData;
     _trailers?: HarFormat.Header[];
 }
@@ -435,10 +435,10 @@ function generateHarWebSocketMessage(
     return {
         // Note that msg.direction is from the perspective of Mockttp, not the client.
         type: message.direction === 'sent'
-            ? 'receive'
+                ? 'receive'
             : message.direction === 'received'
                 ? 'send'
-                : unreachableCheck(message.direction),
+            : unreachableCheck(message.direction),
 
         opcode: message.isBinary ? 2 : 1,
         data: message.isBinary

src/services/ui-worker-formatters.ts

@@ -56,8 +56,7 @@ const WorkerFormatters = {
     },
     base64: (content: Buffer) => {
         const b64 = content.toString('ascii');
-        const encoding = b64.match(/[-_]/) ? 'base64url' : 'base64';
-        return Buffer.from(b64, encoding).toString('utf8');
+        return Buffer.from(b64, 'base64').toString('utf8');
     },
     markdown: (content: Buffer) => {
         return content.toString('utf8');