Add role editing to access popover

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

@@ -1,13 +1,15 @@
 <script>
-  import { ActionButton, Modal } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
   import EditRolesModal from "../modals/EditRoles.svelte"
 
   let modal
 </script>
 
-<ActionButton icon="UsersLock" quiet on:click={modal.show}>
+<div>
+  <Button secondary icon="UsersLock" on:click on:click={modal.show}>
     Edit roles
-</ActionButton>
+  </Button>
-<Modal bind:this={modal}>
+</div>
+<Modal bind:this={modal} on:show on:hide>
   <EditRolesModal />
 </Modal>

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

@@ -3,10 +3,12 @@
   import { permissions } from "stores/builder"
   import ManageAccessModal from "../modals/ManageAccessModal.svelte"
   import DetailPopover from "components/common/DetailPopover.svelte"
+  import EditRolesButton from "./EditRolesButton.svelte"
 
   export let resourceId
 
   let resourcePermissions
+  let showPopover = true
 
   $: fetchPermissions(resourceId)
 
@@ -15,11 +17,15 @@
   }
 </script>
 
-<DetailPopover title="Manage access">
+<DetailPopover title="Manage access" {showPopover}>
   <svelte:fragment slot="anchor" let:open>
     <ActionButton icon="LockClosed" selected={open} quiet>Access</ActionButton>
   </svelte:fragment>
   {#if resourcePermissions}
     <ManageAccessModal {resourceId} permissions={resourcePermissions} />
   {/if}
+  <EditRolesButton
+    on:show={() => (showPopover = false)}
+    on:hide={() => (showPopover = true)}
+  />
 </DetailPopover>

packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte

@@ -23,7 +23,6 @@
   $: tableId = ds?.tableId
   $: isView = ds?.type === "viewV2"
   $: fetchRowActions(tableId)
-  $: console.log(rowActions)
   $: activeCount = 0
   $: suffix = isView ? activeCount : rowActions.length
 
@@ -51,12 +50,12 @@
         name,
         tableId,
       })
-      console.log(res)
       await automationStore.actions.fetch()
       notifications.success("Row action created successfully")
       $goto($rowActionUrl(res))
     } catch (error) {
-      console.log(error)
+      console.error(error)
+      notifications.error("Error creating row action")
     }
   }
 </script>

packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte

@@ -11,13 +11,10 @@
   $: connectedScreens = findConnectedScreens($screenStore.screens, resourceId)
 
   const findConnectedScreens = (screens, resourceId) => {
-    console.log(resourceId)
     return screens.filter(screen => {
       return JSON.stringify(screen).includes(`"${resourceId}"`)
     })
   }
-
-  $: console.log(connectedScreens)
 </script>
 
 <DetailPopover title="Screens" minWidth={400}>

packages/builder/src/components/common/DetailPopover.svelte

@@ -5,6 +5,7 @@
   export let align = "left"
   export let minWidth
   export let maxWidth
+  export let showPopover
 
   let popover
   let anchor
@@ -23,10 +24,11 @@
 <Popover
   bind:this={popover}
   bind:open
+  minWidth={minWidth || 300}
   {anchor}
   {align}
-  minWidth={minWidth || 300}
   {maxWidth}
+  {showPopover}
 >
   <div class="detail-popover">
     <div class="detail-popover__header">