Remove concept of selected access role and refactor logic around assigning roles to new screens

packages/builder/src/builderStore/index.js

@@ -59,7 +59,5 @@ export const mainLayout = derived(store, $store => {
   )
 })
 
-export const selectedAccessRole = writable("BASIC")
-
 // For compatibility
 export const currentAsset = selectedScreen

packages/builder/src/builderStore/store/frontend.js

@@ -1,12 +1,6 @@
 import { get, writable } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
-import {
-  currentAsset,
-  mainLayout,
-  selectedComponent,
-  selectedAccessRole,
-  store,
-} from "builderStore"
+import { currentAsset, mainLayout, selectedComponent } from "builderStore"
 import {
   datasources,
   integrations,
@@ -197,10 +191,6 @@ export const getFrontendStore = () => {
             screens.find(screen => screen._id === screenId) || screens[0]
           if (!screen) return state
 
-          // Update role to the screen's role setting so that it will always
-          // be visible
-          selectedAccessRole.set(screen.routing.roleId)
-
           state.currentFrontEndType = FrontendTypes.SCREEN
           state.selectedScreenId = screen._id
           state.currentView = "detail"

packages/builder/src/components/design/_old/ComponentNavigationTree.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { store, selectedAccessRole } from "builderStore"
+  import { store } from "builderStore"
   import PathTree from "./PathTree.svelte"
 
   let routes = {}

packages/builder/src/components/design/settings/controls/RoleSelect.svelte

@@ -11,6 +11,7 @@
   bind:value
   on:change
   options={$roles}
+  placeholder={null}
   getOptionLabel={role => role.name}
   getOptionValue={role => role._id}
   getOptionColour={role => RoleUtils.getRoleColour(role._id)}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDetailsModal.svelte

@@ -1,20 +1,18 @@
 <script>
   import { ModalContent, Input } from "@budibase/bbui"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
-  import { store, selectedAccessRole } from "builderStore"
   import { get } from "svelte/store"
+  import { store } from "builderStore"
 
   export let onConfirm
   export let onCancel
   export let screenUrl
-  export let screenName
+  export let screenRole
   export let confirmText = "Continue"
 
-  let routeError
-  let touched = false
-  let screenAccessRole = $selectedAccessRole + ""
-
   const appPrefix = "/app"
+  let touched = false
+  let error
 
   $: appUrl = screenUrl
     ? `${window.location.origin}${appPrefix}${screenUrl}`
@@ -27,41 +25,42 @@
     touched = true
     screenUrl = sanitizeUrl(screenUrl)
     if (routeExists(screenUrl)) {
-      routeError = "This URL is already taken for this access role"
+      error = "This URL is already taken for this access role"
     } else {
-      routeError = null
+      error = null
     }
   }
 
   const routeExists = url => {
-    const roleId = get(selectedAccessRole) || "BASIC"
+    if (!screenRole) {
+      return false
+    }
     return get(store).screens.some(
       screen =>
         screen.routing.route.toLowerCase() === url.toLowerCase() &&
-        screen.routing.roleId === roleId
+        screen.routing.roleId === screenRole
     )
   }
 
   const confirmScreenDetails = async () => {
     await onConfirm({
       screenUrl,
-      screenName,
     })
   }
 </script>
 
 <ModalContent
   size="M"
-  title={"Enter details"}
+  title={"Screen details"}
   {confirmText}
   onConfirm={confirmScreenDetails}
   {onCancel}
   cancelText={"Back"}
-  disabled={!screenAccessRole || !screenUrl || routeError || !touched}
+  disabled={!screenUrl || error || !touched}
 >
   <Input
     label="Enter a URL for the new screen"
-    error={routeError}
+    {error}
     bind:value={screenUrl}
     on:change={routeChanged}
   />

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte

@@ -84,8 +84,8 @@
 <Modal bind:this={screenDetailsModal}>
   <ScreenDetailsModal
     onConfirm={createDuplicateScreen}
-    screenName={screen?.props._instanceName}
     screenUrl={screen?.routing.route}
+    screenRole={screen?.routing.roleId}
     confirmText="Duplicate"
   />
 </Modal>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenRoleModal.svelte

@@ -0,0 +1,66 @@
+<script>
+  import { Select, ModalContent } from "@budibase/bbui"
+  import analytics, { Events } from "analytics"
+  import { RoleUtils } from "@budibase/frontend-core"
+  import { roles } from "stores/backend"
+  import { get } from "svelte/store"
+  import { store } from "builderStore"
+  import { onMount } from "svelte"
+
+  export let onConfirm
+  export let onCancel
+  export let screenUrl
+  export let screenAccessRole
+
+  let error
+
+  const onChangeRole = e => {
+    const roleId = e.detail
+    analytics.captureEvent(Events.SCREEN.CREATE_ROLE_UPDATED, {
+      screenAccessRole: roleId,
+    })
+    if (routeExists(screenUrl, roleId)) {
+      error = "This URL is already taken for this access role"
+    } else {
+      error = null
+    }
+  }
+
+  const routeExists = (url, role) => {
+    if (!url || !role) {
+      return false
+    }
+    return get(store).screens.some(
+      screen =>
+        screen.routing.route.toLowerCase() === url.toLowerCase() &&
+        screen.routing.roleId === role
+    )
+  }
+
+  onMount(() => {
+    // Validate the initial role
+    onChangeRole({ detail: screenAccessRole })
+  })
+</script>
+
+<ModalContent
+  title={"Create CRUD Screens"}
+  confirmText={"Done"}
+  cancelText={"Back"}
+  {onConfirm}
+  {onCancel}
+  disabled={!!error}
+>
+  Select which level of access you want your screens to have
+  <Select
+    bind:value={screenAccessRole}
+    on:change={onChangeRole}
+    label="Access"
+    {error}
+    getOptionLabel={role => role.name}
+    getOptionValue={role => role._id}
+    getOptionColour={role => RoleUtils.getRoleColour(role._id)}
+    options={$roles}
+    placeholder={null}
+  />
+</ModalContent>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte

@@ -2,13 +2,15 @@
   import ScreenDetailsModal from "./ScreenDetailsModal.svelte"
   import NewScreenModal from "./NewScreenModal.svelte"
   import DatasourceModal from "./DatasourceModal.svelte"
+  import ScreenRoleModal from "./ScreenRoleModal.svelte"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
-  import { Modal, ModalContent, Select, notifications } from "@budibase/bbui"
-  import { store, selectedAccessRole } from "builderStore"
+  import { Modal, notifications } from "@budibase/bbui"
+  import { store } from "builderStore"
   import analytics, { Events } from "analytics"
   import { get } from "svelte/store"
   import getTemplates from "builderStore/store/screenTemplates"
-  import { tables, roles } from "stores/backend"
+  import { tables } from "stores/backend"
+  import { Roles } from "constants/backend"
 
   let pendingScreen
 
@@ -19,10 +21,9 @@
   let screenAccessRoleModal
 
   // Cache variables for workflow
-  let screenAccessRole = $selectedAccessRole + ""
+  let screenAccessRole = Roles.BASIC
   let selectedTemplates = null
   let blankScreenUrl = null
-
   let screenMode = null
 
   // External handler to show the screen wizard
@@ -30,10 +31,9 @@
     selectedTemplates = null
     blankScreenUrl = null
     screenMode = null
-
-    newScreenModal.show()
-    // Reset state when showing modal again
     pendingScreen = null
+    screenAccessRole = Roles.BASIC
+    newScreenModal.show()
   }
 
   // Creates an array of screens, checking and sanitising their URLs
