From 16bfe970152dc2e988d6fbb238cc4d8c2766c5a0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 28 Oct 2022 08:03:06 +0100
Subject: [PATCH] Update user and groups pages

---
 packages/bbui/src/Layout/Page.svelte          |  13 +-
 .../components/portal/page/SideNavItem.svelte |   2 +-
 .../src/pages/builder/portal/_layout.svelte   |  10 +-
 .../portal/manage/groups/_layout.svelte       |   3 -
 .../overview/_components/OverviewTab.svelte   |   2 +-
 .../pages/builder/portal/users/_layout.svelte |  30 ++++
 .../{manage => users}/groups/[groupId].svelte | 135 +++++++++---------
 .../groups/_components/AppAddModal.svelte     |   0
 .../_components/CreateEditGroupModal.svelte   |   0
 .../_components/GroupAppsTableRenderer.svelte |   0
 .../groups/_components/GroupIcon.svelte       |   0
 .../_components/GroupNameTableRenderer.svelte |   0
 .../_components/UsersTableRenderer.svelte     |   0
 .../{manage => users}/groups/index.svelte     |  15 +-
 .../{manage => users}/users/[userId].svelte   | 128 ++++++++---------
 .../users/_components/AddUserModal.svelte     |   0
 .../_components/AppsTableRenderer.svelte      |   0
 .../users/_components/DeleteUserModal.svelte  |   0
 .../_components/DeletionFailureModal.svelte   |   0
 .../users/_components/EmailSelect.svelte      |   0
 .../ForceResetPasswordModal.svelte            |   0
 .../_components/GroupsTableRenderer.svelte    |   0
 .../users/_components/ImportUsersModal.svelte |   0
 .../users/_components/InvitedModal.svelte     |   0
 .../_components/OnboardingTypeModal.svelte    |   0
 .../_components/PasswordCopyRenderer.svelte   |   0
 .../users/_components/PasswordModal.svelte    |   0
 .../_components/RoleTableRenderer.svelte      |   0
 .../_components/RolesTagsTableRenderer.svelte |   0
 .../_components/TagsTableRenderer.svelte      |   0
 .../users/_components/UpdateRolesModal.svelte |   0
 .../{manage => users}/users/index.svelte      |  17 +--
 32 files changed, 170 insertions(+), 185 deletions(-)
 delete mode 100644 packages/builder/src/pages/builder/portal/manage/groups/_layout.svelte
 create mode 100644 packages/builder/src/pages/builder/portal/users/_layout.svelte
 rename packages/builder/src/pages/builder/portal/{manage => users}/groups/[groupId].svelte (67%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/groups/_components/AppAddModal.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/groups/_components/CreateEditGroupModal.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/groups/_components/GroupAppsTableRenderer.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/groups/_components/GroupIcon.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/groups/_components/GroupNameTableRenderer.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/groups/_components/UsersTableRenderer.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/groups/index.svelte (93%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/[userId].svelte (78%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/AddUserModal.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/AppsTableRenderer.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/DeleteUserModal.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/DeletionFailureModal.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/EmailSelect.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/ForceResetPasswordModal.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/GroupsTableRenderer.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/ImportUsersModal.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/InvitedModal.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/OnboardingTypeModal.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/PasswordCopyRenderer.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/PasswordModal.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/RoleTableRenderer.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/RolesTagsTableRenderer.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/TagsTableRenderer.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/UpdateRolesModal.svelte (100%)
 rename packages/builder/src/pages/builder/portal/{manage => users}/users/index.svelte (96%)

diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte
index de497f396e..037e6aefa8 100644
--- a/packages/bbui/src/Layout/Page.svelte
+++ b/packages/bbui/src/Layout/Page.svelte
@@ -1,10 +1,10 @@
 <script>
   export let wide = false
-  export let maxWidth = "1080px"
+  export let narrow = false
   export let noPadding = false
 </script>
 
-<div style="--max-width: {maxWidth}" class:wide class:noPadding>
+<div class:wide class:noPadding class:narrow>
   <slot />
 </div>
 
@@ -14,7 +14,7 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    max-width: var(--max-width);
+    max-width: 1080px;
     margin: 0 auto;
     flex: 1 1 auto;
     padding-bottom: 50px;
@@ -22,11 +22,10 @@
 
   .wide {
     max-width: none;
-    margin: 0;
   }
 
-  .noPadding {
-    padding: 0px;
-    margin: 0px;
+  .narrow {
+    max-width: 800px;
+    margin: 0;
   }
 </style>
diff --git a/packages/builder/src/components/portal/page/SideNavItem.svelte b/packages/builder/src/components/portal/page/SideNavItem.svelte
index 66c7ce101d..b31afb683f 100644
--- a/packages/builder/src/components/portal/page/SideNavItem.svelte
+++ b/packages/builder/src/components/portal/page/SideNavItem.svelte
@@ -4,7 +4,7 @@
   export let active = false
 </script>
 
-<a on:click {url} class:active>
+<a on:click href={url} class:active>
   {text}
 </a>
 
diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index 52f2b8e8ee..9c2aa8da33 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -40,16 +40,8 @@
       menu = menu.concat([
         {
           title: "Users",
-          href: "/builder/portal/manage/users",
-          heading: "Manage",
+          href: "/builder/portal/users/users",
         },
-        isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS)
-          ? {
-              title: "User Groups",
-              href: "/builder/portal/manage/groups",
-              badge: "New",
-            }
-          : undefined,
         { title: "Auth", href: "/builder/portal/manage/auth" },
         { title: "Email", href: "/builder/portal/manage/email" },
         {
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/_layout.svelte b/packages/builder/src/pages/builder/portal/manage/groups/_layout.svelte
deleted file mode 100644
index a13211a9bb..0000000000
--- a/packages/builder/src/pages/builder/portal/manage/groups/_layout.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<div style="float: right;">
-  <slot />
-</div>
diff --git a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte b/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
index b121e04c7b..37c45e7854 100644
--- a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
@@ -9,7 +9,7 @@
   import { createEventDispatcher } from "svelte"
   import { fetchData } from "@budibase/frontend-core"
   import { API } from "api"
-  import GroupIcon from "../../manage/groups/_components/GroupIcon.svelte"
+  import GroupIcon from "../../users/groups/_components/GroupIcon.svelte"
 
   export let app
   export let deployments
diff --git a/packages/builder/src/pages/builder/portal/users/_layout.svelte b/packages/builder/src/pages/builder/portal/users/_layout.svelte
new file mode 100644
index 0000000000..944e0396b5
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/users/_layout.svelte
@@ -0,0 +1,30 @@
+<script>
+  import { Page } from "@budibase/bbui"
+  import { SideNav, SideNavItem, Content } from "components/portal/page"
+  import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
+  import { isActive, url } from "@roxi/routify"
+
+  $: narrow = !$isActive("./users/index") && !$isActive("./groups/index")
+</script>
+
+<Page {narrow}>
+  <Content>
+    <div slot="side-nav">
+      <SideNav title="Users">
+        <SideNavItem
+          text="Users"
+          url={$url("./users")}
+          active={$isActive("./users")}
+        />
+        <!--{#if isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS)}-->
+        <SideNavItem
+          text="Groups"
+          url={$url("./groups")}
+          active={$isActive("./groups")}
+        />
+        <!--{/if}-->
+      </SideNav>
+    </div>
+    <slot />
+  </Content>
+</Page>
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
similarity index 67%
rename from packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
rename to packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
index 5e8fb0d170..0528b34843 100644
--- a/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
@@ -1,7 +1,6 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { url, goto } from "@roxi/routify"
   import {
-    ActionButton,
     Button,
     Layout,
     Heading,
@@ -26,6 +25,7 @@
   import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
   import GroupIcon from "./_components/GroupIcon.svelte"
   import AppAddModal from "./_components/AppAddModal.svelte"
+  import { Breadcrumbs, Breadcrumb } from "components/portal/page"
 
   export let groupId
 
@@ -105,87 +105,80 @@
 
 {#if loaded}
   <Layout noPadding gap="XL">
-    <div>
-      <ActionButton on:click={() => $goto("../groups")} icon="ArrowLeft">
-        Back
-      </ActionButton>
-    </div>
+    <Breadcrumbs>
+      <Breadcrumb url={$url("./")} text="Groups" />
+      <Breadcrumb text={group?.name} />
+    </Breadcrumbs>
 
-    <Layout noPadding gap="M">
-      <div class="header">
-        <div class="title">
-          <GroupIcon {group} size="L" />
-          <div class="text-padding">
-            <Heading>{group?.name}</Heading>
-          </div>
-        </div>
-        <div>
-          <ActionMenu align="right">
-            <span slot="control">
-              <Icon hoverable name="More" />
-            </span>
-            <MenuItem icon="Refresh" on:click={() => editModal.show()}>
-              Edit
-            </MenuItem>
-            <MenuItem icon="Delete" on:click={() => deleteModal.show()}>
-              Delete
-            </MenuItem>
-          </ActionMenu>
+    <div class="header">
+      <div class="title">
+        <GroupIcon {group} size="L" />
+        <div class="text-padding">
+          <Heading>{group?.name}</Heading>
         </div>
       </div>
+      <div>
+        <ActionMenu align="right">
+          <span slot="control">
+            <Icon hoverable name="More" />
+          </span>
+          <MenuItem icon="Refresh" on:click={() => editModal.show()}>
+            Edit
+          </MenuItem>
+          <MenuItem icon="Delete" on:click={() => deleteModal.show()}>
+            Delete
+          </MenuItem>
+        </ActionMenu>
+      </div>
+    </div>
 
-      <Divider />
-
-      <Layout noPadding gap="S">
-        <div class="header">
-          <Heading size="S">Users</Heading>
-          <div bind:this={popoverAnchor}>
-            <Button on:click={popover.show()} icon="UserAdd" cta>
-              Add user
-            </Button>
-          </div>
-          <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
-            <UserGroupPicker
-              bind:searchTerm
-              labelKey="email"
-              selected={group.users?.map(user => user._id)}
-              list={$users.data}
-              on:select={e => groups.actions.addUser(groupId, e.detail)}
-              on:deselect={e => groups.actions.removeUser(groupId, e.detail)}
-            />
-          </Popover>
+    <Layout noPadding gap="S">
+      <div class="header">
+        <Heading size="S">Users</Heading>
+        <div bind:this={popoverAnchor}>
+          <Button on:click={popover.show()} cta>Add user</Button>
         </div>
-        <List>
-          {#if group?.users.length}
-            {#each group.users as user}
-              <ListItem
-                title={user.email}
-                on:click={() => $goto(`../users/${user._id}`)}
+        <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
+          <UserGroupPicker
+            bind:searchTerm
+            labelKey="email"
+            selected={group.users?.map(user => user._id)}
+            list={$users.data}
+            on:select={e => groups.actions.addUser(groupId, e.detail)}
+            on:deselect={e => groups.actions.removeUser(groupId, e.detail)}
+          />
+        </Popover>
+      </div>
+      <List>
+        {#if group?.users.length}
+          {#each group.users as user}
+            <ListItem
+              title={user.email}
+              on:click={() => $goto(`../users/${user._id}`)}
+              hoverable
+            >
+              <Icon
+                on:click={e => {
+                  groups.actions.removeUser(groupId, user._id)
+                  e.stopPropagation()
+                }}
                 hoverable
-              >
-                <Icon
-                  on:click={e => {
-                    groups.actions.removeUser(groupId, user._id)
-                    e.stopPropagation()
-                  }}
-                  hoverable
-                  size="S"
-                  name="Close"
-                />
-              </ListItem>
-            {/each}
-          {:else}
-            <ListItem icon="UserGroup" title="This user group has no users" />
-          {/if}
-        </List>
-      </Layout>
+                size="S"
+                name="Close"
+              />
+            </ListItem>
+          {/each}
+        {:else}
+          <ListItem icon="UserGroup" title="This user group has no users" />
+        {/if}
+      </List>
     </Layout>
 
     <Layout noPadding gap="S">
       <div class="header">
         <Heading size="S">Apps</Heading>
         <div>
-          <Button on:click={appAddModal.show()} icon="ExperienceAdd" cta>
+          <Button on:click={appAddModal.show()} newStyles secondary>
             Add app
           </Button>
         </div>
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/_components/AppAddModal.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/groups/_components/AppAddModal.svelte
rename to packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/_components/CreateEditGroupModal.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/CreateEditGroupModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/groups/_components/CreateEditGroupModal.svelte
rename to packages/builder/src/pages/builder/portal/users/groups/_components/CreateEditGroupModal.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/_components/GroupAppsTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/GroupAppsTableRenderer.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/groups/_components/GroupAppsTableRenderer.svelte
rename to packages/builder/src/pages/builder/portal/users/groups/_components/GroupAppsTableRenderer.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/_components/GroupIcon.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/GroupIcon.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/groups/_components/GroupIcon.svelte
rename to packages/builder/src/pages/builder/portal/users/groups/_components/GroupIcon.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/_components/GroupNameTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/GroupNameTableRenderer.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/groups/_components/GroupNameTableRenderer.svelte
rename to packages/builder/src/pages/builder/portal/users/groups/_components/GroupNameTableRenderer.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/_components/UsersTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/UsersTableRenderer.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/groups/_components/UsersTableRenderer.svelte
rename to packages/builder/src/pages/builder/portal/users/groups/_components/UsersTableRenderer.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/index.svelte b/packages/builder/src/pages/builder/portal/users/groups/index.svelte
similarity index 93%
rename from packages/builder/src/pages/builder/portal/manage/groups/index.svelte
rename to packages/builder/src/pages/builder/portal/users/groups/index.svelte
index b81918ba89..d01c7effc0 100644
--- a/packages/builder/src/pages/builder/portal/manage/groups/index.svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/index.svelte
@@ -40,7 +40,7 @@
   ]
 
   $: schema = {
-    name: {},
+    name: { displayName: "Group" },
     users: { sortable: false },
     roles: { sortable: false, displayName: "Apps" },
   }
@@ -91,7 +91,7 @@
 <Layout noPadding gap="M">
   <Layout gap="XS" noPadding>
     <div class="title">
-      <Heading size="M">User groups</Heading>
+      <Heading size="M">Groups</Heading>
       {#if !$licensing.groupsEnabled}
         <Tags>
           <Tag icon="LockClosed">Pro plan</Tag>
@@ -99,7 +99,7 @@
       {/if}
     </div>
     <Body>
-      Easily assign and manage your users' access with user groups.
+      Easily assign and manage your users' access with groups.
       {#if !$auth.accountPortalAccess && !$licensing.groupsEnabled && $admin.cloud}
         Contact your account holder to upgrade your plan.
       {/if}
@@ -110,14 +110,7 @@
     <ButtonGroup>
       {#if $licensing.groupsEnabled}
         <!--Show the group create button-->
-        <Button
-          newStyles
-          icon={"UserGroup"}
-          cta
-          on:click={showCreateGroupModal}
-        >
-          Create user group
-        </Button>
+        <Button newStyles cta on:click={showCreateGroupModal}>Add group</Button>
       {:else}
         <Button
           newStyles
diff --git a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
similarity index 78%
rename from packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
rename to packages/builder/src/pages/builder/portal/users/users/[userId].svelte
index f818595539..773d9553ed 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
@@ -1,7 +1,6 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { goto, url } from "@roxi/routify"
   import {
-    ActionButton,
     ActionMenu,
     Avatar,
     Button,
@@ -18,7 +17,6 @@
     Select,
     Modal,
     notifications,
-    Divider,
     Banner,
     StatusLight,
   } from "@budibase/bbui"
@@ -30,6 +28,7 @@
   import DeleteUserModal from "./_components/DeleteUserModal.svelte"
   import GroupIcon from "../groups/_components/GroupIcon.svelte"
   import { Constants, RoleUtils } from "@budibase/frontend-core"
+  import { Breadcrumbs, Breadcrumb } from "components/portal/page"
 
   export let userId
 
@@ -191,85 +190,76 @@
 
 {#if loaded}
   <Layout gap="XL" noPadding>
-    <div>
-      <ActionButton on:click={() => $goto("./")} icon="ArrowLeft">
-        Back
-      </ActionButton>
-    </div>
+    <Breadcrumbs>
+      <Breadcrumb url={$url("./")} text="Users" />
+      <Breadcrumb text={user?.email} />
+    </Breadcrumbs>
 
-    <Layout noPadding gap="M">
-      <div class="title">
-        <div>
-          <div style="display: flex;">
-            <Avatar size="XXL" {initials} />
-            <div class="subtitle">
-              <Heading size="S">{nameLabel}</Heading>
-              {#if nameLabel !== user?.email}
-                <Body size="S">{user?.email}</Body>
-              {/if}
-            </div>
+    <div class="title">
+      <div>
+        <div style="display: flex;">
+          <Avatar size="XXL" {initials} />
+          <div class="subtitle">
+            <Heading size="M">{nameLabel}</Heading>
+            {#if nameLabel !== user?.email}
+              <Body size="S">{user?.email}</Body>
+            {/if}
           </div>
         </div>
-        {#if userId !== $auth.user?._id}
-          <div>
-            <ActionMenu align="right">
-              <span slot="control">
-                <Icon hoverable name="More" />
-              </span>
-              <MenuItem on:click={resetPasswordModal.show} icon="Refresh">
-                Force password reset
-              </MenuItem>
-              <MenuItem on:click={deleteModal.show} icon="Delete">
-                Delete
-              </MenuItem>
-            </ActionMenu>
+      </div>
+      {#if userId !== $auth.user?._id}
+        <div>
+          <ActionMenu align="right">
+            <span slot="control">
+              <Icon hoverable name="More" />
+            </span>
+            <MenuItem on:click={resetPasswordModal.show} icon="Refresh">
+              Force password reset
+            </MenuItem>
+            <MenuItem on:click={deleteModal.show} icon="Delete">
+              Delete
+            </MenuItem>
+          </ActionMenu>
+        </div>
+      {/if}
+    </div>
+    <Layout noPadding gap="S">
+      <Heading size="S">Details</Heading>
+      <div class="fields">
+        <div class="field">
+          <Label size="L">Email</Label>
+          <Input disabled value={user?.email} />
+        </div>
+        <div class="field">
+          <Label size="L">First name</Label>
+          <Input value={user?.firstName} on:blur={updateUserFirstName} />
+        </div>
+        <div class="field">
+          <Label size="L">Last name</Label>
+          <Input value={user?.lastName} on:blur={updateUserLastName} />
+        </div>
+        <!-- don't let a user remove the privileges that let them be here -->
+        {#if userId !== $auth.user._id}
+          <div class="field">
+            <Label size="L">Role</Label>
+            <Select
+              value={globalRole}
+              options={Constants.BudibaseRoleOptions}
+              on:change={updateUserRole}
+            />
           </div>
         {/if}
       </div>
-      <Divider />
-      <Layout noPadding gap="S">
-        <Heading size="S">Details</Heading>
-        <div class="fields">
-          <div class="field">
-            <Label size="L">Email</Label>
-            <Input disabled value={user?.email} />
-          </div>
-          <div class="field">
-            <Label size="L">First name</Label>
-            <Input value={user?.firstName} on:blur={updateUserFirstName} />
-          </div>
-          <div class="field">
-            <Label size="L">Last name</Label>
-            <Input value={user?.lastName} on:blur={updateUserLastName} />
-          </div>
-          <!-- don't let a user remove the privileges that let them be here -->
-          {#if userId !== $auth.user._id}
-            <div class="field">
-              <Label size="L">Role</Label>
-              <Select
-                value={globalRole}
-                options={Constants.BudibaseRoleOptions}
-                on:change={updateUserRole}
-              />
-            </div>
-          {/if}
-        </div>
-      </Layout>
     </Layout>
 
     {#if $licensing.groupsEnabled}
       <!-- User groups -->
       <Layout gap="S" noPadding>
         <div class="tableTitle">
-          <Heading size="S">User groups</Heading>
+          <Heading size="S">Groups</Heading>
           <div bind:this={popoverAnchor}>
-            <Button
-              on:click={popover.show()}
-              icon="UserGroup"
-              secondary
-              newStyles
-            >
-              Add to user group
+            <Button on:click={popover.show()} secondary newStyles>
+              Add to group
             </Button>
           </div>
           <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/AddUserModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
rename to packages/builder/src/pages/builder/portal/users/users/_components/AddUserModal.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/AppsTableRenderer.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
rename to packages/builder/src/pages/builder/portal/users/users/_components/AppsTableRenderer.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/DeleteUserModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/DeleteUserModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/users/_components/DeleteUserModal.svelte
rename to packages/builder/src/pages/builder/portal/users/users/_components/DeleteUserModal.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/DeletionFailureModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/DeletionFailureModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/users/_components/DeletionFailureModal.svelte
rename to packages/builder/src/pages/builder/portal/users/users/_components/DeletionFailureModal.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/EmailSelect.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/EmailSelect.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/users/_components/EmailSelect.svelte
rename to packages/builder/src/pages/builder/portal/users/users/_components/EmailSelect.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/ForceResetPasswordModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/ForceResetPasswordModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/users/_components/ForceResetPasswordModal.svelte
rename to packages/builder/src/pages/builder/portal/users/users/_components/ForceResetPasswordModal.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/GroupsTableRenderer.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
rename to packages/builder/src/pages/builder/portal/users/users/_components/GroupsTableRenderer.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/ImportUsersModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/ImportUsersModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/users/_components/ImportUsersModal.svelte
rename to packages/builder/src/pages/builder/portal/users/users/_components/ImportUsersModal.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/InvitedModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/InvitedModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/users/_components/InvitedModal.svelte
rename to packages/builder/src/pages/builder/portal/users/users/_components/InvitedModal.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/OnboardingTypeModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/OnboardingTypeModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/users/_components/OnboardingTypeModal.svelte
rename to packages/builder/src/pages/builder/portal/users/users/_components/OnboardingTypeModal.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/PasswordCopyRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/PasswordCopyRenderer.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/users/_components/PasswordCopyRenderer.svelte
rename to packages/builder/src/pages/builder/portal/users/users/_components/PasswordCopyRenderer.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/PasswordModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/PasswordModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/users/_components/PasswordModal.svelte
rename to packages/builder/src/pages/builder/portal/users/users/_components/PasswordModal.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/RoleTableRenderer.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte
rename to packages/builder/src/pages/builder/portal/users/users/_components/RoleTableRenderer.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/RolesTagsTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/RolesTagsTableRenderer.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/users/_components/RolesTagsTableRenderer.svelte
rename to packages/builder/src/pages/builder/portal/users/users/_components/RolesTagsTableRenderer.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/TagsTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/TagsTableRenderer.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/users/_components/TagsTableRenderer.svelte
rename to packages/builder/src/pages/builder/portal/users/users/_components/TagsTableRenderer.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/UpdateRolesModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/UpdateRolesModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/manage/users/_components/UpdateRolesModal.svelte
rename to packages/builder/src/pages/builder/portal/users/users/_components/UpdateRolesModal.svelte
diff --git a/packages/builder/src/pages/builder/portal/manage/users/index.svelte b/packages/builder/src/pages/builder/portal/users/users/index.svelte
similarity index 96%
rename from packages/builder/src/pages/builder/portal/manage/users/index.svelte
rename to packages/builder/src/pages/builder/portal/users/users/index.svelte
index 24954e025a..31fb11cc19 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/index.svelte
@@ -218,20 +218,11 @@
     <Divider />
     <div class="controls">
       <ButtonGroup>
-        <Button
-          dataCy="add-user"
-          on:click={createUserModal.show}
-          icon="UserAdd"
-          cta
-          >Add users
+        <Button dataCy="add-user" on:click={createUserModal.show} cta>
+          Add users
         </Button>
-        <Button
-          on:click={importUsersModal.show}
-          icon="Import"
-          secondary
-          newStyles
-        >
-          Import users
+        <Button on:click={importUsersModal.show} secondary newStyles>
+          Import
         </Button>
       </ButtonGroup>
       <div class="controls-right">