@appscode/design-system 1.0.43-alpha.99 → 1.1.0-alpha.10

package/vue-components/v2/modal/Modal.vue

@@ -6,7 +6,7 @@
       v-if="showModal"
       class="ac-modal is-middle-alignment"
       :class="modifierClasses"
-      @click.self="destroyModal"
+      @click.self="onModalOutsideClick"
     >
       <div class="ac-modal-inner">
         <!-- modal header start  -->
@@ -18,7 +18,10 @@
               <ac-button
                 modifier-classes="is-square is-transparent"
                 :disabled="isCloseOptionDisabled"
-                :icon-image="require('@/assets/images/icons/close-icon.svg')"
+                :icon-image="
+                  require('@appscode/design-system-images/icons/close-icon.svg')
+                "
+                data-testid="delete-confirmation-modal-close-icon"
                 @click.stop="destroyModal"
               />
             </header-item>
@@ -27,7 +30,11 @@
         <!-- modal header end -->
 
         <!-- modal body start  -->
-        <div class="ac-modal-body">
+        <div
+          class="ac-modal-body ac-vscrollbar"
+          :class="modifierBodyClasses"
+          data-testid="ac-modal-content-with-scroll"
+        >
           <div class="ac-modal-content">
             <!-- freedom content start  -->
             <slot />
@@ -37,7 +44,10 @@
         <!-- modal body end  -->
 
         <!-- modal footer start -->
-        <div class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between">
+        <div
+          v-if="!hideActionFooter"
+          class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between"
+        >
           <div>
             <slot name="modal-footer-left" />
           </div>
@@ -69,7 +79,19 @@ export default {
     isCloseOptionDisabled: {
       type: Boolean,
       default: false,
-    }
+    },
+    ignoreOutsideClick: {
+      type: Boolean,
+      default: false,
+    },
+    hideActionFooter: {
+      type: Boolean,
+      default: false,
+    },
+    modifierBodyClasses: {
+      type: String,
+      default: "",
+    },
   },
 
   components: {
@@ -105,6 +127,10 @@ export default {
         this.destroyModal();
       }
     },
