@appscode/design-system 1.0.43-alpha.10 → 1.0.43-alpha.103

package/vue-components/v2/editor/ResourceKeyValueEditor.vue

@@ -0,0 +1,232 @@
+<template>
+  <content-table :table-title="title" :searchable="isSearchable">
+    <template #content-controls>
+      <header-item v-if="showHideBtn">
+        <ac-button
+          modifier-classes="is-square is-primary"
+          :icon-class="hideValue ? 'eye-slash' : 'eye'"
+          @click.prevent="hideValue = !hideValue"
+        />
+      </header-item>
+      <header-item v-if="showCopyBtn">
+        <ac-button
+          modifier-classes="is-square is-primary"
+          icon-class="copy"
+          v-clipboard:copy="decode(previewYamls[activeKey])"
+          v-clipboard:success="onCopy"
+          v-clipboard:error="onError"
+        />
+      </header-item>
+      <header-item v-if="showDownloadBtn">
+        <download-btn
+          :file-data="decode(previewYamls[activeKey])"
+          :file-name="activePreview"
+        />
+      </header-item>
+      <header-item v-if="showUpdateBtn && !isEditorReadOnly">
+        <ac-button
+          modifier-classes="is-square is-primary"
+          icon-class="pencil-square-o"
+          @click.prevent="
+            $emit('updateData', activeKey, previewYamls[activeKey])
+          "
+        />
+      </header-item>
+      <header-item v-if="showDeleteBtn">
+        <ac-button
+          modifier-classes="is-square is-danger"
+          icon-class="trash"
+          @click.prevent="showDeleteDataModal = true"
+        />
+        <delete-confirmation-modal
+          title="Delete Resource"
+          message="Do you want to delete "
+          :itemName="activePreview"
+          :open="showDeleteDataModal"
+          @delete-confirmation-modal$confirm="confirmDelete"
+          @closemodal="showDeleteDataModal = false"
+        />
+      </header-item>
+      <slot name="content-action" />
+    </template>
+    <template #content>
+      <div class="ac-preview is-active is-not-fixed">
+        <div class="ac-preview-inner">
+          <!-- preview body start  -->
+          <div class="ac-preview-body mt-0 pt-15 pl-20">
+            <div
+              v-if="isPreviewLoading || (!isPreviewLoading && previewYamls)"
+              class="left-content"
+            >
+              <div class="ac-files">
+                <ul v-if="!isPreviewLoading">
+                  <li
+                    v-for="(previewYaml, idx) in previewYamls"
+                    :key="previewYaml.name + idx"
+                    :class="{ 'is-active': activePreview === previewYaml.name }"
+                  >
+                    <a @click.prevent="setActivePreview(previewYaml, idx)">
+                      <span>
+                        <img
+                          src="~@appscode/design-system-images/icons/file-icon.svg"
+                          alt=""
+                        />
+                      </span>
+                      <span>{{ previewYaml.name }}</span>
+                    </a>
+                  </li>
+                </ul>
+                <sidebar-loader v-else />
+              </div>
+            </div>
+            <div class="right-content">
+              <div class="right-content">
+                <resource-loader v-if="isPreviewLoading" />
+                <editor
+                  v-else-if="!isPreviewLoading && !hideValue"
+                  v-model="activeFile.content"
+                  :original-value="activeFile.content"
+                  :language="activeFile.format"
+                  :read-only="isEditorReadOnly"
+                  :editor-height="60"
+                  :show-minimap="false"
+                />
+                <span v-else> *************** </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </content-table>
+</template>
+<script>
+export default {
+  components: {
+    AcButton: () =>
+      import("@appscode/design-system/vue-components/v2/button/Button"),
+    Editor: () =>
+      import("@appscode/design-system/vue-components/v2/editor/Editor.vue"),
+    ContentTable: () =>
+      import(
+        "@appscode/design-system/vue-components/v2/content/ContentTable.vue"
+      ),
+    HeaderItem: () =>
+      import("@appscode/design-system/vue-components/v2/header/HeaderItem.vue"),
+    AcButton: () =>
+      import("@appscode/design-system/vue-components/v2/button/Button"),
+    DownloadBtn: () => import("@/components/buttons/DownloadBtn.vue"),
+    DeleteConfirmationModal: () =>
+      import("@/components/modals/DeleteConfirmationModal.vue"),
+    ResourceLoader: () => import("@/components/loaders/ResourceLoader.vue"),
+    SidebarLoader: () => import("@/components/loaders/SidebarLoader.vue"),
+  },
+  props: {
+    title: {
+      type: String,
+      default: "Title",
+    },
+    isSearchable: {
+      type: Boolean,
+      default: false,
+    },
+    isPreviewLoading: {
+      type: Boolean,
+      default: false,
+    },
+    isEditorReadOnly: {
+      type: Boolean,
+      default: false,
+    },
+    previewYamls: {
+      type: Array,
+      default: () => {
+        [];
+      },
+    },
+    visibleBtn: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      activePreview: "",
+      activeKey: 0,
+      hideValue: "",
+      showDeleteDataModal: false,
+    };
+  },
+  computed: {
+    activeFile() {
+      const activeFile = this.previewYamls.find(
+        (p) => p.name === this.activePreview
+      );
+
+      return activeFile || { content: "", format: "yaml" };
+    },
+    showCopyBtn() {
+      if (this.visibleBtn.showCopyBtn) return true;
+      else return false;
+    },
+    showHideBtn() {
+      if (this.visibleBtn.showHideBtn) return true;
+      else return false;
+    },
+    showUpdateBtn() {
+      if (this.visibleBtn.showUpdateBtn) return true;
+      else return false;
+    },
+    showDownloadBtn() {
+      if (this.visibleBtn.showDownloadBtn) return true;
+      else return false;
+    },
+    showDeleteBtn() {
+      if (this.visibleBtn.showDeleteBtn) return true;
+      else return false;
+    },
+  },
+  methods: {
+    initActivePreview() {
+      this.activePreview = this.previewYamls[0] && this.previewYamls[0].name;
+      this.hideValue = this.previewYamls[0].isSecret;
+      this.activeKey = 0;
+    },
+    setActivePreview(previewYaml, idx) {
+      this.activePreview = previewYaml.name;
+      this.hideValue = previewYaml.isSecret;
+      this.activeKey = idx;
+    },
+    onCopy() {
+      this.$toasted.global.success("Value copied successfully").goAway(1000);
+    },
+    onError() {
+      this.$toasted.global.error("Copying failed").goAway(1000);
+    },
+    decode(str) {
+      if (this.hideValue === false) return str.content;
+      else return "";
+    },
+    encode(str) {
+      if (this.hideValue === false) return str.content;
+      else return "";
+    },
+    confirmDelete(flag) {
+      if (flag) this.$emit("deleteResource", this.activeKey);
+    },
+  },
+  watch: {
+    previewYamls: {
+      deep: true,
+      immediate: true,
+      handler(n) {
+        if (n.length) {
+          this.initActivePreview();
+        }
+      },
+    },
+  },
+};
+</script>

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  -->
@@ -17,6 +17,7 @@
             <header-item>
               <ac-button
                 modifier-classes="is-square is-transparent"
