Merge branch 'master' into fix/js-parsing-feedback

packages/bbui/src/ActionMenu/ActionMenu.svelte

@@ -5,10 +5,10 @@
 
   export let disabled = false
   export let align = "left"
-  export let portalTarget
+  export let portalTarget = undefined
   export let openOnHover = false
-  export let animate
-  export let offset
+  export let animate = true
+  export let offset = undefined
 
   const actionMenuContext = getContext("actionMenu")
 

packages/bbui/src/Avatar/Avatar.svelte

@@ -14,7 +14,7 @@
   export let url = ""
   export let disabled = false
   export let initials = "JD"
-  export let color = null
+  export let color = ""
 
   const DefaultColor = "#3aab87"
 

packages/bbui/src/ColorPicker/ColorPicker.svelte

@@ -28,23 +28,7 @@
   const dispatch = createEventDispatcher()
   const categories = [
     {
-      label: "Theme",
-      colors: [
-        "gray-50",
-        "gray-75",
-        "gray-100",
-        "gray-200",
-        "gray-300",
-        "gray-400",
-        "gray-500",
-        "gray-600",
-        "gray-700",
-        "gray-800",
-        "gray-900",
-      ],
-    },
-    {
-      label: "Colors",
+      label: "Theme colors",
       colors: [
         "red-100",
         "orange-100",
@@ -91,6 +75,49 @@
         "indigo-700",
         "magenta-700",
 
+        "gray-50",
+        "gray-75",
+        "gray-100",
+        "gray-200",
+        "gray-300",
+        "gray-400",
+        "gray-500",
+        "gray-600",
+        "gray-700",
+        "gray-800",
+        "gray-900",
+      ],
+    },
+    {
+      label: "Static colors",
+      colors: [
+        "static-red-400",
+        "static-orange-400",
+        "static-yellow-400",
+        "static-green-400",
+        "static-seafoam-400",
+        "static-blue-400",
+        "static-indigo-400",
+        "static-magenta-400",
+
+        "static-red-800",
+        "static-orange-800",
+        "static-yellow-800",
+        "static-green-800",
+        "static-seafoam-800",
+        "static-blue-800",
+        "static-indigo-800",
+        "static-magenta-800",
+
+        "static-red-1200",
+        "static-orange-1200",
+        "static-yellow-1200",
+        "static-green-1200",
+        "static-seafoam-1200",
+        "static-blue-1200",
+        "static-indigo-1200",
+        "static-magenta-1200",
+
         "static-white",
         "static-black",
       ],
@@ -137,10 +164,13 @@
         : "var(--spectrum-global-color-gray-50)"
     }
 
-    // Use contrasating check for the dim colours
+    // Use contrasting check for the dim colours
     if (value?.includes("-100")) {
       return "var(--spectrum-global-color-gray-900)"
     }
+    if (value?.includes("-1200") || value?.includes("-800")) {
+      return "var(--spectrum-global-color-static-gray-50)"
+    }
 
     // Use black check for static white
     if (value?.includes("static-black")) {
@@ -169,7 +199,7 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<Popover bind:this={dropdown} anchor={preview} maxHeight={320} {offset} {align}>
+<Popover bind:this={dropdown} anchor={preview} maxHeight={350} {offset} {align}>
   <Layout paddingX="XL" paddingY="L">
     <div class="container">
       {#each categories as category}

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

@@ -1,52 +1,71 @@
 <script lang="ts">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
-  import type { FocusEventHandler } from "svelte/elements"
 
-  export let value: string | null = null
-  export let placeholder: string | null = null
-  export let disabled = false
-  export let readonly = false
-  export let id: string | null = null
-  export let height: number | null = null
-  export let minHeight: number | null = null
+  export let value: string | undefined = ""
+  export let placeholder: string | undefined = undefined
+  export let disabled: boolean = false
+  export let readonly: boolean = false
+  export let id: string | undefined = undefined
+  export let height: string | number | undefined = undefined
+  export let minHeight: string | number | undefined = undefined
   export let align = null
+  export let updateOnChange: boolean = false
 
-  let isFocused = false
+  export const getCaretPosition = () => ({
+    start: textarea.selectionStart,
+    end: textarea.selectionEnd,
+  })
+
+  const dispatch = createEventDispatcher()
+
+  let focus = false
   let textarea: HTMLTextAreaElement
-  const dispatch = createEventDispatcher<{ change: string }>()
-  const onChange: FocusEventHandler<HTMLTextAreaElement> = event => {
-    dispatch("change", event.currentTarget.value)
-    isFocused = false
+  let scrollable = false
+
+  $: heightString = getStyleString("height", height)
+  $: minHeightString = getStyleString("min-height", minHeight)
+  $: dispatch("scrollable", scrollable)
+
+  const onBlur = () => {
+    focus = false
+    updateValue()
   }
 
-  export function focus() {
-    textarea.focus()
+  const onChange = () => {
+    scrollable = textarea.clientHeight < textarea.scrollHeight
+    if (!updateOnChange) {
+      return
+    }
+    updateValue()
   }
 
-  export function contents() {
-    return textarea.value
+  const updateValue = () => {
+    if (readonly || disabled) {
+      return
+    }
+    dispatch("change", textarea.value)
   }
 
-  const getStyleString = (attribute: string, value: number | null) => {
-    if (!attribute || value == null) {
+  const getStyleString = (
+    attribute: string,
+    value: string | number | undefined
+  ) => {
+    if (value == null) {
       return ""
     }
-    if (typeof value === "number" && isNaN(value)) {
+    if (typeof value !== "number" || isNaN(value)) {
       return `${attribute}:${value};`
     }
     return `${attribute}:${value}px;`
   }
-
-  $: heightString = getStyleString("height", height)
-  $: minHeightString = getStyleString("min-height", minHeight)
 </script>
 
 <div
   style={`${heightString}${minHeightString}`}
   class="spectrum-Textfield spectrum-Textfield--multiline"
   class:is-disabled={disabled}
-  class:is-focused={isFocused}
+  class:is-focused={focus}
 >
   <!-- prettier-ignore -->
   <textarea
@@ -57,8 +76,10 @@
     {disabled}
     {readonly}
     {id}
-    on:focus={() => (isFocused = true)}
-    on:blur={onChange}
+    on:input={onChange}
+    on:focus={() => (focus = true)}
+    on:blur={onBlur}
+    on:blur
     on:keypress
   >{value || ""}</textarea>
 </div>

packages/bbui/src/Markdown/MarkdownViewer.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import SpectrumMDE from "./SpectrumMDE.svelte"
 
-  export let value: string | null = null
-  export let height: string | null = null
+  export let value: string | undefined = undefined
+  export let height: string | undefined = undefined
 
   let mde: any
 
@@ -40,6 +40,7 @@
     border: none;
     background: transparent;
     padding: 0;
+    color: inherit;
   }
   .markdown-viewer :global(.EasyMDEContainer) {
     background: transparent;

packages/bbui/src/bbui.css

@@ -11,6 +11,16 @@
   --bb-forest-green: #053835;
   --bb-beige: #f6efea;
 
+  /* Custom spectrum additions */
+  --spectrum-global-color-static-red-1200: #740000;
+  --spectrum-global-color-static-orange-1200: #612300;
+  --spectrum-global-color-static-yellow-1200: #483300;
+  --spectrum-global-color-static-green-1200: #053f27;
+  --spectrum-global-color-static-seafoam-1200: #123c3a;
+  --spectrum-global-color-static-blue-1200: #003571;
+  --spectrum-global-color-static-indigo-1200: #262986;
+  --spectrum-global-color-static-magenta-1200: #700037;
+
   --grey-1: #fafafa;
   --grey-2: #f5f5f5;
   --grey-3: #eeeeee;

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { DrawerBindableInput } from "@/components/common/bindings"
+</script>
+
+<DrawerBindableInput
+  on:change
+  on:blur
+  on:drawerHide
+  on:drawerShow
+  {...$$props}
+  multiline
+/>

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

@@ -5,8 +5,8 @@
   import { appsStore } from "@/stores/portal"
   import { API } from "@/api"
   import { writable } from "svelte/store"
-  import { createValidationStore } from "@/helpers/validation/yup"
-  import * as appValidation from "@/helpers/validation/yup/app"
+  import { createValidationStore } from "@budibase/frontend-core/src/utils/validation/yup"
+  import * as appValidation from "@budibase/frontend-core/src/utils/validation/yup/app"
   import EditableIcon from "@/components/common/EditableIcon.svelte"
   import { isEqual } from "lodash"
   import { createEventDispatcher } from "svelte"

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Icon, Input, Drawer, Button } from "@budibase/bbui"
+  import { Icon, Input, Drawer, Button, CoreTextArea } from "@budibase/bbui"
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
@@ -25,11 +25,13 @@
   export let forceModal: boolean = false
   export let context = null
   export let autocomplete: boolean | undefined = undefined
+  export let multiline: boolean = false
 
   const dispatch = createEventDispatcher()
 
   let bindingDrawer: any
   let currentVal = value
+  let scrollable = false
 
   $: readableValue = runtimeToReadableBinding(bindings, value)
   $: tempValue = readableValue
@@ -63,14 +65,16 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="control" class:disabled>
-  <Input
+<div class="control" class:multiline class:disabled class:scrollable>
+  <svelte:component
+    this={multiline ? CoreTextArea : Input}
     {label}
     {disabled}
     readonly={isJS}
     value={isJS ? "(JavaScript function)" : readableValue}
     on:change={event => onChange(event.detail)}
     on:blur={onBlur}
+    on:scrollable={e => (scrollable = e.detail)}
     {placeholder}
     {updateOnChange}
     {autocomplete}
@@ -114,36 +118,38 @@
     position: relative;
   }
 
-  .icon {
-    right: 1px;
-    bottom: 1px;
-    position: absolute;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    box-sizing: border-box;
-    border-left: 1px solid var(--spectrum-alias-border-color);
-    border-top-right-radius: var(--spectrum-alias-border-radius-regular);
-    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
-    width: 31px;
-    color: var(--spectrum-alias-text-color);
-    background-color: var(--spectrum-global-color-gray-75);
-    transition: background-color
-        var(--spectrum-global-animation-duration-100, 130ms),
-      box-shadow var(--spectrum-global-animation-duration-100, 130ms),
-      border-color var(--spectrum-global-animation-duration-100, 130ms);
-    height: calc(var(--spectrum-alias-item-height-m) - 2px);
+  /* Multiline styles */
+  .control.multiline :global(textarea) {
+    min-height: 0 !important;
+    field-sizing: content;
+    max-height: 105px;
+    padding: 6px 11px 6px 11px;
+    height: auto;
+    resize: none;
+    flex: 1 1 auto;
+    width: 0;
   }
 
+  .icon {
+    right: 6px;
+    top: 8px;
+    position: absolute;
+    display: grid;
+    place-items: center;
+    box-sizing: border-box;
+    border-radius: 4px;
+    color: var(--spectrum-alias-text-color);
+  }
   .icon:hover {
     cursor: pointer;
-    color: var(--spectrum-alias-text-color-hover);
-    background-color: var(--spectrum-global-color-gray-50);
-    border-color: var(--spectrum-alias-border-color-hover);
+    color: var(--spectrum-global-color-blue-600);
+  }
+  .control.scrollable .icon {
+    right: 12px;
   }
 
-  .control:not(.disabled) :global(.spectrum-Textfield-input) {
-    padding-right: 40px;
+  .control:not(.disabled) :global(.spectrum-Textfield-input),
+  .control:not(.disabled) :global(textarea) {
+    padding-right: 26px;
   }
 </style>

packages/builder/src/components/design/settings/componentSettings.js

@@ -31,9 +31,11 @@ import FormStepConfiguration from "./controls/FormStepConfiguration.svelte"
 import FormStepControls from "./controls/FormStepControls.svelte"
 import PaywalledSetting from "./controls/PaywalledSetting.svelte"
 import TableConditionEditor from "./controls/TableConditionEditor.svelte"
+import MultilineDrawerBindableInput from "@/components/common/MultilineDrawerBindableInput.svelte"
 
 const componentMap = {
   text: DrawerBindableInput,
+  "text/multiline": MultilineDrawerBindableInput,
   plainText: Input,
   select: Select,
   radio: RadioGroup,

packages/builder/src/components/settings/ChangePasswordModal.svelte

@@ -1,34 +0,0 @@
-<script>
-  import { ModalContent, Body, notifications } from "@budibase/bbui"
-  import PasswordRepeatInput from "@/components/common/users/PasswordRepeatInput.svelte"
-  import { auth } from "@/stores/portal"
-
-  let password
-  let error
-
-  const updatePassword = async () => {
-    try {
-      await auth.updateSelf({ password })
-      notifications.success("Password changed successfully")
-    } catch (error) {
-      notifications.error("Failed to update password")
-    }
-  }
-
-  const handleKeydown = evt => {
-    if (evt.key === "Enter" && !error && password) {
-      updatePassword()
-    }
-  }
-</script>
-
-<svelte:window on:keydown={handleKeydown} />
-<ModalContent
-  title="Update password"
-  confirmText="Update password"
-  onConfirm={updatePassword}
-  disabled={error || !password}
->
-  <Body size="S">Enter your new password below.</Body>
-  <PasswordRepeatInput bind:password bind:error />
-</ModalContent>

packages/builder/src/components/settings/ProfileModal.svelte

@@ -1,29 +0,0 @@
-<script>
-  import { ModalContent, Body, Input, notifications } from "@budibase/bbui"
-  import { writable } from "svelte/store"
-  import { auth } from "@/stores/portal"
-
-  const values = writable({
-    firstName: $auth.user.firstName,
-    lastName: $auth.user.lastName,
-  })
-
-  const updateInfo = async () => {
-    try {
-      await auth.updateSelf($values)
-      notifications.success("Information updated successfully")
-    } catch (error) {
-      console.error(error)
-      notifications.error("Failed to update information")
-    }
-  }
-</script>
-
-<ModalContent title="My profile" confirmText="Save" onConfirm={updateInfo}>
-  <Body size="S">
-    Personalise the platform by adding your first name and last name.
-  </Body>
-  <Input disabled bind:value={$auth.user.email} label="Email" />
-  <Input bind:value={$values.firstName} label="First name" />
-  <Input bind:value={$values.lastName} label="Last name" />
-</ModalContent>

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

@@ -12,8 +12,8 @@
   import { appsStore, admin, auth } from "@/stores/portal"
   import { onMount } from "svelte"
   import { goto } from "@roxi/routify"
-  import { createValidationStore } from "@/helpers/validation/yup"
-  import * as appValidation from "@/helpers/validation/yup/app"
+  import { createValidationStore } from "@budibase/frontend-core/src/utils/validation/yup"
+  import * as appValidation from "@budibase/frontend-core/src/utils/validation/yup/app"
   import TemplateCard from "@/components/common/TemplateCard.svelte"
   import { lowercase } from "@/helpers"
   import { sdk } from "@budibase/shared-core"

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

@@ -6,9 +6,9 @@
     Layout,
     keepOpen,
   } from "@budibase/bbui"
-  import { createValidationStore } from "@/helpers/validation/yup"
+  import { createValidationStore } from "@budibase/frontend-core/src/utils/validation/yup"
   import { writable, get } from "svelte/store"
-  import * as appValidation from "@/helpers/validation/yup/app"
+  import * as appValidation from "@budibase/frontend-core/src/utils/validation/yup/app"
   import { appsStore, auth } from "@/stores/portal"
   import { onMount } from "svelte"
   import { API } from "@/api"

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

@@ -9,7 +9,7 @@
     notifications,
   } from "@budibase/bbui"
   import { downloadFile } from "@budibase/frontend-core"
-  import { createValidationStore } from "@/helpers/validation/yup"
+  import { createValidationStore } from "@budibase/frontend-core/src/utils/validation/yup"
 
   export let app
   export let published

packages/builder/src/constants/backend/index.ts

@@ -219,6 +219,7 @@ export const PrettyRelationshipDefinitions = {
 
 export const BUDIBASE_INTERNAL_DB_ID = INTERNAL_TABLE_SOURCE_ID
 export const DEFAULT_BB_DATASOURCE_ID = "datasource_internal_bb_default"
+export const DEFAULT_EMPLOYEE_TABLE_ID = "ta_bb_employee"
 export const BUDIBASE_DATASOURCE_TYPE = "budibase"
 export const DB_TYPE_INTERNAL = "internal"
 export const DB_TYPE_EXTERNAL = "external"

packages/builder/src/constants/index.ts

@@ -41,11 +41,6 @@ export const LAYOUT_NAMES = {
   },
 }
 
-// one or more word characters and whitespace
-export const APP_NAME_REGEX = /^[\w\s]+$/
-// zero or more non-whitespace characters
-export const APP_URL_REGEX = /^[0-9a-zA-Z-_]+$/
-
 export const DefaultAppTheme = {
   primaryColor: "var(--spectrum-global-color-blue-600)",
   primaryColorHover: "var(--spectrum-global-color-blue-500)",

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

@@ -28,13 +28,13 @@
     Constants,
     Utils,
     RoleUtils,
+    emailValidator,
   } from "@budibase/frontend-core"
   import { sdk } from "@budibase/shared-core"
   import { API } from "@/api"
   import GroupIcon from "../../../portal/users/groups/_components/GroupIcon.svelte"
   import RoleSelect from "@/components/common/RoleSelect.svelte"
   import UpgradeModal from "@/components/common/users/UpgradeModal.svelte"
-  import { emailValidator } from "@/helpers/validation"
   import { fly } from "svelte/transition"
   import InfoDisplay from "../design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
   import BuilderGroupPopover from "./BuilderGroupPopover.svelte"

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

@@ -1,13 +1,30 @@
-<script>
+<script lang="ts">
   import { redirect } from "@roxi/routify"
   import { TableNames } from "@/constants"
   import { datasources } from "@/stores/builder"
+  import { onMount } from "svelte"
 
-  $: {
+  onMount(() => {
+    // Get first valid table ID of first datasource
+    let tableId: string = TableNames.USERS
+    for (let ds of $datasources.list) {
+      if (Array.isArray(ds.entities) && ds.entities.length > 0) {
+        if (ds.entities[0]._id) {
+          tableId = ds.entities[0]._id
+          break
+        }
+      } else {
+        const keys = Object.keys(ds.entities || {})
+        if (keys.length > 0) {
+          tableId = keys[0]
+          break
+        }
+      }
+    }
     if ($datasources.hasData) {
-      $redirect(`./table/${TableNames.USERS}`)
+      $redirect(`./table/${tableId}`)
     } else {
       $redirect("./new")
     }
-  }
+  })
 </script>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte

@@ -2,6 +2,7 @@
   import StyleSection from "./StyleSection.svelte"
   import * as ComponentStyles from "./componentStyles"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
+  import ColorPicker from "@/components/design/settings/controls/ColorPicker.svelte"
 
   export let componentDefinition
   export let componentInstance
@@ -18,6 +19,19 @@
         styles.push(ComponentStyles[style])
       }
     })
+
+    // Add section for CSS variables if present
+    if (def?.cssVariables?.length) {
+      styles.push({
+        label: "Customization",
+        settings: def.cssVariables.map(variable => ({
+          label: variable.label,
+          key: variable.variable,
+          control: ColorPicker,
+        })),
+      })
+    }
+
     return styles
   }
 

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte

@@ -8,6 +8,7 @@
     Checkbox,
     notifications,
     Select,
+    Stepper,
   } from "@budibase/bbui"
   import {
     themeStore,
@@ -182,6 +183,16 @@
               options: screenRouteOptions,
             }}
           />
+          <PropertyControl
+            label="Logo height (px)"
+            control={Stepper}
+            value={$nav.logoHeight}
+            onChange={height => update("logoHeight", height)}
+            props={{
+              updateOnChange: false,
+              placeholder: "24",
+            }}
+          />
           <PropertyControl
             label="New tab"
             control={Checkbox}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte

@@ -18,6 +18,11 @@
   ghost.src =
     "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
 
+  // Aliases for other strings to match to when searching
+  const aliases = {
+    text: ["headline", "paragraph"],
+  }
+
   let searchString
   let searchRef
   let selectedIndex
@@ -148,11 +153,12 @@
   }
 
   const filterStructure = (structure, allowedComponents, search) => {
-    selectedIndex = search ? 0 : null
-    componentList = []
     if (!structure?.length) {
       return []
     }
+    search = search?.toLowerCase()
+    selectedIndex = search ? 0 : null
+    componentList = []
 
     // Return only items which match the search string
     let filteredStructure = []
@@ -161,8 +167,12 @@
         const name = child.name.toLowerCase()
 
         // Check if the component matches the search string
-        if (search && !name.includes(search.toLowerCase())) {
-          return false
+        if (search) {
+          const nameMatch = name.includes(search)
+          const aliasMatch = (aliases[name] || []).some(x => x.includes(search))
+          if (!nameMatch && !aliasMatch) {
+            return false
+          }
         }
 
         // Check if the component is allowed as a child

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json

@@ -32,8 +32,7 @@
     "name": "Basic",
     "icon": "TextParagraph",
     "children": [
-      "heading",
-      "text",
+      "textv2",
       "button",
       "buttongroup",
       "tag",

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

@@ -1,5 +1,5 @@
 <script>
   import { redirect } from "@roxi/routify"
 
-  $redirect("./data")
+  $redirect("./design")
 </script>

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

@@ -24,13 +24,13 @@
   import { goto } from "@roxi/routify"
   import { AppStatus } from "@/constants"
   import { gradient } from "@/actions"
-  import ProfileModal from "@/components/settings/ProfileModal.svelte"
-  import ChangePasswordModal from "@/components/settings/ChangePasswordModal.svelte"
+  import { ProfileModal, ChangePasswordModal } from "@budibase/frontend-core"
   import { processStringSync } from "@budibase/string-templates"
   import Spaceman from "assets/bb-space-man.svg"
   import Logo from "assets/bb-emblem.svg"
   import { UserAvatar } from "@budibase/frontend-core"
   import { helpers, sdk } from "@budibase/shared-core"
+  import { API } from "@/api"
 
   let loaded = false
   let userInfoModal
@@ -105,8 +105,8 @@
             <img class="logo" alt="logo" src={$organisation.logoUrl || Logo} />
             <ActionMenu align="right">
               <div slot="control" class="avatar">
-                <UserAvatar user={$auth.user} showTooltip={false} />
-                <Icon size="XL" name="ChevronDown" />
+                <UserAvatar size="M" user={$auth.user} showTooltip={false} />
+                <Icon size="L" name="ChevronDown" />
               </div>
               <MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>
                 My profile
@@ -201,10 +201,14 @@
     </Page>
   </div>
   <Modal bind:this={userInfoModal}>
-    <ProfileModal />
+    <ProfileModal {API} user={$auth.user} on:save={() => auth.getSelf()} />
   </Modal>
   <Modal bind:this={changePasswordModal}>
-    <ChangePasswordModal />
+    <ChangePasswordModal
+      {API}
+      passwordMinLength={$admin.passwordMinLength}
+      on:save={() => auth.getSelf()}
+    />
   </Modal>
 {/if}
 
@@ -239,6 +243,7 @@
     grid-template-columns: auto auto;
     place-items: center;
     grid-gap: var(--spacing-xs);
+    transition: filter 130ms ease-out;
   }
   .avatar:hover {
     cursor: pointer;

packages/builder/src/pages/builder/auth/reset.svelte

@@ -8,11 +8,10 @@
     notifications,
   } from "@budibase/bbui"
   import { goto, params } from "@roxi/routify"
-  import { auth, organisation } from "@/stores/portal"
+  import { auth, organisation, admin } from "@/stores/portal"
   import Logo from "assets/bb-emblem.svg"
-  import { TestimonialPage } from "@budibase/frontend-core/src/components"
+  import { TestimonialPage, PasswordRepeatInput } from "@budibase/frontend-core"
   import { onMount } from "svelte"
-  import PasswordRepeatInput from "../../../components/common/users/PasswordRepeatInput.svelte"
 
   const resetCode = $params["?code"]
   let form
@@ -80,9 +79,9 @@
       <Heading size="M">Reset your password</Heading>
       <Body size="M">Must contain at least 12 characters</Body>
       <PasswordRepeatInput
-        bind:passwordForm={form}
         bind:password
         bind:error={passwordError}
+        minLength={$admin.passwordMinLength || 12}
       />
       <Button secondary cta on:click={reset}>
         {#if loading}

packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte

@@ -2,11 +2,12 @@
   import { admin, auth } from "@/stores/portal"
   import { ActionMenu, MenuItem, Icon, Modal } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
-  import ProfileModal from "@/components/settings/ProfileModal.svelte"
-  import ChangePasswordModal from "@/components/settings/ChangePasswordModal.svelte"
+  import ProfileModal from "@budibase/frontend-core/src/components/ProfileModal.svelte"
+  import ChangePasswordModal from "@budibase/frontend-core/src/components/ChangePasswordModal.svelte"
   import ThemeModal from "@/components/settings/ThemeModal.svelte"
   import APIKeyModal from "@/components/settings/APIKeyModal.svelte"
   import { UserAvatar } from "@budibase/frontend-core"
+  import { API } from "@/api"
 
   let themeModal
   let profileModal
@@ -26,8 +27,8 @@
 
 <ActionMenu align="right">
   <div slot="control" class="user-dropdown">
-    <UserAvatar user={$auth.user} showTooltip={false} />
-    <Icon size="XL" name="ChevronDown" />
+    <UserAvatar size="M" user={$auth.user} showTooltip={false} />
+    <Icon size="L" name="ChevronDown" />
   </div>
   <MenuItem icon="UserEdit" on:click={() => profileModal.show()}>
     My profile
@@ -60,10 +61,14 @@
   <ThemeModal />
 </Modal>
 <Modal bind:this={profileModal}>
-  <ProfileModal />
+  <ProfileModal {API} user={$auth.user} on:save={() => auth.getSelf()} />
 </Modal>
 <Modal bind:this={updatePasswordModal}>
-  <ChangePasswordModal />
+  <ChangePasswordModal
+    {API}
+    passwordMinLength={$admin.passwordMinLength}
+    on:save={() => auth.getSelf()}
+  />
 </Modal>
 <Modal bind:this={apiKeyModal}>
   <APIKeyModal />
@@ -75,7 +80,8 @@
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
-    gap: var(--spacing-s);
+    gap: var(--spacing-xs);
+    transition: filter 130ms ease-out;
   }
   .user-dropdown:hover {
     cursor: pointer;

packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Button, FancyForm, FancyInput } from "@budibase/bbui"
   import PanelHeader from "./PanelHeader.svelte"
-  import { APP_URL_REGEX } from "@/constants"
+  import { Constants } from "@budibase/frontend-core"
 
   export let disabled
   export let name = ""
@@ -28,7 +28,7 @@
       return "URL must be provided"
     }
 
-    if (!APP_URL_REGEX.test(url)) {
+    if (!Constants.APP_URL_REGEX.test(url)) {
       return "Invalid URL"
     }
   }

packages/builder/src/pages/builder/portal/plugins/index.svelte

@@ -33,7 +33,6 @@
     },
     edit: {
       width: "auto",
-      borderLeft: true,
       displayName: "",
     },
   }

