Update component settings bar to respect dependsOn metadata

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { helpers } from "@budibase/shared-core"
   import { DetailSummary, notifications } from "@budibase/bbui"
   import { componentStore, builderStore } from "stores/builder"
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
@@ -8,6 +7,7 @@
   import { getComponentForSetting } from "components/design/settings/componentSettings"
   import InfoDisplay from "./InfoDisplay.svelte"
   import analytics, { Events } from "analytics"
+  import { shouldDisplaySetting } from "@budibase/frontend-core"
 
   export let componentDefinition
   export let componentInstance
@@ -48,7 +48,7 @@
 
     // Filter out settings which shouldn't be rendered
     sections.forEach(section => {
-      section.visible = shouldDisplay(instance, section)
+      section.visible = shouldDisplaySetting(instance, section)
       if (!section.visible) {
         return
       }
@@ -88,46 +88,6 @@
     }
   }
 
-  const shouldDisplay = (instance, setting) => {
-    let dependsOn = setting.dependsOn
-    if (dependsOn && !Array.isArray(dependsOn)) {
-      dependsOn = [dependsOn]
-    }
-    if (!dependsOn?.length) {
-      return true
-    }
-
-    // Ensure all conditions are met
-    return dependsOn.every(condition => {
-      let dependantSetting = condition
-      let dependantValues = null
-      let invert = !!condition.invert
-      if (typeof condition === "object") {
-        dependantSetting = condition.setting
-        dependantValues = condition.value
-      }
-      if (!dependantSetting) {
-        return false
-      }
-
-      // Ensure values is an array
-      if (!Array.isArray(dependantValues)) {
-        dependantValues = [dependantValues]
-      }
-
-      // If inverting, we want to ensure that we don't have any matches.
-      // If not inverting, we want to ensure that we do have any matches.
-      const currentVal = helpers.deepGet(instance, dependantSetting)
-      const anyMatches = dependantValues.some(dependantVal => {
-        if (dependantVal == null) {
-          return currentVal != null && currentVal !== false && currentVal !== ""
-        }
-        return dependantVal === currentVal
-      })
-      return anyMatches !== invert
-    })
-  }
-
   const canRenderControl = (instance, setting, isScreen, includeHidden) => {
     // Prevent rendering on click setting for screens
     if (setting?.type === "event" && isScreen) {
@@ -142,7 +102,7 @@
     if (setting.hidden && !includeHidden) {
       return false
     }
-    return shouldDisplay(instance, setting)
+    return shouldDisplaySetting(instance, setting)
   }
 </script>
 

packages/client/src/components/preview/SettingsBar.svelte

@@ -5,7 +5,7 @@
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
   import { builderStore, componentStore, dndIsDragging } from "stores"
-  import { Utils } from "@budibase/frontend-core"
+  import { Utils, shouldDisplaySetting } from "@budibase/frontend-core"
   import { findComponentParent } from "utils/components"
   import { getGridVar, GridParams } from "utils/grid"
 
@@ -39,7 +39,7 @@
       measured = false
     }
   }
-  $: settings = getBarSettings(definition)
+  $: settings = getBarSettings(component, definition)
   $: isRoot = componentId === $builderStore.screen?.props?._id
   $: insideGrid =
     parent?._component.endsWith("/container") && parent.layout === "grid"
@@ -51,16 +51,21 @@
   $: gridHAlignVar = getGridVar(device, GridParams.HAlign)
   $: gridVAlignVar = getGridVar(device, GridParams.VAlign)
 
-  const getBarSettings = definition => {
+  const getBarSettings = (component, definition) => {
     let allSettings = []
     definition?.settings?.forEach(setting => {
-      if (setting.section) {
+      if (setting.section && shouldDisplaySetting(component, setting)) {
         allSettings = allSettings.concat(setting.settings || [])
       } else {
         allSettings.push(setting)
       }
     })
-    return allSettings.filter(setting => setting.showInBar && !setting.hidden)
+    return allSettings.filter(
+      setting =>
+        setting.showInBar &&
+        !setting.hidden &&
+        shouldDisplaySetting(component, setting)
+    )
   }
 
   const updatePosition = () => {

packages/frontend-core/src/utils/index.js

@@ -9,3 +9,4 @@ export { memo, derivedMemo } from "./memo"
 export { createWebsocket } from "./websocket"
 export * from "./download"
 export * from "./theme"
+export * from "./settings"

packages/frontend-core/src/utils/settings.js

@@ -0,0 +1,43 @@
+import { helpers } from "@budibase/shared-core"
+
+// Util to check if a setting can be rendered for a certain instance, based on
+// the "dependsOn" metadata in the manifest
+export const shouldDisplaySetting = (instance, setting) => {
+  let dependsOn = setting.dependsOn
+  if (dependsOn && !Array.isArray(dependsOn)) {
+    dependsOn = [dependsOn]
+  }
+  if (!dependsOn?.length) {
+    return true
+  }
+
+  // Ensure all conditions are met
+  return dependsOn.every(condition => {
+    let dependantSetting = condition
+    let dependantValues = null
+    let invert = !!condition.invert
+    if (typeof condition === "object") {
+      dependantSetting = condition.setting
+      dependantValues = condition.value
+    }
+    if (!dependantSetting) {
+      return false
+    }
+
+    // Ensure values is an array
+    if (!Array.isArray(dependantValues)) {
+      dependantValues = [dependantValues]
+    }
+
+    // If inverting, we want to ensure that we don't have any matches.
+    // If not inverting, we want to ensure that we do have any matches.
+    const currentVal = helpers.deepGet(instance, dependantSetting)
+    const anyMatches = dependantValues.some(dependantVal => {
+      if (dependantVal == null) {
+        return currentVal != null && currentVal !== false && currentVal !== ""
+      }
+      return dependantVal === currentVal
+    })
+    return anyMatches !== invert
+  })
+}