From bddb6591d63f89acf220e0efbeed5f9ebdf680c4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 14 Jul 2021 15:46:31 +0100
Subject: [PATCH] Update styles of server binding panel used for formula fields
 and automation bindings

---
 .../common/bindings/ServerBindingPanel.svelte | 263 ++++++++++--------
 1 file changed, 150 insertions(+), 113 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
index 2c0e33227b..4da29cb049 100644
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@@ -1,12 +1,6 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import {
-    Input,
-    TextArea,
-    Heading,
-    Layout,
-    DrawerContent,
-  } from "@budibase/bbui"
+  import { Search, TextArea, DrawerContent } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import { handlebarsCompletions } from "constants/completions"
@@ -16,83 +10,91 @@
   const dispatch = createEventDispatcher()
 
   export let bindableProperties = []
-  export let validity = true
+  export let valid = true
   export let value = ""
 
-  let hasReadable = bindableProperties[0].readableBinding != null
   let helpers = handlebarsCompletions()
   let getCaretPosition
   let search = ""
 
   $: categories = Object.entries(groupBy("category", bindableProperties))
-  $: value && checkValid()
-  $: dispatch("update", value)
+  $: valid = isValid(readableToRuntimeBinding(bindableProperties, value))
+  $: dispatch("change", value)
   $: searchRgx = new RegExp(search, "ig")
-
-  function checkValid() {
-    if (hasReadable) {
-      const runtime = readableToRuntimeBinding(bindableProperties, value)
-      validity = isValid(runtime)
-    } else {
-      validity = isValid(value)
-    }
-  }
+  $: filteredCategories = categories.map(([categoryName, bindings]) => {
+    const filteredBindings = bindings.filter(binding => {
+      return binding.label.match(searchRgx)
+    })
+    return [categoryName, filteredBindings]
+  })
+  $: filteredHelpers = helpers?.filter(helper => {
+    return helper.label.match(searchRgx) || helper.description.match(searchRgx)
+  })
 </script>
 
 <DrawerContent>
