From ed9b12f558b59a1160e93696f9e3f77a4d8a21ce Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 21 Mar 2025 10:47:43 +0100
Subject: [PATCH 01/26] Type EnvDropdown

---
 .../bbui/src/Form/Core/EnvDropdown.svelte     | 34 +++++++++----------
 packages/bbui/src/Form/EnvDropdown.svelte     | 17 ++++------
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/packages/bbui/src/Form/Core/EnvDropdown.svelte b/packages/bbui/src/Form/Core/EnvDropdown.svelte
index ed5878d6b2..9873cfd08e 100644
--- a/packages/bbui/src/Form/Core/EnvDropdown.svelte
+++ b/packages/bbui/src/Form/Core/EnvDropdown.svelte
@@ -1,25 +1,25 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher, onMount } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Divider from "../../Divider/Divider.svelte"
 
-  export let value = null
-  export let placeholder = null
-  export let type = "text"
-  export let disabled = false
-  export let id = null
-  export let readonly = false
-  export let updateOnChange = true
-  export let align
-  export let autofocus = false
+  export let value: string | number | null = null
+  export let placeholder: string | null = null
+  export let type: "text" | "number" = "text"
+  export let disabled: boolean = false
+  export let id: string | null = null
+  export let readonly: boolean = false
+  export let updateOnChange: boolean = true
+  export let align: string | undefined = undefined
+  export let autofocus: boolean = false
   export let variables
   export let showModal
   export let environmentVariablesEnabled
   export let handleUpgradePanel
   const dispatch = createEventDispatcher()
 
-  let field
+  let field: HTMLInputElement
   let focus = false
   let iconFocused = false
   let open = false
@@ -30,7 +30,7 @@
   // Strips the name out of the value which is {{ env.Variable }} resulting in an array like ["Variable"]
   $: hbsValue = String(value)?.match(STRIP_NAME_REGEX) || []
 
