Add navigation bar, links and row detail definitions

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,
       })
     })
   })

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"
     ]
   }
 ]

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
   }

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]

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",

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": {

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"
+      }
+    ]
   }
 }

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"