@@ -58,9 +58,11 @@
         screen.routing.route = sanitizeUrl(screen.routing.route)
 
         // Use the currently selected role
+        if (!screenAccessRole) {
+          console.log("NO ROLE")
+          return
+        }
         screen.routing.roleId = screenAccessRole
-          ? screenAccessRole
-          : get(selectedAccessRole) || "BASIC"
 
         // Create the screen
         await store.actions.screens.save(screen)
@@ -90,7 +92,7 @@
   // Checks if any screens exist in the store with the given route and
   // currently selected role
   const hasExistingUrl = url => {
-    const roleId = get(selectedAccessRole) || "BASIC"
+    const roleId = screenAccessRole
     const screens = get(store).screens.filter(s => s.routing.roleId === roleId)
     return !!screens.find(s => s.routing?.route === url)
   }
@@ -115,7 +117,7 @@
   const confirmScreenSelection = async mode => {
     screenMode = mode
 
-    if (mode == "autoCreate") {
+    if (mode === "autoCreate") {
       datasourceModal.show()
     } else {
       let templates = getTemplates($store, $tables.list)
@@ -198,28 +200,12 @@
 </Modal>
 
 <Modal bind:this={screenAccessRoleModal}>
-  <ModalContent
-    title={"Create CRUD Screens"}
-    confirmText={"Done"}
-    cancelText={"Back"}
+  <ScreenRoleModal
     onConfirm={confirmScreenCreation}
     onCancel={roleSelectBack}
-  >
-    Select which level of access you want your screens to have
-    <Select
-      bind:value={screenAccessRole}
-      on:change={() => {
-        analytics.captureEvent(Events.SCREEN.CREATE_ROLE_UPDATED, {
-          screenAccessRole,
-        })
-      }}
-      label="Access"
-      getOptionLabel={role => role.name}
-      getOptionValue={role => role._id}
-      getOptionColor={role => role.color}
-      options={$roles}
-    />
-  </ModalContent>
+    bind:screenAccessRole
+    screenUrl={blankScreenUrl}
+  />
 </Modal>
 
 <Modal bind:this={screenDetailsModal}>