Allow role selection when creating new screen

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

@@ -1,17 +1,11 @@
 <script>
   import { goto } from "@sveltech/routify"
   import { store, backendUiStore, allScreens } from "builderStore"
-  import {
-    Input,
-    Button,
-    Spacer,
-    Select,
-    ModalContent,
-    Toggle,
-  } from "@budibase/bbui"
+  import { Input, Select, ModalContent, Toggle } from "@budibase/bbui"
   import getTemplates from "builderStore/store/screenTemplates"
-  import { some } from "lodash/fp"
   import analytics from "analytics"
+  import { onMount } from "svelte"
+  import api from "builderStore/api"
 
   const CONTAINER = "@budibase/standard-components/container"
 
@@ -21,15 +15,14 @@
   let templateIndex
   let draftScreen
   let createLink = true
+  let roles = []
+  let roleId = "BASIC"
 
   $: templates = getTemplates($store, $backendUiStore.tables)
-
   $: route = !route && $allScreens.length === 0 ? "*" : route
-
   $: baseComponents = Object.values($store.components)
     .filter(componentDefinition => componentDefinition.baseComponent)
     .map(c => c._component)
-
   $: {
     if (templates && templateIndex === undefined) {
       templateIndex = 0
@@ -37,6 +30,11 @@
     }
   }
 
+  const fetchRoles = async () => {
+    const response = await api.get("/api/roles")
+    roles = await response.json()
+  }
+
   const templateChanged = newTemplateIndex => {
     if (newTemplateIndex === undefined) return
     const template = templates[newTemplateIndex]
@@ -69,8 +67,7 @@
 
     draftScreen.props._instanceName = name
     draftScreen.props._component = baseComponent
-    // TODO: need to fix this up correctly
-    draftScreen.routing = { route, roleId: "ADMIN" }
+    draftScreen.routing = { route, roleId }
 
     const createdScreen = await store.actions.screens.create(draftScreen)
     if (createLink) {
@@ -85,7 +82,7 @@
       })
     }
 
-    $goto(`./screen/${createdScreen._id}`)
+    $goto(`./${createdScreen._id}`)
   }
 
   const routeNameExists = route => {
@@ -99,6 +96,8 @@
       route = "/" + event.target.value
     }
   }
+
+  onMount(fetchRoles)
 </script>
 
 <ModalContent title="New Screen" confirmText="Create Screen" onConfirm={save}>
@@ -113,14 +112,18 @@
       {/each}
     {/if}
   </Select>
-
   <Input label="Name" bind:value={name} />
-
   <Input
     label="Url"
     error={routeError}
     bind:value={route}
     on:change={routeChanged} />
-
+  {#if roles.length}
+    <Select label="Access" bind:value={roleId} secondary>
+      {#each roles as role}
+        <option value={role._id}>{role.name}</option>
+      {/each}
+    </Select>
+  {/if}
   <Toggle text="Create link in navigation bar" bind:checked={createLink} />
 </ModalContent>