@appscode/design-system 1.0.43-alpha.197 → 1.0.43-alpha.199

package/package.json

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

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

@@ -15,13 +15,14 @@
       :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,15 +32,16 @@
       :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>
@@ -52,59 +54,60 @@ export default defineComponent({
   props: {
     modelValue: {
       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",
+    },
   },
 
   emits: ["update:modelValue"],
 
   components: {
     EditorTabs: defineAsyncComponent(() =>
-      import("../tabs/EditorTabs.vue").then(module => module.default)
+      import("../tabs/EditorTabs.vue").then((module) => module.default)
     ),
     MonacoEditor: defineAsyncComponent({
-      loader: () => import("./MonacoEditor.vue").then(module => module.default),
+      loader: () =>
+        import("./MonacoEditor.vue").then((module) => module.default),
 
       loadingComponent: Preloader,
       delay: 200,
       errorComponent: Banner,
-      timeout: 100000
-    })
+      timeout: 100000,
+    }),
   },
 
   data() {
     return {
       activeTab: "edit",
       editorContent: "",
-      originalEditorContent: ""
+      originalEditorContent: "",
     };
   },
 
@@ -120,7 +123,7 @@ export default defineComponent({
           ? "vs-dark"
           : "vs")
       );
-    }
+    },
   },
 
   watch: {
@@ -130,7 +133,7 @@ export default defineComponent({
         if (this.editorContent !== n) {
           this.editorContent = n;
         }
-      }
+      },
     },
     originalValue: {
       immediate: true,
@@ -138,8 +141,8 @@ export default defineComponent({
         if (this.originalEditorContent !== n) {
           this.originalEditorContent = n;
         }
-      }
-    }
+      },
+    },
   },
 
   methods: {
@@ -151,7 +154,7 @@ export default defineComponent({
       editor.onDidBlurEditorText(() => {
         this.$emit("update:modelValue", this.editorContent);
       });
-    }
-  }
+    },
+  },
 });
 </script>

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

@@ -2,19 +2,18 @@
   <div class="ac-preview is-active is-not-fixed">
     <div class="ac-preview-inner">
       <!-- preview body start  -->
-      <div 
+      <div
         class="ac-preview-body mt-0 pt-20"
-        :class="{ 'is-justify-content-center': isYamlsEmpty && !isPreviewLoading }"
+        :class="{
+          'is-justify-content-center': isYamlsEmpty && !isPreviewLoading,
+        }"
       >
         <strong v-if="isYamlsEmpty && !isPreviewLoading">
           No Data Available
           <i class="pl-5 fa fa-exclamation-circle" aria-hidden="true"></i>
         </strong>
         <template v-else>
-          <div
-            v-if="!isPreviewLoading && previewYamls"
-            class="left-content"
-          >
+          <div v-if="!isPreviewLoading && previewYamls" class="left-content">
             <div class="ac-files ac-hscrollbar pt-0">
               <ul v-if="!isPreviewLoading">
                 <li
@@ -22,6 +21,7 @@
                   :key="previewYaml.name + idx"
                   :class="{ 'is-active': activeKey === previewYaml.uid }"
                   :title="previewYaml.name"
+                  data-testid="filtered-file-editor-file-name"
                 >
                   <a @click.prevent="setActivePreview(previewYaml.uid)">
                     <span>
@@ -37,9 +37,12 @@
               <sidebar-loader v-else />
             </div>
           </div>
-          <div class="right-content">
+          <div class="right-content" data-testid="filtered-file-editor-content">
+            >
             <resource-loader v-if="isPreviewLoading" />
-            <strong v-else-if="isYamlsNotSelected">Selecet a data from sidebar</strong>
+            <strong v-else-if="isYamlsNotSelected"
+              >Selecet a data from sidebar</strong
+            >
             <strong v-else-if="hideValue"> *************** </strong>
             <editor
               v-else
