@budibase/frontend-core 3.9.4 → 3.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.9.4",
+  "version": "3.10.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": "e357c4e0cbfb4e0376cb8b692bf725263a5f7dc3"
+  "gitHead": "35c16326f7215671d405cd811b28e78f5be70d07"
 }

package/src/api/features.ts

@@ -0,0 +1,19 @@
+import { OverrideFeatureFlagRequest } from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface FeatureFlagEndpoints {
+  overrideFeatureFlags: (flags: Record<string, boolean>) => Promise<void>
+}
+
+export const buildFeatureFlagEndpoints = (
+  API: BaseAPIClient
+): FeatureFlagEndpoints => ({
+  overrideFeatureFlags: async flags => {
+    const body: OverrideFeatureFlagRequest = { flags }
+    return await API.patch({
+      url: "/api/features",
+      body,
+      parseResponse: () => {},
+    })
+  },
+})

package/src/api/index.ts

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

package/src/api/types.ts

@@ -10,6 +10,7 @@ import { ConfigEndpoints } from "./configs"
 import { DatasourceEndpoints } from "./datasources"
 import { EnvironmentVariableEndpoints } from "./environmentVariables"
 import { EventEndpoints } from "./events"
+import { FeatureFlagEndpoints } from "./features"
 import { FlagEndpoints } from "./flags"
 import { GroupEndpoints } from "./groups"
 import { LayoutEndpoints } from "./layouts"
@@ -133,6 +134,7 @@ export type APIClient = BaseAPIClient &
   TableEndpoints &
   TemplateEndpoints &
   UserEndpoints &
+  FeatureFlagEndpoints &
   ViewEndpoints & {
     rowActions: RowActionEndpoints
     viewV2: ViewV2Endpoints

package/src/components/UserAvatar.svelte

@@ -1,16 +1,17 @@
-<script>
+<script lang="ts">
   import { Avatar, AbsTooltip, TooltipPosition } from "@budibase/bbui"
   import { helpers } from "@budibase/shared-core"
+  import type { User } from "@budibase/types"
 
-  export let user
-  export let size = "S"
-  export let tooltipPosition = TooltipPosition.Top
-  export let showTooltip = true
+  export let user: User
+  export let size: "XS" | "S" | "M" = "S"
+  export let tooltipPosition: TooltipPosition = TooltipPosition.Top
+  export let showTooltip: boolean = true
 </script>
 
 {#if user}
   <AbsTooltip
-    text={showTooltip ? helpers.getUserLabel(user) : null}
+    text={showTooltip ? helpers.getUserLabel(user) : ""}
     position={tooltipPosition}
     color={helpers.getUserColor(user)}
   >

package/src/components/UserAvatars.svelte

@@ -1,27 +1,31 @@
-<script>
+<script lang="ts">
   import { UserAvatar } from "@budibase/frontend-core"
   import { TooltipPosition, Avatar } from "@budibase/bbui"
+  import type { UIUser } from "@budibase/types"
 
-  export let users = []
-  export let order = "ltr"
-  export let size = "S"
-  export let tooltipPosition = TooltipPosition.Top
+  type OrderType = "ltr" | "rtl"
 
-  $: uniqueUsers = unique(users, order)
+  export let users: UIUser[] = []
+  export let order: OrderType = "ltr"
+  export let size: "XS" | "S" = "S"
+  export let tooltipPosition: TooltipPosition = TooltipPosition.Top
+
+  $: uniqueUsers = unique(users)
   $: avatars = getAvatars(uniqueUsers, order)
 
-  const unique = users => {
-    let uniqueUsers = {}
-    users?.forEach(user => {
+  const unique = (users: UIUser[]) => {
+    const uniqueUsers: Record<string, UIUser> = {}
+    users.forEach(user => {
       uniqueUsers[user.email] = user
     })
     return Object.values(uniqueUsers)
   }
 
-  const getAvatars = (users, order) => {
-    const avatars = users.slice(0, 3)
+  type Overflow = { _id: "overflow"; label: string }
+  const getAvatars = (users: UIUser[], order: OrderType) => {
+    const avatars: (Overflow | UIUser)[] = users.slice(0, 3)
     if (users.length > 3) {
-      const overflow = {
+      const overflow: Overflow = {
         _id: "overflow",
         label: `+${users.length - 3}`,
       }
@@ -31,17 +35,22 @@
         avatars.unshift(overflow)
       }
     }
+
     return avatars.map((user, idx) => ({
       ...user,
       zIndex: order === "ltr" ? idx : uniqueUsers.length - idx,
     }))
   }
+
+  function isUser(value: Overflow | UIUser): value is UIUser {
+    return value._id !== "overflow"
+  }
 </script>
 
 <div class="avatars">
   {#each avatars as user}
     <span style="z-index:{user.zIndex};">
-      {#if user._id === "overflow"}
+      {#if !isUser(user)}
         <Avatar
           {size}
           initials={user.label}