Add JSON patch to transform rules

Author: pimterry

package-lock.json

@@ -89,6 +89,7 @@
     "dedent": "^0.7.0",
     "deserialize-error": "0.0.3",
     "dompurify": "^2.1.1",
+    "fast-json-patch": "^3.1.1",
     "graphql": "^15.8.0",
     "har-validator": "^5.1.3",
     "http-encoding": "^1.3.0",
@@ -103,7 +104,7 @@
     "mobx-shallow-undo": "^1.0.0",
     "mobx-utils": "^5.1.0",
     "mockrtc": "^0.3.1",
-    "mockttp": "^3.11.0",
+    "mockttp": "^3.13.0",
     "monaco-editor": "^0.27.0",
     "node-forge": "^1.3.0",
     "openapi-directory": "^1.3.0",

package.json

@@ -3,6 +3,10 @@ import * as React from 'react';
 import { action, observable, reaction, autorun, observe, runInAction, computed } from 'mobx';
 import { observer, disposeOnUnmount, inject } from 'mobx-react';
 import * as dedent from 'dedent';
+import {
+    Operation as JsonPatchOperation,
+    validate as validateJsonPatch
+} from 'fast-json-patch';
 
 import { Headers, RawHeaders } from '../../types';
 import { css, styled } from '../../styles';
@@ -23,6 +27,10 @@ import {
     HEADER_NAME_REGEX,
     setHeaderValue
 } from '../../util/headers';
+import {
+    ADVANCED_PATCH_TRANSFORMS,
+    serverSupports
+} from '../../services/service-versions';
 
 import {
     Handler,
@@ -1105,7 +1113,8 @@ class BodyTransformConfig<T extends RequestTransform | ResponseTransform> extend
     private static readonly FIELDS = [
         'replaceBody',
         'replaceBodyFromFile',
-        'updateJsonBody'
+        'updateJsonBody',
+        'patchJsonBody'
     ] as const;
 
     @computed
@@ -1120,9 +1129,12 @@ class BodyTransformConfig<T extends RequestTransform | ResponseTransform> extend
             onTransformTypeChange,
             setBodyReplacement,
             selectBodyReplacementFile,
-            setJsonBodyUpdate
+            setJsonBodyUpdate,
+            setJsonBodyPatch
         } = this;
 
+        const advancedPatchesSupported = serverSupports(ADVANCED_PATCH_TRANSFORMS);
+
         const selected = _.find(BodyTransformConfig.FIELDS, (field) =>
             transform[field] !== undefined
         ) ?? 'none';
@@ -1134,7 +1146,10 @@ class BodyTransformConfig<T extends RequestTransform | ResponseTransform> extend
                 <option value='none'>Pass through the real { type } body</option>
                 <option value='replaceBody'>Replace the { type } body with a fixed value</option>
                 <option value='replaceBodyFromFile'>Replace the { type } body with a file</option>
-                <option value='updateJsonBody'>Update values within a JSON { type } body</option>
+                <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>
+                </> }
             </SelectTransform>
             {
                 selected === 'replaceBody'
@@ -1165,7 +1180,15 @@ class BodyTransformConfig<T extends RequestTransform | ResponseTransform> extend
                         body={transform.updateJsonBody!}
                         updateBody={setJsonBodyUpdate}
                     />
-                : null
+                : selected === 'patchJsonBody'
+                    ? <JsonPatchTransformConfig
+                        type={type}
+                        operations={transform.patchJsonBody!}
+                        updateOperations={setJsonBodyPatch}
+                    />
+                : selected === 'none'
+                    ? null
+                : unreachableCheck(selected)
             }
         </TransformConfig>;
     }
@@ -1176,11 +1199,15 @@ class BodyTransformConfig<T extends RequestTransform | ResponseTransform> extend
         this.clearValues();
         if (value === 'updateJsonBody') {
             this.props.onChange('updateJsonBody')({});
+        } else if (value === 'patchJsonBody') {
+            this.props.onChange('patchJsonBody')([]);
         } else if (value === 'replaceBody') {
             this.props.onChange('replaceBody')('');
         } else if (value === 'replaceBodyFromFile') {
             this.props.onChange('replaceBodyFromFile')('');
-        }
+        } else if (value === 'none') {
+            return;
+        } else unreachableCheck(value);
     };
 
     @action.bound
@@ -1211,6 +1238,12 @@ class BodyTransformConfig<T extends RequestTransform | ResponseTransform> extend
         this.clearValues();
         this.props.onChange('updateJsonBody')(body);
     };
