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

package/vue-components/v2/breadcrumbs/Breadcrumb.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="ac-breadcrumb">
+    <nav aria-label="breadcrumbs" class="breadcrumb">
+      <ul>
+        <li
+          v-for="(item, idx) in list"
+          :key="idx"
+          :class="{ 'is-active': idx === list.length - 1 }"
+        >
+          <router-link
+            class="router-link-active"
+            :class="{ 'is-active': idx === list.length - 1 }"
+            :to="item.path"
+            >{{ item.name }}
+          </router-link>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      list: []
+    };
+  },
+  methods: {
+    createBreadcrumbs(n) {
+      //Adding dynamic path to the route
+      const listPaths = this.$route.matched.map(element =>
+        this.pathReplaceWithParam(element.path)
+      );
+
+      //Removing the last duplicate value from the listpaths array
+      listPaths.pop();
+
+      //Createing the breadcrumb name
+      const listName = this.createList(listPaths);
+
+      //Set the new breadcrumb name and path value to list
+      this.list = listName.map((element, index) => {
+        return {
+          name: element,
+          path: listPaths[index]
+        };
+      });
+    },
+    pathReplaceWithParam(path) {
+      //Split the path and remove the first and last empty block
+      let splitPath = path.split("/").filter(element => element !== "");
+
+      //Replace all element with query params where the element start with ":"
+      // Then again add them wthi "/" and return the path value
+      return splitPath.reduce((pval, cval) => {
+        if (cval[0] === ":") {
+          const cutIndex =
+            cval.indexOf("?") !== -1 ? cval.indexOf("?") : cval.length;
+          return (pval += this.$route.params[cval.slice(1, cutIndex)] + "/");
+        } else return (pval += cval + "/");
+      }, "/");
+    },
+    createList(paths) {
+      //Split all the path and remove all empty block
+      let spath = paths.map(element => {
+        return element.split("/").filter(word => word !== "");
+      });
+
+      // Convert all the path arry in one arry where each element is the  different fo previous element
+      return spath.reduce((prev, curr, currentIdx) => {
+        if (currentIdx === 0) return prev.concat([this.createVal(0, curr)]);
+        else
+          return prev.concat([
+            this.createVal(spath[currentIdx - 1].length, curr)
+          ]);
+      }, []);
+    },
+    createVal(startIdx, paths) {
+      return paths.reduce((prev, curr, idx) => {
+        if (idx >= startIdx) {
+          if (idx + 1 === paths.length) return (prev += curr);
+          else return (prev += curr + " / ");
+        } else return prev + "";
+      }, "");
+    }
+  },
+  watch: {
+    "$route.path": {
+      deep: true,
+      immediate: true,
+      handler(n) {
+        this.createBreadcrumbs(n);
+      }
+    }
+  }
+};
+</script>

package/vue-components/v2/button/Button.vue

@@ -4,6 +4,7 @@
     :class="`${modifierClasses}${isLoaderActive ? ' is-loading' : ''}`"
     :disabled="disabled"
     @click="handleClick"
+    :title="tooltip"
   >
     <span v-if="iconClass || iconImage" class="icon is-small">
       <img
@@ -27,6 +28,10 @@ export default {
       type: String,
       default: "",
     },
+    tooltip: {
+      type: String,
+      defualt: undefined
+    },
     // for loader
     isLoaderActive: {
       type: Boolean,

package/vue-components/v2/button/DownloadBtn.vue

@@ -0,0 +1,45 @@
+<template>
+  <ac-button
+    modifier-classes="is-primary is-square"
+    icon-class="download"
+    :is-loader-active="isFetching"
+    @click="download()"
+  />
+</template>
+
+<script>
+import downloadFunc from "downloadjs";
+
+export default {
+  components: {
+    AcButton: () => import("./../button/Button.vue")
+  },
+  props: {
+    fileData: {
+      type: String,
+      default: ""
+    },
+    fileName: {
+      type: String,
+      default: ""
+    },
+    isFetching: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      downloadIcon: "fa fa-cloud-download"
+    };
+  },
+  component: {
+    downloadFunc
+  },
+  methods: {
+    download() {
+      downloadFunc(this.fileData, this.fileName);
+    }
+  }
+};
+</script>

