Fix for both #4167, allow saving but warn if never sent and #4165 save the query name when clicking name save icon.

This commit is contained in:
mike12345567 2022-02-07 18:47:10 +00:00
parent a35a8cb81c
commit 007a1240d5
4 changed files with 84 additions and 31 deletions

View File

@ -1,5 +1,6 @@
<script>
import "@spectrum-css/button/dist/index-vars.css"
import Tooltip from "../Tooltip/Tooltip.svelte"
export let disabled = false
export let size = "M"
@ -11,36 +12,55 @@
export let quiet = false
export let icon = undefined
export let active = false
export let tooltip = undefined
let showTooltip = false
</script>
<button
class:spectrum-Button--cta={cta}
class:spectrum-Button--primary={primary}
class:spectrum-Button--secondary={secondary}
class:spectrum-Button--warning={warning}
class:spectrum-Button--overBackground={overBackground}
class:spectrum-Button--quiet={quiet}
class:active
class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
{disabled}
on:click|preventDefault
>
{#if icon}
<svg
class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
focusable="false"
aria-hidden="true"
aria-label={icon}
>
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
<div class:container={!!tooltip}>
<button
class:spectrum-Button--cta={cta}
class:spectrum-Button--primary={primary}
class:spectrum-Button--secondary={secondary}
class:spectrum-Button--warning={warning}
class:spectrum-Button--overBackground={overBackground}
class:spectrum-Button--quiet={quiet}
class:active
class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
{disabled}
on:click|preventDefault
on:mouseover={() => (showTooltip = true)}
on:mouseleave={() => (showTooltip = false)}
>
{#if icon}
<svg
class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
focusable="false"
aria-hidden="true"
aria-label={icon}
>
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
{#if $$slots}
<span class="spectrum-Button-label"><slot /></span>
{/if}
</button>
{#if showTooltip && tooltip}
<div class="position">
<div class="tooltip">
<Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
</div>
</div>
{/if}
{#if $$slots}
<span class="spectrum-Button-label"><slot /></span>
{/if}
</button>
</div>
<style>
.container {
display: flex;
align-items: center;
flex-direction: column;
}
.spectrum-Button-label {
white-space: nowrap;
overflow: hidden;
@ -49,4 +69,19 @@
.active {
color: var(--spectrum-global-color-blue-600) !important;
}
.tooltip {
position: absolute;
display: flex;
justify-content: center;
z-index: 100;
width: 160px;
text-align: center;
transform: translateX(-50%);
top: -5px;
}
.position {
position: relative;
width: 0;
height: 0;
}
</style>

View File

@ -17,6 +17,7 @@
class:icon-small={size === "M" || size === "S"}
on:mouseover={() => (showTooltip = true)}
on:mouseleave={() => (showTooltip = false)}
on:focus
>
<Icon name="InfoOutline" size="S" disabled={true} />
</div>
@ -47,7 +48,7 @@
display: flex;
justify-content: center;
top: 15px;
z-index: 1;
z-index: 100;
width: 160px;
}
.icon {

View File

@ -17,6 +17,10 @@
dispatch("change")
}
}
function save() {
dispatch("save", value)
}
</script>
<div class="parent">
@ -39,7 +43,10 @@
name="SaveFloppy"
hoverable
size="S"
on:click={() => setEditing(false)}
on:click={() => {
setEditing(false)
save()
}}
/>
{/if}
</div>

View File

@ -59,6 +59,7 @@
$: schemaReadOnly = !responseSuccess
$: variablesReadOnly = !responseSuccess
$: showVariablesTab = shouldShowVariables(dynamicVariables, variablesReadOnly)
$: hasSchema = !!query?.schema
function getSelectedQuery() {
return cloneDeep(
@ -294,6 +295,7 @@
bind:value={query.name}
defaultValue="Untitled"
on:change={() => (query.flags.urlName = false)}
on:save={saveQuery}
/>
<div class="access">
<Label>Access level</Label>
@ -313,7 +315,18 @@
<div class="url">
<Input bind:value={url} placeholder="http://www.api.com/endpoint" />
</div>
<Button cta disabled={!url} on:click={runQuery}>Send</Button>
<Button primary disabled={!url} on:click={runQuery}>Send</Button>
<Button
disabled={!query.name}
cta={hasSchema}
warning={!hasSchema}
on:click={saveQuery}
icon={!hasSchema && query.name ? "Alert" : null}
tooltip={!hasSchema
? "Saving a query before sending will mean no schema is generated"
: null}>Save</Button
>
{#if !query.schema}{/if}
</div>
<Tabs selected="Bindings" quiet noPadding noHorizPadding onTop>
<Tab title="Bindings">
@ -527,9 +540,6 @@
>{response?.info.size}</span
>
</Label>
<Button disabled={!responseSuccess} cta on:click={saveQuery}
>Save query</Button
>
</div>
{/if}
</Tabs>