Adding the ability to set a display name for any datasource/query parameter.

packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte

@@ -32,20 +32,30 @@
     .map(([key]) => key)
 
   let addButton
+
+  function getDisplayName(key) {
+    let name
+    if (schema[key]?.display) {
+      name = schema[key].display
+    } else {
+      name = key
+    }
+    return capitalise(name)
+  }
 </script>
 
 <form>
   <Layout noPadding gap="S">
     {#if !creating}
       <div class="form-row">
-        <Label>{capitalise("Name")}</Label>
+        <Label>Name</Label>
         <Input on:change bind:value={datasource.name} />
       </div>
     {/if}
     {#each configKeys as configKey}
       {#if schema[configKey].type === "object"}
         <div class="form-row ssl">
-          <Label>{capitalise(configKey)}</Label>
+          <Label>{getDisplayName(configKey)}</Label>
           <Button secondary thin outline on:click={addButton.addEntry()}
             >Add</Button
           >
@@ -59,12 +69,12 @@
         />
       {:else if schema[configKey].type === "boolean"}
         <div class="form-row">
-          <Label>{capitalise(configKey)}</Label>
+          <Label>{getDisplayName(configKey)}</Label>
           <Toggle text="" bind:value={config[configKey]} />
         </div>
       {:else if schema[configKey].type === "longForm"}
         <div class="form-row">
-          <Label>{capitalise(configKey)}</Label>
+          <Label>{getDisplayName(configKey)}</Label>
           <TextArea
             type={schema[configKey].type}
             on:change
@@ -73,7 +83,7 @@
         </div>
       {:else}
         <div class="form-row">
-          <Label>{capitalise(configKey)}</Label>
+          <Label>{getDisplayName(configKey)}</Label>
           <Input
             type={schema[configKey].type}
             on:change

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

@@ -1,5 +1,5 @@
 <script>
-  import { Icon, Button, Input } from "@budibase/bbui"
+  import { Icon, ActionButton, Input } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
 
   let dispatch = createEventDispatcher()
@@ -46,7 +46,9 @@
 {/if}
 {#if !readOnly && !noAddButton}
   <div>
-    <Button secondary thin outline on:click={addEntry}>Add</Button>
+    <ActionButton icon="Add" secondary thin outline on:click={addEntry}
+      >Add</ActionButton
+    >
   </div>
 {/if}
 

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

@@ -2,29 +2,38 @@
   import { Label, Layout, Input } from "@budibase/bbui"
   import Editor from "./QueryEditor.svelte"
   import KeyValueBuilder from "./KeyValueBuilder.svelte"
+  import { capitalise } from "helpers"
 
   export let fields = {}
   export let schema
   export let editable
 
-  $: schemaKeys = Object.keys(schema.fields)
+  $: schemaKeys = Object.keys(schema?.fields || {})
 
   function updateCustomFields({ detail }) {
     fields.customData = detail.value
   }
+
+  function getDisplayName(field) {
+    let name
+    if (schema.fields[field]?.display) {
+      name = schema.fields[field]?.display
+    } else {
+      name = field
+    }
+    return capitalise(name)
+  }
 </script>
 
 <form on:submit|preventDefault>
   <Layout noPadding gap="S">
     {#each schemaKeys as field}
       {#if schema.fields[field]?.type === "object"}
-        <div>
+        <Label small>{getDisplayName(field)}</Label>
-          <Label small>{field}</Label>
         <KeyValueBuilder readOnly={!editable} bind:object={fields[field]} />
-        </div>
       {:else if schema.fields[field]?.type === "json"}
         <div>
-          <Label extraSmall grey>{field}</Label>
+          <Label extraSmall grey>{getDisplayName(field)}</Label>
           <Editor
             mode="json"
             on:change={({ detail }) => (fields[field] = detail.value)}
@@ -34,9 +43,9 @@
         </div>
       {:else}
         <div class="horizontal">
-          <Label small>{field}</Label>
+          <Label small>{getDisplayName(field)}</Label>
           <Input
-            placeholder="Enter {field}"
+            placeholder="Enter {getDisplayName(field)}"
             outline
             disabled={!editable}
             type={schema.fields[field]?.type}

packages/server/src/integrations/rest.ts

@@ -38,10 +38,10 @@ module RestModule {
         readable: true,
         displayName: "POST",
         type: QueryTypes.FIELDS,
-        urlDisplay: true,
         fields: {
           path: {
             type: DatasourceFieldTypes.STRING,
+            display: "URL",
           },
           queryString: {
             type: DatasourceFieldTypes.STRING,
@@ -58,10 +58,10 @@ module RestModule {
         displayName: "GET",
         readable: true,
         type: QueryTypes.FIELDS,
-        urlDisplay: true,
         fields: {
           path: {
             type: DatasourceFieldTypes.STRING,
+            display: "URL",
           },
           queryString: {
             type: DatasourceFieldTypes.STRING,
@@ -75,10 +75,10 @@ module RestModule {
         displayName: "PUT",
         readable: true,
         type: QueryTypes.FIELDS,
-        urlDisplay: true,
         fields: {
           path: {
             type: DatasourceFieldTypes.STRING,
+            display: "URL",
           },
           queryString: {
             type: DatasourceFieldTypes.STRING,
@@ -95,10 +95,10 @@ module RestModule {
         displayName: "PATCH",
         readable: true,
         type: QueryTypes.FIELDS,
-        urlDisplay: true,
         fields: {
           path: {
             type: DatasourceFieldTypes.STRING,
+            display: "URL",
           },
           queryString: {
             type: DatasourceFieldTypes.STRING,
@@ -114,10 +114,10 @@ module RestModule {
       delete: {
         displayName: "DELETE",
         type: QueryTypes.FIELDS,
-        urlDisplay: true,
         fields: {
           path: {
             type: DatasourceFieldTypes.STRING,
+            display: "URL",
           },
           queryString: {
             type: DatasourceFieldTypes.STRING,