Add users table button explaining why it is readonly

2023-09-08 11:05:09 +01:00 · 2023-09-08 11:05:09 +01:00 · bac5d52107
parent 8375297f2d
commit bac5d52107
1 changed files with 51 additions and 2 deletions
--- a/packages/builder/src/components/backend/DataTable/modals/grid/GridUsersTableButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/grid/GridUsersTableButton.svelte
@ -1,5 +1,54 @@
 <script>
-  import { ActionButton } from "@budibase/bbui"
+  import { ActionButton, Popover, Heading, Body, Button } from "@budibase/bbui"
+  import { store } from "builderStore"
+
+  let anchor
+  let open = false
+
+  const openSidePanel = () => {
+    store.update(state => ({
+      ...state,
+      builderSidePanel: true,
+    }))
+    open = false
+  }
 </script>

-<ActionButton icon="Help" quiet>Why can't I edit this table?</ActionButton>
+<div bind:this={anchor}>
+  <ActionButton on:click={() => (open = true)} icon="Help" quiet>
+    Why can't I edit this table?
+  </ActionButton>
+</div>
+
+<Popover bind:open {anchor} align="left">
+  <div class="content">
+    <Heading size="XS">The app users table is read only</Heading>
+    <Body size="S">
+      You can continue to view the users that have access to your application.
+    </Body>
+    <Body size="S">
+      Manage and invite more application users using the user side panel in the
+      top right of your screen.
+    </Body>
+    <div class="button">
+      <Button cta on:click={openSidePanel}>Open users panel</Button>
+    </div>
+  </div>
+</Popover>
+
+<style>
+  .content {
+    width: 300px;
+    padding: var(--spacing-l);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-l);
+  }
+  .content :global(.spectrum-Heading) {
+    font-weight: 400;
+  }
+  .button {
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>