Merge branch 'feature/prettify-request-json' into 'main'

Prettify request json

See merge request products/hello-http!22

CHANGELOG.md

@@ -6,7 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
-Nothing yet.
+### Added
+
+- Prettify button in JSON request editor. This includes GraphQL and gRPC.
 
 ## [1.6.0] - 2024-07-22
 

src/jvmMain/kotlin/com/sunnychung/application/multiplatform/hellohttp/ux/FloatingButtonContainer.kt

@@ -0,0 +1,87 @@
+package com.sunnychung.application.multiplatform.hellohttp.ux
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.pointer.PointerEventType
+import androidx.compose.ui.input.pointer.onPointerEvent
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.sunnychung.application.multiplatform.hellohttp.ux.local.LocalColor
+
+@Composable
+@OptIn(ExperimentalComposeUiApi::class)
+fun FloatingButtonContainer(
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = true,
+    size: Dp = 20.dp,
+    innerPadding: Dp = 4.dp,
+    outerPadding: PaddingValues = PaddingValues(top = 4.dp, end = 12.dp),
+    buttonImage: String,
+    tooltip: String? = null,
+    onClickButton: (String) -> Unit,
+    contentView: @Composable () -> Unit,
+) {
+    if (!isEnabled) {
+        Box(modifier = modifier) {
+            contentView()
+        }
+        return
+    }
+
+    var isShowFloatingButton by remember { mutableStateOf(false) }
+
+    Box(
+        modifier = modifier
+            .onPointerEvent(PointerEventType.Enter) {
+                isShowFloatingButton = true
+            }
+            .onPointerEvent(PointerEventType.Exit) {
+                isShowFloatingButton = false
+            }
+    ) {
+        contentView()
+        if (isShowFloatingButton) {
+            AppTooltipArea(
+                isVisible = tooltip != null,
+                tooltipText = tooltip ?: "",
+                modifier = Modifier
+                    .align(Alignment.TopEnd)
+                    .padding(outerPadding)
+            ) {
+                FloatingButton(
+                    image = buttonImage,
+                    onClick = onClickButton,
+                    size = size,
+                    innerPadding = innerPadding,
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun FloatingButton(image: String, size: Dp = 20.dp, innerPadding: Dp = 4.dp, modifier: Modifier = Modifier, onClick: (String) -> Unit) {
+    val colours = LocalColor.current
+    AppImageButton(
+        resource = image,
+        size = size + innerPadding * 2,
+        innerPadding = PaddingValues(innerPadding),
+        color = colours.copyButton,
+        onClick = {
+            onClick(image)
+        },
+        modifier = modifier
+            .background(colours.backgroundFloatingButton, RoundedCornerShape(4.dp))
+    )
+}

src/jvmMain/kotlin/com/sunnychung/application/multiplatform/hellohttp/ux/RequestEditorView.kt

@@ -54,6 +54,7 @@ import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import com.sunnychung.application.multiplatform.hellohttp.AppContext
 import com.sunnychung.application.multiplatform.hellohttp.model.ContentType
 import com.sunnychung.application.multiplatform.hellohttp.model.Environment
 import com.sunnychung.application.multiplatform.hellohttp.model.FileBody
@@ -72,6 +73,7 @@ import com.sunnychung.application.multiplatform.hellohttp.model.UserRequestTempl
 import com.sunnychung.application.multiplatform.hellohttp.model.isValidHttpMethod
 import com.sunnychung.application.multiplatform.hellohttp.network.ConnectionStatus
 import com.sunnychung.application.multiplatform.hellohttp.network.hostFromUrl
+import com.sunnychung.application.multiplatform.hellohttp.parser.JsonParser
 import com.sunnychung.application.multiplatform.hellohttp.platform.MacOS
 import com.sunnychung.application.multiplatform.hellohttp.platform.currentOS
 import com.sunnychung.application.multiplatform.hellohttp.util.copyWithChange
@@ -1122,6 +1124,7 @@ private fun RequestBodyEditor(
             ContentType.Json, ContentType.Raw -> {
                 RequestBodyTextEditor(
                     request = request,
+                    contentType = selectedContentType,
                     onRequestModified = onRequestModified,
                     environmentVariableKeys = environmentVariableKeys,
                     selectedExample = selectedExample,
@@ -1234,6 +1237,7 @@ private fun RequestBodyEditor(
             ContentType.Graphql -> {
                 RequestBodyTextEditor(
                     request = request,
+                    contentType = selectedContentType,
                     onRequestModified = onRequestModified,
                     environmentVariableKeys = environmentVariableKeys,
                     selectedExample = selectedExample,
@@ -1268,6 +1272,7 @@ private fun RequestBodyEditor(
                 }
                 RequestBodyTextEditor(
                     request = request,
+                    contentType = ContentType.Json,
                     onRequestModified = onRequestModified,
                     environmentVariableKeys = environmentVariableKeys,
                     selectedExample = selectedExample,
@@ -1323,6 +1328,7 @@ private fun OverrideCheckboxWithLabel(
 @Composable
 private fun RequestBodyTextEditor(
     modifier: Modifier,
+    contentType: ContentType,
     request: UserRequestTemplate,
     onRequestModified: (UserRequestTemplate?) -> Unit,
     environmentVariableKeys: Set<String>,
@@ -1336,25 +1342,48 @@ private fun RequestBodyTextEditor(
     val colors = LocalColor.current
     val baseExample = request.examples.first()
 
-    if (overridePredicate(selectedExample.overrides)) {
-        CodeEditorView(
-            modifier = modifier,
-            isReadOnly = false,
-            isEnableVariables = true,
-            knownVariables = environmentVariableKeys,
-            text = translateToText(selectedExample) ?: "",
-            onTextChange = {
-                onRequestModified(
-                    request.copy(
-                        examples = request.examples.copyWithChange(
-                            translateTextChangeToNewUserRequestExample(it)
-                        )
-                    )
+    val changeText = { it: String ->
+        onRequestModified(
+            request.copy(
+                examples = request.examples.copyWithChange(
+                    translateTextChangeToNewUserRequestExample(it)
                 )
-            },
-            transformations = transformations,
-            testTag = testTag ?: TestTag.RequestStringBodyTextField.name,
+            )
         )
+    }
+
+    val prettifyHandler = when (contentType) {
+        ContentType.Json -> { code: String ->
+            try {
+                val prettified = JsonParser(code).prettify().prettyString
+                changeText(prettified)
+            } catch (e: Throwable) {
+                AppContext.ErrorMessagePromptViewModel.showErrorMessage(e.message ?: "Error while prettifying as JSON")
+            }
+        }
+
+        else -> null
+    }
+
+    if (overridePredicate(selectedExample.overrides)) {
+        val content = translateToText(selectedExample) ?: ""
+        FloatingButtonContainer(
+            buttonImage = "prettier.svg",
+            tooltip = "Prettify",
+            isEnabled = prettifyHandler != null,
+            onClickButton = { prettifyHandler!!(content) },
+            modifier = modifier,
+        ) {
+            CodeEditorView(
+                isReadOnly = false,
+                isEnableVariables = true,
+                knownVariables = environmentVariableKeys,
+                text = content,
+                onTextChange = changeText,
+                transformations = transformations,
+                testTag = testTag ?: TestTag.RequestStringBodyTextField.name,
+            )
+        }
     } else {
         CodeEditorView(
             modifier = modifier,