Add scaffolding for new role editor modal

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

@@ -5,11 +5,9 @@
   let modal
 </script>
 
-<div>
-  <Button secondary icon="UsersLock" on:click on:click={modal.show}>
+<Button secondary icon="UsersLock" on:click on:click={modal.show}>
   Edit roles
-  </Button>
-</div>
+</Button>
 <Modal bind:this={modal} on:show on:hide>
   <EditRolesModal />
 </Modal>

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

@@ -1,8 +1,6 @@
 <script>
   import {
     ActionButton,
-    Icon,
-    Body,
     Input,
     Select,
     Label,
@@ -17,6 +15,7 @@
   import { capitalise } from "helpers"
   import InfoDisplay from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
   import { Roles } from "constants/backend"
+  import RoleEditor from "./RoleEditor.svelte"
 
   export let resourceId
 
@@ -193,10 +192,16 @@
     <InfoDisplay info body={dependantsInfoMessage} />
   {/if}
 
+  <div class="buttons">
     <EditRolesButton
       on:show={() => (showPopover = false)}
       on:hide={() => (showPopover = true)}
     />
+    <RoleEditor
+      on:drawerShow={() => (showPopover = false)}
+      on:drawerHide={() => (showPopover = true)}
+    />
+  </div>
 </DetailPopover>
 
 <style>

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

@@ -0,0 +1,32 @@
+<script>
+  import {
+    Button,
+    Modal,
+    ModalContent,
+    Drawer,
+    DrawerContent,
+  } from "@budibase/bbui"
+
+  let drawer
+
+  $: invalid = false
+
+  const save = async () => {
+    drawer.hide()
+  }
+</script>
+
+<Button secondary icon="UsersLock" on:click on:click={drawer.show}>
+  Role editor
+</Button>
+
+<Drawer
+  bind:this={drawer}
+  title="Role editor"
+  on:drawerHide
+  on:drawerShow
+  forceModal
+>
+  <Button disabled={invalid} cta slot="buttons" on:click={save}>Save</Button>
+  <DrawerContent slot="body">asdasdasd</DrawerContent>
+</Drawer>