started on opinionated relationships

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/CreateEditRelationship.svelte

@@ -0,0 +1,79 @@
+<script>
+   import { Button, ModalContent, RadioGroup, Heading } from "@budibase/bbui"
+
+  const STEPS = 3
+
+  export let save
+
+  let relationship = {}
+  let step = 0
+
+  function nextStep() {
+    if (step + 1 === STEPS) return
+    step = step + 1
+  }
+
+  function previousStep() {
+    if (step === 0) return
+    step = step - 1
+  }
+
+  function saveRelationship() {
+    // save the relationship on to the datasource
+    // save()
+  }
+
+  function getRelationshipOptions(field) {
+    if (!field || !field.tableId) {
+      return null
+    }
+    const linkTable = tableOptions.find(table => table._id === field.tableId)
+    if (!linkTable) {
+      return null
+    }
+    const thisName = truncate(table.name, { length: 14 }),
+      linkName = truncate(linkTable.name, { length: 14 })
+    return [
+      {
+        name: `Many ${thisName} rows → many ${linkName} rows`,
+        alt: `Many ${table.name} rows → many ${linkTable.name} rows`,
+        value: RelationshipTypes.MANY_TO_MANY,
+      },
+      {
+        name: `One ${linkName} row → many ${thisName} rows`,
+        alt: `One ${linkTable.name} rows → many ${table.name} rows`,
+        value: RelationshipTypes.ONE_TO_MANY,
+      },
+      {
+        name: `One ${thisName} row → many ${linkName} rows`,
+        alt: `One ${table.name} rows → many ${linkTable.name} rows`,
+        value: RelationshipTypes.MANY_TO_ONE,
+      },
+    ]
+  }
+</script>
+
+<ModalContent
+  size="XL"
+  title="Edit Code"
+  showConfirmButton={false}
+  showCancelButton={false}
+>
+  {#if step === 0}
+    <Heading>Select your table</Heading>
+  {:else if step === 1}
+      <!-- <RadioGroup
+        disabled={linkEditDisabled}
+        label="Define the relationship"
+        bind:value={relationship}
+        options={relationshipOptions}
+        getOptionLabel={option => option.name}
+        getOptionValue={option => option.value}
+      /> -->
+      Step 2
+  {:else if step === 2}
+    Step 3
+  {/if}
+  <Button on:click={previousStep}>Previous</Button>
+  <Button on:click={nextStep}>Next</Button>
+</ModalContent>

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte

@@ -1,16 +1,19 @@
 <script>
   import { goto, beforeUrlChange } from "@roxi/routify"
-  import { Button, Heading, Body, Divider, Layout } from "@budibase/bbui"
+  import { Button, Heading, Body, Divider, Layout, Modal } from "@budibase/bbui"
   import { datasources, integrations, queries, tables } from "stores/backend"
   import { notifications } from "@budibase/bbui"
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
+  import CreateEditRelationship from "./CreateEditRelationship.svelte"
   import ICONS from "components/backend/DatasourceNavigator/icons"
   import { capitalise } from "helpers"
 
   let unsaved = false
+  let relationshipModal
 
   $: datasource = $datasources.list.find(ds => ds._id === $datasources.selected)
   $: integration = datasource && $integrations[datasource.source]
+  $: plusTables = datasource?.plus ? Object.values(datasource.entities) : []
 
   async function saveDatasource() {
     try {
@@ -48,6 +51,10 @@
     unsaved = true
   }
 
+  function openRelationshipModal() {
+    relationshipModal.show()
+  }
+
   $beforeUrlChange(() => {
     if (unsaved) {
       notifications.error(
@@ -59,6 +66,10 @@
   })
 </script>
 
+<Modal bind:this={relationshipModal}>
+  <CreateEditRelationship save={saveDatasource} tables={plusTables} />
+</Modal>
+
 {#if datasource && integration}
   <section>
     <Layout>
@@ -100,19 +111,43 @@
           having to write any queries at all.
         </Body>
         <div class="query-list">
-          {#if datasource.entities}
+          {#each plusTables as table}
-            {#each Object.keys(datasource.entities) as entity}
+            <div
-              <div
+              class="query-list-item"
-                class="query-list-item"
+              on:click={() => onClickTable(table)}
-                on:click={() => onClickTable(datasource.entities[entity])}
+            >
-              >
+              <p class="query-name">{table.name}</p>
-                <p class="query-name">{entity}</p>
+              <p>Primary Key: {table.primary}</p>
-                <p>Primary Key: {datasource.entities[entity].primary}</p>
+              <p>→</p>
-                <p>→</p>
+            </div>
-              </div>
+          {/each}
-            {/each}
+        </div>
-          {/if}
+
+                <Divider />
+        <div class="query-header">
+          <Heading size="S">Relationships</Heading>
+          <Button primary on:click={openRelationshipModal}>Create Relationship</Button>
         </div>
+          <Body>
+            Tell budibase how your tables are related to get even more smart features.
+          </Body>
+          <div class="query-list">
+              {#each plusTables as table}
+                {#each Object.keys(table) as column}
+                  {#if table[column].type === "link"}
+                    <div
+                      class="query-list-item"
+                      on:click={() => onClickTable(table[column])}
+                    >
+                      <p class="query-name">{table[column].name}</p>
+                      <p>Primary Key: {table[column].primary}</p>
+                      <p>→</p>
+                    </div>
+                  {/if}
+                {/each}
+              {/each}
+          </div>
+
       {/if}
       <Divider />
       <div class="query-header">