From 1f6c6dd1a04d71e2f0eaf8f548dfe24c5a25e7f7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 26 Apr 2022 14:40:29 +0100
Subject: [PATCH] Update title in component settings panel and fix issue when
 components are not selected

---
 .../settings/ComponentSettingsPanel.svelte    | 19 +++++++++++--------
 .../settings/ComponentSettingsSection.svelte  |  3 ++-
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/settings/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/settings/ComponentSettingsPanel.svelte
index f1fc0d5a3b..60ddf44be6 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/settings/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/settings/ComponentSettingsPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
-  import { store, selectedComponent, currentAsset } from "builderStore"
+  import { store, selectedComponent, selectedScreen } from "builderStore"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
@@ -14,23 +14,26 @@
   $: componentDefinition = store.actions.components.getDefinition(
     $selectedComponent?._component
   )
-  $: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
-  $: componentBindings = getComponentBindableProperties(
-    $currentAsset,
+  $: bindings = getBindableProperties(
+    $selectedScreen,
     $store.selectedComponentId
   )
+  $: componentBindings = getComponentBindableProperties(
+    $selectedScreen,
+    $store.selectedComponentId
+  )
+  $: isScreen = $selectedComponent?._id === $selectedScreen?.props._id
+  $: title = isScreen ? "Screen" : $selectedComponent?._instanceName
 </script>
 
 {#if $selectedComponent}
-  <SettingsPanel
-    title={$selectedComponent._instanceName}
-    icon={componentDefinition.icon}
-  >
+  <SettingsPanel {title} icon={componentDefinition.icon}>
     <ComponentSettingsSection
       {componentInstance}
       {componentDefinition}
       {bindings}
       {componentBindings}
+      {isScreen}
     />
     <DesignSection {componentInstance} {componentDefinition} {bindings} />
     <CustomStylesSection {componentInstance} {componentDefinition} {bindings} />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/settings/ComponentSettingsSection.svelte
index d1ba42a656..2e04401b0a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/settings/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/settings/ComponentSettingsSection.svelte
@@ -14,6 +14,7 @@
   export let assetInstance
   export let bindings
   export let componentBindings
+  export let isScreen = false
 
   const layoutDefinition = []
   const screenDefinition = [
@@ -90,7 +91,7 @@
 
 {#each sections as section, idx (section.name)}
   <DetailSummary name={section.name} collapsible={false}>
-    {#if idx === 0 && !componentInstance._component.endsWith("/layout")}
+    {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen}
       <PropertyControl
         control={Input}
         label="Name"