recommit json display work

packages/builder/package.json

@@ -66,6 +66,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
+    "@zerodevx/svelte-json-view": "^1.0.7",
     "codemirror": "^5.59.0",
     "dayjs": "^1.10.8",
     "downloadjs": "1.4.7",

packages/builder/src/components/automation/AutomationBuilder/TestDisplay.svelte

@@ -1,7 +1,8 @@
 <script>
-  import { Icon, Divider, Tabs, Tab, TextArea, Label } from "@budibase/bbui"
+  import { Icon, Divider, Tabs, Tab, Label } from "@budibase/bbui"
   import FlowItemHeader from "./FlowChart/FlowItemHeader.svelte"
   import { ActionStepID } from "constants/backend/automations"
+  import { JsonView } from "@zerodevx/svelte-json-view"
 
   export let automation
   export let testResults
@@ -14,13 +15,6 @@
     return results?.steps.filter(x => x.stepId !== ActionStepID.LOOP || [])
   }
 
-  function textArea(results, message) {
-    if (!results) {
-      return message
-    }
-    return JSON.stringify(results, null, 2)
-  }
-
   $: filteredResults = prepTestResults(testResults)
 
   $: {
@@ -71,26 +65,34 @@
           {/if}
 
           <div class="tabs">
-            <Tabs noHorizPadding selected="Input">
+            <Tabs quiet noHorizPadding selected="Input">
               <Tab title="Input">
-                <TextArea
-                  minHeight="160px"
-                  disabled
-                  value={textArea(filteredResults?.[idx]?.inputs, "No input")}
-                />
+                <div class="wrap">
+                  {#if filteredResults?.[idx]?.inputs}
+                    <JsonView depth={2} json={filteredResults?.[idx]?.inputs} />
+                  {:else}
+                    No input
+                  {/if}
+                </div>
               </Tab>
               <Tab title="Output">
-                <TextArea
-                  minHeight="160px"
-                  disabled
-                  value={textArea(filteredResults?.[idx]?.outputs, "No output")}
+                <div class="wrap">
+                  {#if filteredResults?.[idx]?.inputs}
+                    <JsonView
+                      depth={2}
+                      json={filteredResults?.[idx]?.outputs}
                     />
+                  {:else}
+                    No input
+                  {/if}
+                </div>
               </Tab>
             </Tabs>
           </div>
         {/if}
       {/if}
     </div>
+
     {#if blocks.length - 1 !== idx}
       <div class="separator" />
     {/if}
@@ -104,6 +106,33 @@
     overflow: auto;
   }
 
+  .wrap {
+    font-family: monospace;
+    background-color: var(
+      --spectrum-textfield-m-background-color,
+      var(--spectrum-global-color-gray-50)
+    );
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    font-size: 12px;
+    max-height: 160px; /* Adjusted max-height */
+    height: 160px;
+    --jsonPaddingLeft: 20px;
+    --jsonborderleft: 20px;
+    overflow: auto;
+    overflow: overlay;
+    overflow-x: hidden;
+    padding-left: var(--spacing-s);
+    padding-top: var(--spacing-xl);
+    border-radius: 4px;
+  }
+
+  .wrap::-webkit-scrollbar {
+    width: 7px; /* width of the scrollbar */
+  }
+
+  .wrap::-webkit-scrollbar-track {
+    background: transparent; /* transparent track */
+  }
   .tabs {
     display: flex;
     flex-direction: column;

packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte

@@ -1,44 +1,108 @@
 <script>
-  import AutomationList from "./AutomationList.svelte"
   import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Modal, Icon } from "@budibase/bbui"
-  import Panel from "components/design/Panel.svelte"
+  import { Modal, notifications } from "@budibase/bbui"
+  import NavHeader from "components/common/NavHeader.svelte"
+  import { onMount } from "svelte"
+  import {
+    automationStore,
+    selectedAutomation,
+    userSelectedResourceMap,
+  } from "builderStore"
+  import NavItem from "components/common/NavItem.svelte"
+  import EditAutomationPopover from "./EditAutomationPopover.svelte"
 
   export let modal
   export let webhookModal
+  let searchString
+
+  $: selectedAutomationId = $selectedAutomation?._id
+
+  $: filteredAutomations = $automationStore.automations
+    .filter(automation => {
+      return (
+        !searchString ||
+        automation.name.toLowerCase().includes(searchString.toLowerCase())
+      )
+    })
+    .sort((a, b) => {
+      const lowerA = a.name.toLowerCase()
+      const lowerB = b.name.toLowerCase()
+      return lowerA > lowerB ? 1 : -1
+    })
+
+  onMount(async () => {
+    try {
+      await automationStore.actions.fetch()
+    } catch (error) {
+      notifications.error("Error getting automations list")
+    }
+  })
+
+  function selectAutomation(id) {
+    automationStore.actions.select(id)
+  }
 </script>
 
-<Panel title="Automations" borderRight noHeaderBorder titleCSS={false}>
-  <span class="panel-title-content" slot="panel-title-content">
-    <div class="header">
-      <div>Automations</div>
-      <div on:click={modal.show} class="add-automation-button">
-        <Icon name="Add" />
+<div class="side-bar">
+  <div class="side-bar-controls">
+    <NavHeader
+      title="Automations"
+      placeholder="Search for automation"
+      bind:value={searchString}
+      onAdd={() => modal.show()}
+    />
+  </div>
+  <div class="side-bar-nav">
+    {#each filteredAutomations as automation}
+      <NavItem
+        text={automation.name}
+        selected={automation._id === selectedAutomationId}
+        on:click={() => selectAutomation(automation._id)}
+        selectedBy={$userSelectedResourceMap[automation._id]}
+      >
+        <EditAutomationPopover {automation} />
+      </NavItem>
+    {/each}
   </div>
 </div>
-  </span>
-  <AutomationList />
-</Panel>
 
 <Modal bind:this={modal}>
   <CreateAutomationModal {webhookModal} />
 </Modal>
 
 <style>
-  .header {
+  .side-bar {
+    flex: 0 0 260px;
     display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    border-right: var(--border-light);
+    background: var(--spectrum-global-color-gray-100);
+    overflow: hidden;
+    transition: margin-left 300ms ease-out;
+  }
+  @media (max-width: 640px) {
+    .side-bar {
+      margin-left: -262px;
+    }
+  }
+
+  .side-bar-controls {
+    flex: 0 0 60px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
     align-items: center;
-    justify-content: space-between;
-    gap: var(--spacing-m);
+    gap: var(--spacing-l);
+    padding: 0 var(--spacing-l);
+  }
+  .side-bar-controls :global(.spectrum-Icon) {
+    color: var(--spectrum-global-color-gray-700);
   }
 
-  .add-automation-button {
-    margin-left: 130px;
-    color: var(--grey-7);
-    cursor: pointer;
-  }
-
-  .add-automation-button:hover {
-    color: var(--ink);
+  .side-bar-nav {
+    flex: 1 1 auto;
+    overflow: auto;
+    overflow-x: hidden;
   }
 </style>