actions fix

packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte

@@ -20,12 +20,9 @@
 </script>
 
 <div on:click|stopPropagation bind:this={anchor}>
-  <TextButton
+  <TextButton text on:click={dropdown.show} active={false}>
-    text
+    <Icon name="add" />
-    on:click={dropdown.show}
+    Add Parameters
-    active={false}>
-      <Icon name="add" />
-      Add Parameters
   </TextButton>
   <DropdownMenu align="right" {anchor} bind:this={dropdown}>
     <div class="wrapper">

packages/builder/src/components/common/Notification/NotificationDisplay.svelte

@@ -1,6 +1,6 @@
 <script>
   import { notificationStore } from "builderStore/store/notifications"
-  import { flip } from 'svelte/animate';
+  import { flip } from "svelte/animate"
   import { fly } from "svelte/transition"
 
   export let themes = {

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

@@ -33,6 +33,9 @@
       parameters: {},
       [EVENT_TYPE_KEY]: actionType.name,
     }
+    if (!actions) {
+      actions = []
+    }
     actions.push(newAction)
     selectedAction = newAction
     actions = actions
@@ -73,7 +76,8 @@
         <div class="action-container">
           <div class="action-header" on:click={selectAction(action)}>
             <span class:selected={action === selectedAction}>
-              {index + 1}. {action[EVENT_TYPE_KEY]}
+              {index + 1}.
+              {action[EVENT_TYPE_KEY]}
             </span>
           </div>
           <i

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

@@ -34,15 +34,17 @@
     }))
     return [...acc, ...viewsArr]
   }, [])
