Add modal for editing user roles

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

@@ -4,8 +4,10 @@
   import CreateColumnButton from "./buttons/CreateColumnButton.svelte"
   import CreateViewButton from "./buttons/CreateViewButton.svelte"
   import ExportButton from "./buttons/ExportButton.svelte"
+  import EditRolesButton from "./buttons/EditRolesButton.svelte"
   import * as api from "./api"
   import Table from "./Table.svelte"
+  import { TableNames } from "constants"
 
   let data = []
   let loading = false
@@ -36,4 +38,7 @@
     <CreateViewButton />
     <ExportButton view={tableView} />
   {/if}
+  {#if $backendUiStore.selectedTable?._id === TableNames.USERS}
+    <EditRolesButton />
+  {/if}
 </Table>

packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { TextButton as Button, Modal } from "@budibase/bbui"
+  import EditRolesModal from "../modals/EditRoles.svelte"
+
+  let modal
+</script>
+
+<div>
+  <Button text small on:click={modal.show}>
+    <i class="ri-lock-line" />
+    Edit Roles
+  </Button>
+</div>
+<Modal bind:this={modal}>
+  <EditRolesModal />
+</Modal>
+
+<style>
+  i {
+    margin-right: var(--spacing-xs);
+    font-size: var(--font-size-s);
+  }
+</style>

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

@@ -0,0 +1,136 @@
+<script>
+  import { ModalContent, Select, Input, Button } from "@budibase/bbui"
+  import { onMount } from "svelte"
+  import api from "builderStore/api"
+  import { notifier } from "builderStore/store/notifications"
+  import ErrorsBox from "components/common/ErrorsBox.svelte"
+
+  let roles = []
+  let permissions = []
+  let selectedRole = {}
+  let errors = []
+  $: selectedRoleId = selectedRole._id
+  $: otherRoles = roles.filter(role => role._id !== selectedRoleId)
+  $: isCreating = selectedRoleId == null || selectedRoleId === ""
+
+  // Loads available roles and permissions from the server
+  const fetchRoles = async () => {
+    const rolesResponse = await api.get("/api/roles")
+    roles = await rolesResponse.json()
+    const permissionsResponse = await api.get("/api/permissions")
+    permissions = await permissionsResponse.json()
+  }
+
+  // Changes the seleced role
+  const changeRole = event => {
+    const id = event?.target?.value
+    const role = roles.find(role => role._id === id)
+    if (role) {
+      selectedRole = {
+        ...role,
+        inherits: role.inherits ?? "",
+        permissionId: role.permissionId ?? "",
+      }
+    } else {
+      selectedRole = { _id: "", inherits: "", permissionId: "" }
+    }
+    errors = []
+  }
+
+  // Saves or creates the selected role
+  const saveRole = async () => {
+    errors = []
+
+    // Clean up empty strings
+    const keys = ["_id", "inherits", "permissionId"]
+    keys.forEach(key => {
+      if (selectedRole[key] === "") {
+        delete selectedRole[key]
+      }
+    })
+
+    // Validation
+    if (!selectedRole.name || selectedRole.name.trim() === "") {
+      errors.push({ message: "Please enter a role name" })
+    }
+    if (!selectedRole.permissionId) {
+      errors.push({ message: "Please choose permissions" })
+    }
+    if (errors.length) {
+      return false
+    }
+
+    // Save/create the role
+    const response = await api.post("/api/roles", selectedRole)
+    if (response.status === 200) {
+      notifier.success("Role saved successfully.")
+    } else {
+      notifier.danger("Error saving role.")
+      return false
+    }
+  }
+
+  // Deletes the selected role
+  const deleteRole = async () => {
+    const response = await api.delete(
+      `/api/roles/${selectedRole._id}/${selectedRole._rev}`
+    )
+    if (response.status === 200) {
+      await fetchRoles()
+      changeRole()
+      notifier.success("Role deleted successfully.")
+    } else {
+      notifier.danger("Error deleting role.")
+    }
+  }
+
+  onMount(fetchRoles)
+</script>
+
+<ModalContent
+  title="Edit Roles"
+  confirmText={isCreating ? 'Create' : 'Save'}
+  onConfirm={saveRole}>
+  {#if errors.length}
+    <ErrorsBox {errors} />
+  {/if}
+  <Select
+    thin
+    secondary
+    label="Role"
+    value={selectedRoleId}
+    on:change={changeRole}>
+    <option value="">Create new role</option>
+    {#each roles as role}
+      <option value={role._id}>{role.name}</option>
+    {/each}
+  </Select>
+  {#if selectedRole}
+    <Input label="Name" bind:value={selectedRole.name} thin />
+    <Select
+      thin
+      secondary
+      label="Inherits Role"
+      bind:value={selectedRole.inherits}>
+      <option value="">None</option>
+      {#each otherRoles as role}
+        <option value={role._id}>{role.name}</option>
+      {/each}
+    </Select>
+    <Select
+      thin
+      secondary
+      label="Permissions"
+      bind:value={selectedRole.permissionId}>
+      <option value="">Choose permissions</option>
+      {#each permissions as permission}
+        <option value={permission._id}>{permission.name}</option>
+      {/each}
+    </Select>
+  {/if}
+  <div slot="footer">
+    {#if !isCreating}
+      <Button red on:click={deleteRole}>Delete</Button>
+    {/if}
+  </div>
+</ModalContent>