add tags to input dropdown
This commit is contained in:
parent
e803c422a3
commit
4eaefa677a
3 changed files with 58 additions and 24 deletions
|
@ -3,6 +3,9 @@
|
||||||
import { createEventDispatcher, onMount } from "svelte"
|
import { createEventDispatcher, onMount } from "svelte"
|
||||||
import clickOutside from "../../Actions/click_outside"
|
import clickOutside from "../../Actions/click_outside"
|
||||||
import Divider from "../../Divider/Divider.svelte"
|
import Divider from "../../Divider/Divider.svelte"
|
||||||
|
import Tag from "../../Tags/Tag.svelte"
|
||||||
|
import Tags from "../../Tags/Tags.svelte"
|
||||||
|
|
||||||
export let value = null
|
export let value = null
|
||||||
export let placeholder = null
|
export let placeholder = null
|
||||||
export let type = "text"
|
export let type = "text"
|
||||||
|
@ -24,6 +27,12 @@
|
||||||
let iconFocused = false
|
let iconFocused = false
|
||||||
let open = 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 => {
|
const updateValue = newValue => {
|
||||||
if (readonly) {
|
if (readonly) {
|
||||||
return
|
return
|
||||||
|
@ -57,15 +66,6 @@
|
||||||
updateValue(event.target.value)
|
updateValue(event.target.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateValueOnEnter = event => {
|
|
||||||
if (readonly) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (event.key === "Enter") {
|
|
||||||
updateValue(event.target.value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleOutsideClick = event => {
|
const handleOutsideClick = event => {
|
||||||
if (open) {
|
if (open) {
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
|
@ -78,6 +78,8 @@
|
||||||
|
|
||||||
const handleVarSelect = variable => {
|
const handleVarSelect = variable => {
|
||||||
open = false
|
open = false
|
||||||
|
focus = false
|
||||||
|
iconFocused = false
|
||||||
updateValue(`{{ env.${variable} }}`)
|
updateValue(`{{ env.${variable} }}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -102,6 +104,17 @@
|
||||||
>
|
>
|
||||||
<use xlink:href="#spectrum-icon-18-Key" />
|
<use xlink:href="#spectrum-icon-18-Key" />
|
||||||
</svg>
|
</svg>
|
||||||
|
<Tags>
|
||||||
|
<div class="tags">
|
||||||
|
<div class="tag">
|
||||||
|
{#each tags as tag}
|
||||||
|
<Tag closable on:click={() => updateValue("")}>
|
||||||
|
{tag}
|
||||||
|
</Tag>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Tags>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
bind:this={field}
|
bind:this={field}
|
||||||
|
@ -109,7 +122,7 @@
|
||||||
{readonly}
|
{readonly}
|
||||||
{id}
|
{id}
|
||||||
data-cy={dataCy}
|
data-cy={dataCy}
|
||||||
value={value || ""}
|
value={!tags.length ? value : ""}
|
||||||
placeholder={placeholder || ""}
|
placeholder={placeholder || ""}
|
||||||
on:click
|
on:click
|
||||||
on:blur
|
on:blur
|
||||||
|
@ -119,7 +132,6 @@
|
||||||
on:blur={onBlur}
|
on:blur={onBlur}
|
||||||
on:focus={onFocus}
|
on:focus={onFocus}
|
||||||
on:input={onInput}
|
on:input={onInput}
|
||||||
on:keyup={updateValueOnEnter}
|
|
||||||
{type}
|
{type}
|
||||||
class="spectrum-Textfield-input"
|
class="spectrum-Textfield-input"
|
||||||
style={align ? `text-align: ${align};` : ""}
|
style={align ? `text-align: ${align};` : ""}
|
||||||
|
@ -205,10 +217,6 @@
|
||||||
.spectrum-Textfield {
|
.spectrum-Textfield {
|
||||||
width: 100%;
|
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 {
|
.icon-position {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -243,6 +251,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-variables-height {
|
.no-variables-height {
|
||||||
|
height: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-variables-text {
|
.no-variables-text {
|
||||||
|
@ -265,4 +274,10 @@
|
||||||
.add-variable:hover {
|
.add-variable:hover {
|
||||||
background: var(--grey-1);
|
background: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 12%;
|
||||||
|
left: 1px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
import { IntegrationTypes } from "constants/backend"
|
import { IntegrationTypes } from "constants/backend"
|
||||||
import { createValidationStore } from "helpers/validation/yup"
|
import { createValidationStore } from "helpers/validation/yup"
|
||||||
import { createEventDispatcher, onMount } from "svelte"
|
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"
|
import CreateEditVariableModal from "components/portal/environment/CreateEditVariableModal.svelte"
|
||||||
|
|
||||||
export let datasource
|
export let datasource
|
||||||
|
@ -22,6 +22,8 @@
|
||||||
export let creating
|
export let creating
|
||||||
|
|
||||||
let createVariableModal
|
let createVariableModal
|
||||||
|
let selectedKey
|
||||||
|
|
||||||
const validation = createValidationStore()
|
const validation = createValidationStore()
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
|
@ -69,10 +71,13 @@
|
||||||
|
|
||||||
function save(data) {
|
function save(data) {
|
||||||
environment.createVariable(data)
|
environment.createVariable(data)
|
||||||
|
config[selectedKey] = `{{ env.${data.name} }}`
|
||||||
createVariableModal.hide()
|
createVariableModal.hide()
|
||||||
}
|
}
|
||||||
|
|
||||||
function showModal() {
|
function showModal(configKey) {
|
||||||
|
selectedKey = configKey
|
||||||
|
console.log(selectedKey)
|
||||||
createVariableModal.show()
|
createVariableModal.show()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -83,7 +88,13 @@
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
await environment.loadVariables()
|
await environment.loadVariables()
|
||||||
|
|
||||||
|
if ($auth.user) {
|
||||||
|
await licensing.init()
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
$: console.log(config)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
|
@ -128,7 +139,7 @@
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<Label>{getDisplayName(configKey)}</Label>
|
<Label>{getDisplayName(configKey)}</Label>
|
||||||
<EnvDropdown
|
<EnvDropdown
|
||||||
{showModal}
|
showModal={() => showModal(configKey)}
|
||||||
variables={$environment.variables}
|
variables={$environment.variables}
|
||||||
on:change
|
on:change
|
||||||
bind:value={config[configKey]}
|
bind:value={config[configKey]}
|
||||||
|
|
|
@ -32,15 +32,23 @@
|
||||||
notifications.error(err.message)
|
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>
|
</script>
|
||||||
|
|
||||||
<ModalContent
|
<ModalContent
|
||||||
onConfirm={() =>
|
onConfirm={() => saveVariable()}
|
||||||
save({
|
|
||||||
name,
|
|
||||||
production: productionValue,
|
|
||||||
development: developmentValue,
|
|
||||||
})}
|
|
||||||
title={!row ? "Add new environment variable" : "Edit environment variable"}
|
title={!row ? "Add new environment variable" : "Edit environment variable"}
|
||||||
>
|
>
|
||||||
<Input disabled={row} label="Name" bind:value={name} />
|
<Input disabled={row} label="Name" bind:value={name} />
|
||||||
|
|
Loading…
Reference in a new issue