From 6db127384e8b6240a022c218ad246eb317d5f240 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Fri, 22 Jan 2021 16:49:22 +0000
Subject: [PATCH] Query page tidy up

Props aligned in a row within the header.
Add params popover UI tidied (labels removed, etc)
Query name made an input, and the old query name input removed.
Query type is not an input anymore.
Provided a height for the query editor
Aligned run/save query buttons with the preview panel.
---
 .../popovers/EditQueryParamsPopover.svelte    |   8 +-
 .../components/integration/QueryEditor.svelte |   7 +-
 .../integration/QueryFieldsBuilder.svelte     |  10 +-
 .../integration/QueryParameterBuilder.svelte  |  34 ++++--
 .../components/integration/QueryViewer.svelte | 114 +++++++++---------
 .../src/components/integration/index.svelte   |   3 -
 .../[selectedDatasource]/[query]/index.svelte |   9 +-
 7 files changed, 99 insertions(+), 86 deletions(-)

diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
index 038e4cf9b1..bc34d4d80c 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
@@ -22,13 +22,12 @@
 <div on:click|stopPropagation bind:this={anchor}>
   <TextButton
     text
-    small
     on:click={dropdown.show}
-    active={true}>
-      <Icon name="plus" />
+    active={false}>
+      <Icon name="add" />
       Add Parameters
   </TextButton>
-  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+  <DropdownMenu align="right" {anchor} bind:this={dropdown}>
     <div class="wrapper">
       <ParameterBuilder bind:parameters {bindable} />
     </div>
@@ -38,5 +37,6 @@
 <style>
   .wrapper {
     padding: var(--spacing-xl);
+    min-width: 600px;
   }
 </style>
\ No newline at end of file
diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index 22cddb5606..2b5965613e 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -155,8 +155,9 @@
   }
 
   :global(.CodeMirror) {
-    height: auto !important;
-    border-radius: var(--border-radius-m);
-    font-family: var(--font-sans) !important;
+    height: 500px !important;
+    border-radius: var(--border-radius-s);
+    font-family: monospace !important;
+    line-height: 1.3;
   }
 </style>
diff --git a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
index 83a03c72d1..d5f4b3bd8b 100644
--- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@@ -24,18 +24,18 @@
 </script>
 
 <form on:submit|preventDefault>