+
+    @action.bound
+    setJsonBodyPatch(operations: Array<JsonPatchOperation>) {
+        this.clearValues();
+        this.props.onChange('patchJsonBody')(operations);
+    };
 };
 
 const RawBodyTransfomConfig = (props: {
@@ -1276,7 +1309,7 @@ const JsonUpdateTransformConfig = (props: {
 
     return <TransformDetails>
         <BodyHeader>
-            <SectionLabel>JSON { props.type } body patch</SectionLabel>
+            <SectionLabel>JSON to merge into { props.type } body</SectionLabel>
             { error && <WarningIcon title={error.message} /> }
 
             <StandaloneFormatButton
@@ -1296,6 +1329,55 @@ const JsonUpdateTransformConfig = (props: {
     </TransformDetails>;
 };
 
+const JsonPatchTransformConfig = (props: {
+    type: 'request' | 'response',
+    operations: Array<JsonPatchOperation>,
+    updateOperations: (operations: Array<JsonPatchOperation>) => void
+}) => {
+    const [error, setError] = React.useState<Error>();
+
+    const [operationsString, setOperationsString] = React.useState<string>(
+        JSON.stringify(props.operations, null, 2)
+    );
+
+    React.useEffect(() => {
+        try {
+            const parsedInput = JSON.parse(operationsString);
+
+            const validationError = validateJsonPatch(parsedInput);
+            if (validationError) throw validationError;
+
+            props.updateOperations(parsedInput);
+            setError(undefined);
+        } catch (e) {
+            setError(asError(e));
+        }
+    }, [operationsString]);
+
+    return <TransformDetails>
+        <BodyHeader>
+            <SectionLabel>JSON { props.type } body patch (see <a
+                href="https://jsonpatch.com/"
+            >jsonpatch.com</a>)</SectionLabel>
+            { error && <WarningIcon title={error.message} /> }
+
+            <StandaloneFormatButton
+                format='json'
+                content={asBuffer(operationsString)}
+                onFormatted={setOperationsString}
+            />
+        </BodyHeader>
+        <BodyContainer>
+            <SelfSizedEditor
+                contentId={null}
+                language='json'
+                value={operationsString}
+                onChange={(content) => setOperationsString(content)}
+            />
+        </BodyContainer>
+    </TransformDetails>;
+};
+
 @observer
 class PassThroughHandlerConfig extends HandlerConfig<
     | PassThroughHandler

src/components/mock/handler-config.tsx

@@ -1,7 +1,6 @@
 import * as _ from 'lodash';
 import {
-    serverVersion as serverVersionObservable,
-    versionSatisfies,
+    serverSupports,
     BODY_MATCHING_RANGE,
     HOST_MATCHER_SERVER_RANGE,
     FROM_FILE_HANDLER_SERVER_RANGE,
@@ -94,16 +93,6 @@ const PartVersionRequirements: {
     'reset-connection': CONNECTION_RESET_SUPPORTED
 };
 
-const serverSupports = (versionRequirement: string | undefined) => {
-    if (!versionRequirement || versionRequirement === '*') return true;
-
-    // If we haven't got the server version yet, assume it doesn't support this
-    if (serverVersionObservable.state !== 'fulfilled') return false;
-
-    const version = serverVersionObservable.value as string; // Fulfilled -> string value
-    return versionSatisfies(version, versionRequirement);
-}
-
 /// --- Matchers ---
 
 const MatchersByType = {

src/model/rules/rules.ts

@@ -42,6 +42,17 @@ export function versionSatisfies(version: string | Error | undefined, range: str
         semver.satisfies(version, range, { includePrerelease: true });
 }
 
+// A quick way to check server support synchronously
+export function serverSupports(versionRequirement: string | undefined) {
+    if (!versionRequirement || versionRequirement === '*') return true;
+
+    // If we haven't got the server version yet, assume anything specific is unsupported
+    if (serverVersion.state !== 'fulfilled') return false;
+
+    const version = serverVersion.value as string; // Fulfilled -> string value
+    return versionSatisfies(version, versionRequirement);
+}
+
 // Notable desktop versions:
 export const DESKTOP_HEADER_LIMIT_CONFIGURABLE = "^0.1.20 || ^1.0.0";
 
@@ -72,4 +83,5 @@ export const RTC_RULES_SUPPORTED = '^1.11.0';
 export const TLS_PASSTHROUGH_SUPPORTED = '^1.12.0';
 export const CONNECTION_RESET_SUPPORTED = '^1.12.0';
 export const SERVER_REST_API_SUPPORTED = '^1.13.0';
-export const SERVER_SEND_API_SUPPORTED = '^1.13.0';
+export const SERVER_SEND_API_SUPPORTED = '^1.13.0';
+export const ADVANCED_PATCH_TRANSFORMS = '^1.18.0';