-  const updateValue = newValue => {
+  const updateValue = (newValue: any) => {
     if (readonly) {
       return
     }
@@ -48,7 +48,7 @@
     focus = true
   }
 
-  const onBlur = event => {
+  const onBlur = (event: any) => {
     if (readonly) {
       return
     }
@@ -56,14 +56,14 @@
     updateValue(event.target.value)
   }
 
-  const onInput = event => {
+  const onInput = (event: any) => {
     if (readonly || !updateOnChange) {
       return
     }
     updateValue(event.target.value)
   }
 
-  const handleOutsideClick = event => {
+  const handleOutsideClick = (event: Event) => {
     if (open) {
       event.stopPropagation()
       open = false
@@ -73,7 +73,7 @@
     }
   }
 
-  const handleVarSelect = variable => {
+  const handleVarSelect = (variable: string) => {
     open = false
     focus = false
     iconFocused = false
@@ -121,7 +121,7 @@
 
     <input
       bind:this={field}
-      disabled={hbsValue.length || disabled}
+      disabled={!!hbsValue.length || disabled}
       {readonly}
       {id}
       value={hbsValue.length ? `{{ ${hbsValue[0]} }}` : value}
diff --git a/packages/bbui/src/Form/EnvDropdown.svelte b/packages/bbui/src/Form/EnvDropdown.svelte
index 4045d9e6df..af714b7e9c 100644
--- a/packages/bbui/src/Form/EnvDropdown.svelte
+++ b/packages/bbui/src/Form/EnvDropdown.svelte
@@ -1,26 +1,25 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import EnvDropdown from "./Core/EnvDropdown.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
-  export let label = null
+  export let value: string | undefined = undefined
+  export let label: string | undefined = undefined
   export let labelPosition = "above"
   export let placeholder = null
-  export let type = "text"
+  export let type: "text" | "number" = "text"
   export let disabled = false
   export let readonly = false
-  export let error = null
+  export let error: string | undefined = undefined
   export let updateOnChange = true
-  export let quiet = false
   export let autofocus
   export let variables
   export let showModal
-  export let helpText = null
+  export let helpText: string | undefined = undefined
   export let environmentVariablesEnabled
   export let handleUpgradePanel
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: any) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -29,13 +28,11 @@
 <Field {helpText} {label} {labelPosition} {error}>
   <EnvDropdown
     {updateOnChange}
-    {error}
     {disabled}
     {readonly}
     {value}
     {placeholder}
     {type}
-    {quiet}
     {autofocus}
     {variables}
     {showModal}

From 5a1ea0a39c70eca8192369a2692202cf85a355f7 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 21 Mar 2025 10:53:14 +0100
Subject: [PATCH 02/26] Improve type

---
 packages/bbui/src/Form/Core/EnvDropdown.svelte | 12 ++++++------
 packages/bbui/src/Form/EnvDropdown.svelte      | 16 ++++++++--------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/bbui/src/Form/Core/EnvDropdown.svelte b/packages/bbui/src/Form/Core/EnvDropdown.svelte
index 9873cfd08e..d54a21ba02 100644
--- a/packages/bbui/src/Form/Core/EnvDropdown.svelte
+++ b/packages/bbui/src/Form/Core/EnvDropdown.svelte
@@ -4,19 +4,19 @@
   import clickOutside from "../../Actions/click_outside"
   import Divider from "../../Divider/Divider.svelte"
 
-  export let value: string | number | null = null
-  export let placeholder: string | null = null
-  export let type: "text" | "number" = "text"
+  export let value: string | number | undefined = undefined
+  export let placeholder: string | undefined = undefined
+  export let type: "text" | "number" | "password" = "text"
   export let disabled: boolean = false
-  export let id: string | null = null
+  export let id: string | undefined = undefined
   export let readonly: boolean = false
   export let updateOnChange: boolean = true
   export let align: string | undefined = undefined
   export let autofocus: boolean = false
   export let variables
-  export let showModal
+  export let showModal: () => void
   export let environmentVariablesEnabled
-  export let handleUpgradePanel
+  export let handleUpgradePanel: () => void
   const dispatch = createEventDispatcher()
 
   let field: HTMLInputElement
diff --git a/packages/bbui/src/Form/EnvDropdown.svelte b/packages/bbui/src/Form/EnvDropdown.svelte
index af714b7e9c..0f53c2c829 100644
--- a/packages/bbui/src/Form/EnvDropdown.svelte
+++ b/packages/bbui/src/Form/EnvDropdown.svelte
@@ -5,19 +5,19 @@
 
   export let value: string | undefined = undefined
   export let label: string | undefined = undefined
-  export let labelPosition = "above"
-  export let placeholder = null
-  export let type: "text" | "number" = "text"
+  export let labelPosition: string = "above"
+  export let placeholder: string | undefined = undefined
+  export let type: "text" | "number" | "password" = "text"
   export let disabled = false
   export let readonly = false
   export let error: string | undefined = undefined
   export let updateOnChange = true
-  export let autofocus
-  export let variables
-  export let showModal
+  export let autofocus: boolean = false
+  export let variables: { name: string }[] = []
+  export let showModal: () => void = () => {}
   export let helpText: string | undefined = undefined
-  export let environmentVariablesEnabled
-  export let handleUpgradePanel
+  export let environmentVariablesEnabled: boolean = false
+  export let handleUpgradePanel: () => void = () => {}
   const dispatch = createEventDispatcher()
   const onChange = (e: any) => {
     value = e.detail

From 84a95ef3238087c503f9cc1cb89ee10a5a59aa56 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 21 Mar 2025 11:13:49 +0100
Subject: [PATCH 03/26] Don't display undefined

---
 packages/bbui/src/Form/Core/EnvDropdown.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bbui/src/Form/Core/EnvDropdown.svelte b/packages/bbui/src/Form/Core/EnvDropdown.svelte
index d54a21ba02..34d0730ec7 100644
--- a/packages/bbui/src/Form/Core/EnvDropdown.svelte
+++ b/packages/bbui/src/Form/Core/EnvDropdown.svelte
@@ -124,7 +124,7 @@
       disabled={!!hbsValue.length || disabled}
       {readonly}
       {id}
-      value={hbsValue.length ? `{{ ${hbsValue[0]} }}` : value}
+      value={(hbsValue.length ? `{{ ${hbsValue[0]} }}` : value) ?? ""}
       placeholder={placeholder || ""}
       on:click
       on:blur

From 2b671478d3b17e5124ae75e473f097df0cf9ba20 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 21 Mar 2025 11:21:19 +0100
Subject: [PATCH 04/26] Require modal

---
 packages/bbui/src/Form/EnvDropdown.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bbui/src/Form/EnvDropdown.svelte b/packages/bbui/src/Form/EnvDropdown.svelte
index 0f53c2c829..98ad4e50e1 100644
--- a/packages/bbui/src/Form/EnvDropdown.svelte
+++ b/packages/bbui/src/Form/EnvDropdown.svelte
@@ -14,7 +14,7 @@
   export let updateOnChange = true
   export let autofocus: boolean = false
   export let variables: { name: string }[] = []
-  export let showModal: () => void = () => {}
+  export let showModal: () => void
   export let helpText: string | undefined = undefined
   export let environmentVariablesEnabled: boolean = false
   export let handleUpgradePanel: () => void = () => {}

From ca52cf7e10f4e93592c7aef5c13c5dab076d319b Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 21 Mar 2025 12:47:54 +0100
Subject: [PATCH 05/26] Convert CreateEditVariableModal.svelte

---
 packages/bbui/src/Form/Core/TextField.svelte  |  2 +-
 packages/bbui/src/Form/Input.svelte           |  2 +-
 packages/bbui/src/context.d.ts                |  2 ++
 packages/bbui/src/types/index.ts              |  2 ++
 packages/bbui/src/types/modalContext.ts       |  3 +++
 .../CreateEditVariableModal.svelte            | 20 +++++++++----------
 6 files changed, 19 insertions(+), 12 deletions(-)
 create mode 100644 packages/bbui/src/types/index.ts
 create mode 100644 packages/bbui/src/types/modalContext.ts

diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte
index 0d5f9b9ef1..5bb2774cdf 100644
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@@ -13,7 +13,7 @@
   export let quiet = false
   export let align: "left" | "right" | "center" | undefined = undefined
   export let autofocus: boolean | null = false
-  export let autocomplete: boolean | undefined
+  export let autocomplete: boolean | string | undefined
 
   const dispatch = createEventDispatcher()
 
diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte
index b1a8669135..09500d649e 100644
--- a/packages/bbui/src/Form/Input.svelte
+++ b/packages/bbui/src/Form/Input.svelte
@@ -14,7 +14,7 @@
   export let updateOnChange = true
   export let quiet = false
   export let autofocus: boolean | undefined = undefined
-  export let autocomplete: boolean | undefined = undefined
+  export let autocomplete: boolean | string | undefined = undefined
   export let helpText: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
diff --git a/packages/bbui/src/context.d.ts b/packages/bbui/src/context.d.ts
index d9a01d0adc..c0da577450 100644
--- a/packages/bbui/src/context.d.ts
+++ b/packages/bbui/src/context.d.ts
@@ -1,7 +1,9 @@
 import { ActionMenu } from "./types"
+import { ModalContext } from "./types"
 
 declare module "svelte" {
   export function getContext(key: "actionMenu"): ActionMenu | undefined
+  export function getContext(key: "bbui-modal"): ModalContext
 }
 
 export const Modal = "bbui-modal"
diff --git a/packages/bbui/src/types/index.ts b/packages/bbui/src/types/index.ts
new file mode 100644
index 0000000000..a80efc0d2f
--- /dev/null
+++ b/packages/bbui/src/types/index.ts
@@ -0,0 +1,2 @@
+export * from "./actionMenu"
+export * from "./modalContext"
diff --git a/packages/bbui/src/types/modalContext.ts b/packages/bbui/src/types/modalContext.ts
new file mode 100644
index 0000000000..6c205ab7e1
--- /dev/null
+++ b/packages/bbui/src/types/modalContext.ts
@@ -0,0 +1,3 @@
+export interface ModalContext {
+  hide: () => void
+}
diff --git a/packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte b/packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte
index dc5bb6c8f8..8abb170953 100644
--- a/packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte
+++ b/packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import {
     ModalContent,
     Button,
@@ -14,23 +14,23 @@
 
   const modalContext = getContext(Context.Modal)
 
-  export let save
-  export let row
+  export let save: any
+  export let row: any
 
-  let deleteDialog
+  let deleteDialog: ConfirmDialog
   let name = row?.name || ""
-  let productionValue
-  let developmentValue
+  let productionValue: string
+  let developmentValue: string
   let useProductionValue = true
 
   const HasSpacesRegex = /[\\"\s]/
 
-  const deleteVariable = async name => {
+  const deleteVariable = async (name: string) => {
     try {
       await environment.deleteVariable(name)
       modalContext.hide()
       notifications.success("Environment variable deleted")
-    } catch (err) {
+    } catch (err: any) {
       notifications.error(err.message)
     }
   }
@@ -43,7 +43,7 @@
         development: developmentValue,
       })
       notifications.success("Environment variable saved")
-    } catch (err) {
+    } catch (err: any) {
       notifications.error(`Error saving environment variable - ${err.message}`)
     }
   }
@@ -58,7 +58,7 @@
     disabled={row}
     label="Name"
     bind:value={name}
-    error={HasSpacesRegex.test(name) && "Must not include spaces"}
+    error={HasSpacesRegex.test(name) ? "Must not include spaces" : undefined}
   />
   <div>
     <Heading size="XS">Production</Heading>

From 9231c32ccd30437640c25ade2365d3341892b58b Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 21 Mar 2025 12:56:29 +0100
Subject: [PATCH 06/26] Add types

---
 packages/bbui/src/Form/Core/EnvDropdown.svelte | 3 ++-
 packages/bbui/src/Form/EnvDropdown.svelte      | 3 ++-
 packages/bbui/src/index.ts                     | 2 ++
 packages/bbui/src/types/envDropdown.ts         | 1 +
 packages/bbui/src/types/index.ts               | 1 +
 packages/bbui/tsconfig.json                    | 3 ++-
 packages/bbui/vite.config.js                   | 1 +
 7 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 packages/bbui/src/types/envDropdown.ts

diff --git a/packages/bbui/src/Form/Core/EnvDropdown.svelte b/packages/bbui/src/Form/Core/EnvDropdown.svelte
index 34d0730ec7..0519bbbf73 100644
--- a/packages/bbui/src/Form/Core/EnvDropdown.svelte
+++ b/packages/bbui/src/Form/Core/EnvDropdown.svelte
@@ -3,10 +3,11 @@
   import { createEventDispatcher, onMount } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Divider from "../../Divider/Divider.svelte"
+  import { EnvDropdownType } from "@/types"
 
   export let value: string | number | undefined = undefined
   export let placeholder: string | undefined = undefined
-  export let type: "text" | "number" | "password" = "text"
+  export let type: EnvDropdownType = "text"
   export let disabled: boolean = false
   export let id: string | undefined = undefined
   export let readonly: boolean = false
diff --git a/packages/bbui/src/Form/EnvDropdown.svelte b/packages/bbui/src/Form/EnvDropdown.svelte
index 98ad4e50e1..d34bb168bd 100644
--- a/packages/bbui/src/Form/EnvDropdown.svelte
+++ b/packages/bbui/src/Form/EnvDropdown.svelte
@@ -2,12 +2,13 @@
   import Field from "./Field.svelte"
   import EnvDropdown from "./Core/EnvDropdown.svelte"
   import { createEventDispatcher } from "svelte"
+  import { EnvDropdownType } from "@/types"
 
   export let value: string | undefined = undefined
   export let label: string | undefined = undefined
   export let labelPosition: string = "above"
   export let placeholder: string | undefined = undefined
-  export let type: "text" | "number" | "password" = "text"
+  export let type: EnvDropdownType = "text"
   export let disabled = false
   export let readonly = false
   export let error: string | undefined = undefined
diff --git a/packages/bbui/src/index.ts b/packages/bbui/src/index.ts
index b81bc241a6..384eec148f 100644
--- a/packages/bbui/src/index.ts
+++ b/packages/bbui/src/index.ts
@@ -111,3 +111,5 @@ export { banner, BANNER_TYPES } from "./Stores/banner"
 
 // Helpers
 export * as Helpers from "./helpers"
+
+export type * from "./types"
diff --git a/packages/bbui/src/types/envDropdown.ts b/packages/bbui/src/types/envDropdown.ts
new file mode 100644
index 0000000000..e796f1d417
--- /dev/null
+++ b/packages/bbui/src/types/envDropdown.ts
@@ -0,0 +1 @@
+export type EnvDropdownType = "text" | "number" | "password" | "port"
diff --git a/packages/bbui/src/types/index.ts b/packages/bbui/src/types/index.ts
index a80efc0d2f..e191a22a72 100644
--- a/packages/bbui/src/types/index.ts
+++ b/packages/bbui/src/types/index.ts
@@ -1,2 +1,3 @@
 export * from "./actionMenu"
+export * from "./envDropdown"
 export * from "./modalContext"
diff --git a/packages/bbui/tsconfig.json b/packages/bbui/tsconfig.json
index af898e27a1..a7e4001c75 100644
--- a/packages/bbui/tsconfig.json
+++ b/packages/bbui/tsconfig.json
@@ -11,7 +11,8 @@
         "../*/src/index.js",
         "../*",
         "../../node_modules/@budibase/*"
-      ]
+      ],
+      "@/*": ["./src/*"]
     }
   },
   "include": ["./src/**/*"],
diff --git a/packages/bbui/vite.config.js b/packages/bbui/vite.config.js
index bccca20e43..337c3ad6e9 100644
--- a/packages/bbui/vite.config.js
+++ b/packages/bbui/vite.config.js
@@ -23,6 +23,7 @@ export default defineConfig(({ mode }) => {
       alias: {
         "@budibase/shared-core": path.resolve(__dirname, "../shared-core/src"),
         "@budibase/types": path.resolve(__dirname, "../types/src"),
+        "@": path.resolve(__dirname, "src"),
       },
     },
   }

From c460501b05540b19a694b0afb5cb5c4254e5edfc Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 21 Mar 2025 13:56:55 +0100
Subject: [PATCH 07/26] Fix linting issues

---
 .vscode/settings.json                          | 3 ++-
 packages/bbui/src/Form/Core/EnvDropdown.svelte | 2 +-
 packages/bbui/src/Form/EnvDropdown.svelte      | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0723219a8b..63ad91265f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -27,5 +27,6 @@
   },
   "[handlebars]": {
     "editor.formatOnSave": false
-  }
+  },
+  "eslint.validate": ["javascript", "typescript", "svelte"]
 }
