From f54d1985b44a03e705b13f6ce5832852dec3eddb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 21 Aug 2024 07:46:15 +0100
Subject: [PATCH] Add new detail popover and update manage access button to use
 it

---
 packages/bbui/src/Popover/Popover.svelte      |  3 +
 .../buttons/ManageAccessButton.svelte         | 25 +++---
 .../DataTable/modals/ManageAccessModal.svelte | 82 ++++++-------------
 .../components/common/DetailPopover.svelte    | 59 +++++++++++++
 .../src/components/grid/stores/datasource.js  |  1 -
 5 files changed, 103 insertions(+), 67 deletions(-)
 create mode 100644 packages/builder/src/components/common/DetailPopover.svelte

diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 696e246d28..6c6ae6817d 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -143,6 +143,9 @@
     border-color: var(--spectrum-global-color-gray-300);
     overflow: auto;
     transition: opacity 260ms ease-out;
+    filter: none;
+    -webkit-filter: none;
+    box-shadow: 0 1px 4px var(--drop-shadow);
   }
   .blockPointerEvents {
     pointer-events: none;
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
index aa8eefe89c..e43cc33915 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
@@ -2,22 +2,25 @@
   import { ActionButton, Modal } from "@budibase/bbui"
   import { permissions } from "stores/builder"
   import ManageAccessModal from "../modals/ManageAccessModal.svelte"
+  import DetailPopover from "components/common/DetailPopover.svelte"
 
   export let resourceId
-  export let disabled = false
 
-  let modal
   let resourcePermissions
 
-  async function openModal() {
-    resourcePermissions = await permissions.forResourceDetailed(resourceId)
-    modal.show()
+  $: fetchPermissions(resourceId)
+
+  const fetchPermissions = async id => {
+    console.log("getting perms for", id)
+    resourcePermissions = await permissions.forResourceDetailed(id)
   }
 </script>
 
-<ActionButton icon="LockClosed" quiet on:click={openModal} {disabled}>
-  Access
-</ActionButton>
-<Modal bind:this={modal}>
-  <ManageAccessModal {resourceId} permissions={resourcePermissions} />
-</Modal>
+<DetailPopover title="Manage access">
+  <svelte:fragment slot="anchor" let:open>
+    <ActionButton icon="LockClosed" selected={open} quiet>Access</ActionButton>
+  </svelte:fragment>
+  {#if resourcePermissions}
+    <ManageAccessModal {resourceId} permissions={resourcePermissions} />
+  {/if}
+</DetailPopover>
diff --git a/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte b/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
index 48b584690e..b80dad4321 100644
--- a/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
@@ -1,19 +1,8 @@
 <script>
   import { PermissionSource } from "@budibase/types"
   import { roles, permissions as permissionsStore } from "stores/builder"
-  import {
-    Label,
-    Input,
-    Select,
-    notifications,
-    Body,
-    ModalContent,
-    Tags,
-    Tag,
-    Icon,
-  } from "@budibase/bbui"
+  import { Label, Input, Select, notifications, Body } from "@budibase/bbui"
   import { capitalise } from "helpers"
-  import { getFormattedPlanName } from "helpers/planTitle"
   import { get } from "svelte/store"
 
   export let resourceId
@@ -69,8 +58,6 @@
     {}
   )
 
-  $: requiresPlanToModify = permissions.requiresPlanToModify
-
   let dependantsInfoMessage
   async function loadDependantInfo() {
     const dependantsInfo = await permissionsStore.getDependantsInfo(resourceId)
@@ -94,48 +81,33 @@
   loadDependantInfo()
 </script>
 
-<ModalContent showCancelButton={false} confirmText="Done">
-  <span slot="header">
-    Manage Access
-    {#if requiresPlanToModify}
-      <span class="lock-tag">
-        <Tags>
-          <Tag icon="LockClosed"
-            >{getFormattedPlanName(requiresPlanToModify)}</Tag
-          >
-        </Tags>
-      </span>
-    {/if}
-  </span>
-  <Body size="S">Specify the minimum access level role for this data.</Body>
-  <div class="row">
-    <Label extraSmall grey>Level</Label>
-    <Label extraSmall grey>Role</Label>
-    {#each Object.keys(computedPermissions) as level}
-      <Input value={capitalise(level)} disabled />
-      <Select
-        disabled={requiresPlanToModify}
-        placeholder={false}
-        value={computedPermissions[level].selectedValue}
-        on:change={e => changePermission(level, e.detail)}
-        options={computedPermissions[level].options}
-        getOptionLabel={x => x.name}
-        getOptionValue={x => x._id}
-      />
-    {/each}
-  </div>
+<Body size="S">Specify the minimum access level role for this data.</Body>
+<div class="row">
+  <Label extraSmall grey>Level</Label>
+  <Label extraSmall grey>Role</Label>
+  {#each Object.keys(computedPermissions) as level}
+    <Input value={capitalise(level)} disabled />
+    <Select
+      placeholder={false}
+      value={computedPermissions[level].selectedValue}
+      on:change={e => changePermission(level, e.detail)}
+      options={computedPermissions[level].options}
+      getOptionLabel={x => x.name}
+      getOptionValue={x => x._id}
+    />
+  {/each}
+</div>
 
-  {#if dependantsInfoMessage}
-    <div class="inheriting-resources">
-      <Icon name="Alert" />
-      <Body size="S">
-        <i>
-          {dependantsInfoMessage}
-        </i>
-      </Body>
-    </div>
-  {/if}
-</ModalContent>
+{#if dependantsInfoMessage}
+  <div class="inheriting-resources">
+    <Icon name="Alert" />
+    <Body size="S">
+      <i>
+        {dependantsInfoMessage}
+      </i>
+    </Body>
+  </div>
+{/if}
 
 <style>
   .row {
diff --git a/packages/builder/src/components/common/DetailPopover.svelte b/packages/builder/src/components/common/DetailPopover.svelte
new file mode 100644
index 0000000000..d2d3c431c2
--- /dev/null
+++ b/packages/builder/src/components/common/DetailPopover.svelte
@@ -0,0 +1,59 @@
+<script>
+  import { Popover, Icon } from "@budibase/bbui"
+
+  export let title
+  export let align = "left"
+
+  let popover
+  let anchor
+  let open
+
+  export const show = () => popover?.show()
+  export const hide = () => popover?.hide()
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="anchor" bind:this={anchor} on:click={show}>
+  <slot name="anchor" {open} />
+</div>
+
+<Popover bind:this={popover} bind:open {anchor} {align} minWidth={300}>
+  <div class="detail-popover">
+    <div class="detail-popover__header">
+      <div class="detail-popover__title">
+        {title}
+      </div>
+      <Icon name="Close" />
+    </div>
+    <div class="detail-popover__body">
+      <slot />
+    </div>
+  </div>
+</Popover>
+
+<style>
+  .detail-popover {
+    --padding: 12px;
+    background-color: var(--spectrum-alias-background-color-primary);
+  }
+  .detail-popover__header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
+    padding: var(--padding);
+  }
+  .detail-popover__title {
+    font-size: 16px;
+    font-weight: 600;
+  }
+  .detail-popover__body {
+    padding: var(--padding);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--padding);
+  }
+</style>
diff --git a/packages/frontend-core/src/components/grid/stores/datasource.js b/packages/frontend-core/src/components/grid/stores/datasource.js
index 6f0a8bb168..12a3bd5afe 100644
--- a/packages/frontend-core/src/components/grid/stores/datasource.js
+++ b/packages/frontend-core/src/components/grid/stores/datasource.js
@@ -152,7 +152,6 @@ export const createActions = context => {
       return
     }
     schemaMutations.update($schemaMutations => {
-      console.log($schemaMutations)
       return {
         ...$schemaMutations,
         [field]: {