handle undefined user name and avatar initials

4 years ago · 28405c7beb
4 changed files with 49 additions and 23 deletions
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@ -45,6 +45,15 @@
        },
      ])
    }
+    if (isEnabled(FEATURE_FLAGS.USER_GROUPS)) {
+      menu = menu.concat([
+        {
+          title: "User Groups",
+          href: "/builder/portal/manage/groups",
+        },
+      ])
+    }
+
    if (admin) {
      menu = menu.concat([
        {
@ -52,10 +61,6 @@
          href: "/builder/portal/manage/users",
          heading: "Manage",
        },
-        {
-          title: "User Groups",
-          href: "/builder/portal/manage/groups",
-        },

        { title: "Auth", href: "/builder/portal/manage/auth" },
        { title: "Email", href: "/builder/portal/manage/email" },
--- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
@ -41,6 +41,11 @@
  let allAppList = []
  let user
  $: fetchUser(userId)
+
+  $: fullName = $userFetch?.data?.firstName
+    ? $userFetch?.data?.firstName + " " + $userFetch?.data?.lastName
+    : ""
+
  $: hasGroupsLicense = $auth.user?.license.features.includes(
    Constants.Features.USER_GROUPS
  )
@ -127,7 +132,7 @@
    if (detail === "developer") {
      toggleFlags({ admin: { global: false }, builder: { global: true } })
    } else if (detail === "admin") {
-      toggleFlags({ admin: { global: true }, builder: { global: false } })
+      toggleFlags({ admin: { global: true }, builder: { global: true } })
    } else if (detail === "appUser") {
      toggleFlags({ admin: { global: false }, builder: { global: false } })
    }
@ -186,15 +191,25 @@
    <div class="title">
      <div>
        <div style="display: flex;">
-          <Avatar size="XXL" initials="PC" />
-          <div class="subtitle">
-            <Heading size="S"
-              >{$userFetch?.data?.firstName +
-                " " +
-                $userFetch?.data?.lastName}</Heading
-            >
-            <Body size="XS">{$userFetch?.data?.email}</Body>
-          </div>
+          <Avatar
+            size="XXL"
+            initials={user?.email
+              .split(" ")
+              .map(x => x[0])
+              .join("")}
+          />
+
+          {#if fullName}
+            <div class="subtitle">
+              <Heading size="S">{fullName}</Heading>
+
+              <Body size="XS">{$userFetch?.data?.email}</Body>
+            </div>
+          {:else}
+            <div class="alignEmail">
+              <Heading size="S">{$userFetch?.data?.email}</Heading>
+            </div>
+          {/if}
        </div>
      </div>
      <div>
@ -372,4 +387,10 @@
    display: flex;
    flex-direction: column;
  }
+
+  .alignEmail {
+    display: flex;
+    align-items: center;
+    margin-left: var(--spacing-m);
+  }
 </style>
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@ -72,19 +72,12 @@
    name: {},
    email: {},
    role: {
-      noPropagation: true,
      sortable: false,
    },
    ...(hasGroupsLicense && {
      userGroups: { sortable: false, displayName: "User groups" },
    }),
-    apps: { width: "120px" },
-    settings: {
-      sortable: false,
-      width: "60px",
-      displayName: "",
-      align: "Right",
-    },
+    apps: {},
  }

  $: userData = []
@ -323,6 +316,13 @@
 </Modal>

 <style>
+  .pagination {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: var(--spacing-xl);
+  }
+
  .field {
    display: flex;
    align-items: center;
--- a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
@ -66,7 +66,7 @@
    selectedApp?.status === AppStatus.DEPLOYED && latestDeployments?.length > 0

  $: appUrl = `${window.origin}/app${selectedApp?.url}`
-  $: tabs = ["Overview", "Automation History", "Backups", "Settings"]
+  $: tabs = ["Overview", "Automation History", "Backups", "Settings", "Access"]
  $: selectedTab = "Overview"

  const backToAppList = () => {