From 17d02af66867844734f2c1c383535104dd537ce3 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 24 Nov 2023 11:11:59 +0000
Subject: [PATCH] update run test modal

---
 .../FlowChart/TestDataModal.svelte            | 79 ++++++++++++-------
 1 file changed, 50 insertions(+), 29 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
index 5c97d77ae8..13db389a2e 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
@@ -6,6 +6,7 @@
     TextArea,
     Label,
     notifications,
+    ActionButton,
   } from "@budibase/bbui"
   import { automationStore, selectedAutomation } from "builderStore"
   import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
@@ -55,50 +56,70 @@
       notifications.error(error)
     }
   }
+
+  const toggle = () => {
+    selectedValues = !selectedValues
+    selectedJSON = !selectedJSON
+    console.log(selectedJSON)
+  }
+  let selectedValues = true
+  let selectedJSON = false
 </script>
 
 <ModalContent
   title="Add test data"
-  confirmText="Test"
-  size="M"
+  confirmText="TeRun testst"
+  size="L"
   showConfirmButton={true}
   disabled={isError}
   onConfirm={testAutomation}
   cancelText="Cancel"
 >
-  <Tabs selected="Form" quiet>
-    <Tab icon="Form" title="Form">
-      <div class="tab-content-padding">
-        <AutomationBlockSetup
-          {testData}
-          {schemaProperties}
-          isTestModal
-          block={trigger}
-        />
-      </div></Tab
-    >
-    <Tab icon="FileJson" title="JSON">
-      <div class="tab-content-padding">
-        <Label>JSON</Label>
-        <div class="text-area-container">
-          <TextArea
-            value={JSON.stringify($selectedAutomation.testData, null, 2)}
-            error={failedParse}
-            on:change={e => parseTestJSON(e)}
-          />
-        </div>
-      </div>
-    </Tab>
-  </Tabs>
+  <div class="size">
+    <div class="options">
+      <ActionButton quiet selected={selectedValues} on:click={toggle}
+        >Use values</ActionButton
+      >
+      <ActionButton quiet selected={selectedJSON} on:click={toggle}
+        >Use JSON</ActionButton
+      >
+    </div>
+  </div>
+
+  {#if selectedValues}
+    <div class="tab-content-padding">
+      <AutomationBlockSetup
+        {testData}
+        {schemaProperties}
+        isTestModal
+        block={trigger}
+      />
+    </div>
+  {/if}
+  {#if selectedJSON}
+    <div class="text-area-container">
+      <TextArea
+        value={JSON.stringify($selectedAutomation.testData, null, 2)}
+        error={failedParse}
+        on:change={e => parseTestJSON(e)}
+      />
+    </div>
+  {/if}
 </ModalContent>
 
 <style>
   .text-area-container :global(textarea) {
-    min-height: 200px;
-    height: 200px;
+    min-height: 300px;
+    height: 300px;
   }
 
   .tab-content-padding {
-    padding: 0 var(--spacing-xl);
+    padding: 0 var(--spacing-s);
+  }
+
+  .options {
+    display: flex;
+    align-items: center;
+    gap: 8px;
   }
 </style>