Add screen settings section, refactor more of component settings panel

packages/bbui/src/DetailSummary/DetailSummary.svelte

@@ -72,6 +72,6 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-m);
+    gap: var(--spacing-l);
   }
 </style>

packages/builder/src/components/design/PropertiesPanel/SettingsSection.svelte → packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte

@@ -1,8 +1,7 @@
 <script>
-  import { get } from "lodash"
   import { isEmpty } from "lodash/fp"
   import { Checkbox, Input, Select, DetailSummary } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { selectedComponent, store } from "builderStore"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
   import RoleSelect from "./PropertyControls/RoleSelect.svelte"
@@ -26,12 +25,11 @@
   import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte"
   import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte"
   import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte"
+  import { FrontendTypes } from "constants"
 
-  export let componentDefinition = {}
+  export let componentDefinition
-  export let componentInstance = {}
+  export let componentInstance
   export let assetInstance
-  export let onScreenPropChange = () => {}
-  export let showDisplayName = false
   export let openSection
 
   const layoutDefinition = []
@@ -90,33 +88,15 @@
   }
 </script>
 
-<DetailSummary
+<DetailSummary name="Component" on:open show={openSection === "settings"}>
-  name={componentDefinition.name}
+  <PropertyControl
-  on:open
+    bindable={false}
-  show={openSection === "settings"}
+    control={Input}
->
+    label="Name"
-  {#if assetInstance}
+    key="_instanceName"
-    {#each assetDefinition as def (`${componentInstance._id}-${def.key}`)}
+    value={componentInstance._instanceName}
-      <PropertyControl
+    onChange={val => updateProp("_instanceName", val)}
-        bindable={false}
+  />
-        control={def.control}
-        label={def.label}
-        key={def.key}
-        value={get(assetInstance, def.key)}
-        onChange={val => onScreenPropChange(def.key, val)}
-      />
-    {/each}
-  {/if}
-  {#if showDisplayName}
-    <PropertyControl
-      bindable={false}
-      control={Input}
-      label="Name"
-      key="_instanceName"
-      value={componentInstance._instanceName}
-      onChange={val => updateProp("_instanceName", val)}
-    />
-  {/if}
   {#if settings && settings.length > 0}
     {#each settings as setting (`${componentInstance._id}-${setting.key}`)}
       {#if canRenderControl(setting)}

packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte

@@ -1,13 +1,11 @@
 <script>
-  import { get } from "svelte/store"
   import { store, selectedComponent, currentAsset } from "builderStore"
   import { Tabs, Tab } from "@budibase/bbui"
-  import { FrontendTypes } from "constants"
+  import ScreenSettingsSection from "./ScreenSettingsSection.svelte"
-  import SettingsSection from "./SettingsSection.svelte"
+  import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
   import ActionsSection from "./ActionsSection.svelte"
-  import { setWith } from "lodash"
 
   let openSection = "settings"
 
@@ -15,37 +13,19 @@
   $: componentDefinition = store.actions.components.getDefinition(
     $selectedComponent?._component
   )
-  $: isComponentOrScreen =
-    $store.currentView === "component" ||
-    $store.currentFrontEndType === FrontendTypes.SCREEN
-  $: isNotScreenslot = !$selectedComponent._component.endsWith("screenslot")
-  $: showDisplayName = isComponentOrScreen && isNotScreenslot
-
-  function setAssetProps(name, value) {
-    const selectedAsset = get(currentAsset)
-    store.update(state => {
-      if (
-        name === "_instanceName" &&
-        state.currentFrontEndType === FrontendTypes.SCREEN
-      ) {
-        selectedAsset.props._instanceName = value
-      } else {
-        setWith(selectedAsset, name.split("."), value, Object)
-      }
-      return state
-    })
-    store.actions.preview.saveSelected()
-  }
 </script>
 
 <Tabs selected="Settings" noPadding>
   <Tab title="Settings">
-    <SettingsSection
+    <ScreenSettingsSection
+      {componentInstance}
+      {componentDefinition}
+      {openSection}
+      on:open={() => (openSection = "settings")}
+    />
+    <ComponentSettingsSection
       {componentInstance}
       {componentDefinition}
-      {showDisplayName}
-      onScreenPropChange={setAssetProps}
-      assetInstance={$store.currentView !== "component" && $currentAsset}
       {openSection}
       on:open={() => (openSection = "settings")}
     />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte

@@ -127,7 +127,6 @@
 
   .label {
     text-transform: capitalize;
-    padding-top: var(--spectrum-global-dimension-size-50);
     padding-bottom: var(--spectrum-global-dimension-size-65);
   }
 

packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte

@@ -0,0 +1,51 @@
+<script>
+  import { get } from "svelte/store"
+  import { get as deepGet, setWith } from "lodash"
+  import { Input, DetailSummary } from "@budibase/bbui"
+  import PropertyControl from "./PropertyControls/PropertyControl.svelte"
+  import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
+  import RoleSelect from "./PropertyControls/RoleSelect.svelte"
+  import { currentAsset, store } from "builderStore"
+  import { FrontendTypes } from "constants"
+
+  export let componentInstance
+  export let openSection
+
+  function setAssetProps(name, value) {
+    const selectedAsset = get(currentAsset)
+    store.update(state => {
+      if (
+        name === "_instanceName" &&
+        state.currentFrontEndType === FrontendTypes.SCREEN
+      ) {
+        selectedAsset.props._instanceName = value
+      } else {
+        setWith(selectedAsset, name.split("."), value, Object)
+      }
+      return state
+    })
+    store.actions.preview.saveSelected()
+  }
+
+  const screenSettings = [
+    { key: "description", label: "Description", control: Input },
+    { key: "routing.route", label: "Route", control: Input },
+    { key: "routing.roleId", label: "Access", control: RoleSelect },
+    { key: "layoutId", label: "Layout", control: LayoutSelect },
+  ]
+</script>
+
+{#if $currentAsset && $store.currentFrontEndType === FrontendTypes.SCREEN}
+  <DetailSummary name="Screen" on:open show={openSection === "screen"}>
+    {#each screenSettings as def (`${componentInstance._id}-${def.key}`)}
+      <PropertyControl
+        bindable={false}
+        control={def.control}
+        label={def.label}
+        key={def.key}
+        value={deepGet($currentAsset, def.key)}
+        onChange={val => setAssetProps(def.key, val)}
+      />
+    {/each}
+  </DetailSummary>
+{/if}

packages/standard-components/manifest.json

@@ -232,11 +232,6 @@
         "type": "event",
         "label": "On Click",
         "key": "onClick"
-      },
-      {
-        "type": "boolean",
-        "label": "Disabled",
-        "key": "disabled"
       }
     ]
   },