package/vue-components/v2/card/Card.vue

@@ -3,6 +3,7 @@
     class="ac-single-card has-text-centered style-three"
     :class="{ 'is-selected': isSelected }"
     @click="$emit('click', $event)"
+    data-testid="card-list-item"
   >
     <div class="ac-card-logo" v-if="hasLogo">
       <slot name="card-logo" />

package/vue-components/v2/content/ContentTable.vue

@@ -2,6 +2,7 @@
   <content-layout>
     <template #content-header>
       <content-header
+        v-if="!hideHeader"
         :header-title="tableTitle"
         :header-sub-title="tableSubTitle"
         :class="{ 'pl-0 pr-0': removeTableHeaderPadding }"
@@ -21,32 +22,36 @@ export default {
   props: {
     removeTableHeaderPadding: {
       type: Boolean,
-      default: false,
+      default: false
     },
     tableTitle: {
       type: String,
-      default: "Table",
+      default: "Table"
     },
     tableSubTitle: {
       type: String,
-      default: "",
+      default: ""
     },
     searchable: {
       type: Boolean,
-      default: true,
+      default: true
     },
+    hideHeader: {
+      type: Boolean,
+      default: false
+    }
   },
   components: {
     ContentLayout: () => import("./ContentLayout.vue"),
     ContentHeader: () => import("./ContentHeader.vue"),
     HeaderItem: () => import("../header/HeaderItem.vue"),
-    SearchBar: () => import("../searchbars/SearchBar.vue"),
+    SearchBar: () => import("../searchbars/SearchBar.vue")
   },
 
   data() {
     return {
-      searchText: "",
+      searchText: ""
     };
-  },
+  }
 };
 </script>

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

@@ -7,21 +7,22 @@
     />
     <monaco-editor
       v-if="activeTab === 'edit'"
-      ref="monacoEditor"
       @editorDidMount="onEditorMount"
       key="edit"
       :class="`vh-${editorHeight} is-clipped`"
-      v-model="editorContent"
+      :value="editorContent"
+      @change="onChange"
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap
+          enabled: calcShowMinimap,
         },
         theme: theme,
         readOnly: readOnly,
         wordWrap: wordWrap,
-        scrollBeyondLastLine: false
+        scrollBeyondLastLine: false,
       }"
+      data-testid="monaco-editor-edit-section"
     />
     <monaco-editor
       v-if="activeTab === 'preview'"
@@ -31,65 +32,75 @@
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap
+          enabled: calcShowMinimap,
         },
         theme: theme,
         readOnly: true,
         wordWrap: wordWrap,
-        scrollBeyondLastLine: false
+        scrollBeyondLastLine: false,
       }"
       :original="originalEditorContent"
       :diff-editor="true"
+      data-testid="monaco-editor-preview-section"
     />
   </div>
 </template>
 
 <script>
+import Preloader from "../preloader/Preloader.vue";
+import Banner from "../banner/Banner.vue";
 export default {
   props: {
     value: {
       type: String,
-      default: ""
+      default: "",
     },
     originalValue: {
       type: String,
-      default: ""
+      default: "",
     },
     readOnly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     language: {
       type: String,
-      default: "yaml"
+      default: "yaml",
     },
     showMinimap: {
       type: Boolean,
-      default: true
+      default: true,
     },
     editorHeight: {
       type: Number,
-      default: 40
+      default: 40,
     },
     editorTheme: {
       type: String,
-      default: ""
+      default: "",
     },
     wordWrap: {
       type: String,
-      default: "off"
+      default: "off",
     },
   },
+
   components: {
     EditorTabs: () => import("../tabs/EditorTabs.vue"),
-    MonacoEditor: () => import("vue-monaco")
+    MonacoEditor: () => ({
+      component: import("./MonacoEditor.vue"),
+      loading: Preloader,
+      delay: 200,
+      error: Banner,
+      timeout: 100000,
+    }),
   },
 
   data() {
     return {
       activeTab: "edit",
       editorContent: "",
-      originalEditorContent: ""
+      originalEditorContent: "",
     };
   },
 
@@ -105,7 +116,7 @@ export default {
           ? "vs-dark"
           : "vs")
       );
