From 0c12217b14d806c6439694dbd8de11922b3e2ef2 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 20 Jan 2025 20:11:28 +0100
Subject: [PATCH 01/18] Convert screens store to ts

---
 .../src/stores/builder/{screens.js => screens.ts}      | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)
 rename packages/builder/src/stores/builder/{screens.js => screens.ts} (98%)

diff --git a/packages/builder/src/stores/builder/screens.js b/packages/builder/src/stores/builder/screens.ts
similarity index 98%
rename from packages/builder/src/stores/builder/screens.js
rename to packages/builder/src/stores/builder/screens.ts
index 8298a1469d..5c1fa6da1a 100644
--- a/packages/builder/src/stores/builder/screens.js
+++ b/packages/builder/src/stores/builder/screens.ts
@@ -13,13 +13,19 @@ import {
 import { createHistoryStore } from "@/stores/builder/history"
 import { API } from "@/api"
 import { BudiStore } from "../BudiStore"
+import { Screen } from "@budibase/types"
 
-export const INITIAL_SCREENS_STATE = {
+interface ScreenState {
+  screens: Screen[]
+  selectedScreenId: string | null
+}
+
+export const INITIAL_SCREENS_STATE: ScreenState = {
   screens: [],
   selectedScreenId: null,
 }
 
-export class ScreenStore extends BudiStore {
+export class ScreenStore extends BudiStore<ScreenState> {
   constructor() {
     super(INITIAL_SCREENS_STATE)
 

From 8160914bb33954af7d49b5eb493551c4f571fa86 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 20 Jan 2025 20:26:37 +0100
Subject: [PATCH 02/18] Initial typings

---
 .../builder/src/stores/builder/components.ts  | 13 +--
 .../builder/src/stores/builder/screens.ts     | 87 ++++++++++---------
 2 files changed, 53 insertions(+), 47 deletions(-)

diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts
index 9ad9a75f84..e60d4e80a4 100644
--- a/packages/builder/src/stores/builder/components.ts
+++ b/packages/builder/src/stores/builder/components.ts
@@ -57,7 +57,7 @@ interface ComponentSetting {
 interface ComponentState {
   components: Record<string, ComponentDefinition>
   customComponents: string[]
-  selectedComponentId: string | null
+  selectedComponentId: string | null | undefined
   componentToPaste?: Component | null
   settingsCache: Record<string, ComponentSetting[]>
   selectedScreenId?: string | null
@@ -478,10 +478,11 @@ export class ComponentStore extends BudiStore<ComponentState> {
       extras._children = []
     }
 
+    const $selectedScreen = get(selectedScreen)
     // Add step name to form steps
-    if (componentName.endsWith("/formstep")) {
+    if (componentName.endsWith("/formstep") && $selectedScreen) {
       const parentForm = findClosestMatchingComponent(
-        get(selectedScreen).props,
+        $selectedScreen.props,
         get(selectedComponent)._id,
         (component: Component) => component._component.endsWith("/form")
       )
@@ -608,7 +609,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
   async patch(
     patchFn: (component: Component, screen: Screen) => any,
     componentId?: string,
-    screenId?: string
+    screenId?: string | null
   ) {
     // Use selected component by default
     if (!componentId || !screenId) {
@@ -840,7 +841,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
   getPrevious() {
     const state = get(this.store)
     const componentId = state.selectedComponentId
-    const screen = get(selectedScreen)
+    const screen = get(selectedScreen)!
     const parent = findComponentParent(screen.props, componentId)
     const index = parent?._children.findIndex(
       (x: Component) => x._id === componentId
@@ -889,7 +890,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
     const state = get(this.store)
     const component = get(selectedComponent)
     const componentId = component?._id
-    const screen = get(selectedScreen)
+    const screen = get(selectedScreen)!
     const parent = findComponentParent(screen.props, componentId)
     const index = parent?._children.findIndex(
       (x: Component) => x._id === componentId
diff --git a/packages/builder/src/stores/builder/screens.ts b/packages/builder/src/stores/builder/screens.ts
index 5c1fa6da1a..15c4c9b88f 100644
--- a/packages/builder/src/stores/builder/screens.ts
+++ b/packages/builder/src/stores/builder/screens.ts
@@ -13,11 +13,11 @@ import {
 import { createHistoryStore } from "@/stores/builder/history"
 import { API } from "@/api"
 import { BudiStore } from "../BudiStore"
-import { Screen } from "@budibase/types"
+import { Component, Screen } from "@budibase/types"
 
 interface ScreenState {
   screens: Screen[]
-  selectedScreenId: string | null
+  selectedScreenId: string | null | undefined
 }
 
 export const INITIAL_SCREENS_STATE: ScreenState = {
@@ -43,7 +43,7 @@ export class ScreenStore extends BudiStore<ScreenState> {
     this.sequentialScreenPatch = this.sequentialScreenPatch.bind(this)
     this.removeCustomLayout = this.removeCustomLayout.bind(this)
 
-    this.history = createHistoryStore({
+    const history = createHistoryStore({
       getDoc: id => get(this.store).screens?.find(screen => screen._id === id),
       selectDoc: this.select,
       afterAction: () => {
@@ -57,8 +57,8 @@ export class ScreenStore extends BudiStore<ScreenState> {
       },
     })
 
-    this.delete = this.history.wrapDeleteDoc(this.deleteScreen)
-    this.save = this.history.wrapSaveDoc(this.saveScreen)
+    this.delete = history.wrapDeleteDoc(this.deleteScreen)
+    this.save = history.wrapSaveDoc(this.saveScreen)
   }
 
   /**
@@ -72,7 +72,7 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * Replace ALL store screens with application package screens
    * @param {object} pkg
    */
-  syncAppScreens(pkg) {
+  syncAppScreens(pkg: { screens: Screen[] }) {
     this.update(state => ({
       ...state,
       screens: [...pkg.screens],
@@ -85,7 +85,7 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * @param {string} screenId
    * @returns
    */
-  select(screenId) {
+  select(screenId: string) {
     // Check this screen exists
     const state = get(this.store)
     const screen = state.screens.find(screen => screen._id === screenId)
@@ -113,12 +113,12 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * @throws Will throw an error containing the name of the component causing
    * the invalid screen state
    */
-  validate(screen) {
+  validate(screen: Screen) {
     // Recursive function to find any illegal children in component trees
     const findIllegalChild = (
-      component,
-      illegalChildren = [],
-      legalDirectChildren = []
+      component: Component,
+      illegalChildren: string[] = [],
+      legalDirectChildren: string[] = []
     ) => {
       const type = component._component
 
@@ -178,7 +178,7 @@ export class ScreenStore extends BudiStore<ScreenState> {
     const illegalChild = findIllegalChild(screen.props)
     if (illegalChild) {
       const def = componentStore.getDefinition(illegalChild)
-      throw `You can't place a ${def.name} here`
+      throw `You can't place a ${def?.name} here`
     }
   }
 
@@ -189,7 +189,7 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * @param {object} screen
    * @returns {object}
    */
-  async saveScreen(screen) {
+  async saveScreen(screen: Screen): Promise<Screen> {
     const appState = get(appStore)
 
     // Validate screen structure if the app supports it
@@ -236,7 +236,7 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * After saving a screen, sync plugins and routes to the appStore
    * @param {object} savedScreen
    */
-  async syncScreenData(savedScreen) {
+  async syncScreenData(savedScreen: Screen) {
     const appState = get(appStore)
     // If plugins changed we need to fetch the latest app metadata
     let usedPlugins = appState.usedPlugins
@@ -262,21 +262,23 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * This is slightly better than just a traditional "patch" endpoint and this
    * supports deeply mutating the current doc rather than just appending data.
    */
-  sequentialScreenPatch = Utils.sequential(async (patchFn, screenId) => {
-    const state = get(this.store)
-    const screen = state.screens.find(screen => screen._id === screenId)
-    if (!screen) {
-      return
-    }
-    let clone = cloneDeep(screen)
-    const result = patchFn(clone)
+  sequentialScreenPatch = Utils.sequential(
+    async (patchFn: (screen: Screen) => any, screenId: string) => {
+      const state = get(this.store)
+      const screen = state.screens.find(screen => screen._id === screenId)
+      if (!screen) {
+        return
+      }
+      let clone = cloneDeep(screen)
+      const result = patchFn(clone)
 
-    // An explicit false result means skip this change
-    if (result === false) {
-      return
+      // An explicit false result means skip this change
+      if (result === false) {
+        return
+      }
+      return this.save(clone)
     }
-    return this.save(clone)
-  })
+  )
 
   /**
    * @param {function} patchFn
@@ -304,7 +306,7 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * @param {object} screen
    * @returns
    */
-  async replace(screenId, screen) {
+  async replace(screenId: string, screen: Screen) {
     if (!screenId) {
       return
     }
@@ -343,14 +345,14 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * @param {object | array} screens
    * @returns
    */
-  async deleteScreen(screens) {
+  async deleteScreen(screens: Screen[]) {
     const screensToDelete = Array.isArray(screens) ? screens : [screens]
     // Build array of promises to speed up bulk deletions
-    let promises = []
-    let deleteUrls = []
+    let promises: Promise<any>[] = []
+    let deleteUrls: string[] = []
     screensToDelete.forEach(screen => {
       // Delete the screen
-      promises.push(API.deleteScreen(screen._id, screen._rev))
+      promises.push(API.deleteScreen(screen._id!, screen._rev!))
       // Remove links to this screen
       deleteUrls.push(screen.routing.route)
     })
@@ -365,7 +367,10 @@ export class ScreenStore extends BudiStore<ScreenState> {
       })
 
       // Deselect the current screen if it was deleted
-      if (deletedIds.includes(state.selectedScreenId)) {
+      if (
+        state.selectedScreenId &&
+        deletedIds.includes(state.selectedScreenId)
+      ) {
         state.selectedScreenId = null
         componentStore.update(state => ({
           ...state,
@@ -395,13 +400,13 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * @param {any} value
    * @returns
    */
-  async updateSetting(screen, name, value) {
+  async updateSetting(screen: Screen, name: string, value: string) {
     if (!screen || !name) {
       return
     }
 
     // Apply setting update
-    const patchFn = screen => {
+    const patchFn = (screen: Screen) => {
       if (!screen) {
         return false
       }
@@ -428,7 +433,7 @@ export class ScreenStore extends BudiStore<ScreenState> {
       )
     })
     if (otherHomeScreens.length && updatedScreen.routing.homeScreen) {
-      const patchFn = screen => {
+      const patchFn = (screen: Screen) => {
         screen.routing.homeScreen = false
       }
       for (let otherHomeScreen of otherHomeScreens) {
@@ -438,11 +443,11 @@ export class ScreenStore extends BudiStore<ScreenState> {
   }
 
   // Move to layouts store
-  async removeCustomLayout(screen) {
+  async removeCustomLayout(screen: Screen) {
     // Pull relevant settings from old layout, if required
     const layout = get(layoutStore).layouts.find(x => x._id === screen.layoutId)
-    const patchFn = screen => {
-      screen.layoutId = null
+    const patchFn = (screen: Screen) => {
+      delete screen.layoutId
       screen.showNavigation = layout?.props.navigation !== "None"
       screen.width = layout?.props.width || "Large"
     }
@@ -454,9 +459,9 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * and up-to-date. Ensures stability after a product update.
    * @param {object} screen
    */
-  async enrichEmptySettings(screen) {
+  async enrichEmptySettings(screen: Screen) {
     // Flatten the recursive component tree
-    const components = findAllMatchingComponents(screen.props, x => x)
+    const components = findAllMatchingComponents(screen.props, (x: string) => x)
 
     // Iterate over all components and run checks
     components.forEach(component => {

From ce322211b993e770017f859c6030c037485d77a7 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 20 Jan 2025 20:29:08 +0100
Subject: [PATCH 03/18] Initial convert history store

---
 packages/builder/src/stores/builder/{history.js => history.ts} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename packages/builder/src/stores/builder/{history.js => history.ts} (99%)

diff --git a/packages/builder/src/stores/builder/history.js b/packages/builder/src/stores/builder/history.ts
similarity index 99%
rename from packages/builder/src/stores/builder/history.js
rename to packages/builder/src/stores/builder/history.ts
index 62a8ed2f97..1889b0b5f6 100644
--- a/packages/builder/src/stores/builder/history.js
+++ b/packages/builder/src/stores/builder/history.ts
@@ -1,4 +1,4 @@
-import * as jsonpatch from "fast-json-patch/index.mjs"
+import * as jsonpatch from "fast-json-patch"
 import { writable, derived, get } from "svelte/store"
 
 export const Operations = {

From 08f9b2046e0ff93a90146e0722359bf55b3eb20a Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 20 Jan 2025 20:58:44 +0100
Subject: [PATCH 04/18] Fix types

---
 .../builder/src/stores/builder/history.ts     | 45 +++++++++++++------
 1 file changed, 32 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/stores/builder/history.ts b/packages/builder/src/stores/builder/history.ts
index 1889b0b5f6..e7888f7be4 100644
--- a/packages/builder/src/stores/builder/history.ts
+++ b/packages/builder/src/stores/builder/history.ts
@@ -1,13 +1,27 @@
 import * as jsonpatch from "fast-json-patch"
 import { writable, derived, get } from "svelte/store"
 
-export const Operations = {
-  Add: "Add",
-  Delete: "Delete",
-  Change: "Change",
+export const enum Operations {
+  Add = "Add",
+  Delete = "Delete",
+  Change = "Change",
 }
 
-export const initialState = {
+interface Operator {
+  id: string
+  type: Operations
+  doc: any
+  forwardPatch?: jsonpatch.Operation[]
+  backwardsPatch?: jsonpatch.Operation[]
+}
+
+interface HistoryState {
+  history: any[]
+  position: number
+  loading?: boolean
+}
+
+export const initialState: HistoryState = {
   history: [],
   position: 0,
   loading: false,
@@ -18,6 +32,11 @@ export const createHistoryStore = ({
   selectDoc,
   beforeAction,
   afterAction,
+}: {
+  getDoc: any
+  selectDoc: any
+  beforeAction: any
+  afterAction: any
 }) => {
   // Use a derived store to check if we are able to undo or redo any operations
   const store = writable(initialState)
@@ -31,8 +50,8 @@ export const createHistoryStore = ({
 
   // Wrapped versions of essential functions which we call ourselves when using
   // undo and redo
-  let saveFn
-  let deleteFn
+  let saveFn: any
+  let deleteFn: any
 
   /**
    * Internal util to set the loading flag
@@ -66,14 +85,14 @@ export const createHistoryStore = ({
    * For internal use only.
    * @param operation the operation to save
    */
-  const saveOperation = operation => {
+  const saveOperation = (operation: Operator) => {
     store.update(state => {
       // Update history
       let history = state.history
       let position = state.position
       if (!operation.id) {
         // Every time a new operation occurs we discard any redo potential
-        operation.id = Math.random()
+        operation.id = Math.random().toString()
         history = [...history.slice(0, state.position), operation]
         position += 1
       } else {
@@ -93,8 +112,8 @@ export const createHistoryStore = ({
    * @param fn the save function
    * @returns {function} a wrapped version of the save function
    */
-  const wrapSaveDoc = fn => {
-    saveFn = async (doc, operationId) => {
+  const wrapSaveDoc = (fn: (doc: any) => Promise<void>) => {
+    saveFn = async (doc: any, operationId: string) => {
       // Only works on a single doc at a time
       if (!doc || Array.isArray(doc)) {
         return
@@ -141,8 +160,8 @@ export const createHistoryStore = ({
    * @param fn the delete function
    * @returns {function} a wrapped version of the delete function
    */
-  const wrapDeleteDoc = fn => {
-    deleteFn = async (doc, operationId) => {
+  const wrapDeleteDoc = (fn: (doc: any) => Promise<void>) => {
+    deleteFn = async (doc: any, operationId: string) => {
       // Only works on a single doc at a time
       if (!doc || Array.isArray(doc)) {
         return

From f0ec4c5e00890fae1a2896e2d772137e3ea11097 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 20 Jan 2025 21:04:50 +0100
Subject: [PATCH 05/18] Use generics on history

---
 .../builder/src/stores/builder/automations.ts    |  2 +-
 packages/builder/src/stores/builder/history.ts   | 16 ++++++++--------
 packages/builder/src/stores/builder/screens.ts   |  3 ++-
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/stores/builder/automations.ts b/packages/builder/src/stores/builder/automations.ts
index 9b20b4cd03..7a1e856369 100644
--- a/packages/builder/src/stores/builder/automations.ts
+++ b/packages/builder/src/stores/builder/automations.ts
@@ -1434,7 +1434,7 @@ class AutomationStore extends BudiStore<AutomationState> {
   constructor() {
     super(initialAutomationState)
     this.actions = automationActions(this)
-    this.history = createHistoryStore({
+    this.history = createHistoryStore<Automation>({
       getDoc: this.actions.getDefinition.bind(this),
       selectDoc: this.actions.select.bind(this),
       beforeAction: () => {},
diff --git a/packages/builder/src/stores/builder/history.ts b/packages/builder/src/stores/builder/history.ts
index e7888f7be4..b2aa01c03b 100644
--- a/packages/builder/src/stores/builder/history.ts
+++ b/packages/builder/src/stores/builder/history.ts
@@ -7,10 +7,10 @@ export const enum Operations {
   Change = "Change",
 }
 
-interface Operator {
+interface Operator<T> {
   id: string
   type: Operations
-  doc: any
+  doc: T
   forwardPatch?: jsonpatch.Operation[]
   backwardsPatch?: jsonpatch.Operation[]
 }
@@ -27,16 +27,16 @@ export const initialState: HistoryState = {
   loading: false,
 }
 
-export const createHistoryStore = ({
+export const createHistoryStore = <T extends {}>({
   getDoc,
   selectDoc,
   beforeAction,
   afterAction,
 }: {
-  getDoc: any
-  selectDoc: any
-  beforeAction: any
-  afterAction: any
+  getDoc: (id: string) => T | undefined
+  selectDoc: (id: string) => void
+  beforeAction?: (operation?: Operator<T>) => void
+  afterAction?: (operation?: Operator<T>) => void
 }) => {
   // Use a derived store to check if we are able to undo or redo any operations
   const store = writable(initialState)
@@ -85,7 +85,7 @@ export const createHistoryStore = ({
    * For internal use only.
    * @param operation the operation to save
    */
-  const saveOperation = (operation: Operator) => {
+  const saveOperation = (operation: Operator<T>) => {
     store.update(state => {
       // Update history
       let history = state.history
diff --git a/packages/builder/src/stores/builder/screens.ts b/packages/builder/src/stores/builder/screens.ts
index 15c4c9b88f..fff54b364d 100644
--- a/packages/builder/src/stores/builder/screens.ts
+++ b/packages/builder/src/stores/builder/screens.ts
@@ -18,6 +18,7 @@ import { Component, Screen } from "@budibase/types"
 interface ScreenState {
   screens: Screen[]
   selectedScreenId: string | null | undefined
+  selected?: Screen
 }
 
 export const INITIAL_SCREENS_STATE: ScreenState = {
@@ -285,7 +286,7 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * @param {string | null} screenId
    * @returns
    */
-  async patch(patchFn, screenId) {
+  async patch(patchFn, screenId: string) {
     // Default to the currently selected screen
     if (!screenId) {
       const state = get(this.store)

From 25d450602f553fb2b31e42555085d20afbd11d3f Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 20 Jan 2025 21:08:31 +0100
Subject: [PATCH 06/18] Type history

---
 .../builder/src/stores/builder/history.ts     | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/stores/builder/history.ts b/packages/builder/src/stores/builder/history.ts
index b2aa01c03b..132dcd9ab8 100644
--- a/packages/builder/src/stores/builder/history.ts
+++ b/packages/builder/src/stores/builder/history.ts
@@ -1,3 +1,4 @@
+import { Document } from "@budibase/types"
 import * as jsonpatch from "fast-json-patch"
 import { writable, derived, get } from "svelte/store"
 
@@ -7,7 +8,7 @@ export const enum Operations {
   Change = "Change",
 }
 
-interface Operator<T> {
+interface Operator<T extends Document> {
   id: string
   type: Operations
   doc: T
@@ -15,19 +16,19 @@ interface Operator<T> {
   backwardsPatch?: jsonpatch.Operation[]
 }
 
-interface HistoryState {
-  history: any[]
+interface HistoryState<T extends Document> {
+  history: Operator<T>[]
   position: number
   loading?: boolean
 }
 
-export const initialState: HistoryState = {
+export const initialState: HistoryState<never> = {
   history: [],
   position: 0,
   loading: false,
 }
 
-export const createHistoryStore = <T extends {}>({
+export const createHistoryStore = <T extends Document>({
   getDoc,
   selectDoc,
   beforeAction,
@@ -39,7 +40,7 @@ export const createHistoryStore = <T extends {}>({
   afterAction?: (operation?: Operator<T>) => void
 }) => {
   // Use a derived store to check if we are able to undo or redo any operations
-  const store = writable(initialState)
+  const store = writable<HistoryState<T>>(initialState)
   const derivedStore = derived(store, $store => {
     return {
       ...$store,
@@ -220,7 +221,7 @@ export const createHistoryStore = <T extends {}>({
       // Undo ADD
       if (operation.type === Operations.Add) {
         // Try to get the latest doc version to delete
-        const latestDoc = getDoc(operation.doc._id)
+        const latestDoc = getDoc(operation.doc._id!)
         const doc = latestDoc || operation.doc
         await deleteFn(doc, operation.id)
       }
@@ -238,7 +239,7 @@ export const createHistoryStore = <T extends {}>({
       // Undo CHANGE
       else {
         // Get the current doc and apply the backwards patch on top of it
-        let doc = jsonpatch.deepClone(getDoc(operation.doc._id))
+        let doc = jsonpatch.deepClone(getDoc(operation.doc._id!))
         if (doc) {
           jsonpatch.applyPatch(
             doc,
@@ -302,7 +303,7 @@ export const createHistoryStore = <T extends {}>({
       // Redo DELETE
       else if (operation.type === Operations.Delete) {
         // Try to get the latest doc version to delete
-        const latestDoc = getDoc(operation.doc._id)
+        const latestDoc = getDoc(operation.doc._id!)
         const doc = latestDoc || operation.doc
         await deleteFn(doc, operation.id)
       }
@@ -310,7 +311,7 @@ export const createHistoryStore = <T extends {}>({
       // Redo CHANGE
       else {
         // Get the current doc and apply the forwards patch on top of it
-        let doc = jsonpatch.deepClone(getDoc(operation.doc._id))
+        let doc = jsonpatch.deepClone(getDoc(operation.doc._id!))
         if (doc) {
           jsonpatch.applyPatch(doc, jsonpatch.deepClone(operation.forwardPatch))
           await saveFn(doc, operation.id)

From 6f063f6a213226c9cfbd25865c66161b5ad9e61c Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 20 Jan 2025 21:12:22 +0100
Subject: [PATCH 07/18] Type anys

---
 packages/builder/src/stores/builder/history.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/stores/builder/history.ts b/packages/builder/src/stores/builder/history.ts
index 132dcd9ab8..3f9b156498 100644
--- a/packages/builder/src/stores/builder/history.ts
+++ b/packages/builder/src/stores/builder/history.ts
@@ -51,8 +51,8 @@ export const createHistoryStore = <T extends Document>({
 
   // Wrapped versions of essential functions which we call ourselves when using
   // undo and redo
-  let saveFn: any
-  let deleteFn: any
+  let saveFn: (doc: T, operationId: string) => Promise<T>
+  let deleteFn: (doc: T, operationId: string) => Promise<void>
 
   /**
    * Internal util to set the loading flag
@@ -113,15 +113,15 @@ export const createHistoryStore = <T extends Document>({
    * @param fn the save function
    * @returns {function} a wrapped version of the save function
    */
-  const wrapSaveDoc = (fn: (doc: any) => Promise<void>) => {
-    saveFn = async (doc: any, operationId: string) => {
+  const wrapSaveDoc = (fn: (doc: T) => Promise<void>) => {
+    saveFn = async (doc: T, operationId: string) => {
       // Only works on a single doc at a time
       if (!doc || Array.isArray(doc)) {
         return
       }
       startLoading()
       try {
-        const oldDoc = getDoc(doc._id)
+        const oldDoc = getDoc(doc._id!)
         const newDoc = jsonpatch.deepClone(await fn(doc))
 
         // Store the change
@@ -161,8 +161,8 @@ export const createHistoryStore = <T extends Document>({
    * @param fn the delete function
    * @returns {function} a wrapped version of the delete function
    */
-  const wrapDeleteDoc = (fn: (doc: any) => Promise<void>) => {
-    deleteFn = async (doc: any, operationId: string) => {
+  const wrapDeleteDoc = (fn: (doc: T) => Promise<void>) => {
+    deleteFn = async (doc: T, operationId: string) => {
       // Only works on a single doc at a time
       if (!doc || Array.isArray(doc)) {
         return

From 26955d5cd9d0168f39481cd6b3e09efb5c332daa Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 20 Jan 2025 21:30:00 +0100
Subject: [PATCH 08/18] Type history

---
 .../builder/src/stores/builder/automations.ts |  6 ++--
 .../builder/src/stores/builder/history.ts     | 35 ++++++++++++++-----
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/stores/builder/automations.ts b/packages/builder/src/stores/builder/automations.ts
index 7a1e856369..5e17b46155 100644
--- a/packages/builder/src/stores/builder/automations.ts
+++ b/packages/builder/src/stores/builder/automations.ts
@@ -2,7 +2,7 @@ import { derived, get } from "svelte/store"
 import { API } from "@/api"
 import { cloneDeep } from "lodash/fp"
 import { generate } from "shortid"
-import { createHistoryStore } from "@/stores/builder/history"
+import { createHistoryStore, HistoryStore } from "@/stores/builder/history"
 import { licensing } from "@/stores/portal"
 import { tables, appStore } from "@/stores/builder"
 import { notifications } from "@budibase/bbui"
@@ -1428,13 +1428,13 @@ const automationActions = (store: AutomationStore) => ({
 })
 
 class AutomationStore extends BudiStore<AutomationState> {
-  history: any
+  history: HistoryStore<Automation>
   actions: ReturnType<typeof automationActions>
 
   constructor() {
     super(initialAutomationState)
     this.actions = automationActions(this)
-    this.history = createHistoryStore<Automation>({
+    this.history = createHistoryStore({
       getDoc: this.actions.getDefinition.bind(this),
       selectDoc: this.actions.select.bind(this),
       beforeAction: () => {},
diff --git a/packages/builder/src/stores/builder/history.ts b/packages/builder/src/stores/builder/history.ts
index 3f9b156498..916e417872 100644
--- a/packages/builder/src/stores/builder/history.ts
+++ b/packages/builder/src/stores/builder/history.ts
@@ -1,6 +1,6 @@
 import { Document } from "@budibase/types"
 import * as jsonpatch from "fast-json-patch"
-import { writable, derived, get } from "svelte/store"
+import { writable, derived, get, Readable } from "svelte/store"
 
 export const enum Operations {
   Add = "Add",
@@ -9,7 +9,7 @@ export const enum Operations {
 }
 
 interface Operator<T extends Document> {
-  id: string
+  id?: string
   type: Operations
   doc: T
   forwardPatch?: jsonpatch.Operation[]
@@ -28,6 +28,25 @@ export const initialState: HistoryState<never> = {
   loading: false,
 }
 
+export interface HistoryStore<T extends Document>
+  extends Readable<
+    HistoryState<T> & {
+      canUndo: boolean
+      canRedo: boolean
+    }
+  > {
+  wrapSaveDoc: (
+    fn: (doc: T) => Promise<T>
+  ) => (doc: T, operationId?: string) => Promise<T>
+  wrapDeleteDoc: (
+    fn: (doc: T) => Promise<void>
+  ) => (doc: T, operationId?: string) => Promise<void>
+
+  reset: () => void
+  undo: () => Promise<void>
+  redo: () => Promise<void>
+}
+
 export const createHistoryStore = <T extends Document>({
   getDoc,
   selectDoc,
@@ -38,7 +57,7 @@ export const createHistoryStore = <T extends Document>({
   selectDoc: (id: string) => void
   beforeAction?: (operation?: Operator<T>) => void
   afterAction?: (operation?: Operator<T>) => void
-}) => {
+}): HistoryStore<T> => {
   // Use a derived store to check if we are able to undo or redo any operations
   const store = writable<HistoryState<T>>(initialState)
   const derivedStore = derived(store, $store => {
@@ -51,8 +70,8 @@ export const createHistoryStore = <T extends Document>({
 
   // Wrapped versions of essential functions which we call ourselves when using
   // undo and redo
-  let saveFn: (doc: T, operationId: string) => Promise<T>
-  let deleteFn: (doc: T, operationId: string) => Promise<void>
+  let saveFn: (doc: T, operationId?: string) => Promise<T>
+  let deleteFn: (doc: T, operationId?: string) => Promise<void>
 
   /**
    * Internal util to set the loading flag
@@ -113,8 +132,8 @@ export const createHistoryStore = <T extends Document>({
    * @param fn the save function
    * @returns {function} a wrapped version of the save function
    */
-  const wrapSaveDoc = (fn: (doc: T) => Promise<void>) => {
-    saveFn = async (doc: T, operationId: string) => {
+  const wrapSaveDoc = (fn: (doc: T) => Promise<T>) => {
+    saveFn = async (doc: T, operationId?: string) => {
       // Only works on a single doc at a time
       if (!doc || Array.isArray(doc)) {
         return
@@ -162,7 +181,7 @@ export const createHistoryStore = <T extends Document>({
    * @returns {function} a wrapped version of the delete function
    */
   const wrapDeleteDoc = (fn: (doc: T) => Promise<void>) => {
-    deleteFn = async (doc: T, operationId: string) => {
+    deleteFn = async (doc: T, operationId?: string) => {
       // Only works on a single doc at a time
       if (!doc || Array.isArray(doc)) {
         return

From 13027c6a6d890000532e4f298c821570dfd0c6ca Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 20 Jan 2025 22:58:37 +0100
Subject: [PATCH 09/18] Type utils

---
 .../src/utils/{utils.js => utils.ts}          | 71 +++++++++++++------
 1 file changed, 49 insertions(+), 22 deletions(-)
 rename packages/frontend-core/src/utils/{utils.js => utils.ts} (82%)

diff --git a/packages/frontend-core/src/utils/utils.js b/packages/frontend-core/src/utils/utils.ts
similarity index 82%
rename from packages/frontend-core/src/utils/utils.js
rename to packages/frontend-core/src/utils/utils.ts
index f0635fbeac..0eaca6548e 100644
--- a/packages/frontend-core/src/utils/utils.js
+++ b/packages/frontend-core/src/utils/utils.ts
@@ -1,8 +1,10 @@
 import { makePropSafe as safe } from "@budibase/string-templates"
 import { Helpers } from "@budibase/bbui"
 import { cloneDeep } from "lodash"
+import { SearchFilterGroup, UISearchFilter } from "@budibase/types"
 
-export const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+export const sleep = (ms: number) =>
+  new Promise(resolve => setTimeout(resolve, ms))
 
 /**
  * Utility to wrap an async function and ensure all invocations happen
@@ -10,10 +12,15 @@ export const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
  * @param fn the async function to run
  * @return {Promise} a sequential version of the function
  */
-export const sequential = fn => {
-  let queue = []
-  return (...params) => {
-    return new Promise((resolve, reject) => {
+export const sequential = <
+  TReturn,
+  TFunction extends (...args: any[]) => Promise<TReturn>
+>(
+  fn: TFunction
+): ((...args: Parameters<TFunction>) => Promise<TReturn | undefined>) => {
+  let queue: any[] = []
+  return (...params: Parameters<TFunction>) => {
+    return new Promise<TReturn | undefined>((resolve, reject) => {
       queue.push(async () => {
         let data, error
         try {
@@ -45,9 +52,9 @@ export const sequential = fn => {
  * @param minDelay the minimum delay between invocations
  * @returns a debounced version of the callback
  */
-export const debounce = (callback, minDelay = 1000) => {
-  let timeout
-  return async (...params) => {
+export const debounce = (callback: Function, minDelay = 1000) => {
+  let timeout: NodeJS.Timeout
+  return async (...params: any[]) => {
     return new Promise(resolve => {
       if (timeout) {
         clearTimeout(timeout)
@@ -70,11 +77,11 @@ export const debounce = (callback, minDelay = 1000) => {
  * @param minDelay
  * @returns {Function} a throttled version function
  */
-export const throttle = (callback, minDelay = 1000) => {
-  let lastParams
+export const throttle = (callback: Function, minDelay = 1000) => {
+  let lastParams: any[]
   let stalled = false
   let pending = false
-  const invoke = (...params) => {
+  const invoke = (...params: any[]) => {
     lastParams = params
     if (stalled) {
       pending = true
@@ -98,10 +105,10 @@ export const throttle = (callback, minDelay = 1000) => {
  * @param callback the function to run
  * @returns {Function}
  */
-export const domDebounce = callback => {
+export const domDebounce = (callback: Function) => {
   let active = false
-  let lastParams
-  return (...params) => {
+  let lastParams: any[]
+  return (...params: any[]) => {
     lastParams = params
     if (!active) {
       active = true
@@ -119,7 +126,17 @@ export const domDebounce = callback => {
  *
  * @param {any} props
  * */
-export const buildFormBlockButtonConfig = props => {
+export const buildFormBlockButtonConfig = (props?: {
+  _id: string
+  actionType: string
+  dataSource: { resourceId: string }
+  notificationOverride: boolean
+  actionUrl: string
+  showDeleteButton: boolean
+  deleteButtonLabel: string
+  showSaveButton: boolean
+  saveButtonLabel: string
+}) => {
   const {
     _id,
     actionType,
@@ -227,7 +244,11 @@ export const buildFormBlockButtonConfig = props => {
 
   const defaultButtons = []
 
-  if (["Update", "Create"].includes(actionType) && showSaveButton !== false) {
+  if (
+    actionType &&
+    ["Update", "Create"].includes(actionType) &&
+    showSaveButton !== false
+  ) {
     defaultButtons.push({
       text: saveText || "Save",
       _id: Helpers.uuid(),
@@ -251,7 +272,13 @@ export const buildFormBlockButtonConfig = props => {
   return defaultButtons
 }
 
-export const buildMultiStepFormBlockDefaultProps = props => {
+export const buildMultiStepFormBlockDefaultProps = (props?: {
+  _id: string
+  stepCount: number
+  currentStep: number
+  actionType: string
+  dataSource: { resourceId: string }
+}) => {
   const { _id, stepCount, currentStep, actionType, dataSource } = props || {}
 
   // Sanity check
@@ -361,7 +388,7 @@ export const buildMultiStepFormBlockDefaultProps = props => {
  * @param {Object} filter UI filter
  * @returns {Object} parsed filter
  */
-export function parseFilter(filter) {
+export function parseFilter(filter: UISearchFilter) {
   if (!filter?.groups) {
     return filter
   }
@@ -369,13 +396,13 @@ export function parseFilter(filter) {
   const update = cloneDeep(filter)
 
   update.groups = update.groups
-    .map(group => {
-      group.filters = group.filters.filter(filter => {
+    ?.map(group => {
+      group.filters = group.filters?.filter((filter: any) => {
         return filter.field && filter.operator
       })
-      return group.filters.length ? group : null
+      return group.filters?.length ? group : null
     })
-    .filter(group => group)
+    .filter((group): group is SearchFilterGroup => !!group)
 
   return update
 }

From 058b3def3a1e235361da31da883bc41a39273864 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 20 Jan 2025 23:03:01 +0100
Subject: [PATCH 10/18] Type remaining screens

---
 .../builder/src/stores/builder/components.ts  |  1 +
 .../builder/src/stores/builder/screens.ts     | 28 ++++++++++---------
 packages/frontend-core/src/utils/utils.ts     | 18 ++++++------
 3 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts
index e60d4e80a4..8fa7f5113d 100644
--- a/packages/builder/src/stores/builder/components.ts
+++ b/packages/builder/src/stores/builder/components.ts
@@ -41,6 +41,7 @@ interface ComponentDefinition {
   settings?: ComponentSetting[]
   features?: Record<string, boolean>
   typeSupportPresets?: Record<string, any>
+  illegalChildren?: string[]
 }
 
 interface ComponentSetting {
diff --git a/packages/builder/src/stores/builder/screens.ts b/packages/builder/src/stores/builder/screens.ts
index fff54b364d..d87d12f23c 100644
--- a/packages/builder/src/stores/builder/screens.ts
+++ b/packages/builder/src/stores/builder/screens.ts
@@ -27,6 +27,9 @@ export const INITIAL_SCREENS_STATE: ScreenState = {
 }
 
 export class ScreenStore extends BudiStore<ScreenState> {
+  save: (doc: Screen) => Promise<Screen>
+  delete: (doc: Screen) => Promise<void>
+
   constructor() {
     super(INITIAL_SCREENS_STATE)
 
@@ -120,7 +123,7 @@ export class ScreenStore extends BudiStore<ScreenState> {
       component: Component,
       illegalChildren: string[] = [],
       legalDirectChildren: string[] = []
-    ) => {
+    ): string | undefined => {
       const type = component._component
 
       if (illegalChildren.includes(type)) {
@@ -145,13 +148,6 @@ export class ScreenStore extends BudiStore<ScreenState> {
       }
 
       const definition = componentStore.getDefinition(component._component)
-      // Reset whitelist for direct children
-      legalDirectChildren = []
-      if (definition?.legalDirectChildren?.length) {
-        legalDirectChildren = definition.legalDirectChildren.map(x => {
-          return `@budibase/standard-components/${x}`
-        })
-      }
 
       // Append blacklisted components and remove duplicates
       if (definition?.illegalChildren?.length) {
@@ -264,7 +260,10 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * supports deeply mutating the current doc rather than just appending data.
    */
   sequentialScreenPatch = Utils.sequential(
-    async (patchFn: (screen: Screen) => any, screenId: string) => {
+    async (
+      patchFn: (screen: Screen) => any,
+      screenId: string
+    ): Promise<Screen | undefined> => {
       const state = get(this.store)
       const screen = state.screens.find(screen => screen._id === screenId)
       if (!screen) {
@@ -286,7 +285,10 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * @param {string | null} screenId
    * @returns
    */
-  async patch(patchFn, screenId: string) {
+  async patch(
+    patchFn: (screen: Screen) => void,
+    screenId: string | undefined | null
+  ) {
     // Default to the currently selected screen
     if (!screenId) {
       const state = get(this.store)
@@ -346,8 +348,8 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * @param {object | array} screens
    * @returns
    */
-  async deleteScreen(screens: Screen[]) {
-    const screensToDelete = Array.isArray(screens) ? screens : [screens]
+  async deleteScreen(screen: Screen) {
+    const screensToDelete = [screen]
     // Build array of promises to speed up bulk deletions
     let promises: Promise<any>[] = []
     let deleteUrls: string[] = []
@@ -387,7 +389,7 @@ export class ScreenStore extends BudiStore<ScreenState> {
 
       return state
     })
-    return null
+    return
   }
 
   /**
diff --git a/packages/frontend-core/src/utils/utils.ts b/packages/frontend-core/src/utils/utils.ts
index 0eaca6548e..124f0f03b9 100644
--- a/packages/frontend-core/src/utils/utils.ts
+++ b/packages/frontend-core/src/utils/utils.ts
@@ -127,15 +127,15 @@ export const domDebounce = (callback: Function) => {
  * @param {any} props
  * */
 export const buildFormBlockButtonConfig = (props?: {
-  _id: string
-  actionType: string
-  dataSource: { resourceId: string }
-  notificationOverride: boolean
-  actionUrl: string
-  showDeleteButton: boolean
-  deleteButtonLabel: string
-  showSaveButton: boolean
-  saveButtonLabel: string
+  _id?: string
+  actionType?: string
+  dataSource?: { resourceId: string }
+  notificationOverride?: boolean
+  actionUrl?: string
+  showDeleteButton?: boolean
+  deleteButtonLabel?: string
+  showSaveButton?: boolean
+  saveButtonLabel?: string
 }) => {
   const {
     _id,

From 4671633bfeb6086113b2f06658d12e8d4acae419 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 20 Jan 2025 23:14:45 +0100
Subject: [PATCH 11/18] Fix types

---
 .../builder/src/stores/builder/componentTreeNodes.ts     | 2 +-
 packages/builder/src/stores/builder/websocket.ts         | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/stores/builder/componentTreeNodes.ts b/packages/builder/src/stores/builder/componentTreeNodes.ts
index 420c540e37..367bc1f0d9 100644
--- a/packages/builder/src/stores/builder/componentTreeNodes.ts
+++ b/packages/builder/src/stores/builder/componentTreeNodes.ts
@@ -49,7 +49,7 @@ export class ComponentTreeNodesStore extends BudiStore<OpenNodesState> {
 
   // Will ensure all parents of a node are expanded so that it is visible in the tree
   makeNodeVisible(componentId: string) {
-    const selectedScreen: Screen = get(selectedScreenStore)
+    const selectedScreen: Screen = get(selectedScreenStore)!
 
     const path = findComponentPath(selectedScreen.props, componentId)
 
diff --git a/packages/builder/src/stores/builder/websocket.ts b/packages/builder/src/stores/builder/websocket.ts
index bd9e2c8d4d..b9b6c0eb63 100644
--- a/packages/builder/src/stores/builder/websocket.ts
+++ b/packages/builder/src/stores/builder/websocket.ts
@@ -16,7 +16,14 @@ import { auth, appsStore } from "@/stores/portal"
 import { screenStore } from "./screens"
 import { SocketEvent, BuilderSocketEvent, helpers } from "@budibase/shared-core"
 import { notifications } from "@budibase/bbui"
-import { Automation, Datasource, Role, Table, UIUser } from "@budibase/types"
+import {
+  Automation,
+  Datasource,
+  Role,
+  Screen,
+  Table,
+  UIUser,
+} from "@budibase/types"
 
 export const createBuilderWebsocket = (appId: string) => {
   const socket = createWebsocket("/socket/builder")

From 79180bfac5512304dbf1d91234dec774f5bff42f Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 21 Jan 2025 09:48:58 +0100
Subject: [PATCH 12/18] Cleanups

---
 packages/builder/src/stores/builder/componentTreeNodes.ts | 6 +++---
 packages/builder/src/stores/builder/components.ts         | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/stores/builder/componentTreeNodes.ts b/packages/builder/src/stores/builder/componentTreeNodes.ts
index 367bc1f0d9..775985abdc 100644
--- a/packages/builder/src/stores/builder/componentTreeNodes.ts
+++ b/packages/builder/src/stores/builder/componentTreeNodes.ts
@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
 import { selectedScreen as selectedScreenStore } from "./screens"
 import { findComponentPath } from "@/helpers/components"
-import { Screen, Component } from "@budibase/types"
+import { Component } from "@budibase/types"
 import { BudiStore, PersistenceType } from "@/stores/BudiStore"
 
 interface OpenNodesState {
@@ -49,9 +49,9 @@ export class ComponentTreeNodesStore extends BudiStore<OpenNodesState> {
 
   // Will ensure all parents of a node are expanded so that it is visible in the tree
   makeNodeVisible(componentId: string) {
-    const selectedScreen: Screen = get(selectedScreenStore)!
+    const selectedScreen = get(selectedScreenStore)
 
-    const path = findComponentPath(selectedScreen.props, componentId)
+    const path = findComponentPath(selectedScreen?.props, componentId)
 
     const componentIds = path.map((component: Component) => component._id)
 
diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts
index 8fa7f5113d..d831d35ab6 100644
--- a/packages/builder/src/stores/builder/components.ts
+++ b/packages/builder/src/stores/builder/components.ts
@@ -610,14 +610,14 @@ export class ComponentStore extends BudiStore<ComponentState> {
   async patch(
     patchFn: (component: Component, screen: Screen) => any,
     componentId?: string,
-    screenId?: string | null
+    screenId?: string
   ) {
     // Use selected component by default
     if (!componentId || !screenId) {
       const state = get(this.store)
       componentId = componentId ?? state.selectedComponentId ?? undefined
       const screenState = get(screenStore)
-      screenId = screenId || screenState.selectedScreenId
+      screenId = (screenId || screenState.selectedScreenId) ?? undefined
     }
     if (!componentId || !screenId || !patchFn) {
       return

From f5e8ed6e37cf7afeb3378a4038d8c01bf7d35fc4 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 21 Jan 2025 09:50:02 +0100
Subject: [PATCH 13/18] Fix tests

---
 packages/builder/src/stores/builder/history.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/stores/builder/history.ts b/packages/builder/src/stores/builder/history.ts
index 916e417872..6568c5abca 100644
--- a/packages/builder/src/stores/builder/history.ts
+++ b/packages/builder/src/stores/builder/history.ts
@@ -9,7 +9,7 @@ export const enum Operations {
 }
 
 interface Operator<T extends Document> {
-  id?: string
+  id?: number
   type: Operations
   doc: T
   forwardPatch?: jsonpatch.Operation[]
@@ -22,7 +22,7 @@ interface HistoryState<T extends Document> {
   loading?: boolean
 }
 
-export const initialState: HistoryState<never> = {
+export const initialState = {
   history: [],
   position: 0,
   loading: false,
@@ -37,10 +37,10 @@ export interface HistoryStore<T extends Document>
   > {
   wrapSaveDoc: (
     fn: (doc: T) => Promise<T>
-  ) => (doc: T, operationId?: string) => Promise<T>
+  ) => (doc: T, operationId?: number) => Promise<T>
   wrapDeleteDoc: (
     fn: (doc: T) => Promise<void>
-  ) => (doc: T, operationId?: string) => Promise<void>
+  ) => (doc: T, operationId?: number) => Promise<void>
 
   reset: () => void
   undo: () => Promise<void>
@@ -70,8 +70,8 @@ export const createHistoryStore = <T extends Document>({
 
   // Wrapped versions of essential functions which we call ourselves when using
   // undo and redo
-  let saveFn: (doc: T, operationId?: string) => Promise<T>
-  let deleteFn: (doc: T, operationId?: string) => Promise<void>
+  let saveFn: (doc: T, operationId?: number) => Promise<T>
+  let deleteFn: (doc: T, operationId?: number) => Promise<void>
 
   /**
    * Internal util to set the loading flag
@@ -112,7 +112,7 @@ export const createHistoryStore = <T extends Document>({
       let position = state.position
       if (!operation.id) {
         // Every time a new operation occurs we discard any redo potential
-        operation.id = Math.random().toString()
+        operation.id = Math.random()
         history = [...history.slice(0, state.position), operation]
         position += 1
       } else {
@@ -133,7 +133,7 @@ export const createHistoryStore = <T extends Document>({
    * @returns {function} a wrapped version of the save function
    */
   const wrapSaveDoc = (fn: (doc: T) => Promise<T>) => {
-    saveFn = async (doc: T, operationId?: string) => {
+    saveFn = async (doc: T, operationId?: number) => {
       // Only works on a single doc at a time
       if (!doc || Array.isArray(doc)) {
         return
@@ -181,7 +181,7 @@ export const createHistoryStore = <T extends Document>({
    * @returns {function} a wrapped version of the delete function
    */
   const wrapDeleteDoc = (fn: (doc: T) => Promise<void>) => {
-    deleteFn = async (doc: T, operationId?: string) => {
+    deleteFn = async (doc: T, operationId?: number) => {
       // Only works on a single doc at a time
       if (!doc || Array.isArray(doc)) {
         return

From 15ffe58a8164b5b5b8f1d70cedcd4cd6e7321922 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 21 Jan 2025 10:38:50 +0100
Subject: [PATCH 14/18] Fix undefined

---
 packages/builder/src/stores/builder/screens.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/stores/builder/screens.ts b/packages/builder/src/stores/builder/screens.ts
index d87d12f23c..a31c8fb728 100644
--- a/packages/builder/src/stores/builder/screens.ts
+++ b/packages/builder/src/stores/builder/screens.ts
@@ -10,7 +10,7 @@ import {
   navigationStore,
   selectedComponent,
 } from "@/stores/builder"
-import { createHistoryStore } from "@/stores/builder/history"
+import { createHistoryStore, HistoryStore } from "@/stores/builder/history"
 import { API } from "@/api"
 import { BudiStore } from "../BudiStore"
 import { Component, Screen } from "@budibase/types"
@@ -27,6 +27,7 @@ export const INITIAL_SCREENS_STATE: ScreenState = {
 }
 
 export class ScreenStore extends BudiStore<ScreenState> {
+  history: HistoryStore<Screen>
   save: (doc: Screen) => Promise<Screen>
   delete: (doc: Screen) => Promise<void>
 
@@ -47,7 +48,7 @@ export class ScreenStore extends BudiStore<ScreenState> {
     this.sequentialScreenPatch = this.sequentialScreenPatch.bind(this)
     this.removeCustomLayout = this.removeCustomLayout.bind(this)
 
-    const history = createHistoryStore({
+    this.history = createHistoryStore({
       getDoc: id => get(this.store).screens?.find(screen => screen._id === id),
       selectDoc: this.select,
       afterAction: () => {
@@ -61,8 +62,8 @@ export class ScreenStore extends BudiStore<ScreenState> {
       },
     })
 
-    this.delete = history.wrapDeleteDoc(this.deleteScreen)
-    this.save = history.wrapSaveDoc(this.saveScreen)
+    this.delete = this.history.wrapDeleteDoc(this.deleteScreen)
+    this.save = this.history.wrapSaveDoc(this.saveScreen)
   }
 
   /**

From 8842bfe3b400371c2395bd3de360fbfacffec3e2 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 27 Jan 2025 15:50:36 +0100
Subject: [PATCH 15/18] Fix types

---
 .../src/stores/builder/componentTreeNodes.ts       |  2 +-
 packages/builder/src/stores/builder/screens.ts     |  7 +++++--
 packages/frontend-core/src/utils/utils.ts          | 14 ++++++++------
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/stores/builder/componentTreeNodes.ts b/packages/builder/src/stores/builder/componentTreeNodes.ts
index 2f34e79d01..17793c9672 100644
--- a/packages/builder/src/stores/builder/componentTreeNodes.ts
+++ b/packages/builder/src/stores/builder/componentTreeNodes.ts
@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
 import { selectedScreen as selectedScreenStore } from "./screens"
 import { findComponentPath } from "@/helpers/components"
-import { Component } from "@budibase/types"
+import { Component, Screen } from "@budibase/types"
 import { BudiStore, PersistenceType } from "@/stores/BudiStore"
 
 interface OpenNodesState {
diff --git a/packages/builder/src/stores/builder/screens.ts b/packages/builder/src/stores/builder/screens.ts
index 5163c6a3ea..04405feb70 100644
--- a/packages/builder/src/stores/builder/screens.ts
+++ b/packages/builder/src/stores/builder/screens.ts
@@ -35,7 +35,7 @@ export const initialScreenState: ScreenState = {
 export class ScreenStore extends BudiStore<ScreenState> {
   history: any
   delete: any
-  save: any
+  save: (screen: Screen) => Promise<Screen>
 
   constructor() {
     super(initialScreenState)
@@ -281,7 +281,10 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * supports deeply mutating the current doc rather than just appending data.
    */
   sequentialScreenPatch = Utils.sequential(
-    async (patchFn: (screen: Screen) => any, screenId: string) => {
+    async (
+      patchFn: (screen: Screen) => boolean,
+      screenId: string
+    ): Promise<Screen | void> => {
       const state = get(this.store)
       const screen = state.screens.find(screen => screen._id === screenId)
       if (!screen) {
diff --git a/packages/frontend-core/src/utils/utils.ts b/packages/frontend-core/src/utils/utils.ts
index 5f7f7063a7..b75ae02d07 100644
--- a/packages/frontend-core/src/utils/utils.ts
+++ b/packages/frontend-core/src/utils/utils.ts
@@ -17,12 +17,13 @@ export const sequential = <
   TFunction extends (...args: any[]) => Promise<TReturn>
 >(
   fn: TFunction
-): ((...args: Parameters<TFunction>) => Promise<TReturn | undefined>) => {
-  let queue: any[] = []
-  return (...params: Parameters<TFunction>) => {
-    return new Promise<TReturn | undefined>((resolve, reject) => {
+): TFunction => {
+  let queue: (() => Promise<void>)[] = []
+  const result = (...params: Parameters<TFunction>) => {
+    return new Promise<TReturn>((resolve, reject) => {
       queue.push(async () => {
-        let data, error
+        let data: TReturn | undefined
+        let error: unknown
         try {
           data = await fn(...params)
         } catch (err) {
@@ -35,7 +36,7 @@ export const sequential = <
         if (error) {
           reject(error)
         } else {
-          resolve(data)
+          resolve(data!)
         }
       })
       if (queue.length === 1) {
@@ -43,6 +44,7 @@ export const sequential = <
       }
     })
   }
+  return result as TFunction
 }
 
 /**

From 3f10a3404cf4a3305f04a4fa455844c5cec964aa Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 27 Jan 2025 16:00:44 +0100
Subject: [PATCH 16/18] Types

---
 packages/builder/src/stores/builder/screens.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/stores/builder/screens.ts b/packages/builder/src/stores/builder/screens.ts
index 04405feb70..646f598403 100644
--- a/packages/builder/src/stores/builder/screens.ts
+++ b/packages/builder/src/stores/builder/screens.ts
@@ -10,7 +10,7 @@ import {
   navigationStore,
   selectedComponent,
 } from "@/stores/builder"
-import { createHistoryStore } from "@/stores/builder/history"
+import { createHistoryStore, HistoryStore } from "@/stores/builder/history"
 import { API } from "@/api"
 import { BudiStore } from "../BudiStore"
 import {
@@ -33,8 +33,8 @@ export const initialScreenState: ScreenState = {
 
 // Review the nulls
 export class ScreenStore extends BudiStore<ScreenState> {
-  history: any
-  delete: any
+  history: HistoryStore<Screen>
+  delete: (screens: Screen) => Promise<void>
   save: (screen: Screen) => Promise<Screen>
 
   constructor() {
@@ -365,10 +365,10 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * Any deleted screens will then have their routes/links purged
    *
    * Wrapped by {@link delete}
-   * @param {Screen | Screen[]} screens
+   * @param {Screen } screens
    */
-  async deleteScreen(screens: Screen | Screen[]) {
-    const screensToDelete = Array.isArray(screens) ? screens : [screens]
+  async deleteScreen(screen: Screen) {
+    const screensToDelete = [screen]
     // Build array of promises to speed up bulk deletions
     let promises: Promise<DeleteScreenResponse>[] = []
     let deleteUrls: string[] = []

From d322f85acfb70499c44facda56fe5f83749faddb Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 27 Jan 2025 16:02:59 +0100
Subject: [PATCH 17/18] Clean code

---
 packages/builder/src/stores/builder/componentTreeNodes.ts | 2 +-
 packages/builder/src/stores/builder/components.ts         | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/stores/builder/componentTreeNodes.ts b/packages/builder/src/stores/builder/componentTreeNodes.ts
index 17793c9672..b88563de6a 100644
--- a/packages/builder/src/stores/builder/componentTreeNodes.ts
+++ b/packages/builder/src/stores/builder/componentTreeNodes.ts
@@ -56,7 +56,7 @@ export class ComponentTreeNodesStore extends BudiStore<OpenNodesState> {
       return {}
     }
 
-    const path = findComponentPath(selectedScreen?.props, componentId)
+    const path = findComponentPath(selectedScreen.props, componentId)
 
     const componentIds = path.map((component: Component) => component._id)
 
diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts
index 1944096f5b..46d3e07eae 100644
--- a/packages/builder/src/stores/builder/components.ts
+++ b/packages/builder/src/stores/builder/components.ts
@@ -483,9 +483,8 @@ export class ComponentStore extends BudiStore<ComponentState> {
       extras._children = []
     }
 
-    const $selectedScreen = get(selectedScreen)
     // Add step name to form steps
-    if (componentName.endsWith("/formstep") && $selectedScreen) {
+    if (componentName.endsWith("/formstep")) {
       const parentForm = findClosestMatchingComponent(
         screen.props,
         get(selectedComponent)._id,
@@ -621,7 +620,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
       const state = get(this.store)
       componentId = componentId ?? state.selectedComponentId ?? undefined
       const screenState = get(screenStore)
-      screenId = (screenId || screenState.selectedScreenId) ?? undefined
+      screenId = screenId || screenState.selectedScreenId
     }
     if (!componentId || !screenId || !patchFn) {
       return

From 735b8206ce737706b062327bb601f0b5084895ba Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 30 Jan 2025 12:39:25 +0100
Subject: [PATCH 18/18] Types

---
 packages/frontend-core/src/utils/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-core/src/utils/utils.ts b/packages/frontend-core/src/utils/utils.ts
index b75ae02d07..85cc5de54b 100644
--- a/packages/frontend-core/src/utils/utils.ts
+++ b/packages/frontend-core/src/utils/utils.ts
@@ -55,7 +55,7 @@ export const sequential = <
  * @returns a debounced version of the callback
  */
 export const debounce = (callback: Function, minDelay = 1000) => {
-  let timeout: NodeJS.Timeout
+  let timeout: ReturnType<typeof setTimeout>
   return async (...params: any[]) => {
     return new Promise(resolve => {
       if (timeout) {