From 273695443856b06e44f1ffcf763ceee486432bef Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 27 Apr 2022 17:50:01 +0100
Subject: [PATCH] Add link settings to new navigation tab

---
 packages/bbui/src/Drawer/Drawer.svelte        | 11 ++++--
 .../src/builderStore/store/frontend.js        | 14 ++++++++
 .../design/settings/componentSettings.js      |  2 --
 .../NavigationEditor/NavigationEditor.svelte  | 25 --------------
 .../_components}/NavigationDrawer.svelte      |  0
 .../_components/NavigationEditor.svelte       | 34 +++++++++++++++++++
 .../design/navigation/index.svelte            | 15 +++++++-
 packages/client/src/stores/screens.js         |  2 +-
 8 files changed, 71 insertions(+), 32 deletions(-)
 delete mode 100644 packages/builder/src/components/design/settings/controls/NavigationEditor/NavigationEditor.svelte
 rename packages/builder/src/{components/design/settings/controls/NavigationEditor => pages/builder/app/[application]/design/navigation/_components}/NavigationDrawer.svelte (100%)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/navigation/_components/NavigationEditor.svelte

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index e5eacb1a44..fe0c76af51 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -6,6 +6,8 @@
 
   export let title
   export let fillWidth
+  export let left = "334px"
+  export let width = "calc(100% - 616px)"
 
   let visible = false
 
@@ -42,7 +44,12 @@
 
 {#if visible}
   <Portal>
-    <section class:fillWidth class="drawer" transition:slide|local>
+    <section
+      class:fillWidth
+      class="drawer"
+      transition:slide|local
+      style={`width: ${width}; left: ${left};`}
+    >
       <header>
         <div class="text">
           <Heading size="XS">{title}</Heading>
@@ -69,8 +76,6 @@
   .drawer {
     position: absolute;
     bottom: 0;
-    left: 260px;
-    width: calc(100% - 520px);
     background: var(--background);
     border-top: var(--border-light);
     z-index: 2;
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 2b47a43c0b..b7bf4bfd92 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -101,6 +101,7 @@ export const getFrontendStore = () => {
         previousTopNavPath: {},
         version: application.version,
         revertableVersion: application.revertableVersion,
+        navigation: application.navigation || {},
       }))
 
       // Initialise backend stores
@@ -136,6 +137,19 @@ export const getFrontendStore = () => {
         })
       },
     },
+    navigation: {
+      save: async navigation => {
+        const appId = get(store).appId
+        await API.saveAppMetadata({
+          appId,
+          metadata: { navigation },
+        })
+        store.update(state => {
+          state.navigation = navigation
+          return state
+        })
+      },
+    },
     routing: {
       fetch: async () => {
         const response = await API.fetchAppRoutes()
diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index b6d24ee893..7f504c4ea8 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -11,7 +11,6 @@ import MultiFieldSelect from "./controls/MultiFieldSelect.svelte"
 import SearchFieldSelect from "./controls/SearchFieldSelect.svelte"
 import SchemaSelect from "./controls/SchemaSelect.svelte"
 import SectionSelect from "./controls/SectionSelect.svelte"
-import NavigationEditor from "./controls/NavigationEditor/NavigationEditor.svelte"
 import FilterEditor from "./controls/FilterEditor/FilterEditor.svelte"
 import URLSelect from "./controls/URLSelect.svelte"
 import OptionsEditor from "./controls/OptionsEditor/OptionsEditor.svelte"
@@ -38,7 +37,6 @@ const componentMap = {
   options: OptionsEditor,
   schema: SchemaSelect,
   section: SectionSelect,
-  navigation: NavigationEditor,
   filter: FilterEditor,
   url: URLSelect,
   columns: ColumnEditor,
diff --git a/packages/builder/src/components/design/settings/controls/NavigationEditor/NavigationEditor.svelte b/packages/builder/src/components/design/settings/controls/NavigationEditor/NavigationEditor.svelte
deleted file mode 100644
index 33a82d1886..0000000000
--- a/packages/builder/src/components/design/settings/controls/NavigationEditor/NavigationEditor.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-  import { Button, ActionButton, Drawer } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import NavigationDrawer from "./NavigationDrawer.svelte"
-  import { cloneDeep } from "lodash/fp"
-
-  export let value = []
-  let drawer
-  let links = cloneDeep(value || [])
-
-  const dispatch = createEventDispatcher()
-  const save = () => {
-    dispatch("change", links)
-    drawer.hide()
-  }
-</script>
-
-<ActionButton on:click={drawer.show}>Configure links</ActionButton>
-<Drawer bind:this={drawer} title={"Navigation Links"}>
-  <svelte:fragment slot="description">
-    Configure the links in your navigation bar.
-  </svelte:fragment>
-  <Button cta slot="buttons" on:click={save}>Save</Button>
-  <NavigationDrawer slot="body" bind:links />
-</Drawer>
diff --git a/packages/builder/src/components/design/settings/controls/NavigationEditor/NavigationDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/navigation/_components/NavigationDrawer.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/NavigationEditor/NavigationDrawer.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/navigation/_components/NavigationDrawer.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/navigation/_components/NavigationEditor.svelte b/packages/builder/src/pages/builder/app/[application]/design/navigation/_components/NavigationEditor.svelte
new file mode 100644
index 0000000000..c17a58f9e9
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/navigation/_components/NavigationEditor.svelte
@@ -0,0 +1,34 @@
+<script>
+  import { Button, Drawer } from "@budibase/bbui"
+  import NavigationDrawer from "./NavigationDrawer.svelte"
+  import { cloneDeep } from "lodash/fp"
+  import { store } from "builderStore"
+
+  let drawer
+  let links
+
+  const openDrawer = () => {
+    links = cloneDeep($store.navigation.links || [])
+    drawer.show()
+  }
+
+  const save = async () => {
+    let navigation = $store.navigation
+    navigation.links = links
+    await store.actions.navigation.save(navigation)
+    drawer.hide()
+  }
+</script>
+
+<Button cta on:click={openDrawer}>Configure links</Button>
+<Drawer
+  bind:this={drawer}
+  title={"Navigation Links"}
+  width="calc(100% - 334px)"
+>
+  <svelte:fragment slot="description">
+    Configure the links in your navigation bar.
+  </svelte:fragment>
+  <Button cta slot="buttons" on:click={save}>Save</Button>
+  <NavigationDrawer slot="body" bind:links />
+</Drawer>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/navigation/index.svelte
index 04b030b2cb..7dd5476cb6 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/navigation/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/navigation/index.svelte
@@ -1,5 +1,18 @@
 <script>
   import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
+  import { Body, Layout } from "@budibase/bbui"
+  import NavigationEditor from "./_components/NavigationEditor.svelte"
 </script>
 
-<NavigationPanel title="Navigation" />
+<NavigationPanel title="Navigation">
+  <Layout paddingX="L" paddingY="XL" gap="S">
+    <Body size="S">
+      Your navigation is configured for all the screens within your app
+    </Body>
+    <Body size="S">
+      You can hide and show your navigation for each screen in the screen
+      settings
+    </Body>
+    <NavigationEditor />
+  </Layout>
+</NavigationPanel>
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 03d536e0e2..a229f0be2f 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -51,7 +51,7 @@ const createScreenStore = () => {
           navigation: "None",
         }
         if (activeScreen.showNavigation) {
-          navigationProps = activeScreen.navigation
+          navigationProps = $appStore.application?.navigation
 
           // Legacy - if this is a legacy screen without any navigation
           // settings fall back to just showing the app title