@budibase/frontend-core 3.5.2 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.5.2",
+  "version": "3.6.0",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -17,5 +17,5 @@
     "shortid": "2.2.15",
     "socket.io-client": "^4.7.5"
   },
-  "gitHead": "2d3a130fceeb689d3013606dde57bab8db41c586"
+  "gitHead": "fcc8291c1f2968ee7fd17bd47ee6ca19181a14a7"
 }

package/src/api/ai.ts

@@ -1,7 +1,9 @@
+import { GenerateJsRequest, GenerateJsResponse } from "@budibase/types"
 import { BaseAPIClient } from "./types"
 
 export interface AIEndpoints {
   generateCronExpression: (prompt: string) => Promise<{ message: string }>
+  generateJs: (req: GenerateJsRequest) => Promise<GenerateJsResponse>
 }
 
 export const buildAIEndpoints = (API: BaseAPIClient): AIEndpoints => ({
@@ -14,4 +16,11 @@ export const buildAIEndpoints = (API: BaseAPIClient): AIEndpoints => ({
       body: { prompt },
     })
   },
+
+  generateJs: async req => {
+    return await API.post({
+      url: "/api/ai/js",
+      body: req,
+    })
+  },
 })

package/src/api/index.ts

@@ -45,6 +45,7 @@ import { buildAuditLogEndpoints } from "./auditLogs"
 import { buildLogsEndpoints } from "./logs"
 import { buildMigrationEndpoints } from "./migrations"
 import { buildRowActionEndpoints } from "./rowActions"
+import { buildOAuth2Endpoints } from "./oauth2"
 
 export type { APIClient } from "./types"
 
@@ -290,5 +291,6 @@ export const createAPIClient = (config: APIClientConfig = {}): APIClient => {
     ...buildMigrationEndpoints(API),
     viewV2: buildViewV2Endpoints(API),
     rowActions: buildRowActionEndpoints(API),
+    oauth2: buildOAuth2Endpoints(API),
   }
 }

package/src/api/oauth2.ts

