Variables UI WIP

5 years ago · aaa5c1841f
5 changed files with 175 additions and 5 deletions
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte
@ -1,9 +1,18 @@
 <script>
-  import { Divider, Heading, ActionButton, Badge, Body } from "@budibase/bbui"
+  import {
+    Divider,
+    Heading,
+    ActionButton,
+    Badge,
+    Body,
+    Layout,
+  } from "@budibase/bbui"
  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
  import RestAuthenticationBuilder from "./auth/RestAuthenticationBuilder.svelte"
+  import ViewDynamicVariables from "./variables/ViewDynamicVariables.svelte"

  export let datasource
+  export let queries

  let addHeader
 </script>
@ -43,6 +52,32 @@
 </Body>
 <RestAuthenticationBuilder bind:configs={datasource.config.authConfigs} />

+<Divider size="S" />
+<div class="section-header">
+  <div class="badge">
+    <Heading size="S">Variables</Heading>
+    <Badge quiet grey>Optional</Badge>
+  </div>
+</div>
+<Body size="S"
+  >Variables enabled you to store and reuse values in queries. Static variables
+  use constant values while dynamic values can be bound to the response headers
+  or body of a query</Body
+>
+<Heading size="XS">Static</Heading>
+<Layout noPadding gap="XS">
+  <KeyValueBuilder
+    name="Variable"
+    keyPlaceholder="Name"
+    headings
+    bind:object={datasource.config.staticVariables}
+    on:change
+  />
+</Layout>
+<div />
+<Heading size="XS">Dynamic</Heading>
+<ViewDynamicVariables {queries} {datasource} />
+
 <style>
  .section-header {
    display: flex;
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/variables/ViewDynamicVariables.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/variables/ViewDynamicVariables.svelte
@ -0,0 +1,40 @@
+<script>
+  import { Body, Table } from "@budibase/bbui"
+  import { onMount } from "svelte"
+
+  export let datasource
+  export let queries
+
+  let dynamicVariables = []
+
+  const dynamicVariableSchema = {
+    name: "",
+    value: "",
+    query: "",
+  }
+
+  /**
+   * Add the query name to the dynamic variables
+   */
+  const enrichDynamicVariables = () => {
+    datasource.config.dynamicVariables?.forEach(dv => {
+      const query = queries.find(query => query._id === dv.queryId)
+      if (query) {
+        dynamicVariables.push({ ...dv, query: query.name })
+      }
+    })
+  }
+
+  onMount(() => {
+    enrichDynamicVariables()
+  })
+</script>
+
+<Table
+  schema={dynamicVariableSchema}
+  data={dynamicVariables}
+  allowEditColumns={false}
+  allowEditRows={false}
+  allowSelectRows={false}
+/>
+<Body size="S" />
--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@ -6,6 +6,8 @@
    Label,
    Toggle,
    Select,
+    ActionMenu,
+    MenuItem,
  } from "@budibase/bbui"
  import { createEventDispatcher } from "svelte"
  import { lowercase } from "helpers"
@ -23,7 +25,9 @@
  export let toggle
  export let keyPlaceholder = "Key"
  export let valuePlaceholder = "Value"
+  export let valueHeading
  export let tooltip
+  export let menuItems

  let fields = Object.entries(object).map(([name, value]) => ({ name, value }))
  let fieldActivity = []
