@appscode/design-system 1.0.43-alpha.109 → 1.0.43-alpha.112

package/base/utilities/_default.scss

@@ -143,7 +143,11 @@
     }
   }
 }
-
+.ac-system-body {
+  &.is-preview-step {
+    grid-template-columns: calc(100% - 270px) 270px !important;
+  }
+}
 .form-content {
   width: 720px;
 }

package/package.json

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

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

@@ -0,0 +1,133 @@
+<template>
+  <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 filteredYamls"
+                :key="previewYaml.name + idx"
+                :class="{ 'is-active': activeKey === previewYaml.uid }"
+              >
+                <a @click.prevent="setActivePreview(previewYaml.uid)">
+                  <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="showMinimap"
+            />
+            <span v-else> *************** </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  components: {
+    Editor: () => import("./Editor.vue"),
+    ResourceLoader: () => import("./../loaders/ResourceLoader.vue"),
+    SidebarLoader: () => import("./../loaders/SidebarLoader.vue")
+  },
+  props: {
+    searchText: {
+      type: String,
+      default: ""
+    },
+    toggleHideValue: {
+      type: Boolean,
+      default: true
+    },
+    isPreviewLoading: {
+      type: Boolean,
+      default: false
+    },
+    isEditorReadOnly: {
+      type: Boolean,
+      default: false
+    },
+    previewYamls: {
+      type: Array,
+      default: () => {
+        [];
+      }
+    },
+    showMinimap: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      activeKey: "",
+      hideValue: ""
+    };
+  },
+  computed: {
+    activeFile() {
+      const activeFile = this.filteredYamls.find(
+        element => element.uid === this.activeKey
+      );
+      return activeFile || { content: "No resource available", format: "yaml" };
+    },
+    filteredYamls() {
+      if (this.searchText) {
+        return this.previewYamls.filter(
+          element => JSON.stringify(element).search(this.searchText) > -1
+        );
+      } else return this.previewYamls;
+    }
+  },
+  methods: {
+    initActivePreview() {
+      this.activeKey = this.previewYamls[0].uid;
+      this.hideValue = this.activeFile.isSecret;
+      this.$emit("setActiveKey", this.activeKey);
+    },
+    setActivePreview(uid) {
+      this.activeKey = uid;
+      this.hideValue = this.activeFile.isSecret;
+      this.$emit("setActiveKey", this.activeKey);
+    }
+  },
+  watch: {
+    previewYamls: {
+      deep: true,
+      immediate: true,
+      handler(n) {
+        if (n.length) {
+          this.initActivePreview();
+        }
+      }
+    },
+    toggleHideValue(n) {
+      this.hideValue = n;
+    }
+  }
+};
+</script>

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

@@ -4,23 +4,23 @@
       <header-item v-if="showHideBtn">
         <ac-button
           modifier-classes="is-square is-primary"
-          :icon-class="hideValue ? 'eye-slash' : 'eye'"
-          @click.prevent="hideValue = !hideValue"
+          :icon-class="toggleHideValue ? 'eye-slash' : 'eye'"
+          @click.prevent="toggleHideValue = !toggleHideValue"
         />
       </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:copy="decode(activeFile)"
           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"
+          :file-data="decode(activeFile)"
+          :file-name="activeFile.name"
         />
       </header-item>
       <header-item v-if="showUpdateBtn && !isEditorReadOnly">
@@ -28,9 +28,7 @@
           modifier-classes="is-square is-primary"
           icon-class="pencil-square-o"
           :class="{ 'is-loading': isUpdateActive }"
-          @click.prevent="
-            $emit('updateData', activeKey, previewYamls[activeKey])
-          "
+          @click.prevent="$emit('updateData', activeKey, activeFile)"
         />
       </header-item>
       <header-item v-if="showDeleteBtn">
@@ -42,7 +40,7 @@
         <delete-confirmation-modal
           title="Delete Resource"
           message="Do you want to delete "
-          :item-name="activePreview"
+          :item-name="activeFile.name"
           :open="showDeleteDataModal"
           :is-delete-active="deleteModalStatus === 'loading'"
           @delete-confirmation-modal$confirm="confirmDelete"
@@ -51,54 +49,16 @@
       </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': activeKey === idx }"
-                  >
-                    <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="showMinimap"
-                />
-                <span v-else> *************** </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+    <template #content="{ searchText }">
+      <filtered-file-editor
+        :search-text="searchText"
+        :toggle-hide-value="toggleHideValue"
+        :is-preview-loading="isPreviewLoading"
+        :is-editor-read-only="isEditorReadOnly"
+        :previewYamls="previewYamls"
+        :showMinimap="showMinimap"
+        @setActiveKey="setActiveKey"
+      />
     </template>
   </content-table>
 </template>