@@ -0,0 +1,86 @@
+import {
+  FetchOAuth2ConfigsResponse,
+  InsertOAuth2ConfigRequest,
+  InsertOAuth2ConfigResponse,
+  OAuth2ConfigResponse,
+  UpdateOAuth2ConfigRequest,
+  UpdateOAuth2ConfigResponse,
+  ValidateConfigRequest,
+  ValidateConfigResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface OAuth2Endpoints {
+  fetch: () => Promise<OAuth2ConfigResponse[]>
+  create: (
+    config: InsertOAuth2ConfigRequest
+  ) => Promise<InsertOAuth2ConfigResponse>
+  update: (
+    config: UpdateOAuth2ConfigRequest
+  ) => Promise<UpdateOAuth2ConfigResponse>
+  delete: (id: string, rev: string) => Promise<void>
+  validate: (config: ValidateConfigRequest) => Promise<ValidateConfigResponse>
+}
+
+export const buildOAuth2Endpoints = (API: BaseAPIClient): OAuth2Endpoints => ({
+  /**
+   * Gets all OAuth2 configurations for the app.
+   */
+  fetch: async () => {
+    return (
+      await API.get<FetchOAuth2ConfigsResponse>({
+        url: `/api/oauth2`,
+      })
+    ).configs
+  },
+
+  /**
+   * Creates a OAuth2 configuration.
+   */
+  create: async config => {
+    return await API.post<
+      InsertOAuth2ConfigRequest,
+      InsertOAuth2ConfigResponse
+    >({
+      url: `/api/oauth2`,
+      body: {
+        ...config,
+      },
+    })
+  },
+
+  /**
+   * Updates an existing OAuth2 configuration.
+   */
+  update: async config => {
+    return await API.put<UpdateOAuth2ConfigRequest, UpdateOAuth2ConfigResponse>(
+      {
+        url: `/api/oauth2/${config._id}`,
+        body: {
+          ...config,
+        },
+      }
+    )
+  },
+
+  /**
+   * Deletes an OAuth2 configuration by its id.
+   * @param id the ID of the OAuth2 config
+   * @param rev the rev of the OAuth2 config
+   */
+  delete: async (id, rev) => {
+    return await API.delete<void, void>({
+      url: `/api/oauth2/${id}/${rev}`,
+    })
+  },
+  validate: async function (
+    config: ValidateConfigRequest
+  ): Promise<ValidateConfigResponse> {
+    return await API.post<ValidateConfigRequest, ValidateConfigResponse>({
+      url: `/api/oauth2/validate`,
+      body: {
+        ...config,
+      },
+    })
+  },
+})

package/src/api/types.ts

@@ -16,6 +16,7 @@ import { LayoutEndpoints } from "./layouts"
 import { LicensingEndpoints } from "./licensing"
 import { LogEndpoints } from "./logs"
 import { MigrationEndpoints } from "./migrations"
+import { OAuth2Endpoints } from "./oauth2"
 import { OtherEndpoints } from "./other"
 import { PermissionEndpoints } from "./permissions"
 import { PluginEndpoins } from "./plugins"
@@ -132,4 +133,8 @@ export type APIClient = BaseAPIClient &
   TableEndpoints &
   TemplateEndpoints &
   UserEndpoints &
-  ViewEndpoints & { rowActions: RowActionEndpoints; viewV2: ViewV2Endpoints }
+  ViewEndpoints & {
+    rowActions: RowActionEndpoints
+    viewV2: ViewV2Endpoints
+    oauth2: OAuth2Endpoints
+  }

package/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>

package/src/components/PasswordRepeatInput.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { FancyForm, FancyInput } from "@budibase/bbui"
+  import { createValidationStore, requiredValidator } from "../utils/validation"
+
+  export let passwordForm: FancyForm | undefined = undefined
+  export let password: string
+  export let error: string
+  export let minLength = "12"
+
+  const validatePassword = (value: string | undefined) => {
+    if (!value || value.length < parseInt(minLength)) {
+      return `Please enter at least ${minLength} characters. We recommend using machine generated or random passwords.`
+    }
+    return null
+  }
+
+  const [firstPassword, passwordError, firstTouched] = createValidationStore(
+    "",
+    requiredValidator
+  )
+  const [repeatPassword, _, repeatTouched] = createValidationStore(
+    "",
+    requiredValidator,
+    validatePassword
+  )
+
+  $: password = $firstPassword
+  $: firstPasswordError =
+    ($firstTouched && $passwordError) ||
+    ($repeatTouched && validatePassword(password))
+  $: error =
+    !$firstPassword ||
+    !$firstTouched ||
+    !$repeatTouched ||
+    $firstPassword !== $repeatPassword ||
+    firstPasswordError
+</script>
+
+<FancyForm bind:this={passwordForm}>
+  <FancyInput
+    label="Password"
+    type="password"
+    error={firstPasswordError}
+    bind:value={$firstPassword}
+  />
+  <FancyInput
+    label="Repeat password"
+    type="password"
+    error={$repeatTouched &&
+      $firstPassword !== $repeatPassword &&
+      "Passwords must match"}
+    bind:value={$repeatPassword}
+  />
+</FancyForm>

package/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>

package/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>

package/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: 600;
   }
   .header-cell.searching .name {
     opacity: 0;

package/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(--spectrum-global-color-gray-100)
+    );
     --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>

package/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);

package/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 {

package/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;

package/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

package/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);

package/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
     }
   )

package/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,

package/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
     }

package/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"

package/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-_]+$/

package/src/fetch/DataFetch.ts

@@ -8,6 +8,7 @@ import {
   Row,
   SearchFilters,
   SortOrder,
+  SortType,
   TableSchema,
 } from "@budibase/types"
 import { APIClient } from "../api/types"
@@ -71,6 +72,8 @@ export default abstract class BaseDataFetch<
   options: DataFetchOptions<TQuery> & {
     datasource: TDatasource
 
+    sortType: SortType | null
+
     // Client side feature customisation
     clientSideSearching: boolean
     clientSideSorting: boolean
@@ -103,6 +106,7 @@ export default abstract class BaseDataFetch<
       // Sorting config
       sortColumn: null,
       sortOrder: SortOrder.ASCENDING,
+      sortType: null,
 
       // Pagination config
       paginate: true,
@@ -223,12 +227,31 @@ export default abstract class BaseDataFetch<
       this.options.sortColumn = this.getDefaultSortColumn(definition, schema)
     }
 