+                :disabled="isCloseOptionDisabled"
                 :icon-image="require('@/assets/images/icons/close-icon.svg')"
                 @click.stop="destroyModal"
               />
@@ -36,7 +37,12 @@
         <!-- modal body end  -->
 
         <!-- modal footer start -->
-        <div class="ac-modal-footer action-footer">
+        <div
+          class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between"
+        >
+          <div>
+            <slot name="modal-footer-left" />
+          </div>
           <buttons class="has-text-right is-block">
             <slot name="modal-footer-controls" />
           </buttons>
@@ -52,28 +58,36 @@ export default {
   props: {
     open: {
       type: Boolean,
-      default: false,
+      default: false
     },
     title: {
       type: String,
-      default: "Modal",
+      default: "Modal"
     },
     modifierClasses: {
       type: String,
-      default: "",
+      default: ""
+    },
+    isCloseOptionDisabled: {
+      type: Boolean,
+      default: false
     },
+    ignoreOutsideClick: {
+      type: Boolean,
+      default: false
+    }
   },
 
   components: {
     HeaderItems: () => import("../header/HeaderItems.vue"),
     HeaderItem: () => import("../header/HeaderItem.vue"),
     Buttons: () => import("../button/Buttons.vue"),
-    AcButton: () => import("../button/Button.vue"),
+    AcButton: () => import("../button/Button.vue")
   },
 
   data() {
     return {
-      showModal: false,
+      showModal: false
     };
   },
 
@@ -86,8 +100,8 @@ export default {
         } else {
           this.destroyModal();
         }
-      },
-    },
+      }
+    }
   },
 
   methods: {
@@ -97,16 +111,21 @@ export default {
         this.destroyModal();
       }
     },
