Add support for regex match/replace on request & response bodies

Author: pimterry

src/components/common/editable-headers.tsx

@@ -77,7 +77,7 @@ export const EditableRawHeaders = observer((
 
         allowEmptyValues={allowEmptyValues}
 
-        keyPattern={HEADER_NAME_PATTERN}
+        keyValidation={HEADER_NAME_PATTERN}
         keyTitle="Header names must contain only alphanumeric characters and !#$%&'*+-.^_`|~ symbols"
 
         keyPlaceholder='Header name'

src/components/common/editable-pairs.tsx

@@ -1,18 +1,19 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import { action, observable, reaction } from 'mobx';
+import { action, autorun, comparer, observable, reaction } from 'mobx';
 import { disposeOnUnmount, observer } from 'mobx-react';
 
 import { styled } from '../../styles';
 
-import { clickOnEnter } from '../component-utils';
 import { Button, TextInput } from './inputs';
 import { Icon } from '../../icons';
 
 export type Pair = { key: string, value: string, disabled?: true };
 export type PairsArray = Array<Pair>;
 
 interface EditablePairsProps<R = PairsArray> {
+    className?: string;
+
     pairs: PairsArray;
 
     onChange: (pairs: R) => void;
@@ -29,7 +30,8 @@ interface EditablePairsProps<R = PairsArray> {
     transformInput?: (pairs: PairsArray) => PairsArray;
 
     keyTitle?: string;
-    keyPattern?: string;
+    // Either a pattern string, or a validation function
+    keyValidation?: string | ((key: string) => true | string);
 
     keyPlaceholder: string;
     valuePlaceholder: string;
@@ -111,6 +113,27 @@ export class EditablePairs<R> extends React.Component<EditablePairsProps<R>> {
                 }
             }
         ));
+
+        disposeOnUnmount(this, autorun(() => {
+            const { keyValidation } = this.props;
+            if (!_.isFunction(keyValidation)) return;
+
+            const inputs = this.containerRef?.current?.querySelectorAll('input');
+            if (!inputs) return;
+
+            this.values.forEach((pair, i) => {
+                const keyInput = inputs?.[i * 2];
+                const validationResult = keyValidation(pair.key);
+
+                if (validationResult === true) {
+                    keyInput.setCustomValidity('');
+                    keyInput.reportValidity();
+                } else {
+                    keyInput.setCustomValidity(validationResult);
+                    keyInput.reportValidity();
+                }
+            });
+        }));
     }
 
     private convert = (pairs: PairsArray): R => {
@@ -150,16 +173,22 @@ export class EditablePairs<R> extends React.Component<EditablePairsProps<R>> {
 
     render() {
         const {
+            className,
             keyTitle,
-            keyPattern,
+            keyValidation,
             keyPlaceholder,
             valuePlaceholder,
             allowEmptyValues
         } = this.props;
 
         const { values, onChangeValues, containerRef } = this;
 
+        const keyPattern = typeof keyValidation === 'string'
+            ? keyValidation
+            : undefined;
+
         return <EditablePairsContainer
+            className={className}
             ref={containerRef}
         >
             { _.flatMap(values, ({ key, value, disabled }, i) => [

src/components/mock/handler-config.tsx

@@ -1117,8 +1117,9 @@ class BodyTransformConfig<T extends RequestTransform | ResponseTransform> extend
         'replaceBody',
         'replaceBodyFromFile',
         'updateJsonBody',
-        'patchJsonBody'
-    ] as const;
+        'patchJsonBody',
+        'matchReplaceBody'
+    ] as const satisfies ReadonlyArray<keyof RequestTransform & ResponseTransform>;
 
     @computed
     get bodyReplacementBuffer() {
@@ -1152,11 +1153,12 @@ class BodyTransformConfig<T extends RequestTransform | ResponseTransform> extend
                 <option value='updateJsonBody'>Update a JSON { type } body by merging data</option>
                 { advancedPatchesSupported && <>
                     <option value='patchJsonBody'>Update a JSON { type } body using JSON patch</option>
+                    <option value='matchReplaceBody'>Match & replace text in the { type } body</option>
                 </> }
             </SelectTransform>
             {
                 selected === 'replaceBody'
-                    ? <RawBodyTransfomConfig
+                    ? <RawBodyTransformConfig
                         type={type}
                         body={bodyReplacementBuffer}
                         updateBody={setBodyReplacement}
@@ -1189,6 +1191,12 @@ class BodyTransformConfig<T extends RequestTransform | ResponseTransform> extend
                         operations={transform.patchJsonBody!}
                         updateOperations={setJsonBodyPatch}
                     />
+                : selected === 'matchReplaceBody'
+                    ? <MatchReplaceBodyTransformConfig
+                        type={type}
+                        replacements={transform.matchReplaceBody!}
+                        updateReplacements={this.props.onChange('matchReplaceBody')}
+                    />
                 : selected === 'none'
                     ? null
                 : unreachableCheck(selected)
@@ -1208,6 +1216,8 @@ class BodyTransformConfig<T extends RequestTransform | ResponseTransform> extend
             this.props.onChange('replaceBody')('');
         } else if (value === 'replaceBodyFromFile') {
             this.props.onChange('replaceBodyFromFile')('');
+        } else if (value === 'matchReplaceBody') {
+            this.props.onChange('matchReplaceBody')([]);
         } else if (value === 'none') {
             return;
         } else unreachableCheck(value);
@@ -1249,7 +1259,7 @@ class BodyTransformConfig<T extends RequestTransform | ResponseTransform> extend
     };
 };
 
-const RawBodyTransfomConfig = (props: {
+const RawBodyTransformConfig = (props: {
     type: 'request' | 'response',
     body: Buffer,
     updateBody: (body: string) => void
@@ -1381,6 +1391,74 @@ const JsonPatchTransformConfig = (props: {
     </TransformDetails>;
 };
 
+const MatchReplaceBodyTransformConfig = (props: {
+    type: 'request' | 'response',
+    replacements: Array<[RegExp | string, string]>,
+    updateReplacements: (replacements: Array<[RegExp | string, string]>) => void
+}) => {
+    const [error, setError] = React.useState<Error>();
+
+    const [replacementPairs, updatePairs] = React.useState<PairsArray>(
+        props.replacements.map(([match, replace]) => ({
+            key: match instanceof RegExp
+                ? match.source
+                // It's type-possible to get a string here (since Mockttp supports it)
+                // but it shouldn't be runtime-possible as we always use regex
+                : _.escapeRegExp(match),
+            value: replace
+        }))
+    );
+
+    React.useEffect(() => {
+        const validPairs = replacementPairs.filter((pair) =>
+            validateRegexMatcher(pair.key) === true
+        );
+        const invalidCount = replacementPairs.length - validPairs.length;
+
+        if (invalidCount > 0) {
+            setError(new Error(
+                `${invalidCount} regular expression${invalidCount === 1 ? ' is' : 's are'} invalid`
+            ));
+        } else {
+            setError(undefined);
+        }
+
+        props.updateReplacements(validPairs.map(({ key, value }) =>
+            [new RegExp(key, 'g'), value]
+        ));
+    }, [replacementPairs]);
+
+    return <TransformDetails>
+        <BodyHeader>
+            <SectionLabel>Regex matchers & replacements</SectionLabel>
+            { error && <WarningIcon title={error.message} /> }
+        </BodyHeader>
+        <MonoKeyEditablePairs
+            pairs={replacementPairs}
+            onChange={updatePairs}
+            keyPlaceholder='Regular expression to match'
+            keyValidation={validateRegexMatcher}
+            valuePlaceholder='Replacement value'
+            allowEmptyValues={true}
+        />
+    </TransformDetails>;
+};
+
+const MonoKeyEditablePairs = styled(EditablePairs<PairsArray>)`
+    input:nth-of-type(odd) {
+        font-family: ${p => p.theme.monoFontFamily};
+    }
+`;
+
+const validateRegexMatcher = (value: string) => {
+    try {
+        new RegExp(value, 'g');
+        return true;
+    } catch (e: any) {
+        return e.message ?? e.toString();
+    }
+}
+
 @observer
 class PassThroughHandlerConfig extends HandlerConfig<
     | PassThroughHandler
@@ -1583,7 +1661,7 @@ class EthCallResultHandlerConfig extends HandlerConfig<EthereumCallResultHandler
                 pairs={typeValuePairs}
                 onChange={this.onChange}
                 keyPlaceholder='Return value type (e.g. string, int256, etc)'
-                keyPattern={NATIVE_ETH_TYPES_PATTERN}
+                keyValidation={NATIVE_ETH_TYPES_PATTERN}
                 valuePlaceholder='Return value'
                 allowEmptyValues={true}
             />

src/model/rules/definitions/http-rule-definitions.ts

@@ -212,6 +212,14 @@ serializr.createModelSchema(TransformingHandler, {
             updateHeaders: serializeWithUndefineds,
             updateJsonBody: serializeWithUndefineds,
             replaceBody: serializeBuffer,
+            matchReplaceBody: serializr.list(
+                serializr.custom(
+                    ([key, value]: [RegExp, string]) =>
+                        [{ source: key.source, flags: key.flags }, value],
+                    ([key, value]: [{ source: string, flags: string }, string]) =>
+                        [new RegExp(key.source, key.flags), value]
+                )
+            ),
             '*': Object.assign(serializr.raw(), { pattern: { test: () => true } })
         })
     ),