Add explicit prettier options

.prettierrc

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

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,7 @@
 
   function group(element) {
     const buttons = Array.from(element.getElementsByTagName("button"))
-    buttons.forEach((button) => {
+    buttons.forEach(button => {
       button.classList.add("spectrum-ButtonGroup-item")
     })
   }

packages/bbui/src/Form/Checkbox.svelte

@@ -11,7 +11,7 @@
   export let error = null
 
   const dispatch = createEventDispatcher()
-  const onChange = (e) => {
+  const onChange = e => {
     value = e.detail
     dispatch("change", e.detail)
   }

packages/bbui/src/Form/Combobox.svelte

@@ -10,11 +10,11 @@
   export let error = null
   export let placeholder = "Choose an option"
   export let options = []
-  export let getOptionLabel = (option) => extractProperty(option, "label")
+  export let getOptionLabel = option => extractProperty(option, "label")
-  export let getOptionValue = (option) => extractProperty(option, "value")
+  export let getOptionValue = option => extractProperty(option, "value")
 
   const dispatch = createEventDispatcher()
-  const onChange = (e) => {
+  const onChange = e => {
     value = e.detail
     dispatch("change", e.detail)
   }

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

@@ -10,7 +10,7 @@
   export let disabled = false
 
   const dispatch = createEventDispatcher()
-  const onChange = (event) => {
+  const onChange = event => {
     dispatch("change", event.target.checked)
   }
 </script>

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

@@ -11,8 +11,8 @@
   export let disabled = false
   export let error = null
   export let options = []
-  export let getOptionLabel = (option) => option
+  export let getOptionLabel = option => option
-  export let getOptionValue = (option) => option
+  export let getOptionValue = option => option
 
   const dispatch = createEventDispatcher()
   let open = false
@@ -31,16 +31,16 @@
     }
 
     // Render the label if the selected option is found, otherwise raw value
-    const selected = options.find((option) => getOptionValue(option) === value)
+    const selected = options.find(option => getOptionValue(option) === value)
     return selected ? getOptionLabel(selected) : value
   }
 
-  const selectOption = (value) => {
+  const selectOption = value => {
     dispatch("change", value)
     open = false
   }
 
-  const onChange = (e) => {
+  const onChange = e => {
     selectOption(e.target.value)
   }
 </script>

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

@@ -27,12 +27,12 @@
     wrap: true,
   }
 
-  const handleChange = (event) => {
+  const handleChange = event => {
     const [dates] = event.detail
     dispatch("change", dates[0])
   }
 
-  const clearDateOnBackspace = (event) => {
+  const clearDateOnBackspace = event => {
     if (["Backspace", "Clear", "Delete"].includes(event.key)) {
       dispatch("change", null)
       flatpickr.close()
@@ -53,7 +53,7 @@
     // We need to blur both because the focus styling does not get properly
     // applied.
     const els = document.querySelectorAll(`#${flatpickrId} input`)
-    els.forEach((el) => el.blur())
+    els.forEach(el => el.blur())
   }
 </script>
 

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

@@ -28,7 +28,7 @@
     "bmp",
     "jfif",
   ]
-  const onChange = (event) => {
+  const onChange = event => {
     dispatch("change", event.target.checked)
   }
 
@@ -42,7 +42,7 @@
   async function processFileList(fileList) {
     if (
       handleFileTooLarge &&
-      Array.from(fileList).some((file) => file.size >= fileSizeLimit)
+      Array.from(fileList).some(file => file.size >= fileSizeLimit)
     ) {
       handleFileTooLarge(fileSizeLimit, value)
       return

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

@@ -8,14 +8,14 @@
   export let disabled = false
   export let error = null
   export let options = []
-  export let getOptionLabel = (option) => option
+  export let getOptionLabel = option => option
-  export let getOptionValue = (option) => option
+  export let getOptionValue = option => option
 
   const dispatch = createEventDispatcher()
   $: selectedLookupMap = getSelectedLookupMap(value)
   $: optionLookupMap = getOptionLookupMap(options)
   $: fieldText = getFieldText(value, optionLookupMap, placeholder)
-  $: isOptionSelected = (optionValue) => selectedLookupMap[optionValue] === true
+  $: isOptionSelected = optionValue => selectedLookupMap[optionValue] === true
   $: toggleOption = makeToggleOption(selectedLookupMap, value)
 
   const getFieldText = (value, map, placeholder) => {
@@ -23,17 +23,17 @@
       if (!map) {
         return ""
       }
-      const vals = value.map((option) => map[option] || option).join(", ")
+      const vals = value.map(option => map[option] || option).join(", ")
       return `(${value.length}) ${vals}`
     } else {
       return placeholder || "Choose some options"
     }
   }
 
-  const getSelectedLookupMap = (value) => {
+  const getSelectedLookupMap = value => {
     let map = {}
     if (value?.length) {
-      value.forEach((option) => {
+      value.forEach(option => {
         if (option) {
           map[option] = true
         }
@@ -42,7 +42,7 @@
     return map
   }
 
-  const getOptionLookupMap = (options) => {
+  const getOptionLookupMap = options => {
     let map = null
     if (options?.length) {
       map = {}
@@ -57,9 +57,9 @@
   }
 
   const makeToggleOption = (map, value) => {
-    return (optionValue) => {
+    return optionValue => {
       if (map[optionValue]) {
-        const filtered = value.filter((option) => option !== optionValue)
+        const filtered = value.filter(option => option !== optionValue)
         dispatch("change", filtered)
       } else {
         dispatch("change", [...value, optionValue])

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

@@ -15,13 +15,13 @@
   export let options = []
   export let isOptionSelected = () => false
   export let onSelectOption = () => {}
-  export let getOptionLabel = (option) => option
+  export let getOptionLabel = option => option
-  export let getOptionValue = (option) => option
+  export let getOptionValue = option => option
   export let open = false
   export let readonly = false
 
   const dispatch = createEventDispatcher()
-  const onClick = (e) => {
+  const onClick = e => {
     dispatch("click")
     if (readonly) {
       return

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

@@ -8,11 +8,11 @@
   export let options = []
   export let error = null
   export let disabled = false
-  export let getOptionLabel = (option) => option
+  export let getOptionLabel = option => option
-  export let getOptionValue = (option) => option
+  export let getOptionValue = option => option
 
   const dispatch = createEventDispatcher()
-  const onChange = (e) => dispatch("change", e.target.value)
+  const onChange = e => dispatch("change", e.target.value)
 </script>
 
 <div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>

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

@@ -10,7 +10,7 @@
   const dispatch = createEventDispatcher()
   let focus = false
 
-  const updateValue = (value) => {
+  const updateValue = value => {
     dispatch("change", value)
   }
 
@@ -18,12 +18,12 @@
     focus = true
   }
 
-  const onBlur = (event) => {
+  const onBlur = event => {
     focus = false
     updateValue(event.target.value)
   }
 
-  const updateValueOnEnter = (event) => {
+  const updateValueOnEnter = event => {
     if (event.key === "Enter") {
       updateValue(event.target.value)
     }

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

@@ -8,8 +8,8 @@
   export let disabled = false
   export let error = null
   export let options = []
-  export let getOptionLabel = (option) => option
+  export let getOptionLabel = option => option
-  export let getOptionValue = (option) => option
+  export let getOptionValue = option => option
   export let readonly = false
 
   const dispatch = createEventDispatcher()
@@ -34,7 +34,7 @@
     return index !== -1 ? getOptionLabel(options[index], index) : value
   }
 
-  const selectOption = (value) => {
+  const selectOption = value => {
     dispatch("change", value)
     open = false
   }
@@ -53,6 +53,6 @@
   {getOptionValue}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder}
-  isOptionSelected={(option) => option === value}
+  isOptionSelected={option => option === value}
   onSelectOption={selectOption}
 />

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

@@ -9,7 +9,7 @@
   export let disabled = false
 
   const dispatch = createEventDispatcher()
-  const onChange = (event) => {
+  const onChange = event => {
     dispatch("change", event.target.checked)
   }
 </script>

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

@@ -15,7 +15,7 @@
   let focus = false
   let textarea
   const dispatch = createEventDispatcher()
-  const onChange = (event) => {
+  const onChange = event => {
     dispatch("change", event.target.value)
     focus = false
   }

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

@@ -13,7 +13,7 @@
   const dispatch = createEventDispatcher()
   let focus = false
 
-  const updateValue = (value) => {
+  const updateValue = value => {
     if (readonly) {
       return
     }
@@ -31,7 +31,7 @@
     focus = true
   }
 
-  const onBlur = (event) => {
+  const onBlur = event => {
     if (readonly) {
       return
     }
@@ -39,7 +39,7 @@
     updateValue(event.target.value)
   }
 
-  const updateValueOnEnter = (event) => {
+  const updateValueOnEnter = event => {
     if (readonly) {
       return
     }

packages/bbui/src/Form/DatePicker.svelte

@@ -12,7 +12,7 @@
   export let placeholder = null
 
   const dispatch = createEventDispatcher()
-  const onChange = (e) => {
+  const onChange = e => {
     value = e.detail
     dispatch("change", e.detail)
   }

packages/bbui/src/Form/Dropzone.svelte

@@ -13,7 +13,7 @@
   export let handleFileTooLarge = undefined
 
   const dispatch = createEventDispatcher()
-  const onChange = (e) => {
+  const onChange = e => {
     value = e.detail
     dispatch("change", e.detail)
   }

packages/bbui/src/Form/Input.svelte

@@ -13,7 +13,7 @@
   export let error = null
 
   const dispatch = createEventDispatcher()
-  const onChange = (e) => {
+  const onChange = e => {
     value = e.detail
     dispatch("change", e.detail)
   }

packages/bbui/src/Form/Multiselect.svelte

@@ -11,11 +11,11 @@
   export let error = null
   export let placeholder = null
   export let options = []
-  export let getOptionLabel = (option) => option
+  export let getOptionLabel = option => option
-  export let getOptionValue = (option) => option
+  export let getOptionValue = option => option
 
   const dispatch = createEventDispatcher()
-  const onChange = (e) => {
+  const onChange = e => {
     value = e.detail
     dispatch("change", e.detail)
   }

packages/bbui/src/Form/RadioGroup.svelte

@@ -9,11 +9,11 @@
   export let labelPosition = "above"
   export let error = null
   export let options = []
-  export let getOptionLabel = (option) => extractProperty(option, "label")
+  export let getOptionLabel = option => extractProperty(option, "label")
-  export let getOptionValue = (option) => extractProperty(option, "value")
+  export let getOptionValue = option => extractProperty(option, "value")
 
   const dispatch = createEventDispatcher()
-  const onChange = (e) => {
+  const onChange = e => {
     value = e.detail
     dispatch("change", e.detail)
   }

packages/bbui/src/Form/Search.svelte

@@ -10,7 +10,7 @@
   export let disabled = false
 
   const dispatch = createEventDispatcher()
-  const onChange = (e) => {
+  const onChange = e => {
     value = e.detail
     dispatch("change", e.detail)
   }

packages/bbui/src/Form/Select.svelte

@@ -11,11 +11,11 @@
   export let error = null
   export let placeholder = "Choose an option"
   export let options = []
-  export let getOptionLabel = (option) => extractProperty(option, "label")
+  export let getOptionLabel = option => extractProperty(option, "label")
-  export let getOptionValue = (option) => extractProperty(option, "value")
+  export let getOptionValue = option => extractProperty(option, "value")
 
   const dispatch = createEventDispatcher()
-  const onChange = (e) => {
+  const onChange = e => {
     value = e.detail
     dispatch("change", e.detail)
   }

packages/bbui/src/Form/TextArea.svelte

@@ -12,7 +12,7 @@
   export let getCaretPosition = null
 
   const dispatch = createEventDispatcher()
-  const onChange = (e) => {
+  const onChange = e => {
     value = e.detail
     dispatch("change", e.detail)
   }

packages/bbui/src/Form/Toggle.svelte

@@ -11,7 +11,7 @@
   export let error = null
 
   const dispatch = createEventDispatcher()
-  const onChange = (e) => {
+  const onChange = e => {
     value = e.detail
     dispatch("change", e.detail)
   }

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/AttachmentRenderer.svelte

@@ -6,7 +6,7 @@
   $: leftover = (value?.length ?? 0) - attachments.length
 
   const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
-  const isImage = (extension) => {
+  const isImage = extension => {
     return imageExtensions.includes(extension?.toLowerCase())
   }
 </script>

packages/bbui/src/Table/CellRenderer.svelte

@@ -22,7 +22,7 @@
     longform: StringRenderer,
   }
   $: type = schema?.type ?? "string"
-  $: customRenderer = customRenderers?.find((x) => x.column === schema?.name)
+  $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
   $: renderer = customRenderer?.component ?? typeMap[type]
 </script>
 

packages/bbui/src/Table/RelationshipRenderer.svelte

@@ -12,7 +12,7 @@
   $: relationships = value?.slice(0, displayLimit) ?? []
   $: leftover = (value?.length ?? 0) - relationships.length
 
-  const onClick = (e) => {
+  const onClick = e => {
     e.stopPropagation()
     dispatch("clickrelationship", {
       tableId: row.tableId,

packages/bbui/src/Table/Table.svelte

@@ -60,7 +60,7 @@
     timeout = null
   }
 
-  const fixSchema = (schema) => {
+  const fixSchema = schema => {
     let fixedSchema = {}
     Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
       if (typeof fieldSchema === "string") {
@@ -110,7 +110,7 @@
     })
   }
 
-  const sortBy = (fieldSchema) => {
+  const sortBy = fieldSchema => {
     if (fieldSchema.sortable === false) {
       return
     }
@@ -122,7 +122,7 @@
     }
   }
 
-  const getDisplayName = (schema) => {
+  const getDisplayName = schema => {
     let name = schema?.displayName
     if (schema && name === undefined) {
       name = schema.name
@@ -155,10 +155,10 @@
         return nameA < nameB ? a : b
       })
       .concat(autoColumns)
-      .map((column) => column.name)
+      .map(column => column.name)
   }
 
-  const onScroll = (event) => {
+  const onScroll = event => {
     nextScrollTop = event.target.scrollTop
     if (timeout) {
       return
@@ -169,7 +169,7 @@
     }, 50)
   }
 
-  const calculateFirstVisibleRow = (scrollTop) => {
+  const calculateFirstVisibleRow = scrollTop => {
     return Math.max(Math.floor(scrollTop / (rowHeight + 1)) - rowPreload, 0)
   }
 
@@ -190,12 +190,12 @@
     dispatch("editrow", row)
   }
 
-  const toggleSelectRow = (row) => {
+  const toggleSelectRow = row => {
     if (!allowSelectRows) {
       return
     }
     if (selectedRows.includes(row)) {
-      selectedRows = selectedRows.filter((selectedRow) => selectedRow !== row)
+      selectedRows = selectedRows.filter(selectedRow => selectedRow !== row)
     } else {
       selectedRows = [...selectedRows, row]
     }
@@ -257,7 +257,7 @@
                         <svg
                           class="spectrum-Icon spectrum-Table-editIcon"
                           focusable="false"
-                          on:click={(e) => editColumn(e, field)}
+                          on:click={e => editColumn(e, field)}
                         >
                           <use xlink:href="#spectrum-icon-18-Edit" />
                         </svg>
@@ -286,7 +286,7 @@
                             data={row}
                             selected={selectedRows.includes(row)}
                             onToggleSelection={() => toggleSelectRow(row)}
-                            onEdit={(e) => editRow(e, row)}
+                            onEdit={e => editRow(e, row)}
                             {allowSelectRows}
                             {allowEditRows}
                           />

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/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" }
           }
@@ -302,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]
@@ -317,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 }
   })
@@ -348,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
     })
@@ -358,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/AutomationBuilder.svelte

@@ -6,7 +6,7 @@
   $: automation = $automationStore.selectedAutomation?.automation
 
   function onSelect(block) {
-    automationStore.update((state) => {
+    automationStore.update(state => {
       state.selectedBlock = block
       return state
     })

packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte

@@ -33,7 +33,7 @@
   let webhookModal
   $: selectedTab = selectedIndex == null ? null : tabs[selectedIndex].value
   $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
-  $: blocks = sortBy((entry) => entry[1].name)(
+  $: blocks = sortBy(entry => entry[1].name)(
     Object.entries($automationStore.blockDefinitions[selectedTab] ?? {})
   )
 

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

@@ -16,7 +16,7 @@
     const tableId = inputs.tableId || inputs.row?.tableId
     if (tableId) {
       enrichedInputs.enriched.table = $tables.list.find(
-        (table) => table._id === tableId
+        table => table._id === tableId
       )
     }
     return enrichedInputs
@@ -30,8 +30,8 @@
 
     // Extract schema paths for any input bindings
     let inputPaths = formattedTagline.match(/{{\s*\S+\s*}}/g) || []
-    inputPaths = inputPaths.map((path) => path.replace(/[{}]/g, "").trim())
+    inputPaths = inputPaths.map(path => path.replace(/[{}]/g, "").trim())
-    const schemaPaths = inputPaths.map((path) =>
+    const schemaPaths = inputPaths.map(path =>
       path.replace(/\./g, ".properties.")
     )
 

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

@@ -10,7 +10,7 @@
   $: selected = $automationStore.selectedBlock?.id === block.id
   $: steps =
     $automationStore.selectedAutomation?.automation?.definition?.steps ?? []
-  $: blockIdx = steps.findIndex((step) => step.id === block.id)
+  $: blockIdx = steps.findIndex(step => step.id === block.id)
   $: allowDeleteTrigger = !steps.length
 
   function deleteStep() {

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

@@ -27,7 +27,7 @@
     if (automation.trigger) {
       allSteps = [automation.trigger, ...allSteps]
     }
-    const blockIdx = allSteps.findIndex((step) => step.id === block.id)
+    const blockIdx = allSteps.findIndex(step => step.id === block.id)
 
     // Extract all outputs from all previous steps as available bindings
     let bindings = []
@@ -67,7 +67,7 @@
           panel={AutomationBindingPanel}
           type={"email"}
           value={block.inputs[key]}
-          on:change={(e) => (block.inputs[key] = e.detail)}
+          on:change={e => (block.inputs[key] = e.detail)}
           {bindings}
         />
       {:else if value.customType === "table"}
@@ -83,7 +83,7 @@
           panel={AutomationBindingPanel}
           type={value.customType}
           value={block.inputs[key]}
-          on:change={(e) => (block.inputs[key] = e.detail)}
+          on:change={e => (block.inputs[key] = e.detail)}
           {bindings}
         />
       {/if}

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

@@ -7,7 +7,7 @@
   export let value
   export let bindings
 
-  $: table = $tables.list.find((table) => table._id === value?.tableId)
+  $: table = $tables.list.find(table => table._id === value?.tableId)
   $: schemaFields = Object.entries(table?.schema ?? {})
 
   // Ensure any nullish tableId values get set to empty string so
@@ -22,8 +22,8 @@
 <Select
   bind:value={value.tableId}
   options={$tables.list}
-  getOptionLabel={(table) => table.name}
+  getOptionLabel={table => table.name}
-  getOptionValue={(table) => table._id}
+  getOptionValue={table => table._id}
 />
 
 {#if schemaFields.length}
@@ -40,7 +40,7 @@
           <DrawerBindableInput
             panel={AutomationBindingPanel}
             value={value[field]}
-            on:change={(e) => (value[field] = e.detail)}
+            on:change={e => (value[field] = e.detail)}
             label={field}
             type="string"
             {bindings}

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

@@ -37,14 +37,14 @@
     value = newValues
   }
 
-  const fieldNameChanged = (originalName) => (e) => {
+  const fieldNameChanged = originalName => e => {
     // reconstruct using fieldsArray, so field order is preserved
     let entries = [...fieldsArray]
     const newName = e.detail
     if (newName) {
-      entries.find((f) => f.name === originalName).name = newName
+      entries.find(f => f.name === originalName).name = newName
     } else {
-      entries = entries.filter((f) => f.name !== originalName)
+      entries = entries.filter(f => f.name !== originalName)
     }
     value = entries.reduce((newVals, current) => {
       newVals[current.name] = current.type
@@ -66,7 +66,7 @@
       />
       <Select
         value={field.type}
-        on:change={(e) => (value[field.name] = e.target.value)}
+        on:change={e => (value[field.name] = e.target.value)}
         options={typeOptions}
       />
       <i

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

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

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

@@ -30,7 +30,7 @@
     if ($views.selected?.name?.startsWith("all_")) {
       loading = true
       const loadingTableId = $tables.selected?._id
-      api.fetchDataForView($views.selected).then((rows) => {
+      api.fetchDataForView($views.selected).then(rows => {
         loading = false
 
         // If we started a slow request then quickly change table, sometimes

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

@@ -12,9 +12,9 @@
 
   $: data = row?.[fieldName] ?? []
   $: linkedTableId = data?.length ? data[0].tableId : null
-  $: linkedTable = $tables.list.find((table) => table._id === linkedTableId)
+  $: linkedTable = $tables.list.find(table => table._id === linkedTableId)
   $: schema = linkedTable?.schema
-  $: table = $tables.list.find((table) => table._id === tableId)
+  $: table = $tables.list.find(table => table._id === tableId)
   $: fetchData(tableId, rowId)
   $: {
     let rowLabel = row?.[table?.primaryDisplay]

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/ViewDataTable.svelte

@@ -28,9 +28,9 @@
 
   async function fetchViewData(name, field, groupBy, calculation) {
     const _tables = $tables.list
-    const allTableViews = _tables.map((table) => table.views)
+    const allTableViews = _tables.map(table => table.views)
     const thisView = allTableViews.filter(
-      (views) => views != null && views[name] != null
+      views => views != null && views[name] != null
     )[0]
     // don't fetch view data if the view no longer exists
     if (!thisView) {

packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte

@@ -3,7 +3,7 @@
 
   export let value
 
-  $: role = $roles.find((role) => role._id === value)
+  $: role = $roles.find(role => role._id === value)
   $: roleName = role?.name ?? "Unknown role"
 </script>
 

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

@@ -25,7 +25,7 @@
   $: fields =
     viewTable &&
     Object.keys(viewTable.schema).filter(
-      (field) =>
+      field =>
         view.calculation === "count" ||
         // don't want to perform calculations based on auto ID
         (viewTable.schema[field].type === "number" &&
@@ -50,8 +50,8 @@
     <Select
       bind:value={view.calculation}
       options={CALCULATIONS}
-      getOptionLabel={(x) => x.name}
+      getOptionLabel={x => x.name}
-      getOptionValue={(x) => x.key}
+      getOptionValue={x => x.key}
     />
     {#if view.calculation}
       <Label>Of</Label>

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

@@ -49,7 +49,7 @@
   let deletion
 
   $: tableOptions = $tables.list.filter(
-    (table) => table._id !== $tables.draft._id
+    table => table._id !== $tables.draft._id
   )
   $: required = !!field?.constraints?.presence || primaryDisplay
   $: uneditable =
@@ -60,7 +60,7 @@
     !field.name ||
     (field.type === LINK_TYPE && !field.tableId) ||
     Object.keys($tables.draft?.schema ?? {}).some(
-      (key) => key !== originalName && key === field.name
+      key => key !== originalName && key === field.name
     )
 
   // used to select what different options can be displayed for column type
@@ -154,7 +154,7 @@
     if (!field || !field.tableId) {
       return null
     }
-    const linkTable = tableOptions.find((table) => table._id === field.tableId)
+    const linkTable = tableOptions.find(table => table._id === field.tableId)
     if (!linkTable) {
       return null
     }
@@ -197,8 +197,8 @@
       ...Object.values(fieldDefinitions),
       { name: "Auto Column", type: AUTO_COL },
     ]}
-    getOptionLabel={(field) => field.name}
+    getOptionLabel={field => field.name}
-    getOptionValue={(field) => field.type}
+    getOptionValue={field => field.type}
   />
 
   {#if canBeRequired || canBeDisplay}
@@ -274,8 +274,8 @@
       label="Table"
       bind:value={field.tableId}
       options={tableOptions}
-      getOptionLabel={(table) => table.name}
+      getOptionLabel={table => table.name}
-      getOptionValue={(table) => table._id}
+      getOptionValue={table => table._id}
     />
     {#if relationshipOptions && relationshipOptions.length > 0}
       <RadioGroup
@@ -283,8 +283,8 @@
         label="Define the relationship"
         bind:value={field.relationshipType}
         options={relationshipOptions}
-        getOptionLabel={(option) => option.name}
+        getOptionLabel={option => option.name}
-        getOptionValue={(option) => option.value}
+        getOptionValue={option => option.value}
       />
     {/if}
     <Input label={`Column name in other table`} bind:value={field.fieldName} />
@@ -292,10 +292,10 @@
     <Select
       label="Auto Column Type"
       value={field.subtype}
-      on:change={(e) => (field.subtype = e.detail)}
+      on:change={e => (field.subtype = e.detail)}
       options={Object.entries(getAutoColumnInformation())}
-      getOptionLabel={(option) => option[1].name}
+      getOptionLabel={option => option[1].name}
-      getOptionValue={(option) => option[0]}
+      getOptionValue={option => option[0]}
     />
   {/if}
 

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

@@ -12,7 +12,7 @@
 
   $: creating = row?._id == null
   $: table = row.tableId
-    ? $tables.list.find((table) => table._id === row?.tableId)
+    ? $tables.list.find(table => table._id === row?.tableId)
     : $tables.selected
   $: tableSchema = Object.entries(table?.schema ?? {})
 

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

@@ -13,13 +13,13 @@
 
   $: creating = row?._id == null
   $: table = row.tableId
-    ? $tables.list.find((table) => table._id === row?.tableId)
+    ? $tables.list.find(table => table._id === row?.tableId)
     : $tables.selected
   $: tableSchema = getUserSchema(table)
   $: customSchemaKeys = getCustomSchemaKeys(tableSchema)
   $: if (!row.status) row.status = "active"
 
-  const getUserSchema = (table) => {
+  const getUserSchema = table => {
     let schema = table?.schema ?? {}
     if (schema.username) {
       schema.username.name = "Username"
@@ -27,7 +27,7 @@
     return schema
   }
 
-  const getCustomSchemaKeys = (schema) => {
+  const getCustomSchemaKeys = schema => {
     let customSchema = { ...schema }
     delete customSchema["email"]
     delete customSchema["roleId"]
@@ -55,7 +55,7 @@
     )
     if (rowResponse.errors) {
       if (Array.isArray(rowResponse.errors)) {
-        errors = rowResponse.errors.map((error) => ({ message: error }))
+        errors = rowResponse.errors.map(error => ({ message: error }))
       } else {
         errors = Object.entries(rowResponse.errors)
           .map(([key, error]) => ({ dataPath: key, message: error }))
@@ -94,8 +94,8 @@
     data-cy="roleId-select"
     bind:value={row.roleId}
     options={$roles}
-    getOptionLabel={(role) => role.name}
+    getOptionLabel={role => role.name}
-    getOptionValue={(role) => role._id}
+    getOptionValue={role => role._id}
   />
   <Select
     label="Status"
@@ -104,8 +104,8 @@
       { label: "Active", value: "active" },
       { label: "Inactive", value: "inactive" },
     ]}
-    getOptionLabel={(status) => status.label}
+    getOptionLabel={status => status.label}
-    getOptionValue={(status) => status.value}
+    getOptionValue={status => status.value}
   />
   {#each customSchemaKeys as [key, meta]}
     {#if !meta.autocolumn}

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

@@ -10,7 +10,7 @@
   let name
   let field
 
-  $: views = $tables.list.flatMap((table) => Object.keys(table.views || {}))
+  $: views = $tables.list.flatMap(table => Object.keys(table.views || {}))
 
   function saveView() {
     if (views.includes(name)) {

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

@@ -11,7 +11,7 @@
   let errors = []
   let builtInRoles = ["Admin", "Power", "Basic", "Public"]
   $: selectedRoleId = selectedRole._id
-  $: otherRoles = $roles.filter((role) => role._id !== selectedRoleId)
+  $: otherRoles = $roles.filter(role => role._id !== selectedRoleId)
   $: isCreating = selectedRoleId == null || selectedRoleId === ""
 
   const fetchBasePermissions = async () => {
@@ -20,9 +20,9 @@
   }
 
   // Changes the selected role
-  const changeRole = (event) => {
+  const changeRole = event => {
     const id = event?.detail
-    const role = $roles.find((role) => role._id === id)
+    const role = $roles.find(role => role._id === id)
     if (role) {
       selectedRole = {
         ...role,
@@ -41,7 +41,7 @@
 
     // Clean up empty strings
     const keys = ["_id", "inherits", "permissionId"]
-    keys.forEach((key) => {
+    keys.forEach(key => {
       if (selectedRole[key] === "") {
         delete selectedRole[key]
       }
@@ -98,8 +98,8 @@
     on:change={changeRole}
     options={$roles}
     placeholder="Create new role"
-    getOptionValue={(role) => role._id}
+    getOptionValue={role => role._id}
-    getOptionLabel={(role) => role.name}
+    getOptionLabel={role => role.name}
   />
   {#if selectedRole}
     <Input
@@ -111,16 +111,16 @@
       label="Inherits Role"
       bind:value={selectedRole.inherits}
       options={otherRoles}
-      getOptionValue={(role) => role._id}
+      getOptionValue={role => role._id}
-      getOptionLabel={(role) => role.name}
+      getOptionLabel={role => role.name}
       placeholder="None"
     />
     <Select
       label="Base Permissions"
       bind:value={selectedRole.permissionId}
       options={basePermissions}
-      getOptionValue={(x) => x._id}
+      getOptionValue={x => x._id}
-      getOptionLabel={(x) => x.name}
+      getOptionLabel={x => x.name}
       placeholder="Choose permissions"
     />
   {/if}

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

@@ -32,7 +32,7 @@
     bind:value={exportFormat}
     options={FORMATS}
     placeholder={null}
-    getOptionLabel={(x) => x.name}
+    getOptionLabel={x => x.name}
-    getOptionValue={(x) => x.key}
+    getOptionValue={x => x.key}
   />
 </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,8 +113,8 @@
     }
   }
 
-  const getOptionLabel = (x) => x.name
+  const getOptionLabel = x => x.name
-  const getOptionValue = (x) => x.key
+  const getOptionValue = x => x.key
 </script>
 
 <ModalContent title="Filter" confirmText="Save" onConfirm={saveView} size="L">
@@ -147,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/GroupByModal.svelte

@@ -10,7 +10,7 @@
   $: fields =
     viewTable &&
     Object.entries(viewTable.schema)
-      .filter((entry) => entry[1].type !== FIELDS.LINK.type)
+      .filter(entry => entry[1].type !== FIELDS.LINK.type)
       .map(([key]) => key)
 
   function saveView() {

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

@@ -14,9 +14,7 @@
   function checkValid(evt) {
     const datasourceName = evt.target.value
     if (
-      $datasources?.list.some(
+      $datasources?.list.some(datasource => datasource.name === datasourceName)
-        (datasource) => datasource.name === datasourceName
-      )
     ) {
       error = `Datasource with name ${datasourceName} already exists. Please choose another name.`
       return

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

@@ -18,7 +18,7 @@
   let schema = {}
   let fields = []
 
-  $: valid = !schema || fields.every((column) => schema[column].success)
+  $: valid = !schema || fields.every(column => schema[column].success)
   $: dataImport = {
     valid,
     schema: buildTableSchema(schema),
@@ -51,7 +51,7 @@
     const parseResult = await response.json()
     schema = parseResult && parseResult.schema
     fields = Object.keys(schema || {}).filter(
-      (key) => schema[key].type !== "omit"
+      key => schema[key].type !== "omit"
     )
 
     // Check primary display is valid
@@ -67,7 +67,7 @@
 
   async 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
@@ -91,7 +91,7 @@
     await validateCSV()
   }
 
-  const handleTypeChange = (column) => (evt) => {
+  const handleTypeChange = column => evt => {
     schema[column].type = evt.detail
     validateCSV()
   }
@@ -128,8 +128,8 @@
           on:change={handleTypeChange(columnName)}
           options={typeOptions}
           placeholder={null}
-          getOptionLabel={(option) => option.label}
+          getOptionLabel={option => option.label}
-          getOptionValue={(option) => option.value}
+          getOptionValue={option => option.value}
         />
         <span class="field-status" class:error={!schema[columnName].success}>
           {schema[columnName].success ? "Success" : "Failure"}

packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte

@@ -18,7 +18,7 @@
     ROW_LIST_TEMPLATE,
   ]
 
-  $: tableNames = $tables.list.map((table) => table.name)
+  $: tableNames = $tables.list.map(table => table.name)
 
   let modal
   let name
@@ -66,8 +66,8 @@
     // Create auto screens
     if (createAutoscreens) {
       const screens = screenTemplates($store, [table])
-        .filter((template) => defaultScreens.includes(template.id))
+        .filter(template => defaultScreens.includes(template.id))
-        .map((template) => template.create())
+        .map(template => template.create())
       for (let screen of screens) {
         // Record the table that created this screen so we can link it later
         screen.autoTableId = table._id
@@ -75,7 +75,7 @@
       }
 
       // Create autolink to newly created list screen
-      const listScreen = screens.find((screen) =>
+      const listScreen = screens.find(screen =>
         screen.props._instanceName.endsWith("List")
       )
       await store.actions.components.links.save(

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

@@ -24,7 +24,7 @@
     bindingDrawer.hide()
   }
 
-  const onChange = (value) => {
+  const onChange = value => {
     dispatch("change", readableToRuntimeBinding(bindings, value))
   }
 </script>
@@ -33,7 +33,7 @@
   <Input
     {label}
     value={readableValue}
-    on:change={(event) => onChange(event.detail)}
+    on:change={event => onChange(event.detail)}
     {placeholder}
   />
   <div class="icon" on:click={bindingDrawer.show}>
@@ -50,7 +50,7 @@
     slot="body"
     value={readableValue}
     close={handleClose}
-    on:update={(event) => (tempValue = event.detail)}
+    on:update={event => (tempValue = event.detail)}
     bindableProperties={bindings}
   />
 </Drawer>

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

@@ -8,12 +8,12 @@
   export let linkedRows = []
 
   let rows = []
-  let linkedIds = (linkedRows || [])?.map((row) => row?._id || row)
+  let linkedIds = (linkedRows || [])?.map(row => row?._id || row)
 
   $: linkedRows = linkedIds
   $: label = capitalise(schema.name)
   $: linkedTableId = schema.tableId
-  $: linkedTable = $tables.list.find((table) => table._id === linkedTableId)
+  $: linkedTable = $tables.list.find(table => table._id === linkedTableId)
   $: fetchRows(linkedTableId)
 
   async function fetchRows(linkedTableId) {
@@ -44,8 +44,8 @@
     value={linkedIds?.[0]}
     options={rows}
     getOptionLabel={getPrettyName}
-    getOptionValue={(row) => row._id}
+    getOptionValue={row => row._id}
-    on:change={(e) => (linkedIds = e.detail ? [e.detail] : [])}
+    on:change={e => (linkedIds = e.detail ? [e.detail] : [])}
     {label}
   />
 {:else}
@@ -54,6 +54,6 @@
     {label}
     options={rows}
     getOptionLabel={getPrettyName}
-    getOptionValue={(row) => row._id}
+    getOptionValue={row => row._id}
   />
 {/if}

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

@@ -5,7 +5,7 @@
   export let values
   export let label
 
-  const inputChanged = (ev) => {
+  const inputChanged = ev => {
     try {
       values = ev.target.value.split("\n")
     } catch (_) {

packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte

@@ -10,7 +10,7 @@
   $: automations = $automationStore.automations
 
   onMount(() => {
-    webhookUrls = automations.map((automation) => {
+    webhookUrls = automations.map(automation => {
       const trigger = automation.definition.trigger
       if (trigger?.stepId === "WEBHOOK" && trigger.inputs) {
         return {

packages/builder/src/components/deploy/DeploymentHistory.svelte

@@ -48,7 +48,7 @@
     for (let incomingDeployment of incoming) {
       if (incomingDeployment.status === DeploymentStatus.FAILURE) {
         const currentDeployment = current.find(
-          (deployment) => deployment._id === incomingDeployment._id
+          deployment => deployment._id === incomingDeployment._id
         )
 
         // We have just been notified of an ongoing deployments failure
@@ -100,7 +100,7 @@
     <header>
       <Heading>Deployment History</Heading>
       <div class="deploy-div">
-        {#if deployments.some((deployment) => deployment.status === DeploymentStatus.SUCCESS)}
+        {#if deployments.some(deployment => deployment.status === DeploymentStatus.SUCCESS)}
           <a target="_blank" href={deploymentUrl}> View Your Deployed App → </a>
           <Button primary on:click={() => modal.show()}>View webhooks</Button>
         {/if}

packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte

@@ -13,7 +13,7 @@
 
   const enrichStructure = (structure, definitions) => {
     let enrichedStructure = []
-    structure.forEach((item) => {
+    structure.forEach(item => {
       if (typeof item === "string") {
         const def = definitions[`@budibase/standard-components/${item}`]
         if (def) {
@@ -33,7 +33,7 @@
     return enrichedStructure
   }
 
-  const onItemChosen = async (item) => {
+  const onItemChosen = async item => {
     if (!item.isCategory) {
       await store.actions.components.create(item.component)
     }

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/ComponentTree.svelte

@@ -11,18 +11,18 @@
   export let level = 0
   export let dragDropStore
 
-  const isScreenslot = (name) => name?.endsWith("screenslot")
+  const isScreenslot = name => name?.endsWith("screenslot")
 
-  const selectComponent = (component) => {
+  const selectComponent = component => {
     store.actions.components.select(component)
   }
 
-  const dragstart = (component) => (e) => {
+  const dragstart = component => e => {
     e.dataTransfer.dropEffect = DropEffect.MOVE
     dragDropStore.actions.dragstart(component)
   }
 
-  const dragover = (component, index) => (e) => {
+  const dragover = (component, index) => e => {
     const definition = store.actions.components.getDefinition(
       component._component
     )

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/ComponentNavigationTree/index.svelte

@@ -17,7 +17,7 @@
     let screenRoleId
 
     // Filter all routes down to only those which match the current role
-    sortedPaths.forEach((path) => {
+    sortedPaths.forEach(path => {
       const config = allRoutes[path]
       Object.entries(config.subpaths).forEach(([subpath, pathConfig]) => {
         Object.entries(pathConfig.screens).forEach(([roleId, screenId]) => {

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