From 894cfba0e07eebfd2b34878dfa123984a98fc420 Mon Sep 17 00:00:00 2001 From: Adria Navarro Date: Thu, 20 Feb 2025 10:58:03 +0100 Subject: [PATCH 01/49] Type BindingSidePanel --- .../bbui/src/Actions/position_dropdown.ts | 2 +- packages/bbui/src/Popover/Popover.svelte | 3 +- .../common/bindings/BindingPanel.svelte | 2 +- .../common/bindings/BindingSidePanel.svelte | 109 ++++++++++-------- packages/types/src/ui/bindings/binding.ts | 12 ++ packages/types/src/ui/bindings/helper.ts | 1 + 6 files changed, 79 insertions(+), 50 deletions(-) diff --git a/packages/bbui/src/Actions/position_dropdown.ts b/packages/bbui/src/Actions/position_dropdown.ts index 424baf91f3..edfe901921 100644 --- a/packages/bbui/src/Actions/position_dropdown.ts +++ b/packages/bbui/src/Actions/position_dropdown.ts @@ -27,7 +27,7 @@ export type UpdateHandler = ( interface Opts { anchor?: HTMLElement - align: PopoverAlignment + align: PopoverAlignment | `${PopoverAlignment}` maxHeight?: number maxWidth?: number minWidth?: number diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte index 0d16aa4f77..5d0c5b7039 100644 --- a/packages/bbui/src/Popover/Popover.svelte +++ b/packages/bbui/src/Popover/Popover.svelte @@ -19,7 +19,8 @@ import { PopoverAlignment } from "../constants" export let anchor: HTMLElement - export let align: PopoverAlignment = PopoverAlignment.Right + export let align: PopoverAlignment | `${PopoverAlignment}` = + PopoverAlignment.Right export let portalTarget: string | undefined = undefined export let minWidth: number | undefined = undefined export let maxWidth: number | undefined = undefined diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte index 2c35acdf2d..1f61136500 100644 --- a/packages/builder/src/components/common/bindings/BindingPanel.svelte +++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte @@ -421,7 +421,7 @@ {context} addHelper={onSelectHelper} addBinding={onSelectBinding} - mode={editorMode} + {mode} /> {:else if sidePanel === SidePanel.Evaluation} + - -
- {#if hoverTarget.description} -
+{#if popoverAnchor && hoverTarget} + +
+ {#if hoverTarget.description} +
+ + {@html hoverTarget.description} +
+ {/if} + {#if hoverTarget.code} - {@html hoverTarget.description} -
- {/if} - {#if hoverTarget.code} - - 
{@html hoverTarget.code}
- {/if} -
- + 
{@html hoverTarget.code}
+ {/if} +
+ +{/if} @@ -173,7 +186,7 @@
@@ -230,7 +243,8 @@ {#each category.bindings as binding}
  • showBindingPopover(binding, e.target)} + on:mouseenter={e => + showBindingPopover(binding, e.currentTarget)} on:mouseleave={hidePopover} on:click={() => addBinding(binding)} > @@ -266,7 +280,8 @@ class="binding" on:mouseenter={e => showHelperPopover(helper, e.target)} on:mouseleave={hidePopover} - on:click={() => addHelper(helper, mode.name === "javascript")} + on:click={() => + addHelper(helper, mode === BindingMode.JavaScript)} > {helper.displayText} diff --git a/packages/types/src/ui/bindings/binding.ts b/packages/types/src/ui/bindings/binding.ts index fdeb4a6c13..9e15d9dd13 100644 --- a/packages/types/src/ui/bindings/binding.ts +++ b/packages/types/src/ui/bindings/binding.ts @@ -1,7 +1,19 @@ export interface EnrichedBinding { + value: string + valueHTML: string runtimeBinding: string readableBinding: string type?: null | string + icon?: string + category: string + display?: { name: string; type: string } + fieldSchema?: { + name: string + tableId: string + type: string + subtype?: string + prefixKeys?: string + } } export enum BindingMode { diff --git a/packages/types/src/ui/bindings/helper.ts b/packages/types/src/ui/bindings/helper.ts index e772180264..e25918438f 100644 --- a/packages/types/src/ui/bindings/helper.ts +++ b/packages/types/src/ui/bindings/helper.ts @@ -1,4 +1,5 @@ export interface Helper { + displayText: string example: string description: string args: any[] From 93a65b6289f74f9b1248dc9ab09cb454ed77a4d3 Mon Sep 17 00:00:00 2001 From: Adria Navarro Date: Thu, 20 Feb 2025 11:17:09 +0100 Subject: [PATCH 02/49] Add eslint rule for consistent type imports --- eslint.config.mjs | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/eslint.config.mjs b/eslint.config.mjs index c497974612..2f4072a188 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -94,6 +94,15 @@ export default [ allowImportExportEverywhere: true, }, }, + + plugins: { + ...config.plugins, + "@typescript-eslint": tseslint.plugin, + }, + rules: { + ...config.rules, + "@typescript-eslint/consistent-type-imports": "error", + }, })), ...tseslint.configs.strict.map(config => ({ ...config, From a84044e6a1daf862a03f56cefa7e85acd3eb4f28 Mon Sep 17 00:00:00 2001 From: Adria Navarro Date: Thu, 20 Feb 2025 11:18:40 +0100 Subject: [PATCH 03/49] Lint fix --- .../components/common/bindings/BindingSidePanel.svelte | 3 ++- packages/client/src/components/app/DataProvider.svelte | 9 +++++---- .../src/components/app/blocks/form/FormBlock.svelte | 2 +- .../components/error-states/ComponentErrorState.svelte | 2 +- .../error-states/ComponentErrorStateCTA.svelte | 2 +- packages/client/src/components/preview/DNDHandler.svelte | 2 +- 6 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte index 9cd56c7797..120d14252d 100644 --- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte +++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte @@ -3,7 +3,8 @@ import { convertToJS } from "@budibase/string-templates" import { Input, Layout, Icon, Popover } from "@budibase/bbui" import { handlebarsCompletions } from "@/constants/completions" - import { BindingMode, EnrichedBinding, Helper } from "@budibase/types" + import type { EnrichedBinding, Helper } from "@budibase/types"; +import { BindingMode } from "@budibase/types" export let addHelper: (helper: Helper, js?: boolean) => void export let addBinding: (binding: EnrichedBinding) => void diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte index a80b9a5f74..9c79b36c4b 100644 --- a/packages/client/src/components/app/DataProvider.svelte +++ b/packages/client/src/components/app/DataProvider.svelte @@ -2,9 +2,7 @@ import { getContext } from "svelte" import { Pagination, ProgressCircle } from "@budibase/bbui" import { fetchData, QueryUtils } from "@budibase/frontend-core" - import { - LogicalOperator, - EmptyFilterOption, + import type { TableSchema, SortOrder, SearchFilters, @@ -12,7 +10,10 @@ DataFetchDatasource, UserDatasource, GroupUserDatasource, - DataFetchOptions, + DataFetchOptions} from "@budibase/types"; +import { + LogicalOperator, + EmptyFilterOption } from "@budibase/types" type ProviderDatasource = Exclude< diff --git a/packages/client/src/components/app/blocks/form/FormBlock.svelte b/packages/client/src/components/app/blocks/form/FormBlock.svelte index 3f44aee1d7..17804b033a 100644 --- a/packages/client/src/components/app/blocks/form/FormBlock.svelte +++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte @@ -4,7 +4,7 @@ import { Utils } from "@budibase/frontend-core" import FormBlockWrapper from "./FormBlockWrapper.svelte" import { get } from "svelte/store" - import { TableSchema, UIDatasource } from "@budibase/types" + import type { TableSchema, UIDatasource } from "@budibase/types" type Field = { name: string; active: boolean } diff --git a/packages/client/src/components/error-states/ComponentErrorState.svelte b/packages/client/src/components/error-states/ComponentErrorState.svelte index b2e7c92eae..1bcd5f21fa 100644 --- a/packages/client/src/components/error-states/ComponentErrorState.svelte +++ b/packages/client/src/components/error-states/ComponentErrorState.svelte @@ -1,7 +1,7 @@ @@ -29,6 +30,7 @@ class:spectrum-Label--seafoam={seafoam} class:spectrum-Label--active={active} class:spectrum-Label--inactive={inactive} + style={customColor ? `background-color: ${customColor};` : ""} > diff --git a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte index 2260892913..5b1bf852aa 100644 --- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte @@ -13,6 +13,7 @@ FancyInput, Button, FancySelect, + Badge, } from "@budibase/bbui" import { builderStore, appStore, roles, appPublished } from "@/stores/builder" import { @@ -741,11 +742,15 @@
    Access
    • {#each allUsers as user} + {@const userGroups = sdk.users.getUserGroups(user, $groups)}
    {user.email}
    + {#each userGroups as group} + {group.name} + {/each}
    group.users?.find(u => u._id === user._id)) || [] + ) +} + +export function userAppAccessList(user: User, groups?: UserGroup[]) { + const userGroups = getUserGroups(user, groups) const userGroupApps = userGroups.flatMap(userGroup => Object.keys(userGroup.roles || {}) ) From f7d216c188562cf793673e04d3a17e5face33264 Mon Sep 17 00:00:00 2001 From: mike12345567 Date: Mon, 24 Feb 2025 18:08:20 +0000 Subject: [PATCH 10/49] Setting override placeholder. --- .../app/[application]/_components/BuilderSidePanel.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte index 5b1bf852aa..a9d3bb70ba 100644 --- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte @@ -755,7 +755,7 @@
    Date: Tue, 25 Feb 2025 10:45:50 +0000 Subject: [PATCH 11/49] Changing how badges are displayed. --- .../_components/BuilderSidePanel.svelte | 27 ++++++++++++++----- .../shared-core/src/sdk/documents/users.ts | 12 +++++++++ 2 files changed, 33 insertions(+), 6 deletions(-) diff --git a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte index a9d3bb70ba..8136dd256c 100644 --- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte @@ -742,15 +742,19 @@
    Access
    {#each allUsers as user} - {@const userGroups = sdk.users.getUserGroups(user, $groups)} + {@const userGroups = sdk.users.getUserAppGroups($appStore.appId, user, $groups)}
    -
    - {user.email} +
    +
    + {user.email} +
    +
    + {#each userGroups as group} + {group.name} + {/each} +
    - {#each userGroups as group} - {group.name} - {/each}
    diff --git a/packages/shared-core/src/sdk/documents/users.ts b/packages/shared-core/src/sdk/documents/users.ts index 8b5abfd822..d2ee2dec00 100644 --- a/packages/shared-core/src/sdk/documents/users.ts +++ b/packages/shared-core/src/sdk/documents/users.ts @@ -137,6 +137,18 @@ export function getUserGroups(user: User, groups?: UserGroup[]) { ) } +export function getUserAppGroups( + appId: string, + user: User, + groups?: UserGroup[] +) { + const prodAppId = getProdAppID(appId) + const userGroups = getUserGroups(user, groups) + return userGroups.filter(group => + Object.keys(group.roles || {}).find(app => app === prodAppId) + ) +} + export function userAppAccessList(user: User, groups?: UserGroup[]) { const userGroups = getUserGroups(user, groups) const userGroupApps = userGroups.flatMap(userGroup => From fd100c3ec4d491abd35093c395511978a63e120b Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 25 Feb 2025 11:37:26 +0000 Subject: [PATCH 12/49] typescript conversions of bbui components --- packages/bbui/src/Form/Checkbox.svelte | 22 +++--- packages/bbui/src/Link/Link.svelte | 2 +- .../bbui/src/Stores/{banner.js => banner.ts} | 37 +++++++--- .../{notifications.js => notifications.ts} | 41 ++++++++--- packages/bbui/src/Table/ArrayRenderer.svelte | 4 +- .../bbui/src/Table/AttachmentRenderer.svelte | 10 +-- packages/bbui/src/Table/BoldRenderer.svelte | 4 +- .../bbui/src/Table/BooleanRenderer.svelte | 4 +- packages/bbui/src/Table/CellRenderer.svelte | 20 ++--- packages/bbui/src/Table/CodeRenderer.svelte | 4 +- .../bbui/src/Table/DateTimeRenderer.svelte | 8 +- .../bbui/src/Table/InternalRenderer.svelte | 6 +- .../src/Table/RelationshipRenderer.svelte | 10 +-- .../bbui/src/Table/SelectEditRenderer.svelte | 12 +-- packages/bbui/src/Table/StringRenderer.svelte | 6 +- packages/bbui/src/Tabs/Tabs.svelte | 73 +++++++++++++------ packages/bbui/src/Tags/Tag.svelte | 12 +-- packages/bbui/src/Tags/Tags.svelte | 2 +- .../bbui/src/Tooltip/TooltipWrapper.svelte | 8 +- packages/bbui/src/TreeView/Item.svelte | 12 +-- packages/bbui/src/TreeView/Tree.svelte | 8 +- packages/bbui/src/Typography/Code.svelte | 4 +- packages/bbui/src/Typography/Detail.svelte | 8 +- 23 files changed, 189 insertions(+), 128 deletions(-) rename packages/bbui/src/Stores/{banner.js => banner.ts} (57%) rename packages/bbui/src/Stores/{notifications.js => notifications.ts} (63%) diff --git a/packages/bbui/src/Form/Checkbox.svelte b/packages/bbui/src/Form/Checkbox.svelte index 6e6cf0d8e8..4a7268f102 100644 --- a/packages/bbui/src/Form/Checkbox.svelte +++ b/packages/bbui/src/Form/Checkbox.svelte @@ -1,24 +1,24 @@ - - + diff --git a/packages/bbui/src/Link/Link.svelte b/packages/bbui/src/Link/Link.svelte index 6f8aba1f4e..60706c42cb 100644 --- a/packages/bbui/src/Link/Link.svelte +++ b/packages/bbui/src/Link/Link.svelte @@ -10,7 +10,7 @@ export let secondary: boolean = false export let overBackground: boolean = false export let target: string | undefined = undefined - export let download: boolean | undefined = undefined + export let download: string | undefined = undefined export let disabled: boolean = false export let tooltip: string | null = null diff --git a/packages/bbui/src/Stores/banner.js b/packages/bbui/src/Stores/banner.ts similarity index 57% rename from packages/bbui/src/Stores/banner.js rename to packages/bbui/src/Stores/banner.ts index fc93e7be99..bf70acfa9b 100644 --- a/packages/bbui/src/Stores/banner.js +++ b/packages/bbui/src/Stores/banner.ts @@ -7,17 +7,26 @@ export const BANNER_TYPES = { WARNING: "warning", } +interface BannerConfig { + message?: string + type?: string + extraButtonText?: string + extraButtonAction?: () => void + onChange?: () => void +} + +interface DefaultConfig { + messages: BannerConfig[] +} + export function createBannerStore() { - const DEFAULT_CONFIG = { + const DEFAULT_CONFIG: DefaultConfig = { messages: [], } - const banner = writable(DEFAULT_CONFIG) + const banner = writable(DEFAULT_CONFIG) - const show = async ( - // eslint-disable-next-line - config = { message, type, extraButtonText, extraButtonAction, onChange } - ) => { + const show = async (config: BannerConfig = {}) => { banner.update(store => { return { ...store, @@ -27,7 +36,7 @@ export function createBannerStore() { } const showStatus = async () => { - const config = { + const config: BannerConfig = { message: "Some systems are experiencing issues", type: BANNER_TYPES.NEGATIVE, extraButtonText: "View Status", @@ -37,18 +46,24 @@ export function createBannerStore() { await queue([config]) } - const queue = async entries => { - const priority = { + const queue = async (entries: Array) => { + const priority: Record = { [BANNER_TYPES.NEGATIVE]: 0, [BANNER_TYPES.WARNING]: 1, [BANNER_TYPES.INFO]: 2, } banner.update(store => { const sorted = [...store.messages, ...entries].sort((a, b) => { - if (priority[a.type] == priority[b.type]) { + if ( + priority[a.type as keyof typeof priority] === + priority[b.type as keyof typeof priority] + ) { return 0 } - return priority[a.type] < priority[b.type] ? -1 : 1 + return priority[a.type as keyof typeof priority] < + priority[b.type as keyof typeof priority] + ? -1 + : 1 }) return { ...store, diff --git a/packages/bbui/src/Stores/notifications.js b/packages/bbui/src/Stores/notifications.ts similarity index 63% rename from packages/bbui/src/Stores/notifications.js rename to packages/bbui/src/Stores/notifications.ts index 28331fffd8..f4d6625491 100644 --- a/packages/bbui/src/Stores/notifications.js +++ b/packages/bbui/src/Stores/notifications.ts @@ -2,9 +2,21 @@ import { writable } from "svelte/store" const NOTIFICATION_TIMEOUT = 3000 +interface Notification { + id: string + type: string + message: string + icon: string + dismissable: boolean + action: (() => void) | null + actionMessage: string | null + wide: boolean + dismissTimeout: number +} + export const createNotificationStore = () => { - const timeoutIds = new Set() - const _notifications = writable([], () => { + const timeoutIds = new Set() + const _notifications = writable([], () => { return () => { // clear all the timers timeoutIds.forEach(timeoutId => { @@ -21,7 +33,7 @@ export const createNotificationStore = () => { } const send = ( - message, + message: string, { type = "default", icon = "", @@ -30,7 +42,15 @@ export const createNotificationStore = () => { actionMessage = null, wide = false, dismissTimeout = NOTIFICATION_TIMEOUT, - } + }: { + type?: string + icon?: string + autoDismiss?: boolean + action?: (() => void) | null + actionMessage?: string | null + wide?: boolean + dismissTimeout?: number + } = {} ) => { if (block) { return @@ -60,7 +80,7 @@ export const createNotificationStore = () => { } } - const dismissNotification = id => { + const dismissNotification = (id: string) => { _notifications.update(state => { return state.filter(n => n.id !== id) }) @@ -71,17 +91,18 @@ export const createNotificationStore = () => { return { subscribe, send, - info: msg => send(msg, { type: "info", icon: "Info" }), - error: msg => + info: (msg: string) => send(msg, { type: "info", icon: "Info" }), + error: (msg: string) => send(msg, { type: "error", icon: "Alert", autoDismiss: false }), - warning: msg => send(msg, { type: "warning", icon: "Alert" }), - success: msg => send(msg, { type: "success", icon: "CheckmarkCircle" }), + warning: (msg: string) => send(msg, { type: "warning", icon: "Alert" }), + success: (msg: string) => + send(msg, { type: "success", icon: "CheckmarkCircle" }), blockNotifications, dismiss: dismissNotification, } } -function id() { +function id(): string { return "_" + Math.random().toString(36).slice(2, 9) } diff --git a/packages/bbui/src/Table/ArrayRenderer.svelte b/packages/bbui/src/Table/ArrayRenderer.svelte index 303397054a..8dc23d8604 100644 --- a/packages/bbui/src/Table/ArrayRenderer.svelte +++ b/packages/bbui/src/Table/ArrayRenderer.svelte @@ -1,8 +1,8 @@ - diff --git a/packages/bbui/src/Table/BoldRenderer.svelte b/packages/bbui/src/Table/BoldRenderer.svelte index ae9ca24c42..93df68d2dc 100644 --- a/packages/bbui/src/Table/BoldRenderer.svelte +++ b/packages/bbui/src/Table/BoldRenderer.svelte @@ -1,5 +1,5 @@ -
    {value}
    diff --git a/packages/bbui/src/Table/BooleanRenderer.svelte b/packages/bbui/src/Table/BooleanRenderer.svelte index 4e1aa3b4e1..0f4f7b2d68 100644 --- a/packages/bbui/src/Table/BooleanRenderer.svelte +++ b/packages/bbui/src/Table/BooleanRenderer.svelte @@ -1,7 +1,7 @@ -