converts QueryViewer to use new Layout component

5 years ago · ca775d8a80
2 changed files with 56 additions and 74 deletions
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@ -52,22 +52,32 @@
        placeholder="Parameter Name"
        thin
        disabled={bindable}
-        bind:value={parameter.name} />
+        bind:value={parameter.name}
+      />
      <Input
        placeholder="Default"
        thin
        disabled={bindable}
-        bind:value={parameter.default} />
+        bind:value={parameter.default}
+      />
      {#if bindable}
        <DrawerBindableInput
          title={`Query parameter "${parameter.name}"`}
          placeholder="Value"
          thin
-          on:change={evt => onBindingChange(parameter.name, evt.detail)}
-          value={runtimeToReadableBinding(bindings, customParams?.[parameter.name])}
-          {bindings} />
+          on:change={(evt) => onBindingChange(parameter.name, evt.detail)}
+          value={runtimeToReadableBinding(
+            bindings,
+            customParams?.[parameter.name]
+          )}
+          {bindings}
+        />
      {:else}
-        <Icon hoverable name="Close" on:click={() => deleteQueryParameter(idx)} />
+        <Icon
+          hoverable
+          name="Close"
+          on:click={() => deleteQueryParameter(idx)}
+        />
      {/if}
    {/each}
  </div>
@ -90,16 +100,5 @@
    grid-template-columns: 1fr 1fr 5%;
    grid-gap: 10px;
    align-items: center;
-    margin-bottom: var(--spacing-xl);
-  }
-
-  .delete {
-    transition: all 0.2s;
-  }
-
-  .delete:hover {
-    transform: scale(1.1);
-    font-weight: 500;
-    cursor: pointer;
  }
 </style>
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@ -6,6 +6,7 @@
    Button,
    Body,
    Label,
+    Layout,
    Input,
    Heading,
    Spacer,
@ -110,46 +111,33 @@
  }
 </script>

-<section class="config">
-  <Spacer extraLarge />
+<Layout gap="S" noPadding>
  <Heading m>Query {integrationInfo?.friendlyName}</Heading>
-  <Spacer extraLarge />
  <Divider />
-  <Spacer extraLarge />
  <Heading s>Config</Heading>
-  <Body s>Provide a name for your query and select its function.</Body>
-  <Spacer medium />
-  <div class="config-field">
-    <Label>Query Name</Label>
-    <Input bind:value={query.name} />
-  </div>
-  <Spacer medium />
-  {#if queryConfig}
+  <div class="config">
    <div class="config-field">
-      <Label>Function</Label>
-      <Select
-        bind:value={query.queryVerb}
-        options={Object.keys(queryConfig)}
-        getOptionLabel={(verb) =>
-          queryConfig[verb]?.displayName || capitalise(verb)}
-      />
+      <Label>Query Name</Label>
+      <Input bind:value={query.name} />
    </div>
-    <Spacer extraLarge />
-    <Divider />
-    <Spacer extraLarge />
-    <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
-    <Spacer extraLarge />
+    {#if queryConfig}
+      <div class="config-field">
+        <Label>Function</Label>
+        <Select
+          bind:value={query.queryVerb}
+          options={Object.keys(queryConfig)}
+          getOptionLabel={(verb) =>
+            queryConfig[verb]?.displayName || capitalise(verb)}
+        />
+      </div>
+      <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
+    {/if}
+  </div>
+  {#if shouldShowQueryConfig}
    <Divider />
-  {/if}
-</section>
-
-{#if shouldShowQueryConfig}
-  <section>
-    <Spacer extraLarge />
    <div class="config">
      <Heading s>Fields</Heading>
      <Body s>Fill in the fields specific to this query.</Body>
-      <Spacer medium />
      <IntegrationQueryEditor
        {datasource}
        {query}
@ -157,30 +145,27 @@
        schema={queryConfig[query.queryVerb]}
        bind:parameters
      />
-      <Spacer extraLarge />
      <Divider />
-      <Spacer extraLarge />
-      <div class="viewer-controls">
-        <Heading s>Results</Heading>
-        <div class="button-container">
-          <Button
-            secondary
-            thin
-            disabled={data.length === 0 || !query.name}
-            on:click={saveQuery}
-          >
-            Save Query
-          </Button>
-          <Spacer medium />
-          <Button thin secondary on:click={previewQuery}>Run Query</Button>
-        </div>
+    </div>
+    <div class="viewer-controls">
+      <Heading s>Results</Heading>
+      <div class="button-container">
+        <Button
+          secondary
+          thin
+          disabled={data.length === 0 || !query.name}
+          on:click={saveQuery}
+        >
+          Save Query
+        </Button>
+        <Spacer medium />
+        <Button thin secondary on:click={previewQuery}>Run Query</Button>
      </div>
-      <Spacer small />
+    </div>
      <Body s>
        Below, you can preview the results from your query and change the
        schema.
      </Body>
-      <Spacer medium />
      <section class="viewer">
        {#if data}
          <Tabs selected="JSON">
@ -213,12 +198,14 @@
          </Tabs>
        {/if}
      </section>
-    </div>
-  </section>
-{/if}
-<Spacer extraLarge />
+  {/if}
+</Layout>

 <style>
+  .config {
+    display: grid;
+    grid-gap: var(--spacing-s);
+  }
  .config-field {
    display: grid;
    grid-template-columns: 20% 1fr;
@ -236,10 +223,6 @@
    display: flex;
  }

-  .config {
-    margin-bottom: var(--spacing-s);
-  }
-
  .delete {
    align-self: center;
    cursor: pointer;