Clean up usages of drawers everywhere

packages/bbui/src/Drawer/Drawer.svelte

@@ -52,11 +52,12 @@
 <script>
   import Portal from "svelte-portal"
   import Button from "../Button/Button.svelte"
-  import { setContext, createEventDispatcher, onDestroy } from "svelte"
+  import { setContext, createEventDispatcher, onMount } from "svelte"
   import { generate } from "shortid"
   import { fade } from "svelte/transition"
 
   export let title
+  export let forceModal = false
 
   const dispatch = createEventDispatcher()
   const spacing = 11
@@ -89,6 +90,9 @@
     if (visible) {
       return
     }
+    if (forceModal) {
+      modal.set(true)
+    }
     observe()
     visible = true
     dispatch("drawerShow", drawerId)
@@ -112,6 +116,7 @@
     hide,
     show,
     modal,
+    forceModal,
   })
 
   const easeInOutQuad = x => {
@@ -141,9 +146,14 @@
     return 1 - lim * 0.1
   }
 
-  onDestroy(() => {
+  onMount(() => {
-    if (visible) {
+    if (forceModal) {
-      hide()
+      modal.set(true)
+    }
+    return () => {
+      if (visible) {
+        hide()
+      }
     }
   })
 </script>
@@ -184,7 +194,7 @@
     height: 420px;
     background: var(--background);
     border: var(--border-light);
-    z-index: 3;
+    z-index: 999;
     border-radius: 8px;
     overflow: hidden;
     box-sizing: border-box;
@@ -212,7 +222,7 @@
     width: 100%;
     height: 100%;
     transition: opacity 360ms ease-out;
-    z-index: 3;
+    z-index: 999;
     opacity: 0.5;
   }
   .overlay {

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -52,11 +52,12 @@
   export let testData
   export let schemaProperties
   export let isTestModal = false
+
   let webhookModal
   let drawer
-  let fillWidth = true
   let inputData
   let insertAtPos, getCaretPosition
+
   $: filters = lookForFilters(schemaProperties) || []
   $: tempFilters = filters
   $: stepId = block.stepId
@@ -80,7 +81,6 @@
   })
   $: editingJs = codeMode === EditorModes.JS
   $: requiredProperties = block.schema.inputs.required || []
-
   $: stepCompletions =
     codeMode === EditorModes.Handlebars
       ? [hbAutocomplete([...bindingsToCompletions(bindings, codeMode)])]
@@ -377,12 +377,13 @@
 <div class="fields">
   {#each schemaProperties as [key, value]}
     {#if canShowField(key, value)}
+      {@const label = getFieldLabel(key, value)}
       <div class:block-field={shouldRenderField(value)}>
         {#if key !== "fields" && value.type !== "boolean" && shouldRenderField(value)}
           <Label
             tooltip={value.title === "Binding / Value"
               ? "If using the String input type, please use a comma or newline separated string"
-              : null}>{getFieldLabel(key, value)}</Label
+              : null}>{label}</Label
           >
         {/if}
         <div class:field-width={shouldRenderField(value)}>
@@ -415,8 +416,7 @@
             </div>
           {:else if value.type === "date"}
             <DrawerBindableSlot
-              fillWidth
+              title={value.title ?? label}
-              title={value.title}
               panel={AutomationBindingPanel}
               type={"date"}
               value={inputData[key]}
@@ -439,7 +439,7 @@
             />
           {:else if value.customType === "filters"}
             <ActionButton on:click={drawer.show}>Define filters</ActionButton>
-            <Drawer bind:this={drawer} {fillWidth} title="Filtering">
+            <Drawer bind:this={drawer} title="Filtering">
               <Button cta slot="buttons" on:click={() => saveFilters(key)}>
                 Save
               </Button>
@@ -450,7 +450,6 @@
                 {schemaFields}
                 datasource={{ type: "table", tableId }}
                 panel={AutomationBindingPanel}
-                fillWidth
                 on:change={e => (tempFilters = e.detail)}
               />
             </Drawer>
@@ -463,19 +462,17 @@
           {:else if value.customType === "email"}
             {#if isTestModal}
               <ModalBindableInput
-                title={value.title}
+                title={value.title ?? label}
                 value={inputData[key]}
                 panel={AutomationBindingPanel}
                 type="email"
                 on:change={e => onChange(e, key)}
                 {bindings}
-                fillWidth
                 updateOnChange={false}
               />
             {:else}
               <DrawerBindableInput
-                fillWidth
+                title={value.title ?? label}
-                title={value.title}
                 panel={AutomationBindingPanel}
                 type="email"
                 value={inputData[key]}
@@ -609,7 +606,7 @@
           {:else if value.type === "string" || value.type === "number" || value.type === "integer"}
             {#if isTestModal}
               <ModalBindableInput
-                title={value.title}
+                title={value.title || label}
                 value={inputData[key]}
                 panel={AutomationBindingPanel}
                 type={value.customType}
@@ -620,8 +617,7 @@
             {:else}
               <div class="test">
                 <DrawerBindableInput
-                  fillWidth={true}
+                  title={value.title ?? label}
-                  title={value.title}
                   panel={AutomationBindingPanel}
                   type={value.customType}
                   value={inputData[key]}

packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte

@@ -57,7 +57,6 @@
           on:change={e => onChange(e, field)}
           type="string"
           {bindings}
-          fillWidth={true}
           updateOnChange={false}
         />
       </div>

packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte

@@ -52,7 +52,6 @@
           on:change={e => onChange(e, field)}
           type="string"
           {bindings}
-          fillWidth={true}
           updateOnChange={false}
         />
       </div>

packages/builder/src/components/automation/SetupPanel/RowSelector.svelte

@@ -129,7 +129,6 @@
             />
           {:else}
             <DrawerBindableSlot
-              fillWidth
               title={value.title || field}
               panel={AutomationBindingPanel}
               type={schema.type}

packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte

@@ -85,8 +85,8 @@
     on:change={e => onChange(e, field)}
     type="string"
     bindings={parsedBindings}
-    fillWidth={true}
     allowJS={true}
     updateOnChange={false}
+    title={schema.name}
   />
 {/if}

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -213,7 +213,7 @@
               <Icon name={tab} size="S" />
             </ActionButton>
           {/each}
-          {#if drawerContext}
+          {#if drawerContext && !drawerContext.forceModal}
             <ActionButton
               size="M"
               quiet

packages/builder/src/components/common/bindings/DrawerBindableInput.svelte

@@ -17,13 +17,12 @@
   export let placeholder
   export let label
   export let disabled = false
-  export let fillWidth
   export let allowJS = true
   export let allowHelpers = true
   export let updateOnChange = true
-  export let drawerLeft
   export let key
   export let disableBindings = false
+  export let forceModal = false
 
   const dispatch = createEventDispatcher()
 
@@ -87,10 +86,9 @@
 <Drawer
   on:drawerHide={onDrawerHide}
   on:drawerShow
-  {fillWidth}
   bind:this={bindingDrawer}
   title={title ?? placeholder ?? "Bindings"}
-  left={drawerLeft}
+  {forceModal}
 >
   <Button cta slot="buttons" disabled={!valid} on:click={saveBinding}>
     Save

packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte

@@ -16,7 +16,6 @@
   export let placeholder
   export let label
   export let disabled = false
-  export let fillWidth
   export let allowJS = true
   export let allowHelpers = true
   export let updateOnChange = true
@@ -171,7 +170,6 @@
 <Drawer
   on:drawerHide
   on:drawerShow
-  {fillWidth}
   bind:this={bindingDrawer}
   title={title ?? placeholder ?? "Bindings"}
   left={drawerLeft}

packages/builder/src/components/common/bindings/ModalBindableInput.svelte

@@ -1,113 +1,5 @@
 <script>
-  import { Icon, Input, Modal, Body, ModalContent } from "@budibase/bbui"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import {
-    readableToRuntimeBinding,
-    runtimeToReadableBinding,
-  } from "dataBinding"
-  import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
-  import { createEventDispatcher } from "svelte"
-  import { isJSBinding } from "@budibase/string-templates"
-
-  export let panel = ServerBindingPanel
-  export let value = ""
-  export let bindings = []
-  export let title = "Bindings"
-  export let placeholder
-  export let label
-  export let allowJS = false
-  export let updateOnChange = true
-
-  const dispatch = createEventDispatcher()
-  let bindingModal
-  let valid = true
-
-  $: readableValue = runtimeToReadableBinding(bindings, value)
-  $: tempValue = readableValue
-  $: isJS = isJSBinding(value)
-
-  const saveBinding = () => {
-    onChange(tempValue)
-    bindingModal.hide()
-  }
-
-  const onChange = input => {
-    dispatch("change", readableToRuntimeBinding(bindings, input))
-  }
 </script>
 
-<div class="control">
+<DrawerBindableInput {...$$props} forceModal />
-  <Input
-    {label}
-    readonly={isJS}
-    value={isJS ? "(JavaScript function)" : readableValue}
-    on:change={event => onChange(event.detail)}
-    {placeholder}
-    {updateOnChange}
-  />
-  <div class="icon" on:click={bindingModal.show}>
-    <Icon size="S" name="FlashOn" />
-  </div>
-</div>
-<Modal bind:this={bindingModal}>
-  <ModalContent {title} onConfirm={saveBinding} disabled={!valid} size="XL">
-    <Body extraSmall grey>
-      Add the objects on the left to enrich your text.
-    </Body>
-    <div class="panel-wrapper">
-      <svelte:component
-        this={panel}
-        serverSide
-        value={readableValue}
-        bind:valid
-        on:change={e => (tempValue = e.detail)}
-        {bindings}
-        {allowJS}
-      />
-    </div>
-  </ModalContent>
-</Modal>
-
-<style>
-  .control {
-    flex: 1;
-    position: relative;
-  }
-
-  .icon {
-    right: 1px;
-    bottom: 1px;
-    position: absolute;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    box-sizing: border-box;
-    border-left: 1px solid var(--spectrum-alias-border-color);
-    border-top-right-radius: var(--spectrum-alias-border-radius-regular);
-    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
-    width: 31px;
-    color: var(--spectrum-alias-text-color);
-    background-color: var(--spectrum-global-color-gray-75);
-    transition: background-color
-        var(--spectrum-global-animation-duration-100, 130ms),
-      box-shadow var(--spectrum-global-animation-duration-100, 130ms),
-      border-color var(--spectrum-global-animation-duration-100, 130ms);
-    height: calc(var(--spectrum-alias-item-height-m) - 2px);
-  }
-
-  .icon:hover {
-    cursor: pointer;
-    color: var(--spectrum-alias-text-color-hover);
-    background-color: var(--spectrum-global-color-gray-50);
-    border-color: var(--spectrum-alias-border-color-hover);
-  }
-
-  .panel-wrapper {
-    border: var(--border-light);
-    border-radius: 4px;
-  }
-
-  .control :global(.spectrum-Textfield-input) {
-    padding-right: 40px;
-  }
-</style>

packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte

@@ -26,7 +26,6 @@
   export let bindings = []
   export let panel = ClientBindingPanel
   export let allowBindings = true
-  export let fillWidth = false
   export let datasource
 
   const dispatch = createEventDispatcher()
@@ -266,7 +265,6 @@
                   {panel}
                   {bindings}
                   on:change={event => (filter.value = event.detail)}
-                  {fillWidth}
                 />
               {:else if ["string", "longform", "number", "bigint", "formula"].includes(filter.type)}
                 <Input disabled={filter.noValue} bind:value={filter.value} />

packages/builder/src/components/integration/KeyValueBuilder.svelte

@@ -131,7 +131,6 @@
           value={field.value}
           allowJS={false}
           {allowHelpers}
-          fillWidth={true}
           drawerLeft={bindingDrawerLeft}
         />
       {:else}