add tags to input dropdown

packages/bbui/src/Form/Core/EnvDropdown.svelte

@@ -3,6 +3,9 @@
   import { createEventDispatcher, onMount } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Divider from "../../Divider/Divider.svelte"
+  import Tag from "../../Tags/Tag.svelte"
+  import Tags from "../../Tags/Tags.svelte"
+
   export let value = null
   export let placeholder = null
   export let type = "text"
@@ -24,6 +27,12 @@
   let iconFocused = false
   let open = false
 
+  //eslint-disable-next-line
+  const STRIP_NAME_REGEX = /(?<=\.)(.*?)(?=\ })/g
+
+  // Strips the name out of the value which is {{ env.Variable }} resulting in an array like ["Variable"]
+  $: tags = String(value)?.match(STRIP_NAME_REGEX) || []
+
   const updateValue = newValue => {
     if (readonly) {
       return
@@ -57,15 +66,6 @@
     updateValue(event.target.value)
   }
 
-  const updateValueOnEnter = event => {
-    if (readonly) {
-      return
-    }
-    if (event.key === "Enter") {
-      updateValue(event.target.value)
-    }
-  }
-
   const handleOutsideClick = event => {
     if (open) {
       event.stopPropagation()
@@ -78,6 +78,8 @@
 
   const handleVarSelect = variable => {
     open = false
+    focus = false
+    iconFocused = false
     updateValue(`{{ env.${variable} }}`)
   }
 
@@ -102,6 +104,17 @@
     >
       <use xlink:href="#spectrum-icon-18-Key" />
     </svg>
+    <Tags>
+      <div class="tags">
+        <div class="tag">
+          {#each tags as tag}
+            <Tag closable on:click={() => updateValue("")}>
+              {tag}
+            </Tag>
+          {/each}
+        </div>
+      </div>
+    </Tags>
 
     <input
       bind:this={field}
@@ -109,7 +122,7 @@
       {readonly}
       {id}
       data-cy={dataCy}
-      value={value || ""}
+      value={!tags.length ? value : ""}
       placeholder={placeholder || ""}
       on:click
       on:blur
@@ -119,7 +132,6 @@
       on:blur={onBlur}
       on:focus={onFocus}
       on:input={onInput}
-      on:keyup={updateValueOnEnter}
       {type}
       class="spectrum-Textfield-input"
       style={align ? `text-align: ${align};` : ""}
@@ -205,10 +217,6 @@
   .spectrum-Textfield {
     width: 100%;
   }
-  input:disabled {
-    color: var(--spectrum-global-color-gray-600) !important;
-    -webkit-text-fill-color: var(--spectrum-global-color-gray-600) !important;
-  }
 
   .icon-position {
     position: absolute;
@@ -243,6 +251,7 @@
   }
 
   .no-variables-height {
+    height: 100px;
   }
 
   .no-variables-text {
@@ -265,4 +274,10 @@
   .add-variable:hover {
     background: var(--grey-1);
   }
+
+  .tags {
+    position: absolute;
+    bottom: 12%;
+    left: 1px;
+  }
 </style>

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

@@ -14,7 +14,7 @@
   import { IntegrationTypes } from "constants/backend"
   import { createValidationStore } from "helpers/validation/yup"
   import { createEventDispatcher, onMount } from "svelte"
-  import { environment, licensing } from "stores/portal"
+  import { environment, licensing, auth } from "stores/portal"
   import CreateEditVariableModal from "components/portal/environment/CreateEditVariableModal.svelte"
 
   export let datasource
@@ -22,6 +22,8 @@
   export let creating
 
   let createVariableModal
+  let selectedKey
+
   const validation = createValidationStore()
   const dispatch = createEventDispatcher()
 
@@ -69,10 +71,13 @@
 
   function save(data) {
     environment.createVariable(data)
+    config[selectedKey] = `{{ env.${data.name} }}`
     createVariableModal.hide()
   }
 
-  function showModal() {
+  function showModal(configKey) {
+    selectedKey = configKey
+    console.log(selectedKey)
     createVariableModal.show()
   }
 
@@ -83,7 +88,13 @@
 
   onMount(async () => {
     await environment.loadVariables()
+
+    if ($auth.user) {
+      await licensing.init()
+    }
   })
+
+  $: console.log(config)
 </script>
 
 <form>
@@ -128,7 +139,7 @@
         <div class="form-row">
           <Label>{getDisplayName(configKey)}</Label>
           <EnvDropdown
-            {showModal}
+            showModal={() => showModal(configKey)}
             variables={$environment.variables}
             on:change
             bind:value={config[configKey]}

packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte

@@ -32,15 +32,23 @@
       notifications.error(err.message)
     }
   }
+
+  const saveVariable = () => {
+    try {
+      save({
+        name,
+        production: productionValue,
+        development: developmentValue,
+      })
+      notifications.success("Environment variable saved")
+    } catch (err) {
+      notifications.error("Error saving environment variable")
+    }
+  }
 </script>
 
 <ModalContent
-  onConfirm={() =>
+  onConfirm={() => saveVariable()}
-    save({
-      name,
-      production: productionValue,
-      development: developmentValue,
-    })}
   title={!row ? "Add new environment variable" : "Edit environment variable"}
 >
   <Input disabled={row} label="Name" bind:value={name} />