Add new DetailScreenSelect component for selecting only detail screens and update detail linking in grids

packages/builder/src/components/userInterface/DetailScreenSelect.svelte

@@ -0,0 +1,49 @@
+<script>
+  import { DataList } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { store } from "builderStore"
+
+  const dispatch = createEventDispatcher()
+
+  export let value = ""
+
+  $: urls = getUrls()
+
+  const handleBlur = () => dispatch("change", value)
+
+  const getUrls = () => {
+    return [
+      ...$store.screens
+        .filter(
+          screen =>
+            screen.props._component.endsWith("/rowdetail") ||
+            screen.route.endsWith(":id")
+        )
+        .map(screen => ({
+          name: screen.props._instanceName,
+          url: screen.route,
+          sort: screen.props._component,
+        })),
+    ]
+  }
+</script>
+
+<div>
+  <DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
+    <option value="" />
+    {#each urls as url}
+      <option value={url.url}>{url.name}</option>
+    {/each}
+  </DataList>
+</div>
+
+<style>
+  div {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+  }
+  div :global(> div) {
+    flex: 1 1 auto;
+  }
+</style>

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -6,6 +6,7 @@ import TableViewSelect from "components/userInterface/TableViewSelect.svelte"
 import TableViewFieldSelect from "components/userInterface/TableViewFieldSelect.svelte"
 import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
 import ScreenSelect from "components/userInterface/ScreenSelect.svelte"
+import DetailScreenSelect from "components/userInterface/DetailScreenSelect.svelte"
 import { IconSelect } from "components/userInterface/IconSelect"
 import Colorpicker from "@budibase/colorpicker"
 
@@ -328,10 +329,9 @@ export default {
                 control: TableViewSelect,
               },
               {
-                label: "Table URL",
+                label: "Detail URL",
                 key: "detailUrl",
-                placeholder: "tableName",
-                control: ScreenSelect,
+                control: DetailScreenSelect,
               },
               {
                 label: "Editable",

packages/standard-components/src/DataGrid/Component.svelte

@@ -94,7 +94,7 @@
             sortable: false,
             cellRenderer: getRenderer({
               type: "_id",
-              options: detailUrl,
+              options: { detailUrl },
             }),
             autoHeight: true,
             pinned: "left",
@@ -179,15 +179,9 @@
 </div>
 
 <style>
-  .container :global(.ag-pinned-left-header) {
-    border-right-color: #dde2eb !important;
-  }
   .container :global(.ag-pinned-left-header .ag-header-cell-label) {
     justify-content: center;
   }
-  .container :global(.ag-cell-last-left-pinned) {
-    border-right-color: #dde2eb !important;
-  }
 
   .controls {
     min-height: 15px;

packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte

@@ -1,14 +1,11 @@
 <script>
-  import { createEventDispatcher } from "svelte"
-  import { Icon, Button } from "@budibase/bbui"
-  const dispatch = createEventDispatcher()
-
+  import { Button } from "@budibase/bbui"
   export let url
   let link
 </script>
 
 <a href={url} bind:this={link} />
-<Button small secondary on:click={() => link.click()}>View</Button>
+<Button small translucent on:click={() => link.click()}>View</Button>
 
 <style>
   a {

packages/standard-components/src/DataGrid/customRenderer.js

@@ -6,6 +6,7 @@ import ViewDetails from "./ViewDetails/Cell.svelte"
 import Select from "./Select/Wrapper.svelte"
 import DatePicker from "./DateTime/Wrapper.svelte"
 import RelationshipDisplay from "./Relationship/RelationshipDisplay.svelte"
+import { detailUrl } from "./Component.svelte"
 
 const renderers = new Map([
   ["boolean", booleanRenderer],
@@ -80,8 +81,7 @@ function dateRenderer(options, constraints, editable) {
     }
 
     // Options need to be passed in with minTime and maxTime! Needs bbui update.
-
-    const datePickerInstance = new DatePicker({
+    new DatePicker({
       target: container,
       props: {
         value: params.value,
@@ -144,11 +144,14 @@ function viewDetailsRenderer(options, constraints, editable) {
     container.style.alignItems = "center"
     container.style.height = "100%"
 
+    let url = "/"
+    if (options.detailUrl) {
+      url = options.detailUrl.replace(":id", params.data._id)
+    }
+
     new ViewDetails({
       target: container,
-      props: {
-        url: `${options}/${params.data._id}`,
-      },
+      props: { url },
     })
 
     return container