packages/builder/src/pages/builder/portal/users/users/_components/AddUserModal.svelte

@@ -10,8 +10,7 @@
     Icon,
   } from "@budibase/bbui"
   import { groups, licensing } from "@/stores/portal"
-  import { Constants } from "@budibase/frontend-core"
-  import { emailValidator } from "@/helpers/validation"
+  import { Constants, emailValidator } from "@budibase/frontend-core"
   import { capitalise } from "@/helpers"
 
   export let showOnboardingTypeModal

packages/builder/src/pages/builder/portal/users/users/_components/ImportUsersModal.svelte

@@ -8,8 +8,7 @@
     Icon,
   } from "@budibase/bbui"
   import { groups, licensing, admin } from "@/stores/portal"
-  import { emailValidator } from "@/helpers/validation"
-  import { Constants } from "@budibase/frontend-core"
+  import { emailValidator, Constants } from "@budibase/frontend-core"
   import { capitalise } from "@/helpers"
 
   const BYTES_IN_MB = 1000000

packages/builder/src/templates/screenTemplating/table/inline.js

@@ -5,10 +5,10 @@ import getValidRoute from "../getValidRoute"
 import { getRowActionButtonTemplates } from "@/templates/rowActions"
 
 const inline = async ({ tableOrView, permissions, screens }) => {
-  const heading = new Component("@budibase/standard-components/heading")
+  const heading = new Component("@budibase/standard-components/textv2")
     .instanceName("Table heading")
     .customProps({
-      text: tableOrView.name,
+      text: `## ${tableOrView.name}`,
     })
     .gridDesktopColSpan(1, 13)
     .gridDesktopRowSpan(1, 3)

packages/builder/src/templates/screenTemplating/table/modal.js

@@ -43,10 +43,10 @@ const modal = async ({ tableOrView, permissions, screens }) => {
     .gridDesktopColSpan(7, 13)
     .gridDesktopRowSpan(1, 3)
 
-  const heading = new Component("@budibase/standard-components/heading")
+  const heading = new Component("@budibase/standard-components/textv2")
     .instanceName("Table heading")
     .customProps({
-      text: tableOrView.name,
+      text: `## ${tableOrView.name}`,
     })
     .gridDesktopColSpan(1, 7)
     .gridDesktopRowSpan(1, 3)

packages/builder/src/templates/screenTemplating/table/newScreen.js

@@ -40,10 +40,10 @@ const getTableScreenTemplate = ({
     .gridDesktopColSpan(7, 13)
     .gridDesktopRowSpan(1, 3)
 
-  const heading = new Component("@budibase/standard-components/heading")
+  const heading = new Component("@budibase/standard-components/textv2")
     .instanceName("Table heading")
     .customProps({
-      text: tableOrView.name,
+      text: `## ${tableOrView.name}`,
     })
     .gridDesktopColSpan(1, 7)
     .gridDesktopRowSpan(1, 3)

packages/builder/src/templates/screenTemplating/table/sidePanel.js

@@ -41,10 +41,10 @@ const sidePanel = async ({ tableOrView, permissions, screens }) => {
     .gridDesktopColSpan(7, 13)
     .gridDesktopRowSpan(1, 3)
 
-  const heading = new Component("@budibase/standard-components/heading")
+  const heading = new Component("@budibase/standard-components/textv2")
     .instanceName("Table heading")
     .customProps({
-      text: tableOrView.name,
+      text: `## ${tableOrView.name}`,
     })
     .gridDesktopColSpan(1, 7)
     .gridDesktopRowSpan(1, 3)

packages/client/manifest.json

@@ -1048,6 +1048,7 @@
   },
   "text": {
     "name": "Paragraph",
+    "deprecated": true,
     "description": "A component for displaying paragraph text.",
     "icon": "TextParagraph",
     "illegalChildren": ["section"],
@@ -1171,6 +1172,7 @@
   },
   "heading": {
     "name": "Headline",
+    "deprecated": true,
     "icon": "TextBold",
     "description": "A component for displaying heading text",
     "illegalChildren": ["section"],
@@ -7582,6 +7584,15 @@
     "name": "Table",
     "icon": "Table",
     "styles": ["size"],
+    "cssVariables": [{
+      "label": "Header color",
+      "variable": "--custom-header-cell-background",
+      "type": "color"
+    }, {
+      "label": "Stripe color",
+      "variable": "--custom-stripe-cell-background",
+      "type": "color"
+    }],
     "size": {
       "width": 600,
       "height": 400
@@ -7689,7 +7700,7 @@
       },
       {
         "type": "boolean",
-        "label": "High contrast",
+        "label": "Striped rows",
         "key": "stripeRows",
         "defaultValue": false
       },
@@ -7990,5 +8001,62 @@
         }
       ]
     }
+  },
+  "textv2": {
+    "name": "Text",
+    "description": "A component for displaying text",
+    "icon": "Text",
+    "size": {
+      "width": 400,
+      "height": 24
+    },
+    "settings": [
+      {
+        "type": "text/multiline",
+        "label": "Text (Markdown supported)",
+        "key": "text",
+        "wide": true
+      },
+      {
+        "type": "select",
+        "label": "Alignment",
+        "key": "align",
+        "defaultValue": "left",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "Left",
+            "value": "left",
+            "barIcon": "TextAlignLeft",
+            "barTitle": "Align left"
+          },
+          {
+            "label": "Center",
+            "value": "center",
+            "barIcon": "TextAlignCenter",
+            "barTitle": "Align center"
+          },
+          {
+            "label": "Right",
+            "value": "right",
+            "barIcon": "TextAlignRight",
+            "barTitle": "Align right"
+          },
+          {
+            "label": "Justify",
+            "value": "justify",
+            "barIcon": "TextAlignJustify",
+            "barTitle": "Justify text"
+          }
+        ]
+      },
+      {
+        "type": "color",
+        "label": "Color",
+        "key": "color",
+        "showInBar": true
+      }
+    ]
   }
 }

packages/client/src/components/app/Layout.svelte

@@ -4,6 +4,7 @@
   import { Heading, Icon, clickOutside } from "@budibase/bbui"
   import { Constants } from "@budibase/frontend-core"
   import NavItem from "./NavItem.svelte"
+  import UserMenu from "./UserMenu.svelte"
 
   const sdk = getContext("sdk")
   const {
@@ -13,7 +14,6 @@
     builderStore,
     sidePanelStore,
     modalStore,
-    appStore,
   } = sdk
   const context = getContext("context")
   const navStateStore = writable({})
@@ -34,6 +34,7 @@
   export let navWidth
   export let pageWidth
   export let logoLinkUrl
+  export let logoHeight
   export let openLogoLinkInNewTab
   export let textAlign
   export let embedded = false
@@ -70,6 +71,7 @@
   $: navStyle = getNavStyle(
     navBackground,
     navTextColor,
+    logoHeight,
     $context.device.width,
     $context.device.height
   )
