Adding checks around the edit roles modal.

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

@@ -6,8 +6,10 @@
   import ErrorsBox from "components/common/ErrorsBox.svelte"
   import { roles } from "stores/backend"
 
+  const BASE_ROLE = { _id: "", inherits: "BASIC", permissionId: "Read/Write" }
+
   let basePermissions = []
-  let selectedRole = {}
+  let selectedRole = BASE_ROLE
   let errors = []
   let builtInRoles = ["Admin", "Power", "Basic", "Public"]
   // Don't allow editing of public role
@@ -15,6 +17,7 @@
   $: selectedRoleId = selectedRole._id
   $: otherRoles = editableRoles.filter(role => role._id !== selectedRoleId)
   $: isCreating = selectedRoleId == null || selectedRoleId === ""
+  $: valid = selectedRole.name && selectedRole.inherits && selectedRole.permissionId && !builtInRoles.includes(selectedRole.name)
 
   const fetchBasePermissions = async () => {
     const permissionsResponse = await api.get("/api/permission/builtin")
@@ -32,7 +35,7 @@
         permissionId: role.permissionId ?? "",
       }
     } else {
-      selectedRole = { _id: "", inherits: "", permissionId: "" }
+      selectedRole = BASE_ROLE
     }
     errors = []
   }
@@ -88,6 +91,7 @@
   title="Edit Roles"
   confirmText={isCreating ? "Create" : "Save"}
   onConfirm={saveRole}
+  disabled={!valid}
 >
   {#if errors.length}
     <ErrorsBox {errors} />
@@ -115,7 +119,7 @@
       options={otherRoles}
       getOptionValue={role => role._id}
       getOptionLabel={role => role.name}
-      placeholder="None"
+      disabled={builtInRoles.includes(selectedRole.name)}
     />
     <Select
       label="Base Permissions"
@@ -123,7 +127,7 @@
       options={basePermissions}
       getOptionValue={x => x._id}
       getOptionLabel={x => x.name}
-      placeholder="Choose permissions"
+      disabled={builtInRoles.includes(selectedRole.name)}
     />
   {/if}
   <div slot="footer">