From 275f0ca0926a7468525d9713a458e1b4b7bf0f72 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 19 Jan 2021 10:47:00 +0000
Subject: [PATCH] Add navigation bar, links and row detail definitions

---
 .../builder/src/builderStore/dataBinding.js   |  1 +
 .../design/AppPreview/componentStructure.json |  4 +-
 .../PropertyControls/ScreenSelect.svelte      | 92 ++++++++-----------
 .../PropertiesPanel/SettingsView.svelte       |  1 +
 .../design/temporaryPanelStructure.js         | 44 ---------
 packages/standard-components/components.json  | 29 ------
 packages/standard-components/manifest.json    | 52 +++++++++++
 packages/standard-components/src/index.js     |  6 +-
 8 files changed, 99 insertions(+), 130 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 296d657656..5b3e24211c 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -53,6 +53,7 @@ export const getBindableContexts = (rootComponent, componentId) => {
         readableBinding: `${provider._instanceName}.${table.name}.${key}`,
         fieldSchema,
         providerId: provider._id,
+        tableId: provider.datasource.tableId,
       })
     })
   })
diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index 2fc80f6829..1359b20ce0 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -22,11 +22,13 @@
   },
   "button",
   "text",
+  "link",
   {
     "name": "Other",
     "icon": "ri-file-edit-line",
     "children": [
-      "screenslot"
+      "screenslot",
+      "navigation"
     ]
   }
 ]
\ No newline at end of file
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ScreenSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ScreenSelect.svelte
index 9a3e555740..993e49faa6 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ScreenSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ScreenSelect.svelte
@@ -1,67 +1,53 @@
 <script>
   import { DataList } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { store, allScreens, backendUiStore, currentAsset } from "builderStore"
-  import fetchBindableProperties from "builderStore/fetchBindableProperties"
-
-  const dispatch = createEventDispatcher()
+  import { store, allScreens, currentAsset } from "builderStore"
+  import { getBindableProperties } from "builderStore/dataBinding"
 
   export let value = ""
 
-  $: urls = getUrls()
+  $: urls = getUrls($allScreens, $currentAsset, $store.selectedComponentId)
 
+  // Update value on blur
+  const dispatch = createEventDispatcher()
   const handleBlur = () => dispatch("change", value)
 
-  // this will get urls of all screens, but only
-  // choose detail screens that are usable in the current context
-  // and substitute the :id param for the actual {{ ._id }} binding
-  const getUrls = () => {
-    const urls = [
-      ...$allScreens
-        .filter(screen => !screen.props._component.endsWith("/rowdetail"))
-        .map(screen => ({
-          name: screen.props._instanceName,
-          url: screen.routing.route,
-          sort: screen.props._component,
-        })),
-    ]
+  // Get all valid screen URL, as well as detail screens which can be used in
+  // the current data context
+  const getUrls = (screens, asset, componentId) => {
+    // Get all screens which aren't detail screens
+    let urls = screens
+      .filter(screen => !screen.props._component.endsWith("/rowdetail"))
+      .map(screen => ({
+        name: screen.props._instanceName,
+        url: screen.routing.route,
+        sort: screen.props._component,
+      }))
 
-    const bindableProperties = fetchBindableProperties({
-      componentInstanceId: $store.selectedComponentId,
-      components: $store.components,
-      screen: $currentAsset,
-      tables: $backendUiStore.tables,
-    })
-
-    const detailScreens = $allScreens.filter(screen =>
-      screen.props._component.endsWith("/rowdetail")
-    )
-
-    for (let detailScreen of detailScreens) {
-      const idBinding = bindableProperties.find(p => {
-        if (
-          p.type === "context" &&
-          p.runtimeBinding.endsWith("._id") &&
-          p.table
-        ) {
-          const tableId =
-            typeof p.table === "string" ? p.table : p.table.tableId
-          return tableId === detailScreen.props.table
-        }
-        return false
-      })
-
-      if (idBinding) {
-        urls.push({
-          name: detailScreen.props._instanceName,
-          url: detailScreen.routing.route.replace(
-            ":id",
-            `{{ ${idBinding.runtimeBinding} }}`
-          ),
-          sort: detailScreen.props._component,
+    // Add detail screens enriched with the current data context
+    const bindableProperties = getBindableProperties(asset.props, componentId)
+    screens
+      .filter(screen => screen.props._component.endsWith("/rowdetail"))
+      .forEach(detailScreen => {
+        // Find any _id bindings that match the detail screen's table
+        const binding = bindableProperties.find(p => {
+          return (
+            p.type === "context" &&
+            p.runtimeBinding.endsWith("._id") &&
+            p.tableId === detailScreen.props.table
+          )
         })
-      }
-    }
+        if (binding) {
+          urls.push({
+            name: detailScreen.props._instanceName,
+            url: detailScreen.routing.route.replace(
+              ":id",
+              `{{ ${binding.runtimeBinding} }}`
+            ),
+            sort: detailScreen.props._component,
+          })
+        }
+      })
 
     return urls
   }
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index bfb3c121c7..0939876270 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -53,6 +53,7 @@
     boolean: Checkbox,
     number: Input,
     event: EventsEditor,
+    table: TableSelect,
   }
   const getControl = type => {
     return controlMap[type]
diff --git a/packages/builder/src/components/design/temporaryPanelStructure.js b/packages/builder/src/components/design/temporaryPanelStructure.js
index cd0d3d8fe9..5f4b433ee1 100644
--- a/packages/builder/src/components/design/temporaryPanelStructure.js
+++ b/packages/builder/src/components/design/temporaryPanelStructure.js
@@ -754,26 +754,6 @@ export default {
             settings: [{ label: "URL", key: "url", control: Input }],
           },
         },
-        {
-          _component: "@budibase/standard-components/link",
-          name: "Link",
-          description: "A basic link component for internal and external links",
-          icon: "ri-link",
-          children: [],
-          properties: {
-            design: { ...all },
-            settings: [
-              { label: "Text", key: "text", control: Input },
-              { label: "Url", key: "url", control: ScreenSelect },
-              {
-                label: "New Tab",
-                key: "openInNewTab",
-                valueKey: "checked",
-                control: Checkbox,
-              },
-            ],
-          },
-        },
         {
           _component: "@budibase/standard-components/icon",
           name: "Icon",
@@ -838,30 +818,6 @@ export default {
           commonProps: {},
           children: [],
         },
-        {
-          name: "Nav Bar",
-          _component: "@budibase/standard-components/navigation",
-          description:
-            "A component for handling the navigation within your app.",
-          icon: "ri-navigation-line",
-          children: [],
-          properties: {
-            design: { ...all },
-            settings: [{ label: "Logo URL", key: "logoUrl", control: Input }],
-          },
-        },
-        {
-          name: "Row Detail",
-          _component: "@budibase/standard-components/rowdetail",
-          description:
-            "Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
-          icon: "ri-profile-line",
-          properties: {
-            design: { ...all },
-            settings: [{ label: "Table", key: "table", control: TableSelect }],
-          },
-          children: [],
-        },
         {
           name: "New Row",
           _component: "@budibase/standard-components/newrow",
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 909789122a..4e45cb3e15 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -13,14 +13,6 @@
 			"embed": "string"
 		}
 	},
-	"navigation": {
-		"name": "Navigation",
-		"description": "A basic header navigation component",
-		"children": true,
-		"props": {
-			"logoUrl": "string"
-		}
-	},
 	"richtext": {
 		"name": "Rich Text",
 		"description": "A component that allows the user to enter long form text.",
@@ -43,18 +35,6 @@
 		}
 	},
 
-
-	"rowdetail": {
-		"name": "Row Detail",
-		"description": "Loads a row, using an ID in the url",
-		"context": "table",
-		"children": true,
-		"data": true,
-		"baseComponent": true,
-		"props": {
-			"table": "tables"
-		}
-	},
 	"newrow": {
 		"name": "New Row",
 		"description": "Prepares a new row for creation",
@@ -411,15 +391,6 @@
 			"placeholder": "string"
 		}
 	},
