Updating integration config screen.

5 years ago · a7f95f8a87
5 changed files with 56 additions and 60 deletions
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
@ -35,7 +35,7 @@
 </script>

 <form>
-  <Layout gap="S">
+  <Layout noPadding gap="S">
    {#if !creating}
      <div class="form-row">
        <Label>{capitalise("Name")}</Label>
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte
@ -4,7 +4,7 @@
    Body,
    Divider,
    InlineAlert,
-    ActionButton,
+    Button,
    notifications,
    Modal,
    Table,
@ -13,6 +13,7 @@
  import CreateEditRelationship from "components/backend/Datasources/CreateEditRelationship.svelte"
  import CreateExternalTableModal from "./CreateExternalTableModal.svelte"
  import ArrayRenderer from "components/common/ArrayRenderer.svelte"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
  import { goto } from "@roxi/routify"

  export let datasource
@ -26,10 +27,10 @@
    tables: {},
    columns: {},
  }
-
  let relationshipModal
  let createExternalTableModal
  let selectedFromRelationship, selectedToRelationship
+  let confirmDialog

  $: integration = datasource && $integrations[datasource.source]
  $: plusTables = datasource?.plus
@ -137,21 +138,28 @@
  <CreateExternalTableModal {datasource} />
 </Modal>

-<Divider />
+<ConfirmDialog
+  bind:this={confirmDialog}
+  okText="Fetch tables"
+  onOk={updateDatasourceSchema}
+  onCancel={() => confirmDialog.hide()}
+  warning={false}
+  title="Confirm table fetch"
+>
+  <Body>
+    If you have fetched tables from this database before, this action may
+    overwrite any changes you made after your initial fetch.
+  </Body>
+</ConfirmDialog>
+
+<Divider size="S" />
 <div class="query-header">
  <Heading size="S">Tables</Heading>
  <div class="table-buttons">
-    <ActionButton
-      size="S"
-      icon="DataRefresh"
-      quiet
-      on:click={updateDatasourceSchema}
-    >
-      Fetch tables from database
-    </ActionButton>
-    <ActionButton size="S" icon="Add" on:click={createNewTable}>
-      Create new table
-    </ActionButton>
+    <Button secondary on:click={() => confirmDialog.show()}>
+      Fetch tables
+    </Button>
+    <Button cta icon="Add" on:click={createNewTable}>New table</Button>
  </div>
 </div>
 <Body>
@ -177,16 +185,12 @@
  customRenderers={[{ column: "primary", component: ArrayRenderer }]}
 />
 {#if plusTables?.length !== 0}
-  <Divider />
+  <Divider size="S" />
  <div class="query-header">
    <Heading size="S">Relationships</Heading>
-    <ActionButton
-      icon="DataCorrelated"
-      size="S"
-      on:click={openRelationshipModal}
-    >
-      Define existing relationship
-    </ActionButton>
+    <Button primary on:click={openRelationshipModal}>
+      Define relationship
+    </Button>
  </div>
  <Body>
    Tell budibase how your tables are related to get even more smart features.
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte
@ -7,15 +7,12 @@
  let addHeader
 </script>

-<Divider />
+<Divider size="S" />
 <div class="query-header">
  <div class="badge">
    <Heading size="S">Headers</Heading>
    <Badge quiet grey>Optional</Badge>
  </div>
-  <ActionButton size="S" icon="Add" on:click={() => addHeader.addEntry()}
-    >Add header</ActionButton
-  >
 </div>
 <Body size="S">
  Headers enable you to provide additional information about the request, such
@ -27,6 +24,11 @@
  on:change
  noAddButton
 />
+<div>
+  <ActionButton icon="Add" on:click={() => addHeader.addEntry()}>
+    Add header
+  </ActionButton>
+</div>

 <style>
  .query-header {
@ -34,7 +36,6 @@
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
-    margin: 0 0 var(--spacing-s) 0;
  }

  .badge {
--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@ -33,15 +33,17 @@
 </script>

 <!-- Builds Objects with Key Value Pairs. Useful for building things like Request Headers. -->
-<div class="container" class:readOnly>
-  {#each fields as field, idx}
-    <Input placeholder="Key" bind:value={field.name} on:change={changed} />
-    <Input placeholder="Value" bind:value={field.value} on:change={changed} />
-    {#if !readOnly}
-      <Icon hoverable name="Close" on:click={() => deleteEntry(idx)} />
-    {/if}
-  {/each}
-</div>
+{#if Object.keys(object || {}).length > 0}
+  <div class="container" class:readOnly>
+    {#each fields as field, idx}
+      <Input placeholder="Key" bind:value={field.name} on:change={changed} />
+      <Input placeholder="Value" bind:value={field.value} on:change={changed} />
+      {#if !readOnly}
+        <Icon hoverable name="Close" on:click={() => deleteEntry(idx)} />
+      {/if}
+    {/each}
+  </div>
+{/if}
 {#if !readOnly && !noAddButton}
  <div>
    <Button secondary thin outline on:click={addEntry}>Add</Button>
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
@ -7,7 +7,6 @@
    Divider,
    Layout,
    notifications,
-    ActionButton,
    Table,
  } from "@budibase/bbui"
  import { datasources, integrations, queries, tables } from "stores/backend"
@ -82,28 +81,25 @@
        </header>
        <Body size="M">{integration.description}</Body>
      </Layout>
-      <Divider />
-      <div class="container">
-        <div class="config-header">
-          <Heading size="S">Configuration</Heading>
-          <Button disabled={!changed} cta on:click={saveDatasource}>Save</Button
-          >
-        </div>
-        <IntegrationConfigForm
-          on:change={hasChanged}
-          schema={integration.datasource}
-          bind:datasource
-        />
+      <Divider size="S" />
+      <div class="config-header">
+        <Heading size="S">Configuration</Heading>
+        <Button disabled={!changed} cta on:click={saveDatasource}>Save</Button>
      </div>
+      <IntegrationConfigForm
+        on:change={hasChanged}
+        schema={integration.datasource}
+        bind:datasource
+      />
      {#if datasource.plus}
        <PlusConfigForm bind:datasource save={saveDatasource} />
      {/if}
-      <Divider />
+      <Divider size="S" />
      <div class="query-header">
        <Heading size="S">Queries</Heading>
-        <ActionButton size="S" icon="Add" on:click={() => $goto("./new")}
+        <Button cta icon="Add" on:click={() => $goto("./new")}
          >Add query
-        </ActionButton>
+        </Button>
      </div>
      <Body size="S">
        To build an app using a datasource, you must first query the data. A
@ -148,18 +144,11 @@
    margin: 0 0 var(--spacing-xs) 0;
  }

-  .container {
-    width: 100%;
-    border-radius: var(--border-radius-m);
-    margin: 0 auto;
-  }
-
  .query-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
-    margin: 0 0 var(--spacing-s) 0;
  }

  .query-list {