lint

6 years ago · 92098ceb59
8 changed files with 50 additions and 71 deletions
--- 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}
--- 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>
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
@ -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>-->
--- 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"
--- 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 {
--- 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>
--- 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>
--- 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 />