support placeholder values in datasource config fields

packages/builder/src/components/backend/Datasources/ConfigEditor/ConfigInput.svelte

@@ -12,6 +12,7 @@
   export let name
   export let config
   export let showModal = () => {}
+  export let placeholder
 
   const selectComponent = type => {
     if (type === "object") {
@@ -40,6 +41,7 @@
   {name}
   {config}
   {showModal}
+  {placeholder}
   on:blur
   on:change
 />

packages/builder/src/components/backend/Datasources/ConfigEditor/fields/LongForm.svelte

@@ -5,11 +5,12 @@
   export let name
   export let value
   export let error
+  export let placeholder
 </script>
 
 <div class="form-row">
   <Label>{name}</Label>
-  <TextArea on:blur on:change {type} {value} {error} />
+  <TextArea on:blur on:change {type} {value} {error} {placeholder} />
 </div>
 
 <style>

packages/builder/src/components/backend/Datasources/ConfigEditor/fields/Select.svelte

@@ -6,6 +6,7 @@
   export let value
   export let error
   export let config
+  export let placeholder
 </script>
 
 <div class="form-row">
@@ -17,6 +18,7 @@
     {type}
     value={value || undefined}
     {error}
+    {placeholder}
   />
 </div>
 

packages/builder/src/components/backend/Datasources/ConfigEditor/fields/String.svelte

@@ -6,6 +6,7 @@
   export let name
   export let value
   export let error
+  export let placeholder
   export let showModal = () => {}
 
   async function handleUpgradePanel() {
@@ -22,6 +23,7 @@
     type={type === "port" ? "string" : type}
     {value}
     {error}
+    {placeholder}
     variables={$environment.variables}
     environmentVariablesEnabled={$licensing.environmentVariablesEnabled}
     {showModal}

packages/builder/src/components/backend/Datasources/ConfigEditor/index.svelte

@@ -85,7 +85,7 @@
     />
   {/if}
 
-  {#each $configStore.validatedConfig as { type, key, value, error, name, hidden, config }}
+  {#each $configStore.validatedConfig as { type, key, value, error, name, hidden, config, placeholder }}
     {#if hidden === undefined || !eval(processStringSync(hidden, $configStore.config))}
       <ConfigInput
         {type}
@@ -93,6 +93,7 @@
         {error}
         {name}
         {config}
+        {placeholder}
         showModal={() =>
           showModal(newValue => configStore.updateFieldValue(key, newValue))}
         on:blur={() => configStore.markFieldActive(key)}

packages/builder/src/components/backend/Datasources/ConfigEditor/stores/validatedConfig.js

@@ -114,6 +114,7 @@ export const createValidatedConfigStore = (integration, config) => {
           value: getValue(),
           error: $errorsStore[key],
           name: capitalise(properties.display || key),
+          placeholder: properties.placeholder,
           type: properties.type,
           hidden: properties.hidden,
           config: properties.config,

packages/types/src/sdk/datasources.ts

@@ -119,6 +119,7 @@ interface DatasourceBasicFieldConfig {
   default?: any
   deprecated?: boolean
   hidden?: string
+  placeholder?: string
 }
 
 interface DatasourceSelectFieldConfig extends DatasourceBasicFieldConfig {