From ab56301aced70945b4861ce2c4fdab4662ae45d5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 22 Jun 2021 09:36:50 +0100
Subject: [PATCH] Add screen settings section, refactor more of component
 settings panel

---
 .../src/DetailSummary/DetailSummary.svelte    |  2 +-
 ...svelte => ComponentSettingsSection.svelte} | 46 +++++------------
 .../PropertiesPanel/PropertiesPanel.svelte    | 38 ++++----------
 .../PropertyControls/PropertyControl.svelte   |  1 -
 .../ScreenSettingsSection.svelte              | 51 +++++++++++++++++++
 packages/standard-components/manifest.json    |  5 --
 6 files changed, 74 insertions(+), 69 deletions(-)
 rename packages/builder/src/components/design/PropertiesPanel/{SettingsSection.svelte => ComponentSettingsSection.svelte} (83%)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte

diff --git a/packages/bbui/src/DetailSummary/DetailSummary.svelte b/packages/bbui/src/DetailSummary/DetailSummary.svelte
index f20ccc56ae..a3772cee38 100644
--- a/packages/bbui/src/DetailSummary/DetailSummary.svelte
+++ b/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>
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
similarity index 83%
rename from packages/builder/src/components/design/PropertiesPanel/SettingsSection.svelte
rename to packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
index 7a5d8becd1..b0f4257a8e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsSection.svelte
+++ b/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 componentInstance = {}
+  export let componentDefinition
+  export let componentInstance
   export let assetInstance
-  export let onScreenPropChange = () => {}
-  export let showDisplayName = false
   export let openSection
 
   const layoutDefinition = []
@@ -90,33 +88,15 @@
   }
 </script>
 
-<DetailSummary
-  name={componentDefinition.name}
-  on:open
-  show={openSection === "settings"}
->
-  {#if assetInstance}
-    {#each assetDefinition as def (`${componentInstance._id}-${def.key}`)}
-      <PropertyControl
-        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}
+<DetailSummary name="Component" on:open show={openSection === "settings"}>
+  <PropertyControl
+    bindable={false}
+    control={Input}
+    label="Name"
+    key="_instanceName"
+    value={componentInstance._instanceName}
+    onChange={val => updateProp("_instanceName", val)}
+  />
   {#if settings && settings.length > 0}
     {#each settings as setting (`${componentInstance._id}-${setting.key}`)}
       {#if canRenderControl(setting)}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
index 34762d552d..2e350ce7bc 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/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 SettingsSection from "./SettingsSection.svelte"
+  import ScreenSettingsSection from "./ScreenSettingsSection.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")}
     />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index ac23e819d5..0ee5646bc4 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/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);
   }
 
diff --git a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
new file mode 100644
index 0000000000..32b5b03c6c
--- /dev/null
+++ b/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}
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 1f10f3ed96..450a0d823c 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -232,11 +232,6 @@
         "type": "event",
         "label": "On Click",
         "key": "onClick"
-      },
-      {
-        "type": "boolean",
-        "label": "Disabled",
-        "key": "disabled"
       }
     ]
   },