Some UI tweaks.

5 years ago · cd7ef481bd
3 changed files with 15 additions and 8 deletions
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Divider, Heading, ActionButton, Badge } from "@budibase/bbui"
+  import { Divider, Heading, ActionButton, Badge, Body } from "@budibase/bbui"
  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"

  export let datasource
@ -14,9 +14,13 @@
    <Badge quiet grey>Optional</Badge>
  </div>
  <ActionButton size="S" icon="Add" on:click={() => addHeader.addEntry()}
-    >Add Header</ActionButton
+    >Add header</ActionButton
  >
 </div>
+<Body size="S">
+  Headers enable you to provide additional information about the request, such
+  as format.
+</Body>
 <KeyValueBuilder
  bind:this={addHeader}
  bind:object={datasource.config.defaultHeaders}
--- 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
@ -34,8 +34,9 @@
  $: hasChanged(baseDatasource, datasource)

  function hasChanged(base, ds) {
-    if (base) {
+    if (base && ds) {
      changed = !isEqual(base, ds)
+      console.log(ds)
    }
  }

@ -81,9 +82,6 @@
          <Button disabled={!changed} cta on:click={saveDatasource}>Save</Button
          >
        </div>
-        <Body size="S">
-          Connect your data source to Budibase using the config below.
-        </Body>
        <IntegrationConfigForm
          on:change={hasChanged}
          schema={integration.datasource}
@ -97,9 +95,14 @@
      <div class="query-header">
        <Heading size="S">Queries</Heading>
        <ActionButton size="S" icon="Add" on:click={() => $goto("./new")}
-          >Add Query
+          >Add query
        </ActionButton>
      </div>
+      <Body size="S">
+        To build an app using a datasource, you must first query the data. A
+        query is a request for data or information from a datasource, for
+        example a database table.
+      </Body>
      <div class="query-list">
        {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
          <div class="query-list-item" on:click={() => onClickQuery(query)}>
--- a/packages/server/src/integrations/rest.ts
+++ b/packages/server/src/integrations/rest.ts
@ -18,7 +18,7 @@ module RestModule {
  const SCHEMA: Integration = {
    docs: "https://github.com/node-fetch/node-fetch",
    description:
-      "Representational state transfer (REST) is a de-facto standard for a software architecture for interactive applications that typically use multiple Web services. ",
+      "With the REST API datasource, you can connect, query and pull data from multiple REST APIs. You can then use the retrieved data to build apps.",
    friendlyName: "REST API",
    datasource: {
      url: {