user onboarding new flow

4 years ago · 389558fd95
4 changed files with 83 additions and 25 deletions
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@ -37,7 +37,7 @@
  export let autoSortColumns = true
  export let compact = false
  export let customPlaceholder = false
-
+  export let showHeaderBorder = true
  const dispatch = createEventDispatcher()

  // Config
@ -300,6 +300,7 @@
          {#each fields as field}
            <div
              class="spectrum-Table-headCell"
+              class:noBorder={!showHeaderBorder}
              class:spectrum-Table-headCell--alignCenter={schema[field]
                .align === "Center"}
              class:spectrum-Table-headCell--alignRight={schema[field].align ===
@ -478,6 +479,13 @@
  .spectrum-Table-headCell:last-of-type {
    border-right: var(--table-border);
  }
+
+  .noBorder {
+    border-top: none !important;
+    border-right: none !important;
+    border-left: none !important;
+  }
+
  .spectrum-Table-headCell--alignCenter {
    justify-content: center;
  }
@ -567,6 +575,7 @@
  .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,6 +12,7 @@

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

--- a/packages/builder/src/pages/builder/portal/manage/groups/_components/GroupAppsRow.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/_components/GroupAppsRow.svelte
@ -5,24 +5,20 @@
 </script>

 <div class="title">
-  <div class="name" style="display: flex; margin-left: var(--spacing-xl)">
-    <div class="app-icon" style="color: {app.icon?.color || ''}">
-      <Icon size="XL" name={app.icon?.name || "Apps"} />
-    </div>
+  <div class="name app-icon" style="color: {app.icon?.color || ''}">
+    <Icon size="XL" name={app.icon?.name || "Apps"} />
  </div>
 </div>
 <div class="desktop">
-  <div style="display: flex; align-items: center;">
+  <div class="name-content">
    <Body size="M">{app.name}</Body>
-    <div style="opacity: 0.5; margin: var(--spacing-xs) 0 0 var(--spacing-m)">
+    <div class="access">
      <Body size="XS">{app.access}</Body>
    </div>
  </div>
 </div>
 <div class="desktop" />
-<div
-  style="display: flex; align-items: baseline;     margin-right: var(--spacing-xl);"
->
+<div class="apps">
  <StatusLight purple />
  <Body size="XS">{app.access}</Body>
 </div>
@ -33,7 +29,26 @@
    grid-template-columns: 75px 75px;
    align-items: center;
  }
+  .app-icon {
+    display: flex;
+    margin-left: var(--spacing-xl);
+  }
+
+  .apps {
+    display: flex;
+    align-items: baseline;
+    margin-right: var(--spacing-xl);
+  }

+  .access {
+    opacity: 0.5;
+    margin: var(--spacing-xs) 0 0 var(--spacing-m);
+  }
+
+  .name-content {
+    display: flex;
+    align-items: center;
+  }
  .name {
    text-decoration: none;
    overflow: hidden;
--- 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 @@
    Label,
    Layout,
    Modal,
+    Icon,
    notifications,
  } from "@budibase/bbui"
  import TagsRenderer from "./_components/TagsTableRenderer.svelte"
@ -29,6 +30,21 @@
    // group: {}
  }

+  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 search
  let email
  $: filteredUsers = $users
@ -60,25 +76,31 @@
 <Layout noPadding>
  <Layout gap="XS" noPadding>
    <Heading>Users</Heading>
-    <Body>
-      Each user is assigned to a group that contains apps and permissions. In
-      this section, you can add users, or edit and delete an existing user.
-    </Body>
+    <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>
-  <Divider size="S" />
  <Layout gap="S" noPadding>
-    <div class="users-heading">
-      <Heading size="S">Users</Heading>
-      <ButtonGroup>
-        <Button disabled secondary>Import users</Button>
-        <Button primary dataCy="add-user" on:click={createUserModal.show}
-          >Add user</Button
-        >
-      </ButtonGroup>
-    </div>
+    <ButtonGroup>
+      <Button
+        dataCy="add-user"
+        on:click={createUserModal.show}
+        icon="UserAdd"
+        cta>Add Users</Button
+      >
+      <Button icon="Import" primary>Import Users</Button>
+    </ButtonGroup>
    <div class="field">
      <Label size="L">Search / filter</Label>
-      <Search bind:value={search} placeholder="" />
    </div>
    <Table
      on:click={({ detail }) => $goto(`./${detail._id}`)}
@ -87,6 +109,7 @@
      allowEditColumns={false}
      allowEditRows={false}
      allowSelectRows={false}
+      showHeaderBorder={false}
      customRenderers={[{ column: "group", component: TagsRenderer }]}
    />
  </Layout>
@ -98,6 +121,16 @@
 <Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal>

 <style>
+  .access-description {
+    display: flex;
+    margin-top: var(--spacing-xl);
+    opacity: 0.8;
+  }
+
+  .access-text {
+    margin-left: var(--spacing-m);
+  }
+
  .field {
    display: flex;
    align-items: center;