add licensing check to env dropdown
This commit is contained in:
parent
22e1c1cccf
commit
100571b6fe
3 changed files with 70 additions and 38 deletions
|
@ -15,7 +15,8 @@
|
|||
export let autofocus = false
|
||||
export let variables
|
||||
export let showModal
|
||||
|
||||
export let environmentVariablesEnabled
|
||||
export let handleUpgradePanel
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let field
|
||||
|
@ -131,11 +132,17 @@
|
|||
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
|
||||
>
|
||||
<ul
|
||||
class:no-variables-height={variables.length}
|
||||
class:no-variables-height={variables.length &&
|
||||
environmentVariablesEnabled}
|
||||
class="spectrum-Menu"
|
||||
role="listbox"
|
||||
>
|
||||
{#if variables.length}
|
||||
{#if !environmentVariablesEnabled}
|
||||
<div class="no-variables-text primary-text">
|
||||
Upgrade your plan to get environment variables
|
||||
</div>
|
||||
{:else if variables.length}
|
||||
<div style="max-height: 100px">
|
||||
{#each variables as variable, idx}
|
||||
<li
|
||||
class="spectrum-Menu-item"
|
||||
|
@ -159,6 +166,7 @@
|
|||
</span>
|
||||
</li>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="no-variables-text primary-text">
|
||||
You don't have any environment variables yet
|
||||
|
@ -166,6 +174,7 @@
|
|||
{/if}
|
||||
</ul>
|
||||
<Divider noMargin />
|
||||
{#if environmentVariablesEnabled}
|
||||
<div on:click={() => showModal()} class="add-variable">
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-Icon--sizeS "
|
||||
|
@ -176,6 +185,18 @@
|
|||
</svg>
|
||||
<div class="primary-text">Add Variable</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div on:click={() => handleUpgradePanel()} class="add-variable">
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-Icon--sizeS "
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-ArrowUp" />
|
||||
</svg>
|
||||
<div class="primary-text">Upgrade plan</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
@ -222,7 +243,6 @@
|
|||
}
|
||||
|
||||
.no-variables-height {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.no-variables-text {
|
||||
|
|
|
@ -17,6 +17,8 @@
|
|||
export let autofocus
|
||||
export let variables
|
||||
export let showModal
|
||||
export let environmentVariablesEnabled
|
||||
export let handleUpgradePanel
|
||||
const dispatch = createEventDispatcher()
|
||||
const onChange = e => {
|
||||
value = e.detail
|
||||
|
@ -38,6 +40,8 @@
|
|||
{autofocus}
|
||||
{variables}
|
||||
{showModal}
|
||||
{environmentVariablesEnabled}
|
||||
{handleUpgradePanel}
|
||||
on:change={onChange}
|
||||
on:click
|
||||
on:input
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
import { IntegrationTypes } from "constants/backend"
|
||||
import { createValidationStore } from "helpers/validation/yup"
|
||||
import { createEventDispatcher, onMount } from "svelte"
|
||||
import { environment } from "stores/portal"
|
||||
import { environment, licensing } from "stores/portal"
|
||||
import CreateEditVariableModal from "components/portal/environment/CreateEditVariableModal.svelte"
|
||||
|
||||
export let datasource
|
||||
|
@ -75,6 +75,12 @@
|
|||
function showModal() {
|
||||
createVariableModal.show()
|
||||
}
|
||||
|
||||
async function handleUpgradePanel() {
|
||||
await environment.upgradePanelOpened()
|
||||
$licensing.goToUpgradePage()
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await environment.loadVariables()
|
||||
})
|
||||
|
@ -127,6 +133,8 @@
|
|||
on:change
|
||||
bind:value={config[configKey]}
|
||||
error={$validation.errors[configKey]}
|
||||
environmentVariablesEnabled={$licensing.environmentVariablesEnabled}
|
||||
{handleUpgradePanel}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
Loading…
Reference in a new issue