diff --git a/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/String.svelte b/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/String.svelte
index a526dec42c..48d10798b2 100644
--- a/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/String.svelte
+++ b/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/String.svelte
@@ -1,33 +1,23 @@
 <script lang="ts">
-  import { Label, EnvDropdown } from "@budibase/bbui"
-  import { environment, licensing } from "@/stores/portal"
+  import { Label } from "@budibase/bbui"
+  import EnvVariableInput from "@/components/portal/environment/EnvVariableInput.svelte"
 
   export let type
   export let name
   export let value
   export let error
   export let placeholder
-  export let showModal = () => {}
-
-  async function handleUpgradePanel() {
-    await environment.upgradePanelOpened()
-    $licensing.goToUpgradePage()
-  }
 </script>
 
 <div class="form-row">
   <Label>{name}</Label>
-  <EnvDropdown
+  <EnvVariableInput
     on:change
     on:blur
     type={type === "port" ? "string" : type}
     {value}
     {error}
     {placeholder}
-    variables={$environment.variables}
-    environmentVariablesEnabled={$licensing.environmentVariablesEnabled}
-    {showModal}
-    {handleUpgradePanel}
   />
 </div>