-    // If no sort order, default to ascending
-    if (!this.options.sortOrder) {
+    // If we don't have a sort column specified then just ensure we don't set
+    // any sorting params
+    if (!this.options.sortColumn) {
       this.options.sortOrder = SortOrder.ASCENDING
+      this.options.sortType = null
     } else {
-      // Ensure sortOrder matches the enum
-      this.options.sortOrder = this.options.sortOrder.toLowerCase() as SortOrder
+      // Otherwise determine what sort type to use base on sort column
+      this.options.sortType = SortType.STRING
+      const fieldSchema = schema?.[this.options.sortColumn]
+      if (
+        fieldSchema?.type === FieldType.NUMBER ||
+        fieldSchema?.type === FieldType.BIGINT ||
+        ("calculationType" in fieldSchema && fieldSchema?.calculationType)
+      ) {
+        this.options.sortType = SortType.NUMBER
+      }
+
+      // If no sort order, default to ascending
+      if (!this.options.sortOrder) {
+        this.options.sortOrder = SortOrder.ASCENDING
+      } else {
+        // Ensure sortOrder matches the enum
+        this.options.sortOrder =
+          this.options.sortOrder.toLowerCase() as SortOrder
+      }
     }
 
     // Build the query
@@ -271,6 +294,7 @@ export default abstract class BaseDataFetch<
     const {
       sortColumn,
       sortOrder,
+      sortType,
       limit,
       clientSideSearching,
       clientSideSorting,
@@ -287,8 +311,8 @@ export default abstract class BaseDataFetch<
     }
 
     // If we don't support sorting, do a client-side sort
-    if (!this.features.supportsSort && clientSideSorting && sortColumn) {
-      rows = sort(rows, sortColumn, sortOrder)
+    if (!this.features.supportsSort && clientSideSorting && sortType) {
+      rows = sort(rows, sortColumn as any, sortOrder, sortType)
     }
 
     // If we don't support pagination, do a client-side limit

package/src/fetch/TableFetch.ts

@@ -29,7 +29,8 @@ export default class TableFetch extends BaseDataFetch<TableDatasource, Table> {
   }
 
   async getData() {
-    const { datasource, limit, sortColumn, sortOrder, paginate } = this.options
+    const { datasource, limit, sortColumn, sortOrder, sortType, paginate } =
+      this.options
     const { tableId } = datasource
     const { cursor, query } = get(this.store)
 
@@ -40,6 +41,7 @@ export default class TableFetch extends BaseDataFetch<TableDatasource, Table> {
         limit,
         sort: sortColumn,
         sortOrder: sortOrder ?? SortOrder.ASCENDING,
+        sortType,
         paginate,
         bookmark: cursor,
       })

package/src/fetch/ViewV2Fetch.ts

@@ -1,5 +1,4 @@
 import {
-  SearchViewRowRequest,
   SortOrder,
   ViewDatasource,
   ViewV2Enriched,
@@ -41,7 +40,8 @@ export default class ViewV2Fetch extends BaseDataFetch<
   }
 
   async getData() {
-    const { datasource, limit, sortColumn, sortOrder, paginate } = this.options
+    const { datasource, limit, sortColumn, sortOrder, sortType, paginate } =
+      this.options
     const { cursor, query, definition } = get(this.store)
 
     // If this is a calculation view and we have no calculations, return nothing
@@ -68,13 +68,14 @@ export default class ViewV2Fetch extends BaseDataFetch<
     }
 
     try {
-      const request: SearchViewRowRequest = {
+      const request = {
         query,
         paginate,
         limit,
         bookmark: cursor,
         sort: sortColumn,
         sortOrder: sortOrder,
+        sortType,
       }
       if (paginate) {
         const res = await this.API.viewV2.fetch(datasource.id, {

package/src/utils/index.ts

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

package/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) {

package/src/utils/utils.ts

@@ -397,14 +397,19 @@ export function parseFilter(filter: UISearchFilter) {
 
   const update = cloneDeep(filter)
 
-  update.groups = update.groups
-    ?.map(group => {
-      group.filters = group.filters?.filter((filter: any) => {
-        return filter.field && filter.operator
+  if (update.groups) {
+    update.groups = update.groups
+      .map(group => {
+        if (group.filters) {
+          group.filters = group.filters.filter((filter: any) => {
+            return filter.field && filter.operator
+          })
+          return group.filters?.length ? group : null
+        }
+        return group
       })
-      return group.filters?.length ? group : null
-    })
-    .filter((group): group is SearchFilterGroup => !!group)
+      .filter((group): group is SearchFilterGroup => !!group)
+  }
 
   return update
 }

package/src/utils/validation/index.js

@@ -0,0 +1,2 @@
+export { emailValidator, requiredValidator } from "./validators"
+export { createValidationStore } from "./validation"

package/src/utils/validation/validation.js

@@ -0,0 +1,28 @@
+import { writable, derived } from "svelte/store"
+
+// DEPRECATED - Use the yup based validators for future validation
+
+export function createValidationStore(initialValue, ...validators) {
+  let touched = false
+
+  const value = writable(initialValue || "")
+  const touchedStore = derived(value, () => {
+    if (!touched) {
+      touched = true
+      return false
+    }
+    return touched
+  })
+  const error = derived(
+    [value, touchedStore],
+    ([$v, $t]) => $t && validate($v, validators)
+  )
+
+  return [value, error, touchedStore]
+}
+
+function validate(value, validators) {
+  const failing = validators.find(v => v(value) !== true)
+
+  return failing && failing(value)
+}

package/src/utils/validation/validators.js

@@ -0,0 +1,18 @@
+// TODO: Convert to yup based validators
+
+export function emailValidator(value) {
+  return (
+    (value &&
+      !!value.match(
+        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+      )) ||
+    "Please enter a valid email"
+  )
+}
+
+export function requiredValidator(value) {
+  return (
+    (value !== undefined && value !== null && value !== "") ||
+    "This field is required"
+  )
+}

package/src/utils/validation/yup/app.js

@@ -0,0 +1,87 @@
+import { string, mixed } from "yup"
+import { APP_NAME_REGEX, APP_URL_REGEX } from "../../../constants"
+
+export const name = (validation, { apps, currentApp } = { apps: [] }) => {
+  validation.addValidator(
+    "name",
+    string()
+      .trim()
+      .required("Your application must have a name")
+      .matches(
+        APP_NAME_REGEX,
+        "App name must be letters, numbers and spaces only"
+      )
+      .test(
+        "non-existing-app-name",
+        "Another app with the same name already exists",
+        value => {
+          if (!value) {
+            // exit early, above validator will fail
+            return true
+          }
+          return !apps
+            .filter(app => {
+              return app.appId !== currentApp?.appId
+            })
+            .map(app => app.name)
+            .some(appName => appName.toLowerCase() === value.toLowerCase())
+        }
+      )
+  )
+}
+
+export const url = (validation, { apps, currentApp } = { apps: [] }) => {
+  validation.addValidator(
+    "url",
+    string()
+      .trim()
+      .nullable()
+      .required("Your application must have a url")
+      .matches(APP_URL_REGEX, "Please enter a valid url")
+      .test(
+        "non-existing-app-url",
+        "Another app with the same URL already exists",
+        value => {
+          if (!value) {
+            return true
+          }
+          if (currentApp) {
+            // filter out the current app if present
+            apps = apps.filter(app => app.appId !== currentApp.appId)
+          }
+          return !apps
+            .map(app => app.url)
+            .some(appUrl => {
+              const url =
+                appUrl?.[0] === "/"
+                  ? appUrl.substring(1, appUrl.length)
+                  : appUrl
+              return url?.toLowerCase() === value.toLowerCase()
+            })
+        }
+      )
+      .test("valid-url", "Not a valid URL", value => {
+        // url is nullable
+        if (!value) {
+          return true
+        }
+        // make it clear that this is a url path and cannot be a full url
+        return (
+          !value.includes("http") &&
+          !value.includes("www") &&
+          !value.includes(".")
+        )
+      })
+  )
+}
+
+export const file = (validation, { template } = {}) => {
+  const templateToUse =
+    template && Object.keys(template).length === 0 ? null : template
+  validation.addValidator(
+    "file",
+    templateToUse?.fromFile
+      ? mixed().required("Please choose a file to import")
+      : null
+  )
+}

package/src/utils/validation/yup/index.js

@@ -0,0 +1,151 @@
+import { object, string, number } from "yup"
+import { writable, get } from "svelte/store"
+import { Helpers, notifications } from "@budibase/bbui"
+
+export const createValidationStore = () => {
+  const DEFAULT = {
+    values: {},
+    errors: {},
+    touched: {},
+    valid: false,
+  }
+
+  const validator = {}
+  const validation = writable(DEFAULT)
+
+  const addValidator = (propertyName, propertyValidator) => {
+    if (!propertyValidator || !propertyName) {
+      return
+    }
+    validator[propertyName] = propertyValidator
+  }
+
+  const addValidatorType = (propertyName, type, required, options) => {
+    if (!type || !propertyName) {
+      return
+    }
+
+    let propertyValidator
+    switch (type) {
+      case "number":
+        propertyValidator = number().nullable()
+        break
+      case "email":
+        propertyValidator = string().email().nullable()
+        break
+      case "password":
+        propertyValidator = string().nullable()
+        break
+      default:
+        propertyValidator = string().nullable()
+    }
+
+    if (required) {
+      propertyValidator = propertyValidator.required()
+    }
+
+    if (options?.minLength) {
+      propertyValidator = propertyValidator.min(options.minLength)
+    }
+
+    validator[propertyName] = propertyValidator
+  }
+
+  const observe = async (propertyName, value) => {
+    const values = get(validation).values
+    let fieldIsValid
+    if (!Object.prototype.hasOwnProperty.call(values, propertyName)) {
+      // Initial setup
+      values[propertyName] = value
+      return
+    }
+
+    if (value === values[propertyName]) {
+      return
+    }
+
+    const obj = object().shape(validator)
+    try {
+      validation.update(store => {
+        store.errors[propertyName] = null
+        return store
+      })
+      await obj.validateAt(propertyName, { [propertyName]: value })
+      fieldIsValid = true
+    } catch (error) {
+      const [fieldError] = error.errors
+      if (fieldError) {
+        validation.update(store => {
+          store.errors[propertyName] = Helpers.capitalise(fieldError)
+          store.valid = false
+          return store
+        })
+      }
+    }
+
+    if (fieldIsValid) {
+      // Validate the rest of the fields
+      try {
+        await obj.validate(
+          { ...values, [propertyName]: value },
+          { abortEarly: false }
+        )
+        validation.update(store => {
+          store.valid = true
+          return store
+        })
+      } catch {
+        validation.update(store => {
+          store.valid = false
+          return store
+        })
+      }
+    }
+  }
+
+  const check = async values => {
+    const obj = object().shape(validator)
+    // clear the previous errors
+    const properties = Object.keys(validator)
+    properties.forEach(property => (get(validation).errors[property] = null))
+
+    let validationError = false
+    try {
+      await obj.validate(values, { abortEarly: false })
+    } catch (error) {
+      if (!error.inner) {
+        notifications.error("Unexpected validation error", error)
+        validationError = true
+      } else {
+        error.inner.forEach(err => {
+          validation.update(store => {
+            store.errors[err.path] = Helpers.capitalise(err.message)
+            return store
+          })
+        })
+      }
+    }
+
+    let valid
+    if (properties.length && !validationError) {
+      valid = await obj.isValid(values)
+    } else {
+      // don't say valid until validators have been loaded
+      valid = false
+    }
+
+    validation.update(store => {
+      store.valid = valid
+      return store
+    })
+  }
+
+  return {
+    subscribe: validation.subscribe,
+    set: validation.set,
+    check,
+    addValidator,
+    addValidatorType,
+    observe,
+  }
+}