create upload button for downloaded json/txt files

Author: wenli-cai

gradle/libs.versions.toml

@@ -91,6 +91,7 @@ timber = "5.0.1"
 truth = "1.4.4"
 turbine = "1.0.0"
 vanniktech-publish = "0.32.0"
+uiGraphicsAndroidVersion = "1.8.2"
 
 [plugins]
 
@@ -268,5 +269,6 @@ truth = { module = "com.google.truth:truth", version.ref = "truth" }
 turbine = { module = "app.cash.turbine:turbine", version.ref = "turbine" }
 
 vanniktech-publish = { module = "com.vanniktech:gradle-maven-publish-plugin", version.ref = "vanniktech-publish" }
+androidx-ui-graphics-android = { group = "androidx.compose.ui", name = "ui-graphics-android", version.ref = "uiGraphicsAndroidVersion" }
 
 [bundles]

workflow-trace-viewer/src/jvmMain/kotlin/com/squareup/workflow1/traceviewer/App.kt

@@ -1,42 +1,52 @@
 package com.squareup.workflow1.traceviewer
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults.buttonColors
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import com.squareup.workflow1.traceviewer.FileReader.fetchFile
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.sp
 import io.github.vinceglb.filekit.PlatformFile
+import io.github.vinceglb.filekit.dialogs.FileKitType
+import io.github.vinceglb.filekit.dialogs.compose.rememberFilePickerLauncher
+import io.github.vinceglb.filekit.readString
 
 @Composable
-fun App() {
-  val jsonString = fetchFile()
-  val root = jsonString?.let { FetchRoot(it) }
+public fun App() {
+  Box {
+    val selectedFile = remember { mutableStateOf<PlatformFile?>(null)}
 
-  var selectedFile = remember { mutableStateOf<PlatformFile?>(null)}
+    if (selectedFile.value != null){
+      SandboxBackground { WorkflowContent(selectedFile.value) }
+    }
 
-  // UploadFile { selectedFile.value = it }
+    UploadFile{ selectedFile.value = it}
+  }
+}
+
+@Composable
+private fun WorkflowContent(file: PlatformFile?) {
+  val jsonString = remember { mutableStateOf<String?>(null) }
+  LaunchedEffect(file){
+    jsonString.value = file?.readString()
+  }
+  val root = jsonString.value?.let { FetchRoot(it) }
 
   if (root != null) {
     DrawWorkflowTree(root)
   } else {
     Text("Empty data or failed to parse data") // TODO: proper handling of error
   }
 }
-
-
-object FileReader {
-  fun fetchFile() : String?{
-    return javaClass.getResource("/workflow-simple.json")?.readText()
-  }
-}
-
-//
-// @Composable
-// private fun UploadFile(onFileSelected: (PlatformFile?) -> Unit) {
-//   val launcher = rememberFilePickerLauncher(
-//     type = FileKitType.Custom(listOf("json","txt")),
-//     title = "Select Workflow Trace File"
-//   ) {
-//     onFileSelected(it)
-//   }
-// }

workflow-trace-viewer/src/jvmMain/kotlin/com/squareup/workflow1/traceviewer/Main.kt

@@ -3,8 +3,7 @@ package com.squareup.workflow1.traceviewer
 import androidx.compose.ui.window.singleWindowApplication
 
 fun main() {
-  // FileKit.init(appId = "com.squareup.workflow1.traceviewer")
   singleWindowApplication(title = "Workflow Trace Viewer") {
-    SandboxBackground { App() }
+    App()
   }
 }

workflow-trace-viewer/src/jvmMain/kotlin/com/squareup/workflow1/traceviewer/UploadFile.kt

@@ -0,0 +1,52 @@
+package com.squareup.workflow1.traceviewer
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults.buttonColors
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.sp
+import io.github.vinceglb.filekit.PlatformFile
+import io.github.vinceglb.filekit.dialogs.FileKitType
+import io.github.vinceglb.filekit.dialogs.compose.rememberFilePickerLauncher
+
+@Composable
+public fun UploadFile(onFileSelected: (PlatformFile?) -> Unit) {
+  Box (modifier = Modifier
+    .padding(16.dp)
+    .fillMaxSize()
+  ){
+    val launcher = rememberFilePickerLauncher(
+      type = FileKitType.File(listOf("json","txt")),
+      title = "Select Workflow Trace File"
+    ) {
+      onFileSelected(it)
+    }
+    Button(
+      onClick = { launcher.launch() },
+      modifier = Modifier
+        .align(Alignment.BottomEnd),
+      shape = CircleShape,
+      colors = buttonColors(Color.Black)
+    ) {
+      Text(
+        text = "+",
+        color = Color.White,
+        fontSize = 24.sp,
+        fontWeight = androidx.compose.ui.text.font.FontWeight.Bold
+      )
+    }
+  }
+}