Update users page to be narrow and remove name column

4 years ago · 9d5fd239f0
4 changed files with 9 additions and 31 deletions
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@ -503,12 +503,6 @@
  .spectrum-Table-headCell--alignRight {
    justify-content: flex-end;
  }
-  .spectrum-Table-headCell--divider {
-    padding-right: var(--cell-padding);
-  }
-  .spectrum-Table-headCell--divider + .spectrum-Table-headCell {
-    padding-left: var(--cell-padding);
-  }
  .spectrum-Table-headCell--edit {
    position: sticky;
    left: 0;
@ -580,13 +574,6 @@
    background-color: var(--table-bg);
    z-index: auto;
  }
-  .spectrum-Table-cell--divider {
-    padding-right: var(--cell-padding);
-  }
-  .spectrum-Table-cell--divider + .spectrum-Table-cell {
-    padding-left: var(--cell-padding);
-  }
-
  .spectrum-Table-cell--edit {
    position: sticky;
    left: 0;
--- a/packages/builder/src/pages/builder/portal/manage/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/_layout.svelte
@ -12,7 +12,6 @@

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

--- a/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
@ -1,5 +1,6 @@
 <script>
-  import { Icon, Body } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
+
  export let value
 </script>

@ -7,17 +8,9 @@
  <div class="spacing">
    <Icon name="UserGroup" />
  </div>
-  {#if value?.length === 0}
-    <div class="opacity">0</div>
-  {:else if value?.length === 1}
-    <div class="opacity">
-      <Body size="S">{value[0]?.name}</Body>
-    </div>
-  {:else}
-    <div class="opacity">
-      {parseInt(value?.length) || 0} groups
-    </div>
-  {/if}
+  <div class="opacity">
+    {value?.length || 0}
+  </div>
 </div>

 <style>
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@ -11,6 +11,7 @@
    Search,
    notifications,
    Pagination,
+    Divider,
  } from "@budibase/bbui"
  import AddUserModal from "./_components/AddUserModal.svelte"
  import { users, groups, auth } from "stores/portal"
@ -18,7 +19,6 @@
  import DeleteRowsButton from "components/backend/DataTable/buttons/DeleteRowsButton.svelte"
  import GroupsTableRenderer from "./_components/GroupsTableRenderer.svelte"
  import AppsTableRenderer from "./_components/AppsTableRenderer.svelte"
-  import NameTableRenderer from "./_components/NameTableRenderer.svelte"
  import RoleTableRenderer from "./_components/RoleTableRenderer.svelte"
  import { goto } from "@roxi/routify"
  import OnboardingTypeModal from "./_components/OnboardingTypeModal.svelte"
@ -44,7 +44,6 @@
  let customRenderers = [
    { column: "userGroups", component: GroupsTableRenderer },
    { column: "apps", component: AppsTableRenderer },
-    { column: "name", component: NameTableRenderer },
    { column: "role", component: RoleTableRenderer },
  ]

@ -53,7 +52,6 @@
  )

  $: schema = {
-    name: {},
    email: {},
    role: {
      sortable: false,
@ -215,11 +213,13 @@
  }
 </script>

-<Layout noPadding>
+<Layout noPadding gap="M">
  <Layout gap="XS" noPadding>
    <Heading>Users</Heading>
    <Body>Add users and control who gets access to your published apps</Body>
  </Layout>
+  <Divider size="S" />
+
  <div class="controls">
    <ButtonGroup>
      <Button
@ -249,7 +249,6 @@
      {/if}
    </div>
  </div>
-
  <Table
    on:click={({ detail }) => $goto(`./${detail._id}`)}
    {schema}