[FEATURE] Add minify response (#51)

Lemick · Mickaël Beguin · web-flow · commit a24e12d72ed0 · 2024-03-30T09:49:25.000+01:00
Co-authored-by: Mickaël Beguin &lt;mickael.b@bridgeapi.io&gt;
diff --git a/intellij-plugin/gradle.properties b/intellij-plugin/gradle.properties
@@ -1,13 +1,13 @@
 pluginGroup=com.lemick
 pluginName=hoverfly-ui-intellij-plugin
 pluginRepositoryUrl=https://github.com/Lemick/hoverfly-ui
-pluginVersion=1.1.2
+pluginVersion=1.2.0
 # Supported build number ranges and IntelliJ Platform versions -> https://plugins.jetbrains.com/docs/intellij/build-number-ranges.html
 pluginSinceBuild=222
 pluginUntilBuild=241.*
 # IntelliJ Platform Properties -> https://plugins.jetbrains.com/docs/intellij/tools-gradle-intellij-plugin.html#configuration-intellij-extension
 platformType=IC
-platformVersion=2023.3.4
+platformVersion=2023.3.6
 # Plugin Dependencies -> https://plugins.jetbrains.com/docs/intellij/plugin-dependencies.html
 # Example: platformPlugins = com.intellij.java, com.jetbrains.php:203.4449.22
 platformPlugins=
diff --git a/ui/e2e/test-data/input/simulation-with-pretty-response.ts b/ui/e2e/test-data/input/simulation-with-pretty-response.ts
@@ -0,0 +1,18 @@
+export const simulationWithPrettyResponse = {
+  meta: {
+    schemaVersion: 'v5.2',
+    hoverflyVersion: 'v1.6.0',
+    timeExported: '2024-03-25T18:14:10.185Z'
+  },
+  data: {
+    pairs: [
+      {
+        request: {},
+        response: {
+          status: 200,
+          body: '{\n  "is_prettified": true,\n  "will_be_minified": true\n}'
+        }
+      }
+    ]
+  }
+};
diff --git a/ui/e2e/test-data/output/expected-minified-response.ts b/ui/e2e/test-data/output/expected-minified-response.ts
@@ -0,0 +1,18 @@
+export const expectedMinifiedResponse = {
+  meta: {
+    schemaVersion: 'v5.2',
+    hoverflyVersion: 'v1.6.0',
+    timeExported: '2024-03-25T18:14:10.185Z'
+  },
+  data: {
+    pairs: [
+      {
+        request: {},
+        response: {
+          status: 200,
+          body: '{"is_prettified":true,"will_be_minified":true}'
+        }
+      }
+    ]
+  }
+};
diff --git a/ui/e2e/utils/WebUiSimulationPage.ts b/ui/e2e/utils/WebUiSimulationPage.ts
@@ -45,7 +45,7 @@ export class WebUiSimulationPage {
   /**
    * Use clipboard to fill monaco editor as it is not an HTML <input>
    */
-  async setTextEditorContent(editor: Locator, json: string) {
+  async appendTextToEditor(editor: Locator, json: string) {
     await editor.click();
     await editor.pressSequentially(json);
   }
diff --git a/ui/e2e/web-ui.spec.ts b/ui/e2e/web-ui.spec.ts
@@ -5,6 +5,8 @@ import expectedComplete from './test-data/output/expected-complete';
 import expectedStartFromScratch from './test-data/output/expected-start-from-scratch';
 import { simulationWithContentType } from './test-data/input/simulation-with-content-type';
 import { expectContentTypeUpdated } from './test-data/output/expected-content-type-updated';
+import { expectedMinifiedResponse } from './test-data/output/expected-minified-response';
+import { simulationWithPrettyResponse } from './test-data/input/simulation-with-pretty-response';
 
 test('should display a simulation example on first app launch', async ({ page }) => {
   const simulationPage = new WebUiSimulationPage(page);
@@ -120,14 +122,14 @@ test('should create a full simulation', async ({ page }) => {
     const currentTab = simulationPage.requestTabContentBody;
     await currentTab.getByRole('button', { name: 'Add first field matcher for body' }).click();
     await simulationPage.selectMatcherOption(currentTab, 'JSON Partial');
-    await simulationPage.setTextEditorContent(
+    await simulationPage.appendTextToEditor(
       currentTab.locator(simulationPage.requestEditor),
       '{ "field1": "value1" }'
     );
   });
 
   await test.step('Edit response HTTP Body', async () => {
-    await simulationPage.setTextEditorContent(
+    await simulationPage.appendTextToEditor(
       simulationPage.responseBodyEditor,
       '{ "response": "body" }'
     );
@@ -182,19 +184,29 @@ test('should create a full simulation', async ({ page }) => {
   });
 });
 
-test('content-type headers should update when body change', async ({ page }) => {
+test('Content-type headers should update when body change', async ({ page }) => {
   const simulationPage = new WebUiSimulationPage(page);
   await simulationPage.goto(JSON.stringify(simulationWithContentType));
 
   await page.getByRole('button', { name: '- →️ 200' }).click();
 
-  await simulationPage.setTextEditorContent(
-    simulationPage.responseBodyEditor,
-    ', how is it going ?'
-  );
+  await simulationPage.appendTextToEditor(simulationPage.responseBodyEditor, ', how is it going ?');
 
   const textEditorContent = await simulationPage.getTextEditorContent(
     simulationPage.simulationTextEditor
   );
   expect(JSON.parse(textEditorContent)).toMatchObject(expectContentTypeUpdated);
 });
+
+test('Should be able to minify JSON', async ({ page }) => {
+  const simulationPage = new WebUiSimulationPage(page);
+  await simulationPage.goto(JSON.stringify(simulationWithPrettyResponse));
+
+  await page.getByRole('button', { name: '- →️ 200' }).click();
+  await page.getByRole('button', { name: 'Minify' }).click();
+
+  const textEditorContent = await simulationPage.getTextEditorContent(
+    simulationPage.simulationTextEditor
+  );
+  expect(JSON.parse(textEditorContent)).toMatchObject(expectedMinifiedResponse);
+});
diff --git a/ui/src/components/forms/ResponseHeaderForm.tsx b/ui/src/components/forms/ResponseHeaderForm.tsx
@@ -31,7 +31,7 @@ export default function ResponseHeaderForm({
 
   return (
     <div className="flex flex-col items-start gap-6">
-      <FormControl direction="row" className="items-center">
+      <FormControl direction="row" className="items-center gap-4">
         <Label htmlFor="headerName">Name</Label>
         <Input
           id="headerName"
@@ -43,7 +43,7 @@ export default function ResponseHeaderForm({
           onChange={(event) => setHeaderName(event.target.value)}
         />
       </FormControl>
-      <FormControl direction="row" className="items-center">
+      <FormControl direction="row" className="items-center gap-4">
         <Label htmlFor="headerValue">Value</Label>
         <Input
           id="headerValue"
diff --git a/ui/src/components/forms/ResponseMatcherForm.tsx b/ui/src/components/forms/ResponseMatcherForm.tsx
@@ -8,9 +8,9 @@ import { Checkbox } from '@/components/ui/Checkbox';
 import { TypographyH2 } from '@/components/ui/Typography';
 import { FormControl } from '@/components/utilities/FormControl';
 import { Button } from '@/components/ui/Button';
-import { parseIntOrDefault, prettify } from '@/services/json-service';
+import { minify, parseIntOrDefault, prettify } from '@/services/json-service';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover';
-import { ClockIcon, Cross1Icon, MagicWandIcon } from '@radix-ui/react-icons';
+import { ClockIcon, Cross1Icon, MagicWandIcon, ZoomOutIcon } from '@radix-ui/react-icons';
 import ResponseHeaderFormPopover from '@/components/forms/ResponseHeaderFormPopover';
 import { updateContentLengthAccordingToBody } from '@/services/headers-service';
 
@@ -62,6 +62,12 @@ const ResponseMatcherForm = ({ response = {}, onChange }: Props) => {
               <MagicWandIcon />
               Prettify
             </Button>
+            <Button
+              variant="outline"
+              onClick={() => response.body && onResponseBodyChange(minify(response.body))}>
+              <ZoomOutIcon className="size-5" />
+              Minify
+            </Button>
             <Popover>
               <PopoverTrigger asChild>
                 <Button variant="outline">
@@ -75,9 +81,7 @@ const ResponseMatcherForm = ({ response = {}, onChange }: Props) => {
 
                   <div className="flex flex-col items-start gap-6">
                     <FormControl direction="column">
-                      <Label htmlFor="fixedDelay">
-                        Fixed Delay <i>(ms)</i>
-                      </Label>
+                      <Label htmlFor="fixedDelay">Fixed Delay (ms)</Label>
                       <Input
                         id="fixedDelay"
                         type="number"
@@ -118,7 +122,7 @@ const ResponseMatcherForm = ({ response = {}, onChange }: Props) => {
             dataTestId="response-body-editor"
           />
 
-          <FormControl direction="row">
+          <FormControl direction="row" className="items-center">
             <Checkbox
               id="encodedBody"
               className="form-check-input"
@@ -171,7 +175,7 @@ const ResponseMatcherForm = ({ response = {}, onChange }: Props) => {
             </FormControl>
           </div>
 
-          <div className="w-full flex flex-row ">
+          <div className="w-full flex flex-row">
             <ResponseHeaderFormPopover onChange={onHeaderChangeRequest}>
               <Button variant="outline">Add header</Button>
             </ResponseHeaderFormPopover>
diff --git a/ui/src/components/forms/matchers/FieldMatchersForm.tsx b/ui/src/components/forms/matchers/FieldMatchersForm.tsx
@@ -114,7 +114,7 @@ const FieldMatcherForm = ({
                 <p className="font-medium leading-none">Advanced options</p>
 
                 <div className="flex flex-col items-start gap-3">
-                  <FormControl direction="row">
+                  <FormControl direction="row" className="items-center">
                     <Checkbox
                       id={generateDomId('ignoreUnknown')}
                       name="ignoreUnknown"
@@ -123,7 +123,7 @@ const FieldMatcherForm = ({
                     />
                     <Label htmlFor={generateDomId('ignoreUnknown')}>Ignore Unknown</Label>
                   </FormControl>
-                  <FormControl direction="row">
+                  <FormControl direction="row" className="items-center">
                     <Checkbox
                       id={generateDomId('ignoreOrder')}
                       name="ignoreOrder"
@@ -132,7 +132,7 @@ const FieldMatcherForm = ({
                     />
                     <Label htmlFor={generateDomId('ignoreOrder')}>Ignore Order</Label>
                   </FormControl>
-                  <FormControl direction="row">
+                  <FormControl direction="row" className="items-center">
                     <Checkbox
                       id={generateDomId('ignoreOccurrences')}
                       name="ignoreOccurrences"
diff --git a/ui/src/components/utilities/FormControl.tsx b/ui/src/components/utilities/FormControl.tsx
@@ -13,8 +13,7 @@ export function FormControl({
   return (
     <div
       className={cn(
-        'flex items-start [&>*]:cursor-pointer',
-        direction === 'column' ? 'gap-2' : 'gap-4',
+        'flex gap-2 items-start [&>*]:cursor-pointer',
         direction === 'column' ? 'flex-col' : 'flex-row',
         className
       )}>
diff --git a/ui/src/components/utilities/InvalidSimulation.tsx b/ui/src/components/utilities/InvalidSimulation.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Button } from '@/components/ui/Button';
+import { ResetIcon } from '@radix-ui/react-icons';
 
 type Props = {
   onClick: () => void;
@@ -10,6 +11,7 @@ export default function InvalidSimulation({ onClick = () => {} }: Props) {
     <div className="text-center mt-5">
       <h5>No valid data pairs</h5>
       <Button className="mt-2" variant="secondary" onClick={onClick}>
+        <ResetIcon />
         Reset simulation
       </Button>
     </div>
diff --git a/ui/src/services/json-service.ts b/ui/src/services/json-service.ts
@@ -19,6 +19,14 @@ export function prettify(json: string) {
   }
 }
 
+export function minify(json: string) {
+  try {
+    return JSON.stringify(JSON.parse(json));
+  } catch (error) {
+    return json;
+  }
+}
+
 export function isJSON(str: string): boolean {
   try {
     JSON.parse(str);

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ export class WebUiSimulationPage {`
`45`	`45`	`/**`
`46`	`46`	`* Use clipboard to fill monaco editor as it is not an HTML <input>`
`47`	`47`	`*/`
`48`		`- async setTextEditorContent(editor: Locator, json: string) {`
	`48`	`+ async appendTextToEditor(editor: Locator, json: string) {`
`49`	`49`	`await editor.click();`
`50`	`50`	`await editor.pressSequentially(json);`
`51`	`51`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,14 @@ export function prettify(json: string) {`
`19`	`19`	`}`
`20`	`20`	`}`
`21`	`21`
	`22`	`+export function minify(json: string) {`
	`23`	`+ try {`
	`24`	`+ return JSON.stringify(JSON.parse(json));`
	`25`	`+ } catch (error) {`
	`26`	`+ return json;`
	`27`	`+ }`
	`28`	`+}`
	`29`	`+`
`22`	`30`	`export function isJSON(str: string): boolean {`
`23`	`31`	`try {`
`24`	`32`	`JSON.parse(str);`