@@ -64,93 +67,93 @@ export default defineComponent({
   components: {
     Editor: defineAsyncComponent({
       loader: () =>
-        import("../editor/Editor.vue").then(module => module.default),
+        import("../editor/Editor.vue").then((module) => module.default),
       loadingComponent: Preloader,
       delay: 200,
       errorComponent: Banner,
-      timeout: 100000
+      timeout: 100000,
     }),
     ResourceLoader: defineAsyncComponent(() =>
       import("../loaders/ResourceLoader.vue")
     ),
     SidebarLoader: defineAsyncComponent(() =>
       import("../loaders/SidebarLoader.vue")
-    )
+    ),
   },
   props: {
     searchText: {
       type: String,
-      default: ""
+      default: "",
     },
     toggleHideValue: {
       type: Boolean,
-      default: true
+      default: true,
     },
     isPreviewLoading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isEditorReadOnly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     previewYamls: {
       type: Array,
       default: () => {
         [];
-      }
+      },
     },
     showMinimap: {
       type: Boolean,
-      default: false
+      default: false,
     },
     editorHeight: {
       type: Number,
-      default: 60
-    }
+      default: 60,
+    },
   },
   emits: ["setActiveKey"],
   data() {
     return {
       activeKey: "",
-      hideValue: ""
+      hideValue: "",
     };
   },
   computed: {
     activeFile() {
       const activeFile = this.filteredYamls.find(
-        element => element.uid === this.activeKey
+        (element) => element.uid === this.activeKey
       );
       return activeFile || { content: "", format: "yaml" };
     },
     originalValue() {
       const activeFile = this.filteredYamls.find(
-        element => element.uid === this.activeKey
+        (element) => element.uid === this.activeKey
       );
       return (activeFile && activeFile.initContent) || "";
     },
     filteredYamls() {
       if (this.searchText) {
         return this.previewYamls.filter(
-          element => JSON.stringify(element).search(this.searchText) > -1
+          (element) => JSON.stringify(element).search(this.searchText) > -1
         );
       } else return this.previewYamls;
     },
     isKeyAvailable() {
-      const val = this.previewYamls.find(element => {
+      const val = this.previewYamls.find((element) => {
         return element.uid === this.activeKey;
       });
       return val === undefined ? false : true;
     },
-    isYamlsEmpty(){
-      return this.filteredYamls.length === 0; 
+    isYamlsEmpty() {
+      return this.filteredYamls.length === 0;
     },
-    isYamlsNotSelected(){
-      const val = this.filteredYamls.find(element => {
+    isYamlsNotSelected() {
+      const val = this.filteredYamls.find((element) => {
         return element.uid === this.activeKey;
-      })
+      });
       return val === undefined;
-    }
+    },
   },
   methods: {
     initActivePreview() {
@@ -164,7 +167,7 @@ export default defineComponent({
       this.activeKey = uid;
       this.hideValue = this.activeFile.isSecret;
       this.$emit("setActiveKey", this.activeKey);
-    }
+    },
   },
   watch: {
     previewYamls: {
@@ -174,11 +177,11 @@ export default defineComponent({
         if (n.length) {
           this.initActivePreview();
         }
-      }
+      },
     },
     toggleHideValue(n) {
       this.hideValue = n;
-    }
-  }
+    },
+  },
 });
 </script>

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

@@ -1,6 +1,7 @@
 <template>
   <input
     class="ac-input"
+    data-testid="ac-input"
     :value="modelValue"
     @input="$emit('update:modelValue', $event.target.value)"
   />

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

@@ -28,7 +28,10 @@
         <!-- modal header end -->
 
         <!-- modal body start  -->
-        <div class="ac-modal-body ac-vscrollbar">
+        <div
+          class="ac-modal-body ac-vscrollbar"
+          data-testid="ac-modal-content-with-scroll"
+        >
           <div class="ac-modal-content">
             <!-- freedom content start  -->
             <slot />
@@ -38,8 +41,13 @@
         <!-- modal body end  -->
 
         <!-- modal footer start -->
-        <div v-if="!hideActionFooter"
-          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" />
@@ -61,44 +69,44 @@ export default defineComponent({
   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
+      default: false,
     },
     ignoreOutsideClick: {
       type: Boolean,
-      default: false
+      default: false,
     },
     hideActionFooter: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   emits: ["closemodal"],
 
   components: {
     HeaderItems: defineAsyncComponent(() =>
-      import("../../v2/header/HeaderItems.vue").then(module => module.default)
+      import("../../v2/header/HeaderItems.vue").then((module) => module.default)
     ),
     HeaderItem: defineAsyncComponent(() =>
-      import("../../v2/header/HeaderItem.vue").then(module => module.default)
+      import("../../v2/header/HeaderItem.vue").then((module) => module.default)
     ),
     Buttons: defineAsyncComponent(() =>
-      import("../../v2/button/Buttons.vue").then(module => module.default)
+      import("../../v2/button/Buttons.vue").then((module) => module.default)
     ),
     AcButton: defineAsyncComponent(() =>
-      import("../button/Button.vue").then(module => module.default)
-    )
+      import("../button/Button.vue").then((module) => module.default)
+    ),
   },
 
   data() {
@@ -106,7 +114,7 @@ export default defineComponent({
       showModal: false,
       crossIcon: import.meta.globEager(
         "/src/assets/icons/modal/close-icon.svg"
-      )["/src/assets/icons/modal/close-icon.svg"].default
+      )["/src/assets/icons/modal/close-icon.svg"].default,
     };
   },
 