-    }
+    },
   },
 
   watch: {
@@ -115,7 +126,7 @@ export default {
         if (this.editorContent !== n) {
           this.editorContent = n;
         }
-      }
+      },
     },
     originalValue: {
       immediate: true,
@@ -123,18 +134,20 @@ export default {
         if (this.originalEditorContent !== n) {
           this.originalEditorContent = n;
         }
-      }
-    }
+      },
+    },
   },
 
   methods: {
-    onEditorMount() {
-      const editor = this.$refs.monacoEditor.getEditor();
+    onChange(e) {
+      if (typeof e === "string") this.editorContent = e;
+    },
+    onEditorMount(editor) {
       // add event listeners
       editor.onDidBlurEditorText(() => {
         this.$emit("input", this.editorContent);
       });
-    }
-  }
+    },
+  },
 };
 </script>

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

@@ -0,0 +1,189 @@
+<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 ac-hscrollbar pt-0">
+            <ul v-if="!isPreviewLoading">
+              <li
+                v-for="(previewYaml, idx) in filteredYamls"
+                :key="previewYaml.name + idx"
+                :class="{ 'is-active': activeKey === previewYaml.uid }"
+                data-testid="filtered-file-editor-file-name"
+              >
+                <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
+              :primaryLoaderColor="primaryLoaderColor"
+              :secondaryLoaderColor="secondaryLoaderColor"
+            />
+          </div>
+        </div>
+        <div class="right-content" data-testid="filtered-file-editor-content">
+          <div class="right-content">
+            <resource-loader
+              v-if="isPreviewLoading"
+              :primaryLoaderColor="primaryLoaderColor"
+              :secondaryLoaderColor="secondaryLoaderColor"
+            />
+            <editor
+              v-else-if="!isPreviewLoading && !hideValue"
+              v-model="activeFile.content"
+              :original-value="originalValue"
+              :language="activeFile.format"
+              :read-only="isEditorReadOnly"
+              :editor-height="editorHeight"
+              :show-minimap="showMinimap"
+              :editor-theme="editorTheme"
+              :key="editorTheme"
+            />
+            <span v-else> *************** </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Preloader from "../preloader/Preloader.vue";
+import Banner from "../banner/Banner.vue";
+export default {
+  components: {
+    Editor: () => ({
+      component: import("./Editor.vue"),
+      loading: Preloader,
+      delay: 200,
+      error: Banner,
+      timeout: 100000,
+    }),
+    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,
+    },
+    editorHeight: {
+      type: Number,
+      default: 60,
+    },
+    loaderColor: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    theme: {
+      type: String,
+      default: "light",
+    },
+  },
+  data() {
+    return {
+      activeKey: "",
+      hideValue: "",
+    };
+  },
+  computed: {
+    activeFile() {
+      const activeFile = this.filteredYamls.find(
+        (element) => element.uid === this.activeKey
+      );
+      return activeFile || { content: "", format: "yaml" };
+    },
+    originalValue() {
+      const activeFile = this.filteredYamls.find(
+        (element) => element.uid === this.activeKey
+      );
+      return (activeFile && activeFile.initContent) || "";
+    },
+    editorTheme() {
+      return this.theme === "dark" ? "vs-dark" : "vs";
+    },
+    primaryLoaderColor() {
+      return this.loaderColor.primaryLoaderColor;
+    },
+    secondaryLoaderColor() {
+      return this.loaderColor.secondaryLoaderColor;
+    },
+    filteredYamls() {
+      if (this.searchText) {
+        return this.previewYamls.filter(
+          (element) => JSON.stringify(element).search(this.searchText) > -1
+        );
+      } else return this.previewYamls;
+    },
+    isKeyAvailable() {
+      const val = this.previewYamls.find((element) => {
+        return element.uid === this.activeKey;
+      });
+      return val === undefined ? false : true;
+    },
+  },
+  methods: {
+    initActivePreview() {
+      if (!this.isKeyAvailable) {
+        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/MonacoEditor.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="monaco-editor-vue2" :style="style"></div>
+</template>
+
+<script>
+import * as monaco from "monaco-editor";
+
+export default {
+  name: "MonacoEditor",
+  props: {
+    diffEditor: { type: Boolean, default: false },
+    width: { type: [String, Number], default: "100%" },
+    height: { type: [String, Number], default: "100%" },
+    original: String,
+    value: String,
+    language: { type: String, default: "javascript" },
+    theme: { type: String, default: "vs" },
+    options: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  computed: {
+    style() {
+      const fixedWidth = this.width.toString().includes("%")
+        ? this.width
+        : `${this.width}px`;
+      const fixedHeight = this.height.toString().includes("%")
+        ? this.height
+        : `${this.height}px`;
+      return {
+        width: fixedWidth,
+        height: fixedHeight,
+        "text-align": "left",
+      };
+    },
+  },
+  mounted() {
+    this.initMonaco();
+  },
+  beforeDestroy() {
+    this.editor && this.editor.dispose();
+  },
+  methods: {
+    initMonaco() {
+      this.$emit("editorWillMount", this.monaco);
+      const { value, language, theme, options } = this;
+      this.editor = monaco.editor[
+        this.diffEditor ? "createDiffEditor" : "create"
+      ](this.$el, {
+        value: value,
+        language: language,
+        theme: theme,
+        ...options,
+      });
+      this.diffEditor && this._setModel(this.value, this.original);
+
+      // @event `change`
+      const editor = this._getEditor();
+      editor.onDidChangeModelContent((event) => {
+        const value = editor.getValue();
+        if (this.value !== value) {
+          this.$emit("change", value, event);
+        }
+      });
+
+      this.$emit("editorDidMount", this.editor);
+    },
+    _setModel(value, original) {
+      const { language } = this;
+      const originalModel = monaco.editor.createModel(original, language);
+      const modifiedModel = monaco.editor.createModel(value, language);
+      this.editor.setModel({
+        original: originalModel,
+        modified: modifiedModel,
+      });
+    },
+    _setValue(value) {
+      let editor = this._getEditor();
+      if (editor) return editor.setValue(value);
+    },
+    _getValue() {
+      let editor = this._getEditor();
+      if (!editor) return "";
+      return editor.getValue();
+    },
+    _getEditor() {
+      if (!this.editor) return null;
+      return this.diffEditor ? this.editor.getModifiedEditor() : this.editor;
+    },
+    _setOriginal() {
+      const { original } = this.editor.getModel();
+      original.setValue(this.original);
+    },
+  },
+  watch: {
+    options: {
+      deep: true,
+      handler(options) {
+        this.editor.updateOptions(options);
+      },
+    },
+    value() {
+      this.value !== this._getValue() && this._setValue(this.value);
+    },
+    original() {
+      this._setOriginal();
+    },
+    language() {
+      if (!this.editor) return;
+      if (this.diffEditor) {
+        const { original, modified } = this.editor.getModel();
+        monaco.editor.setModelLanguage(original, this.language);
+        monaco.editor.setModelLanguage(modified, this.language);
+      } else
+        monaco.editor.setModelLanguage(this.editor.getModel(), this.language);
+    },
+    theme() {
+      monaco.editor.setTheme(this.theme);
+    },
+  },
+};
+</script>