From e7d38878f52812684242f54d6cf4dbc004749996 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 24 Feb 2021 10:33:54 +0100
Subject: [PATCH] Revert "work on converting popover to drawer"

This reverts commit fb1eb55ba2f485f4be02f570a0b0a9433b286f7a.
---
 .../SetupPanel/AutomationBindingPanel.svelte  | 203 ------------------
 .../SetupPanel/AutomationBlockSetup.svelte    |  22 +-
 .../SetupPanel/GenericBindingPopover.svelte   |   5 +-
 .../automation/SetupPanel/RowSelector.svelte  |   9 +-
 .../components/common/BindableInput.svelte    |  76 +++----
 .../common/DrawerBindableInput.svelte         |   6 +-
 6 files changed, 47 insertions(+), 274 deletions(-)
 delete mode 100644 packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
deleted file mode 100644
index 12f4efc110..0000000000
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
+++ /dev/null
@@ -1,203 +0,0 @@
-<script>
-    import groupBy from "lodash/fp/groupBy"
-    import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
-    import { createEventDispatcher } from "svelte"
-    import { isValid } from "@budibase/string-templates"
-    import {
-      getBindableProperties,
-      readableToRuntimeBinding,
-    } from "builderStore/dataBinding"
-    import { currentAsset, store } from "../../../builderStore"
-    import { handlebarsCompletions } from "constants/completions"
-  
-    const dispatch = createEventDispatcher()
-  
-    export let bindableProperties
-    export let value = ""
-    export let bindingDrawer
-    export let valid = true
-    export let bindings = []
-  
-    let originalValue = value
-    let helpers = handlebarsCompletions()
-    let getCaretPosition
-    let search = ""
-    let validity = true
-  
-    $: categories = Object.entries(groupBy("category", bindings))
-    $: value && checkValid()
-    $: bindableProperties = getBindableProperties(
-      $currentAsset,
-      $store.selectedComponentId
-    )
-    $: console.log(value)
-    $: dispatch("update", value)
-    $: searchRgx = new RegExp(search, "ig")
-  
-    function checkValid() {
-        const runtimeValue = readableToRuntimeBinding(bindings, value)
-        validity = isValid(runtimeValue)
-    }
-  
-    function addToText(binding) {
-        const position = getCaretPosition()
-        const toAdd = `{{ ${binding.path} }}`
-        if (position.start) {
-        value =
-            value.substring(0, position.start) +
-            toAdd +
-            value.substring(position.end, value.length)
-        } else {
-        value += toAdd
-        }
-    }
-    export function cancel() {
-      dispatch("update", originalValue)
-      bindingDrawer.close()
-    }
-</script>
-
-<div class="container">
-    <div class="list">
-        <Heading small>Available bindings</Heading>
-        <Spacer medium />
-        <Input extraThin placeholder="Search" bind:value={search} />
-        <Spacer medium />
-        {#each categories as [categoryName, bindings]}
-        <Heading extraSmall>{categoryName}</Heading>
-        <Spacer extraSmall />
-        {#each bindings.filter(binding =>
-            binding.label.match(searchRgx)
-        ) as binding}
-            <div class="binding" on:click={() => addToText(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}
-        <Heading extraSmall>Helpers</Heading>
-        <Spacer extraSmall />
-        {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
-            <div class="binding" on:click={() => addToText(helper)}>
-                <span class="binding__label">{helper.label}</span>
-                <br />
-                <div class="binding__description">
-                {@html helper.description || ''}
-                </div>
-                <pre>{helper.example || ''}</pre>
-            </div>
-        {/each}
-    </div>
-    <div class="text">
-        <TextArea
-        bind:getCaretPosition
-        thin
-        bind:value
-        placeholder="Add text, or click the objects on the left to add them to the textbox." />
-        {#if !validity}
-        <p class="syntax-error">
-            Current Handlebars syntax is invalid, please check the guide
-            <a href="https://handlebarsjs.com/guide/">here</a>
-            for more details.
-        </p>
-        {/if}
-    </div>
-</div>
-
-
-<style>
-    .container {
-      height: 40vh;
-      overflow-y: auto;
-      display: grid;
-      grid-template-columns: 280px 1fr;
-    }
-  
-    .list {
-        border-right: var(--border-light);
-        padding: var(--spacing-l);
-        overflow: auto;
-    }
-    .list {
-        border-right: var(--border-light);
-        padding: var(--spacing-l);
-        overflow: auto;
-    }
-
-    .list::-webkit-scrollbar {
-        display: none;
-    }
-
-    .text {
-        padding: var(--spacing-l);
-        font-family: var(--font-sans);
-    }
-    .text :global(textarea) {
-        min-height: 100px;
-    }
-    .text :global(p) {
-        margin: 0;
-    }
-  
-    .binding {
-      font-size: 12px;
-      padding: var(--spacing-s);
-      border-radius: var(--border-radius-m);
-    }
-    .binding:hover {
-      background-color: var(--grey-2);
-      cursor: pointer;
-    }
-    .binding__label {
-      font-weight: 500;
-      text-transform: capitalize;
-    }
-    .binding__description {
-      color: var(--grey-8);
-      margin-top: 2px;
-      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;
-      margin-left: 2px;
-      font-weight: 500;
-    }
-  
-    .editor {
-      padding-left: var(--spacing-l);
-    }
-    .editor :global(textarea) {
-      min-height: 60px;
-    }
-  
-    .controls {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      grid-gap: var(--spacing-l);
-      align-items: center;
-      margin-top: var(--spacing-m);
-    }
-  
-    .syntax-error {
-      color: var(--red);
-      font-size: 12px;
-    }
-  
-    .syntax-error a {
-      color: var(--red);
-      text-decoration: underline;
-    }
-  </style>
-  
\ No newline at end of file
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index f7d945464e..ed89d4316d 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -5,8 +5,7 @@
   import { Button, Input, Select, Label } from "@budibase/bbui"
   import { automationStore } from "builderStore"
   import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
-  import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
-  import AutomationBindingPanel from './AutomationBindingPanel.svelte'
+  import BindableInput from "../../common/BindableInput.svelte"
 
   export let block
   export let webhookModal
@@ -65,12 +64,10 @@
     {:else if value.customType === 'password'}
       <Input type="password" extraThin bind:value={block.inputs[key]} />
     {:else if value.customType === 'email'}
-      <DrawerBindableInput
-        panel={AutomationBindingPanel}
+      <BindableInput
         type={'email'}
         extraThin
-        value={block.inputs[key]}
-        on:update={e => block.inputs[key] = e.detail}
+        bind:value={block.inputs[key]}
         {bindings} />
     {:else if value.customType === 'table'}
       <TableSelector bind:value={block.inputs[key]} />
@@ -81,12 +78,10 @@
     {:else if value.customType === 'triggerSchema'}
       <SchemaSetup bind:value={block.inputs[key]} />
     {:else if value.type === 'string' || value.type === 'number'}
-      <DrawerBindableInput
-        panel={AutomationBindingPanel}
+      <BindableInput
         type={value.customType}
         extraThin
-        value={block.inputs[key]}
-        on:update={e => block.inputs[key] = e.detail}
+        bind:value={block.inputs[key]}
         {bindings} />
     {/if}
   </div>
@@ -107,4 +102,11 @@
     font-size: var(--font-size-xs);
     color: var(--grey-7);
   }
+
+  textarea {
+    min-height: 150px;
+    font-family: inherit;
+    padding: 12px;
+    margin-top: 8px;
+  }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte b/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
index ce57642128..e6818518ad 100644
--- a/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
@@ -14,6 +14,8 @@
   import { handlebarsCompletions } from "constants/completions"
   import { readableToRuntimeBinding } from "builderStore/dataBinding"
 
+  const dispatch = createEventDispatcher()
+
   export let value = ""
   export let bindings = []
   export let anchor
@@ -120,10 +122,9 @@
 
 <style>
   .container {
-    height: 40vh;
-    overflow-y: auto;
     display: grid;
     grid-template-columns: 280px 1fr;
+    width: 800px;
   }
 
   .bindings {
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 668a777e53..7b010f2ecb 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -1,8 +1,7 @@
 <script>
   import { backendUiStore } from "builderStore"
   import { Select } from "@budibase/bbui"
-  import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
-  import AutomationBindingPanel from './AutomationBindingPanel.svelte'
+  import BindableInput from "../../common/BindableInput.svelte"
 
   export let value
   export let bindings
@@ -40,11 +39,9 @@
             {/each}
           </Select>
         {:else if schema.type === 'string' || schema.type === 'number'}
-          <DrawerBindableInput
-            panel={AutomationBindingPanel}
+          <BindableInput
             extraThin
-            value={value[field]}
-            on:update={e => value[field] = e.detail}
+            bind:value={value[field]}
             label={field}
             type="string"
             {bindings} />
diff --git a/packages/builder/src/components/common/BindableInput.svelte b/packages/builder/src/components/common/BindableInput.svelte
index 6368b97e4c..6234e3e046 100644
--- a/packages/builder/src/components/common/BindableInput.svelte
+++ b/packages/builder/src/components/common/BindableInput.svelte
@@ -1,64 +1,44 @@
 <script>
-  import BindingPanel from "../automation/SetupPanel/AutomationBindingPanel.svelte"
-  import { runtimeToReadableBinding, readableToRuntimeBinding } from "builderStore/dataBinding"
-  import { Body, Button, Input, Icon, Drawer } from "@budibase/bbui"
-  
   import { createEventDispatcher } from "svelte"
+  import GenericBindingPopover from "../automation/SetupPanel/GenericBindingPopover.svelte"
+  import { Input, Icon } from "@budibase/bbui"
+
   const dispatch = createEventDispatcher()
-  
-  export let value = ""
+
   export let bindings = []
-  export let thin = true
-  export let label = ""
-  export let title = "Bindings"
-  export let placeholder
+  export let value
 
+  let anchor
+  let popover = undefined
+  let enrichedValue
+  let inputProps
 
-  let bindingDrawer
-
-  $: tempValue = value
-  $: readableValue = runtimeToReadableBinding(bindings, value)
-
-  const handleClose = () => {
-    onChange(tempValue)
-    bindingDrawer.hide()
-  }
-
-  const onChange = value => {
-    dispatch("change", readableToRuntimeBinding(bindings, value))
+  // Extract all other props to pass to input component
+  $: {
+    let { bindings, ...otherProps } = $$props
+    inputProps = otherProps
   }
+  $: value && dispatch("change", value)
 </script>
 
-<div class="control">
-  <Input
-    {thin}
-    {label}
-    value={readableValue}
-    on:change={event => onChange(event.target.value)}
-    {placeholder} />
-  <div class="icon" on:click={bindingDrawer.show}>
-    <Icon name="lightning" />
+<div class="container" bind:this={anchor}>
+  <Input {...inputProps} bind:value />
+  <div class="icon" on:click={popover.show}>
+    <Icon name="edit" />
   </div>
 </div>
-<Drawer bind:this={bindingDrawer} {title}>
-  <div slot="description">
-    <Body extraSmall grey>
-      Add the objects on the left to enrich your text.
-    </Body>
-  </div>
-  <heading slot="buttons">
-    <Button thin blue on:click={handleClose}>Save</Button>
-  </heading>
-  <div slot="body">
-    <BindingPanel
-      {value}
-      close={handleClose}
-      on:update={event => (tempValue = event.detail)}
-      {bindings} />
-  </div>
-</Drawer>
+<GenericBindingPopover
+  {anchor}
+  {bindings}
+  bind:value
+  bind:popover
+  align="right" />
 
 <style>
+  .container {
+    position: relative;
+  }
+
   .icon {
     right: 2px;
     top: 5px;
diff --git a/packages/builder/src/components/common/DrawerBindableInput.svelte b/packages/builder/src/components/common/DrawerBindableInput.svelte
index f0a6e3ae49..b534376a55 100644
--- a/packages/builder/src/components/common/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/DrawerBindableInput.svelte
@@ -10,16 +10,13 @@
 
   export let value = ""
   export let bindings = []
-  export let label
   export let thin = true
   export let title = "Bindings"
   export let placeholder
-  export let panel = BindingPanel
 
   let bindingDrawer
 
   $: tempValue = value
-  $: console.log('Value: ', tempValue)
   $: readableValue = runtimeToReadableBinding(bindings, value)
 
   const handleClose = () => {
@@ -35,7 +32,6 @@
 <div class="control">
   <Input
     {thin}
-    {label}
     value={readableValue}
     on:change={event => onChange(event.target.value)}
     {placeholder} />
@@ -53,7 +49,7 @@
     <Button thin blue on:click={handleClose}>Save</Button>
   </heading>
   <div slot="body">
-    <svelte:component this={panel}
+    <BindingPanel
       value={readableValue}
       close={handleClose}
       on:update={event => (tempValue = event.detail)}