@appscode/design-system 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v3/navbar/Notification.vue

@@ -170,7 +170,7 @@ function notificationTime(time: number) {
     }
 
     .notification-content {
-      width: calc(100% - 100px);
+      width: calc(100% - 60px);
       h6 {
         font-size: 14px;
         font-weight: 500;

package/vue-components/v3/navbar/User.vue

@@ -14,13 +14,14 @@ interface FormatedOrgs extends User {
 }
 
 interface Props {
-  user: User;
+  user: FormatedOrgs;
   serverDomain?: string;
   accountsDomain?: string;
   showAccountSwitcher?: boolean;
   organizations?: Array<FormatedOrgs>;
   showThemeMode?: boolean;
   isPlatformDomain?: boolean;
+  isLoggedinUserAdmin?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -30,6 +31,7 @@ const props = withDefaults(defineProps<Props>(), {
   organizations: () => [],
   showThemeMode: false,
   isPlatformDomain: false,
+  isLoggedinUserAdmin: false,
 });
 
 const emit = defineEmits(["set:theme", "on-logout", "activeorg$set"]);
@@ -83,6 +85,8 @@ const setTheme = (val: string) => {
   emit("set:theme", val);
 };
 
+const pathName = window.location.origin;
+
 watch(dropDownStatus, (n) => {
   if (n === "open") {
     nextTick(() => {
@@ -116,45 +120,71 @@ watch(dropDownStatus, (n) => {
           class="user-profile-wrapper"
           @mouseleave="onMouseLeave()"
         >
-          <div class="profile-area">
-            <div class="profile-photo">
-              <img
-                :src="user.avatar_url"
-                alt="User Photo"
-                class="width-32 height-32"
-              />
-              <button class="camera-icon"></button>
+          <a
+            :href="`${serverDomain}/${user.username}`"
+            :title="user.username.toUpperCase()"
+            data-testid="user-profile-link"
+            class="line-break-anywhere is-ellipsis-1 has-text-weight-medium"
+          >
+            <div class="profile-area">
+              <div class="profile-photo">
+                <img
+                  :src="user.avatar_url"
+                  alt="User Photo"
+                  class="width-32 height-32"
+                />
+                <button class="camera-icon"></button>
+              </div>
+              <div class="profile-info" style="width: calc(100% - 60px)">
+                <strong> {{ user.username }} </strong>
+                <p>
+                  {{
+                    user.isPersonalAccount || user.is_admin
+                      ? "Personal Account"
+                      : "Organization"
+                  }}
+                </p>
+              </div>
             </div>
-            <div class="profile-info" style="width: calc(100% - 60px)">
+          </a>
+          <transition-group name="list" tag="ul" class="list-items py-2">
+            <li key="settings" v-if="serverDomain !== pathName">
               <a
-                :href="`${serverDomain}/${user.username}`"
-                :title="user.username.toUpperCase()"
-                data-testid="user-profile-link"
-                class="line-break-anywhere is-ellipsis-1 has-text-weight-medium"
-                >{{ user.username }}</a
+                v-if="user.isPersonalAccount"
+                data-testid="user-settings-link"
+                :href="`${serverDomain}/user/settings/`"
               >
-              <a :href="`mailto:${user.email}`"> {{ user.email }}</a>
-            </div>
-          </div>
-          <transition-group
-            name="list"
-            tag="ul"
-            class="list-items py-2 ac-scrollbar px-0"
-          >
-            <li key="settings">
+                <span class="icon"><HeroiconsCog6Tooth /></span>
+                <span>Settings</span>
+              </a>
               <a
+                v-else
                 data-testid="user-settings-link"
-                :href="`${serverDomain}/user/settings/`"
-                ><span class="icon"><HeroiconsCog6Tooth /></span
-                ><span>Settings</span></a
+                :href="`${serverDomain}/${user.username}/settings`"
               >
+                <span class="icon"><HeroiconsCog6Tooth /></span
+                ><span>Settings</span>
+              </a>
             </li>
-            <li v-if="user.is_admin" key="site-admin">
-              <a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"
-                ><span class="icon"><HeroiconsWrenchScrewdriver /></span
-                ><span>Site Administration</span></a
+            <li key="settings-platform" v-else>
+              <NuxtLink
+                v-if="user.isPersonalAccount"
+                data-testid="user-settings-link"
+                :to="`/user/settings/`"
               >
+                <span class="icon"><HeroiconsCog6Tooth /></span>
+                <span>Settings</span>
+              </NuxtLink>
+              <NuxtLink
+                v-else
+                data-testid="user-settings-link"
+                :to="`/${user.username}/settings`"
+              >
+                <span class="icon"><HeroiconsCog6Tooth /></span
+                ><span>Settings</span>
+              </NuxtLink>
             </li>
+
             <li
               v-if="showAccountSwitcher"
               :class="`is-${dropDownStatus}`"
@@ -226,6 +256,12 @@ watch(dropDownStatus, (n) => {
                 </li>
               </transition-group>
             </li>
+            <li v-if="isLoggedinUserAdmin || user.is_admin" key="site-admin">
+              <a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"
+                ><span class="icon"><HeroiconsWrenchScrewdriver /></span
+                ><span>Site Administration</span></a
+              >
+            </li>
             <li key="signout" @click="$emit('on-logout')">
               <a
                 data-testid="user-logout-link"