@ -80,13 +84,18 @@
  {#if headings}
    <div class="container" class:container-active={toggle}>
      <Label {tooltip}>{keyPlaceholder}</Label>
-      <Label>{valuePlaceholder}</Label>
+      <Label>{valueHeading || valuePlaceholder}</Label>
      {#if toggle}
        <Label>Active</Label>
      {/if}
    </div>
  {/if}
-  <div class="container" class:container-active={toggle} class:readOnly>
+  <div
+    class="container"
+    class:container-active={toggle}
+    class:container-menu={menuItems}
+    class:readOnly
+  >
    {#each fields as field, idx}
      <Input
        placeholder={keyPlaceholder}
@ -112,6 +121,18 @@
      {#if !readOnly}
        <Icon hoverable name="Close" on:click={() => deleteEntry(idx)} />
      {/if}
+      {#if menuItems?.length > 0}
+        <ActionMenu>
+          <div slot="control" class="icon">
+            <Icon size="S" hoverable name="MoreSmallList" />
+          </div>
+          {#each menuItems as item}
+            <MenuItem on:click={item.onClick}>
+              {item.text}
+            </MenuItem>
+          {/each}
+        </ActionMenu>
+      {/if}
    {/each}
  </div>
 {/if}
@ -134,6 +155,9 @@
  .container-active {
    grid-template-columns: 1fr 1fr 50px 20px;
  }
+  .container-menu {
+    grid-template-columns: 1fr 1fr 20px 20px;
+  }
  .readOnly {
    grid-template-columns: 1fr 1fr;
  }
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
@ -142,7 +142,11 @@
        </div>
      {/if}
      {#if datasource?.source === IntegrationTypes.REST}
-        <RestExtraConfigForm bind:datasource on:change={hasChanged} />
+        <RestExtraConfigForm
+          queries={queryList}
+          bind:datasource
+          on:change={hasChanged}
+        />
      {/if}
    </Layout>
  </section>
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte
@ -51,6 +51,7 @@
  let response, schema, isGet
  let datasourceType, integrationInfo, queryConfig, responseSuccess
  let authConfigId
+  let dynamicVariables

  $: datasource = $datasources.list.find(ds => ds._id === query?.datasourceId)
  $: datasourceType = datasource?.source
@ -62,6 +63,7 @@
  $: responseSuccess =
    response?.info?.code >= 200 && response?.info?.code <= 206
  $: authConfigs = buildAuthConfigs(datasource)
+  $: dynamicVariables = buildDynamicVariables(datasource)

  function getSelectedQuery() {
    return cloneDeep(
@ -125,8 +127,14 @@
      saveId = _id
      query = getSelectedQuery()
      notifications.success(`Request saved successfully.`)
+
+      if (dynamicVariables) {
+        const dynamicVars = mapDynamicVariables(saveId)
+        datasource.config.dynamicVariables = dynamicVars
+        await datasources.save(datasource)
+      }
    } catch (err) {
-      notifications.error(`Error creating query. ${err.message}`)
+      notifications.error(`Error saving query. ${err.message}`)
    }
  }

@ -181,6 +189,45 @@
      query.fields.bodyType = "none"
    }
  })
+
+  /**
+   * Convert the dynamic variables list to a simple name / value object
+   */
+  const buildDynamicVariables = datasource => {
+    const variablesList = datasource?.config?.dynamicVariables
+    let variables = {}
+    if (variablesList) {
+      variables = variablesList.reduce(
+        (acc, next) => ({ ...acc, [next.name]: next.value }),
+        {}
+      )
+    }
+    return variables
+  }
+
+  /**
+   * Convert the dynamic variables object back to a list
+   */
+  const mapDynamicVariables = queryId => {
+    let variables = []
+    if (dynamicVariables) {
+      variables = Object.values(dynamicVariables).map((name, value) => ({
+        name,
+        value,
+        queryId,
+      }))
+    }
+    return variables
+  }
+
+  const schemaMenuItems = [
+    {
+      text: "Create dynamic variable",
+      onClick: () => {
+        console.log("create variable")
+      },
+    },
+  ]
 </script>

 {#if query}
@ -318,6 +365,7 @@
                  name="schema"
                  headings
                  options={SchemaTypeOptions}
+                  menuItems={schemaMenuItems}
                />
              </Tab>
            {/if}
@ -341,6 +389,25 @@
                  {/if}
                </div>
              </Tab>
+            {/if}
+            {#if dynamicVariables || response}
+              <Tab title="Dynamic Variables">
+                <Layout noPadding gap="S">
+                  <Body size="S"
+                    >{"Create dynamic variables to use body and headers results in other queries"}</Body
+                  >
+                  <KeyValueBuilder
+                    bind:object={dynamicVariables}
+                    name="Variable"
+                    headings
+                    keyPlaceholder="Name"
+                    valuePlaceholder={`e.g. {{ headers.cookie }}`}
+                    valueHeading={`Value`}
+                  />
+                </Layout>
+              </Tab>
+            {/if}
+            {#if response}
              <div class="stats">
                <Label size="L">
                  Status: <span class={responseSuccess ? "green" : "red"}