add user groups UI

packages/bbui/src/IconPicker/IconPicker.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher } from "svelte"
+  //import { createEventDispatcher } from "svelte"
   import "@spectrum-css/popover/dist/index-vars.css"
   import clickOutside from "../Actions/click_outside"
   import { fly } from "svelte/transition"
@@ -11,7 +11,7 @@
 
   let open = false
 
-  const dispatch = createEventDispatcher()
+  // const dispatch = createEventDispatcher()
 
   const iconList = [
     {
@@ -44,11 +44,12 @@
       ],
     },
   ]
-
+  /*
   const onChange = value => {
     dispatch("change", value)
     open = false
   }
+*/
 </script>
 
 <div class="container">

packages/builder/src/pages/builder/portal/_layout.svelte

@@ -52,6 +52,11 @@
           href: "/builder/portal/manage/users",
           heading: "Manage",
         },
+        {
+          title: "User Groups",
+          href: "/builder/portal/manage/groups",
+        },
+
         { title: "Auth", href: "/builder/portal/manage/auth" },
         { title: "Email", href: "/builder/portal/manage/email" },
         {

packages/builder/src/pages/builder/portal/manage/_layout.svelte

@@ -9,10 +9,14 @@
       $redirect("../")
     }
   }
+
+  $: wide =
+    $page.path.includes("email/:template") ||
+    ($page.path.includes("groups") && !$page.path.includes(":groupId"))
 </script>
 
 {#if $auth.isAdmin}
-  <Page maxWidth="90ch" wide={$page.path.includes("email/:template")}>
+  <Page maxWidth="90ch" {wide}>
     <slot />
   </Page>
 {/if}

packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte

@@ -0,0 +1,211 @@
+<script>
+  import { goto } from "@roxi/routify"
+  import {
+    ActionButton,
+    Button,
+    Layout,
+    Heading,
+    Body,
+    Icon,
+    Popover,
+    Search,
+    Divider,
+    Detail,
+  } from "@budibase/bbui"
+  import UserRow from "./_components/UserRow.svelte"
+  import { users } from "stores/portal"
+  import { onMount } from "svelte"
+
+  let popoverAnchor
+  let popover
+  let searchTerm = ""
+  let selectedUsers = []
+  $: filteredUsers = $users.filter(user =>
+    user?.email?.toLowerCase().includes(searchTerm.toLowerCase())
+  )
+
+  let group = {
+    _id: "gr_123456",
+    color: "green",
+    icon: "Anchor",
+    name: "Core Team",
+    userCount: 5,
+    appCount: 2,
+  }
+
+  let groupUsers = [
+    {
+      email: "peter@budibase.com",
+      access: "Developer",
+    },
+  ]
+
+  /*
+  function getGroup() {
+    return 
+  }
+  */
+  function selectUser(id) {
+    let user = selectedUsers.find(user_id => user_id === id)
+    if (user) {
+      selectedUsers = selectedUsers.filter(id => id !== user)
+    } else {
+      selectedUsers = [...selectedUsers, id]
+    }
+  }
+  onMount(() => {
+    console.log($users)
+  })
+</script>
+
+<Layout noPadding>
+  <div>
+    <ActionButton on:click={() => $goto("../groups")} size="S" icon="ArrowLeft">
+      Back
+    </ActionButton>
+  </div>
+  <div class="header">
+    <div class="title">
+      <div style="background: {group.color};" class="circle">
+        <div>
+          <Icon size="M" name={group.icon} />
+        </div>
+      </div>
+      <div class="text-padding">
+        <Heading>{group.name}</Heading>
+      </div>
+    </div>
+    <div bind:this={popoverAnchor}>
+      <Button on:click={popover.show()} icon="UserAdd" cta>Add User</Button>
+    </div>
+    <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
+      <div style="padding: var(--spacing-m)">
+        <Search placeholder="Search" bind:value={searchTerm} />
+        <div class="users-header header">
+          <div>
+            <Detail
+              >{filteredUsers.length} User{filteredUsers.length === 1
+                ? ""
+                : "s"}</Detail
+            >
+          </div>
+          <div>
+            <ActionButton emphasized size="S">Add all</ActionButton>
+          </div>
+        </div>
+        <Divider noMargin />
+        <div>
+          {#each filteredUsers as user}
+            <div
+              on:click={selectUser(user._id)}
+              style="padding-bottom: var(--spacing-m)"
+              class="user-selection"
+            >
+              <div>
+                {user.email}
+              </div>
+
+              {#if selectedUsers.includes(user._id)}
+                <div>
+                  <Icon
+                    color="var(--spectrum-global-color-blue-600);"
+                    name="Checkmark"
+                  />
+                </div>
+              {/if}
+            </div>
+          {/each}
+        </div>
+      </div>
+    </Popover>
+  </div>
+
+  <div class="usersTable">
+    {#if groupUsers.length}
+      {#each groupUsers as user}
+        <div>
+          <UserRow {user} />
+        </div>
+      {/each}
+    {:else}
+      <div>
+        <div class="title header text-padding">
+          <Icon name="UserGroup" />
+          <div class="text-padding">
+            <Body size="S">You have no users in this team</Body>
+          </div>
+        </div>
+      </div>
+    {/if}
+  </div>
+</Layout>
+
+<style>
+  .text-padding {
+    margin-left: var(--spacing-l);
+  }
+
+  .users-header {
+    align-items: center;
+    padding: var(--spacing-m) 0 var(--spacing-m) 0;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .user-selection {
+    align-items: end;
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+  }
+
+  .user-selection > :first-child {
+    padding-top: var(--spacing-m);
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+  }
+  .title {
+    display: flex;
+  }
+  .circle {
+    border-radius: 50%;
+    height: 30px;
+    color: white;
+    font-weight: bold;
+    display: inline-block;
+    font-size: 1.2em;
+    width: 30px;
+  }
+
+  .circle > div {
+    padding: calc(1.5 * var(--spacing-xs)) var(--spacing-xs);
+  }
+
+  .usersTable {
+    display: grid;
+    grid-template-rows: auto;
+    align-items: center;
+    border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
+    border-left: 1px solid var(--spectrum-alias-border-color-mid);
+    background: var(--spectrum-global-color-gray-50);
+  }
+
+  .usersTable :global(> div) {
+    background: var(--bg-color);
+
+    height: 70px;
+    display: grid;
+    align-items: center;
+    grid-gap: var(--spacing-xl);
+    grid-template-columns: 0.1fr 0.6fr 2fr 0.4fr;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 var(--spacing-s);
+    border-top: 1px solid var(--spectrum-alias-border-color-mid);
+    border-right: 1px solid var(--spectrum-alias-border-color-mid);
+  }
+</style>

packages/builder/src/pages/builder/portal/manage/groups/_components/UserGroupsRow.svelte

@@ -0,0 +1,92 @@
+<script>
+  import { Button, Icon, Body } from "@budibase/bbui"
+  import { goto } from "@roxi/routify"
+
+  export let group
+
+  let { icon, color, name, userCount, appCount } = group
+</script>
+
+<div class="title">
+  <div class="name" style="display: flex; margin-left: var(--spacing-xl)">
+    <div style="background: {color};" class="circle">
+      <div>
+        <Icon size="M" name={icon} />
+      </div>
+    </div>
+    <div class="name" data-cy="app-name-link"><Body size="S">{name}</Body></div>
+  </div>
+</div>
+<div class="desktop tableElement">
+  <Icon name="User" />
+  <div style="margin-left: var(--spacing-l">
+    {parseInt(userCount)} app{parseInt(userCount) === 1 ? "" : "s"}
+  </div>
+</div>
+<div class="desktop tableElement">
+  <Icon name="WebPage" />
+
+  <div style="margin-left: var(--spacing-l">
+    {parseInt(appCount)} app{parseInt(appCount) === 1 ? "" : "s"}
+  </div>
+</div>
+<div>
+  <div class="app-row-actions">
+    <div>
+      <Button on:click={() => $goto(`./${group._id}`)} size="S" cta
+        >Manage</Button
+      >
+    </div>
+  </div>
+</div>
+
+<style>
+  .app-row-actions {
+    display: flex;
+    float: right;
+    margin-right: var(--spacing-xl);
+  }
+  .name {
+    grid-gap: var(--spacing-xl);
+    grid-template-columns: 75px 75px;
+    align-items: center;
+  }
+  .circle {
+    border-radius: 50%;
+    height: 30px;
+    color: white;
+    font-weight: bold;
+    display: inline-block;
+    font-size: 1.2em;
+    width: 30px;
+  }
+
+  .tableElement {
+    display: flex;
+  }
+
+  .circle > div {
+    padding: calc(1.5 * var(--spacing-xs)) var(--spacing-xs);
+  }
+  .name {
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .name :global(.spectrum-Heading) {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-left: calc(1.5 * var(--spacing-xl));
+  }
+  .title :global(h1:hover) {
+    color: var(--spectrum-global-color-blue-600);
+    cursor: pointer;
+    transition: color 130ms ease;
+  }
+
+  @media (max-width: 640px) {
+    .desktop {
+      display: none !important;
+    }
+  }
+</style>

packages/builder/src/pages/builder/portal/manage/groups/_components/UserRow.svelte

@@ -0,0 +1,55 @@
+<script>
+  import { Icon, Body, Avatar } from "@budibase/bbui"
+
+  export let user
+
+  function removeFromGroup() {}
+</script>
+
+<div class="title">
+  <div class="name" style="display: flex; margin-left: var(--spacing-xl)">
+    <div>
+      <Avatar size="L" initials="PC" />
+    </div>
+  </div>
+</div>
+<div class="desktop">
+  <div style="display: flex; align-items: center;">
+    <Body size="M">{user.email}</Body>
+    <div style="opacity: 0.5; margin: var(--spacing-xs) 0 0 var(--spacing-m)">
+      <Body size="XS">{user.access}</Body>
+    </div>
+  </div>
+</div>
+<div class="desktop" />
+<div><Icon on:click={removeFromGroup} hoverable size="L" name="Close" /></div>
+
+<style>
+  .name {
+    grid-gap: var(--spacing-xl);
+    grid-template-columns: 75px 75px;
+    align-items: center;
+  }
+
+  .name {
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .name :global(.spectrum-Heading) {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-left: calc(1.5 * var(--spacing-xl));
+  }
+  .title :global(h1:hover) {
+    color: var(--spectrum-global-color-blue-600);
+    cursor: pointer;
+    transition: color 130ms ease;
+  }
+
+  @media (max-width: 640px) {
+    .desktop {
+      display: none !important;
+    }
+  }
+</style>

packages/builder/src/pages/builder/portal/manage/groups/_layout.svelte

@@ -0,0 +1,3 @@
+<div style="float: right;">
+  <slot />
+</div>

packages/builder/src/pages/builder/portal/manage/groups/index.svelte

@@ -0,0 +1,155 @@
+<script>
+  import {
+    Layout,
+    Heading,
+    ColorPicker,
+    Body,
+    Button,
+    Modal,
+    ModalContent,
+    Input,
+    Tag,
+    Tags,
+    IconPicker,
+  } from "@budibase/bbui"
+  import UserGroupsRow from "./_components/UserGroupsRow.svelte"
+  let modal
+  let selectedColor
+  let selectedIcon
+  let proPlan = true
+
+  let userGroupData = [
+    {
+      _id: "gr_123456",
+      color: "green",
+      icon: "Anchor",
+      name: "Core Team",
+      userCount: 5,
+      appCount: 2,
+    },
+    {
+      _id: "gr_45678",
+      color: "red",
+      icon: "Beaker",
+      name: "QA Team",
+      userCount: 3,
+      appCount: 7,
+    },
+  ]
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <div style="display: flex;">
+      <Heading size="M">User groups</Heading>
+      {#if !proPlan}
+        <Tags>
+          <div class="tags">
+            <div class="tag">
+              <Tag icon="LockClosed">Pro plan</Tag>
+            </div>
+          </div>
+        </Tags>
+      {/if}
+    </div>
+    <Body>Easily assign and manage your users access with User Groups</Body>
+  </Layout>
+  <div class="align-buttons">
+    <Button
+      icon={proPlan ? "UserGroup" : ""}
+      cta={proPlan}
+      on:click={() => modal.show()}
+      >{proPlan ? "Create user group" : "Upgrade Account"}</Button
+    >
+    {#if !proPlan}
+      <Button
+        secondary
+        on:click={() => {
+          window.open("https://budibase.com/pricing/", "_blank")
+        }}>View Plans</Button
+      >
+    {/if}
+  </div>
+
+  <div class="groupTable">
+    {#each userGroupData as group}
+      <div>
+        <UserGroupsRow {group} />
+      </div>
+    {/each}
+  </div>
+</Layout>
+
+<Modal bind:this={modal}>
+  <ModalContent size="M" title="Create User Group" confirmText="Save">
+    <Input label="Team name" />
+    <div class="modal-format">
+      <div class="modal-inner">
+        <Body size="XS">Icon</Body>
+        <div class="modal-spacing">
+          <IconPicker bind:value={selectedIcon} />
+        </div>
+      </div>
+      <div class="modal-inner">
+        <Body size="XS">Color</Body>
+        <div class="modal-spacing">
+          <ColorPicker
+            bind:value={selectedColor}
+            on:change={e => (selectedColor = e.detail)}
+          />
+        </div>
+      </div>
+    </div>
+  </ModalContent>
+</Modal>
+
+<style>
+  .modal-format {
+    display: flex;
+    justify-content: space-between;
+    width: 40%;
+  }
+
+  .modal-inner {
+    display: flex;
+    align-items: center;
+  }
+
+  .modal-spacing {
+    margin-left: var(--spacing-l);
+  }
+
+  .align-buttons {
+    display: flex;
+    column-gap: var(--spacing-xl);
+  }
+  .tag {
+    margin-top: var(--spacing-xs);
+    margin-left: var(--spacing-m);
+  }
+
+  .groupTable {
+    display: grid;
+    grid-template-rows: auto;
+    align-items: center;
+    border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
+    border-left: 1px solid var(--spectrum-alias-border-color-mid);
+    background: var(--spectrum-global-color-gray-50);
+  }
+
+  .groupTable :global(> div) {
+    background: var(--bg-color);
+
+    height: 70px;
+    display: grid;
+    align-items: center;
+    grid-gap: var(--spacing-xl);
+    grid-template-columns: 2fr 2fr 2fr auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 var(--spacing-s);
+    border-top: 1px solid var(--spectrum-alias-border-color-mid);
+    border-right: 1px solid var(--spectrum-alias-border-color-mid);
+  }
+</style>