From 92098ceb59278321cfd3c068ecdd0315092ec5e5 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 19 Feb 2021 14:31:07 +0000
Subject: [PATCH] lint

---
 .../IntegrationConfigForm.svelte              |  5 ++-
 .../TableIntegrationMenu/index.svelte         | 16 ---------
 .../popovers/EditQueryParamsPopover.svelte    | 35 -------------------
 .../integration/QueryFieldsBuilder.svelte     |  2 +-
 .../integration/QueryParameterBuilder.svelte  |  3 +-
 .../components/integration/QueryViewer.svelte | 17 +++++----
 .../src/components/integration/index.svelte   | 18 +++++-----
 .../[selectedDatasource]/index.svelte         | 25 +++++++++++--
 8 files changed, 50 insertions(+), 71 deletions(-)
 delete mode 100644 packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte

diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
index d4c483acc1..793f3cc186 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
@@ -3,6 +3,8 @@
   import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
 
   export let integration
+
+  let unsaved = false
 </script>
 
 <form>
@@ -10,13 +12,14 @@
     {#if typeof integration[configKey] === 'object'}
       <Label small>{configKey}</Label>
       <Spacer small />
-      <KeyValueBuilder bind:object={integration[configKey]} />
+      <KeyValueBuilder bind:object={integration[configKey]} on:change />
     {:else}
       <div class="form-row">
         <Label small>{configKey}</Label>
         <Input
           outline
           type={integration[configKey].type}
+          on:change
           bind:value={integration[configKey]} />
       </div>
     {/if}
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
index fe42a1dd9e..4cb740ad41 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
@@ -50,22 +50,6 @@
       </div>
     {/each}
   </div>
-
-  <!-- {#if schema}
-    {#each Object.keys(schema) as configKey}
-      {#if schema[configKey].type === 'object'}
-        <Label small>{configKey}</Label>
-        <KeyValueBuilder bind:object={integration[configKey]} />
-      {:else}
-        <Label small>{configKey}</Label>
-        <Input
-          outline
-          type={integration[configKey].type}
-          bind:value={integration[configKey]} />
-      {/if}
-      <Spacer medium />
-    {/each}
-  {/if} -->
 </section>
 
 <style>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
deleted file mode 100644
index 021d095abc..0000000000
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<!--<script>
-  import { backendUiStore, store, allScreens } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu, Button, Input, TextButton, Icon } from "@budibase/bbui"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import IntegrationConfigForm from "../TableIntegrationMenu//IntegrationConfigForm.svelte"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
-  import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
-
-  export let bindable
-  export let parameters
-
-  let anchor
-  let dropdown
-  let confirmDeleteDialog
-
-  function hideEditor() {
-    dropdown?.hide()
-  }
-</script><div on:click|stopPropagation bind:this={anchor}>
-  <TextButton text on:click={dropdown.show} active={false}>
-    <Icon name="add" />
-    Add Parameters
-  </TextButton>
-  <DropdownMenu align="right" {anchor} bind:this={dropdown}>
-    <div class="wrapper">
-      <ParameterBuilder bind:parameters {bindable} />
-    </div>
-  </DropdownMenu>
-</div><style>
-  .wrapper {
-    padding: var(--spacing-xl);
-    min-width: 600px;
-  }
-</style>-->
diff --git a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
index ee7fe5402e..fc861d7a92 100644
--- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@@ -6,7 +6,7 @@
     Input,
     Heading,
     Select,
-    Spacer
+    Spacer,
   } from "@budibase/bbui"
   import Editor from "./QueryEditor.svelte"
   import KeyValueBuilder from "./KeyValueBuilder.svelte"
diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index d456ee3a28..829aa00bb1 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -31,7 +31,7 @@
 
 <section>
   <div class="controls">
-    <Heading small>Parameters</Heading>
+    <Heading small lh>Parameters</Heading>
     {#if !bindable}
       <Button secondary on:click={newQueryParameter}>Add Param</Button>
     {/if}
@@ -79,6 +79,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    height: 40px;
   }
 
   .parameters {
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 3343390bbd..ad91b6baa0 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -131,10 +131,9 @@
 </script>
 
 <section class="config">
-  <Heading medium>Query {integrationInfo.friendlyName}</Heading>
+  <Heading medium lh>Query {integrationInfo?.friendlyName}</Heading>
   <hr />
-  <Heading small>Config</Heading>
-  <Spacer medium />
+  <Heading small lh>Config</Heading>
   <Body small grey>Provide a name for your query and select its function.</Body>
   <Spacer medium />
   <div class="config-field">
@@ -147,7 +146,9 @@
       <Label small>Function</Label>
       <Select primary outline thin bind:value={query.queryVerb}>
         {#each Object.keys(queryConfig) as queryVerb}
-          <option value={queryVerb}>{queryConfig[queryVerb]?.displayName || queryVerb}</option>
+          <option value={queryVerb}>
+            {queryConfig[queryVerb]?.displayName || queryVerb}
+          </option>
         {/each}
       </Select>
     </div>
@@ -160,7 +161,8 @@
 {#if shouldShowQueryConfig}
   <section>
     <div class="config">
-      <Heading small>Fields</Heading>
+      <Heading small lh>Fields</Heading>
+      <Body small grey>Fill in the fields specific to this query.</Body>
       <Spacer medium />
       <IntegrationQueryEditor
         {datasource}
@@ -171,7 +173,7 @@
       <hr />
 
       <div class="viewer-controls">
-        <Heading small>Query Results</Heading>
+        <Heading small lh>Query Results</Heading>
         <div class="button-container">
           <Button
             secondary
@@ -198,8 +200,10 @@
               <pre class="preview">
               {#if !data[0]}
                   
+                  
                 Please run your query to fetch some data.
 
+
                 {:else}
                   {JSON.stringify(data[0], undefined, 2)}
                 {/if}
@@ -283,5 +287,6 @@
     justify-content: space-between;
     gap: var(--spacing-m);
     min-width: 150px;
+    align-items: center;
   }
 </style>
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index 469438265a..ce8f399eed 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -8,7 +8,7 @@
   const QueryTypes = {
     SQL: "sql",
     JSON: "json",
-    FIELDS: "fields"
+    FIELDS: "fields",
   }
 
   export let query
@@ -16,7 +16,9 @@
   export let schema
   export let editable = true
 
-  $: urlDisplay = schema.urlDisplay && `${datasource.config.url}${query.fields.path}${query.fields.queryString}`
+  $: urlDisplay =
+    schema.urlDisplay &&
+    `${datasource.config.url}${query.fields.path}${query.fields.queryString}`
 
   function updateQuery({ detail }) {
     query.fields[schema.type] = detail.value
@@ -54,10 +56,10 @@
 {/if}
 
 <style>
-.url-row {
-  display: grid;
-  grid-template-columns: 20% 1fr;
-  grid-gap: var(--spacing-l);
-  align-items: center;
-}
+  .url-row {
+    display: grid;
+    grid-template-columns: 20% 1fr;
+    grid-gap: var(--spacing-l);
+    align-items: center;
+  }
 </style>
diff --git a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
index 274ce1f49e..e97d005884 100644
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
@@ -1,11 +1,13 @@
 <script>
-  import { goto } from "@sveltech/routify"
+  import { goto, beforeUrlChange } from "@sveltech/routify"
   import { Button, Heading, Body, Spacer, Icon } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
   import ICONS from "components/backend/DatasourceNavigator/icons"
 
+  let unsaved = false
+
   $: datasource = $backendUiStore.datasources.find(
     ds => ds._id === $backendUiStore.selectedDatasourceId
   )
@@ -14,6 +16,7 @@
     // Create datasource
     await backendUiStore.actions.datasources.save(datasource)
     notifier.success(`Datasource ${name} saved successfully.`)
+    unsaved = false
   }
 
   function onClickQuery(query) {
@@ -23,6 +26,21 @@
     backendUiStore.actions.queries.select(query)
     $goto(`../${query._id}`)
   }
+
+  function setUnsaved() {
+    unsaved = true
+  }
+
+  $beforeUrlChange((event, store) => {
+    if (unsaved) {
+      notifier.danger(
+        "Unsaved changes. Please save your datasource configuration before leaving."
+      )
+      return false
+    }
+
+    return true
+  })
 </script>
 
 {#if datasource}
@@ -39,7 +57,6 @@
     </header>
     <Spacer extraLarge />
     <div class="container">
-
       <div class="config-header">
         <Heading small>Configuration</Heading>
         <Button secondary on:click={saveDatasource}>Save</Button>
@@ -49,7 +66,9 @@
       </Body>
 
       <Spacer medium />
-      <IntegrationConfigForm integration={datasource.config} />
+      <IntegrationConfigForm
+        integration={datasource.config}
+        on:change={setUnsaved} />
       <Spacer medium />
 
       <hr />