@@ -119,8 +127,8 @@ export default defineComponent({
         } else {
           this.destroyModal();
         }
-      }
-    }
+      },
+    },
   },
 
   methods: {
@@ -144,7 +152,7 @@ export default defineComponent({
       document.removeEventListener("keydown", this.onKeyDown);
 
       this.$emit("closemodal", true);
-    }
-  }
+    },
+  },
 });
 </script>

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

@@ -20,12 +20,14 @@
         @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"
         @click.stop="confirm(true)"
+        data-testid="delete-confirmation-modal-confirm-button"
       />
     </template>
   </modal>

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

@@ -26,6 +26,7 @@
             <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
             >
@@ -34,10 +35,16 @@
         </div>
         <transition-group name="list" tag="ul">
           <li key="settings">
-            <a :href="`${serverDomain}/user/settings/`">Settings</a>
+            <a
+              data-testid="user-settings-link"
+              :href="`${serverDomain}/user/settings/`"
+              >Settings</a
+            >
           </li>
           <li v-if="user.is_admin" key="site-admin">
-            <a :href="`${accountsDomain}/admin`">Site Administration</a>
+            <a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"
+              >Site Administration</a
+            >
           </li>
           <li
             v-if="showAccountSwitcher"

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

@@ -9,11 +9,7 @@
         "
       >
         <label>Rows per page</label>
-        <select
-          v-model="selectedItemCountPerPage"
-          name="page"
-          data-testid="rows-per-page-selector"
-        >
+        <select v-model="selectedItemCountPerPage" name="page">
           <option :value="5">5</option>
           <option :value="10" v-show="totalNoOfItems > 5">10</option>
           <option :value="15" v-show="totalNoOfItems > 10">15</option>
@@ -35,28 +31,19 @@
 
       <ul v-if="totalNoOfItems > selectedItemCountPerPage">
         <li>
-          <a
-            class="previous"
-            @click.prevent="prevPage()"
-            data-testid="pagination-previous-page-button"
-          >
+          <a class="previous" @click.prevent="prevPage()">
             <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()"
-            data-testid="pagination-next-page-button"
-          >
+          <a class="next" @click.prevent="nextPage()">
             <i class="fa fa-angle-right" aria-hidden="true"></i>
           </a>
         </li>

package/vue-components/v3/tab/TabItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <li :class="{ 'is-active': isActive }">
+  <li :class="{ 'is-active': isActive }" data-testid="tab-item">
     <slot />
   </li>
 </template>

package/vue-components/v3/table/TableRow.vue

@@ -6,7 +6,12 @@
     custom
     v-slot="{ navigate }"
   >
-    <tr class="is-link" @click="navigate" v-bind="$attrs">
+    <tr
+      class="is-link"
+      @click="navigate"
+      v-bind="$attrs"
+      data-testid="ac-table-row"
+    >
       <slot />
       <fake-table-cell
         v-if="fakeCellWidth > 0"
@@ -21,6 +26,7 @@
       'is-hoverless': !isSelected,
       'is-disabled': isDisabled,
     }"
+    data-testid="ac-table-row"
     @click.prevent="$emit('rowselect', true)"
   >
     <slot />

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

@@ -14,15 +14,17 @@
       :obj="value"
       :cell-title="cellTitle"
       :max-character-length="maxCharacterLength"
+      data-testid="object-cell-value"
     />
     <array-cell
       v-else-if="valueType === 'array'"
       :items="value"
       :cell-title="cellTitle"
       :max-character-length="maxCharacterLength"
+      data-testid="array-cell-value"
     />
     <template v-else>
-      <span class="is-ellipsis-1" :title="tooltip">{{
+      <span class="is-ellipsis-1" :title="tooltip" data-testid="cell-value">{{
         value || (value === 0 ? 0 : "-")
       }}</span>
     </template>