diff --git a/packages/bbui/src/Form/Core/EnvDropdown.svelte b/packages/bbui/src/Form/Core/EnvDropdown.svelte
index 0519bbbf73..853120defd 100644
--- a/packages/bbui/src/Form/Core/EnvDropdown.svelte
+++ b/packages/bbui/src/Form/Core/EnvDropdown.svelte
@@ -3,7 +3,7 @@
   import { createEventDispatcher, onMount } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Divider from "../../Divider/Divider.svelte"
-  import { EnvDropdownType } from "@/types"
+  import type { EnvDropdownType } from "@/types"
 
   export let value: string | number | undefined = undefined
   export let placeholder: string | undefined = undefined
diff --git a/packages/bbui/src/Form/EnvDropdown.svelte b/packages/bbui/src/Form/EnvDropdown.svelte
index d34bb168bd..f24d32353e 100644
--- a/packages/bbui/src/Form/EnvDropdown.svelte
+++ b/packages/bbui/src/Form/EnvDropdown.svelte
@@ -2,7 +2,7 @@
   import Field from "./Field.svelte"
   import EnvDropdown from "./Core/EnvDropdown.svelte"
   import { createEventDispatcher } from "svelte"
-  import { EnvDropdownType } from "@/types"
+  import type { EnvDropdownType } from "@/types"
 
   export let value: string | undefined = undefined
   export let label: string | undefined = undefined

From 26933dc247f5f8f12d6251ee5bb9ccdbcb31f36e Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 09:58:29 +0100
Subject: [PATCH 08/26] Improve type

---
 .../portal/environment/CreateEditVariableModal.svelte     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte b/packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte
index 8abb170953..8a2db4cef8 100644
--- a/packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte
+++ b/packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte
@@ -15,7 +15,7 @@
   const modalContext = getContext(Context.Modal)
 
   export let save: any
-  export let row: any
+  export let row: { name: string } | undefined = undefined
 
   let deleteDialog: ConfirmDialog
   let name = row?.name || ""
@@ -55,7 +55,7 @@
   title={!row ? "Add new environment variable" : "Edit environment variable"}
 >
   <Input
-    disabled={row}
+    disabled={!!row}
     label="Name"
     bind:value={name}
     error={HasSpacesRegex.test(name) ? "Must not include spaces" : undefined}