+<div class="field">
   {#each schemaKeys as field}
-    <Label extraSmall grey>{field}</Label>
-    <div class="field">
       <Input
+        placeholder="Enter {field} name"
+        outline
         disabled={!editable}
         type={schema.fields[field]?.type}
         required={schema.fields[field]?.required}
         bind:value={fields[field]} />
-    </div>
   {/each}
+</div>
 </form>
-<Label extraSmall grey>Data</Label>
 {#if schema.customisable}
   <Editor
     label="Query"
@@ -49,7 +49,7 @@
   .field {
     margin-bottom: var(--spacing-m);
     display: grid;
-    grid-template-columns: 1fr 2%;
+    grid-template-columns: 1fr 1fr;
     grid-gap: var(--spacing-m);
     align-items: center;
   }
diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index 1be4a9d1ce..cadbfbf873 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -1,5 +1,12 @@
 <script>
-  import { Button, TextArea, Label, Input, Heading } from "@budibase/bbui"
+  import {
+    Button,
+    TextArea,
+    Label,
+    Input,
+    Heading,
+    Spacer,
+  } from "@budibase/bbui"
   import BindableInput from "components/userInterface/BindableInput.svelte"
   import {
     readableToRuntimeBinding,
@@ -31,19 +38,22 @@
 
 <section>
   <Heading extraSmall black>Parameters</Heading>
+  <Spacer large />
   <div class="parameters" class:bindable>
-    <Label extraSmall grey>Parameter Name</Label>
-    <Label extraSmall grey>Default</Label>
-    {#if bindable}
-      <Label extraSmall grey>Value</Label>
-    {:else}
-      <div />
-    {/if}
     {#each parameters as parameter, idx}
-      <Input thin disabled={bindable} bind:value={parameter.name} />
-      <Input thin disabled={bindable} bind:value={parameter.default} />
+      <Input
+        placeholder="Parameter Name"
+        thin
+        disabled={bindable}
+        bind:value={parameter.name} />
+      <Input
+        placeholder="Default"
+        thin
+        disabled={bindable}
+        bind:value={parameter.default} />
       {#if bindable}
         <BindableInput
+          placeholder="Value"
           type="string"
           thin
           on:change={evt => onBindingChange(parameter.name, evt.detail)}
@@ -57,9 +67,7 @@
     {/each}
   </div>
   {#if !bindable}
-    <Button thin secondary small on:click={newQueryParameter}>
-      Add Parameter
-    </Button>
+    <Button secondary on:click={newQueryParameter}>Add Parameter</Button>
   {/if}
 </section>
 
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 712657b0c3..da5f4e1a40 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -131,53 +131,44 @@
 </script>
 
 <header>
-  <Heading small>{query.name}</Heading>
+  <div class="input">
+    <Input placeholder="✎ Edit Query Name" bind:value={query.name} />
+  </div>
   {#if config}
-    <div class="queryVerbs">
-    </div>
-      <Select thin secondary bind:value={query.queryVerb}>
+  <div class="props">
+    <div class="query-type">Query type: <span class="query-type-span">{config[query.queryVerb].type}</span></div>
+    <div class="select">
+      <Select primary thin bind:value={query.queryVerb}>
         {#each Object.keys(config) as queryVerb}
           <option value={queryVerb}>{queryVerb}</option>
         {/each}
       </Select>
-      <div>
-        {config[query.queryVerb].type}
-      </div>
+  </div>
+    </div>
     <EditQueryParamsPopover bind:parameters={query.parameters} bindable={false} />
-    <Spacer medium />
-    <Button primary href={docsLink} target="_blank">
-      <i class="ri-book-2-line" />
-    </Button>
   {/if}
 </header>
-
-<Spacer large />
+<Spacer extraLarge />
 
 {#if shouldShowQueryConfig}
   <section>
     <div class="config">
-      <Label extraSmall grey>Query Name</Label>
-      <Input thin bind:value={query.name} />
-
-      <Spacer medium />
-
       <IntegrationQueryEditor
         {query}
         schema={config[query.queryVerb]}
         bind:parameters />
 
-      <Spacer medium />
+      <Spacer extraLarge />
+      <Spacer large />
 
       <div class="viewer-controls">
         <Button
-          wide
-          thin
           blue
           disabled={data.length === 0}
           on:click={saveQuery}>
-          Save
+          Save Query
         </Button>
-        <Button wide thin primary on:click={previewQuery}>Run</Button>
+        <Button primary on:click={previewQuery}>Run Query</Button>
       </div>
 
       <section class="viewer">
@@ -189,10 +180,11 @@
               <ExternalDataSourceTable {query} {data} />
             {:else if tab === 'SCHEMA'}
               {#each fields as field, idx}
+                <Spacer small />
                 <div class="field">
-                  <Input thin type={'text'} bind:value={field.name} />
-                  <Select secondary thin bind:value={field.type}>
-                    <option value={''}>Select an option</option>
+                  <Input outline placeholder="Field Name" type={'text'} bind:value={field.name} />
+                  <Select thin border bind:value={field.type}>
+                    <option value={''}>Select a field type</option>
                     <option value={'STRING'}>Text</option>
                     <option value={'NUMBER'}>Number</option>
                     <option value={'BOOLEAN'}>Boolean</option>
@@ -203,7 +195,8 @@
                     on:click={() => deleteField(idx)} />
                 </div>
               {/each}
-              <Button thin secondary on:click={newField}>Add Field</Button>
+                <Spacer small />
+                <Button thin secondary on:click={newField}>Add Field</Button>
             {/if}
           </Switcher>
         {/if}
@@ -213,11 +206,28 @@
 {/if}
 
 <style>
+
+  .input {
+    width: 300px;
+  }
+
+  .select {
+    width: 200px;
+    margin-right: 40px;
+  }
+
+  .props {
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
+    align-items: center;
+    gap: var(--layout-l);
+  }
+
   .field {
     display: grid;
-    grid-gap: 10px;
     grid-template-columns: 1fr 1fr 50px;
-    margin-bottom: var(--spacing-m);
+    gap: var(--spacing-l);
   }
 
   a {
@@ -233,6 +243,16 @@
     cursor: pointer;
   }
 
+  .query-type {
+    font-family: var(--font-sans);
+    color: var(--grey-8);
+    font-size: var(--font-size-s);
+  }
+
+  .query-type-span {
+    text-transform: uppercase;
+  }
+
   .preview {
     width: 800px;
     height: 100%;
@@ -246,32 +266,18 @@
     align-items: center;
   }
 
-  .queryVerbs {
-    display: flex;
-    flex: 1;
-    font-size: var(--font-size-m);
-    align-items: center;
-    margin-left: var(--spacing-l);
-  }
-
-  .queryVerb {
-    text-transform: capitalize;
-    margin-right: var(--spacing-m);
-    color: var(--grey-5);
-    cursor: pointer;
-  }
-
-  .selected {
-    color: var(--white);
-    font-weight: 500;
-  }
-
   .viewer-controls {
-    display: grid;
-    grid-gap: var(--spacing-m);
-    grid-auto-flow: column;
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
     direction: rtl;
-    grid-template-columns: 10% 10% 1fr;
-    margin-bottom: var(--spacing-m);
+    z-index: 5;
+    gap: var(--spacing-m);
+    min-width: 150px;
+  }
+
+  .viewer {
+    margin-top: -28px;
+    z-index: -2;
   }
 </style>
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index 2206694fd6..a4f59459c0 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -20,8 +20,6 @@
   }
 </script>
 
-<Heading extraSmall black>Query</Heading>
-<Spacer medium />
 
 {#if schema}
   {#key query._id}
@@ -33,7 +31,6 @@
         readOnly={!editable}
         value={query.fields.sql} />
     {:else if schema.type === QueryTypes.JSON}
-      <Spacer large />
       <Editor
         label="Query"
         mode="json"
diff --git a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
index d99c782908..c2419dd9a6 100644
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
@@ -21,7 +21,6 @@
     query => query._id === $backendUiStore.selectedQueryId
   ) || {
     datasourceId: $params.selectedDatasource,
-    name: "New Query",
     parameters: [],
     fields: {},
     queryVerb: "read",
@@ -36,8 +35,10 @@
 
 <style>
   section {
-    background: var(--background);
-    padding: var(--spacing-xl);
-    border-radius: var(--border-radius-m);
+    overflow: scroll;
+  }
+  ::-webkit-scrollbar {
+    width: 0px;
+    background: transparent; /* make scrollbar transparent */
   }
 </style>