-  <div slot="sidebar" class="list">
-    <Layout>
-      <div class="section">
-        <Heading size="S">Available bindings</Heading>
-        <Input extraThin placeholder="Search" bind:value={search} />
-      </div>
-      <div class="section">
-        {#each categories as [categoryName, bindings]}
-          <Heading size="XS">{categoryName}</Heading>
-          {#each bindings.filter( binding => binding.label.match(searchRgx) ) as binding}
-            <div
-              class="binding"
-              on:click={() => {
-                value = addToText(value, getCaretPosition(), binding)
-              }}
-            >
-              <span class="binding__label">{binding.label}</span>
-              <span class="binding__type">{binding.type}</span>
-              <br />
-              <div class="binding__description">
-                {binding.description || ""}
-              </div>
-            </div>
-          {/each}
-        {/each}
-      </div>
-      <div class="section">
-        <Heading size="XS">Helpers</Heading>
-        {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
-          <div
-            class="binding"
-            on:click={() => {
-              value = addToText(value, getCaretPosition(), helper.text)
-            }}
-          >
-            <span class="binding__label">{helper.label}</span>
-            <br />
-            <div class="binding__description">
-              {@html helper.description || ""}
-            </div>
-            <pre>{helper.example || ""}</pre>
-          </div>
-        {/each}
-      </div>
-    </Layout>
-  </div>
-  <div class="text">
+  <svelte:fragment slot="sidebar">
+    <div class="container">
+      <section>
+        <div class="heading">Search</div>
+        <Search placeholder="Search" bind:value={search} />
+      </section>
+      {#each filteredCategories as [categoryName, bindings]}
+        {#if bindings.length}
+          <section>
+            <div class="heading">{categoryName}</div>
+            <ul>
+              {#each bindings as binding}
+                <li
+                  on:click={() => {
+                    value = addToText(value, getCaretPosition(), binding)
+                  }}
+                >
+                  <span class="binding__label">{binding.label}</span>
+                  <span class="binding__type">{binding.type}</span>
+                  {#if binding.description}
+                    <br />
+                    <div class="binding__description">
+                      {binding.description || ""}
+                    </div>
+                  {/if}
+                </li>
+              {/each}
+            </ul>
+          </section>
+        {/if}
+      {/each}
+      {#if filteredHelpers?.length}
+        <section>
+          <div class="heading">Helpers</div>
+          <ul>
+            {#each filteredHelpers as helper}
+              <li
+                on:click={() => {
+                  value = addToText(value, getCaretPosition(), helper.text)
+                }}
+              >
+                <div class="helper">
+                  <div class="helper__name">{helper.displayText}</div>
+                  <div class="helper__description">
+                    {@html helper.description}
+                  </div>
+                  <pre class="helper__example">{helper.example || ''}</pre>
+                </div>
+              </li>
+            {/each}
+          </ul>
+        </section>
+      {/if}
+    </div>
+  </svelte:fragment>
+  <div class="main">
     <TextArea
       bind:getCaretPosition
       bind:value
       placeholder="Add text, or click the objects on the left to add them to the textbox."
     />
-    {#if !validity}
+    {#if !valid}
       <p class="syntax-error">
         Current Handlebars syntax is invalid, please check the guide
         <a href="https://handlebarsjs.com/guide/">here</a>
@@ -103,70 +105,105 @@
 </DrawerContent>
 
 <style>
-  .list {
-    grid-gap: var(--spacing-s);
-    border-right: var(--border-light);
-    overflow-y: auto;
-  }
-  .section {
-    display: grid;
-    grid-gap: var(--spacing-s);
-  }
-
-  .text {
-    padding: var(--spacing-l);
-    font-family: var(--font-sans);
-  }
-  .text :global(textarea) {
+  .main :global(textarea) {
     min-height: 150px !important;
   }
-  .text :global(p) {
+
+  .container {
+    margin: calc(-1 * var(--spacing-xl));
+  }
+  .heading {
+    font-size: var(--font-size-s);
+    font-weight: 600;
+    text-transform: uppercase;
+    color: var(--spectrum-global-color-gray-600);
+    padding: var(--spacing-xl) 0 var(--spacing-m) 0;
+  }
+
+  section {
+    padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
+  }
+  section:not(:first-child) {
+    border-top: var(--border-light);
+  }
+  ul {
+    list-style: none;
+    padding: 0;
     margin: 0;
   }
 
-  .binding {
-    font-size: 12px;
+  li {
+    font-size: var(--font-size-s);
+    padding: var(--spacing-m);
+    border-radius: 4px;
     border: var(--border-light);
-    border-width: 1px 0 0 0;
-    padding: var(--spacing-m) 0;
-    margin: auto 0;
-    align-items: center;
+    transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
+      border-color 130ms ease-in-out;
+  }
+  li:not(:last-of-type) {
+    margin-bottom: var(--spacing-s);
+  }
+  li :global(*) {
+    transition: color 130ms ease-in-out;
+  }
+  li:hover {
+    color: var(--spectrum-global-color-gray-900);
+    background-color: var(--spectrum-global-color-gray-50);
+    border-color: var(--spectrum-global-color-gray-500);
     cursor: pointer;
   }
-  .binding:hover {
-    background-color: var(--grey-2);
-    cursor: pointer;
+  li:hover :global(*) {
+    color: var(--spectrum-global-color-gray-900) !important;
   }
+
+  .helper {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
+  }
+  .helper__name {
+    font-weight: bold;
+  }
+  .helper__description,
+  .helper__description :global(*) {
+    color: var(--spectrum-global-color-gray-700);
+  }
+  .helper__example {
+    white-space: normal;
+    margin: 0.5rem 0 0 0;
+    font-weight: 700;
+  }
+  .helper__description :global(p) {
+    margin: 0;
+  }
+
+  .syntax-error {
+    padding-top: var(--spacing-m);
+    color: var(--red);
+    font-size: 12px;
+  }
+  .syntax-error a {
+    color: var(--red);
+    text-decoration: underline;
+  }
+
   .binding__label {
     font-weight: 600;
     text-transform: capitalize;
   }
   .binding__description {
-    color: var(--grey-8);
-    margin-top: 2px;
+    color: var(--spectrum-global-color-gray-700);
+    margin: 0.5rem 0 0 0;
     white-space: normal;
   }
-
-  pre {
-    white-space: normal;
-  }
-
   .binding__type {
     font-family: monospace;
-    background-color: var(--grey-2);
-    border-radius: var(--border-radius-m);
-    padding: 2px;
+    background-color: var(--spectrum-global-color-gray-200);
+    border-radius: var(--border-radius-s);
+    padding: 2px 4px;
     margin-left: 2px;
     font-weight: 600;
   }
-
-  .syntax-error {
-    color: var(--red);
-    font-size: 12px;
-  }
-
-  .syntax-error a {
-    color: var(--red);
-    text-decoration: underline;
-  }
 </style>