@@ -100,12 +100,12 @@
 <ConfirmDialog
   bind:this={deleteDialog}
   onOk={() => {
-    deleteVariable(row.name)
+    deleteVariable(name)
   }}
   okText="Delete Environment Variable"
   title="Confirm Deletion"
 >
   Are you sure you wish to delete the environment variable
-  <i>{row.name}?</i>
+  <i>{name}?</i>
   This action cannot be undone.
 </ConfirmDialog>

From a9eac8c69a485db8e3e76df654efbbc0dd13ee98 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 12:00:50 +0100
Subject: [PATCH 09/26] String component to ts

---
 .../backend/Datasources/ConfigEditor/fields/String.svelte       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 4e42a3f1fc..a526dec42c 100644
--- a/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/String.svelte
+++ b/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/String.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { Label, EnvDropdown } from "@budibase/bbui"
   import { environment, licensing } from "@/stores/portal"
 

From 2b2d56f4066ac79c63a15f851c3bbcba5c8a8e82 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 12:03:58 +0100
Subject: [PATCH 10/26] Create reusable EnvVariableInput

---
 .../environment/EnvVariableInput.svelte       | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 packages/builder/src/components/portal/environment/EnvVariableInput.svelte

diff --git a/packages/builder/src/components/portal/environment/EnvVariableInput.svelte b/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
new file mode 100644
index 0000000000..24ffaf19bd
--- /dev/null
+++ b/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import {
+    EnvDropdown,
+    Modal,
+    notifications,
+    type EnvDropdownType,
+  } from "@budibase/bbui"
+  import { environment, licensing } from "@/stores/portal"
+  import CreateEditVariableModal from "./CreateEditVariableModal.svelte"
+  import type { CreateEnvironmentVariableRequest } from "@budibase/types"
+
+  export let type: EnvDropdownType
+  export let value: string | undefined = undefined
+  export let error: string | undefined = undefined
+  export let placeholder: string | undefined = undefined
+
+  let modal: Modal
+
+  async function handleUpgradePanel() {
+    await environment.upgradePanelOpened()
+    $licensing.goToUpgradePage()
+  }
+
+  async function saveVariable(data: CreateEnvironmentVariableRequest) {
+    try {
+      await environment.createVariable(data)
+      //   configValueSetterCallback(`{{ env.${data.name} }}`)
+      modal.hide()
+    } catch (err: any) {
+      notifications.error(`Failed to create variable: ${err.message}`)
+    }
+  }
+</script>
+
+<EnvDropdown
+  on:change
+  on:blur
+  type={type === "port" ? "string" : type}
+  {value}
+  {error}
+  {placeholder}
+  variables={$environment.variables}
+  environmentVariablesEnabled={$licensing.environmentVariablesEnabled}
+  showModal={() => modal.show()}
+  {handleUpgradePanel}
+/>
+
+<Modal bind:this={modal}>
+  <CreateEditVariableModal save={saveVariable} />
+</Modal>

From 3b047b166c9d8af6baf93e91e53a9a31205c8d0c Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 12:04:07 +0100
Subject: [PATCH 11/26] Reuse EnvVariableInput in String

---
 .../ConfigEditor/fields/String.svelte            | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

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>
 

From 9966175abd55b8f2b9cdf64da16c9c35f9d81c49 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 12:12:26 +0100
Subject: [PATCH 12/26] Type RestAuthenticaionModal

---
 .../common/bindings/BindableCombobox.svelte   |  4 ++--
 .../RestAuthenticationModal.svelte            | 24 +++++++++----------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindableCombobox.svelte b/packages/builder/src/components/common/bindings/BindableCombobox.svelte
index b3b7511ccd..467b9d68ad 100644
--- a/packages/builder/src/components/common/bindings/BindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/BindableCombobox.svelte
@@ -9,10 +9,10 @@
 
   export let value = ""
   export let bindings = []
-  export let placeholder
+  export let placeholder = undefined
   export let label
   export let disabled = false