-  $: queries = $backendUiStore.queries.filter(query => query.queryVerb === "read").map(query => ({
+  $: queries = $backendUiStore.queries
-    label: query.name,
+    .filter(query => query.queryVerb === "read")
-    name: query.name,
+    .map(query => ({
-    tableId: query._id,
+      label: query.name,
-    ...query,
+      name: query.name,
-    schema: query.schema,
+      tableId: query._id,
-    parameters: query.parameters,
+      ...query,
-    type: "query",
+      schema: query.schema,
-  }))
+      parameters: query.parameters,
+      type: "query",
+    }))
   $: bindableProperties = getBindableProperties(
     $currentAsset.props,
     $store.selectedComponentId

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

@@ -24,8 +24,8 @@
 </script>
 
 <form on:submit|preventDefault>
-<div class="field">
+  <div class="field">
-  {#each schemaKeys as field}
+    {#each schemaKeys as field}
       <Input
         placeholder="Enter {field} name"
         outline
@@ -33,8 +33,8 @@
         type={schema.fields[field]?.type}
         required={schema.fields[field]?.required}
         bind:value={fields[field]} />
-  {/each}
+    {/each}
-</div>
+  </div>
 </form>
 {#if schema.customisable}
   <Editor

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

@@ -135,17 +135,22 @@
     <Input placeholder="✎ Edit Query Name" bind:value={query.name} />
   </div>
   {#if config}
-  <div class="props">
+    <div class="props">
-    <div class="query-type">Query type: <span class="query-type-span">{config[query.queryVerb].type}</span></div>
+      <div class="query-type">
-    <div class="select">
+        Query type:
-      <Select primary thin bind:value={query.queryVerb}>
+        <span class="query-type-span">{config[query.queryVerb].type}</span>
-        {#each Object.keys(config) as queryVerb}
+      </div>
-          <option value={queryVerb}>{queryVerb}</option>
+      <div class="select">
-        {/each}
+        <Select primary thin bind:value={query.queryVerb}>
-      </Select>
+          {#each Object.keys(config) as queryVerb}
-  </div>
+            <option value={queryVerb}>{queryVerb}</option>
+          {/each}
+        </Select>
+      </div>
     </div>
-    <EditQueryParamsPopover bind:parameters={query.parameters} bindable={false} />
+    <EditQueryParamsPopover
+      bind:parameters={query.parameters}
+      bindable={false} />
   {/if}
 </header>
 <Spacer extraLarge />
@@ -182,7 +187,11 @@
               {#each fields as field, idx}
                 <Spacer small />
                 <div class="field">
-                  <Input outline placeholder="Field Name" type={'text'} bind:value={field.name} />
+                  <Input
+                    outline
+                    placeholder="Field Name"
+                    type={'text'}
+                    bind:value={field.name} />
                   <Select thin border bind:value={field.type}>
                     <option value={''}>Select a field type</option>
                     <option value={'STRING'}>Text</option>
@@ -195,8 +204,8 @@
                     on:click={() => deleteField(idx)} />
                 </div>
               {/each}
-                <Spacer small />
+              <Spacer small />
-                <Button thin secondary on:click={newField}>Add Field</Button>
+              <Button thin secondary on:click={newField}>Add Field</Button>
             {/if}
           </Switcher>
         {/if}
@@ -206,7 +215,6 @@
 {/if}
 
 <style>
-
   .input {
     width: 300px;
   }

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

@@ -20,7 +20,6 @@
   }
 </script>
 
-
 {#if schema}
   {#key query._id}
     {#if schema.type === QueryTypes.SQL}

packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte

@@ -58,7 +58,6 @@
       </div>
     </div>
   </section>
-
 {/if}
 
 <style>

packages/client/src/components/ClientApp.svelte

@@ -2,9 +2,14 @@
   import { writable } from "svelte/store"
   import { setContext, onMount } from "svelte"
   import Component from "./Component.svelte"
-  import NotificationDisplay from './NotificationDisplay.svelte'
+  import NotificationDisplay from "./NotificationDisplay.svelte"
   import SDK from "../sdk"
-  import { createDataStore, initialise, screenStore, notificationStore } from "../store"
+  import {
+    createDataStore,
+    initialise,
+    screenStore,
+    notificationStore,
+  } from "../store"
 
   // Provide contexts
   setContext("sdk", SDK)

packages/client/src/components/NotificationDisplay.svelte

@@ -1,60 +1,59 @@
 <script>
-    import { flip } from 'svelte/animate';
+  import { flip } from "svelte/animate"
-    import { fly } from "svelte/transition"
+  import { fly } from "svelte/transition"
-    import { getContext } from "svelte"
+  import { getContext } from "svelte"
-    const { notifications } = getContext("sdk")
+  const { notifications } = getContext("sdk")
 
-    export let themes = {
+  export let themes = {
-      danger: "#E26D69",
+    danger: "#E26D69",
-      success: "#84C991",
+    success: "#84C991",
-      warning: "#f0ad4e",
+    warning: "#f0ad4e",
-      info: "#5bc0de",
+    info: "#5bc0de",
-      default: "#aaaaaa",
+    default: "#aaaaaa",
-    }
+  }
-  </script>
+</script>
 
-  <div class="notifications">
+<div class="notifications">
-    {#each $notifications as notification (notification.id)}
+  {#each $notifications as notification (notification.id)}
-      <div
+    <div
-        animate:flip
+      animate:flip
-        class="toast"
+      class="toast"
-        style="background: {themes[notification.type]};"
+      style="background: {themes[notification.type]};"
-        transition:fly={{ y: -30 }}>
+      transition:fly={{ y: -30 }}>
-        <div class="content">{notification.message}</div>
+      <div class="content">{notification.message}</div>
-        {#if notification.icon}<i class={notification.icon} />{/if}
+      {#if notification.icon}<i class={notification.icon} />{/if}
-      </div>
+    </div>
-    {/each}
+  {/each}
-  </div>
+</div>
 
-  <style>
+<style>
-    .notifications {
+  .notifications {
-      position: fixed;
+    position: fixed;
-      top: 10px;
+    top: 10px;
-      left: 0;
+    left: 0;
-      right: 0;
+    right: 0;
-      margin: 0 auto;
+    margin: 0 auto;
-      padding: 0;
+    padding: 0;
-      z-index: 9999;
+    z-index: 9999;
-      display: flex;
+    display: flex;
-      flex-direction: column;
+    flex-direction: column;
-      justify-content: flex-start;
+    justify-content: flex-start;
-      align-items: center;
+    align-items: center;
-      pointer-events: none;
+    pointer-events: none;
-    }
+  }
 
-    .toast {
+  .toast {
-      flex: 0 0 auto;
+    flex: 0 0 auto;
-      margin-bottom: 10px;
+    margin-bottom: 10px;
-      border-radius: var(--border-radius-s);
+    border-radius: var(--border-radius-s);
-      /* The toasts now support being auto sized, so this static width could be removed */
+    /* The toasts now support being auto sized, so this static width could be removed */
-      width: 40vw;
+    width: 40vw;
-    }
+  }
-  
-    .content {
-      padding: 10px;
-      display: block;
-      color: white;
-      font-weight: 500;
-    }
-  </style>
 
+  .content {
+    padding: 10px;
+    display: block;
+    color: white;
+    font-weight: 500;
+  }
+</style>