Typed enriched users

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

@@ -1,7 +1,7 @@
 import { writable, get, derived, Writable, Readable } from "svelte/store"
 import { helpers } from "@budibase/shared-core"
 import { Store as StoreContext } from "."
-import { UIUser } from "@budibase/types"
+import { UIEnrichedUser, UIUser } from "@budibase/types"
 
 interface UsersStore {
   users: Writable<UIUser[]>
@@ -12,21 +12,22 @@ interface DerivedUsersStore {
 }
 
 interface ActionUserStore {
-  users: UsersStore["users"] & {
+  users: UsersStore["users"] &
-    actions: {
+    Readable<UIEnrichedUser[]> & {
-      updateUser: (user: UIUser) => void
+      actions: {
-      removeUser: (sessionId: string) => void
+        updateUser: (user: UIUser) => void
+        removeUser: (sessionId: string) => void
+      }
     }
-  }
 }
 
-export type Store = UsersStore & DerivedUsersStore
+export type Store = DerivedUsersStore & ActionUserStore
 
 export const createStores = (): UsersStore => {
   const users = writable<UIUser[]>([])
 
   const enrichedUsers = derived(users, $users => {
-    return $users.map(user => ({
+    return $users.map<UIEnrichedUser>(user => ({
       ...user,
       color: helpers.getUserColor(user),
       label: helpers.getUserLabel(user),

packages/types/src/ui/stores/grid/user.ts

@@ -4,3 +4,8 @@ export interface UIUser extends User {
   sessionId: string
   gridMetadata?: { focusedCellId?: string }
 }
+
+export interface UIEnrichedUser extends UIUser {
+  color: string
+  label: string
+}