lint ✨

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

@@ -50,7 +50,10 @@
 
   function addBlockToAutomation(stepId, blockDefinition) {
     const newBlock = $automationStore.selectedAutomation.constructBlock(
-      selectedTab, stepId, blockDefinition)
+      selectedTab,
+      stepId,
+      blockDefinition
+    )
     automationStore.actions.addBlockToAutomation(newBlock)
     closePopover()
     if (stepId === "WEBHOOK") {

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

@@ -36,9 +36,7 @@
 </script>
 
 <div class="root">
-  <div class="add-field">
+  <div class="add-field"><i class="ri-add-line" on:click={addField} /></div>
-    <i class="ri-add-line" on:click={addField} />
-  </div>
   <div class="spacer" />
   {#each fieldsArray as field}
     <div class="field">
@@ -57,13 +55,11 @@
         <option>datetime</option>
       </Select>
 
-      <i class="remove-field ri-delete-bin-line"
+      <i
+        class="remove-field ri-delete-bin-line"
         on:click={() => removeField(field.name)} />
-
-      
     </div>
   {/each}
-
 </div>
 
 <style>
@@ -105,7 +101,8 @@
   }
 
   .field :global(input) {
-    padding: var(--spacing-m) var(--spacing-xl) var(--spacing-xs) var(--spacing-m);
+    padding: var(--spacing-m) var(--spacing-xl) var(--spacing-xs)
+      var(--spacing-m);
     font-size: var(--font-size-s);
     font-weight: bold;
   }
@@ -129,5 +126,4 @@
   .add-field > i {
     cursor: pointer;
   }
-
 </style>

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

@@ -16,7 +16,11 @@
 
   function checkValid(evt) {
     const datasourceName = evt.target.value
-    if ($backendUiStore.datasources?.some(datasource => datasource.name === datasourceName)) {
+    if (
+      $backendUiStore.datasources?.some(
+        datasource => datasource.name === datasourceName
+      )
+    ) {
       error = `Datasource with name ${datasourceName} already exists. Please choose another name.`
       return
     }
@@ -30,7 +34,7 @@
     const response = await backendUiStore.actions.datasources.save({
       name,
       source: type,
-      config
+      config,
     })
     notifier.success(`Datasource ${name} created successfully.`)
     analytics.captureEvent("Datasource Created", { name })

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

@@ -16,7 +16,11 @@
 
   function checkValid(evt) {
     const datasourceName = evt.target.value
-    if ($backendUiStore.datasources?.some(datasource => datasource.name === datasourceName)) {
+    if (
+      $backendUiStore.datasources?.some(
+        datasource => datasource.name === datasourceName
+      )
+    ) {
       error = `Datasource with name ${tableName} already exists. Please choose another name.`
       return
     }
@@ -30,7 +34,7 @@
     await backendUiStore.actions.datasources.save({
       name,
       source: type,
-      config
+      config,
     })
     notifier.success(`Datasource ${name} created successfully.`)
     analytics.captureEvent("Datasource Created", { name })

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

@@ -36,13 +36,13 @@
     <i class="ri-more-line" />
   </div>
   <DropdownMenu align="left" {anchor} bind:this={dropdown}>
-      <DropdownContainer>
+    <DropdownContainer>
-        <DropdownItem
+      <DropdownItem
-          icon="ri-delete-bin-line"
+        icon="ri-delete-bin-line"
-          title="Delete"
+        title="Delete"
-          on:click={showModal}
+        on:click={showModal}
-          data-cy="delete-datasource" />
+        data-cy="delete-datasource" />
-      </DropdownContainer>
+    </DropdownContainer>
   </DropdownMenu>
 </div>
 <ConfirmDialog

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

@@ -35,13 +35,13 @@
     <i class="ri-more-line" />
   </div>
   <DropdownMenu align="left" {anchor} bind:this={dropdown}>
-      <DropdownContainer>
+    <DropdownContainer>
-        <DropdownItem
+      <DropdownItem
-          icon="ri-delete-bin-line"
+        icon="ri-delete-bin-line"
-          title="Delete"
+        title="Delete"
-          on:click={showModal}
+        on:click={showModal}
-          data-cy="delete-datasource" />
+        data-cy="delete-datasource" />
-      </DropdownContainer>
+    </DropdownContainer>
   </DropdownMenu>
 </div>
 <ConfirmDialog
@@ -49,8 +49,7 @@
   okText="Delete Query"
   onOk={deleteQuery}
   title="Confirm Deletion">
-  Are you sure you wish to delete this query?
+  Are you sure you wish to delete this query? This action cannot be undone.
-  This action cannot be undone.
 </ConfirmDialog>
 
 <style>

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

@@ -2,7 +2,14 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore, store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { Input, Label, ModalContent, Button, Spacer, Toggle } from "@budibase/bbui"
+  import {
+    Input,
+    Label,
+    ModalContent,
+    Button,
+    Spacer,
+    Toggle,
+  } from "@budibase/bbui"
   import TableDataImport from "../TableDataImport.svelte"
   import analytics from "analytics"
   import screenTemplates from "builderStore/store/screenTemplates"
@@ -35,7 +42,7 @@
     let newTable = {
       name,
       schema: dataImport.schema || {},
-      dataImport
+      dataImport,
     }
 
     // Only set primary display if defined
@@ -90,6 +97,7 @@
     text="Generate screens in the design section"
     bind:checked={createAutoscreens} />
   <div>
-  <Label grey extraSmall>Create Table from CSV (Optional)</Label>
+    <Label grey extraSmall>Create Table from CSV (Optional)</Label>
-  <TableDataImport bind:dataImport />
+    <TableDataImport bind:dataImport />
+  </div>
 </ModalContent>

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

@@ -32,9 +32,7 @@
 
     <slot name="icon" />
     {#if icon}
-      <div class="icon">
+      <div class="icon"><i class={icon} /></div>
-        <i class={icon} />
-      </div>
     {/if}
     <div class="text">{text}</div>
     {#if withActions}

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

@@ -5,7 +5,7 @@
     Label,
     Input,
     Heading,
-    Select
+    Select,
   } from "@budibase/bbui"
   import Editor from "./QueryEditor.svelte"
 
@@ -32,7 +32,7 @@
         type={schema.fields[field]?.type}
         required={schema.fields[field]?.required}
         bind:value={fields[field]} />
-      </div>
+    </div>
   {/each}
 </form>
 <Label extraSmall grey>Data</Label>
@@ -45,13 +45,12 @@
     value={fields.customData} />
 {/if}
 
-
 <style>
-.field {
+  .field {
-  margin-bottom: var(--spacing-m);
+    margin-bottom: var(--spacing-m);
-  display: grid;
+    display: grid;
-  grid-template-columns: 1fr 2%;
+    grid-template-columns: 1fr 2%;
-  grid-gap: var(--spacing-m);
+    grid-gap: var(--spacing-m);
-  align-items: center;
+    align-items: center;
-}
+  }
 </style>

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

@@ -61,7 +61,6 @@
       Add Parameter
     </Button>
   {/if}
-
 </section>
 
 <style>

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

@@ -158,8 +158,7 @@
       <IntegrationQueryEditor
         {query}
         schema={config[query.queryVerb][query.queryType]}
-        bind:parameters
+        bind:parameters />
-      />
 
       <Spacer medium />
 

packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte

@@ -75,7 +75,8 @@
         <div class="action-container">
           <div class="action-header" on:click={selectAction(action)}>
             <span class:selected={action === selectedAction}>
-              {index + 1}. {action[EVENT_TYPE_KEY]}
+              {index + 1}.
+              {action[EVENT_TYPE_KEY]}
             </span>
           </div>
           <i

packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte

@@ -1,6 +1,13 @@
 <script>
   // accepts an array of field names, and outputs an object of { FieldName: value }
-  import { DataList, Label, TextButton, Spacer, Select, Input } from "@budibase/bbui"
+  import {
+    DataList,
+    Label,
+    TextButton,
+    Spacer,
+    Select,
+    Input,
+  } from "@budibase/bbui"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
   import { CloseCircleIcon, AddIcon } from "components/common/Icons"
@@ -14,7 +21,7 @@
 
   export let parameterFields
   export let schemaFields
-  export let fieldLabel="Column"
+  export let fieldLabel = "Column"
 
   const emptyField = () => ({ name: "", value: "" })
 
@@ -60,7 +67,9 @@
         // value and type is needed by the client, so it can parse
         // a string into a correct type
         newParameterFields[field.name] = {
-          type: schemaFields ? schemaFields.find(f => f.name === field.name).type : "string",
+          type: schemaFields
+            ? schemaFields.find(f => f.name === field.name).type
+            : "string",
           value: readableToRuntimeBinding(bindableProperties, field.value),
         }
       }
@@ -83,7 +92,7 @@
         {/each}
       </Select>
     {:else}
-      <Input secondary bind:value={field.name} on:blur={rebuildParameters}/> 
+      <Input secondary bind:value={field.name} on:blur={rebuildParameters} />
     {/if}
     <Label size="m" color="dark">Value</Label>
     <DataList secondary bind:value={field.value} on:blur={rebuildParameters}>
@@ -105,7 +114,8 @@
     <Spacer small />
 
     <TextButton text small blue on:click={addField}>
-      Add {fieldLabel}
+      Add
+      {fieldLabel}
       <div style="height: 20px; width: 20px;">
         <AddIcon />
       </div>

packages/builder/src/components/userInterface/EventsEditor/actions/TriggerAutomation.svelte

@@ -5,12 +5,14 @@
 
   const AUTOMATION_STATUS = {
     NEW: "new",
-    EXISTING: "existing"
+    EXISTING: "existing",
   }
 
   export let parameters = {}
 
-  let automationStatus = parameters.automationId ? AUTOMATION_STATUS.EXISTING : AUTOMATION_STATUS.NEW
+  let automationStatus = parameters.automationId
+    ? AUTOMATION_STATUS.EXISTING
+    : AUTOMATION_STATUS.NEW
 
   $: automations = $automationStore.automations
     .filter(a => a.definition.trigger?.stepId === "APP")
@@ -46,45 +48,46 @@
     automationStatus = AUTOMATION_STATUS.EXISTING
     parameters.newAutomationName = ""
   }
-
 </script>
 
 <div class="root">
-
   <div class="radio-container" on:click={setNew}>
     <input
       type="radio"
       value={AUTOMATION_STATUS.NEW}
       bind:group={automationStatus}
-      disabled={!hasAutomations}> 
+      disabled={!hasAutomations} />
-      
-    <Label disabled={!hasAutomations}>Create a new automation </Label>
 
+    <Label disabled={!hasAutomations}>Create a new automation</Label>
   </div>
 
   <div class="radio-container" on:click={setExisting}>
-
     <input
       type="radio"
       value={AUTOMATION_STATUS.EXISTING}
       bind:group={automationStatus}
-      disabled={!hasAutomations}> 
+      disabled={!hasAutomations} />
-      
-    <Label disabled={!hasAutomations}>Use an existing automation </Label>
 
+    <Label disabled={!hasAutomations}>Use an existing automation</Label>
   </div>
 
   <Label size="m" color="dark">Automation</Label>
 
   {#if automationStatus === AUTOMATION_STATUS.EXISTING}
-    <Select secondary bind:value={parameters.automationId} placeholder="Choose automation">
+    <Select
+      secondary
+      bind:value={parameters.automationId}
+      placeholder="Choose automation">
       <option value="" />
       {#each automations as automation}
         <option value={automation._id}>{automation.name}</option>
       {/each}
     </Select>
   {:else}
-    <Input secondary bind:value={parameters.newAutomationName} placeholder="Enter automation name" />
+    <Input
+      secondary
+      bind:value={parameters.newAutomationName}
+      placeholder="Enter automation name" />
   {/if}
 
   <SaveFields
@@ -92,7 +95,6 @@
     schemaFields={automationStatus === AUTOMATION_STATUS.EXISTING && selectedAutomation && selectedAutomation.schema}
     fieldLabel="Field"
     on:fieldschanged={onFieldsChanged} />
-
 </div>
 
 <style>
@@ -132,5 +134,4 @@
   .radio-container > input:focus {
     outline: none;
   }
-
 </style>

packages/builder/src/components/userInterface/TableViewSelect.svelte

@@ -14,7 +14,6 @@
 
   export let value = {}
 
-
   $: tables = $backendUiStore.tables.map(m => ({
     label: m.name,
     name: `all_${m._id}`,
@@ -33,12 +32,12 @@
   }, [])
 
   $: queries = $backendUiStore.queries.map(query => ({
-      label: query.name,
+    label: query.name,
-      name: query.name,
+    name: query.name,
-      ...query,
+    ...query,
-      schema: query.schema,
+    schema: query.schema,
-      parameters: query.parameters,
+    parameters: query.parameters,
-      type: "query",
+    type: "query",
   }))
 
   $: bindableProperties = fetchBindableProperties({
@@ -82,8 +81,12 @@
   }
 
   function fetchDatasourceSchema(query) {
-    const source = $backendUiStore.datasources.find(ds => ds._id === query.datasourceId).source
+    const source = $backendUiStore.datasources.find(
-    return $backendUiStore.integrations[source].query[query.queryVerb][query.queryType];
+      ds => ds._id === query.datasourceId
+    ).source
+    return $backendUiStore.integrations[source].query[query.queryVerb][
+      query.queryType
+    ]
   }
 </script>
 
@@ -94,22 +97,26 @@
   <span>{value.label ? value.label : 'Table / View / Query'}</span>
   <Icon name="arrowdown" />
 </div>
-{#if value.type === "query"}
+{#if value.type === 'query'}
-  <i class="ri-settings-5-line" on:click={openBindingDrawer}/>
+  <i class="ri-settings-5-line" on:click={openBindingDrawer} />
   {#if bindingDrawerOpen}
     <BottomDrawer title={'Query'} onClose={closeDatabindingDrawer}>
       <div slot="buttons">
-        <Button blue thin on:click={() => { 
+        <Button
-          notifier.success("Query parameters saved.")
+          blue
-          handleSelected(value)
+          thin
-        }}>Save</Button>
+          on:click={() => {
+            notifier.success('Query parameters saved.')
+            handleSelected(value)
+          }}>
+          Save
+        </Button>
       </div>
       <div class="drawer-contents" slot="body">
         <IntegrationQueryEditor
           query={value}
           schema={fetchDatasourceSchema(value)}
-          editable={false}
+          editable={false} />
-        />
         <Spacer large />
         {#if value.parameters.length > 0}
           <ParameterBuilder
@@ -178,7 +185,6 @@
   </div>
 </DropdownMenu>
 
-
 <style>
   .dropdownbutton {
     background-color: var(--grey-2);

packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte

@@ -7,9 +7,7 @@
 
 {#if $backendUiStore.selectedDatabase._id && selectedTable.name}
   <TableDataTable />
-{:else}
+{:else}<i>Create your first table to start building</i>{/if}
-  <i>Create your first table to start building</i>
-{/if}
 
 <style>
   i {

packages/standard-components/src/grid/Component.svelte

@@ -155,7 +155,9 @@
         {#if selectedRows.length > 0}
           <DeleteButton text small on:click={modal.show()}>
             <Icon name="addrow" />
-            Delete {selectedRows.length} row(s)
+            Delete
+            {selectedRows.length}
+            row(s)
           </DeleteButton>
         {/if}
       </div>