@appscode/design-system 1.0.43-alpha.98 → 1.1.0

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

@@ -1,27 +1,24 @@
 <template>
-  <div>
-    <button 
-      v-if="themeMode" 
-      class="button ac-nav-button"
-      @click="toggleTheme"
-      :title="themeModes[themeMode].displayName"
-    >
-      <i :class="`fa ${themeModes[themeMode].iconClass} width-15`" />
-    </button>
-    <div class="ac-menu-content theme-choice">
-      <ul class="is-flex is-flex-direction-row is-justify-content-space-around">
-        <li 
-          v-for="theme of Object.keys(themeModes)"
-          :title="themeModes[theme].displayName"
-          @click="themeMode = theme"
-          :class="{'is-active': themeMode === theme}"
-          :key="theme"
-        >
-          <i :class="['fa', themeModes[theme].iconClass]" />
-        </li>
-      </ul>
-    </div>
-  </div>
+  <li class="mt-10 b-t-1 pt-10">
+    <ul class="ac-vscrollbar">
+      <li>
+        <div class="ac-menu-contentt theme-choicee">
+          <ul class="is-flex is-flex-direction-row is-justify-content-center">
+            <li
+              v-for="theme of Object.keys(themeModes)"
+              :title="themeModes[theme].displayName"
+              @click="themeMode = theme"
+              class="p-10 pl-30 pr-30 is-flex-grow-1 has-text-centered"
+              :class="{ 'is-active': themeMode === theme }"
+              :key="theme"
+            >
+              <i :class="['fa', themeModes[theme].iconClass]" />
+            </li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+  </li>
 </template>
 <script>
 import { defineComponent } from "vue";
