Merge pull request #4393 from Budibase/fix/feb-fixes

Various February fixes and features

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,8 +12,12 @@
   export let quiet = false
   export let icon = undefined
   export let active = false
+  export let tooltip = undefined
+
+  let showTooltip = false
 </script>
 
+<div class:container={!!tooltip}>
   <button
     class:spectrum-Button--cta={cta}
     class:spectrum-Button--primary={primary}
@@ -24,6 +29,8 @@
     class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
     {disabled}
     on:click|preventDefault
+    on:mouseover={() => (showTooltip = true)}
+    on:mouseleave={() => (showTooltip = false)}
   >
     {#if icon}
       <svg
@@ -38,9 +45,34 @@
     {#if $$slots}
       <span class="spectrum-Button-label"><slot /></span>
     {/if}
+    {#if !disabled && tooltip}
+      <div class="tooltip-icon">
+        <svg
+          class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
+          focusable="false"
+          aria-hidden="true"
+          aria-label="Info"
+        >
+          <use xlink:href="#spectrum-icon-18-InfoOutline" />
+        </svg>
+      </div>
+    {/if}
   </button>
+  {#if showTooltip && tooltip}
+    <div class="position">
+      <div class="tooltip">
+        <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
+      </div>
+    </div>
+  {/if}
+</div>
 
 <style>
+  .container {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  }
   .spectrum-Button-label {
     white-space: nowrap;
     overflow: hidden;
@@ -49,4 +81,23 @@
   .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;
+  }
+  .tooltip-icon {
+    padding-left: var(--spacing-m);
+    line-height: 0;
+  }
 </style>

packages/bbui/src/Form/Core/DatePicker.svelte

@@ -14,16 +14,20 @@
   export let value = null
   export let placeholder = null
   export let appendTo = undefined
+  export let timeOnly = false
 
   const dispatch = createEventDispatcher()
   const flatpickrId = `${generateID()}-wrapper`
   let open = false
-  let flatpickr
+  let flatpickr, flatpickrOptions, isTimeOnly
+
+  $: isTimeOnly = !timeOnly && value ? !isNaN(new Date(`0-${value}`)) : timeOnly
   $: flatpickrOptions = {
     element: `#${flatpickrId}`,
-    enableTime: enableTime || false,
+    enableTime: isTimeOnly || enableTime || false,
+    noCalendar: isTimeOnly || false,
     altInput: true,
-    altFormat: enableTime ? "F j Y, H:i" : "F j, Y",
+    altFormat: isTimeOnly ? "H:i" : enableTime ? "F j Y, H:i" : "F j, Y",
     wrap: true,
     appendTo,
     disableMobile: "true",
@@ -35,6 +39,11 @@
     if (newValue) {
       newValue = newValue.toISOString()
     }
+    // if time only set date component to today
+    if (timeOnly) {
+      const todayDate = new Date().toISOString().split("T")[0]
+      newValue = `${todayDate}T${newValue.split("T")[1]}`
+    }
     dispatch("change", newValue)
   }
 
@@ -67,7 +76,11 @@
       return null
     }
     let date
-    if (val instanceof Date) {
+    let time = new Date(`0-${val}`)
+    // it is a string like 00:00:00, just time
+    if (timeOnly || (typeof val === "string" && !isNaN(time))) {
+      date = time
+    } else if (val instanceof Date) {
       // Use real date obj if already parsed
       date = val
     } else if (isNaN(val)) {
@@ -77,7 +90,7 @@
       // Treat as numerical timestamp
       date = new Date(parseInt(val))
     }
-    const time = date.getTime()
+    time = date.getTime()
     if (isNaN(time)) {
       return null
     }
@@ -88,6 +101,7 @@
   }
 </script>
 
+{#key isTimeOnly}
   <Flatpickr
     bind:flatpickr
     value={parseDate(value)}
@@ -151,6 +165,7 @@
       </button>
     </div>
   </Flatpickr>
+{/key}
 {#if open}
   <div class="overlay" on:mousedown|self={flatpickr?.close} />
 {/if}

packages/bbui/src/Form/DatePicker.svelte

@@ -9,6 +9,7 @@
   export let disabled = false
   export let error = null
   export let enableTime = true
+  export let timeOnly = false
   export let placeholder = null
   export let appendTo = undefined
 
@@ -27,6 +28,7 @@
     {value}
     {placeholder}
     {enableTime}
+    {timeOnly}
     {appendTo}
     on:change={onChange}
   />

packages/bbui/src/Table/DateTimeRenderer.svelte

@@ -2,9 +2,18 @@
   import dayjs from "dayjs"
 
   export let value
+
+  // adding the 0- will turn a string like 00:00:00 into a valid ISO
+  // date, but will make actual ISO dates invalid
+  $: time = new Date(`0-${value}`)
+  $: isTime = !isNaN(time)
 </script>
 
-<div>{dayjs(value).format("MMMM D YYYY, HH:mm")}</div>
+<div>
+  {dayjs(isTime ? time : value).format(
+    isTime ? "HH:mm:ss" : "MMMM D YYYY, HH:mm"
+  )}
+</div>
 
 <style>
   div {

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/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/ExecuteQuery.svelte

@@ -52,7 +52,7 @@
       {/if}
 
       {#if query?.parameters?.length > 0}
-        <div>
+        <div class="params">
           <BindingBuilder
             bind:customParams={parameters.queryParams}
             queryBindings={query.parameters}
@@ -70,3 +70,11 @@
     {/if}
   {/if}
 </Layout>
+
+<style>
+  .params {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-l);
+  }
+</style>

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

@@ -59,6 +59,9 @@
   $: schemaReadOnly = !responseSuccess
   $: variablesReadOnly = !responseSuccess
   $: showVariablesTab = shouldShowVariables(dynamicVariables, variablesReadOnly)
+  $: hasSchema =
+    Object.keys(schema || {}).length !== 0 ||
+    Object.keys(query?.schema || {}).length !== 0
 
   function getSelectedQuery() {
     return cloneDeep(
@@ -294,6 +297,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 +317,15 @@
           <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
+            on:click={saveQuery}
+            tooltip={!hasSchema
+              ? "Saving a query before sending will mean no schema is generated"
+              : null}>Save</Button
+          >
         </div>
         <Tabs selected="Bindings" quiet noPadding noHorizPadding onTop>
           <Tab title="Bindings">
@@ -527,9 +539,6 @@
                     >{response?.info.size}</span
                   >
                 </Label>
-                <Button disabled={!responseSuccess} cta on:click={saveQuery}
-                  >Save query</Button
-                >
               </div>
             {/if}
           </Tabs>

packages/client/manifest.json

@@ -2453,6 +2453,12 @@
         "key": "enableTime",
         "defaultValue": true
       },
+      {
+        "type": "boolean",
+        "label": "Time Only",
+        "key": "timeOnly",
+        "defaultValue": false
+      },
       {
         "type": "text",
         "label": "Default value",

packages/client/src/components/app/forms/DateTimeField.svelte

@@ -7,6 +7,7 @@
   export let placeholder
   export let disabled = false
   export let enableTime = false
+  export let timeOnly = false
   export let validation
   export let defaultValue
 
@@ -33,6 +34,7 @@
       id={fieldState.fieldId}
       appendTo={document.getElementById("flatpickr-root")}
       {enableTime}
+      {timeOnly}
       {placeholder}
     />
   {/if}

packages/server/scripts/integrations/mssql/data/setup.sql

@@ -36,11 +36,7 @@ CREATE TABLE people
 INSERT products
   (name, description)  
 VALUES  
-  ('Bananas', 'Fruit thing');  
-  
-INSERT products
-  (name, description)  
-VALUES  
+  ('Bananas', 'Fruit thing'),
   ('Meat', 'Animal thing');
   
 INSERT tasks

packages/server/scripts/integrations/mysql/init.sql

@@ -19,6 +19,12 @@ CREATE TABLE Tasks (
         FOREIGN KEY(PersonID)
 	    REFERENCES Persons(PersonID)
 );
+CREATE TABLE Products (
+    id serial primary key,
+    name text,
+    updated time
+);
 INSERT INTO Persons (FirstName, LastName, Age, Address, City, CreatedAt) VALUES ('Mike', 'Hughes', 28.2, '123 Fake Street', 'Belfast', '2021-01-19 03:14:07');
 INSERT INTO Tasks (PersonID, TaskName) VALUES (1, 'assembling');
 INSERT INTO Tasks (PersonID, TaskName) VALUES (1, 'processing');
+INSERT INTO Products (name, updated) VALUES ('Meat', '11:00:22'), ('Fruit', '10:00:00');

packages/server/src/api/controllers/view/exporters.js

@@ -5,8 +5,11 @@ exports.csv = function (headers, rows) {
     csv = `${csv}\n${headers
       .map(header => {
         let val = row[header]
-        val = typeof val === "object" ? JSON.stringify(val) : val
-        return `"${val}"`.trim()
+        val =
+          typeof val === "object"
+            ? `"${JSON.stringify(val).replace(/"/g, "'")}"`
+            : `"${val}"`
+        return val.trim()
       })
       .join(",")}`
   }

packages/server/src/api/routes/tests/query.spec.js

@@ -230,7 +230,6 @@ describe("/queries", () => {
   })
 
   describe("variables", () => {
-
     async function preview(datasource, fields) {
       return config.previewQuery(request, config, datasource, fields)
     }

packages/server/src/threads/query.js

@@ -161,10 +161,16 @@ class QueryRunner {
       const responses = await Promise.all(dynamics)
       for (let i = 0; i < foundVars.length; i++) {
         const variable = foundVars[i]
-        parameters[variable.name] = processStringSync(variable.value, {
+        parameters[variable.name] = processStringSync(
+          variable.value,
+          {
             data: responses[i].rows,
             info: responses[i].extra,
-        })
+          },
+          {
+            escapeNewlines: true,
+          }
+        )
         // make sure its known that this uses dynamic variables in case it fails
         this.hasDynamicVariables = true
       }
@@ -188,6 +194,7 @@ class QueryRunner {
         enrichedQuery[key] = processStringSync(fields[key], parameters, {
           noEscaping: true,
           noHelpers: true,
+          escapeNewlines: true,
         })
       } else {
         enrichedQuery[key] = fields[key]

packages/server/yarn.lock

@@ -1163,19 +1163,7 @@
     svelte-apexcharts "^1.0.2"
     svelte-flatpickr "^3.1.0"
 
-"@budibase/string-templates@1.0.50-alpha.1":
-  version "1.0.50-alpha.1"
-  resolved "https://registry.yarnpkg.com/@budibase/string-templates/-/string-templates-1.0.50-alpha.1.tgz#ea05a74a3031850652812be21f44d40249e21d43"
-  integrity sha512-TM6WNzGBlwV0FhR8luejg8CQGa9IaMrMLrW+gfkl4fqEafoWIeKueVhT/lVuPtUK2NzGxmKfNRoasZu6wM6grA==
-  dependencies:
-    "@budibase/handlebars-helpers" "^0.11.7"
-    dayjs "^1.10.4"
-    handlebars "^4.7.6"
-    handlebars-utils "^1.0.6"
-    lodash "^4.17.20"
-    vm2 "^3.9.4"
-
-"@budibase/string-templates@^1.0.50":
+"@budibase/string-templates@^1.0.50", "@budibase/string-templates@^1.0.50-alpha.1":
   version "1.0.50"
   resolved "https://registry.yarnpkg.com/@budibase/string-templates/-/string-templates-1.0.50.tgz#53386f3c09891ef21bd47870d25cf7e12f6fac86"
   integrity sha512-jmqmikU3Xt0I0hY1S1QI8x5770Z+Tu6zGxb9iQsk3PUCkKCpHz70Rl3Q7x5nYsDfOlhT4YHaHKgYYQYJ6hRafw==

packages/string-templates/src/helpers/index.js

@@ -21,7 +21,7 @@ const HELPERS = [
   // javascript helper
   new Helper(HelperFunctionNames.JS, processJS, false),
   // this help is applied to all statements
-  new Helper(HelperFunctionNames.ALL, value => {
+  new Helper(HelperFunctionNames.ALL, (value, { __opts }) => {
     if (
       value != null &&
       typeof value === "object" &&
@@ -36,7 +36,11 @@ const HELPERS = [
     if (value && value.string) {
       value = value.string
     }
-    let text = new SafeString(value.replace(/&/g, "&"))
+    let text = value
+    if (__opts && __opts.escapeNewlines) {
+      text = value.replace(/\n/g, "\\n")
+    }
+    text = new SafeString(text.replace(/&/g, "&"))
     if (text == null || typeof text !== "string") {
       return text
     }
@@ -62,10 +66,14 @@ module.exports.HelperNames = () => {
   )
 }
 
-module.exports.registerAll = handlebars => {
+module.exports.registerMinimum = handlebars => {
   for (let helper of HELPERS) {
     helper.register(handlebars)
   }
+}
+
+module.exports.registerAll = handlebars => {
+  module.exports.registerMinimum(handlebars)
   // register imported helpers
   externalHandlebars.registerAll(handlebars)
 }

packages/string-templates/src/index.js

@@ -1,5 +1,5 @@
 const handlebars = require("handlebars")
-const { registerAll } = require("./helpers/index")
+const { registerAll, registerMinimum } = require("./helpers/index")
 const processors = require("./processors")
 const { atob, btoa } = require("./utilities")
 const manifest = require("../manifest.json")
@@ -8,6 +8,7 @@ const { FIND_HBS_REGEX, FIND_DOUBLE_HBS_REGEX } = require("./utilities")
 const hbsInstance = handlebars.create()
 registerAll(hbsInstance)
 const hbsInstanceNoHelpers = handlebars.create()
+registerMinimum(hbsInstanceNoHelpers)
 const defaultOpts = { noHelpers: false, noEscaping: false }
 
 /**
@@ -105,9 +106,7 @@ module.exports.processStringSync = (string, context, opts) => {
     throw "Cannot process non-string types."
   }
   try {
-    // finalising adds a helper, can't do this with no helpers
-    const shouldFinalise = !opts.noHelpers
-    string = processors.preprocess(string, shouldFinalise)
+    string = processors.preprocess(string, opts)
     // this does not throw an error when template can't be fulfilled, have to try correct beforehand
     const instance = opts.noHelpers ? hbsInstanceNoHelpers : hbsInstance
     const templateString =
@@ -119,8 +118,10 @@ module.exports.processStringSync = (string, context, opts) => {
     return processors.postprocess(
       template({
         now: new Date(now).toISOString(),
+        __opts: opts,
         ...context,
-      })
+      }),
+      { escapeNewlines: opts ? opts.escapeNewlines : false }
     )
   } catch (err) {
     return input
@@ -176,7 +177,9 @@ module.exports.isValid = (string, opts) => {
   const context = {}
   try {
     const instance = opts.noHelpers ? hbsInstanceNoHelpers : hbsInstance
-    instance.compile(processors.preprocess(string, false))(context)
+    instance.compile(processors.preprocess(string, { noFinalise: true }))(
+      context
+    )
     return true
   } catch (err) {
     const msg = err && err.message ? err.message : err

packages/string-templates/src/processors/index.js

@@ -2,7 +2,7 @@ const { FIND_HBS_REGEX } = require("../utilities")
 const preprocessor = require("./preprocessor")
 const postprocessor = require("./postprocessor")
 
-function process(output, processors) {
+function process(output, processors, opts) {
   for (let processor of processors) {
     // if a literal statement has occurred stop
     if (typeof output !== "string") {
@@ -15,24 +15,22 @@ function process(output, processors) {
       continue
     }
     for (let match of matches) {
-      output = processor.process(output, match)
+      output = processor.process(output, match, opts)
     }
   }
   return output
 }
 
-module.exports.preprocess = (string, finalise = true) => {
+module.exports.preprocess = (string, opts) => {
   let processors = preprocessor.processors
-  // the pre-processor finalisation stops handlebars from ever throwing an error
-  // might want to pre-process for other benefits but still want to see errors
-  if (!finalise) {
+  if (opts.noFinalise) {
     processors = processors.filter(
       processor => processor.name !== preprocessor.PreprocessorNames.FINALISE
     )
   }
+  return process(string, processors, opts)
+}
+module.exports.postprocess = string => {
+  let processors = postprocessor.processors
   return process(string, processors)
 }
-
-module.exports.postprocess = string => {
-  return process(string, postprocessor.processors)
-}

packages/string-templates/src/processors/postprocessor.js

@@ -16,6 +16,8 @@ class Postprocessor {
   }
 }
 
+module.exports.PostProcessorNames = PostProcessorNames
+
 module.exports.processors = [
   new Postprocessor(PostProcessorNames.CONVERT_LITERALS, statement => {
     if (typeof statement !== "string" || !statement.includes(LITERAL_MARKER)) {

packages/string-templates/src/processors/preprocessor.js

@@ -16,8 +16,8 @@ class Preprocessor {
     this.fn = fn
   }
 
-  process(fullString, statement) {
-    const output = this.fn(statement)
+  process(fullString, statement, opts) {
+    const output = this.fn(statement, opts)
     const idx = fullString.indexOf(statement)
     return swapStrings(fullString, idx, statement.length, output)
   }
@@ -48,7 +48,8 @@ module.exports.processors = [
     return statement
   }),
 
-  new Preprocessor(PreprocessorNames.FINALISE, statement => {
+  new Preprocessor(PreprocessorNames.FINALISE, (statement, opts) => {
+    const noHelpers = opts && opts.noHelpers
     let insideStatement = statement.slice(2, statement.length - 2)
     if (insideStatement.charAt(0) === " ") {
       insideStatement = insideStatement.slice(1)
@@ -63,7 +64,10 @@ module.exports.processors = [
         return statement
       }
     }
-    if (HelperNames().some(option => option.includes(possibleHelper))) {
+    if (
+      !noHelpers &&
+      HelperNames().some(option => option.includes(possibleHelper))
+    ) {
       insideStatement = `(${insideStatement})`
     }
     return `{{ all ${insideStatement} }}`

packages/string-templates/test/escapes.spec.js

@@ -59,3 +59,33 @@ describe("attempt some complex problems", () => {
     expect(output).toBe("nulltest")
   })
 })
+
+describe("check behaviour with newlines", () => {
+  const context = {
+    binding: `Hello
+      there`
+  }
+  it("should escape new line to \\n with double brace", async () => {
+    const hbs = JSON.stringify({
+      body: "{{ binding }}"
+    })
+    const output = await processString(hbs, context, { escapeNewlines: true })
+    expect(JSON.parse(output).body).toBe(context.binding)
+  })
+
+  it("should work the same with triple brace", async () => {
+    const hbs = JSON.stringify({
+      body: "{{{ binding }}}"
+    })
+    const output = await processString(hbs, context, { escapeNewlines: true })
+    expect(JSON.parse(output).body).toBe(context.binding)
+  })
+
+  it("should still work with helpers disabled", async () => {
+    const hbs = JSON.stringify({
+      body: "{{ binding }}"
+    })
+    const output = await processString(hbs, context, { escapeNewlines: true, noHelpers: true })
+    expect(JSON.parse(output).body).toBe(context.binding)
+  })
+})

packages/string-templates/test/helpers.spec.js

@@ -20,7 +20,7 @@ describe("test that it can run without helpers", () => {
     )
     const valid = await processString("{{ avg 1 1 1 }}", {})
     expect(valid).toBe("1")
-    expect(output).toBe("{{ avg 1 1 1 }}")
+    expect(output).toBe("")
   })
 })