merge with next

.prettierrc

@@ -3,6 +3,8 @@
   "semi": false,
   "singleQuote": false,
   "trailingComma": "es5",
+  "arrowParens": "avoid",
+  "jsxBracketSameLine": false,
   "plugins": ["prettier-plugin-svelte"],
-  "svelteSortOrder" : "scripts-markup-styles"
+  "svelteSortOrder" : "options-scripts-markup-styles"
 }

package.json

@@ -14,7 +14,7 @@
     "prettier-plugin-svelte": "^2.2.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-replace": "^2.2.0",
-    "svelte": "^3.30.0"
+    "svelte": "^3.37.0"
   },
   "scripts": {
     "bootstrap": "lerna link && lerna bootstrap",

packages/auth/src/db/index.js

@@ -1,9 +1,9 @@
 let Pouch
 
-module.exports.setDB = (pouch) => {
+module.exports.setDB = pouch => {
   Pouch = pouch
 }
 
-module.exports.getDB = (dbName) => {
+module.exports.getDB = dbName => {
   return new Pouch(dbName)
 }

packages/auth/src/db/utils.js

@@ -48,7 +48,7 @@ exports.getGroupParams = (id = "", otherProps = {}) => {
  * Generates a new global user ID.
  * @returns {string} The new user ID which the user doc can be stored under.
  */
-exports.generateGlobalUserID = (id) => {
+exports.generateGlobalUserID = id => {
   return `${DocumentTypes.USER}${SEPARATOR}${id || newid()}`
 }
 
@@ -70,7 +70,7 @@ exports.getGlobalUserParams = (globalId, otherProps = {}) => {
  * Generates a template ID.
  * @param ownerId The owner/user of the template, this could be global or a group level.
  */
-exports.generateTemplateID = (ownerId) => {
+exports.generateTemplateID = ownerId => {
   return `${DocumentTypes.TEMPLATE}${SEPARATOR}${ownerId}${newid()}`
 }
 
@@ -132,7 +132,7 @@ const determineScopedConfig = async function (db, { type, user, group }) {
       }
     )
   )
-  const configs = response.rows.map((row) => {
+  const configs = response.rows.map(row => {
     const config = row.doc
 
     // Config is specific to a user and a group

packages/auth/src/hashing.js

@@ -4,7 +4,7 @@ const { v4 } = require("uuid")
 
 const SALT_ROUNDS = env.SALT_ROUNDS || 10
 
-exports.hash = async (data) => {
+exports.hash = async data => {
   const salt = await bcrypt.genSalt(SALT_ROUNDS)
   return bcrypt.hash(data, salt)
 }

packages/auth/src/utils.js

@@ -22,7 +22,7 @@ function confirmAppId(possibleAppId) {
  * @param {object} ctx The main request body to look through.
  * @returns {string|undefined} If an appId was found it will be returned.
  */
-exports.getAppId = (ctx) => {
+exports.getAppId = ctx => {
   const options = [ctx.headers["x-budibase-app-id"], ctx.params.appId]
   if (ctx.subdomains) {
     options.push(ctx.subdomains[1])
@@ -41,7 +41,7 @@ exports.getAppId = (ctx) => {
   }
   let appPath =
     ctx.request.headers.referrer ||
-    ctx.path.split("/").filter((subPath) => subPath.startsWith(APP_PREFIX))
+    ctx.path.split("/").filter(subPath => subPath.startsWith(APP_PREFIX))
   if (!appId && appPath.length !== 0) {
     appId = confirmAppId(appPath[0])
   }
@@ -101,11 +101,11 @@ exports.clearCookie = (ctx, name) => {
  * @param {object} ctx The koa context object to be tested.
  * @return {boolean} returns true if the call is from the client lib (a built app rather than the builder).
  */
-exports.isClient = (ctx) => {
+exports.isClient = ctx => {
   return ctx.headers["x-budibase-type"] === "client"
 }
 
-exports.getGlobalUserByEmail = async (email) => {
+exports.getGlobalUserByEmail = async email => {
   const db = getDB(StaticDatabases.GLOBAL.name)
   try {
     let users = (
@@ -114,7 +114,7 @@ exports.getGlobalUserByEmail = async (email) => {
         include_docs: true,
       })
     ).rows
-    users = users.map((user) => user.doc)
+    users = users.map(user => user.doc)
     return users.length <= 1 ? users[0] : users
   } catch (err) {
     if (err != null && err.name === "not_found") {

packages/bbui/src/ActionGroup/ActionGroup.svelte

@@ -8,7 +8,7 @@
   // Attaches a spectrum-ActionGroup-item class to buttons inside the div
   function group(element) {
     const buttons = Array.from(element.getElementsByTagName("button"))
-    buttons.forEach((button) => {
+    buttons.forEach(button => {
       button.classList.add("spectrum-ActionGroup-item")
     })
   }

packages/bbui/src/Actions/position_dropdown.js

@@ -47,7 +47,7 @@ export default function positionDropdown(element, { anchor, align }) {
   element.style[positionSide] = `${dimensions[positionSide]}px`
   element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
 
-  const resizeObserver = new ResizeObserver((entries) => {
+  const resizeObserver = new ResizeObserver(entries => {
     entries.forEach(() => {
       dimensions = getDimensions()
       element.style[positionSide] = `${dimensions[positionSide]}px`

packages/bbui/src/ButtonGroup/ButtonGroup.svelte

@@ -4,7 +4,11 @@
 
   function group(element) {
     const buttons = Array.from(element.getElementsByTagName("button"))
+<<<<<<< HEAD
     buttons.forEach((button) => {
+=======
+    buttons.forEach(button => {
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
       button.classList.add("spectrum-ButtonGroup-item")
     })
   }

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

@@ -53,6 +53,10 @@
   {getOptionValue}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder}
+<<<<<<< HEAD
   isOptionSelected={(option) => option === value}
+=======
+  isOptionSelected={option => option === value}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
   onSelectOption={selectOption}
 />

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

@@ -43,8 +43,15 @@
     {disabled}
     {id}
     on:focus={() => (focus = true)}
+<<<<<<< HEAD
     on:blur={onChange}>{value || ""}</textarea
   >
+=======
+    on:blur={onChange}
+  >
+    {value || ""}
+  </textarea>
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
 </div>
 
 <style>

packages/bbui/src/Modal/ModalContent.svelte

@@ -7,7 +7,7 @@
   import Context from "../context"
 
   export let title = undefined
-  export let size = "small"
+  export let size = "S"
   export let cancelText = "Cancel"
   export let confirmText = "Confirm"
   export let showCancelButton = true
@@ -30,7 +30,11 @@
 </script>
 
 <div
-  class="spectrum-Dialog spectrum-Dialog--{size}"
+  class="spectrum-Dialog"
+  class:spectrum-Dialog--small={size === "S"}
+  class:spectrum-Dialog--medium={size === "M"}
+  class:spectrum-Dialog--large={size === "L"}
+  class:spectrum-Dialog--extraLarge={size === "XL"}
   style="position: relative;"
   role="dialog"
   tabindex="-1"
@@ -76,6 +80,9 @@
 </div>
 
 <style>
+  .spectrum-Dialog--extraLarge {
+    width: 1000px;
+  }
   .content-grid {
     display: grid;
     position: relative;

packages/bbui/src/Stores/notifications.js

@@ -7,7 +7,7 @@ export const createNotificationStore = () => {
   const _notifications = writable([], () => {
     return () => {
       // clear all the timers
-      timeoutIds.forEach((timeoutId) => {
+      timeoutIds.forEach(timeoutId => {
         clearTimeout(timeoutId)
       })
       _notifications.set([])
@@ -25,11 +25,11 @@ export const createNotificationStore = () => {
       return
     }
     let _id = id()
-    _notifications.update((state) => {
+    _notifications.update(state => {
       return [...state, { id: _id, type, message, icon }]
     })
     const timeoutId = setTimeout(() => {
-      _notifications.update((state) => {
+      _notifications.update(state => {
         return state.filter(({ id }) => id !== _id)
       })
     }, NOTIFICATION_TIMEOUT)
@@ -41,10 +41,10 @@ export const createNotificationStore = () => {
   return {
     subscribe,
     send,
-    info: (msg) => send(msg, "info", "Info"),
+    info: msg => send(msg, "info", "Info"),
-    error: (msg) => send(msg, "error", "Alert"),
+    error: msg => send(msg, "error", "Alert"),
-    warning: (msg) => send(msg, "warning", "Alert"),
+    warning: msg => send(msg, "warning", "Alert"),
-    success: (msg) => send(msg, "success", "CheckmarkCircle"),
+    success: msg => send(msg, "success", "CheckmarkCircle"),
     blockNotifications,
   }
 }

packages/bbui/src/Table/Table.svelte

@@ -31,6 +31,7 @@
   // Table state
   let height = 0
   let loaded = false
+  $: schema = fixSchema(schema)
   $: if (!loading) loaded = true
   $: rows = data ?? []
   $: visibleRowCount = getVisibleRowCount(loaded, height, rows.length, rowCount)
@@ -50,7 +51,7 @@
     rows.length
   )
 
-  // Reset state when data chanegs
+  // Reset state when data changes
   $: data.length, reset()
   const reset = () => {
     nextScrollTop = 0
@@ -59,6 +60,24 @@
     timeout = null
   }
 
+  const fixSchema = schema => {
+    let fixedSchema = {}
+    Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
+      if (typeof fieldSchema === "string") {
+        fixedSchema[fieldName] = {
+          type: fieldSchema,
+          name: fieldName,
+        }
+      } else {
+        fixedSchema[fieldName] = {
+          ...fieldSchema,
+          name: fieldName,
+        }
+      }
+    })
+    return fixedSchema
+  }
+
   const getVisibleRowCount = (loaded, height, allRows, rowCount) => {
     if (!loaded) {
       return rowCount || 0
@@ -118,7 +137,6 @@
       if (!field || !fieldSchema) {
         return
       }
-      schema[field].name = field
       if (!fieldSchema?.autocolumn) {
         columns.push(fieldSchema)
       } else if (showAutoColumns) {
@@ -239,7 +257,11 @@
                         <svg
                           class="spectrum-Icon spectrum-Table-editIcon"
                           focusable="false"
+<<<<<<< HEAD
                           on:click={(e) => editColumn(e, field)}
+=======
+                          on:click={e => editColumn(e, field)}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
                         >
                           <use xlink:href="#spectrum-icon-18-Edit" />
                         </svg>

packages/builder/cypress/support/commands.js

@@ -6,7 +6,7 @@
 //
 
 Cypress.Commands.add("login", () => {
-  cy.getCookie("budibase:auth").then((cookie) => {
+  cy.getCookie("budibase:auth").then(cookie => {
     // Already logged in
     if (cookie) return
 
@@ -20,13 +20,13 @@ Cypress.Commands.add("login", () => {
   })
 })
 
-Cypress.Commands.add("createApp", (name) => {
+Cypress.Commands.add("createApp", name => {
   cy.visit(`localhost:${Cypress.env("PORT")}/builder`)
   // wait for init API calls on visit
   cy.wait(100)
   cy.contains("Create New Web App").click()
   cy.get("body")
-    .then(($body) => {
+    .then($body => {
       if ($body.find("input[name=apiKey]").length) {
         // input was found, do something else here
         cy.get("input[name=apiKey]").type(name).should("have.value", name)
@@ -50,9 +50,9 @@ Cypress.Commands.add("createApp", (name) => {
     })
 })
 
-Cypress.Commands.add("deleteApp", (name) => {
+Cypress.Commands.add("deleteApp", name => {
   cy.visit(`localhost:${Cypress.env("PORT")}/builder`)
-  cy.get(".apps").then(($apps) => {
+  cy.get(".apps").then($apps => {
     cy.wait(1000)
     if ($apps.find(`[data-cy="app-${name}"]`).length) {
       cy.get(`[data-cy="app-${name}"]`).contains("Open").click()
@@ -78,7 +78,7 @@ Cypress.Commands.add("createTestTableWithData", () => {
   cy.addColumn("dog", "age", "Number")
 })
 
-Cypress.Commands.add("createTable", (tableName) => {
+Cypress.Commands.add("createTable", tableName => {
   // Enter table name
   cy.get("[data-cy=new-table]").click()
   cy.get(".spectrum-Modal").within(() => {
@@ -104,7 +104,7 @@ Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
   })
 })
 
-Cypress.Commands.add("addRow", (values) => {
+Cypress.Commands.add("addRow", values => {
   cy.contains("Create row").click()
   cy.get(".spectrum-Modal").within(() => {
     for (let i = 0; i < values.length; i++) {
@@ -134,7 +134,7 @@ Cypress.Commands.add("addComponent", (category, component) => {
   }
   cy.get(`[data-cy="component-${component}"]`).click()
   cy.wait(1000)
-  cy.location().then((loc) => {
+  cy.location().then(loc => {
     const params = loc.pathname.split("/")
     const componentId = params[params.length - 1]
     cy.getComponent(componentId).should("exist")
@@ -142,7 +142,7 @@ Cypress.Commands.add("addComponent", (category, component) => {
   })
 })
 
-Cypress.Commands.add("getComponent", (componentId) => {
+Cypress.Commands.add("getComponent", componentId => {
   return cy
     .get("iframe")
     .its("0.contentDocument")

packages/builder/package.json

@@ -106,7 +106,7 @@
     "rollup": "^2.44.0",
     "rollup-plugin-copy": "^3.4.0",
     "start-server-and-test": "^1.12.1",
-    "svelte": "^3.36.0",
+    "svelte": "^3.37.0",
     "svelte-jester": "^1.3.2",
     "vite": "^2.1.5"
   },

packages/builder/src/analytics.js

@@ -32,7 +32,7 @@ function identify(id) {
   if (!analyticsEnabled || !id) return
   if (posthogConfigured) posthog.identify(id)
   if (sentryConfigured)
-    Sentry.configureScope((scope) => {
+    Sentry.configureScope(scope => {
       scope.setUser({ id: id })
     })
 }
@@ -73,7 +73,7 @@ if (!localStorage.getItem(APP_FIRST_STARTED_KEY)) {
   localStorage.setItem(APP_FIRST_STARTED_KEY, Date.now())
 }
 
-const isFeedbackTimeElapsed = (sinceDateStr) => {
+const isFeedbackTimeElapsed = sinceDateStr => {
   const sinceDate = parseFloat(sinceDateStr)
   const feedbackMilliseconds = feedbackHours * 60 * 60 * 1000
   return Date.now() > sinceDate + feedbackMilliseconds
@@ -107,7 +107,7 @@ function highlightFeedbackIcon() {
 }
 
 // Opt In/Out
-const ifAnalyticsEnabled = (func) => () => {
+const ifAnalyticsEnabled = func => () => {
   if (analyticsEnabled && process.env.POSTHOG_TOKEN) {
     return func()
   }

packages/builder/src/builderStore/api.js

@@ -2,7 +2,7 @@ import { store } from "./index"
 import { get as svelteGet } from "svelte/store"
 import { removeCookie, Cookies } from "./cookies"
 
-const apiCall = (method) => async (
+const apiCall = method => async (
   url,
   body,
   headers = { "Content-Type": "application/json" }

packages/builder/src/builderStore/cookies.js

@@ -4,7 +4,7 @@ export const Cookies = {
 }
 
 export function getCookie(cookieName) {
-  return document.cookie.split(";").some((cookie) => {
+  return document.cookie.split(";").some(cookie => {
     return cookie.trim().startsWith(`${cookieName}=`)
   })
 }

packages/builder/src/builderStore/dataBinding.js

@@ -34,7 +34,7 @@ export const getDataProviderComponents = (asset, componentId) => {
   path.pop()
 
   // Filter by only data provider components
-  return path.filter((component) => {
+  return path.filter(component => {
     const def = store.actions.components.getDefinition(component._component)
     return def?.context != null
   })
@@ -54,7 +54,7 @@ export const getActionProviderComponents = (asset, componentId, actionType) => {
   path.pop()
 
   // Filter by only data provider components
-  return path.filter((component) => {
+  return path.filter(component => {
     const def = store.actions.components.getDefinition(component._component)
     return def?.actions?.includes(actionType)
   })
@@ -70,7 +70,7 @@ export const getDatasourceForProvider = (asset, component) => {
   }
 
   // If this component has a dataProvider setting, go up the stack and use it
-  const dataProviderSetting = def.settings.find((setting) => {
+  const dataProviderSetting = def.settings.find(setting => {
     return setting.type === "dataProvider"
   })
   if (dataProviderSetting) {
@@ -82,7 +82,7 @@ export const getDatasourceForProvider = (asset, component) => {
 
   // Extract datasource from component instance
   const validSettingTypes = ["dataSource", "table", "schema"]
-  const datasourceSetting = def.settings.find((setting) => {
+  const datasourceSetting = def.settings.find(setting => {
     return validSettingTypes.includes(setting.type)
   })
   if (!datasourceSetting) {
@@ -112,7 +112,7 @@ const getContextBindings = (asset, componentId) => {
   let bindings = []
 
   // Create bindings for each data provider
-  dataProviders.forEach((component) => {
+  dataProviders.forEach(component => {
     const def = store.actions.components.getDefinition(component._component)
     const contextDefinition = def.context
     let schema
@@ -127,7 +127,7 @@ const getContextBindings = (asset, componentId) => {
       // Static contexts are fully defined by the components
       schema = {}
       const values = contextDefinition.values || []
-      values.forEach((value) => {
+      values.forEach(value => {
         schema[value.key] = { name: value.label, type: "string" }
       })
     } else if (contextDefinition.type === "schema") {
@@ -148,7 +148,7 @@ const getContextBindings = (asset, componentId) => {
 
     // Create bindable properties for each schema field
     const safeComponentId = makePropSafe(component._id)
-    keys.forEach((key) => {
+    keys.forEach(key => {
       const fieldSchema = schema[key]
 
       // Make safe runtime binding and replace certain bindings with a
@@ -197,7 +197,7 @@ const getUserBindings = () => {
   })
   const keys = Object.keys(schema).sort()
   const safeUser = makePropSafe("user")
-  keys.forEach((key) => {
+  keys.forEach(key => {
     const fieldSchema = schema[key]
     // Replace certain bindings with a new property to help display components
     let runtimeBoundKey = key
@@ -224,17 +224,17 @@ const getUserBindings = () => {
 /**
  * Gets all bindable properties from URL parameters.
  */
-const getUrlBindings = (asset) => {
+const getUrlBindings = asset => {
   const url = asset?.routing?.route ?? ""
   const split = url.split("/")
   let params = []
-  split.forEach((part) => {
+  split.forEach(part => {
     if (part.startsWith(":") && part.length > 1) {
       params.push(part.replace(/:/g, "").replace(/\?/g, ""))
     }
   })
   const safeURL = makePropSafe("url")
-  return params.map((param) => ({
+  return params.map(param => ({
     type: "context",
     runtimeBinding: `${safeURL}.${makePropSafe(param)}`,
     readableBinding: `URL.${param}`,
@@ -250,10 +250,10 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
     const { type } = datasource
     if (type === "query") {
       const queries = get(queriesStores).list
-      table = queries.find((query) => query._id === datasource._id)
+      table = queries.find(query => query._id === datasource._id)
     } else {
       const tables = get(tablesStore).list
-      table = tables.find((table) => table._id === datasource.tableId)
+      table = tables.find(table => table._id === datasource.tableId)
     }
     if (table) {
       if (type === "view") {
@@ -261,7 +261,7 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
       } else if (type === "query" && isForm) {
         schema = {}
         const params = table.parameters || []
-        params.forEach((param) => {
+        params.forEach(param => {
           if (param?.name) {
             schema[param.name] = { ...param, type: "string" }
           }
@@ -277,14 +277,23 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
       schema["_rev"] = { type: "string" }
     }
 
-    // Ensure there are "name" properties for all fields
+    // Ensure there are "name" properties for all fields and that field schema
-    if (schema) {
+    // are objects
-      Object.keys(schema).forEach((field) => {
+    let fixedSchema = {}
-        if (!schema[field].name) {
+    Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
-          schema[field].name = field
+      if (typeof fieldSchema === "string") {
+        fixedSchema[fieldName] = {
+          type: fieldSchema,
+          name: fieldName,
         }
-      })
+      } else {
-    }
+        fixedSchema[fieldName] = {
+          ...fieldSchema,
+          name: fieldName,
+        }
+      }
+    })
+    schema = fixedSchema
   }
   return { schema, table }
 }
@@ -293,14 +302,14 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
  * Builds a form schema given a form component.
  * A form schema is a schema of all the fields nested anywhere within a form.
  */
-const buildFormSchema = (component) => {
+const buildFormSchema = component => {
   let schema = {}
   if (!component) {
     return schema
   }
   const def = store.actions.components.getDefinition(component._component)
   const fieldSetting = def?.settings?.find(
-    (setting) => setting.key === "field" && setting.type.startsWith("field/")
+    setting => setting.key === "field" && setting.type.startsWith("field/")
   )
   if (fieldSetting && component.field) {
     const type = fieldSetting.type.split("field/")[1]
@@ -308,7 +317,7 @@ const buildFormSchema = (component) => {
       schema[component.field] = { type }
     }
   }
-  component._children?.forEach((child) => {
+  component._children?.forEach(child => {
     const childSchema = buildFormSchema(child)
     schema = { ...schema, ...childSchema }
   })
@@ -339,7 +348,7 @@ function bindingReplacement(bindableProperties, textWithBindings, convertTo) {
     return textWithBindings
   }
   const convertFromProps = bindableProperties
-    .map((el) => el[convertFrom])
+    .map(el => el[convertFrom])
     .sort((a, b) => {
       return b.length - a.length
     })
@@ -349,9 +358,7 @@ function bindingReplacement(bindableProperties, textWithBindings, convertTo) {
     let newBoundValue = boundValue
     for (let from of convertFromProps) {
       if (newBoundValue.includes(from)) {
-        const binding = bindableProperties.find(
+        const binding = bindableProperties.find(el => el[convertFrom] === from)
-          (el) => el[convertFrom] === from
-        )
         newBoundValue = newBoundValue.replace(from, binding[convertTo])
       }
     }

packages/builder/src/builderStore/index.js

@@ -12,16 +12,12 @@ export const automationStore = getAutomationStore()
 export const themeStore = getThemeStore()
 export const hostingStore = getHostingStore()
 
-export const currentAsset = derived(store, ($store) => {
+export const currentAsset = derived(store, $store => {
   const type = $store.currentFrontEndType
   if (type === FrontendTypes.SCREEN) {
-    return $store.screens.find(
+    return $store.screens.find(screen => screen._id === $store.selectedScreenId)
-      (screen) => screen._id === $store.selectedScreenId
-    )
   } else if (type === FrontendTypes.LAYOUT) {
-    return $store.layouts.find(
+    return $store.layouts.find(layout => layout._id === $store.selectedLayoutId)
-      (layout) => layout._id === $store.selectedLayoutId
-    )
   }
   return null
 })
@@ -36,24 +32,24 @@ export const selectedComponent = derived(
   }
 )
 
-export const currentAssetId = derived(store, ($store) => {
+export const currentAssetId = derived(store, $store => {
   return $store.currentFrontEndType === FrontendTypes.SCREEN
     ? $store.selectedScreenId
     : $store.selectedLayoutId
 })
 
-export const currentAssetName = derived(currentAsset, ($currentAsset) => {
+export const currentAssetName = derived(currentAsset, $currentAsset => {
   return $currentAsset?.name
 })
 
 // leave this as before for consistency
-export const allScreens = derived(store, ($store) => {
+export const allScreens = derived(store, $store => {
   return $store.screens
 })
 
-export const mainLayout = derived(store, ($store) => {
+export const mainLayout = derived(store, $store => {
   return $store.layouts?.find(
-    (layout) => layout._id === LAYOUT_NAMES.MASTER.PRIVATE
+    layout => layout._id === LAYOUT_NAMES.MASTER.PRIVATE
   )
 })
 

packages/builder/src/builderStore/loadComponentLibraries.js

@@ -5,7 +5,7 @@ import { get } from "builderStore/api"
  * their props and other metadata from components.json.
  * @param {string} appId - ID of the currently running app
  */
-export const fetchComponentLibDefinitions = async (appId) => {
+export const fetchComponentLibDefinitions = async appId => {
   const LIB_DEFINITION_URL = `/api/${appId}/components/definitions`
   try {
     const libDefinitionResponse = await get(LIB_DEFINITION_URL)

packages/builder/src/builderStore/store/automation/Automation.js

@@ -37,7 +37,7 @@ export default class Automation {
       return
     }
 
-    const stepIdx = steps.findIndex((step) => step.id === id)
+    const stepIdx = steps.findIndex(step => step.id === id)
     if (stepIdx < 0) throw new Error("Block not found.")
     steps.splice(stepIdx, 1, updatedBlock)
     this.automation.definition.steps = steps
@@ -51,7 +51,7 @@ export default class Automation {
       return
     }
 
-    const stepIdx = steps.findIndex((step) => step.id === id)
+    const stepIdx = steps.findIndex(step => step.id === id)
     if (stepIdx < 0) throw new Error("Block not found.")
     steps.splice(stepIdx, 1)
     this.automation.definition.steps = steps

packages/builder/src/builderStore/store/automation/index.js

@@ -4,14 +4,14 @@ import Automation from "./Automation"
 import { cloneDeep } from "lodash/fp"
 import analytics from "analytics"
 
-const automationActions = (store) => ({
+const automationActions = store => ({
   fetch: async () => {
     const responses = await Promise.all([
       api.get(`/api/automations`),
       api.get(`/api/automations/definitions/list`),
     ])
-    const jsonResponses = await Promise.all(responses.map((x) => x.json()))
+    const jsonResponses = await Promise.all(responses.map(x => x.json()))
-    store.update((state) => {
+    store.update(state => {
       let selected = state.selectedAutomation?.automation
       state.automations = jsonResponses[0]
       state.blockDefinitions = {
@@ -22,7 +22,7 @@ const automationActions = (store) => ({
       // if previously selected find the new obj and select it
       if (selected) {
         selected = jsonResponses[0].filter(
-          (automation) => automation._id === selected._id
+          automation => automation._id === selected._id
         )
         state.selectedAutomation = new Automation(selected[0])
       }
@@ -40,7 +40,7 @@ const automationActions = (store) => ({
     const CREATE_AUTOMATION_URL = `/api/automations`
     const response = await api.post(CREATE_AUTOMATION_URL, automation)
     const json = await response.json()
-    store.update((state) => {
+    store.update(state => {
       state.automations = [...state.automations, json.automation]
       store.actions.select(json.automation)
       return state
@@ -50,9 +50,9 @@ const automationActions = (store) => ({
     const UPDATE_AUTOMATION_URL = `/api/automations`
     const response = await api.put(UPDATE_AUTOMATION_URL, automation)
     const json = await response.json()
-    store.update((state) => {
+    store.update(state => {
       const existingIdx = state.automations.findIndex(
-        (existing) => existing._id === automation._id
+        existing => existing._id === automation._id
       )
       state.automations.splice(existingIdx, 1, json.automation)
       state.automations = state.automations
@@ -65,9 +65,9 @@ const automationActions = (store) => ({
     const DELETE_AUTOMATION_URL = `/api/automations/${_id}/${_rev}`
     await api.delete(DELETE_AUTOMATION_URL)
 
-    store.update((state) => {
+    store.update(state => {
       const existingIdx = state.automations.findIndex(
-        (existing) => existing._id === _id
+        existing => existing._id === _id
       )
       state.automations.splice(existingIdx, 1)
       state.automations = state.automations
@@ -81,15 +81,15 @@ const automationActions = (store) => ({
     const TRIGGER_AUTOMATION_URL = `/api/automations/${_id}/trigger`
     return await api.post(TRIGGER_AUTOMATION_URL)
   },
-  select: (automation) => {
+  select: automation => {
-    store.update((state) => {
+    store.update(state => {
       state.selectedAutomation = new Automation(cloneDeep(automation))
       state.selectedBlock = null
       return state
     })
   },
-  addBlockToAutomation: (block) => {
+  addBlockToAutomation: block => {
-    store.update((state) => {
+    store.update(state => {
       const newBlock = state.selectedAutomation.addBlock(cloneDeep(block))
       state.selectedBlock = newBlock
       return state
@@ -98,10 +98,10 @@ const automationActions = (store) => ({
       name: block.name,
     })
   },
-  deleteAutomationBlock: (block) => {
+  deleteAutomationBlock: block => {
-    store.update((state) => {
+    store.update(state => {
       const idx = state.selectedAutomation.automation.definition.steps.findIndex(
-        (x) => x.id === block.id
+        x => x.id === block.id
       )
       state.selectedAutomation.deleteBlock(block.id)
 

packages/builder/src/builderStore/store/frontend.js

@@ -49,10 +49,10 @@ export const getFrontendStore = () => {
   const store = writable({ ...INITIAL_FRONTEND_STATE })
 
   store.actions = {
-    initialise: async (pkg) => {
+    initialise: async pkg => {
       const { layouts, screens, application, clientLibPath } = pkg
       const components = await fetchComponentLibDefinitions(application._id)
-      store.update((state) => ({
+      store.update(state => ({
         ...state,
         libraries: application.componentLibraries,
         components,
@@ -70,7 +70,7 @@ export const getFrontendStore = () => {
 
       // Initialise backend stores
       const [_integrations] = await Promise.all([
-        api.get("/api/integrations").then((r) => r.json()),
+        api.get("/api/integrations").then(r => r.json()),
       ])
       datasources.init()
       integrations.set(_integrations)
@@ -82,18 +82,18 @@ export const getFrontendStore = () => {
       fetch: async () => {
         const response = await api.get("/api/routing")
         const json = await response.json()
-        store.update((state) => {
+        store.update(state => {
           state.routes = json.routes
           return state
         })
       },
     },
     screens: {
-      select: (screenId) => {
+      select: screenId => {
-        store.update((state) => {
+        store.update(state => {
           let screens = get(allScreens)
           let screen =
-            screens.find((screen) => screen._id === screenId) || screens[0]
+            screens.find(screen => screen._id === screenId) || screens[0]
           if (!screen) return state
 
           // Update role to the screen's role setting so that it will always
@@ -107,9 +107,9 @@ export const getFrontendStore = () => {
           return state
         })
       },
-      create: async (screen) => {
+      create: async screen => {
         screen = await store.actions.screens.save(screen)
-        store.update((state) => {
+        store.update(state => {
           state.selectedScreenId = screen._id
           state.selectedComponentId = screen.props._id
           state.currentFrontEndType = FrontendTypes.SCREEN
@@ -118,15 +118,15 @@ export const getFrontendStore = () => {
         })
         return screen
       },
-      save: async (screen) => {
+      save: async screen => {
         const creatingNewScreen = screen._id === undefined
         const response = await api.post(`/api/screens`, screen)
         screen = await response.json()
         await store.actions.routing.fetch()
 
-        store.update((state) => {
+        store.update(state => {
           const foundScreen = state.screens.findIndex(
-            (el) => el._id === screen._id
+            el => el._id === screen._id
           )
           if (foundScreen !== -1) {
             state.screens.splice(foundScreen, 1)
@@ -141,14 +141,14 @@ export const getFrontendStore = () => {
 
         return screen
       },
-      delete: async (screens) => {
+      delete: async screens => {
         const screensToDelete = Array.isArray(screens) ? screens : [screens]
 
         const screenDeletePromises = []
-        store.update((state) => {
+        store.update(state => {
           for (let screenToDelete of screensToDelete) {
             state.screens = state.screens.filter(
-              (screen) => screen._id !== screenToDelete._id
+              screen => screen._id !== screenToDelete._id
             )
             screenDeletePromises.push(
               api.delete(
@@ -177,8 +177,8 @@ export const getFrontendStore = () => {
       },
     },
     layouts: {
-      select: (layoutId) => {
+      select: layoutId => {
-        store.update((state) => {
+        store.update(state => {
           const layout =
             store.actions.layouts.find(layoutId) || get(store).layouts[0]
           if (!layout) return
@@ -189,15 +189,15 @@ export const getFrontendStore = () => {
           return state
         })
       },
-      save: async (layout) => {
+      save: async layout => {
         const layoutToSave = cloneDeep(layout)
         const creatingNewLayout = layoutToSave._id === undefined
         const response = await api.post(`/api/layouts`, layoutToSave)
         const savedLayout = await response.json()
 
-        store.update((state) => {
+        store.update(state => {
           const layoutIdx = state.layouts.findIndex(
-            (stateLayout) => stateLayout._id === savedLayout._id
+            stateLayout => stateLayout._id === savedLayout._id
           )
           if (layoutIdx >= 0) {
             // update existing layout
@@ -216,14 +216,14 @@ export const getFrontendStore = () => {
 
         return savedLayout
       },
-      find: (layoutId) => {
+      find: layoutId => {
         if (!layoutId) {
           return get(mainLayout)
         }
         const storeContents = get(store)
-        return storeContents.layouts.find((layout) => layout._id === layoutId)
+        return storeContents.layouts.find(layout => layout._id === layoutId)
       },
-      delete: async (layoutToDelete) => {
+      delete: async layoutToDelete => {
         const response = await api.delete(
           `/api/layouts/${layoutToDelete._id}/${layoutToDelete._rev}`
         )
@@ -231,9 +231,9 @@ export const getFrontendStore = () => {
           const json = await response.json()
           throw new Error(json.message)
         }
-        store.update((state) => {
+        store.update(state => {
           state.layouts = state.layouts.filter(
-            (layout) => layout._id !== layoutToDelete._id
+            layout => layout._id !== layoutToDelete._id
           )
           if (layoutToDelete._id === state.selectedLayoutId) {
             state.selectedLayoutId = get(mainLayout)._id
@@ -243,7 +243,7 @@ export const getFrontendStore = () => {
       },
     },
     components: {
-      select: (component) => {
+      select: component => {
         if (!component) {
           return
         }
@@ -263,13 +263,13 @@ export const getFrontendStore = () => {
         }
 
         // Otherwise select the component
-        store.update((state) => {
+        store.update(state => {
           state.selectedComponentId = component._id
           state.currentView = "component"
           return state
         })
       },
-      getDefinition: (componentName) => {
+      getDefinition: componentName => {
         if (!componentName) {
           return null
         }
@@ -287,7 +287,7 @@ export const getFrontendStore = () => {
         // Generate default props
         let props = { ...presetProps }
         if (definition.settings) {
-          definition.settings.forEach((setting) => {
+          definition.settings.forEach(setting => {
             if (setting.defaultValue !== undefined) {
               props[setting.key] = setting.defaultValue
             }
@@ -367,7 +367,7 @@ export const getFrontendStore = () => {
 
         // Save components and update UI
         await store.actions.preview.saveSelected()
-        store.update((state) => {
+        store.update(state => {
           state.currentView = "component"
           state.selectedComponentId = componentInstance._id
           return state
@@ -380,7 +380,7 @@ export const getFrontendStore = () => {
 
         return componentInstance
       },
-      delete: async (component) => {
+      delete: async component => {
         if (!component) {
           return
         }
@@ -391,7 +391,7 @@ export const getFrontendStore = () => {
         const parent = findComponentParent(asset.props, component._id)
         if (parent) {
           parent._children = parent._children.filter(
-            (child) => child._id !== component._id
+            child => child._id !== component._id
           )
           store.actions.components.select(parent)
         }
@@ -404,7 +404,7 @@ export const getFrontendStore = () => {
         }
 
         // Update store with copied component
-        store.update((state) => {
+        store.update(state => {
           state.componentToPaste = cloneDeep(component)
           state.componentToPaste.isCut = cut
           return state
@@ -415,7 +415,7 @@ export const getFrontendStore = () => {
           const parent = findComponentParent(selectedAsset.props, component._id)
           if (parent) {
             parent._children = parent._children.filter(
-              (child) => child._id !== component._id
+              child => child._id !== component._id
             )
             store.actions.components.select(parent)
           }
@@ -423,7 +423,7 @@ export const getFrontendStore = () => {
       },
       paste: async (targetComponent, mode) => {
         let promises = []
-        store.update((state) => {
+        store.update(state => {
           // Stop if we have nothing to paste
           if (!state.componentToPaste) {
             return state
@@ -444,7 +444,7 @@ export const getFrontendStore = () => {
           if (cut) {
             state.componentToPaste = null
           } else {
-            const randomizeIds = (component) => {
+            const randomizeIds = component => {
               if (!component) {
                 return
               }
@@ -497,7 +497,7 @@ export const getFrontendStore = () => {
         }
         await store.actions.preview.saveSelected()
       },
-      updateCustomStyle: async (style) => {
+      updateCustomStyle: async style => {
         const selected = get(selectedComponent)
         selected._styles.custom = style
         await store.actions.preview.saveSelected()
@@ -507,7 +507,7 @@ export const getFrontendStore = () => {
         selected._styles = { normal: {}, hover: {}, active: {} }
         await store.actions.preview.saveSelected()
       },
-      updateTransition: async (transition) => {
+      updateTransition: async transition => {
         const selected = get(selectedComponent)
         if (transition == null || transition === "") {
           selected._transition = ""
@@ -522,7 +522,7 @@ export const getFrontendStore = () => {
           return
         }
         component[name] = value
-        store.update((state) => {
+        store.update(state => {
           state.selectedComponentId = component._id
           return state
         })

packages/builder/src/builderStore/store/hosting.js

@@ -17,20 +17,18 @@ export const getHostingStore = () => {
         api.get("/api/hosting/"),
         api.get("/api/hosting/urls"),
       ])
-      const [info, urls] = await Promise.all(
+      const [info, urls] = await Promise.all(responses.map(resp => resp.json()))
-        responses.map((resp) => resp.json())
+      store.update(state => {
-      )
-      store.update((state) => {
         state.hostingInfo = info
         state.appUrl = urls.app
         return state
       })
       return info
     },
-    save: async (hostingInfo) => {
+    save: async hostingInfo => {
       const response = await api.post("/api/hosting", hostingInfo)
       const revision = (await response.json()).rev
-      store.update((state) => {
+      store.update(state => {
         state.hostingInfo = {
           ...hostingInfo,
           _rev: revision,
@@ -40,12 +38,10 @@ export const getHostingStore = () => {
     },
     fetchDeployedApps: async () => {
       let deployments = await (await get("/api/hosting/apps")).json()
-      store.update((state) => {
+      store.update(state => {
         state.deployedApps = deployments
-        state.deployedAppNames = Object.values(deployments).map(
+        state.deployedAppNames = Object.values(deployments).map(app => app.name)
-          (app) => app.name
+        state.deployedAppUrls = Object.values(deployments).map(app => app.url)
-        )
-        state.deployedAppUrls = Object.values(deployments).map((app) => app.url)
         return state
       })
       return deployments

packages/builder/src/builderStore/store/localStorage.js

@@ -12,13 +12,13 @@ export const localStorageStore = (localStorageKey, initialValue) => {
   })
 
   // New store setter which updates the store and localstorage
-  const set = (value) => {
+  const set = value => {
     store.set(value)
     localStorage.setItem(localStorageKey, JSON.stringify(value))
   }
 
   // New store updater which updates the store and localstorage
-  const update = (updaterFn) => set(updaterFn(get(store)))
+  const update = updaterFn => set(updaterFn(get(store)))
 
   // Hydrates the store from localstorage
   const hydrate = () => {

packages/builder/src/builderStore/store/notifications.js

@@ -6,7 +6,7 @@ export const notificationStore = writable({
 })
 
 export function send(message, type = "default") {
-  notificationStore.update((state) => {
+  notificationStore.update(state => {
     state.notifications = [
       ...state.notifications,
       { id: generate(), type, message },
@@ -16,8 +16,8 @@ export function send(message, type = "default") {
 }
 
 export const notifier = {
-  danger: (msg) => send(msg, "danger"),
+  danger: msg => send(msg, "danger"),
-  warning: (msg) => send(msg, "warning"),
+  warning: msg => send(msg, "warning"),
-  info: (msg) => send(msg, "info"),
+  info: msg => send(msg, "info"),
-  success: (msg) => send(msg, "success"),
+  success: msg => send(msg, "success"),
 }

packages/builder/src/builderStore/store/screenTemplates/index.js

@@ -3,7 +3,7 @@ import rowDetailScreen from "./rowDetailScreen"
 import rowListScreen from "./rowListScreen"
 import createFromScratchScreen from "./createFromScratchScreen"
 
-const allTemplates = (tables) => [
+const allTemplates = tables => [
   ...newRowScreen(tables),
   ...rowDetailScreen(tables),
   ...rowListScreen(tables),
@@ -18,7 +18,7 @@ const createTemplateOverride = (frontendState, create) => () => {
 }
 
 export default (frontendState, tables) => {
-  const enrichTemplate = (template) => ({
+  const enrichTemplate = template => ({
     ...template,
     create: createTemplateOverride(frontendState, template.create),
   })

packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js

@@ -10,7 +10,7 @@ import {
 } from "./utils/commonComponents"
 
 export default function (tables) {
-  return tables.map((table) => {
+  return tables.map(table => {
     return {
       name: `${table.name} - New`,
       create: () => createScreen(table),
@@ -19,14 +19,14 @@ export default function (tables) {
   })
 }
 
-export const newRowUrl = (table) => sanitizeUrl(`/${table.name}/new/row`)
+export const newRowUrl = table => sanitizeUrl(`/${table.name}/new/row`)
 export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
 
 function generateTitleContainer(table, formId) {
   return makeTitleContainer("New Row").addChild(makeSaveButton(table, formId))
 }
 
-const createScreen = (table) => {
+const createScreen = table => {
   const screen = new Screen()
     .component("@budibase/standard-components/container")
     .instanceName(`${table.name} - New`)
@@ -52,7 +52,7 @@ const createScreen = (table) => {
 
   // Add all form fields from this schema to the field group
   const datasource = { type: "table", tableId: table._id }
-  makeDatasourceFormComponents(datasource).forEach((component) => {
+  makeDatasourceFormComponents(datasource).forEach(component => {
     fieldGroup.addChild(component)
   })
 

packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js

@@ -13,7 +13,7 @@ import {
 } from "./utils/commonComponents"
 
 export default function (tables) {
-  return tables.map((table) => {
+  return tables.map(table => {
     return {
       name: `${table.name} - Detail`,
       create: () => createScreen(table),
@@ -23,7 +23,7 @@ export default function (tables) {
 }
 
 export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
-export const rowDetailUrl = (table) => sanitizeUrl(`/${table.name}/:id`)
+export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`)
 
 function generateTitleContainer(table, title, formId, repeaterId) {
   // have to override style for this, its missing margin
@@ -80,7 +80,7 @@ function generateTitleContainer(table, title, formId, repeaterId) {
   return makeTitleContainer(title).addChild(deleteButton).addChild(saveButton)
 }
 
-const createScreen = (table) => {
+const createScreen = table => {
   const provider = new Component("@budibase/standard-components/dataprovider")
     .instanceName(`Data Provider`)
     .customProps({
@@ -122,7 +122,7 @@ const createScreen = (table) => {
 
   // Add all form fields from this schema to the field group
   const datasource = { type: "table", tableId: table._id }
-  makeDatasourceFormComponents(datasource).forEach((component) => {
+  makeDatasourceFormComponents(datasource).forEach(component => {
     fieldGroup.addChild(component)
   })
 

packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js

@@ -5,7 +5,7 @@ import { Component } from "./utils/Component"
 import { makePropSafe } from "@budibase/string-templates"
 
 export default function (tables) {
-  return tables.map((table) => {
+  return tables.map(table => {
     return {
       name: `${table.name} - List`,
       create: () => createScreen(table),
@@ -15,7 +15,7 @@ export default function (tables) {
 }
 
 export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE"
-export const rowListUrl = (table) => sanitizeUrl(`/${table.name}`)
+export const rowListUrl = table => sanitizeUrl(`/${table.name}`)
 
 function generateTitleContainer(table) {
   const newButton = new Component("@budibase/standard-components/button")
@@ -70,7 +70,7 @@ function generateTitleContainer(table) {
     .addChild(newButton)
 }
 
-const createScreen = (table) => {
+const createScreen = table => {
   const provider = new Component("@budibase/standard-components/dataprovider")
     .instanceName(`Data Provider`)
     .customProps({

packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js

@@ -178,7 +178,7 @@ export function makeDatasourceFormComponents(datasource) {
   const { schema } = getSchemaForDatasource(datasource, true)
   let components = []
   let fields = Object.keys(schema || {})
-  fields.forEach((field) => {
+  fields.forEach(field => {
     const fieldSchema = schema[field]
     // skip autocolumns
     if (fieldSchema.autocolumn) {

packages/builder/src/builderStore/store/screenTemplates/utils/sanitizeUrl.js

@@ -1,7 +1,7 @@
 export default function (url) {
   return url
     .split("/")
-    .map((part) => {
+    .map(part => {
       // if parameter, then use as is
       if (part.startsWith(":")) return part
       return encodeURIComponent(part.replace(/ /g, "-"))

packages/builder/src/builderStore/store/theme.js

@@ -9,14 +9,14 @@ export const getThemeStore = () => {
   const store = localStorageStore("bb-theme", initialValue)
 
   // Update theme class when store changes
-  store.subscribe((state) => {
+  store.subscribe(state => {
     // Handle any old local storage values - this can be removed after the update
     if (state.darkMode !== undefined) {
       store.set(initialValue)
       return
     }
 
-    state.options.forEach((option) => {
+    state.options.forEach(option => {
       themeElement.classList.toggle(
         `spectrum--${option}`,
         option === state.theme

packages/builder/src/builderStore/storeUtils.js

@@ -2,14 +2,14 @@
  * Recursively searches for a specific component ID
  */
 export const findComponent = (rootComponent, id) => {
-  return searchComponentTree(rootComponent, (comp) => comp._id === id)
+  return searchComponentTree(rootComponent, comp => comp._id === id)
 }
 
 /**
  * Recursively searches for a specific component type
  */
 export const findComponentType = (rootComponent, type) => {
-  return searchComponentTree(rootComponent, (comp) => comp._component === type)
+  return searchComponentTree(rootComponent, comp => comp._component === type)
 }
 
 /**
@@ -68,7 +68,7 @@ export const findAllMatchingComponents = (rootComponent, selector) => {
   }
   let components = []
   if (rootComponent._children) {
-    rootComponent._children.forEach((child) => {
+    rootComponent._children.forEach(child => {
       components = [
         ...components,
         ...findAllMatchingComponents(child, selector),

packages/builder/src/builderStore/uuid.js

@@ -1,7 +1,7 @@
 export function uuid() {
   // always want to make this start with a letter, as this makes it
   // easier to use with template string bindings in the client
-  return "cxxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+  return "cxxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, c => {
     const r = (Math.random() * 16) | 0,
       v = c == "x" ? r : (r & 0x3) | 0x8
     return v.toString(16)

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte

@@ -39,9 +39,13 @@
       {#if block.type === "TRIGGER"}Trigger{:else}Step {blockIdx + 1}{/if}
     </div>
     {#if block.type !== "TRIGGER" || allowDeleteTrigger}
+<<<<<<< HEAD
       <div on:click|stopPropagation={deleteStep}>
         <Icon name="Close" />
       </div>
+=======
+      <div on:click|stopPropagation={deleteStep}><Icon name="Close" /></div>
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
     {/if}
   </header>
   <hr />

packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte

@@ -60,7 +60,7 @@
       <div class="section">
         {#each categories as [categoryName, bindings]}
           <Heading size="XS">{categoryName}</Heading>
-          {#each bindableProperties.filter((binding) =>
+          {#each bindableProperties.filter(binding =>
             binding.label.match(searchRgx)
           ) as binding}
             <div class="binding" on:click={() => addToText(binding)}>
@@ -76,7 +76,7 @@
       </div>
       <div class="section">
         <Heading size="XS">Helpers</Heading>
-        {#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
+        {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
           <div class="binding" on:click={() => addToText(helper)}>
             <span class="binding__label">{helper.label}</span>
             <br />

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -71,6 +71,7 @@
           panel={AutomationBindingPanel}
           type={"email"}
           value={block.inputs[key]}
+<<<<<<< HEAD
           on:change={(e) => (block.inputs[key] = e.detail)}
           {bindings}
         />
@@ -80,12 +81,20 @@
         <TableSelector bind:value={block.inputs[key]} />
       {:else if value.customType === "queryParams"}
         <QueryParamSelector bind:value={block.inputs[key]} {bindings} />
+=======
+          on:change={e => (block.inputs[key] = e.detail)}
+          {bindings}
+        />
+      {:else if value.customType === "table"}
+        <TableSelector bind:value={block.inputs[key]} />
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
       {:else if value.customType === "row"}
         <RowSelector bind:value={block.inputs[key]} {bindings} />
       {:else if value.customType === "webhookUrl"}
         <WebhookDisplay value={block.inputs[key]} />
       {:else if value.customType === "triggerSchema"}
         <SchemaSetup bind:value={block.inputs[key]} />
+<<<<<<< HEAD
       {:else if value.customType === "code"}
         <CodeEditorModal>
           <pre>{JSON.stringify(bindings, null, 2)}</pre>
@@ -102,12 +111,18 @@
             value={block.inputs[key]}
           />
         </CodeEditorModal>
+=======
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
       {:else if value.type === "string" || value.type === "number"}
         <DrawerBindableInput
           panel={AutomationBindingPanel}
           type={value.customType}
           value={block.inputs[key]}
+<<<<<<< HEAD
           on:change={(e) => (block.inputs[key] = e.detail)}
+=======
+          on:change={e => (block.inputs[key] = e.detail)}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
           {bindings}
         />
       {/if}

packages/builder/src/components/automation/SetupPanel/RowSelector.svelte

@@ -22,8 +22,13 @@
 <Select
   bind:value={value.tableId}
   options={$tables.list}
+<<<<<<< HEAD
   getOptionLabel={(table) => table.name}
   getOptionValue={(table) => table._id}
+=======
+  getOptionLabel={table => table.name}
+  getOptionValue={table => table._id}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
 />
 
 {#if schemaFields.length}

packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte

@@ -66,7 +66,11 @@
       />
       <Select
         value={field.type}
+<<<<<<< HEAD
         on:change={(e) => (value[field.name] = e.target.value)}
+=======
+        on:change={e => (value[field.name] = e.target.value)}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
         options={typeOptions}
       />
       <i

packages/builder/src/components/automation/SetupPanel/TableSelector.svelte

@@ -8,6 +8,11 @@
 <Select
   bind:value
   options={$tables.list}
+<<<<<<< HEAD
   getOptionLabel={(table) => table.name}
   getOptionValue={(table) => table._id}
+=======
+  getOptionLabel={table => table.name}
+  getOptionValue={table => table._id}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
 />

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -40,7 +40,7 @@
           component: RoleCell,
         },
       ]
-      UNEDITABLE_USER_FIELDS.forEach((field) => {
+      UNEDITABLE_USER_FIELDS.forEach(field => {
         if (schema[field]) {
           schema[field].editable = false
         }
@@ -68,19 +68,19 @@
       rows: selectedRows,
       type: "delete",
     })
-    data = data.filter((row) => !selectedRows.includes(row))
+    data = data.filter(row => !selectedRows.includes(row))
     notifications.success(`Successfully deleted ${selectedRows.length} rows`)
     selectedRows = []
   }
 
-  const editRow = (row) => {
+  const editRow = row => {
     editableRow = row
     if (row) {
       editRowModal.show()
     }
   }
 
-  const editColumn = (field) => {
+  const editColumn = field => {
     editableColumn = schema?.[field]
     if (editableColumn) {
       editColumnModal.show()
@@ -118,9 +118,9 @@
     allowEditRows={allowEditing}
     allowEditColumns={allowEditing}
     showAutoColumns={!hideAutocolumns}
-    on:editcolumn={(e) => editColumn(e.detail)}
+    on:editcolumn={e => editColumn(e.detail)}
-    on:editrow={(e) => editRow(e.detail)}
+    on:editrow={e => editRow(e.detail)}
-    on:clickrelationship={(e) => selectRelationship(e.detail)}
+    on:clickrelationship={e => selectRelationship(e.detail)}
   />
 {/key}
 

packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte

@@ -50,8 +50,13 @@
     <Select
       bind:value={view.calculation}
       options={CALCULATIONS}
+<<<<<<< HEAD
       getOptionLabel={(x) => x.name}
       getOptionValue={(x) => x.key}
+=======
+      getOptionLabel={x => x.name}
+      getOptionValue={x => x.key}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
     />
     {#if view.calculation}
       <Label>Of</Label>

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -197,8 +197,13 @@
       ...Object.values(fieldDefinitions),
       { name: "Auto Column", type: AUTO_COL },
     ]}
+<<<<<<< HEAD
     getOptionLabel={(field) => field.name}
     getOptionValue={(field) => field.type}
+=======
+    getOptionLabel={field => field.name}
+    getOptionValue={field => field.type}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
   />
 
   {#if canBeRequired || canBeDisplay}
@@ -274,8 +279,13 @@
       label="Table"
       bind:value={field.tableId}
       options={tableOptions}
+<<<<<<< HEAD
       getOptionLabel={(table) => table.name}
       getOptionValue={(table) => table._id}
+=======
+      getOptionLabel={table => table.name}
+      getOptionValue={table => table._id}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
     />
     {#if relationshipOptions && relationshipOptions.length > 0}
       <RadioGroup
@@ -283,8 +293,13 @@
         label="Define the relationship"
         bind:value={field.relationshipType}
         options={relationshipOptions}
+<<<<<<< HEAD
         getOptionLabel={(option) => option.name}
         getOptionValue={(option) => option.value}
+=======
+        getOptionLabel={option => option.name}
+        getOptionValue={option => option.value}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
       />
     {/if}
     <Input label={`Column name in other table`} bind:value={field.fieldName} />
@@ -294,8 +309,13 @@
       value={field.subtype}
       on:change={(e) => (field.subtype = e.detail)}
       options={Object.entries(getAutoColumnInformation())}
+<<<<<<< HEAD
       getOptionLabel={(option) => option[1].name}
       getOptionValue={(option) => option[0]}
+=======
+      getOptionLabel={option => option[1].name}
+      getOptionValue={option => option[0]}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
     />
   {/if}
 

packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte

@@ -94,8 +94,13 @@
     data-cy="roleId-select"
     bind:value={row.roleId}
     options={$roles}
+<<<<<<< HEAD
     getOptionLabel={(role) => role.name}
     getOptionValue={(role) => role._id}
+=======
+    getOptionLabel={role => role.name}
+    getOptionValue={role => role._id}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
   />
   <Select
     label="Status"
@@ -104,8 +109,13 @@
       { label: "Active", value: "active" },
       { label: "Inactive", value: "inactive" },
     ]}
+<<<<<<< HEAD
     getOptionLabel={(status) => status.label}
     getOptionValue={(status) => status.value}
+=======
+    getOptionLabel={status => status.label}
+    getOptionValue={status => status.value}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
   />
   {#each customSchemaKeys as [key, meta]}
     {#if !meta.autocolumn}

packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte

@@ -98,8 +98,13 @@
     on:change={changeRole}
     options={$roles}
     placeholder="Create new role"
+<<<<<<< HEAD
     getOptionValue={(role) => role._id}
     getOptionLabel={(role) => role.name}
+=======
+    getOptionValue={role => role._id}
+    getOptionLabel={role => role.name}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
   />
   {#if selectedRole}
     <Input
@@ -111,16 +116,26 @@
       label="Inherits Role"
       bind:value={selectedRole.inherits}
       options={otherRoles}
+<<<<<<< HEAD
       getOptionValue={(role) => role._id}
       getOptionLabel={(role) => role.name}
+=======
+      getOptionValue={role => role._id}
+      getOptionLabel={role => role.name}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
       placeholder="None"
     />
     <Select
       label="Base Permissions"
       bind:value={selectedRole.permissionId}
       options={basePermissions}
+<<<<<<< HEAD
       getOptionValue={(x) => x._id}
       getOptionLabel={(x) => x.name}
+=======
+      getOptionValue={x => x._id}
+      getOptionLabel={x => x.name}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
       placeholder="Choose permissions"
     />
   {/if}

packages/builder/src/components/backend/DataTable/modals/ExportModal.svelte

@@ -32,7 +32,12 @@
     bind:value={exportFormat}
     options={FORMATS}
     placeholder={null}
+<<<<<<< HEAD
     getOptionLabel={(x) => x.name}
     getOptionValue={(x) => x.key}
+=======
+    getOptionLabel={x => x.name}
+    getOptionValue={x => x.key}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
   />
 </ModalContent>

packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte

@@ -102,7 +102,7 @@
     return viewTable.schema[field].type === "number"
   }
 
-  const fieldChanged = (filter) => (ev) => {
+  const fieldChanged = filter => ev => {
     // reset if type changed
     if (
       filter.key &&
@@ -113,16 +113,11 @@
     }
   }
 
-  const getOptionLabel = (x) => x.name
+  const getOptionLabel = x => x.name
-  const getOptionValue = (x) => x.key
+  const getOptionValue = x => x.key
 </script>
 
-<ModalContent
+<ModalContent title="Filter" confirmText="Save" onConfirm={saveView} size="L">
-  title="Filter"
-  confirmText="Save"
-  onConfirm={saveView}
-  size="large"
->
   {#if view.filters.length}
     <div class="input-group-row">
       {#each view.filters as filter, idx}
@@ -152,7 +147,7 @@
           <Select
             bind:value={filter.value}
             options={fieldOptions(filter.key)}
-            getOptionLabel={(x) => x.toString()}
+            getOptionLabel={x => x.toString()}
           />
         {:else if filter.key && isDate(filter.key)}
           <DatePicker

packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte

@@ -38,10 +38,10 @@
       <Input value={capitalise(level)} disabled />
       <Select
         value={permissions[level]}
-        on:change={(e) => changePermission(level, e.detail)}
+        on:change={e => changePermission(level, e.detail)}
         options={$roles}
-        getOptionLabel={(x) => x.name}
+        getOptionLabel={x => x.name}
-        getOptionValue={(x) => x._id}
+        getOptionValue={x => x._id}
       />
     {/each}
   </div>

packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte

@@ -44,7 +44,7 @@
         </div>
         <EditDatasourcePopover {datasource} />
       </NavItem>
-      {#each $queries.list.filter((query) => query.datasourceId === datasource._id) as query}
+      {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
         <NavItem
           indentLevel={1}
           icon="SQLQuery"

packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte

@@ -43,7 +43,7 @@
 
 <ModalContent
   title="Create Datasource"
-  size="large"
+  size="L"
   confirmText="Create"
   onConfirm={saveDatasource}
   disabled={error || !name}

packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte

@@ -128,8 +128,13 @@
           on:change={handleTypeChange(columnName)}
           options={typeOptions}
           placeholder={null}
+<<<<<<< HEAD
           getOptionLabel={(option) => option.label}
           getOptionValue={(option) => option.value}
+=======
+          getOptionLabel={option => option.label}
+          getOptionValue={option => option.value}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
         />
         <span class="field-status" class:error={!schema[columnName].success}>
           {schema[columnName].success ? "Success" : "Failure"}

packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte

@@ -24,11 +24,9 @@
 
   function showDeleteModal() {
     const screens = $allScreens
-    templateScreens = screens.filter(
+    templateScreens = screens.filter(screen => screen.autoTableId === table._id)
-      (screen) => screen.autoTableId === table._id
-    )
     willBeDeleted = ["All table data"].concat(
-      templateScreens.map((screen) => `Screen ${screen.props._instanceName}`)
+      templateScreens.map(screen => `Screen ${screen.props._instanceName}`)
     )
     confirmDeleteDialog.show()
   }

packages/builder/src/components/common/DrawerBindableInput.svelte

@@ -34,7 +34,8 @@
     {label}
     value={readableValue}
     on:change={event => onChange(event.detail)}
-    {placeholder} />
+    {placeholder}
+  />
   <div class="icon" on:click={bindingDrawer.show}>
     <Icon size="S" name="FlashOn" />
   </div>
@@ -45,12 +46,13 @@
   </svelte:fragment>
   <Button cta slot="buttons" on:click={handleClose}>Save</Button>
   <svelte:component
-    slot="body"
     this={panel}
+    slot="body"
     value={readableValue}
     close={handleClose}
     on:update={event => (tempValue = event.detail)}
-    bindableProperties={bindings} />
+    bindableProperties={bindings}
+  />
 </Drawer>
 
 <style>

packages/builder/src/components/common/LinkedRowSelector.svelte

@@ -44,8 +44,13 @@
     value={linkedIds?.[0]}
     options={rows}
     getOptionLabel={getPrettyName}
+<<<<<<< HEAD
     getOptionValue={(row) => row._id}
     on:change={(e) => (linkedIds = e.detail ? [e.detail] : [])}
+=======
+    getOptionValue={row => row._id}
+    on:change={e => (linkedIds = e.detail ? [e.detail] : [])}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
     {label}
   />
 {:else}
@@ -54,6 +59,10 @@
     {label}
     options={rows}
     getOptionLabel={getPrettyName}
+<<<<<<< HEAD
     getOptionValue={(row) => row._id}
+=======
+    getOptionValue={row => row._id}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
   />
 {/if}

packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte

@@ -24,7 +24,7 @@
     if (currentIndex === 0) {
       return
     }
-    const newChildren = parent._children.filter((c) => c !== component)
+    const newChildren = parent._children.filter(c => c !== component)
     newChildren.splice(currentIndex - 1, 0, component)
     parent._children = newChildren
     store.actions.preview.saveSelected()
@@ -40,7 +40,7 @@
     if (currentIndex === parent._children.length - 1) {
       return
     }
-    const newChildren = parent._children.filter((c) => c !== component)
+    const newChildren = parent._children.filter(c => c !== component)
     newChildren.splice(currentIndex + 1, 0, component)
     parent._children = newChildren
     store.actions.preview.saveSelected()
@@ -60,7 +60,7 @@
     store.actions.components.copy(component, cut)
   }
 
-  const pasteComponent = (mode) => {
+  const pasteComponent = mode => {
     // lives in store - also used by drag drop
     store.actions.components.paste(component, mode)
   }

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte

@@ -35,11 +35,11 @@
     route.subpaths[selectedScreen?.routing?.route] !== undefined
   $: routeOpened = routeManuallyOpened || routeSelected || hasSearchMatch
 
-  const changeScreen = (screenId) => {
+  const changeScreen = screenId => {
     store.actions.screens.select(screenId)
   }
 
-  const getAllScreens = (route) => {
+  const getAllScreens = route => {
     let screens = []
     Object.entries(route.subpaths).forEach(([route, subpath]) => {
       Object.entries(subpath.screens).forEach(([role, id]) => {
@@ -51,7 +51,7 @@
 
   const getFilteredScreens = (screens, searchString) => {
     return screens.filter(
-      (screen) => !searchString || screen.route.includes(searchString)
+      screen => !searchString || screen.route.includes(searchString)
     )
   }
 

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte

@@ -8,7 +8,7 @@
 
   let confirmDeleteDialog
 
-  $: screen = $allScreens.find((screen) => screen._id === screenId)
+  $: screen = $allScreens.find(screen => screen._id === screenId)
 
   const deleteScreen = () => {
     try {

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/dragDropStore.js

@@ -17,8 +17,8 @@ export default function () {
   const store = writable({})
 
   store.actions = {
-    dragstart: (component) => {
+    dragstart: component => {
-      store.update((state) => {
+      store.update(state => {
         state.dragged = component
         return state
       })
@@ -29,7 +29,7 @@ export default function () {
       canHaveChildrenButIsEmpty,
       mousePosition,
     }) => {
-      store.update((state) => {
+      store.update(state => {
         state.targetComponent = component
         // only allow dropping inside when container is empty
         // if container has children, drag over them
@@ -65,7 +65,7 @@ export default function () {
       })
     },
     reset: () => {
-      store.update((state) => {
+      store.update(state => {
         state.dropPosition = ""
         state.targetComponent = null
         state.dragged = null
@@ -85,7 +85,7 @@ export default function () {
       }
       // Stop if the target is a child of source
       const path = findComponentPath(state.dragged, state.targetComponent._id)
-      const ids = path.map((component) => component._id)
+      const ids = path.map(component => component._id)
       if (ids.includes(state.targetComponent._id)) {
         return
       }

packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte

@@ -26,22 +26,21 @@
   ]
 
   let modal
-  $: selected =
+  $: selected = tabs.find(t => t.key === $params.assetType)?.title || "Screens"
-    tabs.find((t) => t.key === $params.assetType)?.title || "Screens"
 
   const navigate = ({ detail }) => {
-    const { key } = tabs.find((t) => t.title === detail)
+    const { key } = tabs.find(t => t.title === detail)
     $goto(`../${key}`)
   }
 
-  const updateAccessRole = (event) => {
+  const updateAccessRole = event => {
     const role = event.detail
 
     // Select a valid screen with this new role - otherwise we'll not be
     // able to change role at all because ComponentNavigationTree will kick us
     // back the current role again because the same screen ID is still selected
     const firstValidScreenId = $allScreens.find(
-      (screen) => screen.routing.roleId === role
+      screen => screen.routing.roleId === role
     )?._id
     if (firstValidScreenId) {
       store.actions.screens.select(firstValidScreenId)
@@ -50,7 +49,7 @@
     // Otherwise clear the selected screen ID so that the first new valid screen
     // can be selected by ComponentNavigationTree
     else {
-      store.update((state) => {
+      store.update(state => {
         state.selectedScreenId = null
         return state
       })
@@ -73,8 +72,8 @@
             on:change={updateAccessRole}
             value={$selectedAccessRole}
             label="Filter by Access"
-            getOptionLabel={(role) => role.name}
+            getOptionLabel={role => role.name}
-            getOptionValue={(role) => role._id}
+            getOptionValue={role => role._id}
             options={$roles}
           />
           <Search

packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte

@@ -95,7 +95,11 @@
     on:change={(ev) => templateChanged(ev.detail)}
     options={templates}
     placeholder={null}
+<<<<<<< HEAD
     getOptionLabel={(x) => x.name}
+=======
+    getOptionLabel={x => x.name}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
     getOptionValue={(x, idx) => idx}
   />
   <Input label="Name" bind:value={name} />
@@ -109,8 +113,13 @@
     label="Access"
     bind:value={roleId}
     options={$roles}
+<<<<<<< HEAD
     getOptionLabel={(x) => x.name}
     getOptionValue={(x) => x._id}
+=======
+    getOptionLabel={x => x.name}
+    getOptionValue={x => x._id}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
   />
   <Toggle text="Create link in navigation bar" bind:value={createLink} />
 </ModalContent>

packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte

@@ -1,6 +1,13 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { Search, TextArea, Heading, Label, DrawerContent, Layout } from "@budibase/bbui"
+  import {
+    Search,
+    TextArea,
+    Heading,
+    Label,
+    DrawerContent,
+    Layout,
+  } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import {
@@ -59,53 +66,53 @@
 
 <DrawerContent>
   <svelte:fragment slot="sidebar">
-  <Layout>
+    <Layout>
-    <Search placeholder="Search" bind:value={search} />
+      <Search placeholder="Search" bind:value={search} />
-    {#if context}
+      {#if context}
+        <section>
+          <Heading size="XS">Columns</Heading>
+          <ul>
+            {#each context.filter(context =>
+              context.readableBinding.match(searchRgx)
+            ) as { readableBinding }}
+              <li on:click={() => addToText(readableBinding)}>
+                {readableBinding}
+              </li>
+            {/each}
+          </ul>
+        </section>
+      {/if}
+      {#if instance}
+        <section>
+          <Heading size="XS">Components</Heading>
+          <ul>
+            {#each instance.filter(instance =>
+              instance.readableBinding.match(searchRgx)
+            ) as { readableBinding }}
+              <li on:click={() => addToText(readableBinding)}>
+                {readableBinding}
+              </li>
+            {/each}
+          </ul>
+        </section>
+      {/if}
       <section>
-        <Heading size="XS">Columns</Heading>
+        <Heading size="XS">Helpers</Heading>
         <ul>
-          {#each context.filter((context) =>
+          {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
-            context.readableBinding.match(searchRgx)
+            <li on:click={() => addToText(helper.text)}>
-          ) as { readableBinding }}
+              <div>
-            <li on:click={() => addToText(readableBinding)}>
+                <Label extraSmall>{helper.displayText}</Label>
-              {readableBinding}
+                <div class="description">
-            </li>
+                  {@html helper.description}
-          {/each}
+                </div>
-        </ul>
+                <pre>{helper.example || ''}</pre>
-      </section>
-    {/if}
-    {#if instance}
-      <section>
-        <Heading size="XS">Components</Heading>
-        <ul>
-          {#each instance.filter((instance) =>
-            instance.readableBinding.match(searchRgx)
-          ) as { readableBinding }}
-            <li on:click={() => addToText(readableBinding)}>
-              {readableBinding}
-            </li>
-          {/each}
-        </ul>
-      </section>
-    {/if}
-    <section>
-      <Heading size="XS">Helpers</Heading>
-      <ul>
-        {#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
-          <li on:click={() => addToText(helper.text)}>
-            <div>
-              <Label extraSmall>{helper.displayText}</Label>
-              <div class="description">
-                {@html helper.description}
               </div>
-              <pre>{helper.example || ''}</pre>
+            </li>
-            </div>
+          {/each}
-          </li>
+        </ul>
-        {/each}
+      </section>
-      </ul>
+    </Layout>
-    </section>
-  </Layout>
   </svelte:fragment>
   <div class="main">
     <TextArea
@@ -125,7 +132,7 @@
 
 <style>
   .main {
-    padding: var(--spacing-m)
+    padding: var(--spacing-m);
   }
   section {
     display: grid;

packages/builder/src/components/design/PropertiesPanel/DesignView.svelte

@@ -65,7 +65,11 @@
           <div class="custom-styles">
             <TextArea
               value={componentInstance._styles.custom}
+<<<<<<< HEAD
               on:change={(event) => onCustomStyleChanged(event.detail)}
+=======
+              on:change={event => onCustomStyleChanged(event.detail)}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
               placeholder="Enter some CSS..."
             />
           </div>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte

@@ -17,6 +17,11 @@
   {value}
   on:change
   options={providers}
+<<<<<<< HEAD
   getOptionLabel={(component) => component._instanceName}
   getOptionValue={(component) => `{{ literal ${makePropSafe(component._id)} }}`}
+=======
+  getOptionLabel={component => component._instanceName}
+  getOptionValue={component => `{{ literal ${makePropSafe(component._id)} }}`}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
 />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte

@@ -121,7 +121,11 @@
           {#if value.parameters.length > 0}
             <ParameterBuilder
               bind:customParams={value.queryParams}
+<<<<<<< HEAD
               parameters={queries.find((query) => query._id === value._id)
+=======
+              parameters={queries.find(query => query._id === value._id)
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
                 .parameters}
               bindings={queryBindableProperties}
             />
@@ -131,7 +135,11 @@
             query={value}
             schema={fetchQueryDefinition(value)}
             datasource={$datasources.list.find(
+<<<<<<< HEAD
               (ds) => ds._id === value.datasourceId
+=======
+              ds => ds._id === value.datasourceId
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
             )}
             editable={false}
           />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte

@@ -21,7 +21,7 @@
   // dndzone needs an id on the array items, so this adds some temporary ones.
   $: {
     if (actions) {
-      actions.forEach((action) => {
+      actions.forEach(action => {
         if (!action.id) {
           action.id = generate()
         }
@@ -33,7 +33,7 @@
 
   $: selectedActionComponent =
     selectedAction &&
-    actionTypes.find((t) => t.name === selectedAction[EVENT_TYPE_KEY]).component
+    actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_KEY]).component
 
   // Select the first action if we delete an action
   $: {
@@ -42,12 +42,12 @@
     }
   }
 
-  const deleteAction = (index) => {
+  const deleteAction = index => {
     actions.splice(index, 1)
     actions = actions
   }
 
-  const addAction = (actionType) => () => {
+  const addAction = actionType => () => {
     const newAction = {
       parameters: {},
       [EVENT_TYPE_KEY]: actionType.name,
@@ -60,7 +60,7 @@
     selectedAction = newAction
   }
 
-  const selectAction = (action) => () => {
+  const selectAction = action => () => {
     selectedAction = action
   }
 

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte

@@ -52,7 +52,7 @@
 </script>
 
 <Button secondary on:click={drawer.show}>Define Actions</Button>
-<Drawer bind:this={drawer} title={'Actions'}>
+<Drawer bind:this={drawer} title={"Actions"}>
   <svelte:fragment slot="description">
     Define what actions to run.
   </svelte:fragment>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte

@@ -16,8 +16,13 @@
   <Select
     bind:value={parameters.tableId}
     options={tableOptions}
+<<<<<<< HEAD
     getOptionLabel={(table) => table.name}
     getOptionValue={(table) => table._id}
+=======
+    getOptionLabel={table => table.name}
+    getOptionValue={table => table._id}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
   />
 
   <Label small>Row ID</Label>
@@ -25,7 +30,11 @@
     {bindings}
     title="Row ID to delete"
     value={parameters.rowId}
+<<<<<<< HEAD
     on:change={(value) => (parameters.rowId = value.detail)}
+=======
+    on:change={value => (parameters.rowId = value.detail)}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
   />
 
   <Label small>Row Rev</Label>
@@ -33,7 +42,11 @@
     {bindings}
     title="Row rev to delete"
     value={parameters.revId}
+<<<<<<< HEAD
     on:change={(value) => (parameters.revId = value.detail)}
+=======
+    on:change={value => (parameters.revId = value.detail)}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
   />
 </div>
 

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte

@@ -8,9 +8,9 @@
 
   export let parameters
 
-  $: query = $queries.list.find((q) => q._id === parameters.queryId)
+  $: query = $queries.list.find(q => q._id === parameters.queryId)
   $: datasource = $datasources.list.find(
-    (ds) => ds._id === parameters.datasourceId
+    ds => ds._id === parameters.datasourceId
   )
   $: bindableProperties = getBindableProperties(
     $currentAsset,
@@ -18,7 +18,7 @@
   )
 
   function fetchQueryDefinition(query) {
-    const source = $datasources.list.find((ds) => ds._id === query.datasourceId)
+    const source = $datasources.list.find(ds => ds._id === query.datasourceId)
       .source
     return $integrations[source].query[query.queryVerb]
   }
@@ -29,8 +29,8 @@
   <Select
     bind:value={parameters.datasourceId}
     option={$datasources.list}
-    getOptionLabel={(source) => source.name}
+    getOptionLabel={source => source.name}
-    getOptionValue={(source) => source._id}
+    getOptionValue={source => source._id}
   />
 
   {#if parameters.datasourceId}
@@ -38,10 +38,10 @@
     <Select
       bind:value={parameters.queryId}
       options={$queries.list.filter(
-        (query) => query.datasourceId === datasource._id
+        query => query.datasourceId === datasource._id
       )}
-      getOptionLabel={(query) => query.name}
+      getOptionLabel={query => query.name}
-      getOptionValue={(query) => query._id}
+      getOptionValue={query => query._id}
     />
   {/if}
 

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte

@@ -15,14 +15,22 @@
   <DrawerBindableInput
     title="Email"
     value={parameters.email}
+<<<<<<< HEAD
     on:change={(value) => (parameters.email = value.detail)}
+=======
+    on:change={value => (parameters.email = value.detail)}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
     {bindings}
   />
   <Label small>Password</Label>
   <DrawerBindableInput
     title="Password"
     value={parameters.password}
+<<<<<<< HEAD
     on:change={(value) => (parameters.password = value.detail)}
+=======
+    on:change={value => (parameters.password = value.detail)}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
     {bindings}
   />
 </div>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte

@@ -18,7 +18,11 @@
     title="Destination URL"
     placeholder="/screen"
     value={parameters.url}
+<<<<<<< HEAD
     on:change={(value) => (parameters.url = value.detail)}
+=======
+    on:change={value => (parameters.url = value.detail)}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
     {bindings}
   />
 </div>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte

@@ -20,11 +20,11 @@
   )
 
   const addField = () => {
-    fields = [...fields.filter((field) => field[0]), ["", ""]]
+    fields = [...fields.filter(field => field[0]), ["", ""]]
   }
 
-  const removeField = (name) => {
+  const removeField = name => {
-    fields = fields.filter((field) => field[0] !== name)
+    fields = fields.filter(field => field[0] !== name)
   }
 
   const updateFieldValue = (idx, value) => {
@@ -37,10 +37,10 @@
     fields = fields
   }
 
-  const onChange = (fields) => {
+  const onChange = fields => {
     const newParamFields = {}
     fields
-      .filter((field) => field[0])
+      .filter(field => field[0])
       .forEach(([field, value]) => {
         newParamFields[field] = value
       })
@@ -54,15 +54,15 @@
     {#if schemaFields}
       <Select
         value={field[0]}
-        on:change={(event) => updateFieldName(idx, event.detail)}
+        on:change={event => updateFieldName(idx, event.detail)}
-        options={schemaFields.map((field) => field.name)}
+        options={schemaFields.map(field => field.name)}
       />
     {:else}
       <Input
         thin
         secondary
         value={field[0]}
-        on:change={(event) => updateFieldName(idx, event.detail)}
+        on:change={event => updateFieldName(idx, event.detail)}
       />
     {/if}
     <Label small>{valueLabel}</Label>
@@ -70,7 +70,7 @@
       title={`Value for "${field[0]}"`}
       value={field[1]}
       bindings={bindableProperties}
-      on:change={(event) => updateFieldValue(idx, event.detail)}
+      on:change={event => updateFieldValue(idx, event.detail)}
     />
     <ActionButton
       size="S"

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte

@@ -17,12 +17,12 @@
   $: schemaFields = getSchemaFields(parameters?.tableId)
   $: tableOptions = $tables.list || []
 
-  const getSchemaFields = (tableId) => {
+  const getSchemaFields = tableId => {
     const { schema } = getSchemaForDatasource({ type: "table", tableId })
     return Object.values(schema || {})
   }
 
-  const onFieldsChanged = (e) => {
+  const onFieldsChanged = e => {
     parameters.fields = e.detail
   }
 </script>
@@ -39,16 +39,16 @@
       bind:value={parameters.providerId}
       options={dataProviderComponents}
       placeholder="None"
-      getOptionLabel={(option) => option._instanceName}
+      getOptionLabel={option => option._instanceName}
-      getOptionValue={(option) => option._id}
+      getOptionValue={option => option._id}
     />
 
     <Label small>Table</Label>
     <Select
       bind:value={parameters.tableId}
       options={tableOptions}
-      getOptionLabel={(option) => option.name}
+      getOptionLabel={option => option.name}
-      getOptionValue={(option) => option._id}
+      getOptionValue={option => option._id}
     />
 
     {#if parameters.tableId}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte

@@ -80,8 +80,13 @@
         bind:value={parameters.automationId}
         placeholder="Choose automation"
         options={automations}
+<<<<<<< HEAD
         getOptionLabel={(x) => x.name}
         getOptionValue={(x) => x._id}
+=======
+        getOptionLabel={x => x.name}
+        getOptionValue={x => x._id}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
       />
     {:else}
       <Input

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte

@@ -17,8 +17,13 @@
   <Select
     bind:value={parameters.componentId}
     options={actionProviders}
+<<<<<<< HEAD
     getOptionLabel={(x) => x._instanceName}
     getOptionValue={(x) => x._id}
+=======
+    getOptionLabel={x => x._instanceName}
+    getOptionValue={x => x._id}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
   />
 </div>
 

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte

@@ -32,7 +32,11 @@
     return value
   }
 
+<<<<<<< HEAD
   const onChange = (value) => {
+=======
+  const onChange = value => {
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
     boundValue = getValidValue(value.detail, options)
     dispatch("change", boundValue)
   }

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte

@@ -18,7 +18,7 @@
 
   $: schemaFields = getSchemaFields(componentInstance)
 
-  const getSchemaFields = (component) => {
+  const getSchemaFields = component => {
     const datasource = getDatasourceForProvider($currentAsset, component)
     const { schema } = getSchemaForDatasource(datasource)
     return Object.values(schema || {})
@@ -30,7 +30,7 @@
     drawer.hide()
   }
 
-  const onFieldsChanged = (event) => {
+  const onFieldsChanged = event => {
     tempValue = event.detail
   }
 </script>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/LayoutSelect.svelte

@@ -9,6 +9,11 @@
   bind:value
   on:change
   options={$store.layouts}
+<<<<<<< HEAD
   getOptionLabel={(layout) => layout.name}
   getOptionValue={(layout) => layout._id}
+=======
+  getOptionLabel={layout => layout.name}
+  getOptionValue={layout => layout._id}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
 />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte

@@ -80,27 +80,32 @@
       onChange={handleChange}
       {type}
       {...props}
-      name={key} />
+      name={key}
+    />
   </div>
-  {#if bindable && !key.startsWith('_') && type === 'text'}
+  {#if bindable && !key.startsWith("_") && type === "text"}
     <div
       class="icon"
       data-cy={`${key}-binding-button`}
-      on:click={bindingDrawer.show}>
+      on:click={bindingDrawer.show}
+    >
       <Icon size="S" name="FlashOn" />
     </div>
     <Drawer bind:this={bindingDrawer} title={capitalise(key)}>
       <svelte:fragment slot="description">
-          Add the objects on the left to enrich your text.
+        Add the objects on the left to enrich your text.
       </svelte:fragment>
-      <Button cta slot="buttons" disabled={!valid} on:click={handleClose}>Save</Button>
+      <Button cta slot="buttons" disabled={!valid} on:click={handleClose}
+        >Save</Button
+      >
       <BindingPanel
         slot="body"
         bind:valid
         value={safeValue}
         close={handleClose}
         on:update={e => (temporaryBindableValue = e.detail)}
-        {bindableProperties} />
+        {bindableProperties}
+      />
     </Drawer>
   {/if}
 </div>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte

@@ -32,7 +32,11 @@
           control={prop.control}
           key={prop.key}
           value={style[prop.key]}
+<<<<<<< HEAD
           onChange={(value) => onStyleChanged(styleCategory, prop.key, value)}
+=======
+          onChange={value => onStyleChanged(styleCategory, prop.key, value)}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
           props={getControlProps(prop)}
         />
       {/each}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte

@@ -9,6 +9,11 @@
   bind:value
   on:change
   options={$roles}
+<<<<<<< HEAD
   getOptionLabel={(role) => role.name}
   getOptionValue={(role) => role._id}
+=======
+  getOptionLabel={role => role.name}
+  getOptionValue={role => role._id}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
 />

packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte

@@ -80,11 +80,11 @@
     "field/link": RelationshipFieldSelect,
   }
 
-  const getControl = (type) => {
+  const getControl = type => {
     return controlMap[type]
   }
 
-  const canRenderControl = (setting) => {
+  const canRenderControl = setting => {
     const control = getControl(setting?.type)
     if (!control) {
       return false
@@ -95,7 +95,7 @@
     return true
   }
 
-  const onInstanceNameChange = (name) => {
+  const onInstanceNameChange = name => {
     onChange("_instanceName", name)
   }
 
@@ -103,13 +103,13 @@
     const form = findClosestMatchingComponent(
       $currentAsset.props,
       componentInstance._id,
-      (component) => component._component.endsWith("/form")
+      component => component._component.endsWith("/form")
     )
     const dataSource = form?.dataSource
     const fields = makeDatasourceFormComponents(dataSource)
     onChange(
       "_children",
-      fields.map((field) => field.json())
+      fields.map(field => field.json())
     )
   }
 </script>
@@ -123,7 +123,7 @@
         label={def.label}
         key={def.key}
         value={get(assetInstance, def.key)}
-        onChange={(val) => onScreenPropChange(def.key, val)}
+        onChange={val => onScreenPropChange(def.key, val)}
       />
     {/each}
   {/if}
@@ -150,7 +150,7 @@
           value={componentInstance[setting.key] ??
             componentInstance[setting.key]?.defaultValue}
           {componentInstance}
-          onChange={(val) => onChange(setting.key, val)}
+          onChange={val => onChange(setting.key, val)}
           props={{ options: setting.options, placeholder: setting.placeholder }}
         />
       {/if}

packages/builder/src/components/feedback/FeedbackNavLink.svelte

@@ -13,7 +13,7 @@
 
   onMount(() => {
     const interval = setInterval(() => {
-      store.update((state) => {
+      store.update(state => {
         state.highlightFeedbackIcon = analytics.highlightFeedbackIcon()
         return state
       })

packages/builder/src/components/integration/QueryEditor.svelte

@@ -138,7 +138,7 @@
 
     editor = CodeMirror.fromTextArea(refs.editor, opts)
 
-    editor.on("change", (instance) => {
+    editor.on("change", instance => {
       if (!updating_externally) {
         const value = instance.getValue()
         dispatch("change", { value })
@@ -164,7 +164,7 @@
   }
 
   function sleep(ms) {
-    return new Promise((fulfil) => setTimeout(fulfil, ms))
+    return new Promise(fulfil => setTimeout(fulfil, ms))
   }
 </script>
 

packages/builder/src/components/integration/QueryParameterBuilder.svelte

@@ -64,7 +64,7 @@
           title={`Query parameter "${parameter.name}"`}
           placeholder="Value"
           thin
-          on:change={(evt) => onBindingChange(parameter.name, evt.detail)}
+          on:change={evt => onBindingChange(parameter.name, evt.detail)}
           value={runtimeToReadableBinding(
             bindings,
             customParams?.[parameter.name]

packages/builder/src/components/integration/QueryViewer.svelte

@@ -33,7 +33,7 @@
     { label: "Datetime", value: "DATETIME" },
   ]
 
-  $: datasource = $datasources.list.find((ds) => ds._id === query.datasourceId)
+  $: datasource = $datasources.list.find(ds => ds._id === query.datasourceId)
   $: query.schema = fields.reduce(
     (acc, next) => ({
       ...acc,
@@ -89,7 +89,7 @@
 
       // Assume all the fields are strings and create a basic schema from the
       // unique fields returned by the server
-      fields = json.schemaFields.map((field) => ({
+      fields = json.schemaFields.map(field => ({
         name: field,
         type: "STRING",
       }))
@@ -126,7 +126,7 @@
         <Select
           bind:value={query.queryVerb}
           options={Object.keys(queryConfig)}
-          getOptionLabel={(verb) =>
+          getOptionLabel={verb =>
             queryConfig[verb]?.displayName || capitalise(verb)}
         />
       </div>

packages/builder/src/components/settings/tabs/APIKeys.svelte

@@ -36,7 +36,11 @@
 
 <div class="container">
   <Input
+<<<<<<< HEAD
     on:change={(e) => updateKey(["budibase", e.detail])}
+=======
+    on:change={e => updateKey(["budibase", e.detail])}
+>>>>>>> 900637c221e4034babd21d69dcaa71b360a2adb2
     value={keys.budibase}
     label="Budibase Cloud API Key"
   />

packages/builder/src/components/start/CreateAppModal.svelte

@@ -47,9 +47,9 @@
         .test(
           "non-existing-app-name",
           "App with same name already exists. Please try another app name.",
-          (value) =>
+          value =>
             !existingAppNames.some(
-              (appName) => appName.toLowerCase() === value.toLowerCase()
+              appName => appName.toLowerCase() === value.toLowerCase()
             )
         )
     }
@@ -57,11 +57,11 @@
 
   const checkValidity = async (values, validator) => {
     const obj = object().shape(validator)
-    Object.keys(validator).forEach((key) => ($errors[key] = null))
+    Object.keys(validator).forEach(key => ($errors[key] = null))
     try {
       await obj.validate(values, { abortEarly: false })
     } catch (validationErrors) {
-      validationErrors.inner.forEach((error) => {
+      validationErrors.inner.forEach(error => {
         $errors[error.path] = capitalise(error.message)
       })
     }

packages/builder/src/components/start/Steps/Info.svelte

@@ -14,7 +14,7 @@
 
   function handleFile(evt) {
     const fileArray = Array.from(evt.target.files)
-    if (fileArray.some((file) => file.size >= FILE_SIZE_LIMIT)) {
+    if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) {
       notifications.error(
         `Files cannot exceed ${
           FILE_SIZE_LIMIT / BYTES_IN_MB

packages/builder/src/components/start/Steps/User.svelte

@@ -15,8 +15,8 @@
       { label: "Admin", value: "ADMIN" },
       { label: "Power User", value: "POWER_USER" },
     ]}
-    getOptionLabel={(option) => option.label}
+    getOptionLabel={option => option.label}
-    getOptionValue={(option) => option.value}
+    getOptionValue={option => option.value}
     error={$errors.roleId}
   />
 </div>

packages/builder/src/constants/completions.js

@@ -3,7 +3,7 @@ import { getManifest } from "@budibase/string-templates"
 export function handlebarsCompletions() {
   const manifest = getManifest()
 
-  return Object.keys(manifest).flatMap((key) =>
+  return Object.keys(manifest).flatMap(key =>
     Object.entries(manifest[key]).map(([helperName, helperConfig]) => ({
       text: helperName,
       path: helperName,

packages/builder/src/helpers.js

@@ -1,6 +1,6 @@
 import { last, flow } from "lodash/fp"
 
-export const buildStyle = (styles) => {
+export const buildStyle = styles => {
   let str = ""
   for (let s in styles) {
     if (styles[s]) {
@@ -11,15 +11,14 @@ export const buildStyle = (styles) => {
   return str
 }
 
-export const convertCamel = (str) => {
+export const convertCamel = str => {
-  return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+  return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
 }
 
 export const pipe = (arg, funcs) => flow(funcs)(arg)
 
-export const capitalise = (s) =>
+export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
-  s.substring(0, 1).toUpperCase() + s.substring(1)
 
-export const get_name = (s) => (!s ? "" : last(s.split("/")))
+export const get_name = s => (!s ? "" : last(s.split("/")))
 
-export const get_capitalised_name = (name) => pipe(name, [get_name, capitalise])
+export const get_capitalised_name = name => pipe(name, [get_name, capitalise])

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

@@ -9,9 +9,7 @@
 
   let unsaved = false
 
-  $: datasource = $datasources.list.find(
+  $: datasource = $datasources.list.find(ds => ds._id === $datasources.selected)
-    (ds) => ds._id === $datasources.selected
-  )
   $: integration = datasource && $integrations[datasource.source]
 
   async function saveDatasource() {
@@ -74,7 +72,7 @@
         <Button secondary on:click={() => $goto("./new")}>Add Query</Button>
       </div>
       <div class="query-list">
-        {#each $queries.list.filter((query) => query.datasourceId === datasource._id) as query}
+        {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
           <div class="query-list-item" on:click={() => onClickQuery(query)}>
             <p class="query-name">{query.name}</p>
             <p>{capitalise(query.queryVerb)}</p>

packages/builder/src/stores/backend/auth.js

@@ -13,12 +13,12 @@ export function createAuthStore() {
   const { subscribe, set } = writable(null)
 
   checkAuth()
-    .then((user) => set({ user }))
+    .then(user => set({ user }))
     .catch(() => set({ user: null }))
 
   return {
     subscribe,
-    login: async (creds) => {
+    login: async creds => {
       const response = await api.post(`/api/admin/auth`, creds)
       const json = await response.json()
       if (response.status === 200) {
@@ -36,7 +36,7 @@ export function createAuthStore() {
       await response.json()
       set({ user: null })
     },
-    createUser: async (user) => {
+    createUser: async user => {
       const response = await api.post(`/api/admin/users`, user)
       if (response.status !== 200) {
         throw "Unable to create user"

packages/builder/src/stores/backend/datasources.js

@@ -21,19 +21,19 @@ export function createDatasourcesStore() {
     fetch: async () => {
       const response = await api.get(`/api/datasources`)
       const json = await response.json()
-      update((state) => ({ ...state, list: json }))
+      update(state => ({ ...state, list: json }))
       return json
     },
-    select: async (datasourceId) => {
+    select: async datasourceId => {
-      update((state) => ({ ...state, selected: datasourceId }))
+      update(state => ({ ...state, selected: datasourceId }))
-      queries.update((state) => ({ ...state, selected: null }))
+      queries.update(state => ({ ...state, selected: null }))
     },
-    save: async (datasource) => {
+    save: async datasource => {
       const response = await api.post("/api/datasources", datasource)
       const json = await response.json()
 
-      update((state) => {
+      update(state => {
-        const currentIdx = state.list.findIndex((ds) => ds._id === json._id)
+        const currentIdx = state.list.findIndex(ds => ds._id === json._id)
 
         const sources = state.list
 
@@ -47,13 +47,13 @@ export function createDatasourcesStore() {
       })
       return json
     },
-    delete: async (datasource) => {
+    delete: async datasource => {
       const response = await api.delete(
         `/api/datasources/${datasource._id}/${datasource._rev}`
       )
-      update((state) => {
+      update(state => {
         const sources = state.list.filter(
-          (existing) => existing._id !== datasource._id
+          existing => existing._id !== datasource._id
         )
         return { list: sources, selected: null }
       })

packages/builder/src/stores/backend/permissions.js

@@ -6,7 +6,7 @@ export function createPermissionStore() {
 
   return {
     subscribe,
-    forResource: async (resourceId) => {
+    forResource: async resourceId => {
       const response = await api.get(`/api/permission/${resourceId}`)
       const json = await response.json()
       return json

packages/builder/src/stores/backend/queries.js

@@ -17,13 +17,13 @@ export function createQueriesStore() {
     fetch: async () => {
       const response = await api.get(`/api/queries`)
       const json = await response.json()
-      update((state) => ({ ...state, list: json }))
+      update(state => ({ ...state, list: json }))
       return json
     },
     save: async (datasourceId, query) => {
       const _integrations = get(integrations)
       const dataSource = get(datasources).list.filter(
-        (ds) => ds._id === datasourceId
+        ds => ds._id === datasourceId
       )
       // check if readable attribute is found
       if (dataSource.length !== 0) {
@@ -39,10 +39,8 @@ export function createQueriesStore() {
         throw new Error("Failed saving query.")
       }
       const json = await response.json()
-      update((state) => {
+      update(state => {
-        const currentIdx = state.list.findIndex(
+        const currentIdx = state.list.findIndex(query => query._id === json._id)
-          (query) => query._id === json._id
-        )
 
         const queries = state.list
 
@@ -55,19 +53,19 @@ export function createQueriesStore() {
       })
       return json
     },
-    select: (query) => {
+    select: query => {
-      update((state) => ({ ...state, selected: query._id }))
+      update(state => ({ ...state, selected: query._id }))
-      datasources.update((state) => ({
+      datasources.update(state => ({
         ...state,
         selected: query.datasourceId,
       }))
     },
-    delete: async (query) => {
+    delete: async query => {
       const response = await api.delete(
         `/api/queries/${query._id}/${query._rev}`
       )
-      update((state) => {
+      update(state => {
-        state.list = state.list.filter((existing) => existing._id !== query._id)
+        state.list = state.list.filter(existing => existing._id !== query._id)
         if (state.selected === query._id) {
           state.selected = null
         }

packages/builder/src/stores/backend/roles.js

@@ -9,12 +9,12 @@ export function createRolesStore() {
     fetch: async () => {
       set(await getRoles())
     },
-    delete: async (role) => {
+    delete: async role => {
       const response = await api.delete(`/api/roles/${role._id}/${role._rev}`)
-      update((state) => state.filter((existing) => existing._id !== role._id))
+      update(state => state.filter(existing => existing._id !== role._id))
       return response
     },
-    save: async (role) => {
+    save: async role => {
       const response = await api.post("/api/roles", role)
       set(await getRoles())
       return response