@@ -156,11 +158,6 @@
     return !url.startsWith("http") ? `http://${url}` : url
   }
 
-  const navigateToPortal = () => {
-    if ($builderStore.inBuilder) return
-    window.location.href = "/builder/apps"
-  }
-
   const getScreenXOffset = (navigation, mobile) => {
     if (navigation !== "Left") {
       return 0
@@ -175,7 +172,13 @@
     }
   }
 
-  const getNavStyle = (backgroundColor, textColor, width, height) => {
+  const getNavStyle = (
+    backgroundColor,
+    textColor,
+    logoHeight,
+    width,
+    height
+  ) => {
     let style = `--width:${width}px; --height:${height}px;`
     if (backgroundColor) {
       style += `--navBackground:${backgroundColor};`
@@ -183,6 +186,7 @@
     if (textColor) {
       style += `--navTextColor:${textColor};`
     }
+    style += `--logoHeight:${logoHeight || 24}px;`
     return style
   }
 
@@ -267,13 +271,8 @@
                 {/if}
               </div>
               {#if !embedded}
-                <div class="portal">
-                  <Icon
-                    hoverable
-                    name="Apps"
-                    on:click={navigateToPortal}
-                    disabled={$appStore.isDevApp}
-                  />
+                <div class="user top">
+                  <UserMenu compact />
                 </div>
               {/if}
             </div>
@@ -297,13 +296,11 @@
                     {navStateStore}
                   />
                 {/each}
-                <div class="close">
-                  <Icon
-                    hoverable
-                    name="Close"
-                    on:click={() => (mobileOpen = false)}
-                  />
-                </div>
+              </div>
+            {/if}
+            {#if !embedded}
+              <div class="user left">
+                <UserMenu />
               </div>
             {/if}
           </div>
@@ -394,21 +391,15 @@
     top: 0;
     left: 0;
   }
-  .layout--top .nav-wrapper {
-    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
-  }
-  .layout--left .nav-wrapper {
-    border-right: 1px solid var(--spectrum-global-color-gray-300);
-  }
 
   .nav {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    padding: 24px 32px 20px 32px;
+    padding: 18px 32px 18px 32px;
     max-width: 100%;
-    gap: var(--spacing-xl);
+    gap: var(--spacing-xs);
   }
   .nav :global(.spectrum-Icon) {
     color: var(--navTextColor);
@@ -522,7 +513,7 @@
     flex: 1 1 auto;
   }
   .logo img {
-    height: 36px;
+    height: var(--logoHeight);
   }
   .logo :global(h1) {
     font-weight: 600;
@@ -532,11 +523,8 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .portal {
-    display: grid;
-    place-items: center;
-  }
   .links {
+    flex: 1 0 auto;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -544,45 +532,38 @@
     gap: var(--spacing-xl);
     margin-top: var(--spacing-xl);
   }
-  .close {
-    display: none;
-    position: absolute;
-    top: var(--spacing-xl);
-    right: var(--spacing-xl);
-  }
   .mobile-click-handler {
     display: none;
   }
 
+  /* Left overrides for both desktop and mobile */
+  .nav--left {
+    overflow-y: auto;
+  }
+
   /* Desktop nav overrides */
   .desktop.layout--left .layout-body {
     flex-direction: row;
     overflow: hidden;
   }
-  .desktop.layout--left .nav-wrapper {
-    border-bottom: none;
-  }
   .desktop.layout--left .main-wrapper {
     height: 100%;
     overflow: auto;
   }
-  .desktop.layout--left .links {
-    overflow-y: auto;
-  }
-
   .desktop .nav--left {
     width: 250px;
     padding: var(--spacing-xl);
   }
-
   .desktop .nav--left .links {
     margin-top: var(--spacing-m);
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
+    gap: var(--spacing-xs);
   }
-  .desktop .nav--left .link {
-    font-size: var(--spectrum-global-dimension-font-size-150);
+  .desktop .nav--left .user.top,
+  .desktop .nav--top .user.left {
+    display: none;
   }
 
   /* Mobile nav overrides */
@@ -591,13 +572,9 @@
     top: 0;
     left: 0;
     box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.075);
-    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
-    border-right: none;
   }
-
-  /* Show close button in drawer */
-  .mobile .close {
-    display: block;
+  .mobile .user.left {
+    display: none;
   }
 
   /* Force standard top bar */
@@ -635,6 +612,7 @@
     left: -250px;
     transform: translateX(0);
     width: 250px;
+    max-width: 75%;
     transition: transform 0.26s ease-in-out, opacity 0.26s ease-in-out;
     height: var(--height);
     opacity: 0;
@@ -645,10 +623,10 @@
     align-items: stretch;
     padding: var(--spacing-xl);
     overflow-y: auto;
+    gap: var(--spacing-xs);
   }
-  .mobile .link {
-    width: calc(100% - 30px);
-    font-size: 120%;
+  .mobile .links :global(a) {
+    flex: 0 0 auto;
   }
   .mobile .links.visible {
     opacity: 1;

packages/client/src/components/app/NavItem.svelte

@@ -2,6 +2,7 @@
   import { createEventDispatcher } from "svelte"
   import active from "svelte-spa-router/active"
   import { Icon } from "@budibase/bbui"
+  import { builderStore, screenStore } from "@/stores"
 
   export let type
   export let url
@@ -16,7 +17,16 @@
 
   let renderKey
 
-  $: expanded = !!$navStateStore[text]
+  $: isBuilderActive = testUrl => {
+    return (
+      $builderStore.inBuilder &&
+      testUrl &&
+      testUrl === $screenStore.activeScreen?.routing?.route
+    )
+  }
+  $: builderActive = isBuilderActive(url)
+  $: containsActiveLink = (subLinks || []).some(x => isBuilderActive(x.url))
+  $: expanded = !!$navStateStore[text] || containsActiveLink
   $: renderLeftNav = leftNav || mobile
   $: icon = !renderLeftNav || expanded ? "ChevronDown" : "ChevronRight"
 
@@ -47,7 +57,7 @@
       href="#{url}"
       on:click={onClickLink}
       use:active={url}
-      class:active={false}
+      class:builderActive
     >
       {text}
     </a>
@@ -73,6 +83,9 @@
                 href="#{subLink.url}"
                 on:click={onClickLink}
                 use:active={subLink.url}
+                class:active={false}
+                class:builderActive={isBuilderActive(subLink.url)}
+                class="sublink"
               >
                 {subLink.text}
               </a>
@@ -91,22 +104,29 @@
 <style>
   /* Generic styles */
   a,
+  .dropdown .text {
+    padding: 4px 8px;
+    border-radius: 4px;
+  }
+  a,
   .text span {
     opacity: 0.75;
     color: var(--navTextColor);
-    font-size: var(--spectrum-global-dimension-font-size-200);
+    font-size: var(--spectrum-global-dimension-font-size-150);
     transition: opacity 130ms ease-out;
-    font-weight: 600;
     user-select: none;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  a.active {
+  a.active:not(.sublink),
+  a.builderActive:not(.sublink),
+  .dropdown.left a.sublink.active,
+  .dropdown.left a.sublink.builderActive {
+    background: rgba(0, 0, 0, 0.15);
     opacity: 1;
   }
   a:hover,
-  .dropdown:not(.left.expanded):hover .text,
-  .text:hover {
+  .text:hover span {
     cursor: pointer;
     opacity: 1;
   }
@@ -167,8 +187,4 @@
   .dropdown.dropdown.left.expanded .sublinks {
     display: contents;
   }
-  .dropdown.left a {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
 </style>

packages/client/src/components/app/Text.svelte

@@ -1,105 +1,44 @@
-<script>
+<script lang="ts">
   import { getContext } from "svelte"
+  import { MarkdownViewer } from "@budibase/bbui"
+
+  export let text: string = ""
+  export let color: string | undefined = undefined
+  export let align: "left" | "center" | "right" | "justify" = "left"
 
-  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
+  const { styleable } = getContext("sdk")
 
-  export let text
-  export let color
-  export let align
-  export let bold
-  export let italic
-  export let underline
-  export let size
+  // Add in certain settings to styles
+  $: styles = enrichStyles($component.styles, color, align)
 
-  let node
-  let touched = false
-
-  $: $component.editing && node?.focus()
-  $: placeholder = $builderStore.inBuilder && !text && !$component.editing
-  $: componentText = getComponentText(text, $builderStore, $component)
-  $: sizeClass = `spectrum-Body--size${size || "M"}`
-  $: alignClass = `align--${align || "left"}`
-
-  // Add color styles to main styles object, otherwise the styleable helper
-  // overrides the color when it's passed as inline style.
-  $: styles = enrichStyles($component.styles, color)
-
-  const getComponentText = (text, builderState, componentState) => {
-    if (!builderState.inBuilder || componentState.editing) {
-      return text || ""
+  const enrichStyles = (
+    styles: any,
+    colorStyle: typeof color,
+    alignStyle: typeof align
+  ) => {
+    let additions: Record<string, string> = {
+      "text-align": alignStyle,
     }
-    return text || componentState.name || "Placeholder text"
-  }
-
-  const enrichStyles = (styles, color) => {
-    if (!color) {
-      return styles
+    if (colorStyle) {
+      additions.color = colorStyle
     }
     return {
       ...styles,
       normal: {
-        ...styles?.normal,
-        color,
+        ...styles.normal,
+        ...additions,
       },
     }
   }
-
-  // Convert contenteditable HTML to text and save
-  const updateText = e => {
-    if (touched) {
-      builderStore.actions.updateProp("text", e.target.textContent)
-    }
-    touched = false
-  }
 </script>
 
-{#key $component.editing}
-  <p
-    bind:this={node}
-    contenteditable={$component.editing}
-    use:styleable={styles}
-    class:placeholder
-    class:bold
-    class:italic
-    class:underline
-    class="spectrum-Body {sizeClass} {alignClass}"
-    on:blur={$component.editing ? updateText : null}
-    on:input={() => (touched = true)}
-  >
-    {componentText}
-  </p>
-{/key}
+<div use:styleable={styles}>
+  <MarkdownViewer value={text} />
+</div>
 
 <style>
-  p {
-    display: inline-block;
-    white-space: pre-wrap;
-    margin: 0;
-  }
-  .placeholder {
-    font-style: italic;
-    color: var(--spectrum-global-color-gray-600);
-  }
-  .bold {
-    font-weight: 600;
-  }
-  .italic {
-    font-style: italic;
-  }
-  .underline {
-    text-decoration: underline;
-  }
-  .align--left {
-    text-align: left;
-  }
-  .align--center {
-    text-align: center;
-  }
-  .align--right {
-    text-align: right;
-  }
-  .align--justify {
-    text-align: justify;
+  div :global(img) {
+    max-width: 100%;
   }
 </style>

packages/client/src/components/app/UserMenu.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import { ActionMenu, Icon, MenuItem, Modal } from "@budibase/bbui"
+  import {
+    UserAvatar,
+    ProfileModal,
+    ChangePasswordModal,
+  } from "@budibase/frontend-core"
+  import { getContext } from "svelte"
+  import { type User, type ContextUser, isSSOUser } from "@budibase/types"
+  import { sdk } from "@budibase/shared-core"
+  import { API } from "@/api"
+
+  export let compact: boolean = false
+
+  const { authStore, environmentStore, notificationStore, appStore } =
+    getContext("sdk")
+
+  let profileModal: any
+  let changePasswordModal: any
+
+  $: text = getText($authStore)
+  $: isBuilder = sdk.users.hasBuilderPermissions($authStore)
+  $: isSSO = $authStore != null && isSSOUser($authStore)
+  $: isOwner = $authStore?.accountPortalAccess && $environmentStore.cloud
+  $: embedded = $appStore.embedded || $appStore.inIframe
+
+  const getText = (user?: User | ContextUser): string => {
+    if (!user) {
+      return ""
+    }
+    if (user.firstName) {
+      let text = user.firstName
+      if (user.lastName) {
+        text += ` ${user.lastName}`
+      }
+      return text
+    } else {
+      return user.email
+    }
+  }
+
+  const goToPortal = () => {
+    window.location.href = isBuilder ? "/builder/portal/apps" : "/builder/apps"
+  }
+</script>
+
+{#if $authStore}
+  <ActionMenu align={compact ? "right" : "left"}>
+    <svelte:fragment slot="control">
+      <div class="container">
+        <UserAvatar user={$authStore} size="M" showTooltip={false} />
+        {#if !compact}
+          <div class="text">
+            <div class="name">
+              {text}
+            </div>
+          </div>
+        {/if}
+        <Icon size="L" name="ChevronDown" />
+      </div>
+    </svelte:fragment>
+
+    <MenuItem icon="UserEdit" on:click={() => profileModal?.show()}>
+      My profile
+    </MenuItem>
+    {#if !isSSO}
+      <MenuItem
+        icon="LockClosed"
+        on:click={() => {
+          if (isOwner) {
+            window.location.href = `${$environmentStore.accountPortalUrl}/portal/account`
+          } else {
+            changePasswordModal?.show()
+          }
+        }}
+      >
+        Update password
+      </MenuItem>
+    {/if}
+
+    <MenuItem icon="Apps" on:click={goToPortal} disabled={embedded}>
+      Go to portal
+    </MenuItem>
+    <MenuItem
+      icon="LogOut"
+      on:click={authStore.actions.logOut}
+      disabled={embedded}
+    >
+      Log out
+    </MenuItem>
+  </ActionMenu>
+
+  <Modal bind:this={profileModal}>
+    <ProfileModal
+      {API}
+      user={$authStore}
+      on:save={() => authStore.actions.fetchUser()}
+      notifySuccess={notificationStore.actions.success}
+      notifyError={notificationStore.actions.error}
+    />
+  </Modal>
+  <Modal bind:this={changePasswordModal}>
+    <ChangePasswordModal
+      {API}
+      passwordMinLength={$environmentStore.passwordMinLength}
+      on:save={() => authStore.actions.logOut()}
+      notifySuccess={notificationStore.actions.success}
+      notifyError={notificationStore.actions.error}
+    />
+  </Modal>
+{/if}
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--spacing-xs);
+    transition: filter 130ms ease-out;
+    overflow: hidden;
+  }
+  .text {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    color: var(--navTextColor);
+    display: flex;
+    margin-left: var(--spacing-xs);
+    overflow: hidden;
+  }
+  .name {
+    font-weight: 600;
+    font-size: 14px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 100%;
+  }
+  .container:hover {
+    cursor: pointer;
+    filter: brightness(110%);
+  }
+</style>

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

@@ -125,9 +125,9 @@
           order={0}
         >
           <BlockComponent
-            type="heading"
+            type="textv2"
             props={{
-              text: title,
+              text: title ? `## ${title}` : "",
             }}
             order={0}
           />

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

@@ -148,7 +148,10 @@
               }}
               order={0}
             >
-              <BlockComponent type="heading" props={{ text: step.title }} />
+              <BlockComponent
+                type="textv2"
+                props={{ text: `## ${step.title}` }}
+              />
               {#if buttonPosition === "top"}
                 <BlockComponent
                   type="buttongroup"
@@ -157,7 +160,7 @@
               {/if}
             </BlockComponent>
           </BlockComponent>
-          <BlockComponent type="text" props={{ text: step.desc }} order={1} />
+          <BlockComponent type="textv2" props={{ text: step.desc }} order={1} />
 
           <BlockComponent type="container" order={2}>
             <div

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

@@ -190,7 +190,7 @@
         }}
       />
       <BlockComponent
-        type="text"
+        type="textv2"
         order={1}
         props={{
           text: "Select a row to view its fields",

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

@@ -74,11 +74,11 @@
             order={0}
           >
             <BlockComponent
-              type="heading"
-              props={{ text: title || "" }}
+              type="textv2"
+              props={{ text: title ? `## ${title}` : "" }}
               order={0}
             />
-            {#if buttonPosition == "top"}
+            {#if buttonPosition === "top"}
               <BlockComponent
                 type="buttongroup"
                 props={{
@@ -93,7 +93,7 @@
         </BlockComponent>
       {/if}
       {#if description}
-        <BlockComponent type="text" props={{ text: description }} order={1} />
+        <BlockComponent type="textv2" props={{ text: description }} order={1} />
       {/if}
       <BlockComponent type="container">
         <div class="form-block fields" class:mobile={$context.device.mobile}>

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

@@ -184,9 +184,9 @@
           order={0}
         >
           <BlockComponent
-            type="heading"
+            type="textv2"
             props={{
-              text: title,
+              text: title ? `## ${title}` : "",
             }}
             order={0}
           />

packages/client/src/components/app/deprecated/Text.svelte

@@ -0,0 +1,105 @@
+<script>
+  import { getContext } from "svelte"
+
+  const { styleable, builderStore } = getContext("sdk")
+  const component = getContext("component")
+
+  export let text
+  export let color
+  export let align
+  export let bold
+  export let italic
+  export let underline
+  export let size
+
+  let node
+  let touched = false
+
+  $: $component.editing && node?.focus()
+  $: placeholder = $builderStore.inBuilder && !text && !$component.editing
+  $: componentText = getComponentText(text, $builderStore, $component)
+  $: sizeClass = `spectrum-Body--size${size || "M"}`
+  $: alignClass = `align--${align || "left"}`
+
+  // Add color styles to main styles object, otherwise the styleable helper
+  // overrides the color when it's passed as inline style.
+  $: styles = enrichStyles($component.styles, color)
+
+  const getComponentText = (text, builderState, componentState) => {
+    if (!builderState.inBuilder || componentState.editing) {
+      return text || ""
+    }
+    return text || componentState.name || "Placeholder text"
+  }
+
+  const enrichStyles = (styles, color) => {
+    if (!color) {
+      return styles
+    }
+    return {
+      ...styles,
+      normal: {
+        ...styles?.normal,
+        color,
+      },
+    }
+  }
+
+  // Convert contenteditable HTML to text and save
+  const updateText = e => {
+    if (touched) {
+      builderStore.actions.updateProp("text", e.target.textContent)
+    }
+    touched = false
+  }
+</script>
+
+{#key $component.editing}
+  <p
+    bind:this={node}
+    contenteditable={$component.editing}
+    use:styleable={styles}
+    class:placeholder
+    class:bold
+    class:italic
+    class:underline
+    class="spectrum-Body {sizeClass} {alignClass}"
+    on:blur={$component.editing ? updateText : null}
+    on:input={() => (touched = true)}
+  >
+    {componentText}
+  </p>
+{/key}
+
+<style>
+  p {
+    display: inline-block;
+    white-space: pre-wrap;
+    margin: 0;
+  }
+  .placeholder {
+    font-style: italic;
+    color: var(--spectrum-global-color-gray-600);
+  }
+  .bold {
+    font-weight: 600;
+  }
+  .italic {
+    font-style: italic;
+  }
+  .underline {
+    text-decoration: underline;
+  }
+  .align--left {
+    text-align: left;
+  }
+  .align--center {
+    text-align: center;
+  }
+  .align--right {
+    text-align: right;
+  }
+  .align--justify {
+    text-align: justify;
+  }
+</style>

packages/client/src/components/app/index.js

@@ -20,10 +20,8 @@ export { default as screenslot } from "./ScreenSlot.svelte"
 export { default as button } from "./Button.svelte"
 export { default as buttongroup } from "./ButtonGroup.svelte"
 export { default as repeater } from "./Repeater.svelte"
-export { default as text } from "./Text.svelte"
 export { default as layout } from "./Layout.svelte"
 export { default as link } from "./Link.svelte"
-export { default as heading } from "./Heading.svelte"
 export { default as image } from "./Image.svelte"
 export { default as embed } from "./Embed.svelte"
 export { default as icon } from "./Icon.svelte"
@@ -37,6 +35,7 @@ export { default as embeddedmap } from "./embedded-map/EmbeddedMap.svelte"
 export { default as sidepanel } from "./SidePanel.svelte"
 export { default as modal } from "./Modal.svelte"
 export { default as gridblock } from "./GridBlock.svelte"
+export { default as textv2 } from "./Text.svelte"
 export * from "./charts"
 export * from "./forms"
 export * from "./blocks"
@@ -50,3 +49,5 @@ export { default as cardhorizontal } from "./deprecated/CardHorizontal.svelte"
 export { default as stackedlist } from "./deprecated/StackedList.svelte"
 export { default as card } from "./deprecated/Card.svelte"
 export { default as section } from "./deprecated/Section.svelte"
+export { default as text } from "./deprecated/Text.svelte"
+export { default as heading } from "./deprecated/Heading.svelte"

packages/client/src/context.d.ts

@@ -1,6 +1,7 @@
 import { Writable } from "svelte"
-import { Component, FieldGroupContext, FormContext, SDK } from "@/types"
+import { Component, FieldGroupContext, FormContext } from "@/types"
 import { Readable } from "svelte/store"
+import { SDK } from "@/index.ts"
 
 declare module "svelte" {
   export function getContext(key: "sdk"): SDK

packages/client/src/index.ts

@@ -1,6 +1,7 @@
 import ClientApp from "./components/ClientApp.svelte"
 import UpdatingApp from "./components/UpdatingApp.svelte"
 import {
+  authStore,
   builderStore,
   appStore,
   blockStore,
@@ -11,6 +12,7 @@ import {
   hoverStore,
   stateStore,
   routeStore,
+  notificationStore,
 } from "@/stores"
 import { get } from "svelte/store"
 import { initWebsocket } from "@/websocket"
@@ -26,6 +28,8 @@ import {
   UIComponentError,
   CustomComponent,
 } from "@budibase/types"
+import { ActionTypes } from "@/constants"
+import { APIClient } from "@budibase/frontend-core"
 
 // Provide svelte and svelte/internal as globals for custom components
 import * as svelte from "svelte"
@@ -37,7 +41,6 @@ window.svelte = svelte
 // Initialise spectrum icons
 // eslint-disable-next-line local-rules/no-budibase-imports
 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-vite.js"
-
 loadSpectrumIcons()
 
 // Extend global window scope
@@ -74,6 +77,20 @@ declare global {
 
 export type Context = Readable<Record<string, any>>
 
+export interface SDK {
+  API: APIClient
+  styleable: any
+  Provider: any
+  ActionTypes: typeof ActionTypes
+  fetchDatasourceSchema: any
+  generateGoldenSample: any
+  builderStore: typeof builderStore
+  authStore: typeof authStore
+  notificationStore: typeof notificationStore
+  environmentStore: typeof environmentStore
+  appStore: typeof appStore
+}
+
 let app: ClientApp
 
 const loadBudibase = async () => {

packages/client/src/stores/app.js

@@ -6,6 +6,7 @@ const initialState = {
   isDevApp: false,
   clientLoadTime: window.INIT_TIME ? Date.now() - window.INIT_TIME : null,
   embedded: false,
+  inIframe: window.self !== window.top,
 }
 
 const createAppStore = () => {

packages/client/src/stores/auth.ts

@@ -1,38 +1,52 @@
 import { API } from "@/api"
 import { writable } from "svelte/store"
+import {
+  AppSelfResponse,
+  ContextUserMetadata,
+  GetGlobalSelfResponse,
+} from "@budibase/types"
+
+type AuthState = ContextUserMetadata | GetGlobalSelfResponse | undefined
 
 const createAuthStore = () => {
-  const store = writable<{
-    csrfToken?: string
-  } | null>(null)
+  const store = writable<AuthState>()
+
+  const hasAppSelfUser = (
+    user: AppSelfResponse | null
+  ): user is ContextUserMetadata => {
+    return user != null && "_id" in user
+  }
 
   // Fetches the user object if someone is logged in and has reloaded the page
   const fetchUser = async () => {
-    let globalSelf = null
-    let appSelf = null
+    let globalSelf, appSelf
 
     // First try and get the global user, to see if we are logged in at all
     try {
       globalSelf = await API.fetchBuilderSelf()
     } catch (error) {
-      store.set(null)
+      store.set(undefined)
       return
     }
 
     // Then try and get the user for this app to provide via context
     try {
-      appSelf = await API.fetchSelf()
+      const res = await API.fetchSelf()
+      if (hasAppSelfUser(res)) {
+        appSelf = res
+      }
     } catch (error) {
       // Swallow
     }
 
     // Use the app self if present, otherwise fallback to the global self
-    store.set(appSelf || globalSelf || null)
+    store.set(appSelf || globalSelf)
   }
 
   const logOut = async () => {
     try {
       await API.logOut()
+      window.location.href = "/"
     } catch (error) {
       // Do nothing
     }

packages/client/src/stores/environment.ts

@@ -1,13 +1,23 @@
 import { API } from "@/api"
 import { writable } from "svelte/store"
+import type { GetEnvironmentResponse } from "@budibase/types"
 
-const initialState = {
-  loaded: false,
+interface EnvironmentState extends GetEnvironmentResponse {
+  loaded: boolean
+}
+
+const initialState: EnvironmentState = {
+  multiTenancy: false,
+  offlineMode: false,
   cloud: false,
+  disableAccountPortal: false,
+  isDev: false,
+  maintenance: [],
+  loaded: false,
 }
 
 const createEnvironmentStore = () => {
-  const store = writable(initialState)
+  const store = writable<EnvironmentState>(initialState)
 
   const actions = {
     fetchEnvironment: async () => {

packages/client/src/types/index.ts

@@ -1,4 +1,3 @@
 export * from "./components"
 export * from "./fields"
 export * from "./forms"
-export * from "./sdk"

packages/client/src/types/sdk.ts

@@ -1,24 +0,0 @@
-import { ActionTypes } from "@/constants"
-import { APIClient } from "@budibase/frontend-core"
-import { Readable } from "svelte/store"
-
-export interface SDK {
-  API: APIClient
-  styleable: any
-  Provider: any
-  ActionTypes: typeof ActionTypes
-  fetchDatasourceSchema: any
-  generateGoldenSample: any
-  builderStore: Readable<{
-    inBuilder: boolean
-  }> & {
-    actions: {
-      highlightSetting: (key: string) => void
-      addParentComponent: (
-        componentId: string,
-        fullAncestorType: string
-      ) => void
-      updateProp: (key: string, value: any) => void
-    }
-  }
-}

packages/frontend-core/src/components/ChangePasswordModal.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { ModalContent, Body, notifications } from "@budibase/bbui"
+  import PasswordRepeatInput from "./PasswordRepeatInput.svelte"
+  import type { APIClient } from "@budibase/frontend-core"
+  import { createEventDispatcher } from "svelte"
+
+  export let API: APIClient
+  export let passwordMinLength: string | undefined = undefined
+  export let notifySuccess = notifications.success
+  export let notifyError = notifications.error
+
+  const dispatch = createEventDispatcher()
+
+  let password: string = ""
+  let error: string = ""
+
+  const updatePassword = async () => {
+    try {
+      await API.updateSelf({ password })
+      notifySuccess("Password changed successfully")
+      dispatch("save")
+    } catch (error) {
+      notifyError("Failed to update password")
+    }
+  }
+
+  const handleKeydown = (evt: KeyboardEvent) => {
+    if (evt.key === "Enter" && !error && password) {
+      updatePassword()
+    }
+  }
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+<ModalContent
+  title="Update password"
+  confirmText="Update password"
+  onConfirm={updatePassword}
+  disabled={!!error || !password}
+>
+  <Body size="S">Enter your new password below.</Body>
+  <PasswordRepeatInput bind:password bind:error minLength={passwordMinLength} />
+</ModalContent>

packages/frontend-core/src/components/PasswordRepeatInput.svelte

@@ -1,20 +1,14 @@
 <script>
   import { FancyForm, FancyInput } from "@budibase/bbui"
-  import {
-    createValidationStore,
-    requiredValidator,
-  } from "@/helpers/validation"
-  import { admin } from "@/stores/portal"
+  import { createValidationStore, requiredValidator } from "../utils/validation"
 
   export let password
-  export let passwordForm
   export let error
-
-  $: passwordMinLength = $admin.passwordMinLength ?? 12
+  export let minLength = "12"
 
   const validatePassword = value => {
-    if (!value || value.length < passwordMinLength) {
-      return `Please enter at least ${passwordMinLength} characters. We recommend using machine generated or random passwords.`
+    if (!value || value.length < minLength) {
+      return `Please enter at least ${minLength} characters. We recommend using machine generated or random passwords.`
     }
     return null
   }
@@ -41,7 +35,7 @@
     firstPasswordError
 </script>
 
-<FancyForm bind:this={passwordForm}>
+<FancyForm>
   <FancyInput
     label="Password"
     type="password"

packages/frontend-core/src/components/ProfileModal.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { writable } from "svelte/store"
+  import { ModalContent, Body, Input, notifications } from "@budibase/bbui"
+  import type { User, ContextUser } from "@budibase/types"
+  import type { APIClient } from "@budibase/frontend-core"
+  import { createEventDispatcher } from "svelte"
+
+  export let user: User | ContextUser | undefined = undefined
+  export let API: APIClient
+  export let notifySuccess = notifications.success
+  export let notifyError = notifications.error
+
+  const dispatch = createEventDispatcher()
+
+  const values = writable({
+    firstName: user?.firstName,
+    lastName: user?.lastName,
+  })
+
+  const updateInfo = async () => {
+    try {
+      await API.updateSelf($values)
+      notifySuccess("Information updated successfully")
+      dispatch("save")
+    } catch (error) {
+      console.error(error)
+      notifyError("Failed to update information")
+    }
+  }
+</script>
+
+<ModalContent title="My profile" confirmText="Save" onConfirm={updateInfo}>
+  <Body size="S">
+    Personalise the platform by adding your first name and last name.
+  </Body>
+  <Input disabled value={user?.email || ""} label="Email" />
+  <Input bind:value={$values.firstName} label="First name" />
+  <Input bind:value={$values.lastName} label="Last name" />
+</ModalContent>

packages/frontend-core/src/components/grid/cells/GutterCell.svelte

@@ -56,7 +56,7 @@
   rowIdx={row?.__idx}
   metadata={row?.__metadata?.row}
 >
-  <div class="gutter">
+  <div class="gutter" class:selectable={$config.canSelectRows}>
     {#if $$slots.default}
       <slot />
     {:else}
@@ -116,12 +116,9 @@
     margin: 3px 0 0 0;
   }
   .number {
-    color: val(--cell-font-color, var(--spectrum-global-color-gray-500));
-  }
-  .checkbox.visible,
-  .number.visible {
-    display: flex;
+    color: var(--spectrum-global-color-gray-500);
   }
+
   .delete,
   .expand {
     margin-right: 4px;
@@ -137,4 +134,11 @@
   .delete:hover :global(.spectrum-Icon) {
     color: var(--spectrum-global-color-red-600) !important;
   }
+
+  /* Visibility of checkbox and number */
+  .gutter.selectable .checkbox.visible,
+  .number.visible,
+  .gutter:not(.selectable) .number {
+    display: flex;
+  }
 </style>

packages/frontend-core/src/components/grid/cells/HeaderCell.svelte

@@ -303,9 +303,11 @@
       />
     {/if}
 
-    <div class="column-icon">
-      <Icon size="S" name={getColumnIcon(column)} />
-    </div>
+    {#if !$config.quiet}
+      <div class="column-icon">
+        <Icon size="S" name={getColumnIcon(column)} />
+      </div>
+    {/if}
     <div class="search-icon" on:click={startSearching}>
       <Icon hoverable size="S" name="Search" />
     </div>
@@ -431,7 +433,7 @@
   .header-cell :global(.cell) {
     padding: 0 var(--cell-padding);
     gap: calc(2 * var(--cell-spacing));
-    background: var(--grid-background-alt);
+    background: var(--header-cell-background);
   }
 
   /* Icon colors */
@@ -463,6 +465,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    font-weight: bold;
   }
   .header-cell.searching .name {
     opacity: 0;

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -217,6 +217,10 @@
     --accent-color: var(--primaryColor, var(--spectrum-global-color-blue-400));
     --grid-background: var(--spectrum-global-color-gray-50);
     --grid-background-alt: var(--spectrum-global-color-gray-100);
+    --header-cell-background: var(
+      --custom-header-cell-background,
+      var(--grid-background-alt)
+    );
     --cell-background: var(--grid-background);
     --cell-background-hover: var(--grid-background-alt);
     --cell-background-alt: var(--cell-background);
@@ -246,7 +250,10 @@
     cursor: grabbing !important;
   }
   .grid.stripe {
-    --cell-background-alt: var(--spectrum-global-color-gray-75);
+    --cell-background-alt: var(
+      --custom-stripe-cell-background,
+      var(--spectrum-global-color-gray-75)
+    );
   }
 
   /* Data layers */
@@ -352,11 +359,18 @@
 
   /* Overrides for quiet */
   .grid.quiet :global(.grid-data-content .row > .cell:not(:last-child)),
-  .grid.quiet :global(.sticky-column .row > .cell),
-  .grid.quiet :global(.new-row .row > .cell:not(:last-child)) {
+  .grid.quiet :global(.sticky-column .row .cell),
+  .grid.quiet :global(.new-row .row > .cell:not(:last-child)),
+  .grid.quiet :global(.header-cell:not(:last-child) .cell) {
     border-right: none;
   }
   .grid.quiet :global(.sticky-column:before) {
     display: none;
   }
+  .grid.quiet:not(.stripe) {
+    --header-cell-background: var(
+      --custom-header-cell-background,
+      var(--grid-background)
+    );
+  }
 </style>

packages/frontend-core/src/components/grid/layout/HeaderRow.svelte

@@ -36,7 +36,7 @@
 
 <style>
   .header {
-    background: var(--grid-background-alt);
+    background: var(--header-cell-background);
     border-bottom: var(--cell-border);
     position: relative;
     height: var(--default-row-height);

packages/frontend-core/src/components/grid/layout/NewRow.svelte

@@ -4,7 +4,7 @@
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import DataCell from "../cells/DataCell.svelte"
   import { fade } from "svelte/transition"
-  import { GutterWidth, NewRowID } from "../lib/constants"
+  import { DefaultRowHeight, GutterWidth, NewRowID } from "../lib/constants"
   import GutterCell from "../cells/GutterCell.svelte"
   import KeyboardShortcut from "./KeyboardShortcut.svelte"
   import { getCellID } from "../lib/utils"
@@ -33,6 +33,7 @@
     columnRenderMap,
     visibleColumns,
     scrollTop,
+    height,
   } = getContext("grid")
 
   let visible = false
@@ -47,6 +48,8 @@
   $: hasNoRows = !$rows.length
   $: renderedRowCount = $renderedRows.length
   $: offset = getOffset($hasNextPage, renderedRowCount, $rowHeight, $scrollTop)
+  $: spaceBelow = $height - offset - $rowHeight
+  $: flipButtons = spaceBelow < 36 + DefaultRowHeight
 
   const getOffset = (hasNextPage, rowCount, rowHeight, scrollTop) => {
     // If we have a next page of data then we aren't truly at the bottom, so we
@@ -244,7 +247,11 @@
         </div>
       </GridScrollWrapper>
     </div>
-    <div class="buttons" transition:fade|local={{ duration: 130 }}>
+    <div
+      class="buttons"
+      class:flip={flipButtons}
+      transition:fade|local={{ duration: 130 }}
+    >
       <Button size="M" cta on:click={addRow} disabled={isAdding}>
         <div class="button-with-keys">
           Save
@@ -337,6 +344,9 @@
   .button-with-keys :global(> div) {
     padding-top: 2px;
   }
+  .buttons.flip {
+    top: calc(var(--offset) - 36px - var(--default-row-height) / 2);
+  }
 
   /* Sticky column styles */
   .sticky-column {

packages/frontend-core/src/components/grid/layout/StickyColumn.svelte

@@ -169,7 +169,7 @@
     z-index: 1;
   }
   .header :global(.cell) {
-    background: var(--grid-background-alt);
+    background: var(--header-cell-background);
   }
   .header :global(.cell::before) {
     display: none;

packages/frontend-core/src/components/grid/lib/constants.ts

@@ -2,8 +2,8 @@ export const SmallRowHeight = 36
 export const MediumRowHeight = 64
 export const LargeRowHeight = 92
 export const DefaultRowHeight = SmallRowHeight
-export const VPadding = SmallRowHeight * 2
-export const HPadding = 40
+export const VPadding = 0
+export const HPadding = 80
 export const ScrollBarSize = 8
 export const GutterWidth = 72
 export const DefaultColumnWidth = 200

packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte

@@ -140,13 +140,13 @@
   div {
     position: absolute;
     background: var(--spectrum-global-color-gray-500);
-    opacity: 0.5;
+    opacity: 0.35;
     border-radius: 4px;
     transition: opacity 130ms ease-out;
   }
   div:hover,
   div.dragging {
-    opacity: 1;
+    opacity: 0.8;
   }
   .v-scrollbar {
     width: var(--scroll-bar-size);

packages/frontend-core/src/components/grid/stores/config.ts

@@ -7,8 +7,12 @@ type ConfigStore = {
   [key in keyof BaseStoreProps]: Readable<BaseStoreProps[key]>
 }
 
+interface ConfigState extends BaseStoreProps {
+  canSelectRows: boolean
+}
+
 interface ConfigDerivedStore {
-  config: Readable<BaseStoreProps>
+  config: Readable<ConfigState>
 }
 
 export type Store = ConfigStore & ConfigDerivedStore
@@ -47,7 +51,7 @@ export const deriveStores = (context: StoreContext): ConfigDerivedStore => {
   const config = derived(
     [props, definition, hasNonAutoColumn],
     ([$props, $definition, $hasNonAutoColumn]) => {
-      let config = { ...$props }
+      let config: ConfigState = { ...$props, canSelectRows: false }
       const type = $props.datasource?.type
 
       // Disable some features if we're editing a view
@@ -78,6 +82,9 @@ export const deriveStores = (context: StoreContext): ConfigDerivedStore => {
         config.canEditColumns = false
       }
 
+      // Determine if we can select rows
+      config.canSelectRows = !!config.canDeleteRows || !!config.canAddRows
+
       return config
     }
   )

packages/frontend-core/src/components/grid/stores/index.ts

@@ -36,6 +36,7 @@ const DependencyOrderedStores = [
   NonPlus,
   Datasource,
   Columns,
+  Config as any,
   Scroll,
   Validation,
   Rows,
@@ -47,7 +48,6 @@ const DependencyOrderedStores = [
   Users,
   Menu,
   Pagination,
-  Config as any,
   Clipboard,
   Notifications,
   Cache,

packages/frontend-core/src/components/grid/stores/scroll.ts

@@ -58,6 +58,7 @@ export const deriveStores = (context: StoreContext) => {
     width,
     height,
     buttonColumnWidth,
+    config,
   } = context
 
   // Memoize store primitives
@@ -97,11 +98,14 @@ export const deriveStores = (context: StoreContext) => {
 
   // Derive vertical limits
   const contentHeight = derived(
-    [rows, rowHeight, showHScrollbar],
-    ([$rows, $rowHeight, $showHScrollbar]) => {
-      let height = ($rows.length + 1) * $rowHeight + VPadding
+    [rows, rowHeight, showHScrollbar, config],
+    ([$rows, $rowHeight, $showHScrollbar, $config]) => {
+      let height = $rows.length * $rowHeight + VPadding
       if ($showHScrollbar) {
-        height += ScrollBarSize * 2
+        height += ScrollBarSize * 3
+      }
+      if ($config.canAddRows) {
+        height += $rowHeight
       }
       return height
     }

packages/frontend-core/src/components/index.js

@@ -9,3 +9,6 @@ export { Grid } from "./grid"
 export { default as ClientAppSkeleton } from "./ClientAppSkeleton.svelte"
 export { default as CoreFilterBuilder } from "./CoreFilterBuilder.svelte"
 export { default as FilterUsers } from "./FilterUsers.svelte"
+export { default as ChangePasswordModal } from "./ChangePasswordModal.svelte"
+export { default as ProfileModal } from "./ProfileModal.svelte"
+export { default as PasswordRepeatInput } from "./PasswordRepeatInput.svelte"

packages/frontend-core/src/constants.ts

@@ -166,3 +166,9 @@ export const FieldPermissions = {
   READONLY: "readonly",
   HIDDEN: "hidden",
 }
+
+// one or more word characters and whitespace
+export const APP_NAME_REGEX = /^[\w\s]+$/
+
+// zero or more non-whitespace characters
+export const APP_URL_REGEX = /^[0-9a-zA-Z-_]+$/

packages/frontend-core/src/utils/index.ts

@@ -14,3 +14,4 @@ export * from "./settings"
 export * from "./relatedColumns"
 export * from "./table"
 export * from "./components"
+export * from "./validation"

packages/frontend-core/src/utils/schema.js

@@ -2,7 +2,9 @@ import { helpers } from "@budibase/shared-core"
 import { TypeIconMap } from "../constants"
 
 export const getColumnIcon = column => {
-  if (column.schema.icon) {
+  // For some reason we have remix icons saved under this property sometimes,
+  // so we must ignore those as they are invalid spectrum icons
+  if (column.schema.icon && !column.schema.icon.startsWith("ri-")) {
     return column.schema.icon
   }
   if (column.calculationType) {

packages/frontend-core/src/utils/validation/yup/app.js

@@ -1,5 +1,5 @@
 import { string, mixed } from "yup"
-import { APP_NAME_REGEX, APP_URL_REGEX } from "@/constants"
+import { APP_NAME_REGEX, APP_URL_REGEX } from "../../../constants"
 
 export const name = (validation, { apps, currentApp } = { apps: [] }) => {
   validation.addValidator(

packages/frontend-core/src/utils/validation/yup/index.js

@@ -1,7 +1,6 @@
-import { capitalise } from "@/helpers"
 import { object, string, number } from "yup"
 import { writable, get } from "svelte/store"
-import { notifications } from "@budibase/bbui"
+import { Helpers, notifications } from "@budibase/bbui"
 
 export const createValidationStore = () => {
   const DEFAULT = {
@@ -77,7 +76,7 @@ export const createValidationStore = () => {
       const [fieldError] = error.errors
       if (fieldError) {
         validation.update(store => {
-          store.errors[propertyName] = capitalise(fieldError)
+          store.errors[propertyName] = Helpers.capitalise(fieldError)
           store.valid = false
           return store
         })
@@ -120,7 +119,7 @@ export const createValidationStore = () => {
       } else {
         error.inner.forEach(err => {
           validation.update(store => {
-            store.errors[err.path] = capitalise(err.message)
+            store.errors[err.path] = Helpers.capitalise(err.message)
             return store
           })
         })

packages/server/specs/openapi.json

@@ -842,17 +842,29 @@
                       "description": "A constraint can be applied to the column which will be validated against when a row is saved.",
                       "properties": {
                         "type": {
-                          "type": "string",
-                          "enum": [
-                            "string",
-                            "number",
-                            "object",
-                            "boolean"
-                          ]
+                          "type": "string"
                         },
                         "presence": {
-                          "type": "boolean",
-                          "description": "Defines whether the column is required or not."
+                          "oneOf": [
+                            {
+                              "type": "boolean",
+                              "description": "Defines whether the column is required or not."
+                            },
+                            {
+                              "type": "object",
+                              "description": "Defines whether the column is required or not.",
+                              "properties": {
+                                "allowEmpty": {
+                                  "type": "boolean",
+                                  "description": "Defines whether the value is allowed to be empty or not."
+                                }
+                              }
+                            }
+                          ]
+                        },
+                        "inclusion": {
+                          "type": "array",
+                          "description": "Defines the valid values for this column."
                         }
                       }
                     },
@@ -864,6 +876,10 @@
                       "type": "boolean",
                       "description": "Defines whether the column is automatically generated."
                     },
+                    "width": {
+                      "type": "number",
+                      "description": "Defines the width of the column in the data UI."
+                    },
                     "fieldName": {
                       "type": "string",
                       "description": "The name of the column which a relationship column is related to in another table."
@@ -914,17 +930,29 @@
                       "description": "A constraint can be applied to the column which will be validated against when a row is saved.",
                       "properties": {
                         "type": {
-                          "type": "string",
-                          "enum": [
-                            "string",
-                            "number",
-                            "object",
-                            "boolean"
-                          ]
+                          "type": "string"
                         },
                         "presence": {
-                          "type": "boolean",
-                          "description": "Defines whether the column is required or not."
+                          "oneOf": [
+                            {
+                              "type": "boolean",
+                              "description": "Defines whether the column is required or not."
+                            },
+                            {
+                              "type": "object",
+                              "description": "Defines whether the column is required or not.",
+                              "properties": {
+                                "allowEmpty": {
+                                  "type": "boolean",
+                                  "description": "Defines whether the value is allowed to be empty or not."
+                                }
+                              }
+                            }
+                          ]
+                        },
+                        "inclusion": {
+                          "type": "array",
+                          "description": "Defines the valid values for this column."
                         }
                       }
                     },
@@ -936,6 +964,10 @@
                       "type": "boolean",
                       "description": "Defines whether the column is automatically generated."
                     },
+                    "width": {
+                      "type": "number",
+                      "description": "Defines the width of the column in the data UI."
+                    },
                     "formula": {
                       "type": "string",
                       "description": "Defines a Handlebars or JavaScript formula to use, note that Javascript formulas are expected to be provided in the base64 format."
@@ -965,8 +997,6 @@
                         "datetime",
                         "attachment",
                         "attachment_single",
-                        "link",
-                        "formula",
                         "auto",
                         "ai",
                         "json",
@@ -984,17 +1014,29 @@
                       "description": "A constraint can be applied to the column which will be validated against when a row is saved.",
                       "properties": {
                         "type": {
-                          "type": "string",
-                          "enum": [
-                            "string",
-                            "number",
-                            "object",
-                            "boolean"
-                          ]
+                          "type": "string"
                         },
                         "presence": {
-                          "type": "boolean",
-                          "description": "Defines whether the column is required or not."
+                          "oneOf": [
+                            {
+                              "type": "boolean",
+                              "description": "Defines whether the column is required or not."
+                            },
+                            {
+                              "type": "object",
+                              "description": "Defines whether the column is required or not.",
+                              "properties": {
+                                "allowEmpty": {
+                                  "type": "boolean",
+                                  "description": "Defines whether the value is allowed to be empty or not."
+                                }
+                              }
+                            }
+                          ]
+                        },
+                        "inclusion": {
+                          "type": "array",
+                          "description": "Defines the valid values for this column."
                         }
                       }
                     },
@@ -1005,6 +1047,10 @@
                     "autocolumn": {
                       "type": "boolean",
                       "description": "Defines whether the column is automatically generated."
+                    },
+                    "width": {
+                      "type": "number",
+                      "description": "Defines the width of the column in the data UI."
                     }
                   }
                 }
@@ -1052,17 +1098,29 @@
                           "description": "A constraint can be applied to the column which will be validated against when a row is saved.",
                           "properties": {
                             "type": {
-                              "type": "string",
-                              "enum": [
-                                "string",
-                                "number",
-                                "object",
-                                "boolean"
-                              ]
+                              "type": "string"
                             },
                             "presence": {
-                              "type": "boolean",
-                              "description": "Defines whether the column is required or not."
+                              "oneOf": [
+                                {
+                                  "type": "boolean",
+                                  "description": "Defines whether the column is required or not."
+                                },
+                                {
+                                  "type": "object",
+                                  "description": "Defines whether the column is required or not.",
+                                  "properties": {
+                                    "allowEmpty": {
+                                      "type": "boolean",
+                                      "description": "Defines whether the value is allowed to be empty or not."
+                                    }
+                                  }
+                                }
+                              ]
+                            },
+                            "inclusion": {
+                              "type": "array",
+                              "description": "Defines the valid values for this column."
                             }
                           }
                         },
@@ -1074,6 +1132,10 @@
                           "type": "boolean",
                           "description": "Defines whether the column is automatically generated."
                         },
+                        "width": {
+                          "type": "number",
+                          "description": "Defines the width of the column in the data UI."
+                        },
                         "fieldName": {
                           "type": "string",
                           "description": "The name of the column which a relationship column is related to in another table."
@@ -1124,17 +1186,29 @@
                           "description": "A constraint can be applied to the column which will be validated against when a row is saved.",
                           "properties": {
                             "type": {
-                              "type": "string",
-                              "enum": [
-                                "string",
-                                "number",
-                                "object",
-                                "boolean"
-                              ]
+                              "type": "string"
                             },
                             "presence": {
-                              "type": "boolean",
-                              "description": "Defines whether the column is required or not."
+                              "oneOf": [
+                                {
+                                  "type": "boolean",
+                                  "description": "Defines whether the column is required or not."
+                                },
+                                {
+                                  "type": "object",
+                                  "description": "Defines whether the column is required or not.",
+                                  "properties": {
+                                    "allowEmpty": {
+                                      "type": "boolean",
+                                      "description": "Defines whether the value is allowed to be empty or not."
+                                    }
+                                  }
+                                }
+                              ]
+                            },
+                            "inclusion": {
+                              "type": "array",
+                              "description": "Defines the valid values for this column."
                             }
                           }
                         },
@@ -1146,6 +1220,10 @@
                           "type": "boolean",
                           "description": "Defines whether the column is automatically generated."
                         },
+                        "width": {
+                          "type": "number",
+                          "description": "Defines the width of the column in the data UI."
+                        },
                         "formula": {
                           "type": "string",
                           "description": "Defines a Handlebars or JavaScript formula to use, note that Javascript formulas are expected to be provided in the base64 format."
@@ -1175,8 +1253,6 @@
                             "datetime",
                             "attachment",
                             "attachment_single",
-                            "link",
-                            "formula",
                             "auto",
                             "ai",
                             "json",
@@ -1194,17 +1270,29 @@
                           "description": "A constraint can be applied to the column which will be validated against when a row is saved.",
                           "properties": {
                             "type": {
-                              "type": "string",
-                              "enum": [
-                                "string",
-                                "number",
-                                "object",
-                                "boolean"
-                              ]
+                              "type": "string"
                             },
                             "presence": {
-                              "type": "boolean",
-                              "description": "Defines whether the column is required or not."
+                              "oneOf": [
+                                {
+                                  "type": "boolean",
+                                  "description": "Defines whether the column is required or not."
+                                },
+                                {
+                                  "type": "object",
+                                  "description": "Defines whether the column is required or not.",
+                                  "properties": {
+                                    "allowEmpty": {
+                                      "type": "boolean",
+                                      "description": "Defines whether the value is allowed to be empty or not."
+                                    }
+                                  }
+                                }
+                              ]
+                            },
+                            "inclusion": {
+                              "type": "array",
+                              "description": "Defines the valid values for this column."
                             }
                           }
                         },
@@ -1215,6 +1303,10 @@
                         "autocolumn": {
                           "type": "boolean",
                           "description": "Defines whether the column is automatically generated."
+                        },
+                        "width": {
+                          "type": "number",
+                          "description": "Defines the width of the column in the data UI."
                         }
                       }
                     }
@@ -1273,17 +1365,29 @@
                             "description": "A constraint can be applied to the column which will be validated against when a row is saved.",
                             "properties": {
                               "type": {
-                                "type": "string",
-                                "enum": [
-                                  "string",
-                                  "number",
-                                  "object",
-                                  "boolean"
-                                ]
+                                "type": "string"
                               },
                               "presence": {
-                                "type": "boolean",
-                                "description": "Defines whether the column is required or not."
+                                "oneOf": [
+                                  {
+                                    "type": "boolean",
+                                    "description": "Defines whether the column is required or not."
+                                  },
+                                  {
+                                    "type": "object",
+                                    "description": "Defines whether the column is required or not.",
+                                    "properties": {
+                                      "allowEmpty": {
+                                        "type": "boolean",
+                                        "description": "Defines whether the value is allowed to be empty or not."
+                                      }
+                                    }
+                                  }
+                                ]
+                              },
+                              "inclusion": {
+                                "type": "array",
+                                "description": "Defines the valid values for this column."
                               }
                             }
                           },
@@ -1295,6 +1399,10 @@
                             "type": "boolean",
                             "description": "Defines whether the column is automatically generated."
                           },
+                          "width": {
+                            "type": "number",
+                            "description": "Defines the width of the column in the data UI."
+                          },
                           "fieldName": {
                             "type": "string",
                             "description": "The name of the column which a relationship column is related to in another table."
@@ -1345,17 +1453,29 @@
                             "description": "A constraint can be applied to the column which will be validated against when a row is saved.",
                             "properties": {
                               "type": {
-                                "type": "string",
-                                "enum": [
-                                  "string",
-                                  "number",
-                                  "object",
-                                  "boolean"
-                                ]
+                                "type": "string"
                               },
                               "presence": {
-                                "type": "boolean",
-                                "description": "Defines whether the column is required or not."
+                                "oneOf": [
+                                  {
+                                    "type": "boolean",
+                                    "description": "Defines whether the column is required or not."
+                                  },
+                                  {
+                                    "type": "object",
+                                    "description": "Defines whether the column is required or not.",
+                                    "properties": {
+                                      "allowEmpty": {
+                                        "type": "boolean",
+                                        "description": "Defines whether the value is allowed to be empty or not."
+                                      }
+                                    }
+                                  }
+                                ]
+                              },
+                              "inclusion": {
+                                "type": "array",
+                                "description": "Defines the valid values for this column."
                               }
                             }
                           },
@@ -1367,6 +1487,10 @@
                             "type": "boolean",
                             "description": "Defines whether the column is automatically generated."
                           },
+                          "width": {
+                            "type": "number",
+                            "description": "Defines the width of the column in the data UI."
+                          },
                           "formula": {
                             "type": "string",
                             "description": "Defines a Handlebars or JavaScript formula to use, note that Javascript formulas are expected to be provided in the base64 format."
@@ -1396,8 +1520,6 @@
                               "datetime",
                               "attachment",
                               "attachment_single",
-                              "link",
-                              "formula",
                               "auto",
                               "ai",
                               "json",
@@ -1415,17 +1537,29 @@
                             "description": "A constraint can be applied to the column which will be validated against when a row is saved.",
                             "properties": {
                               "type": {
-                                "type": "string",
-                                "enum": [
-                                  "string",
-                                  "number",
-                                  "object",
-                                  "boolean"
-                                ]
+                                "type": "string"
                               },
                               "presence": {
-                                "type": "boolean",
-                                "description": "Defines whether the column is required or not."
+                                "oneOf": [
+                                  {
+                                    "type": "boolean",
+                                    "description": "Defines whether the column is required or not."
+                                  },
+                                  {
+                                    "type": "object",
+                                    "description": "Defines whether the column is required or not.",
+                                    "properties": {
+                                      "allowEmpty": {
+                                        "type": "boolean",
+                                        "description": "Defines whether the value is allowed to be empty or not."
+                                      }
+                                    }
+                                  }
+                                ]
+                              },
+                              "inclusion": {
+                                "type": "array",
+                                "description": "Defines the valid values for this column."
                               }
                             }
                           },
@@ -1436,6 +1570,10 @@
                           "autocolumn": {
                             "type": "boolean",
                             "description": "Defines whether the column is automatically generated."
+                          },
+                          "width": {
+                            "type": "number",
+                            "description": "Defines the width of the column in the data UI."
                           }
                         }
                       }

packages/server/specs/openapi.yaml

@@ -752,20 +752,28 @@ components:
                     properties:
                       type:
                         type: string
-                        enum:
-                          - string
-                          - number
-                          - object
-                          - boolean
                       presence:
-                        type: boolean
-                        description: Defines whether the column is required or not.
+                        oneOf:
+                          - type: boolean
+                            description: Defines whether the column is required or not.
+                          - type: object
+                            description: Defines whether the column is required or not.
+                            properties:
+                              allowEmpty:
+                                type: boolean
+                                description: Defines whether the value is allowed to be empty or not.
+                      inclusion:
+                        type: array
+                        description: Defines the valid values for this column.
                   name:
                     type: string
                     description: The name of the column.
                   autocolumn:
                     type: boolean
                     description: Defines whether the column is automatically generated.
+                  width:
+                    type: number
+                    description: Defines the width of the column in the data UI.
                   fieldName:
                     type: string
                     description: The name of the column which a relationship column is related to in
@@ -812,20 +820,28 @@ components:
                     properties:
                       type:
                         type: string
-                        enum:
-                          - string
-                          - number
-                          - object
-                          - boolean
                       presence:
-                        type: boolean
-                        description: Defines whether the column is required or not.
+                        oneOf:
+                          - type: boolean
+                            description: Defines whether the column is required or not.
+                          - type: object
+                            description: Defines whether the column is required or not.
+                            properties:
+                              allowEmpty:
+                                type: boolean
+                                description: Defines whether the value is allowed to be empty or not.
+                      inclusion:
+                        type: array
+                        description: Defines the valid values for this column.
                   name:
                     type: string
                     description: The name of the column.
                   autocolumn:
                     type: boolean
                     description: Defines whether the column is automatically generated.
+                  width:
+                    type: number
+                    description: Defines the width of the column in the data UI.
                   formula:
                     type: string
                     description: Defines a Handlebars or JavaScript formula to use, note that
@@ -851,8 +867,6 @@ components:
                       - datetime
                       - attachment
                       - attachment_single
-                      - link
-                      - formula
                       - auto
                       - ai
                       - json
@@ -871,20 +885,28 @@ components:
                     properties:
                       type:
                         type: string
-                        enum:
-                          - string
-                          - number
-                          - object
-                          - boolean
                       presence:
-                        type: boolean
-                        description: Defines whether the column is required or not.
+                        oneOf:
+                          - type: boolean
+                            description: Defines whether the column is required or not.
+                          - type: object
+                            description: Defines whether the column is required or not.
+                            properties:
+                              allowEmpty:
+                                type: boolean
+                                description: Defines whether the value is allowed to be empty or not.
+                      inclusion:
+                        type: array
+                        description: Defines the valid values for this column.
                   name:
                     type: string
                     description: The name of the column.
                   autocolumn:
                     type: boolean
                     description: Defines whether the column is automatically generated.
+                  width:
+                    type: number
+                    description: Defines the width of the column in the data UI.
     tableOutput:
       type: object
       properties:
@@ -921,20 +943,28 @@ components:
                         properties:
                           type:
                             type: string
-                            enum:
-                              - string
-                              - number
-                              - object
-                              - boolean
                           presence:
-                            type: boolean
-                            description: Defines whether the column is required or not.
+                            oneOf:
+                              - type: boolean
+                                description: Defines whether the column is required or not.
+                              - type: object
+                                description: Defines whether the column is required or not.
+                                properties:
+                                  allowEmpty:
+                                    type: boolean
+                                    description: Defines whether the value is allowed to be empty or not.
+                          inclusion:
+                            type: array
+                            description: Defines the valid values for this column.
                       name:
                         type: string
                         description: The name of the column.
                       autocolumn:
                         type: boolean
                         description: Defines whether the column is automatically generated.
+                      width:
+                        type: number
+                        description: Defines the width of the column in the data UI.
                       fieldName:
                         type: string
                         description: The name of the column which a relationship column is related to in
@@ -981,20 +1011,28 @@ components:
                         properties:
                           type:
                             type: string
-                            enum:
-                              - string
-                              - number
-                              - object
-                              - boolean
                           presence:
-                            type: boolean
-                            description: Defines whether the column is required or not.
+                            oneOf:
+                              - type: boolean
+                                description: Defines whether the column is required or not.
+                              - type: object
+                                description: Defines whether the column is required or not.
+                                properties:
+                                  allowEmpty:
+                                    type: boolean
+                                    description: Defines whether the value is allowed to be empty or not.
+                          inclusion:
+                            type: array
+                            description: Defines the valid values for this column.
                       name:
                         type: string
                         description: The name of the column.
                       autocolumn:
                         type: boolean
                         description: Defines whether the column is automatically generated.
+                      width:
+                        type: number
+                        description: Defines the width of the column in the data UI.
                       formula:
                         type: string
                         description: Defines a Handlebars or JavaScript formula to use, note that
@@ -1020,8 +1058,6 @@ components:
                           - datetime
                           - attachment
                           - attachment_single
-                          - link
-                          - formula
                           - auto
                           - ai
                           - json
@@ -1040,20 +1076,28 @@ components:
                         properties:
                           type:
                             type: string
-                            enum:
-                              - string
-                              - number
-                              - object
-                              - boolean
                           presence:
-                            type: boolean
-                            description: Defines whether the column is required or not.
+                            oneOf:
+                              - type: boolean
+                                description: Defines whether the column is required or not.
+                              - type: object
+                                description: Defines whether the column is required or not.
+                                properties:
+                                  allowEmpty:
+                                    type: boolean
+                                    description: Defines whether the value is allowed to be empty or not.
+                          inclusion:
+                            type: array
+                            description: Defines the valid values for this column.
                       name:
                         type: string
                         description: The name of the column.
                       autocolumn:
                         type: boolean
                         description: Defines whether the column is automatically generated.
+                      width:
+                        type: number
+                        description: Defines the width of the column in the data UI.
             _id:
               description: The ID of the table.
               type: string
@@ -1097,20 +1141,28 @@ components:
                           properties:
                             type:
                               type: string
-                              enum:
-                                - string
-                                - number
-                                - object
-                                - boolean
                             presence:
-                              type: boolean
-                              description: Defines whether the column is required or not.
+                              oneOf:
+                                - type: boolean
+                                  description: Defines whether the column is required or not.
+                                - type: object
+                                  description: Defines whether the column is required or not.
+                                  properties:
+                                    allowEmpty:
+                                      type: boolean
+                                      description: Defines whether the value is allowed to be empty or not.
+                            inclusion:
+                              type: array
+                              description: Defines the valid values for this column.
                         name:
                           type: string
                           description: The name of the column.
                         autocolumn:
                           type: boolean
                           description: Defines whether the column is automatically generated.
+                        width:
+                          type: number
+                          description: Defines the width of the column in the data UI.
                         fieldName:
                           type: string
                           description: The name of the column which a relationship column is related to in
@@ -1157,20 +1209,28 @@ components:
                           properties:
                             type:
                               type: string
-                              enum:
-                                - string
-                                - number
-                                - object
-                                - boolean
                             presence:
-                              type: boolean
-                              description: Defines whether the column is required or not.
+                              oneOf:
+                                - type: boolean
+                                  description: Defines whether the column is required or not.
+                                - type: object
+                                  description: Defines whether the column is required or not.
+                                  properties:
+                                    allowEmpty:
+                                      type: boolean
+                                      description: Defines whether the value is allowed to be empty or not.
+                            inclusion:
+                              type: array
+                              description: Defines the valid values for this column.
                         name:
                           type: string
                           description: The name of the column.
                         autocolumn:
                           type: boolean
                           description: Defines whether the column is automatically generated.
+                        width:
+                          type: number
+                          description: Defines the width of the column in the data UI.
                         formula:
                           type: string
                           description: Defines a Handlebars or JavaScript formula to use, note that
@@ -1196,8 +1256,6 @@ components:
                             - datetime
                             - attachment
                             - attachment_single
-                            - link
-                            - formula
                             - auto
                             - ai
                             - json
@@ -1216,20 +1274,28 @@ components:
                           properties:
                             type:
                               type: string
-                              enum:
-                                - string
-                                - number
-                                - object
-                                - boolean
                             presence:
-                              type: boolean
-                              description: Defines whether the column is required or not.
+                              oneOf:
+                                - type: boolean
+                                  description: Defines whether the column is required or not.
+                                - type: object
+                                  description: Defines whether the column is required or not.
+                                  properties:
+                                    allowEmpty:
+                                      type: boolean
+                                      description: Defines whether the value is allowed to be empty or not.
+                            inclusion:
+                              type: array
+                              description: Defines the valid values for this column.
                         name:
                           type: string
                           description: The name of the column.
                         autocolumn:
                           type: boolean
                           description: Defines whether the column is automatically generated.
+                        width:
+                          type: number
+                          description: Defines the width of the column in the data UI.
               _id:
                 description: The ID of the table.
                 type: string

packages/server/specs/resources/table.ts

@@ -27,7 +27,9 @@ const table = {
 const baseColumnDef = {
   type: {
     type: "string",
-    enum: Object.values(FieldType),
+    enum: Object.values(FieldType).filter(
+      type => ![FieldType.LINK, FieldType.FORMULA].includes(type)
+    ),
     description:
       "Defines the type of the column, most explain themselves, a link column is a relationship.",
   },
@@ -38,11 +40,29 @@ const baseColumnDef = {
     properties: {
       type: {
         type: "string",
-        enum: ["string", "number", "object", "boolean"],
       },
       presence: {
-        type: "boolean",
-        description: "Defines whether the column is required or not.",
+        oneOf: [
+          {
+            type: "boolean",
+            description: "Defines whether the column is required or not.",
+          },
+          {
+            type: "object",
+            description: "Defines whether the column is required or not.",
+            properties: {
+              allowEmpty: {
+                type: "boolean",
+                description:
+                  "Defines whether the value is allowed to be empty or not.",
+              },
+            },
+          },
+        ],
+      },
+      inclusion: {
+        type: "array",
+        description: "Defines the valid values for this column.",
       },
     },
   },
@@ -54,6 +74,10 @@ const baseColumnDef = {
     type: "boolean",
     description: "Defines whether the column is automatically generated.",
   },
+  width: {
+    type: "number",
+    description: "Defines the width of the column in the data UI.",
+  },
 }
 
 const tableSchema = {

packages/server/src/api/controllers/application.ts

@@ -16,6 +16,7 @@ import {
   DocumentType,
   generateAppID,
   generateDevAppID,
+  generateScreenID,
   getLayoutParams,
   getScreenParams,
 } from "../../db/utils"
@@ -75,6 +76,7 @@ import sdk from "../../sdk"
 import { builderSocket } from "../../websockets"
 import { DefaultAppTheme, sdk as sharedCoreSDK } from "@budibase/shared-core"
 import * as appMigrations from "../../appMigrations"
+import { createSampleDataTableScreen } from "../../constants/screens"
 
 // utility function, need to do away with this
 async function getLayouts() {
@@ -176,11 +178,8 @@ async function createInstance(appId: string, template: AppTemplate) {
   return { _id: appId }
 }
 
-export const addSampleData = async (
-  ctx: UserCtx<void, AddAppSampleDataResponse>
-) => {
+async function addSampleDataDocs() {
   const db = context.getAppDB()
-
   try {
     // Check if default datasource exists before creating it
     await sdk.datasources.get(DEFAULT_BB_DATASOURCE_ID)
@@ -190,7 +189,41 @@ export const addSampleData = async (
     // add in the default db data docs - tables, datasource, rows and links
     await db.bulkDocs([...defaultDbDocs])
   }
+}
 
+async function addSampleDataScreen() {
+  const db = context.getAppDB()
+  let screen = createSampleDataTableScreen()
+  screen._id = generateScreenID()
+  await db.put(screen)
+}
+
+async function addSampleDataNavLinks() {
+  const db = context.getAppDB()
+  let app = await sdk.applications.metadata.get()
+  if (!app.navigation) {
+    return
+  }
+  if (!app.navigation.links) {
+    app.navigation.links = []
+  }
+  app.navigation.links.push({
+    text: "Inventory",
+    url: "/inventory",
+    type: "link",
+    roleId: roles.BUILTIN_ROLE_IDS.BASIC,
+  })
+
+  await db.put(app)
+
+  // remove any cached metadata, so that it will be updated
+  await cache.app.invalidateAppMetadata(app.appId)
+}
+
+export const addSampleData = async (
+  ctx: UserCtx<void, AddAppSampleDataResponse>
+) => {
+  await addSampleDataDocs()
   ctx.body = { message: "Sample tables added." }
 }
 
@@ -261,7 +294,7 @@ async function performAppCreate(
   const { body } = ctx.request
   const { name, url, encryptionPassword, templateKey } = body
 
-  let useTemplate
+  let useTemplate = false
   if (typeof body.useTemplate === "string") {
     useTemplate = body.useTemplate === "true"
   } else if (typeof body.useTemplate === "boolean") {
@@ -293,12 +326,14 @@ async function performAppCreate(
   return await context.doInAppContext(appId, async () => {
     const instance = await createInstance(appId, instanceConfig)
     const db = context.getAppDB()
+    const isImport = !!instanceConfig.file
+    const addSampleData = !isImport && !useTemplate
 
     if (instanceConfig.useTemplate && !instanceConfig.file) {
       await updateUserColumns(appId, db, ctx.user._id!)
     }
 
-    const newApplication: App = {
+    let newApplication: App = {
       _id: DocumentType.APP_METADATA,
       _rev: undefined,
       appId,
@@ -317,11 +352,14 @@ async function performAppCreate(
         navigation: "Top",
         title: name,
         navWidth: "Large",
-        navBackground: "var(--spectrum-global-color-gray-100)",
+        navBackground: "var(--spectrum-global-color-static-blue-1200)",
+        navTextColor: "var(--spectrum-global-color-static-white)",
         links: [],
       },
       theme: DefaultAppTheme,
       customTheme: {
+        primaryColor: "var(--spectrum-global-color-static-blue-1200)",
+        primaryColorHover: "var(--spectrum-global-color-static-blue-800)",
         buttonBorderRadius: "16px",
       },
       features: {
@@ -332,7 +370,6 @@ async function performAppCreate(
       creationVersion: undefined,
     }
 
-    const isImport = !!instanceConfig.file
     if (!isImport) {
       newApplication.creationVersion = envCore.VERSION
     }
@@ -379,6 +416,20 @@ async function performAppCreate(
       await uploadAppFiles(appId)
     }
 
+    // Add sample datasource and example screen for non-templates/non-imports
+    if (addSampleData) {
+      try {
+        await addSampleDataDocs()
+        await addSampleDataScreen()
+        await addSampleDataNavLinks()
+
+        // Fetch the latest version of the app after these changes
+        newApplication = await sdk.applications.metadata.get()
+      } catch (err) {
+        ctx.throw(400, "App created, but failed to add sample data")
+      }
+    }
+
     const latestMigrationId = appMigrations.getLatestEnabledMigrationId()
     if (latestMigrationId) {
       // Initialise the app migration version as the latest one

packages/server/src/api/routes/tests/application.spec.ts

@@ -127,10 +127,26 @@ describe("/applications", () => {
   })
 
   describe("create", () => {
-    it("creates empty app", async () => {
+    const checkScreenCount = async (expectedCount: number) => {
+      const res = await config.api.application.getDefinition(
+        config.getProdAppId()
+      )
+      expect(res.screens.length).toEqual(expectedCount)
+    }
+
+    const checkTableCount = async (expectedCount: number) => {
+      const tables = await config.api.table.fetch()
+      expect(tables.length).toEqual(expectedCount)
+    }
+
+    it("creates empty app with sample data", async () => {
       const app = await config.api.application.create({ name: utils.newid() })
       expect(app._id).toBeDefined()
       expect(events.app.created).toHaveBeenCalledTimes(1)
+
+      // Ensure we created sample resources
+      await checkScreenCount(1)
+      await checkTableCount(5)
     })
 
     it("creates app from template", async () => {
@@ -149,6 +165,11 @@ describe("/applications", () => {
       expect(app._id).toBeDefined()
       expect(events.app.created).toHaveBeenCalledTimes(1)
       expect(events.app.templateImported).toHaveBeenCalledTimes(1)
+
+      // Ensure we did not create sample data. This template includes exactly
+      // this many of each resource.
+      await checkScreenCount(1)
+      await checkTableCount(5)
     })
 
     it("creates app from file", async () => {
@@ -160,6 +181,11 @@ describe("/applications", () => {
       expect(app._id).toBeDefined()
       expect(events.app.created).toHaveBeenCalledTimes(1)
       expect(events.app.fileImported).toHaveBeenCalledTimes(1)
+
+      // Ensure we did not create sample data. This file includes exactly
+      // this many of each resource.
+      await checkScreenCount(1)
+      await checkTableCount(5)
     })
 
     it("should apply authorization to endpoint", async () => {

packages/server/src/api/routes/tests/backup.spec.ts

@@ -66,8 +66,8 @@ describe("/backups", () => {
       await config.createScreen()
       let res = await sdk.backups.calculateBackupStats(config.getAppId()!)
       expect(res.automations).toEqual(1)
-      expect(res.datasources).toEqual(1)
-      expect(res.screens).toEqual(1)
+      expect(res.datasources).toEqual(6)
+      expect(res.screens).toEqual(2)
     })
   })
 })

packages/server/src/api/routes/tests/screen.spec.ts

@@ -9,6 +9,7 @@ import {
   UsageInScreensResponse,
 } from "@budibase/types"
 import { basicDatasourcePlus } from "../../../tests/utilities/structures"
+import { SAMPLE_DATA_SCREEN_NAME } from "../../../constants/screens"
 
 const {
   basicScreen,
@@ -21,8 +22,8 @@ const {
 } = setup.structures
 
 describe("/screens", () => {
-  let config = setup.getConfig()
   let screen: Screen
+  let config = setup.getConfig()
 
   afterAll(setup.afterAll)
 
@@ -32,9 +33,16 @@ describe("/screens", () => {
   })
 
   describe("fetch", () => {
-    it("should be able to create a layout", async () => {
+    it("should create the sample data screen", async () => {
       const screens = await config.api.screen.list()
-      expect(screens.length).toEqual(1)
+      expect(screens.some(s => s.name === SAMPLE_DATA_SCREEN_NAME)).toEqual(
+        true
+      )
+    })
+
+    it("should be able to create a screen", async () => {
+      const screens = await config.api.screen.list()
+      expect(screens.length).toEqual(2)
       expect(screens.some(s => s._id === screen._id)).toEqual(true)
     })
 
@@ -92,8 +100,14 @@ describe("/screens", () => {
         const res = await config.api.application.getDefinition(
           config.getProdAppId()
         )
-        expect(res.screens.length).toEqual(screenIds.length)
-        expect(res.screens.map(s => s._id).sort()).toEqual(screenIds.sort())
+
+        // Filter out sample screen
+        const screens = res.screens.filter(
+          s => s.name !== SAMPLE_DATA_SCREEN_NAME
+        )
+
+        expect(screens.length).toEqual(screenIds.length)
+        expect(screens.map(s => s._id).sort()).toEqual(screenIds.sort())
       })
     }
 
@@ -122,9 +136,15 @@ describe("/screens", () => {
           const res = await config.api.application.getDefinition(
             config.prodAppId!
           )
+
+          // Filter out sample screen
+          const screens = res.screens.filter(
+            s => s.name !== SAMPLE_DATA_SCREEN_NAME
+          )
+
           const screenIds = [screen._id!, screen1._id!]
-          expect(res.screens.length).toEqual(screenIds.length)
-          expect(res.screens.map(s => s._id).sort()).toEqual(screenIds.sort())
+          expect(screens.length).toEqual(screenIds.length)
+          expect(screens.map(s => s._id).sort()).toEqual(screenIds.sort())
         }
       )
     })

packages/server/src/constants/screens.ts

@@ -2,6 +2,8 @@ import { roles } from "@budibase/backend-core"
 import { BASE_LAYOUT_PROP_IDS } from "./layouts"
 import { Screen, Table, Query, ViewV2, Component } from "@budibase/types"
 
+export const SAMPLE_DATA_SCREEN_NAME = "sample-data-inventory-screen"
+
 export function createHomeScreen(
   config: {
     roleId: string
@@ -227,3 +229,365 @@ export function createQueryScreen(datasourceId: string, query: Query): Screen {
     name: "screen-id",
   }
 }
+
+export function createSampleDataTableScreen(): Screen {
+  return {
+    showNavigation: true,
+    width: "Large",
+    routing: { route: "/inventory", roleId: "BASIC", homeScreen: false },
+    name: SAMPLE_DATA_SCREEN_NAME,
+    props: {
+      _id: "c38f2b9f250fb4c33965ce47e12c02a80",
+      _component: "@budibase/standard-components/container",
+      _styles: {
+        normal: {},
+        hover: {},
+        active: {},
+        selected: {},
+      },
+      _children: [
+        {
+          _id: "cf600445f0b0048c79c0c81606b30d542",
+          _component: "@budibase/standard-components/gridblock",
+          _styles: {
+            normal: {
+              "--grid-desktop-col-start": 1,
+              "--grid-desktop-col-end": 13,
+              "--grid-desktop-row-start": 3,
+              "--grid-desktop-row-end": 19,
+            },
+            hover: {},
+            active: {},
+            selected: {},
+          },
+          _instanceName: "Inventory table",
+          _children: [],
+          table: {
+            label: "Inventory",
+            tableId: "ta_bb_inventory",
+            type: "table",
+            datasourceName: "Sample Data",
+          },
+          columns: [
+            {
+              label: "Item Tags",
+              field: "Item Tags",
+              active: true,
+            },
+            {
+              label: "Purchase Date",
+              field: "Purchase Date",
+              active: true,
+            },
+            {
+              label: "Purchase Price",
+              field: "Purchase Price",
+              active: true,
+              format:
+                // eslint-disable-next-line no-template-curly-in-string
+                "${{ [cf600445f0b0048c79c0c81606b30d542].[Purchase Price] }}",
+            },
+            {
+              label: "Notes",
+              field: "Notes",
+              active: true,
+            },
+            {
+              label: "Status",
+              field: "Status",
+              active: true,
+              conditions: [
+                {
+                  id: Math.random(),
+                  target: "row",
+                  metadataKey: "backgroundColor",
+                  operator: "contains",
+                  valueType: "array",
+                  metadataValue: "var(--spectrum-global-color-red-100)",
+                  noValue: false,
+                  referenceValue: "Repair",
+                },
+              ],
+            },
+            {
+              label: "SKU",
+              field: "SKU",
+              active: true,
+            },
+            {
+              label: "Item ID",
+              field: "Item ID",
+              active: true,
+            },
+            {
+              label: "Created At",
+              field: "Created At",
+              active: false,
+            },
+            {
+              label: "Updated At",
+              field: "Updated At",
+              active: false,
+            },
+            {
+              label: "Item Name",
+              field: "Item Name",
+              active: true,
+            },
+          ],
+          initialSortColumn: "Item ID",
+          allowAddRows: false,
+          allowEditRows: false,
+          allowDeleteRows: false,
+          stripeRows: false,
+          quiet: true,
+          onRowClick: [
+            {
+              parameters: {
+                key: "inventoryID",
+                type: "set",
+                value: "{{ [eventContext].[row]._id }}",
+              },
+              "##eventHandlerType": "Update State",
+              id: "fgVuxCvjL",
+            },
+            {
+              parameters: {
+                id: "c73fd03209dd44dd3937a33c6205b031d",
+              },
+              "##eventHandlerType": "Open Side Panel",
+              id: "hwnlhdSUb",
+            },
+          ],
+        },
+        {
+          _id: "c09edf7de69be44ce8f0215c3f62e43a5",
+          _component: "@budibase/standard-components/textv2",
+          _styles: {
+            normal: {
+              "--grid-desktop-col-end": 3,
+            },
+            hover: {},
+            active: {},
+          },
+          _instanceName: "Table title",
+          align: "left",
+          text: "## Inventory",
+        },
+        {
+          _id: "c5879d3daffbd47619a833d3f88f07526",
+          _component: "@budibase/standard-components/button",
+          _styles: {
+            normal: {
+              "--grid-desktop-col-start": 11,
+              "--grid-desktop-col-end": 13,
+              "--grid-desktop-row-start": 1,
+              "--grid-desktop-row-end": 3,
+              "--grid-desktop-h-align": "end",
+            },
+            hover: {},
+            active: {},
+          },
+          _instanceName: "New row button",
+          text: "Create row",
+          type: "cta",
+          size: "M",
+          gap: "M",
+          onClick: [
+            {
+              parameters: {
+                id: "c34d2b7c480144f3c800be15a62111d24",
+              },
+              "##eventHandlerType": "Open Side Panel",
+              id: "rYTWHu7k0",
+            },
+          ],
+        },
+        {
+          _id: "c73fd03209dd44dd3937a33c6205b031d",
+          _component: "@budibase/standard-components/sidepanel",
+          _styles: {
+            normal: {},
+            hover: {},
+            active: {},
+          },
+          _instanceName: "Edit row side panel",
+          ignoreClicksOutside: false,
+          _children: [
+            {
+              _id: "c3a5c8d0caf35410f8b75d6cb493ac693",
+              _component: "@budibase/standard-components/formblock",
+              _styles: {
+                normal: {},
+                hover: {},
+                active: {},
+              },
+              _instanceName: "Edit row form block",
+              dataSource: {
+                label: "Inventory",
+                tableId: "ta_bb_inventory",
+                type: "table",
+                datasourceName: "Sample Data",
+                resourceId: "ta_bb_inventory",
+              },
+              actionType: "Update",
+              buttonPosition: "bottom",
+              size: "spectrum--medium",
+              noRowsMessage: "We couldn't find a row to display",
+              disabled: false,
+              buttons: [
+                {
+                  text: "Save",
+                  _id: "cc8c5d82717a54e68a610fe7204e25392",
+                  _component: "@budibase/standard-components/button",
+                  onClick: [
+                    {
+                      "##eventHandlerType": "Validate Form",
+                      parameters: {
+                        componentId: "c3a5c8d0caf35410f8b75d6cb493ac693-form",
+                      },
+                    },
+                    {
+                      "##eventHandlerType": "Save Row",
+                      parameters: {
+                        providerId: "c3a5c8d0caf35410f8b75d6cb493ac693-form",
+                        tableId: "ta_bb_inventory",
+                        confirm: null,
+                      },
+                    },
+                    {
+                      "##eventHandlerType": "Close Screen Modal",
+                    },
+                    {
+                      "##eventHandlerType": "Close Side Panel",
+                    },
+                    {
+                      "##eventHandlerType": "Close Modal",
+                    },
+                  ],
+                  type: "cta",
+                },
+                {
+                  text: "Delete",
+                  _id: "cf20dbe1df3d648599932b04f7e630376",
+                  _component: "@budibase/standard-components/button",
+                  onClick: [
+                    {
+                      "##eventHandlerType": "Delete Row",
+                      parameters: {
+                        confirm: true,
+                        tableId: "ta_bb_inventory",
+                        rowId:
+                          "{{ [c3a5c8d0caf35410f8b75d6cb493ac693-repeater].[_id] }}",
+                        revId:
+                          "{{ [c3a5c8d0caf35410f8b75d6cb493ac693-repeater].[_rev] }}",
+                      },
+                    },
+                    {
+                      "##eventHandlerType": "Close Screen Modal",
+                    },
+                    {
+                      "##eventHandlerType": "Close Side Panel",
+                    },
+                    {
+                      "##eventHandlerType": "Close Modal",
+                    },
+                  ],
+                  quiet: true,
+                  type: "warning",
+                },
+              ],
+              fields: null,
+              rowId: "{{ [state].[inventoryID] }}",
+              title:
+                "{{ [c3a5c8d0caf35410f8b75d6cb493ac693-repeater].[Item Name] }}",
+            },
+          ],
+        },
+        {
+          _id: "c34d2b7c480144f3c800be15a62111d24",
+          _component: "@budibase/standard-components/sidepanel",
+          _styles: {
+            normal: {},
+            hover: {},
+            active: {},
+          },
+          _instanceName: "New row side panel",
+          ignoreClicksOutside: false,
+          _children: [
+            {
+              _id: "c61a1690c6ba0448db504eda38f766db1",
+              _component: "@budibase/standard-components/formblock",
+              _styles: {
+                normal: {},
+                hover: {},
+                active: {},
+              },
+              _instanceName: "New Form Block",
+              dataSource: {
+                label: "Inventory",
+                tableId: "ta_bb_inventory",
+                type: "table",
+                datasourceName: "Sample Data",
+                resourceId: "ta_bb_inventory",
+              },
+              actionType: "Create",
+              buttonPosition: "bottom",
+              size: "spectrum--medium",
+              noRowsMessage: "We couldn't find a row to display",
+              disabled: false,
+              buttons: [
+                {
+                  text: "Save",
+                  _id: "ced8cf5175b9c40aabd216f23f072a44c",
+                  _component: "@budibase/standard-components/button",
+                  onClick: [
+                    {
+                      "##eventHandlerType": "Validate Form",
+                      parameters: {
+                        componentId: "c61a1690c6ba0448db504eda38f766db1-form",
+                      },
+                    },
+                    {
+                      "##eventHandlerType": "Save Row",
+                      parameters: {
+                        providerId: "c61a1690c6ba0448db504eda38f766db1-form",
+                        tableId: "ta_bb_inventory",
+                        confirm: null,
+                      },
+                    },
+                    {
+                      "##eventHandlerType": "Close Screen Modal",
+                    },
+                    {
+                      "##eventHandlerType": "Close Side Panel",
+                    },
+                    {
+                      "##eventHandlerType": "Close Modal",
+                    },
+                    {
+                      "##eventHandlerType": "Clear Form",
+                      parameters: {
+                        componentId: "c61a1690c6ba0448db504eda38f766db1-form",
+                      },
+                    },
+                  ],
+                  type: "cta",
+                },
+              ],
+              fields: null,
+              title: "Add to inventory",
+            },
+          ],
+        },
+      ],
+      _instanceName: "Inventory - List",
+      layout: "grid",
+      direction: "column",
+      hAlign: "stretch",
+      vAlign: "top",
+      size: "grow",
+      gap: "M",
+    },
+  }
+}

packages/server/src/db/defaultData/datasource_bb_default.ts

@@ -106,6 +106,7 @@ export const DEFAULT_INVENTORY_TABLE_SCHEMA: Table = {
       type: FieldType.NUMBER,
       subtype: AutoFieldSubType.AUTO_ID,
       icon: "ri-magic-line",
+      width: 120,
       autocolumn: true,
       constraints: {
         type: FieldType.NUMBER,
@@ -128,6 +129,7 @@ export const DEFAULT_INVENTORY_TABLE_SCHEMA: Table = {
         },
       },
       name: "Item Name",
+      width: 160,
     },
     "Item Tags": {
       type: FieldType.ARRAY,
@@ -150,6 +152,7 @@ export const DEFAULT_INVENTORY_TABLE_SCHEMA: Table = {
       },
       name: "Notes",
       useRichText: null,
+      width: 220,
     },
     Status: {
       type: FieldType.ARRAY,
@@ -161,6 +164,7 @@ export const DEFAULT_INVENTORY_TABLE_SCHEMA: Table = {
         inclusion: ["Available", "Repair", "Broken"],
       },
       name: "Status",
+      width: 110,
       sortable: false,
     },
     SKU: {
@@ -171,6 +175,7 @@ export const DEFAULT_INVENTORY_TABLE_SCHEMA: Table = {
         presence: false,
       },
       name: "SKU",
+      width: 130,
     },
     "Purchase Date": {
       type: FieldType.DATETIME,
@@ -197,6 +202,7 @@ export const DEFAULT_INVENTORY_TABLE_SCHEMA: Table = {
         },
       },
       name: "Purchase Price",
+      width: 160,
     },
     ...AUTO_COLUMNS,
   },

packages/server/src/db/defaultData/inventoryImport.ts

@@ -2,8 +2,8 @@ export const inventoryImport = [
   {
     Status: ["Available"],
     "Item Name": "Little Blue Van",
-    SKU: "",
-    Notes: "MAX PAYLOAD 595 kg \nMAX LOAD LENGTH 1620 mm",
+    SKU: "LBV-101",
+    Notes: "Max payload 595 kg \nMax load length 1620 mm",
     tableId: "ta_bb_inventory",
     "Created At": "2022-11-10T19:11:40.141Z",
     "Updated At": "2022-11-10T20:05:04.608Z",
@@ -29,7 +29,7 @@ export const inventoryImport = [
     Status: ["Repair"],
     "Item Name": "Circular saw",
     SKU: "AB2-100",
-    Notes: "",
+    Notes: "Won't start",
     tableId: "ta_bb_inventory",
     "Created At": "2022-11-10T19:04:38.805Z",
     "Updated At": "2022-11-10T20:20:24.000Z",
@@ -58,7 +58,7 @@ export const inventoryImport = [
     Status: ["Available"],
     "Item Name": "Power Screwdriver",
     SKU: "TKIT-002-A",
-    Notes: "",
+    Notes: "Requires micro USB charger",
     tableId: "ta_bb_inventory",
     "Created At": "2022-11-10T20:10:51.129Z",
     "Updated At": "2022-11-10T20:13:37.821Z",
@@ -67,8 +67,8 @@ export const inventoryImport = [
   {
     Status: ["Available"],
     "Item Name": "Large Blue Van",
-    SKU: "",
-    Notes: "MAX LOAD LENGTH 4256 mm",
+    SKU: "LBV-102",
+    Notes: "Max load length 4256 mm",
     tableId: "ta_bb_inventory",
     "Created At": "2022-11-10T19:03:41.698Z",
     "Updated At": "2022-11-10T20:04:57.932Z",
@@ -81,7 +81,7 @@ export const inventoryImport = [
     "Purchase Price": 2500,
     "Purchase Date": "2022-11-09T12:00:00.000",
     Status: ["Available"],
-    "Item Name": "Office Laptop",
+    "Item Name": "Office laptop",
     SKU: "PC-123-ABC",
     Notes: "Office Laptop \n",
     tableId: "ta_bb_inventory",
@@ -93,8 +93,8 @@ export const inventoryImport = [
   {
     Status: ["Available"],
     "Item Name": "Little Red Van",
-    SKU: "",
-    Notes: "MAX PAYLOAD 595 kg \nMAX LOAD LENGTH 1620 mm",
+    SKU: "LRV-904-VNQ",
+    Notes: "Max payload 595 kg \nMax load length 1620 mm",
     tableId: "ta_bb_inventory",
     "Created At": "2022-11-10T19:55:02.367Z",
     "Updated At": "2022-11-10T20:05:13.504Z",

packages/server/src/definitions/openapi.ts

@@ -226,15 +226,22 @@ export interface components {
               type?: "link";
               /** @description A constraint can be applied to the column which will be validated against when a row is saved. */
               constraints?: {
-                /** @enum {string} */
-                type?: "string" | "number" | "object" | "boolean";
-                /** @description Defines whether the column is required or not. */
-                presence?: boolean;
+                type?: string;
+                presence?:
+                  | boolean
+                  | {
+                      /** @description Defines whether the value is allowed to be empty or not. */
+                      allowEmpty?: boolean;
+                    };
+                /** @description Defines the valid values for this column. */
+                inclusion?: unknown[];
               };
               /** @description The name of the column. */
               name?: string;
               /** @description Defines whether the column is automatically generated. */
               autocolumn?: boolean;
+              /** @description Defines the width of the column in the data UI. */
+              width?: number;
               /** @description The name of the column which a relationship column is related to in another table. */
               fieldName?: string;
               /** @description The ID of the table which a relationship column is related to. */
@@ -261,15 +268,22 @@ export interface components {
               type?: "formula";
               /** @description A constraint can be applied to the column which will be validated against when a row is saved. */
               constraints?: {
-                /** @enum {string} */
-                type?: "string" | "number" | "object" | "boolean";
-                /** @description Defines whether the column is required or not. */
-                presence?: boolean;
+                type?: string;
+                presence?:
+                  | boolean
+                  | {
+                      /** @description Defines whether the value is allowed to be empty or not. */
+                      allowEmpty?: boolean;
+                    };
+                /** @description Defines the valid values for this column. */
+                inclusion?: unknown[];
               };
               /** @description The name of the column. */
               name?: string;
               /** @description Defines whether the column is automatically generated. */
               autocolumn?: boolean;
+              /** @description Defines the width of the column in the data UI. */
+              width?: number;
               /** @description Defines a Handlebars or JavaScript formula to use, note that Javascript formulas are expected to be provided in the base64 format. */
               formula?: string;
               /**
@@ -280,7 +294,7 @@ export interface components {
             }
           | {
               /**
-               * @description Defines the type of the column, most explain themselves, a link column is a relationship.
+               * @description Defines the type of the column
                * @enum {string}
                */
               type?:
@@ -293,8 +307,6 @@ export interface components {
                 | "datetime"
                 | "attachment"
                 | "attachment_single"
-                | "link"
-                | "formula"
                 | "auto"
                 | "ai"
                 | "json"
@@ -306,15 +318,22 @@ export interface components {
                 | "bb_reference_single";
               /** @description A constraint can be applied to the column which will be validated against when a row is saved. */
               constraints?: {
-                /** @enum {string} */
-                type?: "string" | "number" | "object" | "boolean";
-                /** @description Defines whether the column is required or not. */
-                presence?: boolean;
+                type?: string;
+                presence?:
+                  | boolean
+                  | {
+                      /** @description Defines whether the value is allowed to be empty or not. */
+                      allowEmpty?: boolean;
+                    };
+                /** @description Defines the valid values for this column. */
+                inclusion?: unknown[];
               };
               /** @description The name of the column. */
               name?: string;
               /** @description Defines whether the column is automatically generated. */
               autocolumn?: boolean;
+              /** @description Defines the width of the column in the data UI. */
+              width?: number;
             };
       };
     };
@@ -335,15 +354,22 @@ export interface components {
                 type?: "link";
                 /** @description A constraint can be applied to the column which will be validated against when a row is saved. */
                 constraints?: {
-                  /** @enum {string} */
-                  type?: "string" | "number" | "object" | "boolean";
-                  /** @description Defines whether the column is required or not. */
-                  presence?: boolean;
+                  type?: string;
+                  presence?:
+                    | boolean
+                    | {
+                        /** @description Defines whether the value is allowed to be empty or not. */
+                        allowEmpty?: boolean;
+                      };
+                  /** @description Defines the valid values for this column. */
+                  inclusion?: unknown[];
                 };
                 /** @description The name of the column. */
                 name?: string;
                 /** @description Defines whether the column is automatically generated. */
                 autocolumn?: boolean;
+                /** @description Defines the width of the column in the data UI. */
+                width?: number;
                 /** @description The name of the column which a relationship column is related to in another table. */
                 fieldName?: string;
                 /** @description The ID of the table which a relationship column is related to. */
@@ -373,15 +399,22 @@ export interface components {
                 type?: "formula";
                 /** @description A constraint can be applied to the column which will be validated against when a row is saved. */
                 constraints?: {
-                  /** @enum {string} */
-                  type?: "string" | "number" | "object" | "boolean";
-                  /** @description Defines whether the column is required or not. */
-                  presence?: boolean;
+                  type?: string;
+                  presence?:
+                    | boolean
+                    | {
+                        /** @description Defines whether the value is allowed to be empty or not. */
+                        allowEmpty?: boolean;
+                      };
+                  /** @description Defines the valid values for this column. */
+                  inclusion?: unknown[];
                 };
                 /** @description The name of the column. */
                 name?: string;
                 /** @description Defines whether the column is automatically generated. */
                 autocolumn?: boolean;
+                /** @description Defines the width of the column in the data UI. */
+                width?: number;
                 /** @description Defines a Handlebars or JavaScript formula to use, note that Javascript formulas are expected to be provided in the base64 format. */
                 formula?: string;
                 /**
@@ -392,7 +425,7 @@ export interface components {
               }
             | {
                 /**
-                 * @description Defines the type of the column, most explain themselves, a link column is a relationship.
+                 * @description Defines the type of the column
                  * @enum {string}
                  */
                 type?:
@@ -405,8 +438,6 @@ export interface components {
                   | "datetime"
                   | "attachment"
                   | "attachment_single"
-                  | "link"
-                  | "formula"
                   | "auto"
                   | "ai"
                   | "json"
@@ -418,15 +449,22 @@ export interface components {
                   | "bb_reference_single";
                 /** @description A constraint can be applied to the column which will be validated against when a row is saved. */
                 constraints?: {
-                  /** @enum {string} */
-                  type?: "string" | "number" | "object" | "boolean";
-                  /** @description Defines whether the column is required or not. */
-                  presence?: boolean;
+                  type?: string;
+                  presence?:
+                    | boolean
+                    | {
+                        /** @description Defines whether the value is allowed to be empty or not. */
+                        allowEmpty?: boolean;
+                      };
+                  /** @description Defines the valid values for this column. */
+                  inclusion?: unknown[];
                 };
                 /** @description The name of the column. */
                 name?: string;
                 /** @description Defines whether the column is automatically generated. */
                 autocolumn?: boolean;
+                /** @description Defines the width of the column in the data UI. */
+                width?: number;
               };
         };
         /** @description The ID of the table. */
@@ -449,15 +487,22 @@ export interface components {
                 type?: "link";
                 /** @description A constraint can be applied to the column which will be validated against when a row is saved. */
                 constraints?: {
-                  /** @enum {string} */
-                  type?: "string" | "number" | "object" | "boolean";
-                  /** @description Defines whether the column is required or not. */
-                  presence?: boolean;
+                  type?: string;
+                  presence?:
+                    | boolean
+                    | {
+                        /** @description Defines whether the value is allowed to be empty or not. */
+                        allowEmpty?: boolean;
+                      };
+                  /** @description Defines the valid values for this column. */
+                  inclusion?: unknown[];
                 };
                 /** @description The name of the column. */
                 name?: string;
                 /** @description Defines whether the column is automatically generated. */
                 autocolumn?: boolean;
+                /** @description Defines the width of the column in the data UI. */
+                width?: number;
                 /** @description The name of the column which a relationship column is related to in another table. */
                 fieldName?: string;
                 /** @description The ID of the table which a relationship column is related to. */
@@ -487,15 +532,22 @@ export interface components {
                 type?: "formula";
                 /** @description A constraint can be applied to the column which will be validated against when a row is saved. */
                 constraints?: {
-                  /** @enum {string} */
-                  type?: "string" | "number" | "object" | "boolean";
-                  /** @description Defines whether the column is required or not. */
-                  presence?: boolean;
+                  type?: string;
+                  presence?:
+                    | boolean
+                    | {
+                        /** @description Defines whether the value is allowed to be empty or not. */
+                        allowEmpty?: boolean;
+                      };
+                  /** @description Defines the valid values for this column. */
+                  inclusion?: unknown[];
                 };
                 /** @description The name of the column. */
                 name?: string;
                 /** @description Defines whether the column is automatically generated. */
                 autocolumn?: boolean;
+                /** @description Defines the width of the column in the data UI. */
+                width?: number;
                 /** @description Defines a Handlebars or JavaScript formula to use, note that Javascript formulas are expected to be provided in the base64 format. */
                 formula?: string;
                 /**
@@ -506,7 +558,7 @@ export interface components {
               }
             | {
                 /**
-                 * @description Defines the type of the column, most explain themselves, a link column is a relationship.
+                 * @description Defines the type of the column
                  * @enum {string}
                  */
                 type?:
@@ -519,8 +571,6 @@ export interface components {
                   | "datetime"
                   | "attachment"
                   | "attachment_single"
-                  | "link"
-                  | "formula"
                   | "auto"
                   | "ai"
                   | "json"
@@ -532,15 +582,22 @@ export interface components {
                   | "bb_reference_single";
                 /** @description A constraint can be applied to the column which will be validated against when a row is saved. */
                 constraints?: {
-                  /** @enum {string} */
-                  type?: "string" | "number" | "object" | "boolean";
-                  /** @description Defines whether the column is required or not. */
-                  presence?: boolean;
+                  type?: string;
+                  presence?:
+                    | boolean
+                    | {
+                        /** @description Defines whether the value is allowed to be empty or not. */
+                        allowEmpty?: boolean;
+                      };
+                  /** @description Defines the valid values for this column. */
+                  inclusion?: unknown[];
                 };
                 /** @description The name of the column. */
                 name?: string;
                 /** @description Defines whether the column is automatically generated. */
                 autocolumn?: boolean;
+                /** @description Defines the width of the column in the data UI. */
+                width?: number;
               };
         };
         /** @description The ID of the table. */

packages/server/src/sdk/app/rows/search/internal/sqs.ts

@@ -5,6 +5,8 @@ import {
   EnrichedQueryJson,
   FieldType,
   isLogicalSearchOperator,
+  LockName,
+  LockType,
   Operation,
   QueryJson,
   RelationshipFieldMetadata,
@@ -30,6 +32,7 @@ import {
 } from "../../../tables/internal/sqs"
 import {
   context,
+  locks,
   sql,
   SQLITE_DESIGN_DOC_ID,
   SQS_DATASOURCE_INTERNAL,
@@ -509,7 +512,14 @@ export async function search(
   } catch (err: any) {
     const msg = typeof err === "string" ? err : err.message
     if (!opts?.retrying && resyncDefinitionsRequired(err.status, msg)) {
-      await sdk.tables.sqs.syncDefinition()
+      await locks.doWithLock(
+        {
+          type: LockType.AUTO_EXTEND,
+          name: LockName.SQS_SYNC_DEFINITIONS,
+          resource: context.getAppId(),
+        },
+        sdk.tables.sqs.syncDefinition
+      )
       return search(options, source, { retrying: true })
     }
     // previously the internal table didn't error when a column didn't exist in search

packages/types/src/documents/global/user.ts

@@ -1,4 +1,5 @@
 import { Document } from "../document"
+import { ContextUser } from "../../sdk"
 
 // SSO
 
@@ -32,7 +33,7 @@ export interface UserSSO {
 
 export type SSOUser = User & UserSSO
 
-export function isSSOUser(user: User): user is SSOUser {
+export function isSSOUser(user: User | ContextUser): user is SSOUser {
   return !!(user as SSOUser).providerType
 }
 

packages/types/src/sdk/locks.ts

@@ -22,6 +22,7 @@ export enum LockName {
   QUOTA_USAGE_EVENT = "quota_usage_event",
   APP_MIGRATION = "app_migrations",
   PROCESS_USER_INVITE = "process_user_invite",
+  SQS_SYNC_DEFINITIONS = "sys_sync_definitions",
 }
 
 export type LockOptions = {