Remove ability to select fields in preview because it is not compatible with field configuration changes

packages/builder/src/builderStore/previewEvents.js

@@ -1,13 +0,0 @@
-let subscribers = []
-
-export const onPreviewEvent = cb => {
-  subscribers.push(cb)
-
-  return () => {
-    subscribers = subscribers.filter(callback => callback !== cb)
-  }
-}
-
-export const emitPreviewEvent = event => {
-  subscribers.forEach(cb => cb(event))
-}

packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte

@@ -2,10 +2,9 @@
   import { Icon, Popover, Layout } from "@budibase/bbui"
   import { store } from "builderStore"
   import { cloneDeep } from "lodash/fp"
-  import { createEventDispatcher, onMount } from "svelte"
+  import { createEventDispatcher } from "svelte"
   import ComponentSettingsSection from "../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
   import { getContext } from "svelte"
-  import { onPreviewEvent } from "builderStore/previewEvents"
 
   export let anchor
   export let componentInstance
@@ -21,7 +20,7 @@
   let open = false
 
   // Auto hide the component when another item is selected
-  $: if (open && $draggable.selected != componentInstance._id) {
+  $: if (open && $draggable.selected !== componentInstance._id) {
     popover.hide()
   }
 
@@ -79,22 +78,6 @@
 
     return { ...cfg, left, top }
   }
-
-  const handlePreviewEvent = event => {
-    const { type, data } = event?.data || {}
-    if (type === "click-form-block-field") {
-      console.log(data.field)
-      if (data.field === "asdasd") {
-        popover.show()
-        open = true
-      } else {
-        popover.hide()
-        open = false
-      }
-    }
-  }
-
-  onMount(() => onPreviewEvent(handlePreviewEvent))
 </script>
 
 <Icon
@@ -117,13 +100,13 @@
   }}
   on:close={() => {
     open = false
-    if ($draggable.selected == componentInstance._id) {
+    if ($draggable.selected === componentInstance._id) {
       $draggable.actions.select()
     }
   }}
   {anchor}
   align="left-outside"
-  showPopover={drawers.length == 0}
+  showPopover={drawers.length === 0}
   clickOutsideOverride={drawers.length > 0}
   maxHeight={600}
   handlePostionUpdate={customPositionHandler}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -14,7 +14,6 @@
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
   import { findComponent, findComponentPath } from "builderStore/componentUtils"
   import { isActive, goto } from "@roxi/routify"
-  import { emitPreviewEvent } from "builderStore/previewEvents"
 
   let iframe
   let layout
@@ -37,14 +36,12 @@
 
   // Determine selected component ID
   $: selectedComponentId = $store.selectedComponentId
-  $: selectedBlockComponentId = $store.selectedBlockComponentId
 
   $: previewData = {
     appId: $store.appId,
     layout,
     screen,
     selectedComponentId,
-    selectedBlockComponentId,
     theme: $store.theme,
     customTheme: $store.customTheme,
     previewDevice: $store.previewDevice,
@@ -96,7 +93,6 @@
     // Await the event handler
     try {
       await handleBudibaseEvent(message)
-      emitPreviewEvent(message)
     } catch (error) {
       notifications.error(error || "Error handling event from app preview")
     }
@@ -185,8 +181,6 @@
     } else if (type === "add-parent-component") {
       const { componentId, parentType } = data
       await store.actions.components.addParent(componentId, parentType)
-    } else if (type === "click-form-block-field") {
-      // Swallow and let this be handled by form block settings
     } else {
       console.warn(`Client sent unknown event type: ${type}`)
     }

packages/client/src/components/BlockComponent.svelte

@@ -11,7 +11,6 @@
   export let name
   export let order = 0
   export let containsSlot = false
-  export let onClick = null
 
   // ID is only exposed as a prop so that it can be bound to from parent
   // block components
@@ -26,7 +25,6 @@
   $: id = `${block.id}-${context ?? rand}`
   $: parentId = $component?.id
   $: inBuilder = $builderStore.inBuilder
-  $: blockSelected = $builderStore.selectedComponentId === block.id
   $: instance = {
     ...props,
     _component: getComponent(type),
@@ -78,6 +76,6 @@
   })
 </script>
 
