Fix request cloning when body has data, add request body beautification

@apicize/cli/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "apicize-run"
-version = "0.8.2"
+version = "0.8.3"
 description = "Apicize CLI test runner"
 authors = ["Apicize"]
 license = "MIT"
@@ -13,7 +13,7 @@ rust-version = "1.70"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-apicize-lib = { path = "../lib-rust", version = "^0.8.2" }
+apicize-lib = { path = "../lib-rust", version = "^0.8.3" }
 clap = { version = "4.5.19", features = ["derive"] }
 colored = "2.1.0"
 num-format = { version = "0.4.4", features = ["with-system-locale"] }

@apicize/lib-rust/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "apicize-lib"
-version = "0.8.2"
+version = "0.8.3"
 edition = "2021"
 rust-version = "1.70"
 description = "Library supporting Apicize request dispatch, testing and serialization"

@apicize/lib-typescript/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apicize/lib-typescript",
   "private": true,
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "TypeScript model definitions for Apicize",
   "scripts": {
     "build": "tsc",

@apicize/toolkit/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apicize/toolkit",
   "private": true,
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "UI toolkit for Apicize applications",
   "keywords": [],
   "license": "MIT",
@@ -41,7 +41,7 @@
     "mobx-react-lite": "^4.0.7"
   },
   "dependencies": {
-    "@apicize/lib-typescript": "^0.8.2",
+    "@apicize/lib-typescript": "^0.8.3",
     "@dnd-kit/core": "^6.1.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",

@apicize/toolkit/src/contexts/workspace.context.tsx

@@ -350,8 +350,10 @@ export class WorkspaceStore {
                 request.timeout = entry.timeout
                 request.headers = entry.headers.map(h => ({ ...h, id: GenerateIdentifier() } as EditableNameValuePair))
                 request.queryStringParams = entry.queryStringParams.map(q => ({ ...q, id: GenerateIdentifier() } as EditableNameValuePair))
-                request.body = entry.body ? structuredClone(entry.body) : { type: WorkbookBodyType.None, data: undefined },
-                    request.test = entry.test
+                request.body = entry.body
+                    ? structuredClone(toJS(entry.body))
+                    : { type: WorkbookBodyType.None, data: undefined }
+                request.test = entry.test
                 this.workspace.requests.entities.set(request.id, request)
                 return request
             }
@@ -382,15 +384,15 @@ export class WorkspaceStore {
         }
 
         const source = getNestedEntity(id, this.workspace.requests)
-        const entry = copyEntry(source, true)
-        this.workspace.requests.entities.set(entry.id, entry)
+        const copiedEntry = copyEntry(source, true)
+        this.workspace.requests.entities.set(copiedEntry.id, copiedEntry)
 
         let append = true
         if (this.workspace.requests.childIds) {
             for (const childIDs of this.workspace.requests.childIds.values()) {
                 let idxChild = childIDs.indexOf(id)
                 if (idxChild !== -1) {
-                    childIDs.splice(idxChild + 1, 0, entry.id)
+                    childIDs.splice(idxChild + 1, 0, copiedEntry.id)
                     append = false
                     break
                 }
@@ -400,17 +402,17 @@ export class WorkspaceStore {
         if (append) {
             const idx = this.workspace.requests.topLevelIds.indexOf(id)
             if (idx !== -1) {
-                this.workspace.requests.topLevelIds.splice(idx + 1, 0, entry.id)
+                this.workspace.requests.topLevelIds.splice(idx + 1, 0, copiedEntry.id)
                 append = false
             }
         }
 
         if (append) {
-            this.workspace.requests.topLevelIds.push(entry.id)
+            this.workspace.requests.topLevelIds.push(copiedEntry.id)
         }
 
         this.dirty = true
-        this.changeActive(EditableEntityType.Request, entry.id)
+        this.changeActive(EditableEntityType.Request, copiedEntry.id)
     }
 
     @action
@@ -479,7 +481,6 @@ export class WorkspaceStore {
         if (this.active?.entityType === EditableEntityType.Request) {
             const request = this.active as EditableWorkbookRequest
             let newBody: WorkbookBody
-            debugger
             if (request.body && request.body.data) {
                 switch (value) {
                     case WorkbookBodyType.Raw:
@@ -592,6 +593,15 @@ export class WorkspaceStore {
         }
     }
 
+    @action
+    setRequestBodyData(value: string | EditableNameValuePair[]) {
+        if (this.active?.entityType === EditableEntityType.Request) {
+            const request = this.active as EditableWorkbookRequest
+            request.body.data = value
+            this.dirty = true
+        }
+    }
+
     @action
     setRequestRuns(value: number) {
         switch (this.active?.entityType) {

@apicize/toolkit/src/controls/editors/request/request-body-editor.tsx

@@ -12,6 +12,7 @@ import "ace-builds/src-noconflict/mode-json"
 import "ace-builds/src-noconflict/mode-xml"
 import "ace-builds/src-noconflict/theme-monokai"
 import "ace-builds/src-noconflict/ext-language_tools"
+import { beautify } from "ace-builds/src-noconflict/ext-beautify"
 import { WorkbookBodyType, WorkbookBodyTypes } from '@apicize/lib-typescript'
 import { EditableEntityType } from '../../../models/workbook/editable-entity-type'
 import { EditableWorkbookRequest } from '../../../models/workbook/editable-workbook-request'
@@ -30,6 +31,8 @@ export const RequestBodyEditor = observer(() => {
   const fileOps = useFileOperations()
   const feedback = useFeedback()
 
+  const editorRef = React.createRef<AceEditor>()
+
   if (workspace.active?.entityType !== EditableEntityType.Request) {
     return null
   }
@@ -67,21 +70,29 @@ export const RequestBodyEditor = observer(() => {
   }
 
   const [allowUpdateHeader, setAllowUpdateHeader] = React.useState<boolean>(headerDoesNotMatchType(request.body.type))
+  const [allowBeautify, setAllowBeautify] = React.useState<boolean>(request.body.type === WorkbookBodyType.JSON || request.body.type === WorkbookBodyType.XML)
 
   const updateBodyType = (val: WorkbookBodyType | string) => {
-    debugger
     const v = toJS(val)
     const newBodyType = (v == "" ? undefined : v as unknown as WorkbookBodyType) ?? WorkbookBodyType.Text
     workspace.setRequestBodyType(newBodyType)
     setAllowUpdateHeader(headerDoesNotMatchType(newBodyType))
+    setAllowBeautify(newBodyType === WorkbookBodyType.JSON || newBodyType === WorkbookBodyType.XML)
+  }
+
+  function performBeautify() {
+    const session = editorRef.current?.editor.getSession()
+    if (session !== undefined) {
+      beautify(session);
+    }
   }
 
   const updateBodyAsText = (data: string | undefined) => {
-    workspace.setRequestBody({ type: WorkbookBodyType.Text, data: data ?? '' })
+    workspace.setRequestBodyData(data ?? '')
   }
 
   const updateBodyAsFormData = (data: EditableNameValuePair[] | undefined) => {
-    workspace.setRequestBody({ type: WorkbookBodyType.Form, data: data ?? [] })
+    workspace.setRequestBodyData(data ?? [])
   }
 
   const updateTypeHeader = () => {
@@ -165,7 +176,10 @@ export const RequestBodyEditor = observer(() => {
             {bodyTypeMenuItems()}
           </Select>
         </FormControl>
-        <Button variant='outlined' size='small' disabled={!allowUpdateHeader} onClick={updateTypeHeader}>Update Content-Type Header</Button>
+        <Grid2 container direction='row'>
+          <Button variant='outlined' size='small' disabled={!allowBeautify} onClick={performBeautify}>Beautify</Button>
+          <Button variant='outlined' size='small' disabled={!allowUpdateHeader} onClick={updateTypeHeader}>Update Content-Type Header</Button>
+        </Grid2>
       </Grid2>
       {request.body.type == WorkbookBodyType.None
         ? <></>
@@ -198,7 +212,9 @@ export const RequestBodyEditor = observer(() => {
             :
             <Grid2 flexGrow={1}>
               <AceEditor
+                ref={editorRef}
                 mode={mode}
+                name='request-body-editor'
                 theme='monokai'
                 fontSize={`${apicizeSettings.fontSize}pt`}
                 lineHeight='1.1em'
@@ -216,7 +232,6 @@ export const RequestBodyEditor = observer(() => {
                   showLineNumbers: true,
                 }}
                 onChange={updateBodyAsText}
-                name='request body editor'
                 value={request.body.data as string}
               />
             </Grid2>

@apicize/toolkit/src/controls/navigation.tsx

@@ -284,7 +284,9 @@ export const Navigation = observer((props: { onSettings?: () => void }) => {
                             <Box className='nav-node-text'>
                                 {GetTitle(props.item)}
                             </Box>
-                            {isRunning ? <PlayArrowIcon className='running-icon' color="success" /> : null}
+                            <Box display='inline-flex' width='2em' paddingLeft='0.3em' justifyItems='center' justifyContent='left'>
+                                {isRunning ? <PlayArrowIcon color="success" /> : null}
+                            </Box>
                             <IconButton
                                 sx={{
                                     visibility: props.item.id === workspace.active?.id ? 'normal' : 'hidden'
@@ -354,7 +356,9 @@ export const Navigation = observer((props: { onSettings?: () => void }) => {
                                 }
                                 {GetTitle(props.item)}
                             </Box>
-                            {isRunning ? <PlayArrowIcon className='running-icon' /> : null}
+                            <Box display='inline-flex' width='2em' paddingLeft='0.3em' justifyItems='center' justifyContent='left'>
+                                {isRunning ? <PlayArrowIcon color="success" /> : null}
+                            </Box>
                             <IconButton
                                 sx={{
                                     visibility: props.item.id === workspace.active?.id ? 'normal' : 'hidden'

@apicize/toolkit/src/controls/viewers/result/result-request-viewer.tsx

@@ -23,7 +23,6 @@ export const ResultRequestViewer = observer((props: {
     const request = result.request
     if (! request) return null
 
-
     const text = beautify.js_beautify(JSON.stringify(request), {})
     return (
         <Stack sx={{ bottom: 0, overflow: 'hidden', position: 'relative', height: '100%', display: 'flex' }}>

@apicize/toolkit/src/toolkit.css

@@ -123,10 +123,6 @@ pre.log {
   background-color: rgba(255, 255, 255, 0.2);
 }
 
-.running-icon {
-  margin-left: 0.2em;
-}
-
 .navigation-tree {
   height: 100vh;
   flex-grow: 1;

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+# 0.8.3
+
+* Fix request cloning when body has data
+* Add request body beautification for JSON/XML
+
 # 0.8.2
 
 * Fix Run result dropdown formatting, more prep to spin off lib-rust

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,7 +10,7 @@
     "tauri": "tauri"
   },
   "dependencies": {
-    "@apicize/toolkit": "^0.8.2",
+    "@apicize/toolkit": "^0.8.3",
     "@dnd-kit/core": "^6.1.0",
     "@mui/material": "^6.1.1",
     "@mui/system": "^6.1.1",

app/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "apicize"
-version = "0.8.2"
+version = "0.8.3"
 description = "Apicize HTTP call testing application"
 authors = ["Jason Terando"]
 license = "MIT"
@@ -17,7 +17,7 @@ tauri-build = { version = "2.0.0", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-apicize-lib = { version = "0.8.2", path = "../../@apicize/lib-rust" }
+apicize-lib = { version = "0.8.3", path = "../../@apicize/lib-rust" }
 tauri = { version = "2.0.0", features = ["image-png"] }
 tokio-util = "0.7.11"
 tauri-plugin-fs = "2.0.0"

app/src-tauri/tauri.conf.json

@@ -2,7 +2,7 @@
   "$schema": "../../node_modules/@tauri-apps/cli/config.schema.json",
   "identifier": "apicize.app",
   "productName": "Apicize",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "app": {
     "security": {
       "csp": null

yarn.lock

@@ -15,19 +15,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@apicize/lib-typescript@npm:^0.8.2, @apicize/lib-typescript@workspace:@apicize/lib-typescript":
+"@apicize/lib-typescript@npm:^0.8.3, @apicize/lib-typescript@workspace:@apicize/lib-typescript":
   version: 0.0.0-use.local
   resolution: "@apicize/lib-typescript@workspace:@apicize/lib-typescript"
   dependencies:
     typescript: "npm:^5.2.2"
   languageName: unknown
   linkType: soft
 
-"@apicize/toolkit@npm:^0.8.2, @apicize/toolkit@workspace:@apicize/toolkit":
+"@apicize/toolkit@npm:^0.8.3, @apicize/toolkit@workspace:@apicize/toolkit":
   version: 0.0.0-use.local
   resolution: "@apicize/toolkit@workspace:@apicize/toolkit"
   dependencies:
-    "@apicize/lib-typescript": "npm:^0.8.2"
+    "@apicize/lib-typescript": "npm:^0.8.3"
     "@dnd-kit/core": "npm:^6.1.0"
     "@emotion/react": "npm:^11.11.1"
     "@emotion/styled": "npm:^11.11.0"
@@ -2655,7 +2655,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "app@workspace:app"
   dependencies:
-    "@apicize/toolkit": "npm:^0.8.2"
+    "@apicize/toolkit": "npm:^0.8.3"
     "@dnd-kit/core": "npm:^6.1.0"
     "@mui/material": "npm:^6.1.1"
     "@mui/system": "npm:^6.1.1"