@appscode/design-system 1.0.43-alpha.22 → 1.0.43-alpha.221

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>

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

@@ -0,0 +1,209 @@
+<template>
+  <content-table
+    :table-title="title"
+    :searchable="isSearchable"
+    :hide-header="hideHeader"
+  >
+    <template #content-controls>
+      <header-item v-if="showHideBtn">
+        <ac-button
+          modifier-classes="is-square is-primary"
+          :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(activeFile)"
+          v-clipboard:success="onCopy"
+          v-clipboard:error="onError"
+        />
+      </header-item>
+      <header-item v-if="showDownloadBtn">
+        <download-btn
+          :file-data="decode(activeFile)"
+          :file-name="activeFile.name"
+        />
+      </header-item>
+      <header-item v-if="showUpdateBtn && !isEditorReadOnly">
+        <ac-button
+          modifier-classes="is-square is-primary"
+          icon-class="floppy-o"
+          :class="{ 'is-loading': isUpdateActive }"
+          @click.prevent="$emit('updateData', activeKey, activeFile)"
+        />
+      </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 "
+          :item-name="activeFile.name"
+          :open="showDeleteDataModal"
+          :is-delete-active="deleteModalStatus === 'loading'"
+          @delete-confirmation-modal$confirm="confirmDelete"
+          @closemodal="showDeleteDataModal = false"
+        />
+      </header-item>
+      <slot name="content-action" />
+    </template>
+    <template #content="{ searchText }">
+      <filtered-file-editor
+        :search-text="searchText"
+        :toggle-hide-value="toggleHideValue"
+        :is-preview-loading="isPreviewLoading"
+        :is-editor-read-only="isEditorReadOnly"
+        :preview-yamls="previewYamls"
+        :show-minimap="showMinimap"
+        :editor-height="editorHeight"
+        :loader-color="loaderColor"
+        :theme="theme"
+        :key="theme"
+        @setActiveKey="setActiveKey"
+      />
+    </template>
+  </content-table>
+</template>
+<script>
+export default {
+  components: {
+    AcButton: () => import("./../button/Button.vue"),
+    Editor: () => import("./../editor/Editor.vue"),
+    ContentTable: () => import("./../content/ContentTable.vue"),
+    HeaderItem: () => import("./../header/HeaderItem.vue"),
+    DownloadBtn: () => import("./../button/DownloadBtn.vue"),
+    DeleteConfirmationModal: () =>
+      import("./../modals/DeleteConfirmationModal.vue"),
+    FilteredFileEditor: () => import("./FilteredFileEditor.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 {};
+      }
+    },
+    showMinimap: {
+      type: Boolean,
+      default: false
+    },
+    isUpdateActive: {
+      type: Boolean,
+      default: false
+    },
+    deleteModalStatus: {
+      type: String,
+      default: "closed"
+    },
+    editorHeight: {
+      type: Number,
+      default: 60
+    },
+    hideHeader: {
+      type: Boolean,
+      default: false
+    },
+    loaderColor: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    theme: {
+      type: String,
+      default: "light"
+    }
+  },
+  data() {
+    return {
+      activeKey: 0,
+      toggleHideValue: "",
+      showDeleteDataModal: false
+    };
+  },
+  computed: {
+    activeFile() {
+      const activeFile = this.previewYamls.find(
+        element => element.uid === this.activeKey
+      );
+      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: {
+    onCopy() {
+      this.$toasted.global.success("Value copied successfully").goAway(1000);
+    },
+    onError() {
+      this.$toasted.global.error("Copying failed").goAway(1000);
+    },
+    decode(str) {
+      if (str) return str.content;
+      else return "";
+    },
+    encode(str) {
+      if (str) 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: {
+    deleteModalStatus(n) {
+      if (n === "closed") this.showDeleteDataModal = false;
+    }
+  }
+};
+</script>

package/vue-components/v2/form-fields/Input.vue

@@ -1,5 +1,5 @@
 <template>
-  <input class="ac-input" v-on="inputListeners" />
+  <input data-testid="ac-input" class="ac-input" v-on="inputListeners" />
 </template>
 
 <script>

package/vue-components/v2/loaders/ResourceLoader.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <content-loader
+      :width="100"
+      :height="40"
+      :speed="2"
+      :primaryColor="primaryLoaderColor"
+      :secondaryColor="secondaryLoaderColor"
+    >
+      <rect x="1" y="1" rx="1" ry="1" width="14" height="1" />
+      <rect x="17" y="1" rx="1" ry="1" width="13" height="1" />
+      <rect x="32" y="1" rx="1" ry="1" width="8" height="1" />
+
+      <rect x="7" y="3" rx="1" ry="1" width="14" height="1" />
+      <rect x="23" y="3" rx="1" ry="1" width="13" height="1" />
+      <rect x="38" y="3" rx="1" ry="1" width="8" height="1" />
+
+      <rect x="13" y="5" rx="1" ry="1" width="8" height="1" />
+      <rect x="23" y="5" rx="1" ry="1" width="15" height="1" />
+      <rect x="40" y="5" rx="1" ry="1" width="4" height="1" />
+
+      <rect x="13" y="7" rx="1" ry="1" width="10" height="1" />
+      <rect x="25" y="7" rx="1" ry="1" width="20" height="1" />
+
+      <rect x="7" y="10" rx="1" ry="1" width="14" height="1" />
+      <rect x="23" y="10" rx="1" ry="1" width="13" height="1" />
+      <rect x="38" y="10" rx="1" ry="1" width="8" height="1" />
+
+      <rect x="13" y="12" rx="1" ry="1" width="8" height="1" />
+      <rect x="23" y="12" rx="1" ry="1" width="15" height="1" />
+      <rect x="40" y="12" rx="1" ry="1" width="4" height="1" />
+
+      <rect x="13" y="14" rx="1" ry="1" width="10" height="1" />
+      <rect x="25" y="14" rx="1" ry="1" width="20" height="1" />
+
+      <rect x="7" y="17" rx="1" ry="1" width="14" height="1" />
+      <rect x="23" y="17" rx="1" ry="1" width="13" height="1" />
+      <rect x="38" y="17" rx="1" ry="1" width="8" height="1" />
+
+      <rect x="13" y="19" rx="1" ry="1" width="8" height="1" />
+      <rect x="23" y="19" rx="1" ry="1" width="15" height="1" />
+      <rect x="40" y="19" rx="1" ry="1" width="4" height="1" />
+
+      <rect x="7" y="22" rx="1" ry="1" width="14" height="1" />
+      <rect x="23" y="22" rx="1" ry="1" width="13" height="1" />
+      <rect x="38" y="22" rx="1" ry="1" width="8" height="1" />
+
+      <rect x="13" y="24" rx="1" ry="1" width="8" height="1" />
+      <rect x="23" y="24" rx="1" ry="1" width="15" height="1" />
+      <rect x="40" y="24" rx="1" ry="1" width="4" height="1" />
+
+      <rect x="1" y="26" rx="1" ry="1" width="14" height="1" />
+      <rect x="17" y="26" rx="1" ry="1" width="13" height="1" />
+      <rect x="32" y="26" rx="1" ry="1" width="8" height="1" />
+
+      <rect x="7" y="29" rx="1" ry="1" width="14" height="1" />
+      <rect x="23" y="29" rx="1" ry="1" width="13" height="1" />
+      <rect x="38" y="29" rx="1" ry="1" width="8" height="1" />
+
+      <rect x="13" y="31" rx="1" ry="1" width="8" height="1" />
+      <rect x="23" y="31" rx="1" ry="1" width="15" height="1" />
+      <rect x="40" y="31" rx="1" ry="1" width="4" height="1" />
+
+      <rect x="7" y="33" rx="1" ry="1" width="14" height="1" />
+      <rect x="23" y="33" rx="1" ry="1" width="13" height="1" />
+      <rect x="38" y="33" rx="1" ry="1" width="8" height="1" />
+
+      <rect x="13" y="35" rx="1" ry="1" width="8" height="1" />
+      <rect x="23" y="35" rx="1" ry="1" width="15" height="1" />
+      <rect x="40" y="35" rx="1" ry="1" width="4" height="1" />
+
+      <rect x="13" y="37" rx="1" ry="1" width="8" height="1" />
+      <rect x="23" y="37" rx="1" ry="1" width="15" height="1" />
+      <rect x="40" y="37" rx="1" ry="1" width="4" height="1" />
+
+      <rect x="1" y="39" rx="1" ry="1" width="14" height="1" />
+      <rect x="17" y="39" rx="1" ry="1" width="13" height="1" />
+      <rect x="32" y="39" rx="1" ry="1" width="8" height="1" />
+    </content-loader>
+  </div>
+</template>
+
+<script>
+import { ContentLoader } from "vue-content-loader";
+
+export default {
+  components: {
+    ContentLoader
+  },
+  props: {
+    primaryLoaderColor: {
+      type: String,
+      default: "#f5f7f9"
+    },
+    secondaryLoaderColor: {
+      type: String,
+      default: "#ecebeb"
+    }
+  }
+};
+</script>

package/vue-components/v2/loaders/SidebarLoader.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <content-loader
+      :width="100"
+      :height="175"
+      :speed="2"
+      :primaryColor="primaryLoaderColor"
+      :secondaryColor="secondaryLoaderColor"
+    >
+      <rect x="2" y="1" rx="3" ry="3" width="96" height="20" />
+      <rect x="15" y="23" rx="3" ry="3" width="83" height="15" />
+      <rect x="15" y="40" rx="3" ry="3" width="83" height="15" />
+      <rect x="15" y="57" rx="3" ry="3" width="83" height="15" />
+
+      <rect x="2" y="78" rx="3" ry="3" width="96" height="20" />
+      <rect x="15" y="100" rx="3" ry="3" width="83" height="15" />
+      <rect x="15" y="117" rx="3" ry="3" width="83" height="15" />
+      <rect x="15" y="134" rx="3" ry="3" width="83" height="15" />
+
+      <rect x="2" y="155" rx="3" ry="3" width="96" height="20" />
+    </content-loader>
+  </div>
+</template>
+
+<script>
+import { ContentLoader } from "vue-content-loader";
+
+export default {
+  components: {
+    ContentLoader
+  },
+  props: {
+    primaryLoaderColor: {
+      type: String,
+      default: "#f5f7f9"
+    },
+    secondaryLoaderColor: {
+      type: String,
+      default: "#ecebeb"
+    }
+  }
+};
+</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,7 +17,11 @@
             <header-item>
               <ac-button
                 modifier-classes="is-square is-transparent"
-                :icon-image="require('@/assets/images/icons/close-icon.svg')"
+                :disabled="isCloseOptionDisabled"
+                :icon-image="
+                  require('@appscode/design-system-images/icons/close-icon.svg')
+                "
+                data-testid="delete-confirmation-modal-close-icon"
                 @click.stop="destroyModal"
               />
             </header-item>
@@ -26,7 +30,10 @@
         <!-- modal header end -->
 
         <!-- modal body start  -->
-        <div class="ac-modal-body">
+        <div
+          class="ac-modal-body ac-vscrollbar"
+          data-testid="ac-modal-content-with-scroll"
+        >
           <div class="ac-modal-content">
             <!-- freedom content start  -->
             <slot />
@@ -36,7 +43,17 @@
         <!-- modal body end  -->
 
         <!-- modal footer start -->
-        <div class="ac-modal-footer action-footer">
+        <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>
           <buttons class="has-text-right is-block">
             <slot name="modal-footer-controls" />
           </buttons>
@@ -62,6 +79,18 @@ export default {
       type: String,
       default: "",
     },
+    isCloseOptionDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    ignoreOutsideClick: {
+      type: Boolean,
+      default: false,
+    },
+    hideActionFooter: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   components: {
@@ -97,11 +126,16 @@ 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);
 

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"),
   },