Prevent updating a screen role to a role for which the screen URL already exists

packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte

@@ -3,6 +3,7 @@
   import { roles } from "stores/backend"
 
   export let value
+  export let error
 </script>
 
 <Select
@@ -11,4 +12,5 @@
   options={$roles}
   getOptionLabel={role => role.name}
   getOptionValue={role => role._id}
+  {error}
 />

packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte

@@ -15,7 +15,7 @@
 
   let errors = {}
 
-  const routeExists = url => {
+  const routeTaken = url => {
     const roleId = get(selectedAccessRole) || "BASIC"
     return get(allScreens).some(
       screen =>
@@ -24,6 +24,15 @@
     )
   }
 
+  const roleTaken = roleId => {
+    const url = get(currentAsset)?.routing.route
+    return get(allScreens).some(
+      screen =>
+        screen.routing.route.toLowerCase() === url.toLowerCase() &&
+        screen.routing.roleId === roleId
+    )
+  }
+
   const setAssetProps = (name, value, parser, validate) => {
     if (parser) {
       value = parser(value)
@@ -76,14 +85,25 @@
         return sanitizeUrl(val)
       },
       validate: val => {
-        const exisingValue = deepGet($currentAsset, "routing.route")
+        const exisingValue = get(currentAsset)?.routing.route
-        if (val !== exisingValue && routeExists(val)) {
+        if (val !== exisingValue && routeTaken(val)) {
-          return "That URL is already in use"
+          return "That URL is already in use for this role"
+        }
+        return null
+      },
+    },
+    {
+      key: "routing.roleId",
+      label: "Access",
+      control: RoleSelect,
+      validate: val => {
+        const exisingValue = get(currentAsset)?.routing.roleId
+        if (val !== exisingValue && roleTaken(val)) {
+          return "That role is already in use for this URL"
         }
         return null
       },
     },
-    { key: "routing.roleId", label: "Access", control: RoleSelect },
     { key: "layoutId", label: "Layout", control: LayoutSelect },
   ]
 </script>