+    onModalOutsideClick() {
+      if (this.ignoreOutsideClick) return;
+      this.destroyModal();
+    },
     initializeModal() {
       this.showModal = true;
       document.addEventListener("keydown", this.onKeyDown);

package/vue-components/v2/modals/DeleteConfirmationModal.vue

@@ -0,0 +1,79 @@
+<template>
+  <!-- modal start  -->
+  <modal
+    :title="title"
+    modifier-classes="is-normal"
+    :open="open"
+    @closemodal="closeModal"
+  >
+    <!-- freedom content start  -->
+    <div class="action-message pt-35 pb-35 has-text-centered">
+      <h5 class="is-message">{{ message }} {{ itemName ? "" : "?" }}</h5>
+      <p class="is-description">{{ itemName }} {{ itemName ? "?" : "" }}</p>
+    </div>
+
+    <!-- freedom content end -->
+
+    <!-- modal footer start -->
+    <template #modal-footer-controls>
+      <ac-button
+        @click.stop="closeModal"
+        title="Cancel"
+        modifier-classes="is-outlined"
+        data-testid="delete-confirmation-modal-close-button"
+      />
+      <ac-button
+        modifier-classes="is-danger"
+        :is-loader-active="isDeleteActive"
+        title="Yes"
+        data-testid="delete-confirmation-modal-confirm-button"
+        @click.stop="confirm(true)"
+      />
+    </template>
+  </modal>
+  <!-- modal end  -->
+</template>
+
+<script>
+export default {
+  components: {
+    Modal: () => import("./../modal/Modal.vue"),
+    AcButton: () => import("./../button/Button.vue"),
+  },
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    message: {
+      type: String,
+      default: "",
+    },
+    itemName: {
+      type: String,
+      default: "",
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    isDeleteActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    confirm(response) {
+      this.$emit("delete-confirmation-modal$confirm", response);
+    },
+    closeModal() {
+      this.confirm(false);
+      this.$emit("closemodal", true);
+    },
+  },
+};
+</script>

package/vue-components/v2/modals/JsonShowModal.vue

@@ -10,7 +10,9 @@
         <ac-button
           modifier-classes="is-square is-primary"
           icon-class="copy"
-          v-clipboard:copy="`${editorTitle}: &quot;${editorContent}&quot;`"
+          v-clipboard:copy="
+            `${editorTitle}: ${JSON.stringify(parsedContent, null, 4)}`
+          "
           v-clipboard:success="onCopy"
           v-clipboard:error="onError"
         />
@@ -26,6 +28,8 @@
 </template>
 
 <script>
+import Preloader from "../preloader/Preloader.vue";
+import Banner from "../banner/Banner.vue";
 export default {
   props: {
     open: {
@@ -43,7 +47,13 @@ export default {
   },
   components: {
     Modal: () => import("../modal/Modal.vue"),
-    Editor: () => import("../editor/Editor.vue"),
+    Editor: () => ({
+      component: import("../editor/Editor.vue"),
+      loading: Preloader,
+      delay: 200,
+      error: Banner,
+      timeout: 100000,
+    }),
     AcButton: () => import("../button/Button.vue"),
     HeaderItem: () => import("../header/HeaderItem.vue"),
   },

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

@@ -7,31 +7,155 @@
         <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="isLoggedinUserAdmin" 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">
+            <a
+              :href="`${accountsDomain}/user/logout`"
+              data-testid="signout-link"
+            >
+              Sign out
+            </a>
+          </li>
+        </transition-group>
       </div>
     </navbar-item-content>
   </navbar-item>
@@ -40,6 +164,7 @@
 <script>
 export default {
   props: {
+    // active user info
     user: {
       type: Object,
       default: () => ({}),
@@ -48,11 +173,98 @@ export default {
       type: String,
       default: "",
     },
+    accountsDomain: {
+      type: String,
+      default: "",
+    },
+    showAccountSwitcher: {
+      type: Boolean,
+      default: false,
+    },
+    // all available organization list including personal account
+    organizations: {
+      type: Array,
+      default: () => [],
+    },
+    isLoggedinUserAdmin: {
+      type: Boolean,
+      default: false,
+    },
+    isPlatformDomain: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   components: {
     NavbarItem: () => import("./NavbarItem.vue"),
     NavbarItemContent: () => import("./NavbarItemContent.vue"),
   },
+
+  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";
+    },
+  },
+
+  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/v2/notification/Notification.vue

@@ -0,0 +1,101 @@
+<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>
+import { StringCodec } from "nats.ws/cjs/nats";
+export default {
+  components: {
+    NotificationItem: () => import("./NotificationItem.vue"),
+  },
+  data() {
+    return {
+      notifications: [],
+      notificationsRead: 0,
+
+      notificationPanelOpen: false,
+      subscription: null,
+    };
+  },
+  computed: {
+    unreadCount() {
+      return this.notifications.length - this.notificationsRead;
+    },
+  },
+  watch: {
+    notificationPanelOpen(n) {
+      if (n) {
+        this.notificationsRead = this.notifications.length;
+      }
+    },
+  },
+  created() {
+    this.subscribeToNotifcations();
+  },
+  methods: {
+    addNewNotification(notification) {
+      this.notifications.unshift(notification);
+      if (this.notificationPanelOpen) {
+        this.notificationsRead = this.notifications.length;
+      }
+    },
+    async subscribeToNotifcations() {
+      this.subscription = this.$nc?.subscribe("notifications");
+      console.log("Started listening to Notifications");
+
+      if (this.subscription) {
+        // listen to channel events
+        for await (const msg of this.subscription) {
+          console.log("notifications ===>");
+          console.log({ data: StringCodec().decode(msg.data) });
+          const log = JSON.parse(StringCodec().decode(msg.data));
+          console.log({ log });
+          const currentTime = new Date().getTime();
+          this.addNewNotification({
+            ...log,
+            id: currentTime,
+            time: currentTime,
+          });
+          msg.respond();
+        }
+        console.log("Stopped listening to Notifications");
+        console.log("Closed Channel Notifications");
+      }
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,44 @@
+<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>{{ notification.time | getDayDifferences }} ago</p>
+    </div>
+  </a>
+</template>
+
+<script>
+export default {
+  props: {
+    notification: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+};
+</script>

package/vue-components/v2/pagination/Pagination.vue

@@ -9,7 +9,11 @@
         "
       >
         <label>Rows per page</label>
-        <select v-model="selectedItemCountPerPage" name="page">
+        <select
+          v-model="selectedItemCountPerPage"
+          name="page"
+          data-testid="rows-per-page-selector"
+        >
           <option :value="5">5</option>
           <option :value="10" v-show="totalNoOfItems > 5">10</option>
           <option :value="15" v-show="totalNoOfItems > 10">15</option>
@@ -31,19 +35,28 @@
 
       <ul v-if="totalNoOfItems > selectedItemCountPerPage">
         <li>
-          <a class="previous" @click.prevent="prevPage()">
+          <a
+            class="previous"
+            @click.prevent="prevPage()"
+            data-testid="pagination-previous-page-button"
+          >
             <i class="fa fa-angle-left" aria-hidden="true"></i>
           </a>
         </li>
         <li v-for="page in pages" :key="`page-${page}`">
           <a
             @click.prevent="changePage(page)"
+            data-testid="pagination-page-switch-button"
             :class="{ 'is-current': activePageNo === page }"
             >{{ page }}</a
           >
         </li>
         <li>
-          <a class="next" @click.prevent="nextPage()">
+          <a
+            class="next"
+            @click.prevent="nextPage()"
+            data-testid="pagination-next-page-button"
+          >
             <i class="fa fa-angle-right" aria-hidden="true"></i>
           </a>
         </li>

package/vue-components/v2/preloader/Preloader.vue

@@ -19,7 +19,7 @@ export default {
     },
     message: {
       type: String,
-      default: "Fetching! Please wait for sometime..."
+      default: "Loading ..."
     }
   }
 };