merge fixes

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte

@@ -30,7 +30,7 @@
   export let showAllQueries
 
   $: text = value?.label ?? "Choose an option"
-  $: tables = $tablesStore.list.map((m) => ({
+  $: tables = $tablesStore.list.map(m => ({
     label: m.name,
     tableId: m._id,
     type: "table",
@@ -46,9 +46,9 @@
   }, [])
   $: queries = $queriesStore.list
     .filter(
-      (query) => showAllQueries || query.queryVerb === "read" || query.readable
+      query => showAllQueries || query.queryVerb === "read" || query.readable
     )
-    .map((query) => ({
+    .map(query => ({
       label: query.name,
       name: query.name,
       tableId: query._id,
@@ -61,15 +61,15 @@
     $currentAsset,
     $store.selectedComponentId
   )
-  $: queryBindableProperties = bindableProperties.map((property) => ({
+  $: queryBindableProperties = bindableProperties.map(property => ({
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
     label: property.readableBinding,
     path: property.readableBinding,
   }))
   $: links = bindableProperties
-    .filter((x) => x.fieldSchema?.type === "link")
+    .filter(x => x.fieldSchema?.type === "link")
-    .map((property) => {
+    .map(property => {
       return {
         providerId: property.providerId,
         label: property.readableBinding,
@@ -89,7 +89,7 @@
   }
 
   function fetchQueryDefinition(query) {
-    const source = $datasources.list.find((ds) => ds._id === query.datasourceId)
+    const source = $datasources.list.find(ds => ds._id === query.datasourceId)
       .source
     return $integrations[source].query[query.queryVerb]
   }
@@ -100,20 +100,18 @@
     readonly
     value={text}
     options={[text]}
-    on:click={dropdownRight.show}
+    on:click={dropdownRight.show} />
-  />
+  {#if value?.type === 'query'}
-  {#if value?.type === "query"}
     <i class="ri-settings-5-line" on:click={drawer.show} />
-    <Drawer title={"Query Parameters"} bind:this={drawer}>
+    <Drawer title={'Query Parameters'} bind:this={drawer}>
       <Button
         slot="buttons"
         cta
         on:click={() => {
-          notifications.success("Query parameters saved.")
+          notifications.success('Query parameters saved.')
           handleSelected(value)
           drawer.hide()
-        }}
+        }}>
-      >
         Save
       </Button>
       <DrawerContent slot="body">
@@ -121,20 +119,15 @@
           {#if value.parameters.length > 0}
             <ParameterBuilder
               bind:customParams={value.queryParams}
-              parameters={queries.find((query) => query._id === value._id)
+              parameters={queries.find(query => query._id === value._id).parameters}
-                .parameters}
+              bindings={queryBindableProperties} />
-              bindings={queryBindableProperties}
-            />
           {/if}
           <IntegrationQueryEditor
             height={200}
             query={value}
             schema={fetchQueryDefinition(value)}
-            datasource={$datasources.list.find(
+            datasource={$datasources.list.find(ds => ds._id === value.datasourceId)}
-              (ds) => ds._id === value.datasourceId
+            editable={false} />
-            )}
-            editable={false}
-          />
         </Layout>
       </DrawerContent>
     </Drawer>
@@ -147,12 +140,7 @@
     </div>
     <ul>
       {#each tables as table}
-        <li
+        <li on:click={() => handleSelected(table)}>{table.label}</li>
-          class:selected={value === table}
-          on:click={() => handleSelected(table)}
-        >
-          {table.label}
-        </li>
       {/each}
     </ul>
     <Divider size="S" />
@@ -161,12 +149,7 @@
     </div>
     <ul>
       {#each views as view}
-        <li
+        <li on:click={() => handleSelected(view)}>{view.label}</li>
-          class:selected={value === view}
-          on:click={() => handleSelected(view)}
-        >
-          {view.label}
-        </li>
       {/each}
     </ul>
     <Divider size="S" />
@@ -175,12 +158,7 @@
     </div>
     <ul>
       {#each links as link}
-        <li
+        <li on:click={() => handleSelected(link)}>{link.label}</li>
-          class:selected={value === link}
-          on:click={() => handleSelected(link)}
-        >
-          {link.label}
-        </li>
       {/each}
     </ul>
     <Divider size="S" />
@@ -191,8 +169,7 @@
       {#each queries as query}
         <li
           class:selected={value === query}
-          on:click={() => handleSelected(query)}
+          on:click={() => handleSelected(query)}>
-        >
           {query.label}
         </li>
       {/each}
@@ -205,12 +182,7 @@
       </div>
       <ul>
         {#each otherSources as source}
-          <li
+          <li on:click={() => handleSelected(source)}>{source.label}</li>
-            class:selected={value === source}
-            on:click={() => handleSelected(source)}
-          >
-            {source.label}
-          </li>
         {/each}
       </ul>
     {/if}
@@ -246,15 +218,15 @@
     cursor: pointer;
     margin: 0px;
     padding: var(--spacing-s) var(--spacing-m);
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-m);
   }
 
   .selected {
-    background-color: var(--grey-4);
+    color: var(--spectrum-global-color-blue-600);
   }
 
   li:hover {
-    background-color: var(--grey-4);
+    background-color: var(--spectrum-global-color-gray-200);
   }
 
   .drawer-contents {

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte

@@ -1,7 +1,14 @@
 <script>
   import { flip } from "svelte/animate"
   import { dndzone } from "svelte-dnd-action"
-  import { Icon, Button, Popover, Layout, DrawerContent } from "@budibase/bbui"
+  import {
+    Icon,
+    Button,
+    Layout,
+    DrawerContent,
+    ActionMenu,
+    MenuItem,
+  } from "@budibase/bbui"
   import actionTypes from "./actions"
   import { generate } from "shortid"
 
@@ -22,8 +29,6 @@
     }
   }
 
-  let addActionButton
-  let addActionDropdown
   let selectedAction = actions?.length ? actions[0] : null
 
   $: selectedActionComponent =
@@ -53,7 +58,6 @@
     }
     actions = [...actions, newAction]
     selectedAction = newAction
-    addActionDropdown.hide()
   }
 
   const selectAction = (action) => () => {
@@ -71,24 +75,14 @@
 <DrawerContent>
   <div class="actions-list" slot="sidebar">
     <Layout>
-      <div bind:this={addActionButton}>
+      <ActionMenu>
-        <Button wide secondary on:click={addActionDropdown.show}>
+        <Button slot="control" secondary>Add Action</Button>
-          Add Action
+        {#each actionTypes as actionType}
-        </Button>
+          <MenuItem on:click={addAction(actionType)}>
-      </div>
+            {actionType.name}
-      <Popover
+          </MenuItem>
-        bind:this={addActionDropdown}
+        {/each}
-        anchor={addActionButton}
+      </ActionMenu>
-        align="right"
-      >
-        <div class="available-actions-container">
-          {#each actionTypes as actionType}
-            <div class="available-action" on:click={addAction(actionType)}>
-              <span>{actionType.name}</span>
-            </div>
-          {/each}
-        </div>
-      </Popover>
 
       {#if actions && actions.length > 0}
         <div
@@ -148,7 +142,7 @@
 
   .action-header {
     margin-bottom: var(--spacing-m);
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-s);
     color: var(--grey-7);
     font-weight: 500;
   }
@@ -161,7 +155,7 @@
 
   .available-action {
     padding: var(--spacing-s);
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-s);
     cursor: pointer;
   }
 

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte

@@ -51,7 +51,7 @@
   }
 </script>
 
-<Button primary on:click={drawer.show}>Define Actions</Button>
+<Button secondary on:click={drawer.show}>Define Actions</Button>
 <Drawer bind:this={drawer} title={'Actions'}>
   <svelte:fragment slot="description">
     Define what actions to run.

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte

@@ -35,7 +35,7 @@
   }
 </script>
 
-<Button secondary wide on:click={drawer.show}>Define Filters</Button>
+<Button secondary on:click={drawer.show}>Define Filters</Button>
 <Drawer bind:this={drawer} title="Filtering">
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
   <DrawerContent slot="body">

packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte

@@ -80,11 +80,11 @@
     "field/link": RelationshipFieldSelect,
   }
 
-  const getControl = type => {
+  const getControl = (type) => {
     return controlMap[type]
   }
 
-  const canRenderControl = setting => {
+  const canRenderControl = (setting) => {
     const control = getControl(setting?.type)
     if (!control) {
       return false
@@ -95,7 +95,7 @@
     return true
   }
 
-  const onInstanceNameChange = name => {
+  const onInstanceNameChange = (name) => {
     onChange("_instanceName", name)
   }
 
@@ -103,13 +103,13 @@
     const form = findClosestMatchingComponent(
       $currentAsset.props,
       componentInstance._id,
-      component => component._component.endsWith("/form")
+      (component) => component._component.endsWith("/form")
     )
     const dataSource = form?.dataSource
     const fields = makeDatasourceFormComponents(dataSource)
     onChange(
       "_children",
-      fields.map(field => field.json())
+      fields.map((field) => field.json())
     )
   }
 </script>
@@ -123,7 +123,8 @@
         label={def.label}
         key={def.key}
         value={get(assetInstance, def.key)}
-        onChange={val => onScreenPropChange(def.key, val)} />
+        onChange={(val) => onScreenPropChange(def.key, val)}
+      />
     {/each}
   {/if}
 
@@ -134,7 +135,8 @@
       label="Name"
       key="_instanceName"
       value={componentInstance._instanceName}
-      onChange={onInstanceNameChange} />
+      onChange={onInstanceNameChange}
+    />
   {/if}
 
   {#if settings && settings.length > 0}
@@ -145,10 +147,12 @@
           control={getControl(setting.type)}
           label={setting.label}
           key={setting.key}
-          value={componentInstance[setting.key] ?? componentInstance[setting.key]?.defaultValue}
+          value={componentInstance[setting.key] ??
+            componentInstance[setting.key]?.defaultValue}
           {componentInstance}
-          onChange={val => onChange(setting.key, val)}
+          onChange={(val) => onChange(setting.key, val)}
-          props={{ options: setting.options, placeholder: setting.placeholder }} />
+          props={{ options: setting.options, placeholder: setting.placeholder }}
+        />
       {/if}
     {/each}
   {:else}
@@ -157,10 +161,12 @@
     </div>
   {/if}
 
-  {#if componentDefinition?.component?.endsWith('/fieldgroup')}
+  {#if componentDefinition?.component?.endsWith("/fieldgroup")}
-    <Button secondary wide on:click={() => confirmResetFieldsDialog?.show()}>
+    <div class="buttonWrapper">
-      Update Form Fields
+      <Button secondary wide on:click={() => confirmResetFieldsDialog?.show()}>
-    </Button>
+        Update Form Fields
+      </Button>
+    </div>
   {/if}
 </div>
 <ConfirmDialog
@@ -168,7 +174,8 @@
   body={`All components inside this group will be deleted and replaced with fields to match the schema. Are you sure you want to update this Field Group?`}
   okText="Update"
   onOk={resetFormFields}
-  title="Confirm Form Field Update" />
+  title="Confirm Form Field Update"
+/>
 
 <style>
   .settings-view-container {
@@ -183,4 +190,9 @@
     margin-top: var(--spacing-m);
     color: var(--grey-6);
   }
+  .buttonWrapper {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+  }
 </style>

packages/client/src/utils/styleable.js

@@ -24,7 +24,10 @@ const addBuilderPreviewStyles = (node, styleString, componentId) => {
   if (componentId === get(builderStore).selectedComponentId) {
     const style = window.getComputedStyle(node)
     const property = style?.display === "table-row" ? "outline" : "border"
-    return styleString + `;${property}: 2px solid #4285f4 !important;`
+    return (
+      styleString +
+      `;${property}: 2px solid #4285f4 !important; border-radius: 4px !important;`
+    )
   } else {
     return styleString
   }

packages/standard-components/src/DataProvider.svelte

@@ -103,6 +103,8 @@
   }
 </script>
 
-<Provider {actions} data={dataContext}>
+<div use:styleable={$component.styles}>
-  <slot />
+  <Provider {actions} data={dataContext}>
-</Provider>
+    <slot />
+  </Provider>
+</div>