From d2cdee13aec50d912fea881cf90ad8562a38c088 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 29 Feb 2024 20:18:20 +0000
Subject: [PATCH] Update automation code editors to work with new components

---
 .../SetupPanel/AutomationBlockSetup.svelte    | 24 ++++---------------
 .../common/CodeEditor/CodeEditor.svelte       | 15 ++++++++----
 .../common/bindings/BindingPanel.svelte       |  9 -------
 .../common/bindings/BindingSidePanel.svelte   |  6 ++---
 4 files changed, 17 insertions(+), 37 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 2434002d52..aff9e43aa7 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -547,7 +547,7 @@
           {:else if value.customType === "code"}
             <CodeEditorModal>
               <div class:js-editor={editingJs}>
-                <div class:js-code={editingJs} style="width: 100%">
+                <div class:js-code={editingJs} style="width:100%;height:500px;">
                   <CodeEditor
                     value={inputData[key]}
                     on:change={e => {
@@ -560,20 +560,10 @@
                     autocompleteEnabled={codeMode !== EditorModes.JS}
                     bind:getCaretPosition
                     bind:insertAtPos
-                    height={500}
+                    placeholder={codeMode === EditorModes.Handlebars
+                      ? "Add bindings by typing {{"
+                      : null}
                   />
-                  <div class="messaging">
-                    {#if codeMode === EditorModes.Handlebars}
-                      <Icon name="FlashOn" />
-                      <div class="messaging-wrap">
-                        <div>
-                          Add available bindings by typing <strong>
-                            &#125;&#125;
-                          </strong>
-                        </div>
-                      </div>
-                    {/if}
-                  </div>
                 </div>
                 {#if editingJs}
                   <div class="js-binding-picker">
@@ -650,11 +640,6 @@
     width: 320px;
   }
 
-  .messaging {
-    display: flex;
-    align-items: center;
-    margin-top: var(--spacing-xl);
-  }
   .fields {
     display: flex;
     flex-direction: column;
@@ -666,7 +651,6 @@
   .block-field {
     display: flex; /* Use Flexbox */
     justify-content: space-between;
-    align-items: center;
     flex-direction: row; /* Arrange label and field side by side */
     align-items: center; /* Align vertically in the center */
     gap: 10px; /* Add some space between label and field */
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index 58942e5091..080476a9b7 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -47,7 +47,6 @@
 
   export let label
   export let completions = []
-  export let height = 200
   export let resize = "none"
   export let mode = EditorModes.Handlebars
   export let value = ""
@@ -241,8 +240,6 @@
     }
   }
 
-  $: editorHeight = typeof height === "number" ? `${height}px` : height
-
   // Init when all elements are ready
   $: if (mounted && !isEditorInitialised) {
     isEditorInitialised = true
@@ -284,14 +281,22 @@
 
 <style>
   /* Editor */
+  .code-editor {
+    font-size: 12px;
+    height: 100%;
+  }
   .code-editor :global(.cm-editor) {
+    height: 100%;
     background: var(--spectrum-global-color-gray-50) !important;
+    outline: none;
+    border: none;
+    border-radius: 0;
   }
   .code-editor :global(.cm-content) {
     padding: 10px 0;
   }
-  .code-editor {
-    font-size: 12px;
+  .code-editor > div {
+    height: 100%;
   }
 
   /* Active line */
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index a3d57e1d5c..b40ce1aa6a 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -344,15 +344,6 @@
     height: 0;
     position: relative;
   }
-  .editor :global(.code-editor),
-  .editor :global(.code-editor > div),
-  .editor :global(.cm-editor) {
-    height: 100%;
-  }
-  .editor :global(.cm-editor) {
-    border: none;
-    border-radius: 0;
-  }
 
   /* Overlay */
   .mode-overlay {
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 1595aed3b5..d51e30afa7 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -362,15 +362,15 @@
     padding: var(--spacing-m);
     border-radius: 4px;
     background-color: var(--spectrum-global-color-gray-200);
-    transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
-      border-color 130ms ease-in-out;
+    transition: background-color 130ms ease-out, color 130ms ease-out,
+      border-color 130ms ease-out;
     word-wrap: break-word;
   }
   li:not(:last-of-type) {
     margin-bottom: var(--spacing-s);
   }
   li :global(*) {
-    transition: color 130ms ease-in-out;
+    transition: color 130ms ease-out;
   }
   li:hover {
     color: var(--spectrum-global-color-gray-900);