Merge branch 'develop' of github.com:Budibase/budibase into cheeks-fixes

hosting/single/nginx/nginx-default-site.conf

@@ -22,6 +22,16 @@ server {
         proxy_pass      http://127.0.0.1:4001;
     }
 
+    location /embed {
+        rewrite /embed/(.*) /app/$1  break;
+        proxy_pass       http://127.0.0.1:4001;
+        proxy_redirect   off;
+        proxy_set_header Host                    $host;
+        proxy_set_header x-budibase-embed        "true";
+        add_header       x-budibase-embed        "true";
+        add_header       Content-Security-Policy "frame-ancestors *";
+    }
+
     location = / {
         proxy_pass      http://127.0.0.1:4001;
     }

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.8.3-alpha.3",
+  "version": "2.8.6-alpha.5",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

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

@@ -2,21 +2,13 @@
   import { goto, url } from "@roxi/routify"
   import { tables } from "stores/backend"
   import { notifications } from "@budibase/bbui"
-  import {
+  import { Input, Label, ModalContent, Layout } from "@budibase/bbui"
-    Input,
-    Label,
-    ModalContent,
-    Toggle,
-    Divider,
-    Layout,
-  } from "@budibase/bbui"
   import { datasources } from "stores/backend"
   import TableDataImport from "../TableDataImport.svelte"
   import {
     BUDIBASE_INTERNAL_DB_ID,
     BUDIBASE_DATASOURCE_TYPE,
   } from "constants/backend"
-  import { buildAutoColumn, getAutoColumnInformation } from "builderStore/utils"
 
   $: tableNames = $tables.list.map(table => table.name)
   $: selectedSource = $datasources.list.find(
@@ -43,28 +35,12 @@
   }
 
   let error = ""
-  let autoColumns = getAutoColumnInformation()
+
   let schema = {}
   let rows = []
   let allValid = true
   let displayColumn = null
 
