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

packages/bbui/src/Button/Button.svelte

@@ -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
+<div class:container={!!tooltip}>
-  class:spectrum-Button--cta={cta}
+  <button
-  class:spectrum-Button--primary={primary}
+    class:spectrum-Button--cta={cta}
-  class:spectrum-Button--secondary={secondary}
+    class:spectrum-Button--primary={primary}
-  class:spectrum-Button--warning={warning}
+    class:spectrum-Button--secondary={secondary}
-  class:spectrum-Button--overBackground={overBackground}
+    class:spectrum-Button--warning={warning}
-  class:spectrum-Button--quiet={quiet}
+    class:spectrum-Button--overBackground={overBackground}
-  class:active
+    class:spectrum-Button--quiet={quiet}
-  class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
+    class:active
-  {disabled}
+    class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
-  on:click|preventDefault
+    {disabled}
->
+    on:click|preventDefault
-  {#if icon}
+    on:mouseover={() => (showTooltip = true)}
-    <svg
+    on:mouseleave={() => (showTooltip = false)}
-      class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
+  >
-      focusable="false"
+    {#if icon}
-      aria-hidden="true"
+      <svg
-      aria-label={icon}
+        class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
-    >
+        focusable="false"
-      <use xlink:href="#spectrum-icon-18-{icon}" />
+        aria-hidden="true"
-    </svg>
+        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}
+</div>
-    <span class="spectrum-Button-label"><slot /></span>
-  {/if}
-</button>
 
 <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>

packages/bbui/src/Tooltip/TooltipWrapper.svelte

@@ -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 {

packages/builder/src/components/common/inputs/EditableLabel.svelte

@@ -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>

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte

@@ -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>