@@ -112,8 +72,7 @@ export default {
     DownloadBtn: () => import("./../button/DownloadBtn.vue"),
     DeleteConfirmationModal: () =>
       import("./../modals/DeleteConfirmationModal.vue"),
-    ResourceLoader: () => import("./../loaders/ResourceLoader.vue"),
-    SidebarLoader: () => import("./../loaders/SidebarLoader.vue")
+    FilteredFileEditor: () => import("./FilteredFileEditor.vue")
   },
   props: {
     title: {
@@ -159,15 +118,16 @@ export default {
   },
   data() {
     return {
-      activePreview: "",
       activeKey: 0,
-      hideValue: "",
+      toggleHideValue: "",
       showDeleteDataModal: false
     };
   },
   computed: {
     activeFile() {
-      const activeFile = this.previewYamls[this.activeKey];
+      const activeFile = this.previewYamls.find(
+        element => element.uid === this.activeKey
+      );
       return activeFile || { content: "", format: "yaml" };
     },
     showCopyBtn() {
@@ -192,16 +152,6 @@ export default {
     }
   },
   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);
     },
@@ -209,27 +159,22 @@ export default {
       this.$toasted.global.error("Copying failed").goAway(1000);
     },
     decode(str) {
-      if (str && this.hideValue === false) return str.content;
+      if (str && this.toggleHideValue === false) return str.content;
       else return "";
     },
     encode(str) {
-      if (str && this.hideValue === false) return str.content;
+      if (str && this.toggleHideValue === false) return str.content;
       else return "";
     },
     confirmDelete(flag) {
       if (flag) this.$emit("deleteResource", this.activeKey);
+    },
+    setActiveKey(key) {
+      this.activeKey = key;
+      this.toggleHideValue = this.activeFile.isSecret;
     }
   },
   watch: {
-    previewYamls: {
-      deep: true,
-      immediate: true,
-      handler(n) {
-        if (n.length) {
-          this.initActivePreview();
-        }
-      }
-    },
     deleteModalStatus(n) {
       if (n === "closed") this.showDeleteDataModal = false;
     }

package/vue-components/v2/table/table-cell/CellValue.vue

@@ -1,7 +1,11 @@
 <template>
   <div v-if="isLoaderActive" ref="cellLoaderDiv" :style="{ maxWidth: '300px' }">
-    <content-loader :height="10" :width="computedCellWidth || 300" :primaryColor="primaryColor"
-    :secondaryColor="secondaryColor" />
+    <content-loader
+      :height="10"
+      :width="computedCellWidth || 300"
+      :primaryColor="primaryColor"
+      :secondaryColor="secondaryColor"
+    />
   </div>
   <div v-else class="haha" ref="cellDiv">
     <object-cell
@@ -17,7 +21,7 @@
       :max-character-length="maxCharacterLength"
     />
     <template v-else>
-      <span class="is-ellipsis-1" :title="value">{{
+      <span class="is-ellipsis-1" :title="tooltip">{{
         value || (value === 0 ? 0 : "-")
       }}</span>
     </template>
@@ -25,7 +29,12 @@
 </template>
 
 <script>
-import {loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor} from "@appscode/design-system/plugins/theme";
+import {
+  loaderLightThemePrimaryColor,
+  loaderDarkThemePrimaryColor,
+  loaderLightThemeSecondaryColor,
+  loaderDarkThemeSecondaryColor,
+} from "@appscode/design-system/plugins/theme";
 
 export default {
   props: {
@@ -41,6 +50,10 @@ export default {
       type: null,
       default: "",
     },
+    tooltip: {
+      type: String,
+      defualt: "",
+    },
   },
   components: {
     ContentLoader: () =>
@@ -60,11 +73,15 @@ export default {
       return Math.ceil(this.computedCellWidth / 8);
     },
     primaryColor() {
-      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemePrimaryColor : loaderLightThemePrimaryColor;
+      return document.documentElement.classList.contains("is-dark-theme")
+        ? loaderDarkThemePrimaryColor
+        : loaderLightThemePrimaryColor;
     },
     secondaryColor() {
-      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemeSecondaryColor : loaderLightThemeSecondaryColor;
-    }
+      return document.documentElement.classList.contains("is-dark-theme")
+        ? loaderDarkThemeSecondaryColor
+        : loaderLightThemeSecondaryColor;
+    },
   },
 
   data() {

package/vue-components/v3/table/table-cell/CellValue.vue

@@ -22,7 +22,7 @@
       :max-character-length="maxCharacterLength"
     />
     <template v-else>
-      <span class="is-ellipsis-1" :title="value">{{
+      <span class="is-ellipsis-1" :title="tooltip">{{
         value || (value === 0 ? 0 : "-")
       }}</span>
     </template>
@@ -31,7 +31,12 @@
 
 <script>
 import { defineComponent, defineAsyncComponent } from "vue";
-import { loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor } from "@appscode/design-system/plugins/theme";
+import {
+  loaderLightThemePrimaryColor,
+  loaderDarkThemePrimaryColor,
+  loaderLightThemeSecondaryColor,
+  loaderDarkThemeSecondaryColor,
+} from "@appscode/design-system/plugins/theme";
 
 export default defineComponent({
   props: {
@@ -47,6 +52,10 @@ export default defineComponent({
       type: null,
       default: "",
     },
+    tooltip: {
+      type: String,
+      defualt: "",
+    },
   },
   components: {
     ContentLoader: defineAsyncComponent(() =>
@@ -71,11 +80,15 @@ export default defineComponent({
       return Math.ceil(this.computedCellWidth / 8);
     },
     primaryColor() {
-      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemePrimaryColor : loaderLightThemePrimaryColor;
+      return document.documentElement.classList.contains("is-dark-theme")
+        ? loaderDarkThemePrimaryColor
+        : loaderLightThemePrimaryColor;
     },
     secondaryColor() {
-      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemeSecondaryColor : loaderLightThemeSecondaryColor;
-    }
+      return document.documentElement.classList.contains("is-dark-theme")
+        ? loaderDarkThemeSecondaryColor
+        : loaderLightThemeSecondaryColor;
+    },
   },
 
   data() {