+    onModalOutsideClick() {
+      if (this.ignoreOutsideClick) return;
+      this.destroyModal();
+    },
     initializeModal() {
       this.showModal = true;
       document.addEventListener("keydown", this.onKeyDown);
     },
     destroyModal() {
+      if (this.isCloseOptionDisabled) return;
       this.showModal = false;
       document.removeEventListener("keydown", this.onKeyDown);
 
       this.$emit("closemodal", true);
-    },
-  },
+    }
+  }
 };
 </script>

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

@@ -1,10 +1,13 @@
 <template>
-  <div class="app-drawer-wrapper d-table-cell">
-    <div class="drawer-icon">
+  <div class="app-drawer-wrapper is-flex">
+    <div
+      class="drawer-icon  is-flex is-justify-content-center is-align-items-center"
+    >
       <svg
         class="gb_We"
         focusable="false"
         viewBox="0 0 24 24"
+        style="width: 22px;margin-top: 2px;"
         :style="{ fill: 'white' }"
       >
         <path
@@ -20,16 +23,14 @@
             <article class="media">
               <figure class="media-left">
                 <p class="image">
-                  <img
-                    :src="app.icon_url"
-                  />
+                  <img :src="app.icon_url" />
                 </p>
               </figure>
               <div class="media-content">
                 <div class="content">
                   <p>
-                    <strong>{{app.title}}</strong>
-                    <span>{{app.sub_title}}</span>
+                    <strong>{{ app.title }}</strong>
+                    <span>{{ app.sub_title }}</span>
                   </p>
                 </div>
               </div>
@@ -50,7 +51,7 @@ export default {
     }
   },
   components: {
-    NavbarItemContent: () => import("./NavbarItemContent.vue"),
-  },
+    NavbarItemContent: () => import("./NavbarItemContent.vue")
+  }
 };
 </script>

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

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <button
+      v-if="themeMode"
+      class="button ac-nav-button"
+      style="color: #ffffff; font-size: 15px;"
+      @click="toggleTheme"
+      :title="themeModes[themeMode].displayName"
+    >
+      <i :class="`fa ${themeModes[themeMode].iconClass}`" />
+    </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>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      themeMode: "",
+      themeModes: {
+        system: {
+          displayName: "System Theme",
+          iconClass: "fa-desktop",
+        },
+        light: {
+          displayName: "Light Theme",
+          iconClass: "fa-sun-o",
+        },
+        dark: {
+          displayName: "Dark Theme",
+          iconClass: "fa-moon-o",
+        }
+      }
+    };
+  },
+
+  mounted() {
+    // get theme mode from localStorage or set default one
+    this.themeMode = localStorage.getItem("themeMode") || "light";
+  },
+
+  destroyed() {
+    this.removeColorSchemeEventListener();
+  },
+
+  watch: {
+    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";
+    },
+
+    // triggered when theme mode is updated
+    onThemeModeChange(n) {
+      localStorage.setItem("themeMode", n);
+
+      let theme = n;
+      if (n === "system") {
+        const isDarkMode =
+          window.matchMedia &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches;
+        this.addColorSchemeEventListener();
+        theme = isDarkMode ? "dark" : "light";
+      } else {
+        this.removeColorSchemeEventListener();
+      }
+      this.$emit("set:theme", theme);
+      this.handleDarkThemeClass(theme);
+    },
+
+    // add proper css class to update the ui theme
+    handleDarkThemeClass(currentTheme) {
+      if (currentTheme === "light") {
+        document.documentElement.classList.remove("is-dark-theme");
+      } else {
+        document.documentElement.classList.add("is-dark-theme");
+      }
+    },
+
+    // add system theme listener event
+    addColorSchemeEventListener() {
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .addEventListener("change", this.handleSystemThemeChange);
+    },
+
+    // remove system theme listener event
+    removeColorSchemeEventListener() {
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .removeEventListener("change", this.handleSystemThemeChange);
+    },
+
+    handleSystemThemeChange() {
+      this.onThemeModeChange(this.themeMode);
+    }
+  }
+};
+</script>

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

@@ -28,6 +28,9 @@
               <a :href="`${serverDomain}/admin`"> Site Administration </a>
             </li>
           </template>