-  function getAutoColumns() {
-    const selectedAutoColumns = {}
-
-    Object.entries(autoColumns).forEach(([subtype, column]) => {
-      if (column.enabled) {
-        selectedAutoColumns[column.name] = buildAutoColumn(
-          name,
-          column.name,
-          subtype
-        )
-      }
-    })
-
-    return selectedAutoColumns
-  }
-
   function checkValid(evt) {
     const tableName = evt.target.value
     if (tableNames.includes(tableName)) {
@@ -77,7 +53,7 @@
   async function saveTable() {
     let newTable = {
       name,
-      schema: { ...schema, ...getAutoColumns() },
+      schema: { ...schema },
       rows,
       type: "internal",
       sourceId: targetDatasourceId,
@@ -118,21 +94,6 @@
     bind:value={name}
     {error}
   />
-  <div class="autocolumns">
-    <Label extraSmall grey>Auto Columns</Label>
-    <div class="toggles">
-      <div class="toggle-1">
-        <Toggle text="Created by" bind:value={autoColumns.createdBy.enabled} />
-        <Toggle text="Created at" bind:value={autoColumns.createdAt.enabled} />
-        <Toggle text="Auto ID" bind:value={autoColumns.autoID.enabled} />
-      </div>
-      <div class="toggle-2">
-        <Toggle text="Updated by" bind:value={autoColumns.updatedBy.enabled} />
-        <Toggle text="Updated at" bind:value={autoColumns.updatedAt.enabled} />
-      </div>
-    </div>
-    <Divider />
-  </div>
   <div>
     <Layout gap="XS" noPadding>
       <Label grey extraSmall
@@ -148,24 +109,3 @@
     </Layout>
   </div>
 </ModalContent>
-
-<style>
-  .autocolumns {
-    margin-bottom: -10px;
-  }
-
-  .toggles {
-    display: flex;
-    width: 100%;
-    margin-top: 6px;
-  }
-
-  .toggle-1 :global(> *) {
-    margin-bottom: 10px;
-  }
-
-  .toggle-2 :global(> *) {
-    margin-bottom: 10px;
-    margin-left: 20px;
-  }
-</style>

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

@@ -0,0 +1,39 @@
+<script>
+  import { Icon, Heading } from "@budibase/bbui"
+
+  export let showClose = false
+  export let onClose = () => {}
+  export let heading = ""
+</script>
+
+<section class="page">
+  <div class="closeButton">
+    {#if showClose}
+      <Icon hoverable name="Close" on:click={onClose} />
+    {/if}
+  </div>
+  <div class="heading">
+    <Heading weight="light">{heading}</Heading>
+  </div>
+  <slot />
+</section>
+
+<style>
+  .page {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .heading {
+    text-align: center;
+  }
+
+  .closeButton {
+    height: 38px;
+    display: flex;
+    justify-content: right;
+    width: 100%;
+  }
+</style>

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -208,9 +208,9 @@
                     <div class="syntax-error">
                       Current Handlebars syntax is invalid, please check the
                       guide
-                      <a href="https://handlebarsjs.com/guide/" target="_blank">
+                      <a href="https://handlebarsjs.com/guide/" target="_blank"
-                        here
+                        >here</a
-                      </a>
+                      >
                       for more details.
                     </div>
                   {:else}

packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte

@@ -16,6 +16,7 @@
     makeStateBinding,
   } from "builderStore/dataBinding"
   import { currentAsset, store } from "builderStore"
+  import { cloneDeep } from "lodash/fp"
 
   const flipDurationMs = 150
   const EVENT_TYPE_KEY = "##eventHandlerType"
@@ -29,6 +30,26 @@
   let actionQuery
   let selectedAction = actions?.length ? actions[0] : null
 
+  const setUpdateActions = actions => {
+    return actions
+      ? cloneDeep(actions)
+          .filter(action => {
+            return (
+              action[EVENT_TYPE_KEY] === "Update State" &&
+              action.parameters?.type === "set" &&
+              action.parameters.key
+            )
+          })
+          .reduce((acc, action) => {
+            acc[action.id] = action
+            return acc
+          }, {})
+      : []
+  }
+
+  // Snapshot original action state
+  let updateStateActions = setUpdateActions(actions)
+
   $: {
     // Ensure parameters object is never null
     if (selectedAction && !selectedAction.parameters) {
@@ -125,8 +146,9 @@
     actions = e.detail.items
   }
 
-  const getAllBindings = (bindings, eventContextBindings, actions) => {
+  const getAllBindings = (actionBindings, eventContextBindings, actions) => {
     let allBindings = []
+    let cloneActionBindings = cloneDeep(actionBindings)
     if (!actions) {
       return []
     }
@@ -144,11 +166,19 @@
       .forEach(action => {
         // Check we have a binding for this action, and generate one if not
         const stateBinding = makeStateBinding(action.parameters.key)
-        const hasKey = bindings.some(binding => {
+        const hasKey = actionBindings.some(binding => {
           return binding.runtimeBinding === stateBinding.runtimeBinding
         })
         if (!hasKey) {
-          bindings.push(stateBinding)
+          let existing = updateStateActions[action.id]
+          if (existing) {
+            const existingBinding = makeStateBinding(existing.parameters.key)
+            cloneActionBindings = cloneActionBindings.filter(
+              binding =>
+                binding.runtimeBinding !== existingBinding.runtimeBinding
+            )
+          }
+          allBindings.push(stateBinding)
         }
       })
     // Get which indexes are asynchronous automations as we want to filter them out from the bindings
@@ -164,15 +194,16 @@
       .filter(index => index !== undefined)
 
     // Based on the above, filter out the asynchronous automations from the bindings
-    if (asynchronousAutomationIndexes) {
+    let contextBindings = asynchronousAutomationIndexes
-      allBindings = eventContextBindings
+      ? eventContextBindings.filter((binding, index) => {
-        .filter((binding, index) => {
           return !asynchronousAutomationIndexes.includes(index)
         })
-        .concat(bindings)
+      : eventContextBindings
-    } else {
+
-      allBindings = eventContextBindings.concat(bindings)
+    allBindings = contextBindings
-    }
+      .concat(cloneActionBindings)
+      .concat(allBindings)
+
     return allBindings
   }
 </script>

packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte

@@ -70,8 +70,9 @@
   } set`
 </script>
 
-<div class="action-count">{actionText}</div>
+<div class="action-editor">
-<ActionButton on:click={openDrawer}>Define actions</ActionButton>
+  <ActionButton on:click={openDrawer}>{actionText}</ActionButton>
+</div>
 
 <Drawer bind:this={drawer} title={"Actions"}>
   <svelte:fragment slot="description">
@@ -89,9 +90,7 @@
 </Drawer>
 
 <style>
-  .action-count {
+  .action-editor :global(.spectrum-ActionButton) {
-    padding-top: 6px;
+    width: 100%;
-    padding-bottom: var(--spacing-s);
-    font-weight: 600;
   }
 </style>

packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte

@@ -20,6 +20,7 @@
   let drawer
   let boundValue
 
+  $: text = getText(value)
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
   $: schema = getSchema($currentAsset, datasource)
   $: options = allowCellEditing
@@ -31,6 +32,17 @@
     allowLinks: true,
   })
 
+  const getText = value => {
+    if (!value?.length) {
+      return "All columns"
+    }
+    let text = `${value.length} column`
+    if (value.length !== 1) {
+      text += "s"
+    }
+    return text
+  }
+
   const getSchema = (asset, datasource) => {
     const schema = getSchemaForDatasource(asset, datasource).schema
 
@@ -76,7 +88,7 @@
 </script>
 
 <div class="column-editor">
-  <ActionButton on:click={open}>Configure columns</ActionButton>
+  <ActionButton on:click={open}>{text}</ActionButton>
 </div>
 <Drawer bind:this={drawer} title="Columns">
   <Button cta slot="buttons" on:click={save}>Save</Button>

packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte

@@ -12,25 +12,36 @@
   export let componentInstance
   export let value = []
 
-  const convertOldColumnFormat = oldColumns => {
-    if (typeof oldColumns?.[0] === "string") {
-      value = oldColumns.map(field => ({ name: field, displayName: field }))
-    }
-  }
-
-  $: convertOldColumnFormat(value)
-
   const dispatch = createEventDispatcher()
 
   let drawer
   let boundValue
 
+  $: text = getText(value)
+  $: convertOldColumnFormat(value)
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
   $: schema = getSchema($currentAsset, datasource)
   $: options = Object.keys(schema || {})
   $: sanitisedValue = getValidColumns(value, options)
   $: updateBoundValue(sanitisedValue)
 
+  const getText = value => {
+    if (!value?.length) {
+      return "All fields"
+    }
+    let text = `${value.length} field`
+    if (value.length !== 1) {
+      text += "s"
+    }
+    return text
+  }
+
+  const convertOldColumnFormat = oldColumns => {
+    if (typeof oldColumns?.[0] === "string") {
+      value = oldColumns.map(field => ({ name: field, displayName: field }))
+    }
+  }
+
   const getSchema = (asset, datasource) => {
     const schema = getSchemaForDatasource(asset, datasource).schema
 
@@ -75,7 +86,10 @@
   }
 </script>
 
-<ActionButton on:click={open}>Configure fields</ActionButton>
+<div class="field-configuration">
+  <ActionButton on:click={open}>{text}</ActionButton>
+</div>
+
 <Drawer bind:this={drawer} title="Form Fields">
   <svelte:fragment slot="description">
     Configure the fields in your form.
@@ -83,3 +97,9 @@
   <Button cta slot="buttons" on:click={save}>Save</Button>
   <ColumnDrawer slot="body" bind:columns={boundValue} {options} {schema} />
 </Drawer>
+
+<style>
+  .field-configuration :global(.spectrum-ActionButton) {
+    width: 100%;
+  }
+</style>

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

@@ -15,8 +15,6 @@
   import { createValidationStore } from "helpers/validation/yup"
   import * as appValidation from "helpers/validation/yup/app"
   import TemplateCard from "components/common/TemplateCard.svelte"
-  import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
-  import { Roles } from "constants/backend"
   import { lowercase } from "helpers"
 
   export let template
@@ -142,21 +140,6 @@
       // Create user
       await auth.setInitInfo({})
 
-      // Create a default home screen if no template was selected
-      if (template == null) {
-        let defaultScreenTemplate = createFromScratchScreen.create()
-        defaultScreenTemplate.routing.route = "/home"
-        defaultScreenTemplate.routing.roldId = Roles.BASIC
-        try {
-          await store.actions.screens.save(defaultScreenTemplate)
-        } catch (err) {
-          console.error("Could not create a default application screen", err)
-          notifications.warning(
-            "Encountered an issue creating the default screen."
-          )
-        }
-      }
-
       $goto(`/builder/app/${createdApp.instance._id}`)
     } catch (error) {
       creating = false

packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Queries/RestImportButton.svelte

@@ -2,11 +2,12 @@
   import { Button, Modal } from "@budibase/bbui"
   import ImportQueriesModal from "./RestImportQueriesModal.svelte"
 
+  export let datasourceId
   let importQueriesModal
 </script>
 
 <Modal bind:this={importQueriesModal}>
-  <ImportQueriesModal createDatasource={false} datasourceId={"todo"} />
+  <ImportQueriesModal createDatasource={false} {datasourceId} />
 </Modal>
 
 <div class="button">

packages/builder/src/pages/builder/app/[application]/data/new.svelte

@@ -7,12 +7,13 @@
   } from "stores/backend"
 
   import { hasData } from "stores/selectors"
-  import { Icon, notifications, Heading, Body } from "@budibase/bbui"
+  import { notifications, Body } from "@budibase/bbui"
   import { params, goto } from "@roxi/routify"
   import CreateExternalDatasourceModal from "./_components/CreateExternalDatasourceModal/index.svelte"
   import CreateInternalTableModal from "./_components/CreateInternalTableModal.svelte"
   import DatasourceOption from "./_components/DatasourceOption.svelte"
   import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte"
+  import CreationPage from "components/common/CreationPage.svelte"
   import ICONS from "components/backend/DatasourceNavigator/icons/index.js"
   import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte"
 
@@ -46,16 +47,11 @@
   bind:this={externalDatasourceModal}
 />
 
-<div class="page">
+<CreationPage
-  <div class="closeButton">
+  showClose={hasData($datasources, $tables)}
-    {#if hasData($datasources, $tables)}
+  onClose={() => $goto("./table")}
-      <Icon hoverable name="Close" on:click={$goto("./table")} />
+  heading="Add new data source"
-    {/if}
+>
-  </div>
-  <div class="heading">
-    <Heading weight="light">Add new data source</Heading>
-  </div>
-
   <div class="subHeading">
     <Body>Get started with our Budibase DB</Body>
     <div
@@ -113,30 +109,13 @@
       </DatasourceOption>
     {/each}
   </div>
-</div>
+</CreationPage>
 
 <style>
-  .page {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .closeButton {
-    height: 38px;
-    display: flex;
-    justify-content: right;
-    width: 100%;
-  }
-
-  .heading {
-    margin-bottom: 12px;
-  }
-
   .subHeading {
     display: flex;
     align-items: center;
+    margin-top: 12px;
     margin-bottom: 24px;
   }
 

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte

@@ -1,165 +0,0 @@
-<script>
-  import { tables } from "stores/backend"
-  import { ModalContent, Body, Layout, Icon, Heading } from "@budibase/bbui"
-  import blankScreenPreview from "./blankScreenPreview.png"
-  import listScreenPreview from "./listScreenPreview.png"
-
-  export let onConfirm
-  export let onCancel
-
-  let listScreenModeKey = "autoCreate"
-  let blankScreenModeKey = "blankScreen"
-
-  let selectedScreenMode
-
-  const confirmScreenSelection = async () => {
-    await onConfirm(selectedScreenMode)
-  }
-</script>
-
-<div>
-  <ModalContent
-    title="Add screens"
-    confirmText="Continue"
-    cancelText="Cancel"
-    onConfirm={confirmScreenSelection}
-    {onCancel}
-    disabled={!selectedScreenMode}
-    size="M"
-  >
-    <Layout noPadding gap="S">
-      <div
-        class="screen-type item blankView"
-        class:selected={selectedScreenMode == blankScreenModeKey}
-        on:click={() => {
-          selectedScreenMode = blankScreenModeKey
-        }}
-      >
-        <div class="content screen-type-wrap">
-          <img
-            alt="blank screen preview"
-            class="preview"
-            src={blankScreenPreview}
-          />
-          <div class="screen-type-text">
-            <Heading size="XS">Blank screen</Heading>
-            <Body size="S">Add an empty blank screen</Body>
-          </div>
-        </div>
-        <div
-          style="color: var(--spectrum-global-color-green-600); float: right"
-        >
-          <div
-            class={`checkmark-spacing ${
-              selectedScreenMode == blankScreenModeKey ? "visible" : ""
-            }`}
-          >
-            <Icon size="S" name="CheckmarkCircle" />
-          </div>
-        </div>
-      </div>
-
-      <div class="listViewTitle">
-        <Heading size="XS">Quickly create a screen from your data</Heading>
-      </div>
-
-      <div
-        class="screen-type item"
-        class:selected={selectedScreenMode == listScreenModeKey}
-        on:click={() => {
-          selectedScreenMode = listScreenModeKey
-        }}
-        class:disabled={!$tables.list.filter(table => table._id !== "ta_users")
-          .length}
-      >
-        <div class="content screen-type-wrap">
-          <img
-            alt="list screen preview"
-            class="preview"
-            src={listScreenPreview}
-          />
-          <div class="screen-type-text">
-            <Heading size="XS">List view</Heading>
-            <Body size="S">
-              Create, edit and view your data in a list view screen with side
-              panel
-            </Body>
-          </div>
-        </div>
-        <div
-          style="color: var(--spectrum-global-color-green-600); float: right"
-        >
-          <div
-            class={`checkmark-spacing ${
-              selectedScreenMode == listScreenModeKey ? "visible" : ""
-            }`}
-          >
-            <Icon size="S" name="CheckmarkCircle" />
-          </div>
-        </div>
-      </div>
-    </Layout>
-  </ModalContent>
-</div>
-
-<style>
-  .screen-type-wrap {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  .disabled {
-    opacity: 0.3;
-    pointer-events: none;
-  }
-  .checkmark-spacing {
-    margin-right: var(--spacing-m);
-    opacity: 0;
-  }
-  .content {
-    letter-spacing: 0px;
-  }
-  .item {
-    cursor: pointer;
-    grid-gap: var(--spectrum-alias-grid-margin-xsmall);
-    background: var(--spectrum-alias-background-color-secondary);
-    transition: 0.3s all;
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 4px;
-    border-width: 1px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .item:hover,
-  .selected {
-    background: var(--spectrum-alias-background-color-tertiary);
-  }
-  .screen-type-wrap .screen-type-text {
-    padding-left: var(--spectrum-alias-item-padding-xl);
-  }
-  .screen-type-wrap .screen-type-text :global(h1) {
-    padding-bottom: var(--spacing-xs);
-  }
-  .screen-type-wrap :global(.spectrum-Icon) {
-    min-width: var(--spectrum-icon-size-m);
-  }
-  .screen-type-wrap :global(.spectrum-Heading) {
-    padding-bottom: var(--spectrum-alias-item-padding-s);
-  }
-  .preview {
-    width: 140px;
-  }
-
-  .listViewTitle {
-    margin-top: 35px;
-  }
-
-  .blankView {
-    margin-top: 10px;
-  }
-
-  .visible {
-    opacity: 1;
-  }
-</style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte

@@ -9,7 +9,7 @@
     Helpers,
     notifications,
   } from "@budibase/bbui"
-  import ScreenDetailsModal from "./ScreenDetailsModal.svelte"
+  import ScreenDetailsModal from "components/design/ScreenDetailsModal.svelte"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
   import { makeComponentUnique } from "builderStore/componentUtils"
 

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte

@@ -1,17 +1,16 @@
 <script>
   import { Search, Layout, Select, Body, Button } from "@budibase/bbui"
   import Panel from "components/design/Panel.svelte"
+  import { goto } from "@roxi/routify"
   import { roles } from "stores/backend"
   import { store, sortedScreens, userSelectedResourceMap } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
-  import ScreenWizard from "./ScreenWizard.svelte"
   import RoleIndicator from "./RoleIndicator.svelte"
   import { RoleUtils } from "@budibase/frontend-core"
 
   let searchString
   let accessRole = "all"
-  let showNewScreenModal
 
   $: filteredScreens = getFilteredScreens(
     $sortedScreens,
@@ -31,7 +30,7 @@
 
 <Panel title="Screens" borderRight>
   <Layout paddingX="L" paddingY="XL" gap="S">
-    <Button on:click={showNewScreenModal} cta>Add screen</Button>
+    <Button on:click={() => $goto("../../new")} cta>Add screen</Button>
     <Search
       placeholder="Search"
       value={searchString}
@@ -74,5 +73,3 @@
     </Layout>
   {/if}
 </Panel>
-
-<ScreenWizard bind:showModal={showNewScreenModal} />

packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte

@@ -1,6 +1,5 @@
 <script>
-  import ScreenDetailsModal from "./ScreenDetailsModal.svelte"
+  import ScreenDetailsModal from "components/design/ScreenDetailsModal.svelte"
-  import NewScreenModal from "./NewScreenModal.svelte"
   import DatasourceModal from "./DatasourceModal.svelte"
   import ScreenRoleModal from "./ScreenRoleModal.svelte"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
@@ -11,11 +10,11 @@
   import { tables } from "stores/backend"
   import { Roles } from "constants/backend"
   import { capitalise } from "helpers"
+  import { goto } from "@roxi/routify"
 
   let pendingScreen
 
   // Modal refs
-  let newScreenModal
   let screenDetailsModal
   let datasourceModal
   let screenAccessRoleModal
@@ -26,16 +25,6 @@
   let blankScreenUrl = null
   let screenMode = null
 
-  // External handler to show the screen wizard
-  export const showModal = () => {
-    selectedTemplates = null
-    blankScreenUrl = null
-    screenMode = null
-    pendingScreen = null
-    screenAccessRole = Roles.BASIC
-    newScreenModal.show()
-  }
-
   // Creates an array of screens, checking and sanitising their URLs
   const createScreens = async ({ screens, screenAccessRole }) => {
     if (!screens?.length) {
@@ -43,6 +32,8 @@
     }
 
     try {
+      let screenId
+
       for (let screen of screens) {
         // Check we aren't clashing with an existing URL
         if (hasExistingUrl(screen.routing.route)) {
@@ -64,7 +55,8 @@
         screen.routing.roleId = screenAccessRole
 
         // Create the screen
-        await store.actions.screens.save(screen)
+        const response = await store.actions.screens.save(screen)
+        screenId = response._id
 
         // Add link in layout for list screens
         if (screen.props._instanceName.endsWith("List")) {
@@ -74,7 +66,10 @@
           )
         }
       }
+
+      $goto(`./${screenId}`)
     } catch (error) {
+      console.log(error)
       notifications.error("Error creating screens")
     }
   }
@@ -104,18 +99,24 @@
   }
 
   // Handler for NewScreenModal
-  const confirmScreenSelection = async mode => {
+  export const show = mode => {
+    selectedTemplates = null
+    blankScreenUrl = null
     screenMode = mode
+    pendingScreen = null
+    screenAccessRole = Roles.BASIC
 
-    if (mode === "autoCreate") {
+    if (mode === "table") {
       datasourceModal.show()
-    } else {
+    } else if (mode === "blank") {
       let templates = getTemplates($store, $tables.list)
       const blankScreenTemplate = templates.find(
         t => t.id === "createFromScratch"
       )
       pendingScreen = blankScreenTemplate.create()
       screenDetailsModal.show()
+    } else {
+      throw new Error("Invalid mode provided")
     }
   }
 
@@ -155,7 +156,7 @@
 
   // Submit screen config for creation.
   const confirmScreenCreation = async () => {
-    if (screenMode === "blankScreen") {
+    if (screenMode === "blank") {
       confirmBlankScreenCreation({
         screenUrl: blankScreenUrl,
         screenAccessRole,
@@ -166,7 +167,7 @@
   }
 
   const roleSelectBack = () => {
-    if (screenMode === "blankScreen") {
+    if (screenMode === "blank") {
       screenDetailsModal.show()
     } else {
       datasourceModal.show()
@@ -174,14 +175,9 @@
   }
 </script>
 
-<Modal bind:this={newScreenModal}>
-  <NewScreenModal onConfirm={confirmScreenSelection} />
-</Modal>
-
 <Modal bind:this={datasourceModal}>
   <DatasourceModal
     onConfirm={confirmScreenDatasources}
-    onCancel={() => newScreenModal.show()}
     initalScreens={!selectedTemplates ? [] : [...selectedTemplates]}
   />
 </Modal>
@@ -198,7 +194,6 @@
 <Modal bind:this={screenDetailsModal}>
   <ScreenDetailsModal
     onConfirm={confirmScreenBlank}
-    onCancel={() => newScreenModal.show()}
     initialUrl={blankScreenUrl}
   />
 </Modal>

packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte

@@ -40,14 +40,14 @@
 </script>
 
 <ModalContent
-  title="Autogenerated screens"
+  title="Access"
   confirmText="Done"
   cancelText="Back"
   {onConfirm}
   {onCancel}
   disabled={!!error}
 >
-  Select which level of access you want your screens to have
+  Select the level of access required to see these screens
   <Select
     bind:value={screenAccessRole}
     on:change={onChangeRole}

packages/builder/src/pages/builder/app/[application]/design/index.svelte

@@ -1,67 +1,12 @@
 <script>
-  import { store, selectedScreen } from "builderStore"
-  import { onMount } from "svelte"
   import { redirect } from "@roxi/routify"
-  import { Layout, Button, Detail, notifications } from "@budibase/bbui"
+  import { store as frontendStore } from "builderStore"
-  import Logo from "assets/bb-space-man.svg"
-  import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
-  import { Roles } from "constants/backend"
 
-  let loaded = false
+  $: {
-
+    if ($frontendStore.screens.length > 0) {
-  const createFirstScreen = async () => {
+      $redirect(`./${$frontendStore.screens[0]._id}`)
-    let screen = createFromScratchScreen.create()
-    screen.routing.route = "/home"
-    screen.routing.roldId = Roles.BASIC
-    screen.routing.homeScreen = true
-    try {
-      const savedScreen = await store.actions.screens.save(screen)
-      notifications.success("Screen created successfully")
-      $redirect(`./${savedScreen._id}`)
-    } catch (err) {
-      console.error("Could not create screen", err)
-      notifications.error("Error creating screen")
-    }
-  }
-
-  onMount(() => {
-    if ($selectedScreen) {
-      $redirect(`./${$selectedScreen._id}`)
-    } else if ($store.screens?.length) {
-      $redirect(`./${$store.screens[0]._id}`)
     } else {
-      loaded = true
+      $redirect("./new")
     }
-  })
+  }
 </script>
-
-{#if loaded}
-  <div class="centered">
-    <Layout gap="S" justifyItems="center">
-      <img class="img-size" alt="logo" src={Logo} />
-      <div class="new-screen-text">
-        <Detail size="L">LET’S BRING THIS APP TO LIFE</Detail>
-      </div>
-      <Button on:click={createFirstScreen} size="M" cta icon="Add">
-        Create first screen
-      </Button>
-    </Layout>
-  </div>
-{/if}
-
-<style>
-  .centered {
-    width: 100%;
-    height: 100%;
-    display: grid;
-    place-items: center;
-  }
-  .new-screen-text {
-    width: 150px;
-    text-align: center;
-    font-weight: 600;
-  }
-  .img-size {
-    width: 170px;
-  }
-</style>

packages/builder/src/pages/builder/app/[application]/design/new.svelte

@@ -0,0 +1,104 @@
+<script>
+  import { Body } from "@budibase/bbui"
+  import CreationPage from "components/common/CreationPage.svelte"
+  import blankImage from "./blank.png"
+  import tableImage from "./table.png"
+  import CreateScreenModal from "./_components/CreateScreenModal.svelte"
+  import { store } from "builderStore"
+  import { goto } from "@roxi/routify"
+
+  let createScreenModal
+
+  $: hasScreens = $store.screens?.length
+</script>
+
+<div class="page">
+  <CreationPage
+    showClose={$store.screens.length > 0}
+    onClose={() => $goto(`./${$store.screens[0]._id}`)}
+    heading={hasScreens ? "Create new screen" : "Create your first screen"}
+  >
+    <div class="subHeading">
+      <Body size="L">Start from scratch or create screens from your data</Body>
+    </div>
+
+    <div class="cards">
+      <div class="card" on:click={() => createScreenModal.show("blank")}>
+        <div class="image">
+          <img alt="" src={blankImage} />
+        </div>
+        <div class="text">
+          <Body size="S">Blank screen</Body>
+          <Body size="XS">Add an empty blank screen</Body>
+        </div>
+      </div>
+
+      <div class="card" on:click={() => createScreenModal.show("table")}>
+        <div class="image">
+          <img alt="" src={tableImage} />
+        </div>
+        <div class="text">
+          <Body size="S">Table</Body>
+          <Body size="XS">View, edit and delete rows on a table</Body>
+        </div>
+      </div>
+    </div>
+  </CreationPage>
+</div>
+
+<CreateScreenModal bind:this={createScreenModal} />
+
+<style>
+  .page {
+    padding: 28px 40px 40px 40px;
+  }
+
+  .subHeading :global(p) {
+    text-align: center;
+    margin-top: 12px;
+    margin-bottom: 24px;
+    color: var(--grey-6);
+  }
+
+  .cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .card {
+    margin: 12px;
+    max-width: 235px;
+    transition: filter 150ms;
+  }
+
+  .card:hover {
+    filter: brightness(1.1);
+    cursor: pointer;
+  }
+
+  .image {
+    border-radius: 4px 4px 0 0;
+    width: 100%;
+    max-height: 127px;
+    overflow: hidden;
+  }
+
+  .image img {
+    width: 100%;
+  }
+
+  .text {
+    border: 1px solid var(--grey-4);
+    border-radius: 0 0 4px 4px;
+    padding: 8px 16px 13px 16px;
+  }
+
+  .text :global(p:nth-child(1)) {
+    margin-bottom: 6px;
+  }
+
+  .text :global(p:nth-child(2)) {
+    color: var(--grey-6);
+  }
+</style>

packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte

@@ -7,8 +7,6 @@
   import { API } from "api"
   import { store, automationStore } from "builderStore"
   import { auth, admin } from "stores/portal"
-  import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
-  import { Roles } from "constants/backend"
 
   let name = "My first app"
   let url = "my-first-app"
@@ -38,11 +36,6 @@
     // Create user
     await auth.setInitInfo({})
 
-    let defaultScreenTemplate = createFromScratchScreen.create()
-    defaultScreenTemplate.routing.route = "/home"
-    defaultScreenTemplate.routing.roldId = Roles.BASIC
-    await store.actions.screens.save(defaultScreenTemplate)
-
     appId = createdApp.instance._id
     return createdApp
   }

packages/client/manifest.json

@@ -3223,6 +3223,46 @@
         "key": "allowManualEntry",
         "defaultValue": false
       },
+      {
+        "type": "boolean",
+        "label": "Play sound on scan",
+        "key": "beepOnScan",
+        "defaultValue": false
+      },
+      {
+        "type": "select",
+        "label": "Sound pitch",
+        "key": "beepFrequency",
+        "dependsOn": "beepOnScan",
+        "defaultValue": 2637,
+        "options": [
+          {
+            "label": "Low",
+            "value": 2096
+          },
+          {
+            "label": "Regular",
+            "value": 2637
+          },
+          {
+            "label": "High",
+            "value": 3136
+          },
+          { "label": "Custom", "value": "custom" }
+        ]
+      },
+      {
+        "type": "number",
+        "label": "Sound frequency (Hz)",
+        "key": "customFrequency",
+        "defaultValue": 1046,
+        "min": 20,
+        "max": 8000,
+        "dependsOn": {
+          "setting": "beepFrequency",
+          "value": "custom"
+        }
+      },
       {
         "type": "validation/string",
         "label": "Validation",
@@ -4541,6 +4581,16 @@
               "setting": "clickBehaviour",
               "value": "details"
             }
+          },
+          {
+            "type": "boolean",
+            "label": "Hide notifications",
+            "key": "notificationOverride",
+            "defaultValue": false,
+            "dependsOn": {
+              "setting": "clickBehaviour",
+              "value": "details"
+            }
           }
         ]
       },
@@ -5178,6 +5228,16 @@
               "value": "View",
               "invert": true
             }
+          },
+          {
+            "type": "boolean",
+            "label": "Hide notifications",
+            "key": "notificationOverride",
+            "defaultValue": false,
+            "dependsOn": {
+              "setting": "showSaveButton",
+              "value": true
+            }
           }
         ]
       }

packages/client/src/components/app/blocks/TableBlock.svelte

@@ -30,6 +30,7 @@
   export let sidePanelShowDelete
   export let sidePanelSaveLabel
   export let sidePanelDeleteLabel
+  export let notificationOverride
 
   const { fetchDatasourceSchema, API } = getContext("sdk")
   const stateKey = `ID_${generate()}`
@@ -253,6 +254,7 @@
               fields: sidePanelFields || normalFields,
               title: editTitle,
               labelPosition: "left",
+              notificationOverride,
             }}
           />
         </BlockComponent>
@@ -277,6 +279,7 @@
               fields: sidePanelFields || normalFields,
               title: "Create Row",
               labelPosition: "left",
+              notificationOverride,
             }}
           />
         </BlockComponent>

packages/client/src/components/app/blocks/form/FormBlock.svelte

@@ -19,6 +19,7 @@
   export let rowId
   export let actionUrl
   export let noRowsMessage
+  export let notificationOverride
 
   const { fetchDatasourceSchema } = getContext("sdk")
 
@@ -87,6 +88,7 @@
     showDeleteButton,
     schema,
     repeaterId,
+    notificationOverride,
   }
 
   const fetchSchema = async () => {

packages/client/src/components/app/blocks/form/InnerFormBlock.svelte

@@ -17,6 +17,7 @@
   export let showDeleteButton
   export let schema
   export let repeaterId
+  export let notificationOverride
 
   const FieldTypeToComponentMap = {
     string: "stringfield",
@@ -47,6 +48,7 @@
       parameters: {
         providerId: formId,
         tableId: dataSource?.tableId,
+        notificationOverride,
       },
     },
     {

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

@@ -8,6 +8,10 @@
   export let disabled = false
   export let allowManualEntry = false
   export let scanButtonText = "Scan code"
+  export let beepOnScan = false
+  export let beepFrequency = 2637
+  export let customFrequency = 1046
+
   const dispatch = createEventDispatcher()
 
   let videoEle
@@ -21,8 +25,13 @@
     fps: 25,
     qrbox: { width: 250, height: 250 },
   }
+  const audioCtx = new (window.AudioContext || window.webkitAudioContext)()
+
   const onScanSuccess = decodedText => {
     if (value != decodedText) {
+      if (beepOnScan) {
+        beep()
+      }
       dispatch("change", decodedText)
     }
   }
@@ -84,6 +93,27 @@
     }
     camModal.hide()
   }
+
+  const beep = () => {
+    const oscillator = audioCtx.createOscillator()
+    const gainNode = audioCtx.createGain()
+
+    oscillator.connect(gainNode)
+    gainNode.connect(audioCtx.destination)
+
+    const frequency =
+      beepFrequency === "custom" ? customFrequency : beepFrequency
+    oscillator.frequency.value = frequency
+    oscillator.type = "square"
+
+    const duration = 420
+    const endTime = audioCtx.currentTime + duration / 1000
+    gainNode.gain.setValueAtTime(1, audioCtx.currentTime)
+    gainNode.gain.exponentialRampToValueAtTime(0.001, endTime)
+
+    oscillator.start()
+    oscillator.stop(endTime)
+  }
 </script>
 
 <div class="scanner-video-wrapper">

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

@@ -11,6 +11,9 @@
   export let onChange
   export let allowManualEntry
   export let scanButtonText
+  export let beepOnScan
+  export let beepFrequency
+  export let customFrequency
 
   let fieldState
   let fieldApi
@@ -42,6 +45,9 @@
       disabled={fieldState.disabled}
       {allowManualEntry}
       scanButtonText={scanText}
+      {beepOnScan}
+      {beepFrequency}
+      {customFrequency}
     />
   {/if}
 </Field>