@@ -31,10 +28,6 @@ export default defineComponent({
     return {
       themeMode: "",
       themeModes: {
-        system: {
-          displayName: "System Theme",
-          iconClass: "fa-desktop",
-        },
         light: {
           displayName: "Light Theme",
           iconClass: "fa-sun-o",
@@ -42,19 +35,23 @@ export default defineComponent({
         dark: {
           displayName: "Dark Theme",
           iconClass: "fa-moon-o",
-        }
-      }
+        },
+        system: {
+          displayName: "System Theme",
+          iconClass: "fa-desktop",
+        },
+      },
     };
   },
 
-  emits: ['set:theme'],
+  emits: ["set:theme"],
 
   mounted() {
     // get theme mode from localStorage or set default one
     this.themeMode = localStorage.getItem("themeMode") || "light";
   },
 
-  destroyed() {
+  unmounted() {
     this.removeColorSchemeEventListener();
   },
 
@@ -62,19 +59,16 @@ export default defineComponent({
     themeMode: {
       handler(n) {
         this.onThemeModeChange(n);
-      }
-    }
+      },
+    },
   },
 
   methods: {
     // handle theme mode button click
     toggleTheme() {
-      if(this.themeMode === "light")
-        this.themeMode = "dark";
-      else if(this.themeMode === "dark")
-        this.themeMode = "system";
-      else if(this.themeMode === "system")
-        this.themeMode = "light";
+      if (this.themeMode === "light") this.themeMode = "dark";
+      else if (this.themeMode === "dark") this.themeMode = "system";
+      else if (this.themeMode === "system") this.themeMode = "light";
     },
 
     // triggered when theme mode is updated
@@ -82,8 +76,10 @@ export default defineComponent({
       localStorage.setItem("themeMode", n);
 
       let theme = n;
-      if(n === "system") {
-        const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (n === "system") {
+        const isDarkMode =
+          window.matchMedia &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches;
         this.addColorSchemeEventListener();
         theme = isDarkMode ? "dark" : "light";
       } else {
@@ -95,7 +91,7 @@ export default defineComponent({
 
     // add proper css class to update the ui theme
     handleDarkThemeClass(currentTheme) {
-      if(currentTheme === "light") {
+      if (currentTheme === "light") {
         document.documentElement.classList.remove("is-dark-theme");
       } else {
         document.documentElement.classList.add("is-dark-theme");
@@ -106,23 +102,19 @@ export default defineComponent({
     addColorSchemeEventListener() {
       window
         .matchMedia("(prefers-color-scheme: dark)")
-        .addEventListener(
-          "change", this.handleSystemThemeChange
-        );
+        .addEventListener("change", this.handleSystemThemeChange);
     },
 
     // remove system theme listener event
     removeColorSchemeEventListener() {
       window
         .matchMedia("(prefers-color-scheme: dark)")
-        .removeEventListener(
-          "change", this.handleSystemThemeChange
-        );
+        .removeEventListener("change", this.handleSystemThemeChange);
     },
 
     handleSystemThemeChange() {
       this.onThemeModeChange(this.themeMode);
     },
-  }
+  },
 });
 </script>

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

@@ -7,31 +7,158 @@
         <img :src="user.avatar_url" alt="User Photo" />
       </div>
     </button>
-    <navbar-item-content>
-      <div v-if="user.username" class="user-profile-wrapper">
+    <navbar-item-content class="navbar-dropdown-wrapper">
+      <div
+        v-if="user.username"
+        class="user-profile-wrapper"
+        @mouseleave="onMouseLeave()"
+      >
         <div class="profile-area">
           <div class="profile-photo">
-            <img :src="user.avatar_url" alt="User Photo" />
+            <img
+              :src="user.avatar_url"
+              alt="User Photo"
+              class="width-50 height-50"
+            />
             <button class="camera-icon"></button>
           </div>
-          <div class="profile-info">
-            <p>{{ user.username.toUpperCase() }}</p>
+          <div class="profile-info" style="width: calc(100% - 60px)">
+            <a
+              :href="`${serverDomain}/${user.username}`"
+              :title="user.username.toUpperCase()"
+              data-testid="user-profile-link"
+              class="line-break-anywhere is-ellipsis-1"
+              >{{ user.username.toUpperCase() }}</a
+            >
             <a :href="`mailto:${user.email}`"> {{ user.email }}</a>
           </div>
         </div>
-        <ul>
-          <li>
-            <a :href="`${serverDomain}/user/settings/`">Settings</a>
+        <transition-group name="list" tag="ul">
+          <li key="settings">
+            <a
+              data-testid="user-settings-link"
+              :href="`${serverDomain}/user/settings/`"
+              >Settings</a
+            >
           </li>
-          <template v-if="user.is_admin">
-            <li>
-              <a :href="`${serverDomain}/admin`"> Site Administration </a>
-            </li>
-          </template>
-          <li>
-            <a :href="`${serverDomain}/user/logout`"> Sign out </a>
+          <li v-if="user.is_admin" key="site-admin">
+            <a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"
+              >Site Administration</a
+            >
           </li>
-        </ul>
+          <li
+            v-if="showAccountSwitcher"
+            :class="`is-${dropDownStatus}`"
+            key="switcher"
+          >
+            <a
+              class="
+                ac-dropdown-button
+                is-fullwidth
+                is-flex
+                is-justify-content-space-between
+                is-align-items-center
+              "
+              @click="toggleList()"
+            >
+              <span>Switch Account</span>
+              <span
+                ><i
+                  :class="`fa fa-angle-${
+                    dropDownStatus === 'open' ? 'up' : 'down'
+                  }`"
+                ></i
+              ></span>
+            </a>
+            <transition-group
+              name="list"
+              tag="ul"
+              class="ac-vscrollbar"
+              ref="dropdownItems"
+              :style="{ maxHeight: dropDownSectionHeight }"
+            >
+              <li
+                v-for="(org, idx) in formattedOrganizations"
+                :key="org.username"
+              >
+                <a
+                  class="is-flex is-align-items-center"
+                  @click="onOrganizationClick(org.username)"
+                >
+                  <div class="width-30 height-30 image">
+                    <img
+                      :src="org.avatar_url"
+                      class="ac-user-profile is-rounded"
+                      alt="icon"
+                    />
+                  </div>
+                  <div
+                    class="
+                      is-flex
+                      is-align-items-center
+                      is-justify-content-space-between
+                      is-fullwidth
+                      ml-10
+                    "
+                  >
+                    <div class="org-info">
+                      <strong
+                        :title="org.username"
+                        class="line-break-anywhere is-ellipsis-1"
+                        >{{ org.username }}</strong
+                      >
+                      <p>
+                        {{
+                          org.isPersonalAccount
+                            ? "Personal Account"
+                            : "Organization"
+                        }}
+                      </p>
+                    </div>
+                    <span
+                      v-if="idx === 0"
+                      class="
+                        material-icons-outlined
+                        font-size-18
+                        ml-10
+                        is-pulled-right
+                      "
+                    >
+                      check
+                    </span>
+                  </div>
+                </a>
+              </li>
+            </transition-group>
+          </li>
+          <li key="dashboard">
+            <nuxt-link
+              v-if="isPlatformDomain"
+              to="/dashboard"
+              data-testid="user-dashboard-link"
+            >
+              Dashboard
+            </nuxt-link>
+            <a
+              v-else
+              :href="`${serverDomain}/dashboard`"
+              data-testid="user-dashboard-link"
+            >
+              Dashboard
+            </a>
+          </li>
+          <li key="signout" @click="$emit('on-logout')">
+            <a
+              data-testid="user-logout-link"
+              :href="`${accountsDomain}/user/logout`"
+            >
+              Sign out
+            </a>
+          </li>
+          <li key="theme" v-if="showThemeMode">
+            <theme-mode @set:theme="setTheme" />
+          </li>
+        </transition-group>
       </div>
     </navbar-item-content>
   </navbar-item>
@@ -42,6 +169,7 @@ import { defineComponent, defineAsyncComponent } from "vue";
 
 export default defineComponent({
   props: {
+    // active user info
     user: {
       type: Object,
       default: () => ({}),
@@ -50,15 +178,111 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    accountsDomain: {
+      type: String,
+      default: "",
+    },
+    showAccountSwitcher: {
+      type: Boolean,
+      default: false,
+    },
+    // all available organization list including personal account
+    organizations: {
+      type: Array,
+      default: () => [],
+    },
+    showThemeMode: {
+      type: Boolean,
+      default: false,
+    },
+    isPlatformDomain: {
+      type: Boolean,
+      default: false,
+    },
   },
+  emits: ["set:theme", "on-logout"],
 
   components: {
     NavbarItem: defineAsyncComponent(() =>
       import("../../v2/navbar/NavbarItem.vue").then((module) => module.default)
     ),
     NavbarItemContent: defineAsyncComponent(() =>
-      import("../../v2/navbar/NavbarItemContent.vue").then((module) => module.default)
+      import("../../v2/navbar/NavbarItemContent.vue").then(
+        (module) => module.default
+      )
     ),
+    ThemeMode: defineAsyncComponent(() =>
+      import("../../v3/navbar/ThemeMode.vue").then((module) => module.default)
+    ),
+  },
+
+  computed: {
+    formattedOrganizations() {
+      let activeUser;
+      const filteredList = this.organizations.filter((item) => {
+        if (item.username === this.user.username) {
+          activeUser = item;
+        } else {
+          return true;
+        }
+        return false;
+      });
+
+      filteredList.unshift(activeUser);
+
+      return filteredList || [];
+    },
+  },
+
+  data() {
+    return {
+      dropDownStatus: "close",
+      dropDownSectionHeight: null,
+    };
+  },
+
+  methods: {
+    toggleList() {
+      this.dropDownStatus = this.dropDownStatus === "open" ? "close" : "open";
+      this.$nextTick(() => {
+        this.$refs["dropdownItems"].$el.scrollTo(0, 0);
+      });
+    },
+    onOrganizationClick(orgName) {
+      this.$refs["dropdownItems"].$el.scrollTo(0, 0);
+      this.$emit("activeorg$set", orgName);
+    },
+    onMouseLeave() {
+      this.dropDownStatus = "close";
+    },
+    setTheme(val) {
+      this.$emit("set:theme", val);
+    },
+  },
+
+  watch: {
+    dropDownStatus: {
+      immediate: true,
+      handler(n) {
+        if (n === "open") {
+          this.$nextTick(() => {
+            const dropDownUl = this.$refs["dropdownItems"];
+            if (dropDownUl)
+              this.dropDownSectionHeight = `${dropDownUl.scrollHeight}px`;
+          });
+        } else {
+          this.dropDownSectionHeight = null;
+        }
+      },
+    },
   },
 });
-</script>
+</script>
+<style lang="scss" scoped>
+.ac-vscrollbar {
+  overflow: auto !important;
+}
+.line-break-anywhere {
+  line-break: anywhere;
+}
+</style>

package/vue-components/v3/notification/AlertBox.vue

@@ -0,0 +1,61 @@
+<template>
+  <!-- alert-message area start  -->
+  <!-- plsease, use this class name ('.is-info' 'is-success', 'is-error', 'is-warning') -->
+  <div :class="`ac-notification is-${notificationType} mb-15`">
+    <p>
+      <i v-if="!hideIcon" :class="`fa ${iconClass} mr-5`"></i
+      ><span v-html="getSanitizedHtml(content)"></span>
+      <ac-button
+        v-if="actionButton?.show"
+        :title="actionButton?.title"
+        :icon-class="actionButton?.iconClass"
+        data-testid="notification-action-button"
+        @click.prevent="actionButton?.action()"
+      >
+      </ac-button>
+    </p>
+  </div>
+  <!-- alert-message area end -->
+</template>
+
+<script setup lang="ts">
+import { toRefs, computed, defineAsyncComponent } from "vue";
+import DOMPurify from "dompurify";
+
+const AcButton = defineAsyncComponent(
+  () => import("@appscode/design-system/vue-components/v3/button/Button.vue")
+);
+
+const props = withDefaults(
+  defineProps<{
+    notificationType: string;
+    content: string;
+    hideIcon: boolean;
+    actionButton?: {
+      show: boolean;
+      title: string;
+      iconClass: string;
+      action: (...args: any) => void | undefined;
+    };
+  }>(),
+  {
+    notificationType: "",
+    content: "",
+    hideIcon: false,
+    actionButton: undefined,
+  }
+);
+
+const { notificationType, content, hideIcon, actionButton } = toRefs(props);
+
+const iconClass = computed(() => {
+  if (notificationType.value === "success") return "fa-check-circle";
+  else if (notificationType.value === "info") return "fa-info-circle";
+  else if (notificationType.value === "error") return "fa-times-circle";
+  else return "fa-info-circle";
+});
+
+const getSanitizedHtml = (content: string) => {
+  return DOMPurify.sanitize(content || "");
+};
+</script>

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

@@ -0,0 +1,98 @@
+<template>
+  <div
+    @mouseenter="notificationPanelOpen = true"
+    @mouseleave="notificationPanelOpen = false"
+  >
+    <button class="button ac-nav-button">
+      <span v-if="unreadCount">{{ unreadCount }}</span>
+      <i
+        class="fa fa-bell"
+        :class="{ 'ac-shake': unreadCount }"
+        aria-hidden="true"
+      ></i>
+    </button>
+    <div class="ac-menu-content is-notification">
+      <div class="notification-header">
+        <div class="left-content">
+          <p>
+            Notifications <span>({{ notifications.length }})</span>
+          </p>
+        </div>
+        <div class="right-content"></div>
+      </div>
+      <div :key="notificationPanelOpen ? 1 : 0" class="notification-body">
+        <transition-group v-if="notifications.length" name="slide-right">
+          <notification-item
+            v-for="notification in notifications"
+            :key="`${notification.id}${unreadCount}`"
+            :notification="notification"
+          />
+        </transition-group>
+        <span v-else class="single-notification-item"
+          >No new notifications</span
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NatsConnection, StringCodec, Subscription } from "nats.ws";
+import {
+  computed,
+  defineAsyncComponent,
+  getCurrentInstance,
+  ref,
+  Ref,
+  watch,
+} from "vue";
+import { TaskLog } from "../../../typings/long-running-tasks";
+import { Notification } from "../../../typings/notification";
+
+const NotificationItem = defineAsyncComponent(
+  () => import("./NotificationItem.vue")
+);
+
+const notifications: Ref<Notification[]> = ref([]);
+const notificationsRead = ref(0);
+const unreadCount = computed(
+  () => notifications.value.length - notificationsRead.value
+);
+
+const notificationPanelOpen = ref(false);
+watch(notificationPanelOpen, (n) => {
+  if (n) notificationsRead.value = notifications.value.length;
+});
+
+function addNewNotification(notification: Notification) {
+  notifications.value.unshift(notification);
+  if (notificationPanelOpen.value) {
+    notificationsRead.value = notifications.value.length;
+  }
+}
+
+const app = getCurrentInstance();
+const $nats: NatsConnection = app?.appContext.config.globalProperties.$nc;
+let subscription: Subscription;
+
+async function subscribeToNotifcations() {
+  subscription = $nats?.subscribe("notifications");
+  console.log("Started listening to Notifications");
+
+  if (subscription) {
+    // listen to channel events
+    for await (const msg of subscription) {
+      console.log("notifications ===>");
+      console.log({ data: StringCodec().decode(msg.data) });
+      const log: TaskLog = JSON.parse(StringCodec().decode(msg.data));
+      console.log({ log });
+      const currentTime = new Date().getTime();
+      addNewNotification({ ...log, id: currentTime, time: currentTime });
+      msg.respond();
+    }
+    console.log("Stopped listening to Notifications");
+    console.log("Closed Channel Notifications");
+  }
+}
+subscribeToNotifcations();
+</script>

package/vue-components/v3/notification/NotificationItem.vue

@@ -0,0 +1,52 @@
+<template>
+  <a class="single-notification-item is-complete">
+    <p>
+      {{ notification.msg }}
+    </p>
+    <div class="notification-status">
+      <p
+        :class="{
+          'is-success': notification.status === 'Success',
+          'has-text-danger': notification.status === 'Failed',
+          'is-info':
+            notification.status === 'Started' ||
+            notification.status === 'Running',
+          'is-warning': notification.status === 'Pending',
+        }"
+      >
+        <i
+          class="fa mr-5"
+          :class="{
+            'fa-check': notification.status === 'Success',
+            'fa-exclamation-triangle': notification.status === 'Failed',
+            'fa-info-circle':
+              notification.status === 'Started' ||
+              notification.status === 'Pending' ||
+              notification.status === 'Running',
+          }"
+        />
+        {{ notification.status }}
+      </p>
+      <p>{{ notificationTime }} ago</p>
+    </div>
+  </a>
+</template>
+
+<script setup lang="ts">
+  import { computed, toRefs } from 'vue'
+  import { Notification } from '../../../typings/notification'
+  import TimeConvert from '../../../plugins/time-convert'
+
+  const props = withDefaults(defineProps<{ notification: Notification }>(), {
+    notification: () => ({
+      id: 0,
+      status: 'Pending',
+      time: 0,
+    }),
+  })
+
+  const { notification } = toRefs(props)
+  const notificationTime = computed(() =>
+    TimeConvert.getDayDifferences({ past: notification.value.time })
+  )
+</script>