Merge pull request #15454 from Budibase/fix-adding-component-after-undo

Fix adding component after undo

packages/builder/src/stores/builder/automations.ts

@@ -1437,8 +1437,6 @@ class AutomationStore extends BudiStore<AutomationState> {
     this.history = createHistoryStore({
       getDoc: this.actions.getDefinition.bind(this),
       selectDoc: this.actions.select.bind(this),
-      beforeAction: () => {},
-      afterAction: () => {},
     })
 
     // Then wrap save and delete with history

packages/builder/src/stores/builder/components.ts

@@ -30,9 +30,18 @@ import {
 } from "@/constants/backend"
 import { BudiStore } from "../BudiStore"
 import { Utils } from "@budibase/frontend-core"
-import { Component, FieldType, Screen, Table } from "@budibase/types"
+import {
+  Component as ComponentType,
+  FieldType,
+  Screen,
+  Table,
+} from "@budibase/types"
 import { utils } from "@budibase/shared-core"
 
+interface Component extends ComponentType {
+  _id: string
+}
+
 export interface ComponentState {
   components: Record<string, ComponentDefinition>
   customComponents: string[]
@@ -254,7 +263,10 @@ export class ComponentStore extends BudiStore<ComponentState> {
    * @param {object} opts
    * @returns
    */
-  enrichEmptySettings(component: Component, opts: any) {
+  enrichEmptySettings(
+    component: Component,
+    opts: { screen?: Screen; parent?: Component; useDefaultValues?: boolean }
+  ) {
     if (!component?._component) {
       return
     }
@@ -364,7 +376,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
             getSchemaForDatasource(screen, dataSource, {})
 
           // Finds fields by types from the schema of the configured datasource
-          const findFieldTypes = (fieldTypes: any) => {
+          const findFieldTypes = (fieldTypes: FieldType | FieldType[]) => {
             if (!Array.isArray(fieldTypes)) {
               fieldTypes = [fieldTypes]
             }
@@ -439,7 +451,11 @@ export class ComponentStore extends BudiStore<ComponentState> {
    * @param {object} parent
    * @returns
    */
-  createInstance(componentName: string, presetProps: any, parent: any) {
+  createInstance(
+    componentName: string,
+    presetProps: any,
+    parent: any
+  ): Component | null {
     const screen = get(selectedScreen)
     if (!screen) {
       throw "A valid screen must be selected"
@@ -451,7 +467,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
     }
 
     // Generate basic component structure
-    let instance = {
+    let instance: Component = {
       _id: Helpers.uuid(),
       _component: definition.component,
       _styles: {
@@ -478,7 +494,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
     }
 
     // Custom post processing for creation only
-    let extras: any = {}
+    let extras: Partial<Component> = {}
     if (definition.hasChildren) {
       extras._children = []
     }
@@ -487,7 +503,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
     if (componentName.endsWith("/formstep")) {
       const parentForm = findClosestMatchingComponent(
         screen.props,
-        get(selectedComponent)._id,
+        get(selectedComponent)?._id,
         (component: Component) => component._component.endsWith("/form")
       )
       const formSteps = findAllMatchingComponents(
@@ -515,7 +531,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
   async create(
     componentName: string,
     presetProps: any,
-    parent: any,
+    parent: Component,
     index: number
   ) {
     const state = get(this.store)
@@ -772,7 +788,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
       if (!cut) {
         componentToPaste = makeComponentUnique(componentToPaste)
       }
-      newComponentId = componentToPaste._id!
+      newComponentId = componentToPaste._id
 
       // Strip grid position metadata if pasting into a new screen, but keep
       // alignment metadata
@@ -915,7 +931,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
 
     // If we have children, select first child, and the node is not collapsed
     if (
-      component._children?.length &&
+      component?._children?.length &&
       (state.selectedComponentId === navComponentId ||
         componentTreeNodesStore.isNodeExpanded(component._id))
     ) {
@@ -1339,12 +1355,15 @@ export const componentStore = new ComponentStore()
 
 export const selectedComponent = derived(
   [componentStore, selectedScreen],
-  ([$store, $selectedScreen]) => {
+  ([$store, $selectedScreen]): Component | null => {
     if (
       $selectedScreen &&
       $store.selectedComponentId?.startsWith(`${$selectedScreen._id}-`)
     ) {
-      return $selectedScreen?.props
+      return {
+        ...$selectedScreen.props,
+        _id: $selectedScreen.props._id!,
+      }
     }
     if (!$selectedScreen || !$store.selectedComponentId) {
       return null

packages/builder/src/stores/builder/history.js

@@ -16,8 +16,8 @@ export const initialState = {
 export const createHistoryStore = ({
   getDoc,
   selectDoc,
-  beforeAction,
-  afterAction,
+  beforeAction = () => {},
+  afterAction = () => {},
 }) => {
   // Use a derived store to check if we are able to undo or redo any operations
   const store = writable(initialState)

packages/builder/src/stores/builder/screens.ts

@@ -58,13 +58,12 @@ export class ScreenStore extends BudiStore<ScreenState> {
       getDoc: (id: string) =>
         get(this.store).screens?.find(screen => screen._id === id),
       selectDoc: this.select,
-      beforeAction: () => {},
       afterAction: () => {
         // Ensure a valid component is selected
         if (!get(selectedComponent)) {
-          this.update(state => ({
+          componentStore.update(state => ({
             ...state,
-            selectedComponentId: get(selectedScreen)?.props._id,
+            selectedComponentId: get(selectedScreen)?._id,
           }))
         }
       },