MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #7019 from Budibase/cheeks-fixes 

User groups fixes
This commit is contained in:
Andrew Kingston 2022-08-01 15:52:51 +01:00 committed by GitHub
parent 25d2619668 0b0c358459
commit cefd36f928
11 changed files with 365 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/bbui/src/Form/Core/PickerDropdown.svelte
View File

@ -233,7 +233,10 @@
</div>
{:else if getPrimaryOptionColour(option, idx)}
<span class="option-left">
<StatusLight color={getPrimaryOptionColour(option, idx)} />
<StatusLight
square
color={getPrimaryOptionColour(option, idx)}
/>
</span>
{/if}
<span class="spectrum-Menu-itemLabel">
@ -253,6 +256,7 @@
{#if getPrimaryOptionIcon(option, idx) && getPrimaryOptionColour(option, idx)}
<span class="option-right">
<StatusLight
square
color={getPrimaryOptionColour(option, idx)}
/>
</span>
@ -281,7 +285,7 @@
</span>
{:else if secondaryFieldColour}
<span class="option-left">
<StatusLight color={secondaryFieldColour} />
<StatusLight square color={secondaryFieldColour} />
</span>
{/if}
@ -319,6 +323,7 @@
{#if getSecondaryOptionColour(option, idx)}
<span class="option-left">
<StatusLight
square
color={getSecondaryOptionColour(option, idx)}
/>
</span>
@ -351,6 +356,13 @@
min-width: 0;
width: 100%;
}
.spectrum-InputGroup :global(.spectrum-Search-input) {
border: none;
border-bottom: 1px solid var(--spectrum-global-color-gray-300);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.override-borders {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;

2
packages/builder/src/pages/builder/portal/_layout.svelte
View File

@ -72,7 +72,7 @@
href: "/builder/portal/manage/groups",
}
menu.splice(1, 0, item)
menu.splice(2, 0, item)
}
if (!$adminStore.cloud) {

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

@ -18,23 +18,44 @@
import { users, apps, groups } from "stores/portal"
import { onMount } from "svelte"
import { RoleUtils } from "@budibase/frontend-core"
import { roles } from "stores/backend"
export let groupId
let popoverAnchor
let popover
let searchTerm = ""
let selectedUsers = []
let prevSearch = undefined,
search = undefined
let prevSearch = undefined
let pageInfo = createPaginationStore()
let loaded = false
$: page = $pageInfo.page
$: fetchUsers(page, search)
$: fetchUsers(page, searchTerm)
$: group = $groups.find(x => x._id === groupId)
async function addAll() {
group.users = selectedUsers
selectedUsers = [...selectedUsers, ...filtered.map(u => u._id)]
let reducedUserObjects = filtered.map(u => {
return {
_id: u._id,
email: u.email,
}
})
group.users = [...reducedUserObjects, ...group.users]
await groups.actions.save(group)
$users.data.forEach(async user => {
let userToEdit = await users.get(user._id)
let userGroups = userToEdit.userGroups || []
userGroups.push(groupId)
await users.save({
...userToEdit,
userGroups,
})
})
}
async function selectUser(id) {
@ -97,26 +118,37 @@
prevSearch = search
try {
pageInfo.loading()
await users.search({ page, search })
await users.search({ page, email: search })
pageInfo.fetched($users.hasNextPage, $users.nextPage)
} catch (error) {
notifications.error("Error getting user list")
}
}
const getRoleLabel = appId => {
const roleId = group?.roles?.[`app_${appId}`]
const role = $roles.find(x => x._id === roleId)
return role?.name || "Custom role"
}
onMount(async () => {
try {
await groups.actions.init()
await apps.load()
await Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
loaded = true
} catch (error) {
notifications.error("Error fetching User Group data")
notifications.error("Error fetching user group data")
}
})
</script>
<Layout noPadding>
{#if loaded}
<Layout noPadding>
<div>
<ActionButton on:click={() => $goto("../groups")} size="S" icon="ArrowLeft">
<ActionButton
on:click={() => $goto("../groups")}
size="S"
icon="ArrowLeft"
>
Back
</ActionButton>
</div>
@ -132,7 +164,7 @@
</div>
</div>
<div bind:this={popoverAnchor}>
<Button on:click={popover.show()} icon="UserAdd" cta>Add User</Button>
<Button on:click={popover.show()} icon="UserAdd" cta>Add user</Button>
</div>
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
<UserGroupPicker
@ -169,7 +201,8 @@
>
<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
<Body size="S"
>Manage apps that this User group has been assigned to</Body
>
</div>
</div>
@ -184,11 +217,11 @@
>
<div class="title ">
<StatusLight
color={RoleUtils.getRoleColour(group.roles[app.appId])}
/>
<div style="margin-left: var(--spacing-s);">
<Body size="XS">{group.roles[app.appId]}</Body>
</div>
square
color={RoleUtils.getRoleColour(group.roles[`app_${app.appId}`])}
>
{getRoleLabel(app.appId)}
</StatusLight>
</div>
</ListItem>
{/each}
@ -196,7 +229,8 @@
<ListItem icon="UserGroup" title="No apps" />
{/if}
</List>
</Layout>
</Layout>
{/if}
<style>
.text-padding {

26
packages/builder/src/pages/builder/portal/manage/groups/index.svelte
View File

@ -14,13 +14,9 @@
import { Constants } from "@budibase/frontend-core"
import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
import UserGroupsRow from "./_components/UserGroupsRow.svelte"
import { cloneDeep } from "lodash/fp"
$: hasGroupsLicense = $auth.user?.license.features.includes(
Constants.Features.USER_GROUPS
)
let modal
let group = {
const DefaultGroup = {
name: "",
icon: "UserGroup",
color: "var(--spectrum-global-color-blue-600)",
@ -28,6 +24,12 @@
apps: [],
roles: {},
}
let modal
let group = cloneDeep(DefaultGroup)
$: hasGroupsLicense = $auth.user?.license.features.includes(
Constants.Features.USER_GROUPS
)
async function deleteGroup(group) {
try {
@ -45,6 +47,11 @@
}
}
const showCreateGroupModal = () => {
group = cloneDeep(DefaultGroup)
modal?.show()
}
onMount(async () => {
try {
if (hasGroupsLicense) {
@ -78,10 +85,11 @@
icon={hasGroupsLicense ? "UserGroup" : ""}
cta={hasGroupsLicense}
on:click={hasGroupsLicense
? () => modal.show()
? showCreateGroupModal
: window.open("https://budibase.com/pricing/", "_blank")}
>{hasGroupsLicense ? "Create user group" : "Upgrade Account"}</Button
>
{hasGroupsLicense ? "Create user group" : "Upgrade Account"}
</Button>
{#if !hasGroupsLicense}
<Button
newStyles
@ -130,7 +138,7 @@
.groupTable :global(> div) {
background: var(--bg-color);
height: 70px;
height: 55px;
display: grid;
align-items: center;
grid-gap: var(--spacing-xl);

103
packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
View File

@ -21,9 +21,9 @@
StatusLight,
} from "@budibase/bbui"
import { onMount } from "svelte"
import { fetchData } from "helpers"
import { users, auth, groups, apps } from "stores/portal"
import { roles } from "stores/backend"
import { Constants } from "@budibase/frontend-core"
import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte"
import { RoleUtils } from "@budibase/frontend-core"
@ -40,6 +40,7 @@
let selectedGroups = []
let allAppList = []
let user
let loaded = false
$: fetchUser(userId)
$: fullName = $userFetch?.data?.firstName
@ -49,6 +50,8 @@
$: hasGroupsLicense = $auth.user?.license.features.includes(
Constants.Features.USER_GROUPS
)
$: nameLabel = getNameLabel($userFetch)
$: initials = getInitials(nameLabel)
$: allAppList = $apps
.filter(x => {
@ -91,6 +94,39 @@
const userFetch = fetchData(`/api/global/users/${userId}`)
const getNameLabel = userFetch => {
const { firstName, lastName, email } = userFetch?.data || {}
if (!firstName && !lastName) {
return email || ""
}
let label
if (firstName) {
label = firstName
if (lastName) {
label += ` ${lastName}`
}
} else {
label = lastName
}
return label
}
const getInitials = nameLabel => {
if (!nameLabel) {
return "?"
}
return nameLabel
.split(" ")
.slice(0, 2)
.map(x => x[0])
.join("")
}
const getRoleLabel = roleId => {
const role = $roles.find(x => x._id === roleId)
return role?.name || "Custom role"
}
function getHighestRole(roles) {
let highestRole
let highestRoleNumber = 0
@ -171,15 +207,16 @@
function addAll() {}
onMount(async () => {
try {
await groups.actions.init()
await apps.load()
await Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
loaded = true
} catch (error) {
notifications.error("Error getting User groups")
notifications.error("Error getting user groups")
}
})
</script>
<Layout gap="L" noPadding>
{#if loaded}
<Layout gap="L" noPadding>
<Layout gap="XS" noPadding>
<div>
<ActionButton on:click={() => $goto("./")} size="S" icon="ArrowLeft">
@ -191,27 +228,15 @@
<div class="title">
<div>
<div style="display: flex;">
<Avatar
size="XXL"
initials={user?.email
.split(" ")
.map(x => x[0])
.join("")}
/>
{#if fullName}
<Avatar size="XXL" {initials} />
<div class="subtitle">
<Heading size="S">{fullName}</Heading>
<Heading size="S">{nameLabel}</Heading>
{#if nameLabel !== $userFetch?.data?.email}
<Body size="XS">{$userFetch?.data?.email}</Body>
</div>
{:else}
<div class="alignEmail">
<Heading size="S">{$userFetch?.data?.email}</Heading>
</div>
{/if}
</div>
</div>
</div>
<div>
<ActionMenu align="right">
<span slot="control">
@ -220,7 +245,8 @@
<MenuItem on:click={resetPasswordModal.show} icon="Refresh"
>Force Password Reset</MenuItem
>
<MenuItem on:click={deleteModal.show} icon="Delete">Delete</MenuItem>
<MenuItem on:click={deleteModal.show} icon="Delete">Delete</MenuItem
>
</ActionMenu>
</div>
</div>
@ -266,9 +292,9 @@
<Body size="S">Add or remove this user from user groups</Body>
</div>
<div bind:this={popoverAnchor}>
<Button on:click={popover.show()} icon="UserGroup" cta
>Add User Group</Button
>
<Button on:click={popover.show()} icon="UserGroup" cta>
Add user group
</Button>
</div>
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
<UserGroupPicker
@ -316,7 +342,10 @@
<List>
{#if allAppList.length}
{#each allAppList as app}
<div class="pointer" on:click={$goto(`../../overview/${app.devId}`)}>
<div
class="pointer"
on:click={$goto(`../../overview/${app.devId}`)}
>
<ListItem
title={app.name}
iconBackground={app?.icon?.color || ""}
@ -324,13 +353,11 @@
>
<div class="title ">
<StatusLight
square
color={RoleUtils.getRoleColour(getHighestRole(app.roles))}
/>
<div style="margin-left: var(--spacing-s);">
<Body size="XS"
>{Constants.Roles[getHighestRole(app.roles)]}</Body
>
</div>
{getRoleLabel(getHighestRole(app.roles))}
</StatusLight>
</div>
</ListItem>
</div>
@ -340,7 +367,8 @@
{/if}
</List>
</Layout>
</Layout>
</Layout>
{/if}
<Modal bind:this={deleteModal}>
<DeleteUserModal user={$userFetch.data} />
@ -380,17 +408,14 @@
.subtitle {
padding: 0 0 0 var(--spacing-m);
display: inline-block;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.appsTitle {
display: flex;
flex-direction: column;
}
.alignEmail {
display: flex;
align-items: center;
margin-left: var(--spacing-m);
}
</style>

5
packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
View File

@ -123,12 +123,7 @@
.fix-height {
margin-bottom: 5%;
}
.normal-height {
margin-bottom: 0%;
}
:global(.spectrum-Picker) {
border-top-left-radius: 0px;
}
</style>

4
packages/builder/src/pages/builder/portal/manage/users/_components/ImportUsersModal.svelte
View File

@ -108,10 +108,6 @@
</ModalContent>
<style>
:global(.spectrum-Picker) {
border-top-left-radius: 0px;
}
.dropzone {
text-align: center;
display: flex;

4
packages/builder/src/pages/builder/portal/manage/users/_components/PasswordModal.svelte
View File

@ -79,10 +79,6 @@
display: flex;
}
:global(.spectrum-Picker) {
border-top-left-radius: 0px;
}
.container {
width: 100%;
height: var(--spectrum-alias-item-height-l);

4
packages/builder/src/pages/builder/portal/manage/users/index.svelte
View File

@ -249,10 +249,10 @@
dataCy="add-user"
on:click={createUserModal.show}
icon="UserAdd"
cta>Add Users</Button
cta>Add users</Button
>
<Button on:click={importUsersModal.show} icon="Import" primary
>Import Users</Button
>Import users</Button
>
<div class="field">

11
packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte
View File

@ -3,6 +3,7 @@
ModalContent,
PickerDropdown,
ActionButton,
Layout,
notifications,
} from "@budibase/bbui"
import { roles } from "stores/backend"
@ -38,9 +39,9 @@
}
}
$: filteredGroups = $groups.filter(element => {
return !element.apps.find(y => {
return y.appId === app.appId
$: filteredGroups = $groups.filter(group => {
return !group.apps.find(appId => {
return appId === app.appId
})
})
@ -78,11 +79,13 @@
onConfirm={() => addData(appData)}
showCloseIcon={false}
>
<Layout noPadding gap="XS">
{#each appData as input, index}
<PickerDropdown
autocomplete
primaryOptions={optionSections}
secondaryOptions={$roles}
secondaryPlaceholder="Access"
bind:primaryValue={input.id}
bind:secondaryValue={input.role}
bind:searchTerm={search}
@ -95,7 +98,7 @@
getSecondaryOptionColour={role => RoleUtils.getRoleColour(role._id)}
/>
{/each}
</Layout>
<div>
<ActionButton on:click={addNewInput} icon="Add">Add email</ActionButton>
</div>

8
packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
View File

@ -5,7 +5,7 @@
import { store } from "builderStore"
import clientPackage from "@budibase/client/package.json"
import { processStringSync } from "@budibase/string-templates"
import { users, auth } from "stores/portal"
import { users, auth, apps } from "stores/portal"
import { createEventDispatcher, onMount } from "svelte"
export let app
@ -40,9 +40,11 @@
}
onMount(async () => {
let resp = await users.getUserCountByApp({ appId: "app_" + app.appId })
let resp = await users.getUserCountByApp({
appId: apps.getProdAppID(app.devId),
})
userCount = resp.userCount
await users.search({ appId: "app_" + app.appId, limit: 4 })
await users.search({ appId: apps.getProdAppID(app.devId), limit: 4 })
})
</script>