-	"link": {
-		"name": "Link",
-		"description": "an HTML anchor <a> tag",
-		"props": {
-			"url": "string",
-			"openInNewTab": "bool",
-			"text": "string"
-		}
-	},
 	"image": {
 		"description": "an HTML <img> tag",
 		"props": {
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 07cfc314a1..87c46dd3cb 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -291,5 +291,57 @@
         "key": "buttonText"
       }
     ]
+  },
+  "navigation": {
+    "name": "Nav Bar",
+    "description": "A component for handling the navigation within your app.",
+    "icon": "ri-navigation-line",
+    "styleable": true,
+    "hasChildren": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Logo URL",
+        "key": "logoUrl"
+      }
+    ]
+  },
+  "link": {
+    "name": "Link",
+    "description": "A basic link component for internal and external links",
+    "icon": "ri-link",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Text",
+        "key": "text"
+      },
+      {
+        "type": "screen",
+        "label": "URL",
+        "key": "url"
+      },
+      {
+        "type": "boolean",
+        "label": "New Tab",
+        "key": "openInNewTab"
+      }
+    ]
+  },
+  "rowdetail": {
+    "name": "Row Detail",
+    "description": "Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
+    "icon": "ri-profile-line",
+    "styleable": true,
+    "hasChildren": true,
+    "dataProvider": true,
+    "settings": [
+      {
+        "type": "table",
+        "label": "Table",
+        "key": "table"
+      }
+    ]
   }
 }
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index 2a10a8a285..f85f0ae306 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -18,15 +18,15 @@ export { default as form } from "./DataFormWide.svelte"
 export { default as datepicker } from "./DatePicker.svelte"
 export { default as text } from "./Text.svelte"
 export { default as login } from "./Login.svelte"
+export { default as navigation } from "./Navigation.svelte"
+export { default as link } from "./Link.svelte"
+export { default as rowdetail } from "./RowDetail.svelte"
 
 // export { default as heading } from "./Heading.svelte"
-// export { default as link } from "./Link.svelte"
 // export { default as image } from "./Image.svelte"
-// export { default as navigation } from "./Navigation.svelte"
 // export { default as embed } from "./Embed.svelte"
 // export { default as cardhorizontal } from "./CardHorizontal.svelte"
 // export { default as cardstat } from "./CardStat.svelte"
-// export { default as rowdetail } from "./RowDetail.svelte"
 // export { default as newrow } from "./NewRow.svelte"
 // export { default as icon } from "./Icon.svelte"
 // export * from "./charts"