updated store and finished groups tab

packages/backend-core/src/db/constants.js

@@ -15,7 +15,7 @@ exports.DocumentTypes = {
   ROLE: "role",
   MIGRATIONS: "migrations",
   DEV_INFO: "devinfo",
-  GROUP: "gr"
+  GROUP: "gr",
 }
 
 exports.StaticDatabases = {

packages/backend-core/src/db/utils.js

@@ -170,7 +170,6 @@ exports.getUserGroupsParams = (groupId, otherProps = {}) => {
   }
 }
 
-
 /**
  * Generates a new role ID.
  * @returns {string} The new role ID which the role doc can be stored under.

packages/bbui/src/IconPicker/IconPicker.svelte

@@ -4,6 +4,7 @@
   import clickOutside from "../Actions/click_outside"
   import { fly } from "svelte/transition"
   import Icon from "../Icon/Icon.svelte"
+  import { createEventDispatcher } from "svelte"
 
   export let value = "Anchor"
   export let size = "M"
@@ -11,7 +12,7 @@
 
   let open = false
 
-  // const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher()
 
   const iconList = [
     {
@@ -44,12 +45,11 @@
       ],
     },
   ]
-  /*
+
   const onChange = value => {
     dispatch("change", value)
     open = false
   }
-*/
 </script>
 
 <div class="container">
@@ -76,7 +76,7 @@
             {#each icon.icons as icon}
               <div
                 on:click={() => {
-                  value = icon
+                  onChange(icon)
                 }}
               >
                 <Icon name={icon} />

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

@@ -11,50 +11,66 @@
     Search,
     Divider,
     Detail,
+    notifications,
   } from "@budibase/bbui"
   import UserRow from "./_components/UserRow.svelte"
-  import { users } from "stores/portal"
+  import { users, apps, groups } from "stores/portal"
   import { onMount } from "svelte"
+  import GroupAppsRow from "./_components/GroupAppsRow.svelte"
 
+  export let groupId
   let popoverAnchor
   let popover
+  $: group = $groups.find(x => x._id === groupId)
   let searchTerm = ""
   let selectedUsers = []
