Use EnvVariableInput

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}

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 {
+  import { ModalContent, Layout, Select, Body, Input } from "@budibase/bbui"
-    ModalContent,
-    Layout,
-    Select,
-    Body,
-    Input,
-    EnvDropdown,
-    Modal,
-    notifications,
-  } 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}
+        error={blurred.basic.username ? errors.basic.username : undefined}
-        showModal={() => showModal("configKey")}
-        variables={$environment.variables}
-        environmentVariablesEnabled={$licensing.environmentVariablesEnabled}
-        {handleUpgradePanel}
       />
-      <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}
+        error={blurred.basic.password ? errors.basic.password : undefined}
-        showModal={() => showModal("configKey")}
-        variables={$environment.variables}
-        environmentVariablesEnabled={$licensing.environmentVariablesEnabled}
-        {handleUpgradePanel}
       />
     {/if}
     {#if form.type === AUTH_TYPES.BEARER}
@@ -291,7 +264,3 @@
     {/if}
   </Layout>
 </ModalContent>
-
-<Modal bind:this={createVariableModal}>
-  <CreateEditVariableModal {save} />
-</Modal>