-  export let options
+  export let options = undefined
   export let appendBindingsAsOptions = true
   export let error
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
index 9b562182b7..05ae8bc07e 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { onMount } from "svelte"
   import {
     ModalContent,
@@ -21,17 +21,17 @@
   export let onConfirm
   export let onRemove
 
-  let form = {
+  let form: any = {
     basic: {},
     bearer: {},
   }
 
-  let errors = {
+  let errors: any = {
     basic: {},
     bearer: {},
   }
 
-  let blurred = {
+  let blurred: any = {
     basic: {},
     bearer: {},
   }
@@ -39,8 +39,8 @@
   let hasErrors = false
   let hasChanged = false
 
-  let createVariableModal
-  let formFieldkey
+  let createVariableModal: Modal
+  let formFieldkey: string
 
   onMount(async () => {
     try {
@@ -79,7 +79,7 @@
    * map the form into a new config to save by type
    */
   const constructConfig = () => {
-    const newConfig = {
+    const newConfig: any = {
       name: form.name,
       type: form.type,
     }
@@ -123,7 +123,7 @@
         errors.name =
           // check for duplicate excluding the current config
           configs.find(
-            c => c.name === form.name && c.name !== currentConfig?.name
+            (c: any) => c.name === form.name && c.name !== currentConfig?.name
           ) !== undefined
             ? "Name must be unique"
             : null
@@ -169,12 +169,12 @@
     }
   }
 
-  const save = async data => {
+  const save = async (data: any) => {
     try {
       await environment.createVariable(data)
       form.basic[formFieldkey] = `{{ env.${data.name} }}`
       createVariableModal.hide()
-    } catch (err) {
+    } catch (err: any) {
       notifications.error(`Failed to create variable: ${err.message}`)
     }
   }
@@ -193,7 +193,7 @@
     $licensing.goToUpgradePage()
   }
 
-  function showModal(key) {
+  function showModal(key: any) {
     formFieldkey = key
     createVariableModal.show()
   }
@@ -274,10 +274,8 @@
           blurred.bearer.token = true
           onFieldChange()
         }}
-        allowJS={false}
         placeholder="Token"
         appendBindingsAsOptions={true}
-        drawerEnabled={false}
         error={blurred.bearer.token ? errors.bearer.token : null}
       />
     {/if}

From c8a3a59e2ba9aa8a46ef91ad459520fd622bdb6e Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 12:26:38 +0100
Subject: [PATCH 13/26] Type anys

---
 .../RestAuthenticationModal.svelte            | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
index 05ae8bc07e..2bcc414f8d 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
@@ -21,17 +21,27 @@
   export let onConfirm
   export let onRemove
 
-  let form: any = {
+  let form: FormData = {
     basic: {},
     bearer: {},
   }
 
-  let errors: any = {
+  let errors: FormData = {
     basic: {},
     bearer: {},
   }
 
-  let blurred: any = {
+  let blurred: {
+    name?: boolean
+    type?: boolean
+    basic: {
+      username?: boolean
+      password?: boolean
+    }
+    bearer: {
+      token?: boolean
+    }
+  } = {
     basic: {},
     bearer: {},
   }
@@ -126,7 +136,7 @@
             (c: any) => c.name === form.name && c.name !== currentConfig?.name
           ) !== undefined
             ? "Name must be unique"
-            : null
+            : undefined
       }
       // Name required
       else {
@@ -137,17 +147,17 @@
 
     // TYPE
     const typeError = () => {
-      errors.type = form.type ? null : "Type is required"
+      errors.type = form.type ? undefined : "Type is required"
       return !!errors.type
     }
 
     // BASIC AUTH
     const basicAuthErrors = () => {
       errors.basic.username = form.basic.username
-        ? null
+        ? undefined
         : "Username is required"
       errors.basic.password = form.basic.password
-        ? null
+        ? undefined
         : "Password is required"
 
       return !!(errors.basic.username || errors.basic.password || commonError)
@@ -155,7 +165,7 @@
 
     // BEARER TOKEN
     const bearerTokenErrors = () => {
-      errors.bearer.token = form.bearer.token ? null : "Token is required"
+      errors.bearer.token = form.bearer.token ? undefined : "Token is required"
       return !!(errors.bearer.token || commonError)
     }
 
@@ -221,7 +231,7 @@
       bind:value={form.name}
       on:change={onFieldChange}
       on:blur={() => (blurred.name = true)}
-      error={blurred.name ? errors.name : null}
+      error={blurred.name ? errors.name : undefined}
     />
     <Select
       label="Type"
@@ -229,7 +239,7 @@
       on:change={onFieldChange}
       options={AUTH_TYPE_LABELS}
       on:blur={() => (blurred.type = true)}
-      error={blurred.type ? errors.type : null}
+      error={blurred.type ? errors.type : undefined}
     />
     {#if form.type === AUTH_TYPES.BASIC}
       <EnvDropdown

From dfc7c49afac0f41993b993a420027bba026c898a Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 12:27:53 +0100
Subject: [PATCH 14/26] Use EnvVariableInput

---
 .../environment/EnvVariableInput.svelte       |  5 +-
 .../RestAuthenticationModal.svelte            | 69 +++++--------------
 2 files changed, 23 insertions(+), 51 deletions(-)

diff --git a/packages/builder/src/components/portal/environment/EnvVariableInput.svelte b/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
index 24ffaf19bd..a8cc3a01d2 100644
--- a/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
+++ b/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
@@ -9,7 +9,8 @@
   import CreateEditVariableModal from "./CreateEditVariableModal.svelte"
   import type { CreateEnvironmentVariableRequest } from "@budibase/types"
 
-  export let type: EnvDropdownType
+  export let label: string = ""
+  export let type: EnvDropdownType = "text"
   export let value: string | undefined = undefined
   export let error: string | undefined = undefined
   export let placeholder: string | undefined = undefined
@@ -32,9 +33,11 @@
   }
 </script>
 
+{value}
 <EnvDropdown
   on:change
   on:blur
+  {label}
   type={type === "port" ? "string" : type}
   {value}
   {error}
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
index 2bcc414f8d..b43d09671c 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
@@ -1,20 +1,23 @@
 <script lang="ts">
   import { onMount } from "svelte"
-  import {
-    ModalContent,
-    Layout,
-    Select,
-    Body,
-    Input,
-    EnvDropdown,
-    Modal,
-    notifications,
-  } from "@budibase/bbui"
+  import { ModalContent, Layout, Select, Body, Input } from "@budibase/bbui"
   import { AUTH_TYPE_LABELS, AUTH_TYPES } from "./authTypes"
   import { BindableCombobox } from "@/components/common/bindings"
   import { getAuthBindings, getEnvironmentBindings } from "@/dataBinding"
   import { environment, licensing, auth } from "@/stores/portal"
-  import CreateEditVariableModal from "@/components/portal/environment/CreateEditVariableModal.svelte"
+  import EnvVariableInput from "@/components/portal/environment/EnvVariableInput.svelte"
+
+  interface FormData {
+    name?: string
+    type?: string
+    basic: {
+      username?: string
+      password?: string
+    }
+    bearer: {
+      token?: string
+    }
+  }
 
   export let configs
   export let currentConfig
@@ -49,9 +52,6 @@
   let hasErrors = false
   let hasChanged = false
 
-  let createVariableModal: Modal
-  let formFieldkey: string
-
   onMount(async () => {
     try {
       await environment.loadVariables()
@@ -179,16 +179,6 @@
     }
   }
 
-  const save = async (data: any) => {
-    try {
-      await environment.createVariable(data)
-      form.basic[formFieldkey] = `{{ env.${data.name} }}`
-      createVariableModal.hide()
-    } catch (err: any) {
-      notifications.error(`Failed to create variable: ${err.message}`)
-    }
-  }
-
   const onFieldChange = () => {
     checkErrors()
     checkChanged()
@@ -197,16 +187,6 @@
   const onConfirmInternal = () => {
     onConfirm(constructConfig())
   }
-
-  async function handleUpgradePanel() {
-    await environment.upgradePanelOpened()
-    $licensing.goToUpgradePage()
-  }
-
-  function showModal(key: any) {
-    formFieldkey = key
-    createVariableModal.show()
-  }
 </script>
 
 <ModalContent
@@ -242,28 +222,21 @@
       error={blurred.type ? errors.type : undefined}
     />
     {#if form.type === AUTH_TYPES.BASIC}
-      <EnvDropdown
+      <EnvVariableInput
         label="Username"
         bind:value={form.basic.username}
         on:change={onFieldChange}
         on:blur={() => (blurred.basic.username = true)}
-        error={blurred.basic.username ? errors.basic.username : null}
-        showModal={() => showModal("configKey")}
-        variables={$environment.variables}
-        environmentVariablesEnabled={$licensing.environmentVariablesEnabled}
-        {handleUpgradePanel}
+        error={blurred.basic.username ? errors.basic.username : undefined}
       />
-      <EnvDropdown
+
+      <EnvVariableInput
         label="Password"
         type="password"
         bind:value={form.basic.password}
         on:change={onFieldChange}
         on:blur={() => (blurred.basic.password = true)}
-        error={blurred.basic.password ? errors.basic.password : null}
-        showModal={() => showModal("configKey")}
-        variables={$environment.variables}
-        environmentVariablesEnabled={$licensing.environmentVariablesEnabled}
-        {handleUpgradePanel}
+        error={blurred.basic.password ? errors.basic.password : undefined}
       />
     {/if}
     {#if form.type === AUTH_TYPES.BEARER}
@@ -291,7 +264,3 @@
     {/if}
   </Layout>
 </ModalContent>
-
-<Modal bind:this={createVariableModal}>
-  <CreateEditVariableModal {save} />
-</Modal>

From 62d9ad6b6662807b3c31fbccbffd3cd9a51ef27e Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 12:30:24 +0100
Subject: [PATCH 15/26] Fix binding

---
 .../src/components/portal/environment/EnvVariableInput.svelte  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/builder/src/components/portal/environment/EnvVariableInput.svelte b/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
index a8cc3a01d2..2c659ff4aa 100644
--- a/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
+++ b/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
@@ -33,13 +33,12 @@
   }
 </script>
 
-{value}
 <EnvDropdown
   on:change
   on:blur
+  bind:value
   {label}
   type={type === "port" ? "string" : type}
-  {value}
   {error}
   {placeholder}
   variables={$environment.variables}

From fd3663290b600e8abe97ef0a851b98cc10931277 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 12:34:50 +0100
Subject: [PATCH 16/26] Type config input

---
 .../ConfigEditor/ConfigInput.svelte           | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/backend/Datasources/ConfigEditor/ConfigInput.svelte b/packages/builder/src/components/backend/Datasources/ConfigEditor/ConfigInput.svelte
index 569f77d5ce..7021141f6f 100644
--- a/packages/builder/src/components/backend/Datasources/ConfigEditor/ConfigInput.svelte
+++ b/packages/builder/src/components/backend/Datasources/ConfigEditor/ConfigInput.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import ObjectField from "./fields/Object.svelte"
   import BooleanField from "./fields/Boolean.svelte"
   import LongFormField from "./fields/LongForm.svelte"
@@ -6,15 +6,23 @@
   import StringField from "./fields/String.svelte"
   import SelectField from "./fields/Select.svelte"
 
-  export let type
-  export let value
-  export let error
-  export let name
-  export let config
-  export let showModal = () => {}
+  type InputType =
+    | "string"
+    | "boolean"
+    | "object"
+    | "longForm"
+    | "fieldGroup"
+    | "select"
+
+  export let type: InputType
+  export let value: any
+  export let error: string
+  export let name: string
+  export let config: any
+
   export let placeholder
 
-  const selectComponent = type => {
+  const selectComponent = (type: InputType) => {
     if (type === "object") {
       return ObjectField
     } else if (type === "boolean") {
@@ -40,7 +48,6 @@
   {error}
   {name}
   {config}
-  {showModal}
   {placeholder}
   on:blur
   on:change

From 87b11f3c48a4d274e7f28754b00360c9f06f3129 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 12:37:27 +0100
Subject: [PATCH 17/26] Clean unused code

---
 .../ConfigEditor/ConfigInput.svelte           |  7 ++--
 .../Datasources/ConfigEditor/index.svelte     | 36 +------------------
 2 files changed, 4 insertions(+), 39 deletions(-)

diff --git a/packages/builder/src/components/backend/Datasources/ConfigEditor/ConfigInput.svelte b/packages/builder/src/components/backend/Datasources/ConfigEditor/ConfigInput.svelte
index 7021141f6f..2e00e1a069 100644
--- a/packages/builder/src/components/backend/Datasources/ConfigEditor/ConfigInput.svelte
+++ b/packages/builder/src/components/backend/Datasources/ConfigEditor/ConfigInput.svelte
@@ -16,11 +16,10 @@
 
   export let type: InputType
   export let value: any
-  export let error: string
+  export let error: string | null
   export let name: string
-  export let config: any
-
-  export let placeholder
+  export let config: any = undefined
+  export let placeholder: string | undefined = undefined
 
   const selectComponent = (type: InputType) => {
     if (type === "object") {
diff --git a/packages/builder/src/components/backend/Datasources/ConfigEditor/index.svelte b/packages/builder/src/components/backend/Datasources/ConfigEditor/index.svelte
index 058b4348cc..acee59346b 100644
--- a/packages/builder/src/components/backend/Datasources/ConfigEditor/index.svelte
+++ b/packages/builder/src/components/backend/Datasources/ConfigEditor/index.svelte
@@ -1,19 +1,10 @@
 <script>
-  import {
-    keepOpen,
-    Modal,
-    notifications,
-    Body,
-    Layout,
-    ModalContent,
-  } from "@budibase/bbui"
+  import { keepOpen, Body, Layout, ModalContent } from "@budibase/bbui"
   import { processStringSync } from "@budibase/string-templates"
-  import CreateEditVariableModal from "@/components/portal/environment/CreateEditVariableModal.svelte"
   import ConfigInput from "./ConfigInput.svelte"
   import { createValidatedConfigStore } from "./stores/validatedConfig"
   import { createValidatedNameStore } from "./stores/validatedName"
   import { get } from "svelte/store"
-  import { environment } from "@/stores/portal"
 
   export let integration
   export let config
@@ -39,24 +30,6 @@
 
     return keepOpen
   }
-
-  let createVariableModal
-  let configValueSetterCallback = () => {}
-
-  const showModal = setter => {
-    configValueSetterCallback = setter
-    createVariableModal.show()
-  }
-
-  async function saveVariable(data) {
-    try {
-      await environment.createVariable(data)
-      configValueSetterCallback(`{{ env.${data.name} }}`)
-      createVariableModal.hide()
-    } catch (err) {
-      notifications.error(`Failed to create variable: ${err.message}`)
-    }
-  }
 </script>
 
 <ModalContent
@@ -79,7 +52,6 @@
       value={$nameStore.name}
       error={$nameStore.error}
       name="Name"
-      showModal={() => showModal(nameStore.updateValue)}
       on:blur={nameStore.markActive}
       on:change={e => nameStore.updateValue(e.detail)}
     />
@@ -94,15 +66,9 @@
         {name}
         {config}
         {placeholder}
-        showModal={() =>
-          showModal(newValue => configStore.updateFieldValue(key, newValue))}
         on:blur={() => configStore.markFieldActive(key)}
         on:change={e => configStore.updateFieldValue(key, e.detail)}
       />
     {/if}
   {/each}
 </ModalContent>
-
-<Modal bind:this={createVariableModal}>
-  <CreateEditVariableModal save={saveVariable} />
-</Modal>

From 2b2b6951f279cb945b41403043ff132a667714ff Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 12:45:08 +0100
Subject: [PATCH 18/26] Fix type

---
 packages/bbui/src/Menu/Item.svelte    | 2 +-
 packages/bbui/src/types/actionMenu.ts | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte
index d07939d894..bee00e5225 100644
--- a/packages/bbui/src/Menu/Item.svelte
+++ b/packages/bbui/src/Menu/Item.svelte
@@ -3,7 +3,7 @@
   import Icon from "../Icon/Icon.svelte"
 
   const dispatch = createEventDispatcher()
-  const actionMenu = getContext("actionMenu") as { hideAll: () => void }
+  const actionMenu = getContext("actionMenu")
 
   export let icon: string | undefined = undefined
   export let disabled: boolean | undefined = undefined
diff --git a/packages/bbui/src/types/actionMenu.ts b/packages/bbui/src/types/actionMenu.ts
index 872a9f7c75..a21ec83d66 100644
--- a/packages/bbui/src/types/actionMenu.ts
+++ b/packages/bbui/src/types/actionMenu.ts
@@ -1,3 +1,4 @@
 export interface ActionMenu {
   hide: () => void
+  hideAll: () => void
 }

From 3b0084aac00c76e05136769109586c98577d32b9 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 13:08:04 +0100
Subject: [PATCH 19/26] Fix types

---
 packages/bbui/src/Form/Core/EnvDropdown.svelte | 2 +-
 packages/bbui/src/Form/EnvDropdown.svelte      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Form/Core/EnvDropdown.svelte b/packages/bbui/src/Form/Core/EnvDropdown.svelte
index 853120defd..45a986f23f 100644
--- a/packages/bbui/src/Form/Core/EnvDropdown.svelte
+++ b/packages/bbui/src/Form/Core/EnvDropdown.svelte
@@ -3,7 +3,7 @@
   import { createEventDispatcher, onMount } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Divider from "../../Divider/Divider.svelte"
-  import type { EnvDropdownType } from "@/types"
+  import type { EnvDropdownType } from "../../types"
 
   export let value: string | number | undefined = undefined
   export let placeholder: string | undefined = undefined
diff --git a/packages/bbui/src/Form/EnvDropdown.svelte b/packages/bbui/src/Form/EnvDropdown.svelte
index f24d32353e..c86802aaa8 100644
--- a/packages/bbui/src/Form/EnvDropdown.svelte
+++ b/packages/bbui/src/Form/EnvDropdown.svelte
@@ -2,7 +2,7 @@
   import Field from "./Field.svelte"
   import EnvDropdown from "./Core/EnvDropdown.svelte"
   import { createEventDispatcher } from "svelte"
-  import type { EnvDropdownType } from "@/types"
+  import type { EnvDropdownType } from "../types"
 
   export let value: string | undefined = undefined
   export let label: string | undefined = undefined

From 6bbbebb5ae4138ca36534559755cfe33f946bb33 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 13:39:22 +0100
Subject: [PATCH 20/26] Fix build

---
 .../src/components/portal/environment/EnvVariableInput.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/portal/environment/EnvVariableInput.svelte b/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
index 2c659ff4aa..39531b1f9c 100644
--- a/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
+++ b/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
@@ -38,7 +38,7 @@
   on:blur
   bind:value
   {label}
-  type={type === "port" ? "string" : type}
+  type={type === "port" ? "text" : type}
   {error}
   {placeholder}
   variables={$environment.variables}

From be12e7cbbd47f5a5178364a0b659a0ed9297ef80 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 17:21:52 +0100
Subject: [PATCH 21/26] Load variables from envVariableInput

---
 .../automation/SetupPanel/AutomationBlockSetup.svelte | 11 +----------
 .../src/components/integration/RestQueryViewer.svelte |  9 +--------
 .../portal/environment/EnvVariableInput.svelte        | 10 ++++++++++
 .../Authentication/RestAuthenticationModal.svelte     | 11 +----------
 .../src/pages/builder/portal/apps/index.svelte        |  2 --
 5 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 194add5975..5c6db6fb89 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -23,7 +23,6 @@
 
   import CreateWebhookModal from "@/components/automation/Shared/CreateWebhookModal.svelte"
   import { automationStore, tables, evaluationContext } from "@/stores/builder"
-  import { environment } from "@/stores/portal"
   import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
   import {
     BindingSidePanel,
@@ -58,7 +57,7 @@
   } from "@budibase/frontend-core"
   import { getSchemaForDatasourcePlus } from "@/dataBinding"
   import { TriggerStepID, ActionStepID } from "@/constants/backend/automations"
-  import { onMount, createEventDispatcher } from "svelte"
+  import { createEventDispatcher } from "svelte"
   import { writable } from "svelte/store"
   import { cloneDeep } from "lodash/fp"
   import {
@@ -772,14 +771,6 @@
     }
     return params
   }
-
-  onMount(async () => {
-    try {
-      await environment.loadVariables()
-    } catch (error) {
-      console.error(error)
-    }
-  })
 </script>
 
 <div class="step-fields">
diff --git a/packages/builder/src/components/integration/RestQueryViewer.svelte b/packages/builder/src/components/integration/RestQueryViewer.svelte
index d23b8c9577..86cbee1732 100644
--- a/packages/builder/src/components/integration/RestQueryViewer.svelte
+++ b/packages/builder/src/components/integration/RestQueryViewer.svelte
@@ -1,7 +1,7 @@
 <script>
   import { beforeUrlChange, goto, params } from "@roxi/routify"
   import { datasources, flags, integrations, queries } from "@/stores/builder"
-  import { environment } from "@/stores/portal"
+
   import {
     Banner,
     Body,
@@ -407,13 +407,6 @@
       notifications.error("Error getting datasources")
     }
 
-    try {
-      // load the environment variables
-      await environment.loadVariables()
-    } catch (error) {
-      notifications.error(`Error getting environment variables - ${error}`)
-    }
-
     datasource = $datasources.list.find(ds => ds._id === query?.datasourceId)
     const datasourceUrl = datasource?.config.url
     const qs = query?.fields.queryString
diff --git a/packages/builder/src/components/portal/environment/EnvVariableInput.svelte b/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
index 39531b1f9c..1ca05c62ba 100644
--- a/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
+++ b/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
@@ -8,6 +8,7 @@
   import { environment, licensing } from "@/stores/portal"
   import CreateEditVariableModal from "./CreateEditVariableModal.svelte"
   import type { CreateEnvironmentVariableRequest } from "@budibase/types"
+  import { onMount } from "svelte"
 
   export let label: string = ""
   export let type: EnvDropdownType = "text"
@@ -31,6 +32,15 @@
       notifications.error(`Failed to create variable: ${err.message}`)
     }
   }
+
+  onMount(async () => {
+    try {
+      // load the environment variables
+      await environment.loadVariables()
+    } catch (error) {
+      notifications.error(`Error getting environment variables - ${error}`)
+    }
+  })
 </script>
 
 <EnvDropdown
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
index b43d09671c..d68dc82aa7 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
@@ -4,7 +4,7 @@
   import { AUTH_TYPE_LABELS, AUTH_TYPES } from "./authTypes"
   import { BindableCombobox } from "@/components/common/bindings"
   import { getAuthBindings, getEnvironmentBindings } from "@/dataBinding"
-  import { environment, licensing, auth } from "@/stores/portal"
+  import { licensing } from "@/stores/portal"
   import EnvVariableInput from "@/components/portal/environment/EnvVariableInput.svelte"
 
   interface FormData {
@@ -53,15 +53,6 @@
   let hasChanged = false
 
   onMount(async () => {
-    try {
-      await environment.loadVariables()
-      if ($auth.user) {
-        await licensing.init()
-      }
-    } catch (err) {
-      console.error(err)
-    }
-
     if (currentConfig) {
       deconstructConfig()
     }
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index bcd59cd948..91e84dd650 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -24,7 +24,6 @@
     auth,
     admin,
     licensing,
-    environment,
     enrichedApps,
     sortBy,
   } from "@/stores/portal"
@@ -162,7 +161,6 @@
 
   onMount(async () => {
     try {
-      await environment.loadVariables()
       // If the portal is loaded from an external URL with a template param
       const initInfo = await auth.getInitInfo()
       if (initInfo?.init_template) {

From 77b2d44966231b880b6476e09c8638394a55b893 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 25 Mar 2025 11:53:05 +0100
Subject: [PATCH 22/26] Undo unnecessary config

---
 packages/bbui/tsconfig.json  | 3 +--
 packages/bbui/vite.config.js | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/bbui/tsconfig.json b/packages/bbui/tsconfig.json
index a7e4001c75..af898e27a1 100644
--- a/packages/bbui/tsconfig.json
+++ b/packages/bbui/tsconfig.json
@@ -11,8 +11,7 @@
         "../*/src/index.js",
         "../*",
         "../../node_modules/@budibase/*"
-      ],
-      "@/*": ["./src/*"]
+      ]
     }
   },
   "include": ["./src/**/*"],
diff --git a/packages/bbui/vite.config.js b/packages/bbui/vite.config.js
index 337c3ad6e9..bccca20e43 100644
--- a/packages/bbui/vite.config.js
+++ b/packages/bbui/vite.config.js
@@ -23,7 +23,6 @@ export default defineConfig(({ mode }) => {
       alias: {
         "@budibase/shared-core": path.resolve(__dirname, "../shared-core/src"),
         "@budibase/types": path.resolve(__dirname, "../types/src"),
-        "@": path.resolve(__dirname, "src"),
       },
     },
   }

From 5a993b42706fee43bd0c3840899240cb89daa4b3 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 25 Mar 2025 12:27:00 +0100
Subject: [PATCH 23/26] Update value on creation

---
 .../src/components/portal/environment/EnvVariableInput.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/portal/environment/EnvVariableInput.svelte b/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
index 1ca05c62ba..5f07dcd88f 100644
--- a/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
+++ b/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
@@ -26,7 +26,7 @@
   async function saveVariable(data: CreateEnvironmentVariableRequest) {
     try {
       await environment.createVariable(data)
-      //   configValueSetterCallback(`{{ env.${data.name} }}`)
+      value = `{{ env.${data.name} }}`
       modal.hide()
     } catch (err: any) {
       notifications.error(`Failed to create variable: ${err.message}`)

From 9a09837722f535ed83c9e3c14b574916df8fc127 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 25 Mar 2025 13:26:53 +0100
Subject: [PATCH 24/26] Avoid duplicated errors

---
 .../portal/environment/EnvVariableInput.svelte         | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/components/portal/environment/EnvVariableInput.svelte b/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
index 5f07dcd88f..59d334345f 100644
--- a/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
+++ b/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
@@ -24,13 +24,9 @@
   }
 
   async function saveVariable(data: CreateEnvironmentVariableRequest) {
-    try {
-      await environment.createVariable(data)
-      value = `{{ env.${data.name} }}`
-      modal.hide()
-    } catch (err: any) {
-      notifications.error(`Failed to create variable: ${err.message}`)
-    }
+    await environment.createVariable(data)
+    value = `{{ env.${data.name} }}`
+    modal.hide()
   }
 
   onMount(async () => {

From 3e59fcdbbb0594fc77934306ea6cf84e1eb6014c Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 25 Mar 2025 14:18:48 +0100
Subject: [PATCH 25/26] Load environment on automations

---
 .../automation/SetupPanel/AutomationBlockSetup.svelte | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 5c6db6fb89..194add5975 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -23,6 +23,7 @@
 
   import CreateWebhookModal from "@/components/automation/Shared/CreateWebhookModal.svelte"
   import { automationStore, tables, evaluationContext } from "@/stores/builder"
+  import { environment } from "@/stores/portal"
   import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
   import {
     BindingSidePanel,
@@ -57,7 +58,7 @@
   } from "@budibase/frontend-core"
   import { getSchemaForDatasourcePlus } from "@/dataBinding"
   import { TriggerStepID, ActionStepID } from "@/constants/backend/automations"
-  import { createEventDispatcher } from "svelte"
+  import { onMount, createEventDispatcher } from "svelte"
   import { writable } from "svelte/store"
   import { cloneDeep } from "lodash/fp"
   import {
@@ -771,6 +772,14 @@
     }
     return params
   }
+
+  onMount(async () => {
+    try {
+      await environment.loadVariables()
+    } catch (error) {
+      console.error(error)
+    }
+  })
 </script>
 
 <div class="step-fields">

From 52cc191ab29529750e93eb10f5b04fef4dbf3cbf Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 25 Mar 2025 14:23:41 +0100
Subject: [PATCH 26/26] Load variables on mount

---
 .../RestAuthenticationModal.svelte            | 19 +++++++++++++++++--
 .../_components/panels/Variables/index.svelte | 13 +++++++++++--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
index d68dc82aa7..fa14c31809 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
@@ -1,10 +1,17 @@
 <script lang="ts">
   import { onMount } from "svelte"
-  import { ModalContent, Layout, Select, Body, Input } from "@budibase/bbui"
+  import {
+    ModalContent,
+    Layout,
+    Select,
+    Body,
+    Input,
+    notifications,
+  } from "@budibase/bbui"
   import { AUTH_TYPE_LABELS, AUTH_TYPES } from "./authTypes"
   import { BindableCombobox } from "@/components/common/bindings"
   import { getAuthBindings, getEnvironmentBindings } from "@/dataBinding"
-  import { licensing } from "@/stores/portal"
+  import { environment, licensing } from "@/stores/portal"
   import EnvVariableInput from "@/components/portal/environment/EnvVariableInput.svelte"
 
   interface FormData {
@@ -178,6 +185,14 @@
   const onConfirmInternal = () => {
     onConfirm(constructConfig())
   }
+
+  onMount(async () => {
+    try {
+      await environment.loadVariables()
+    } catch (error) {
+      notifications.error(`Error getting environment variables - ${error}`)
+    }
+  })
 </script>
 
 <ModalContent
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Variables/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Variables/index.svelte
index 0e0dba066a..4e1572f94f 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Variables/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Variables/index.svelte
@@ -1,14 +1,15 @@
 <script>
-  import { Heading, Layout } from "@budibase/bbui"
+  import { Heading, Layout, notifications } from "@budibase/bbui"
   import KeyValueBuilder from "@/components/integration/KeyValueBuilder.svelte"
   import ViewDynamicVariables from "./ViewDynamicVariables.svelte"
   import { getEnvironmentBindings } from "@/dataBinding"
-  import { licensing } from "@/stores/portal"
+  import { environment, licensing } from "@/stores/portal"
   import { queries } from "@/stores/builder"
   import { cloneDeep } from "lodash/fp"
   import SaveDatasourceButton from "../SaveDatasourceButton.svelte"
   import Panel from "../Panel.svelte"
   import Tooltip from "../Tooltip.svelte"
+  import { onMount } from "svelte"
 
   export let datasource
 
@@ -27,6 +28,14 @@
 
     updatedDatasource.config.staticVariables = newStaticVariables
   }
+
+  onMount(async () => {
+    try {
+      await environment.loadVariables()
+    } catch (error) {
+      notifications.error(`Error getting environment variables - ${error}`)
+    }
+  })
 </script>
 
 <Panel>