diff --git a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
index df228f8fbc..74a1629357 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
@@ -216,15 +216,13 @@
</script>
{#if loaded}
- <Layout gap="L" noPadding>
- <Layout gap="XS" noPadding>
- <div>
- <ActionButton on:click={() => $goto("./")} icon="ArrowLeft">
- Back
- </ActionButton>
- </div>
- </Layout>
- <Layout gap="XS" noPadding>
+ <Layout gap="XL" noPadding>
+ <div>
+ <ActionButton on:click={() => $goto("./")} icon="ArrowLeft">
+ Back
+ </ActionButton>
+ </div>
+ <Layout noPadding gap="S">
<div class="title">
<div>
<div style="display: flex;">
@@ -253,8 +251,6 @@
</div>
{/if}
</div>
- </Layout>
- <Layout gap="S" noPadding>
<div class="fields">
<div class="field">
<Label size="L">First name</Label>
@@ -291,7 +287,7 @@
<Layout gap="S" noPadding>
<div class="tableTitle">
<div>
- <Heading size="XS">User groups</Heading>
+ <Heading size="S">User groups</Heading>
<Body size="S">Add or remove this user from user groups</Body>
</div>
<div bind:this={popoverAnchor}>
@@ -337,7 +333,7 @@
<!-- User Apps -->
<Layout gap="S" noPadding>
<div>
- <Heading size="XS">Apps</Heading>
+ <Heading size="S">Apps</Heading>
<Body size="S">Manage apps that this user has been assigned to</Body>
</div>
<List>
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte b/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte
index 4f481d374c..0a2daf7580 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte
@@ -3,14 +3,18 @@
import { Constants } from "@budibase/frontend-core"
export let row
- $: value =
- Constants.BbRoles.find(x => x.value === users.getUserRole(row))?.label ||
- "Not Available"
+
+ const TooltipMap = {
+ appUser: "Only has access to published apps",
+ developer: "Access to the app builder",
+ admin: "Full access",
+ }
+
+ $: role = Constants.BbRoles.find(x => x.value === users.getUserRole(row))
+ $: value = role?.label || "Not available"
+ $: tooltip = TooltipMap[role?.value] || ""
</script>
-<div on:click|stopPropagation>
+<div on:click|stopPropagation title={tooltip}>
{value}
</div>
-
-<style>
-</style>
diff --git a/packages/builder/src/pages/builder/portal/manage/users/index.svelte b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
index b6cac9ece3..b5b4881d14 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@@ -8,11 +8,9 @@
Layout,
Modal,
ModalContent,
- Icon,
+ Search,
notifications,
Pagination,
- Search,
- Label,
} from "@budibase/bbui"
import AddUserModal from "./_components/AddUserModal.svelte"
import { users, groups, auth } from "stores/portal"
@@ -30,21 +28,6 @@
import { Constants } from "@budibase/frontend-core"
import { get } from "svelte/store"
- const accessTypes = [
- {
- icon: "User",
- description: "App user - Only has access to published apps",
- },
- {
- icon: "Hammer",
- description: "Developer - Access to the app builder",
- },
- {
- icon: "Draw",
- description: "Admin - Full access",
- },
- ]
-
//let email
let enrichedUsers = []
let createUserModal,
@@ -236,19 +219,8 @@
<Layout gap="XS" noPadding>
<Heading>Users</Heading>
<Body>Add users and control who gets access to your published apps</Body>
-
- <div>
- {#each accessTypes as type}
- <div class="access-description">
- <Icon name={type.icon} />
- <div class="access-text">
- <Body size="S">{type.description}</Body>
- </div>
- </div>
- {/each}
- </div>
</Layout>
- <Layout gap="S" noPadding>
+ <div class="controls">
<ButtonGroup>
<Button
dataCy="add-user"
@@ -256,39 +228,43 @@
icon="UserAdd"
cta>Add users</Button
>
- <Button on:click={importUsersModal.show} icon="Import" primary
- >Import users</Button
+ <Button
+ on:click={importUsersModal.show}
+ icon="Import"
+ secondary
+ newStyles
>
-
- <div class="field">
- <Label size="L">Search email</Label>
- <Search bind:value={searchEmail} placeholder="" />
- </div>
+ Import users
+ </Button>
+ </ButtonGroup>
+ <div class="controls-right">
+ <Search bind:value={searchEmail} placeholder="Search email" />
{#if selectedRows.length > 0}
<DeleteRowsButton on:updaterows {selectedRows} {deleteRows} />
{/if}
- </ButtonGroup>
- <Table
- on:click={({ detail }) => $goto(`./${detail._id}`)}
- {schema}
- bind:selectedRows
- data={enrichedUsers}
- allowEditColumns={false}
- allowEditRows={false}
- allowSelectRows={true}
- showHeaderBorder={false}
- {customRenderers}
- />
- <div class="pagination">
- <Pagination
- page={$pageInfo.pageNumber}
- hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
- hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
- goToPrevPage={pageInfo.prevPage}
- goToNextPage={pageInfo.nextPage}
- />
</div>
- </Layout>
+ </div>
+
+ <Table
+ on:click={({ detail }) => $goto(`./${detail._id}`)}
+ {schema}
+ bind:selectedRows
+ data={enrichedUsers}
+ allowEditColumns={false}
+ allowEditRows={false}
+ allowSelectRows={true}
+ showHeaderBorder={false}
+ {customRenderers}
+ />
+ <div class="pagination">
+ <Pagination
+ page={$pageInfo.pageNumber}
+ hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
+ hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
+ goToPrevPage={pageInfo.prevPage}
+ goToNextPage={pageInfo.nextPage}
+ />
+ </div>
</Layout>
<Modal bind:this={createUserModal}>
@@ -325,28 +301,19 @@
display: flex;
flex-direction: row;
justify-content: flex-end;
- margin-top: var(--spacing-xl);
}
- .field {
+ .controls {
display: flex;
- align-items: center;
flex-direction: row;
- grid-gap: var(--spacing-m);
- margin-left: auto;
+ justify-content: space-between;
+ align-items: center;
}
-
- .field > :global(*) + :global(*) {
- margin-left: var(--spacing-m);
- }
-
- .access-description {
+ .controls-right {
display: flex;
- margin-top: var(--spacing-xl);
- opacity: 0.8;
- }
-
- .access-text {
- margin-left: var(--spacing-m);
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ gap: var(--spacing-xl);
}
</style>