+          <li>
+            <a :href="`${serverDomain}/dashboard`"> Dashboard </a>
+          </li>
           <li>
             <a :href="`${serverDomain}/user/logout`"> Sign out </a>
           </li>

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column"
+    class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column ac-preloader"
     style="height: calc(100vh - 200px);"
   >
     <span v-if="showSpinner" class="spinner"></span>
@@ -15,12 +15,12 @@ export default {
   props: {
     showSpinner: {
       type: Boolean,
-      default: true,
+      default: true
     },
     message: {
       type: String,
-      default: "Fetching! Please wait for sometime...",
-    },
-  },
+      default: "Fetching! Please wait for sometime..."
+    }
+  }
 };
 </script>

package/vue-components/v2/sidebar/ClusterSwitcher.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="is-cluster-logo" v-if="sidebarCollapsed">
+    <img
+      width="40"
+      :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
+      onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+      alt="provider-icon"
+    />
+  </div>
+  <multiselect
+    v-else
+    v-model="selectedCluster"
+    placeholder="Selected Cluster"
+    label="name"
+    track-by="name"
+    :options="clusterOptions"
+    :allow-empty="false"
+    deselectLabel=""
+    selectLabel=""
+    selectedLabel=""
+  >
+    <template slot="singleLabel" slot-scope="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          :src="getProviderIcon(props.option.provider)"
+          onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+          alt="No cluster selected"
+        /><span
+          ><span>{{ props.option.displayName }}</span></span
+        >
+      </div>
+    </template>
+    <template slot="option" slot-scope="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          class="mr-15"
+          :src="getProviderIcon(props.option.provider)"
+          onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+          alt="No cluster selected"
+        />
+        <div>
+          <p>{{ props.option.displayName }}</p>
+          <p class="location">{{ props.option.location }}</p>
+        </div>
+      </div>
+    </template>
+  </multiselect>
+</template>
+
+<script>
+export default {
+  props: {
+    sidebarCollapsed: {
+      type: Boolean,
+      default: false,
+    },
+    mouseHover: {
+      type: Boolean,
+      default: false,
+    },
+    clusterOptions: {
+      type: Array,
+      default: [],
+    },
+    value: {
+      type: String,
+      default: "",
+    }
+  },
+
+  components: {
+    Multiselect: () => import("vue-multiselect"),
+  },
+
+  data() {
+    return {
+      selectedCluster: null,
+      selectedClusterName: "",
+    };
+  },
+
+  methods: {
+    getProviderIcon(provider) {
+      return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`;
+    },
+  },
+
+  watch: {
+    value: {
+      immediate: true,
+      handler(n) {
+        this.selectedClusterName = n;
+      },
+    },
+    selectedCluster: {
+      deep: true,
+      handler(n) {
+        this.selectedClusterName = n.name;
+      },
+    },
+    selectedClusterName(n) {
+      if (this.selectedCluster && n !== this.selectedCluster.name) {
+        this.clusterOptions.forEach((item) => {
+          if (this.selectedClusterName === item.name) {
+            this.selectedCluster = item;
+          }
+        });
+      }
+      this.$emit("input", n);
+    },
+    clusterOptions: {
+      deep: true,
+      immediate: true,
+      async handler(list) {
+        if (list) {
+          list.forEach(async (item) => {
+            if(item.name === this.selectedClusterName) {
+              this.selectedCluster = item;
+            }
+          });
+        }
+      },
+    },
+  },
+};
+</script>

package/vue-components/v2/sidebar/SidebarItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <li>
+  <li ref="sidebarItem">
     <router-link
       :id="id"
       :title="title"
@@ -38,5 +38,27 @@ export default {
       default: "@/assets/images/icons/basic.svg",
     },
   },
+  watch: {
+    isActive: {
+      immediate: true,
+      handler(n) {
+        if (n) {
+          this.$nextTick(() => {
+            setTimeout(() => {
+              const top = (this.$refs.sidebarItem && this.$refs.sidebarItem.getBoundingClientRect().top) || 0;
+              // preventing scroll to options that are already visible
+              if (top > window.innerHeight - 200) {
+                // scroll to selected option item
+                this.$refs.sidebarItem.scrollIntoView({
+                  behavior: 'smooth',
+                  block: "center"
+                });
+              }
+            }, 500);  
+          });
+        }
+      }
+    }
+  }
 };
 </script>