Update groups list and groups details pages to new designs. Multiple fixes and improvements. Standardise divider thickness

2022-08-04 11:06:49 +01:00 · 2022-08-04 11:06:49 +01:00 · 206af376fd
parent feee950c3d
commit 206af376fd
25 changed files with 313 additions and 271 deletions
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@ -80,7 +80,7 @@
        {/if}
      </h1>
      {#if showDivider}
-        <Divider size="M" />
+        <Divider />
      {/if}
    {/if}

--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte
@ -156,7 +156,7 @@
  </Body>
 </ConfirmDialog>

-<Divider size="S" />
+<Divider />
 <div class="query-header">
  <Heading size="S">Tables</Heading>
  <div class="table-buttons">
@ -192,7 +192,7 @@
 {:else}
  <Body size="S"><i>No tables found.</i></Body>
 {/if}
-<Divider size="S" />
+<Divider />
 <div class="query-header">
  <Heading size="S">Relationships</Heading>
  <Button primary on:click={() => openRelationshipModal()}>
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte
@ -37,7 +37,7 @@
  }
 </script>

-<Divider size="S" />
+<Divider />
 <div class="section-header">
  <div class="badge">
    <Heading size="S">Headers</Heading>
@ -61,7 +61,7 @@
  </ActionButton>
 </div>

-<Divider size="S" />
+<Divider />
 <div class="section-header">
  <div class="badge">
    <Heading size="S">Authentication</Heading>
@ -73,7 +73,7 @@
 </Body>
 <RestAuthenticationBuilder bind:configs={datasource.config.authConfigs} />

