From bff36f499a79cf0262f4c7f0f94cd11bafe60ac4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 26 Apr 2022 14:26:55 +0100
Subject: [PATCH] Update view components button in screen section to function

---
 .../settings/ComponentSettingsPanel.svelte    | 34 +++++++++++--------
 .../_components/ScreenSettingsPanel.svelte    |  3 +-
 2 files changed, 22 insertions(+), 15 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 baaae7b08c..f1fc0d5a3b 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
@@ -21,17 +21,23 @@
   )
 </script>
 
-<SettingsPanel
-  title={$selectedComponent._instanceName}
-  icon={componentDefinition.icon}
->
-  <ComponentSettingsSection
-    {componentInstance}
-    {componentDefinition}
-    {bindings}
-    {componentBindings}
-  />
-  <DesignSection {componentInstance} {componentDefinition} {bindings} />
-  <CustomStylesSection {componentInstance} {componentDefinition} {bindings} />
-  <ConditionalUISection {componentInstance} {componentDefinition} {bindings} />
-</SettingsPanel>
+{#if $selectedComponent}
+  <SettingsPanel
+    title={$selectedComponent._instanceName}
+    icon={componentDefinition.icon}
+  >
+    <ComponentSettingsSection
+      {componentInstance}
+      {componentDefinition}
+      {bindings}
+      {componentBindings}
+    />
+    <DesignSection {componentInstance} {componentDefinition} {bindings} />
+    <CustomStylesSection {componentInstance} {componentDefinition} {bindings} />
+    <ConditionalUISection
+      {componentInstance}
+      {componentDefinition}
+      {bindings}
+    />
+  </SettingsPanel>
+{/if}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte
index 8bbf35fbdc..6b1d05bc2e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte
@@ -14,6 +14,7 @@
   import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
   import { selectedScreen, store } from "builderStore"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
+  import { goto } from "@roxi/routify"
 
   let errors = {}
 
@@ -138,6 +139,6 @@
         props={{ ...setting.props, error: errors[setting.key] }}
       />
     {/each}
-    <Button cta>View components</Button>
+    <Button cta on:click={() => $goto("../components")}>View components</Button>
   </Layout>
 </SettingsPanel>