-<Component {instance} isBlock onClick={blockSelected ? onClick : null}>
+<Component {instance} isBlock>
   <slot />
 </Component>

packages/client/src/components/Component.svelte

@@ -35,7 +35,6 @@
   export let isLayout = false
   export let isRoot = false
   export let isBlock = false
-  export let onClick = null
 
   // Get parent contexts
   const context = getContext("context")
@@ -132,10 +131,7 @@
   // Interactive components can be selected, dragged and highlighted inside
   // the builder preview
   $: builderInteractive =
-    $builderStore.inBuilder &&
+    $builderStore.inBuilder && insideScreenslot && !isBlock && !instance.static
-    insideScreenslot &&
-    (!isBlock || onClick) &&
-    !instance.static
   $: devToolsInteractive = $devToolsStore.allowSelection && !isBlock
   $: interactive = !isRoot && (builderInteractive || devToolsInteractive)
   $: editing = editable && selected && $builderStore.editMode
@@ -200,7 +196,6 @@
       draggable,
       editable,
       isBlock,
-      onClick,
     },
     empty: emptyState,
     selected,

packages/client/src/index.js

@@ -31,8 +31,6 @@ const loadBudibase = async () => {
     layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
     screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
     selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
-    selectedBlockComponentId:
-      window["##BUDIBASE_SELECTED_BLOCK_COMPONENT_ID##"],
     previewId: window["##BUDIBASE_PREVIEW_ID##"],
     theme: window["##BUDIBASE_PREVIEW_THEME##"],
     customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],

packages/client/src/stores/builder.js

@@ -8,7 +8,6 @@ const createBuilderStore = () => {
     inBuilder: false,
     screen: null,
     selectedComponentId: null,
-    selectedBlockComponentId: null,
     editMode: false,
     previewId: null,
     theme: null,
@@ -36,9 +35,6 @@ const createBuilderStore = () => {
       devToolsStore.actions.setAllowSelection(false)
       eventStore.actions.dispatchEvent("select-component", { id })
     },
-    clickFormBlockField: field => {
-      eventStore.actions.dispatchEvent("click-form-block-field", { field })
-    },
     updateProp: (prop, value) => {
       eventStore.actions.dispatchEvent("update-prop", { prop, value })
     },

packages/client/src/utils/styleable.js

@@ -40,7 +40,7 @@ export const styleable = (node, styles = {}) => {
 
     const componentId = newStyles.id
     const customStyles = newStyles.custom || ""
-    const { isBlock, onClick } = newStyles
+    const { isBlock } = newStyles
     const normalStyles = { ...baseStyles, ...newStyles.normal }
     const hoverStyles = {
       ...normalStyles,
@@ -68,11 +68,7 @@ export const styleable = (node, styles = {}) => {
     // Handler to select a component in the builder when clicking it in the
     // builder preview
     selectComponent = event => {
-      if (isBlock && onClick) {
+      builderStore.actions.selectComponent(componentId)
-        onClick()
-      } else {
-        builderStore.actions.selectComponent(componentId, isBlock)
-      }
       event.preventDefault()
       event.stopPropagation()
       return false

packages/server/src/api/controllers/static/templates/preview.hbs

@@ -63,7 +63,6 @@
       // Extract data from message
       const {
         selectedComponentId,
-        selectedBlockComponentId,
         layout,
         screen,
         appId,
@@ -82,7 +81,6 @@
       window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout
       window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
       window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
-      window["##BUDIBASE_SELECTED_BLOCK_COMPONENT_ID##"] = selectedBlockComponentId
       window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
       window["##BUDIBASE_PREVIEW_THEME##"] = theme
       window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme