From 155a60160d224bb64d0c10dc96c7c57a8a18304a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 11 May 2022 13:09:21 +0100
Subject: [PATCH] Refactor design panels into core panel component and update
 usages

---
 packages/builder/src/components/design/Panel.svelte    | 10 +++++-----
 .../_components/navigation/ComponentListPanel.svelte   |  7 ++++---
 .../_components/settings/ComponentSettingsPanel.svelte |  6 +++---
 .../[screenId]/components/[componentId]/index.svelte   |  4 ++--
 .../new/_components/NewComponentPanel.svelte           |  7 ++++---
 .../new/_components/NewComponentTargetPanel.svelte     |  6 +++---
 .../[layoutId]/_components/LayoutListPanel.svelte      |  3 ---
 .../[layoutId]/_components/LayoutSettingsPanel.svelte  |  4 ++--
 .../design/[screenId]/layouts/[layoutId]/index.svelte  |  6 ++++--
 .../_components/NavigationSettingsPanel.svelte         |  6 +++---
 .../screens/_components/ScreenListPanel.svelte         |  7 ++++---
 .../screens/_components/ScreenSettingsPanel.svelte     |  7 ++++---
 .../design/[screenId]/screens/index.svelte             |  4 ++--
 .../theme/_components/ThemeSettingsPanel.svelte        |  6 +++---
 14 files changed, 43 insertions(+), 40 deletions(-)

diff --git a/packages/builder/src/components/design/Panel.svelte b/packages/builder/src/components/design/Panel.svelte
index 8dabbd40da..fba2cc22e4 100644
--- a/packages/builder/src/components/design/Panel.svelte
+++ b/packages/builder/src/components/design/Panel.svelte
@@ -14,7 +14,7 @@
   let wide = false
 </script>
 
-<div class="navigation-panel" class:wide class:borderLeft class:borderRight>
+<div class="panel" class:wide class:borderLeft class:borderRight>
   <div class="header">
     {#if showBackButton}
       <Icon name="ArrowLeft" hoverable on:click={onClickBackButton} />
@@ -44,7 +44,7 @@
 </div>
 
 <style>
-  .navigation-panel {
+  .panel {
     width: 280px;
     background: var(--background);
     display: flex;
@@ -53,13 +53,13 @@
     align-items: stretch;
     transition: width 130ms ease-out;
   }
-  .navigation-panel.border-left {
+  .panel.borderLeft {
     border-left: var(--border-light);
   }
-  .navigation-panel.border-right {
+  .panel.borderRight {
     border-right: var(--border-light);
   }
-  .navigation-panel.wide {
+  .panel.wide {
     width: 420px;
   }
   .header {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
index 668e204e0d..a5e5e8fb12 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import ComponentTree from "./ComponentTree.svelte"
   import instantiateStore from "./dragDropStore.js"
   import { goto } from "@roxi/routify"
@@ -60,11 +60,12 @@
   })
 </script>
 
-<NavigationPanel
+<Panel
   title="Components"
   showAddButton
   onClickAddButton={() => $goto("../new")}
   showExpandIcon
+  borderRight
 >
   <div class="nav-items-container" bind:this={scrollRef}>
     <NavItem
@@ -87,7 +88,7 @@
       {dragDropStore}
     />
   </div>
-</NavigationPanel>
+</Panel>
 
 <style>
   .nav-items-container {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
index 60ddf44be6..ff0c53e7ab 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import { store, selectedComponent, selectedScreen } from "builderStore"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
   import DesignSection from "./DesignSection.svelte"
@@ -27,7 +27,7 @@
 </script>
 
 {#if $selectedComponent}
-  <SettingsPanel {title} icon={componentDefinition.icon}>
+  <Panel {title} icon={componentDefinition.icon} borderLeft>
     <ComponentSettingsSection
       {componentInstance}
       {componentDefinition}
@@ -42,5 +42,5 @@
       {componentDefinition}
       {bindings}
     />
-  </SettingsPanel>
+  </Panel>
 {/if}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte
index c5ddc8cbb7..a8e1e3e630 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte
@@ -1,7 +1,7 @@
 <script>
-  import ComponentNavigationPanel from "./_components/navigation/ComponentNavigationPanel.svelte"
+  import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
   import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
 </script>
 
-<ComponentNavigationPanel />
+<ComponentListPanel />
 <ComponentSettingsPanel />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte
index a53ce2fabc..39ee1cb44a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import { goto } from "@roxi/routify"
   import {
     Layout,
@@ -152,10 +152,11 @@
   })
 </script>
 
-<NavigationPanel
+<Panel
   title="Add component"
   showBackButton
   onClickBackButton={() => $goto("../slot")}
+  borderRight
 >
   <Layout paddingX="L" paddingY="XL" gap="S">
     <ActionGroup compact justified>
@@ -218,7 +219,7 @@
       </Layout>
     </Layout>
   {/if}
-</NavigationPanel>
+</Panel>
 
 <style>
   .component-grid {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentTargetPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentTargetPanel.svelte
index 18c6ddd485..af44934526 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentTargetPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentTargetPanel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import { Body, Layout } from "@budibase/bbui"
   import { selectedComponent, selectedScreen, store } from "builderStore"
 
@@ -11,11 +11,11 @@
   $: position = componentDefinition?.hasChildren ? "inside" : "below"
 </script>
 
-<SettingsPanel {title} icon={componentDefinition?.icon}>
+<Panel {title} icon={componentDefinition?.icon} borderLeft>
   <Layout paddingX="L" paddingY="XL">
     <Body size="S">
       Components that you add will be placed {position}
       {title}
     </Body>
   </Layout>
-</SettingsPanel>
+</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
index 6dbc728ca5..ce504843f9 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
@@ -29,6 +29,3 @@
     </NavItem>
   {/each}
 </Panel>
-
-<!--      -->
-<!--      color={RoleUtils.getRoleColour(screen.routing.roleId)}-->
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
index 1887d83c48..10372378bf 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
 </script>
 
-<
\ No newline at end of file
+<Panel title="Layout" borderLeft />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte
index 35b4c85684..4d39403bc3 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte
@@ -1,5 +1,7 @@
 <script>
-  import LayoutNavigationPanel from "./_components/LayoutNavigationPanel.svelte"
+  import LayoutListPanel from "./_components/LayoutListPanel.svelte"
+  import LayoutSettingsPanel from "./_components/LayoutSettingsPanel.svelte"
 </script>
 
-<LayoutNavigationPanel />
+<LayoutListPanel />
+<LayoutSettingsPanel />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
index 85b038397e..20e1a44553 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import {
     Body,
     Layout,
@@ -27,7 +27,7 @@
   }
 </script>
 
-<NavigationPanel title="Navigation">
+<Panel title="Navigation" borderRight>
   <Layout paddingX="L" paddingY="XL" gap="S">
     <Body size="S">
       Your navigation is configured for all the screens within your app
@@ -115,4 +115,4 @@
       />
     </Layout>
   </Layout>
-</NavigationPanel>
+</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
index 1a4018899d..feb2f754ff 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Search, Layout, Select, Body } from "@budibase/bbui"
-  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import { roles } from "stores/backend"
   import { store, sortedScreens } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
@@ -28,10 +28,11 @@
   }
 </script>
 
-<NavigationPanel
+<Panel
   title="Screens"
   showAddButton
   onClickAddButton={showNewScreenModal}
+  borderRight
 >
   <Layout paddingX="L" paddingY="XL" gap="S">
     <Search
@@ -66,6 +67,6 @@
       </Body>
     </Layout>
   {/if}
-</NavigationPanel>
+</Panel>
 
 <ScreenWizard bind:showModal={showNewScreenModal} />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
index c5c14ad402..b33f3609ba 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import { get } from "svelte/store"
   import { get as deepGet, setWith } from "lodash"
   import {
@@ -164,9 +164,10 @@
   }
 </script>
 
-<SettingsPanel
+<Panel
   title={$selectedScreen?.routing.route}
   icon={$selectedScreen.routing.route === "/" ? "Home" : "WebPage"}
+  borderLeft
 >
   <Layout gap="S" paddingX="L" paddingY="XL">
     {#if $selectedScreen.layoutId}
@@ -191,4 +192,4 @@
     {/each}
     <Button cta on:click={() => $goto("../components")}>View components</Button>
   </Layout>
-</SettingsPanel>
+</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
index d0d14bd816..21020cc097 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
@@ -1,7 +1,7 @@
 <script>
-  import ScreenNavigationPanel from "./_components/ScreenNavigationPanel.svelte"
+  import ScreenListPanel from "./_components/ScreenListPanel.svelte"
   import ScreenSettingsPanel from "./_components/ScreenSettingsPanel.svelte"
 </script>
 
-<ScreenNavigationPanel />
+<ScreenListPanel />
 <ScreenSettingsPanel />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
index 349578e0a4..d2c9574008 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import {
     Body,
     Layout,
@@ -46,7 +46,7 @@
   }
 </script>
 
-<NavigationPanel title="Theme">
+<Panel title="Theme" borderRight>
   <Layout paddingX="L" paddingY="XL" gap="S">
     <Body size="S">
       Your theme is set across all the screens within your app
@@ -91,7 +91,7 @@
       />
     </Layout>
   </Layout>
-</NavigationPanel>
+</Panel>
 
 <style>
   .buttons {