Merge branch 'master' into contributor-enhancements

packages/bbui/src/ProgressCircle/ProgressCircle.svelte

@@ -37,7 +37,7 @@
     }
   }
 
-  export let overBackground
+  export let overBackground = false
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

packages/builder/src/dataBinding.js

@@ -900,7 +900,7 @@ export const getSchemaForDatasourcePlus = (resourceId, options) => {
  *   optional and only needed for "provider" datasource types.
  * @param datasource the datasource definition
  * @param options options for generating the schema
- * @return {{schema: Object, table: Object}}
+ * @return {{schema: Object, table: Table}}
  */
 export const getSchemaForDatasource = (asset, datasource, options) => {
   options = options || {}

packages/builder/src/stores/BudiStore.ts

@@ -1,7 +1,21 @@
 import { writable, Writable, Readable } from "svelte/store"
+import {
+  createLocalStorageStore,
+  createSessionStorageStore,
+} from "@budibase/frontend-core"
+
+export enum PersistenceType {
+  NONE = "none",
+  LOCAL = "local",
+  SESSION = "session",
+}
 
 interface BudiStoreOpts {
   debug?: boolean
+  persistence?: {
+    type: PersistenceType
+    key: string
+  }
 }
 
 export class BudiStore<T> {
@@ -11,7 +25,21 @@ export class BudiStore<T> {
   set: Writable<T>["set"]
 
   constructor(init: T, opts?: BudiStoreOpts) {
-    this.store = writable<T>(init)
+    if (opts?.persistence) {
+      switch (opts.persistence.type) {
+        case PersistenceType.LOCAL:
+          this.store = createLocalStorageStore(opts.persistence.key, init)
+          break
+        case PersistenceType.SESSION:
+          this.store = createSessionStorageStore(opts.persistence.key, init)
+          break
+        default:
+          this.store = writable<T>(init)
+      }
+    } else {
+      this.store = writable<T>(init)
+    }
+
     this.subscribe = this.store.subscribe
     this.update = this.store.update
     this.set = this.store.set

packages/builder/src/stores/builder/app.ts

@@ -86,15 +86,15 @@ export class AppMetaStore extends BudiStore<AppMetaState> {
     super(INITIAL_APP_META_STATE)
   }
 
-  reset(): void {
+  reset() {
     this.store.set({ ...INITIAL_APP_META_STATE })
   }
 
   syncAppPackage(pkg: {
     application: App
     clientLibPath: string
     hasLock: boolean
-  }): void {
+  }) {
     const { application: app, clientLibPath, hasLock } = pkg
 
     this.update(state => ({
@@ -121,7 +121,7 @@ export class AppMetaStore extends BudiStore<AppMetaState> {
     }))
   }
 
-  syncClientFeatures(features: Partial<ClientFeatures>): void {
+  syncClientFeatures(features: Partial<ClientFeatures>) {
     this.update(state => ({
       ...state,
       clientFeatures: {
@@ -131,14 +131,14 @@ export class AppMetaStore extends BudiStore<AppMetaState> {
     }))
   }
 
-  syncClientTypeSupportPresets(typeSupportPresets: TypeSupportPresets): void {
+  syncClientTypeSupportPresets(typeSupportPresets: TypeSupportPresets) {
     this.update(state => ({
       ...state,
       typeSupportPresets,
     }))
   }
 
-  async syncAppRoutes(): Promise<void> {
+  async syncAppRoutes() {
     const resp = await API.fetchAppRoutes()
     this.update(state => ({
       ...state,
@@ -147,7 +147,7 @@ export class AppMetaStore extends BudiStore<AppMetaState> {
   }
 
   // Returned from socket
-  syncMetadata(metadata: { name: string; url: string; icon?: AppIcon }): void {
+  syncMetadata(metadata: { name: string; url: string; icon?: AppIcon }) {
     const { name, url, icon } = metadata
     this.update(state => ({
       ...state,

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

@@ -54,7 +54,7 @@ export class BuilderStore extends BudiStore<BuilderState> {
     this.startBuilderOnboarding = this.startBuilderOnboarding.bind(this)
   }
 
-  init(app: App): void {
+  init(app: App) {
     if (!app?.appId) {
       console.error("BuilderStore: No appId supplied for websocket")
       return
@@ -64,46 +64,46 @@ export class BuilderStore extends BudiStore<BuilderState> {
     }
   }
 
-  refresh(): void {
+  refresh() {
     const currentState = get(this.store)
     this.store.set(currentState)
   }
 
-  reset(): void {
+  reset() {
     this.store.set({ ...INITIAL_BUILDER_STATE })
     this.websocket?.disconnect()
     this.websocket = undefined
   }
 
-  highlightSetting(key?: string, type?: string): void {
+  highlightSetting(key?: string, type?: string) {
     this.update(state => ({
       ...state,
       highlightedSetting: key ? { key, type: type || "info" } : null,
     }))
   }
 
-  propertyFocus(key: string | null): void {
+  propertyFocus(key: string | null) {
     this.update(state => ({
       ...state,
       propertyFocus: key,
     }))
   }
 
-  showBuilderSidePanel(): void {
+  showBuilderSidePanel() {
     this.update(state => ({
       ...state,
       builderSidePanel: true,
     }))
   }
 
-  hideBuilderSidePanel(): void {
+  hideBuilderSidePanel() {
     this.update(state => ({
       ...state,
       builderSidePanel: false,
     }))
   }
 
-  setPreviousTopNavPath(route: string, url: string): void {
+  setPreviousTopNavPath(route: string, url: string) {
     this.update(state => ({
       ...state,
       previousTopNavPath: {
@@ -113,13 +113,13 @@ export class BuilderStore extends BudiStore<BuilderState> {
     }))
   }
 
-  selectResource(id: string): void {
+  selectResource(id: string) {
     this.websocket?.emit(BuilderSocketEvent.SelectResource, {
       resourceId: id,
     })
   }
 
-  registerTourNode(tourStepKey: string, node: HTMLElement): void {
+  registerTourNode(tourStepKey: string, node: HTMLElement) {
     this.update(state => {
       const update = {
         ...state,
@@ -132,7 +132,7 @@ export class BuilderStore extends BudiStore<BuilderState> {
     })
   }
 
-  destroyTourNode(tourStepKey: string): void {
+  destroyTourNode(tourStepKey: string) {
     const store = get(this.store)
     if (store.tourNodes?.[tourStepKey]) {
       const nodes = { ...store.tourNodes }
@@ -144,22 +144,22 @@ export class BuilderStore extends BudiStore<BuilderState> {
     }
   }
 
-  startBuilderOnboarding(): void {
+  startBuilderOnboarding() {
     this.update(state => ({
       ...state,
       onboarding: true,
       tourKey: TOUR_KEYS.TOUR_BUILDER_ONBOARDING,
     }))
   }
 
-  endBuilderOnboarding(): void {
+  endBuilderOnboarding() {
     this.update(state => ({
       ...state,
       onboarding: false,
     }))
   }
 
-  setTour(tourKey?: string | null): void {
+  setTour(tourKey?: string | null) {
     this.update(state => ({
       ...state,
       tourStepKey: null,

packages/builder/src/stores/builder/componentTreeNodes.ts

@@ -0,0 +1,73 @@
+import { get } from "svelte/store"
+import { selectedScreen as selectedScreenStore } from "./screens"
+import { findComponentPath } from "@/helpers/components"
+import { Screen, Component } from "@budibase/types"
+import { BudiStore, PersistenceType } from "@/stores/BudiStore"
+
+interface OpenNodesState {
+  [key: string]: boolean
+}
+
+export class ComponentTreeNodesStore extends BudiStore<OpenNodesState> {
+  constructor() {
+    super({} as OpenNodesState, {
+      persistence: {
+        type: PersistenceType.SESSION,
+        key: "openNodes",
+      },
+    })
+  }
+
+  toggleNode(componentId: string) {
+    this.update((openNodes: OpenNodesState) => {
+      openNodes[`nodeOpen-${componentId}`] =
+        !openNodes[`nodeOpen-${componentId}`]
+
+      return openNodes
+    })
+  }
+
+  expandNodes(componentIds: string[]) {
+    this.update((openNodes: OpenNodesState) => {
+      const newNodes = Object.fromEntries(
+        componentIds.map(id => [`nodeOpen-${id}`, true])
+      )
+
+      return { ...openNodes, ...newNodes }
+    })
+  }
+
+  collapseNodes(componentIds: string[]) {
+    this.update((openNodes: OpenNodesState) => {
+      const newNodes = Object.fromEntries(
+        componentIds.map(id => [`nodeOpen-${id}`, false])
+      )
+
+      return { ...openNodes, ...newNodes }
+    })
+  }
+
+  // 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 path = findComponentPath(selectedScreen.props, componentId)
+
+    const componentIds = path.map((component: Component) => component._id)
+
+    this.update((openNodes: OpenNodesState) => {
+      const newNodes = Object.fromEntries(
+        componentIds.map((id: string) => [`nodeOpen-${id}`, true])
+      )
+
+      return { ...openNodes, ...newNodes }
+    })
+  }
+
+  isNodeExpanded(componentId: string): boolean {
+    const openNodes = get(this)
+    return !!openNodes[`nodeOpen-${componentId}`]
+  }
+}
+
+export default new ComponentTreeNodesStore()