-  $: filteredUsers = $users.filter(user =>
-    user?.email?.toLowerCase().includes(searchTerm.toLowerCase())
+  $: filteredUsers = $users.filter(
+    user =>
+      selectedUsers &&
+      user?.email?.toLowerCase().includes(searchTerm.toLowerCase())
   )
-
-  let group = {
-    _id: "gr_123456",
-    color: "green",
-    icon: "Anchor",
-    name: "Core Team",
-    userCount: 5,
-    appCount: 2,
-  }
-
-  let groupUsers = [
+  let app_list = [
     {
-      email: "peter@budibase.com",
       access: "Developer",
+      name: "test app",
+      icon: "Anchor",
+      color: "blue",
     },
   ]
 
-  /*
-  function getGroup() {
-    return 
+  async function addAll() {
+    selectedUsers = [...selectedUsers, ...filteredUsers]
+    group.users = selectedUsers
+    await groups.actions.save(group)
   }
-  */
-  function selectUser(id) {
-    let user = selectedUsers.find(user_id => user_id === id)
-    if (user) {
-      selectedUsers = selectedUsers.filter(id => id !== user)
+
+  async function selectUser(id) {
+    let selectedUser = selectedUsers.find(user_id => user_id === id)
+    let enrichedUser = $users.find(user => user._id === id)
+    if (selectedUser) {
+      selectedUsers = selectedUsers.filter(id => id !== selectedUser)
+      let newUsers = group.users.filter(user => user._id !== id)
+      group.users = newUsers
     } else {
       selectedUsers = [...selectedUsers, id]
+      group.users.push(enrichedUser)
     }
+    await groups.actions.save(group)
   }
-  onMount(() => {
-    console.log($users)
+
+  async function removeUser(id) {
+    let newUsers = group.users.filter(user => user._id !== id)
+    group.users = newUsers
+    await groups.actions.save(group)
+  }
+  onMount(async () => {
+    try {
+      await groups.actions.init()
+      await users.init()
+      await apps.load()
+    } catch (error) {
+      notifications.error("Error fetching User Group data")
+    }
   })
 </script>
 
@@ -66,13 +82,13 @@
   </div>
   <div class="header">
     <div class="title">
-      <div style="background: {group.color};" class="circle">
+      <div style="background: {group?.color};" class="circle">
         <div>
-          <Icon size="M" name={group.icon} />
+          <Icon size="M" name={group?.icon} />
         </div>
       </div>
       <div class="text-padding">
-        <Heading>{group.name}</Heading>
+        <Heading>{group?.name}</Heading>
       </div>
     </div>
     <div bind:this={popoverAnchor}>
@@ -90,7 +106,9 @@
             >
           </div>
           <div>
-            <ActionButton emphasized size="S">Add all</ActionButton>
+            <ActionButton on:click={addAll} emphasized size="S"
+              >Add all</ActionButton
+            >
           </div>
         </div>
         <Divider noMargin />
@@ -121,10 +139,39 @@
   </div>
 
   <div class="usersTable">
-    {#if groupUsers.length}
-      {#each groupUsers as user}
+    {#if group?.users.length}
+      {#each group.users as user}
         <div>
-          <UserRow {user} />
+          <UserRow {removeUser} {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>
+  <div
+    style="flex-direction: column; margin-top: var(--spacing-m)"
+    class="title"
+  >
+    <Heading weight="light" size="XS">Apps</Heading>
+    <div style="margin-top: var(--spacing-xs)">
+      <Body size="S">Manage apps that this User group has been assigned to</Body
+      >
+    </div>
+  </div>
+
+  <div style="" class="usersTable">
+    {#if app_list.length}
+      {#each app_list as app}
+        <div>
+          <GroupAppsRow {app} />
         </div>
       {/each}
     {:else}

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

@@ -0,0 +1,58 @@
+<script>
+  import {
+    ColorPicker,
+    Body,
+    ModalContent,
+    Input,
+    IconPicker,
+  } from "@budibase/bbui"
+
+  export let group
+  export let saveGroup
+</script>
+
+<ModalContent
+  onConfirm={() => saveGroup(group)}
+  size="M"
+  title="Create User Group"
+  confirmText="Save"
+>
+  <Input bind:value={group.name} label="Team name" />
+  <div class="modal-format">
+    <div class="modal-inner">
+      <Body size="XS">Icon</Body>
+      <div class="modal-spacing">
+        <IconPicker
+          on:change={e => (group.icon = e.detail)}
+          bind:value={group.icon}
+        />
+      </div>
+    </div>
+    <div class="modal-inner">
+      <Body size="XS">Color</Body>
+      <div class="modal-spacing">
+        <ColorPicker
+          bind:value={group.color}
+          on:change={e => (group.color = e.detail)}
+        />
+      </div>
+    </div>
+  </div>
+</ModalContent>
+
+<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);
+  }
+</style>

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

@@ -0,0 +1,58 @@
+<script>
+  import { Icon, Body, StatusLight } from "@budibase/bbui"
+
+  export let app
+</script>
+
+<div class="title">
+  <div class="name" style="display: flex; margin-left: var(--spacing-xl)">
+    <div class="app-icon" style="color: {app.icon?.color || ''}">
+      <Icon size="XL" name={app.icon?.name || "Apps"} />
+    </div>
+  </div>
+</div>
+<div class="desktop">
+  <div style="display: flex; align-items: center;">
+    <Body size="M">{app.name}</Body>
+    <div style="opacity: 0.5; margin: var(--spacing-xs) 0 0 var(--spacing-m)">
+      <Body size="XS">{app.access}</Body>
+    </div>
+  </div>
+</div>
+<div class="desktop" />
+<div
+  style="display: flex; align-items: baseline;     margin-right: var(--spacing-xl);"
+>
+  <StatusLight purple />
+  <Body size="XS">{app.access}</Body>
+</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/_components/UserGroupsRow.svelte

@@ -1,50 +1,87 @@
 <script>
-  import { Button, Icon, Body } from "@budibase/bbui"
+  import {
+    Button,
+    Icon,
+    Body,
+    ActionMenu,
+    MenuItem,
+    Modal,
+  } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
+  import CreateEditGroupModal from "./CreateEditGroupModal.svelte"
 
   export let group
+  export let deleteGroup
+  export let saveGroup
+  let modal
 
-  let { icon, color, name, userCount, appCount } = group
+  function editGroup() {
+    modal.show()
+  }
 </script>
 
 <div class="title">
   <div class="name" style="display: flex; margin-left: var(--spacing-xl)">
-    <div style="background: {color};" class="circle">
+    <div style="background: {group.color};" class="circle">
       <div>
-        <Icon size="M" name={icon} />
+        <Icon size="M" name={group.icon} />
       </div>
     </div>
-    <div class="name" data-cy="app-name-link"><Body size="S">{name}</Body></div>
+    <div class="name" data-cy="app-name-link">
+      <Body size="S">{group.name}</Body>
+    </div>
   </div>
 </div>
 <div class="desktop tableElement">
   <Icon name="User" />
   <div style="margin-left: var(--spacing-l">
-    {parseInt(userCount)} user{parseInt(userCount) === 1 ? "" : "s"}
+    {parseInt(group.userCount) || 0} user{parseInt(group.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 style="margin-left: var(--spacing-l)">
+    {parseInt(group.appCount) || 0} app{parseInt(group.appCount) === 1
+      ? ""
+      : "s"}
   </div>
 </div>
 <div>
-  <div class="app-row-actions">
+  <div class="group-row-actions">
     <div>
       <Button on:click={() => $goto(`./${group._id}`)} size="S" cta
         >Manage</Button
       >
     </div>
+    <div class="">
+      <ActionMenu align="right">
+        <span slot="control">
+          <Icon hoverable name="More" />
+        </span>
+        <MenuItem on:click={() => deleteGroup(group)} icon="Delete"
+          >Delete</MenuItem
+        >
+        <MenuItem on:click={() => editGroup(group)} icon="Delete">Edit</MenuItem
+        >
+      </ActionMenu>
+    </div>
   </div>
 </div>
 
+<Modal bind:this={modal}>
+  <CreateEditGroupModal {group} {saveGroup} />
+</Modal>
+
 <style>
-  .app-row-actions {
+  .group-row-actions {
     display: flex;
     float: right;
     margin-right: var(--spacing-xl);
+    grid-template-columns: 75px 75px;
+    grid-gap: var(--spacing-xl);
   }
   .name {
     grid-gap: var(--spacing-xl);

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

@@ -2,8 +2,8 @@
   import { Icon, Body, Avatar } from "@budibase/bbui"
 
   export let user
-
-  function removeFromGroup() {}
+  export let removeUser
+  $: console.log(user)
 </script>
 
 <div class="title">
@@ -22,7 +22,9 @@
   </div>
 </div>
 <div class="desktop" />
-<div><Icon on:click={removeFromGroup} hoverable size="L" name="Close" /></div>
+<div>
+  <Icon on:click={() => removeUser(user._id)} hoverable size="L" name="Close" />
+</div>
 
 <style>
   .name {

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

@@ -2,35 +2,34 @@
   import {
     Layout,
     Heading,
-    ColorPicker,
     Body,
     Button,
     Modal,
-    ModalContent,
-    Input,
     Tag,
     Tags,
-    IconPicker,
+    notifications,
   } from "@budibase/bbui"
-  import { API } from "api"
   import { groups } from "stores/portal"
   import { onMount } from "svelte"
+  import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
 
   import UserGroupsRow from "./_components/UserGroupsRow.svelte"
 
   let modal
-  let selectedColor
-  let selectedIcon
-  let groupName
+  let group = {}
   let proPlan = true
 
-  async function saveConfig() {
+  async function deleteGroup(group) {
     try {
-      API.saveGroup({
-        color: selectedColor,
-        icon: selectedIcon,
-        name: groupName,
-      })
+      groups.actions.delete(group)
+    } catch (error) {
+      notifications.error(`Failed to delete group`)
+    }
+  }
+
+  async function saveGroup(group) {
+    try {
+      await groups.actions.save(group)
     } catch (error) {
       notifications.error(`Failed to save group`)
     }
@@ -38,7 +37,7 @@
 
   onMount(async () => {
     try {
-      await groups.init()
+      await groups.actions.init()
     } catch (error) {
       notifications.error("Error getting User groups")
     }
@@ -81,56 +80,17 @@
   <div class="groupTable">
     {#each $groups as group}
       <div>
-        <UserGroupsRow {group} />
+        <UserGroupsRow {saveGroup} {deleteGroup} {group} />
       </div>
     {/each}
   </div>
 </Layout>
 
 <Modal bind:this={modal}>
-  <ModalContent
-    onConfirm={saveConfig}
-    size="M"
-    title="Create User Group"
-    confirmText="Save"
-  >
-    <Input bind:value={groupName} 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>
+  <CreateEditGroupModal {group} {saveGroup} />
 </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);

packages/builder/src/stores/portal/groups.js

@@ -1,24 +1,46 @@
 import { writable } from "svelte/store"
 import { API } from "api"
-import { update } from "lodash"
 
 export function createGroupsStore() {
-    const { subscribe, set } = writable([])
+  const store = writable([])
 
-    async function init() {
-        const users = await API.getGroups()
-        set(users)
-    }
+  const actions = {
+    init: async () => {
+      const users = await API.getGroups()
+      store.set(users)
+    },
 
-    async function save(data) {
-        await API.saveGroup(data)
-    }
+    save: async group => {
+      const response = await API.saveGroup(group)
+      group._id = response._id
+      group._rev = response._rev
+      store.update(state => {
+        const currentIdx = state.findIndex(gr => gr._id === response._id)
+        if (currentIdx >= 0) {
+          state.splice(currentIdx, 1, group)
+        } else {
+          state.push(group)
+        }
+        return state
+      })
+    },
 
-    return {
-        subscribe,
-        init,
-        save,
-    }
+    delete: async group => {
+      await API.deleteGroup({
+        id: group._id,
+        rev: group._rev,
+      })
+      store.update(state => {
+        state = state.filter(state => state._id !== group._id)
+        return state
+      })
+    },
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions,
+  }
 }
 
 export const groups = createGroupsStore()

packages/builder/src/stores/portal/index.js

@@ -7,4 +7,4 @@ export { auth } from "./auth"
 export { oidc } from "./oidc"
 export { templates } from "./templates"
 export { licensing } from "./licensing"
-export { groups } from "./groups"
+export { groups } from "./groups"

packages/frontend-core/src/api/groups.js

@@ -1,18 +1,40 @@
 export const buildGroupsEndpoints = API => ({
-    /**
-     * Creates or updates a user in the current tenant.
-     * @param user the new user to create
-     */
-    saveGroup: async group => {
-        return await API.post({
-            url: "/api/global/groups",
-            body: group,
-        })
-    },
-    getGroups: async () => {
-        return await API.get({
-            url: "/api/global/groups",
-        })
+  /**
+   * Creates a user group.
+   * @param user the new group to create
+   */
+  saveGroup: async group => {
+    return await API.post({
+      url: "/api/global/groups",
+      body: group,
+    })
+  },
+  /**
+   * Gets all of the user groups
+   */
+  getGroups: async () => {
+    return await API.get({
+      url: "/api/global/groups",
+    })
+  },
 
-    }
+  /**
+   * Gets a group by ID
+   */
+  getGroup: async id => {
+    return await API.get({
+      url: `/api/global/groups/${id}`,
+    })
+  },
+
+  /**
+   * Deletes a user group
+   * @param id the id of the config to delete
+   * @param rev the revision of the config to delete
+   */
+  deleteGroup: async ({ id, rev }) => {
+    return await API.delete({
+      url: `/api/global/groups/${id}/${rev}`,
+    })
+  },
 })

packages/frontend-core/src/api/index.js

@@ -236,6 +236,6 @@ export const createAPIClient = config => {
     ...buildViewEndpoints(API),
     ...buildSelfEndpoints(API),
     ...buildLicensingEndpoints(API),
-    ...buildGroupsEndpoints(API)
+    ...buildGroupsEndpoints(API),
   }
 }

packages/worker/src/api/controllers/global/groups.js

@@ -1,58 +0,0 @@
-const {
-    generateUserGroupID,
-    getUserGroupsParams
-} = require("@budibase/backend-core/db")
-const { Configs } = require("../../../constants")
-const email = require("../../../utilities/email")
-const { getGlobalDB, getTenantId } = require("@budibase/backend-core/tenancy")
-const env = require("../../../environment")
-const {
-    withCache,
-    CacheKeys,
-    bustCache,
-} = require("@budibase/backend-core/cache")
-
-
-exports.save = async function (ctx) {
-    const db = getGlobalDB()
-
-    // Config does not exist yet
-    if (!ctx.request.body._id) {
-        ctx.request.body._id = generateUserGroupID(ctx.request.body.name)
-    }
-
-    try {
-        const response = await db.put(ctx.request.body)
-        ctx.body = {
-            _id: response.id,
-            _rev: response.rev,
-        }
-    } catch (err) {
-        ctx.throw(400, err)
-    }
-}
-
-exports.fetch = async function (ctx) {
-    const db = getGlobalDB()
-    console.log('in here')
-    const response = await db.allDocs(
-        getUserGroupsParams(null, {
-            include_docs: true,
-        })
-    )
-    ctx.body = response.rows.map(row => row.doc)
-
-}
-
-
-exports.destroy = async function (ctx) {
-    const db = getGlobalDB()
-    const { id, rev } = ctx.params
-
-    try {
-        await db.remove(id, rev)
-        ctx.body = { message: "Group deleted successfully" }
-    } catch (err) {
-        ctx.throw(err.status, err)
-    }
-}

packages/worker/src/api/controllers/global/groups.ts

@@ -0,0 +1,66 @@
+const {
+  generateUserGroupID,
+  getUserGroupsParams,
+} = require("@budibase/backend-core/db")
+const { Configs } = require("../../../constants")
+const email = require("../../../utilities/email")
+const { getGlobalDB, getTenantId } = require("@budibase/backend-core/tenancy")
+const env = require("../../../environment")
+const {
+  withCache,
+  CacheKeys,
+  bustCache,
+} = require("@budibase/backend-core/cache")
+
+exports.save = async function (ctx: any) {
+  const db = getGlobalDB()
+
+  // Config does not exist yet
+  if (!ctx.request.body._id) {
+    ctx.request.body._id = generateUserGroupID(ctx.request.body.name)
+  }
+
+  try {
+    const response = await db.put(ctx.request.body)
+    ctx.body = {
+      _id: response.id,
+      _rev: response.rev,
+    }
+  } catch (err) {
+    ctx.throw(400, err)
+  }
+}
+
+exports.fetch = async function (ctx: any) {
+  const db = getGlobalDB()
+  const response = await db.allDocs(
+    getUserGroupsParams(null, {
+      include_docs: true,
+    })
+  )
+  ctx.body = response.rows.map((row: any) => row.doc)
+}
+
+exports.destroy = async function (ctx: any) {
+  const db = getGlobalDB()
+  const { id, rev } = ctx.params
+
+  try {
+    await db.remove(id, rev)
+    ctx.body = { message: "Group deleted successfully" }
+  } catch (err: any) {
+    ctx.throw(err.status, err)
+  }
+}
+
+/**
+ * Gets a group by ID from the global database.
+ */
+exports.find = async function (ctx: any) {
+  const db = getGlobalDB()
+  try {
+    ctx.body = await db.get(ctx.params.id)
+  } catch (err: any) {
+    ctx.throw(err.status, err)
+  }
+}

packages/worker/src/api/routes/global/groups.js

@@ -7,21 +7,26 @@ const Joi = require("joi")
 const router = Router()
 
 function buildGroupSaveValidation() {
-    // prettier-ignore
-    return joiValidator.body(Joi.object({
-        color: Joi.string().required(),
-        icon: Joi.string().required(),
-        name: Joi.string().required()
-    }).required())
+  // prettier-ignore
+  return joiValidator.body(Joi.object({
+    _id: Joi.string().optional(),
+    _rev: Joi.string().optional(),
+    color: Joi.string().required(),
+    icon: Joi.string().required(),
+    name: Joi.string().required(),
+    users: Joi.array().optional()
+  }).required())
 }
 
-router.post(
+router
+  .post(
     "/api/global/groups",
     adminOnly,
     buildGroupSaveValidation(),
     controller.save
-)
-    .get("/api/global/groups", controller.fetch)
-
+  )
+  .get("/api/global/groups", controller.fetch)
+  .delete("/api/global/groups/:id/:rev", adminOnly, controller.destroy)
+  .get("/api/global/groups/:id", adminOnly, controller.find)
 
 module.exports = router

packages/worker/src/api/routes/index.js

@@ -26,5 +26,5 @@ exports.routes = [
   statusRoutes,
   selfRoutes,
   licenseRoutes,
-  userGroupRoutes
+  userGroupRoutes,
 ]