-<Divider size="S" />
+<Divider />
 <div class="section-header">
  <div class="badge">
    <Heading size="S">Variables</Heading>
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
@ -200,7 +200,7 @@
      {/each}
    </ul>
    {#if views?.length}
-      <Divider size="S" />
+      <Divider />
      <div class="title">
        <Heading size="XS">Views</Heading>
      </div>
@ -211,7 +211,7 @@
      </ul>
    {/if}
    {#if queries?.length}
-      <Divider size="S" />
+      <Divider />
      <div class="title">
        <Heading size="XS">Queries</Heading>
      </div>
@ -227,7 +227,7 @@
      </ul>
    {/if}
    {#if links?.length}
-      <Divider size="S" />
+      <Divider />
      <div class="title">
        <Heading size="XS">Relationships</Heading>
      </div>
@ -238,7 +238,7 @@
      </ul>
    {/if}
    {#if fields?.length}
-      <Divider size="S" />
+      <Divider />
      <div class="title">
        <Heading size="XS">Fields</Heading>
      </div>
@ -249,7 +249,7 @@
      </ul>
    {/if}
    {#if jsonArrays?.length}
-      <Divider size="S" />
+      <Divider />
      <div class="title">
        <Heading size="XS">JSON Arrays</Heading>
      </div>
@ -260,7 +260,7 @@
      </ul>
    {/if}
    {#if showDataProviders && dataProviders?.length}
-      <Divider size="S" />
+      <Divider />
      <div class="title">
        <Heading size="XS">Data Providers</Heading>
      </div>
@ -276,7 +276,7 @@
      </ul>
    {/if}
    {#if otherSources?.length}
-      <Divider size="S" />
+      <Divider />
      <div class="title">
        <Heading size="XS">Other</Heading>
      </div>
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
@ -98,7 +98,7 @@
        </header>
        <Body size="M">{integration.description}</Body>
      </Layout>
-      <Divider size="S" />
+      <Divider />
      <div class="config-header">
        <Heading size="S">Configuration</Heading>
        <Button disabled={!changed} cta on:click={saveDatasource}>Save</Button>
@ -111,7 +111,7 @@
      {#if datasource.plus}
        <PlusConfigForm bind:datasource save={saveDatasource} />
      {/if}
-      <Divider size="S" />
+      <Divider />
      <div class="query-header">
        <Heading size="S">Queries</Heading>
        <div class="query-buttons">
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte
@ -548,7 +548,7 @@
    </div>
    <div class="bottom">
      <Layout paddingY="S" gap="S">
-        <Divider size="S" />
+        <Divider />
        {#if !response && Object.keys(schema).length === 0}
          <Heading size="M">Response</Heading>
          <div class="placeholder">
--- a/packages/builder/src/pages/builder/portal/apps/create.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/create.svelte
@ -105,7 +105,7 @@
      </div>
    </div>

-    <Divider size="S" />
+    <Divider />

    {#if loaded && $templates?.length}
      <TemplateDisplay templates={$templates} />
--- a/packages/builder/src/pages/builder/portal/manage/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/_layout.svelte
@ -10,9 +10,7 @@
    }
  }

-  $: wide =
-    $page.path.includes("email/:template") ||
-    ($page.path.includes("groups") && !$page.path.includes(":groupId"))
+  $: wide = $page.path.includes("email/:template")
 </script>

 {#if $auth.isAdmin}
--- a/packages/builder/src/pages/builder/portal/manage/auth/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/auth/index.svelte
@ -295,7 +295,7 @@
    </Body>
  </Layout>
  {#if providers.google}
-    <Divider size="S" />
+    <Divider />
    <Layout gap="XS" noPadding>
      <Heading size="S">
        <div class="provider-title">
@ -334,7 +334,7 @@
    </Layout>
  {/if}
  {#if providers.oidc}
-    <Divider size="S" />
+    <Divider />
    <Layout gap="XS" noPadding>
      <Heading size="S">
        <div class="provider-title">
--- a/packages/builder/src/pages/builder/portal/manage/email/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/email/index.svelte
@ -132,7 +132,7 @@
      values below and click activate.
    </Body>
  </Layout>
-  <Divider size="S" />
+  <Divider />
  {#if smtpConfig}
    <Layout gap="XS" noPadding>
      <Heading size="S">SMTP</Heading>
@ -186,7 +186,7 @@
        Reset
      </Button>
    </div>
-    <Divider size="S" />
+    <Divider />
    <Layout gap="XS" noPadding>
      <Heading size="S">Templates</Heading>
      <Body size="S">
--- a/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
@ -5,13 +5,16 @@
    Button,
    Layout,
    Heading,
-    Body,
    Icon,
    Popover,
    notifications,
    List,
    ListItem,
    StatusLight,
+    Divider,
+    ActionMenu,
+    MenuItem,
+    Modal,
  } from "@budibase/bbui"
  import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
  import { createPaginationStore } from "helpers/pagination"
@ -19,6 +22,9 @@
  import { onMount } from "svelte"
  import { RoleUtils } from "@budibase/frontend-core"
  import { roles } from "stores/backend"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
+  import GroupIcon from "./_components/GroupIcon.svelte"

  export let groupId

@ -29,10 +35,16 @@
  let prevSearch = undefined
  let pageInfo = createPaginationStore()
  let loaded = false
+  let editModal
+  let deleteModal

  $: page = $pageInfo.page
  $: fetchUsers(page, searchTerm)
  $: group = $groups.find(x => x._id === groupId)
+  $: filtered =
+    $users.data?.filter(x => !group?.users.map(y => y._id).includes(x._id)) ||
+    []
+  $: groupApps = $apps.filter(x => group?.apps.includes(x.appId))

  async function addAll() {
    selectedUsers = [...selectedUsers, ...filtered.map(u => u._id)]
@ -88,11 +100,7 @@
      userGroups,
    })
  }
-  $: filtered =
-    $users.data?.filter(x => !group?.users.map(y => y._id).includes(x._id)) ||
-    []

-  $: groupApps = $apps.filter(x => group.apps.includes(x.appId))
  async function removeUser(id) {
    let newUsers = group.users.filter(user => user._id !== id)
    group.users = newUsers
@ -131,6 +139,25 @@
    return role?.name || "Custom role"
  }

+  async function deleteGroup() {
+    try {
+      await groups.actions.delete(group)
+      notifications.success("User group deleted successfully")
+      $goto("./")
+    } catch (error) {
+      console.log(error)
+      notifications.error(`Failed to delete user group`)
+    }
+  }
+
+  async function saveGroup(group) {
+    try {
+      await groups.actions.save(group)
+    } catch (error) {
+      notifications.error(`Failed to save user group`)
+    }
+  }
+
  onMount(async () => {
    try {
      await Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
@ -142,119 +169,132 @@
 </script>

 {#if loaded}
-  <Layout noPadding>
+  <Layout noPadding gap="XL">
    <div>
-      <ActionButton
-        on:click={() => $goto("../groups")}
-        size="S"
-        icon="ArrowLeft"
-      >
+      <ActionButton on:click={() => $goto("../groups")} 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} />
+
+    <Layout noPadding gap="M">
+      <div class="header">
+        <div class="title">
+          <GroupIcon {group} />
+          <div class="text-padding">
+            <Heading>{group?.name}</Heading>
          </div>
        </div>
-        <div class="text-padding">
-          <Heading>{group?.name}</Heading>
+        <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>
-      <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
-          key={"email"}
-          title={"User"}
-          bind:searchTerm
-          bind:selected={selectedUsers}
-          bind:filtered
-          {addAll}
-          select={selectUser}
-        />
-      </Popover>
-    </div>

-    <List>
-      {#if group?.users.length}
-        {#each group.users as user}
-          <ListItem title={user?.email} avatar
-            ><Icon
-              on:click={() => removeUser(user?._id)}
-              hoverable
-              size="L"
-              name="Close"
-            /></ListItem
-          >
-        {/each}
-      {:else}
-        <ListItem icon="UserGroup" title="You have no users in this team" />
-      {/if}
-    </List>
-    <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>
+      <Divider />

-    <List>
-      {#if groupApps.length}
-        {#each groupApps as app}
-          <ListItem
-            title={app.name}
-            icon={app?.icon?.name || "Apps"}
-            iconBackground={app?.icon?.color || ""}
-          >
-            <div class="title ">
-              <StatusLight
-                square
-                color={RoleUtils.getRoleColour(group.roles[`app_${app.appId}`])}
-              >
-                {getRoleLabel(app.appId)}
-              </StatusLight>
-            </div>
-          </ListItem>
-        {/each}
-      {:else}
-        <ListItem icon="UserGroup" title="No apps" />
-      {/if}
-    </List>
+      <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
+              key={"email"}
+              title={"User"}
+              bind:searchTerm
+              bind:selected={selectedUsers}
+              bind:filtered
+              {addAll}
+              select={selectUser}
+            />
+          </Popover>
+        </div>
+        <List>
+          {#if group?.users.length}
+            {#each group.users as user}
+              <ListItem title={user?.email} avatar>
+                <Icon
+                  on:click={() => removeUser(user?._id)}
+                  hoverable
+                  size="S"
+                  name="Close"
+                />
+              </ListItem>
+            {/each}
+          {:else}
+            <ListItem
+              icon="UserGroup"
+              title="You have no users in this user group"
+            />
+          {/if}
+        </List>
+      </Layout>
+    </Layout>
+
+    <Layout noPadding gap="S">
+      <Heading size="S">Apps</Heading>
+      <List>
+        {#if groupApps.length}
+          {#each groupApps as app}
+            <ListItem
+              title={app.name}
+              icon={app?.icon?.name || "Apps"}
+              iconBackground={app?.icon?.color || ""}
+            >
+              <div class="title ">
+                <StatusLight
+                  square
+                  color={RoleUtils.getRoleColour(
+                    group.roles[`app_${app.appId}`]
+                  )}
+                >
+                  {getRoleLabel(app.appId)}
+                </StatusLight>
+              </div>
+            </ListItem>
+          {/each}
+        {:else}
+          <ListItem icon="UserGroup" title="This group has access to no apps" />
+        {/if}
+      </List>
+    </Layout>
  </Layout>
 {/if}

-<style>
-  .text-padding {
-    margin-left: var(--spacing-l);
-  }
+<Modal bind:this={editModal}>
+  <CreateEditGroupModal {group} {saveGroup} />
+</Modal>
+<ConfirmDialog
+  bind:this={deleteModal}
+  title="Delete user group"
+  okText="Delete user group"
+  onOk={deleteGroup}
+>
+  Are you sure you wish to delete <b>{group?.name}?</b>
+</ConfirmDialog>

+<style>
  .header {
    display: flex;
    justify-content: space-between;
+    align-items: flex-end;
  }
  .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);
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
  }
 </style>
--- a/packages/builder/src/pages/builder/portal/manage/groups/_components/GroupIcon.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/_components/GroupIcon.svelte
@ -0,0 +1,20 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let group
+</script>
+
+<div style="background: {group?.color};" class="circle">
+  <Icon size="S" name={group?.icon} />
+</div>
+
+<style>
+  .circle {
+    border-radius: 50%;
+    height: 30px;
+    width: 30px;
+    color: white;
+    display: grid;
+    place-items: center;
+  }
+</style>
--- a/packages/builder/src/pages/builder/portal/manage/groups/_components/GroupNameTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/_components/GroupNameTableRenderer.svelte
@ -1,20 +1,13 @@
 <script>
-  import { Avatar } from "@budibase/bbui"
+  import GroupIcon from "./GroupIcon.svelte"

  export let value
+  export let row
 </script>

 <div class="align">
  {#if value}
-    <div class="spacing">
-      <Avatar
-        size="L"
-        initials={value
-          .split(" ")
-          .map(x => x[0])
-          .join("")}
-      />
-    </div>
+    <GroupIcon group={row} />
    {value}
  {:else}
    <div class="text">-</div>
@ -26,12 +19,8 @@
    display: flex;
    align-items: center;
    overflow: hidden;
+    gap: var(--spacing-m);
  }
-
-  .spacing {
-    margin-right: var(--spacing-m);
-  }
-
  .text {
    opacity: 0.8;
  }
--- a/packages/builder/src/pages/builder/portal/manage/groups/_components/UserGroupsRow.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/_components/UserGroupsRow.svelte
@ -21,11 +21,6 @@

 <div class="title">
  <div class="name" style="display: flex; margin-left: var(--spacing-xl)">
-    <div style="background: {group.color};" class="circle">
-      <div>
-        <Icon size="M" name={group.icon} />
-      </div>
-    </div>
    <div class="name" data-cy="app-name-link">
      <Body size="S">{group.name}</Body>
    </div>
@ -50,31 +45,12 @@
      : "s"}
  </div>
 </div>
-<div>
-  <div class="group-row-actions">
-    <div>
-      <Button on:click={() => $goto(`./${group._id}`)} size="S" cta
-        >Manage</Button
-      >
-    </div>
-    <div>
-      <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="Edit">Edit</MenuItem>
-      </ActionMenu>
-    </div>
-  </div>
-</div>

-<Modal bind:this={modal}>
-  <CreateEditGroupModal {group} {saveGroup} />
-</Modal>
+<!--        <MenuItem on:click={() => deleteGroup(group)} icon="Delete"-->
+<!--          >Delete</MenuItem-->
+<!--        >-->

+<!--        <MenuItem on:click={() => editGroup(group)} icon="Edit">Edit</MenuItem>-->
 <style>
  .group-row-actions {
    display: flex;
@ -88,23 +64,7 @@
    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;
--- a/packages/builder/src/pages/builder/portal/manage/groups/_components/UsersTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/_components/UsersTableRenderer.svelte
@ -0,0 +1,22 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  export let value
+</script>
+
+<div class="align">
+  <div class="spacing">
+    <Icon name="User" />
+  </div>
+  {parseInt(value?.length) || 0}
+</div>
+
+<style>
+  .align {
+    display: flex;
+    overflow: hidden;
+  }
+
+  .spacing {
+    margin-right: var(--spacing-m);
+  }
+</style>
--- a/packages/builder/src/pages/builder/portal/manage/groups/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/index.svelte
@ -4,16 +4,23 @@
    Heading,
    Body,
    Button,
+    ButtonGroup,
    Modal,
    Tag,
    Tags,
+    Table,
+    Divider,
+    Search,
    notifications,
  } from "@budibase/bbui"
  import { groups, auth } from "stores/portal"
  import { onMount } from "svelte"
  import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
-  import UserGroupsRow from "./_components/UserGroupsRow.svelte"
  import { cloneDeep } from "lodash/fp"
+  import AppsTableRenderer from "../users/_components/AppsTableRenderer.svelte"
+  import UsersTableRenderer from "./_components/UsersTableRenderer.svelte"
+  import GroupNameTableRenderer from "./_components/GroupNameTableRenderer.svelte"
+  import { goto } from "@roxi/routify"

  const DefaultGroup = {
    name: "",
@ -23,22 +30,39 @@
    apps: [],
    roles: {},
  }
-  let modal
-  let group = cloneDeep(DefaultGroup)

-  async function deleteGroup(group) {
-    try {
-      groups.actions.delete(group)
-    } catch (error) {
-      notifications.error(`Failed to delete group`)
+  let modal
+  let searchString
+  let group = cloneDeep(DefaultGroup)
+  let customRenderers = [
+    { column: "name", component: GroupNameTableRenderer },
+    { column: "users", component: UsersTableRenderer },
+    { column: "apps", component: AppsTableRenderer },
+  ]
+
+  $: schema = {
+    name: {},
+    users: { sortable: false },
+    apps: { sortable: false },
+  }
+  $: filteredGroups = filterGroups($groups, searchString)
+
+  const filterGroups = (groups, searchString) => {
+    if (!searchString) {
+      return groups
    }
+    searchString = searchString.toLocaleLowerCase()
+    return groups?.filter(group => {
+      return group.name?.toLowerCase().includes(searchString)
+    })
  }

  async function saveGroup(group) {
    try {
      await groups.actions.save(group)
+      notifications.success(`User group created successfully`)
    } catch (error) {
-      notifications.error(`Failed to save group`)
+      notifications.error(`Failed to save user group`)
    }
  }

@ -53,58 +77,63 @@
        await groups.actions.init()
      }
    } catch (error) {
-      notifications.error("Error getting User groups")
+      notifications.error("Error getting user groups")
    }
  })
 </script>

-<Layout noPadding>
+<Layout noPadding gap="M">
  <Layout gap="XS" noPadding>
-    <div style="display: flex;">
-      <Heading size="M">User groups</Heading>
-      {#if !$auth.groupsEnabled}
-        <Tags>
-          <div class="tags">
-            <div class="tag">
-              <Tag icon="LockClosed">Pro plan</Tag>
-            </div>
+    <Heading size="M">User groups</Heading>
+    {#if !$auth.groupsEnabled}
+      <Tags>
+        <div class="tags">
+          <div class="tag">
+            <Tag icon="LockClosed">Pro plan</Tag>
          </div>
-        </Tags>
-      {/if}
-    </div>
+        </div>
+      </Tags>
+    {/if}
    <Body>Easily assign and manage your users access with User Groups</Body>
  </Layout>
-  <div class="align-buttons">
-    <Button
-      newStyles
-      icon={$auth.groupsEnabled ? "UserGroup" : ""}
-      cta={$auth.groupsEnabled}
-      on:click={$auth.groupsEnabled
-        ? showCreateGroupModal
-        : window.open("https://budibase.com/pricing/", "_blank")}
-    >
-      {$auth.groupsEnabled ? "Create user group" : "Upgrade Account"}
-    </Button>
-    {#if !$auth.groupsEnabled}
+  <Divider />
+  <div class="controls">
+    <ButtonGroup>
      <Button
        newStyles
-        secondary
-        on:click={() => {
-          window.open("https://budibase.com/pricing/", "_blank")
-        }}>View Plans</Button
+        icon={$auth.groupsEnabled ? "UserGroup" : ""}
+        cta={$auth.groupsEnabled}
+        on:click={$auth.groupsEnabled
+          ? showCreateGroupModal
+          : window.open("https://budibase.com/pricing/", "_blank")}
      >
-    {/if}
-  </div>
-
-  {#if $auth.groupsEnabled && $groups.length}
-    <div class="groupTable">
-      {#each $groups as group}
-        <div>
-          <UserGroupsRow {saveGroup} {deleteGroup} {group} />
-        </div>
-      {/each}
+        {$auth.groupsEnabled ? "Create user group" : "Upgrade Account"}
+      </Button>
+      {#if !$auth.groupsEnabled}
+        <Button
+          newStyles
+          secondary
+          on:click={() => {
+            window.open("https://budibase.com/pricing/", "_blank")
+          }}
+        >
+          View Plans
+        </Button>
+      {/if}
+    </ButtonGroup>
+    <div class="controls-right">
+      <Search bind:value={searchString} placeholder="Search" />
    </div>
-  {/if}
+  </div>
+  <Table
+    on:click={({ detail }) => $goto(`./${detail._id}`)}
+    {schema}
+    data={filteredGroups}
+    allowEditColumns={false}
+    allowEditRows={false}
+    showHeaderBorder={false}
+    {customRenderers}
+  />
 </Layout>

 <Modal bind:this={modal}>
@ -112,37 +141,24 @@
 </Modal>

 <style>
-  .align-buttons {
+  .controls {
    display: flex;
-    column-gap: var(--spacing-xl);
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .controls-right {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .controls-right :global(.spectrum-Search) {
+    width: 200px;
  }
  .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: 55px;
-    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>
--- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
@ -247,7 +247,7 @@
          </div>
        {/if}
      </div>
-      <Divider size="S" />
+      <Divider />
      <Layout noPadding gap="S">
        <Heading size="S">Details</Heading>
        <div class="fields">
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
@ -15,7 +15,6 @@
    display: flex;
    overflow: hidden;
  }
-
  .spacing {
    margin-right: var(--spacing-m);
  }
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
@ -18,11 +18,9 @@
    display: flex;
    overflow: hidden;
  }
-
  .opacity {
    opacity: 0.8;
  }
-
  .spacing {
    margin-right: var(--spacing-m);
  }
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@ -210,7 +210,7 @@
    <Heading>Users</Heading>
    <Body>Add users and control who gets access to your published apps</Body>
  </Layout>
-  <Divider size="S" />
+  <Divider />
  <div class="controls">
    <ButtonGroup>
      <Button
--- a/packages/builder/src/pages/builder/portal/settings/organisation.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/organisation.svelte
@ -83,7 +83,7 @@
        analytics.
      </Body>
    </Layout>
-    <Divider size="S" />
+    <Divider />
    <Layout gap="XS" noPadding>
      <Heading size="S">Information</Heading>
      <Body size="S">Here you can update your logo and organization name.</Body>
@ -110,7 +110,7 @@
      </div>
    </div>
    {#if !$admin.cloud}
-      <Divider size="S" />
+      <Divider />
      <Layout gap="XS" noPadding>
        <Heading size="S">Platform</Heading>
        <Body size="S">Here you can set up general platform settings.</Body>
@ -127,7 +127,7 @@
      </div>
    {/if}
    {#if !$admin.cloud}
-      <Divider size="S" />
+      <Divider />
      <Layout gap="XS" noPadding>
        <Heading size="S">Analytics</Heading>
        <Body size="S">Choose whether to opt-in or opt-out of analytics.</Body>
--- a/packages/builder/src/pages/builder/portal/settings/theming.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/theming.svelte
@ -9,7 +9,7 @@
    <Heading size="M">Theming</Heading>
    <Body>Customize how Budibase looks and feels.</Body>
  </Layout>
-  <Divider size="S" />
+  <Divider />
  <div class="fields">
    <div class="field">
      <Label size="L">Builder theme</Label>
--- a/packages/builder/src/pages/builder/portal/settings/update.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/update.svelte
@ -60,7 +60,7 @@
        latest features, security updates and much more.
      </Body>
    </Layout>
-    <Divider size="S" />
+    <Divider />
    {#if version}
      <div>
        <Label size="L">Current version</Label>
--- a/packages/builder/src/pages/builder/portal/settings/upgrade.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/upgrade.svelte
@ -88,7 +88,7 @@
        {/if}
      </Body>
    </Layout>
-    <Divider size="S" />
+    <Divider />
    <Layout gap="XS" noPadding>
      <Heading size="S">Activate</Heading>
      <Body size="S">Enter your license key below to activate your plan</Body>
@ -111,7 +111,7 @@
        >
      </div>
    </Layout>
-    <Divider size="S" />
+    <Divider />
    <Layout gap="L" noPadding>
      <Layout gap="S" noPadding>
        <Heading size="S">Plan</Heading>
--- a/packages/builder/src/pages/builder/portal/settings/usage.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/usage.svelte
@ -96,7 +96,7 @@
    </Body>
  </Layout>
  <Layout gap="S">
-    <Divider size="S" />
+    <Divider />
  </Layout>
  <Layout gap="S" noPadding>
    <Layout gap="XS">