Don't allow duplicate roles

packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte

@@ -17,12 +17,21 @@
   $: selectedRoleId = selectedRole._id
   $: otherRoles = editableRoles.filter(role => role._id !== selectedRoleId)
   $: isCreating = selectedRoleId == null || selectedRoleId === ""
+
+  $: hasUniqueRoleName = !otherRoles
+    ?.map(role => role.name)
+    ?.includes(selectedRole.name)
+
   $: valid =
     selectedRole.name &&
     selectedRole.inherits &&
     selectedRole.permissionId &&
     !builtInRoles.includes(selectedRole.name)
 
+  $: shouldDisableRoleInput =
+    builtInRoles.includes(selectedRole.name) &&
+    selectedRole.name?.toLowerCase() === selectedRoleId?.toLowerCase()
+
   const fetchBasePermissions = async () => {
     try {
       basePermissions = await API.getBasePermissions()
@@ -99,7 +108,7 @@
   title="Edit Roles"
   confirmText={isCreating ? "Create" : "Save"}
   onConfirm={saveRole}
-  disabled={!valid}
+  disabled={!valid || !hasUniqueRoleName}
 >
   {#if errors.length}
     <ErrorsBox {errors} />
@@ -119,7 +128,8 @@
     <Input
       label="Name"
       bind:value={selectedRole.name}
-      disabled={builtInRoles.includes(selectedRole.name)}
+      disabled={shouldDisableRoleInput}
+      error={!hasUniqueRoleName ? "Select a unique role name." : null}
     />
     <Select
       label="Inherits Role"
@@ -127,7 +137,7 @@
       options={selectedRole._id === "BASIC" ? $roles : otherRoles}
       getOptionValue={role => role._id}
       getOptionLabel={role => role.name}
-      disabled={builtInRoles.includes(selectedRole.name)}
+      disabled={shouldDisableRoleInput}
     />
     <Select
       label="Base Permissions"
@@ -135,7 +145,7 @@
       options={basePermissions}
       getOptionValue={x => x._id}
       getOptionLabel={x => x.name}
-      disabled={builtInRoles.includes(selectedRole.name)}
+      disabled={shouldDisableRoleInput}
     />
   {/if}
   <div slot="footer">