@appscode/design-system 2.2.41 → 2.2.43

package/package.json

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

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

@@ -9,6 +9,8 @@ import HeroiconsTrash from "~icons/heroicons/trash";
 import HeroiconsChevronDownSolid from "~icons/heroicons/chevron-down-solid";
 import HeroiconsChevronUpSolid from "~icons/heroicons/chevron-up-solid";
 
+const JsonModal = defineAsyncComponent(() => import("../modals/JsonShowModal.vue"));
+
 interface Props {
   disabled?: boolean;
   isCreateDisabled?: boolean;
@@ -49,6 +51,8 @@ const editFieldIndex = ref(-1);
 const isFormHidden = ref(true);
 const isSavingNewElement = ref(false);
 const dataForTable = defineModel<Array<AcTableRow>>({ required: true });
+const isOpen = ref(false);
+const fullNamespaceList = ref<string[]>([]);
 
 function onAddClick() {
   isSavingNewElement.value = true;
@@ -85,12 +89,33 @@ function onDetailsClick(row: number) {
   editFieldIndex.value = -1;
 }
 
-function readableTime(utcTime: string) {
-  return new Date(utcTime).toLocaleString();
+function readableTime(utcTime: unknown) {
+  if (typeof utcTime === "string") return new Date(utcTime).toLocaleString();
+  else return utcTime;
+}
+function truncatedNamespaces(namespaces: string[]): string {
+  if (namespaces.length <= 1) {
+    return namespaces[0];
+  }
+  return namespaces.slice(0, 1).join(", ") + ` (+${namespaces.length - 1})`;
+}
+
+function showFullNamespaceList(namespaces: string[]): void {
+  isOpen.value = true;
+
+  fullNamespaceList.value = namespaces;
 }
 </script>
 
 <template>
+  <json-modal
+    v-if="isOpen"
+    :open="isOpen"
+    :title="'Namespace List'"
+    :editor-content="fullNamespaceList"
+    @closemodal="isOpen = false"
+  ></json-modal>
+
   <div :class="{ 'ac-nested-elements': label }">
     <!-- Add New Form Start -->
     <template v-if="isSavingNewElement">
@@ -181,12 +206,23 @@ function readableTime(utcTime: string) {
             <tbody>
               <template v-for="(itemRow, idxRow) in dataForTable" :key="idxRow">
                 <tr data-testid="ac-table-row">
-                  <td
-                    v-for="(itemColumn, idx) in itemRow.cells"
-                    :key="itemColumn.data as string || 'namespace'   + idx"
-                  >
+                  <td v-for="(itemColumn, idx) in itemRow.cells" :key="tableHeaders[idx].name + idx">
                     <template v-if="tableHeaders[idx].type === 'date'">
-                      {{ readableTime(itemColumn.data as string) }}
+                      {{ readableTime(itemColumn.data) }}
+                    </template>
+                    <template
+                      v-else-if="tableHeaders[idx].name.toLowerCase() === 'namespace' && Array.isArray(itemColumn.data)"
+                    >
+                      <span
+                        >{{ truncatedNamespaces(itemColumn.data) }}
+                        <div
+                          v-if="itemColumn.data.length > 1"
+                          class="tag is-secondary is-light"
+                          @click="showFullNamespaceList(itemColumn.data)"
+                        >
+                          <a>More </a>
+                        </div></span
+                      >
                     </template>
                     <template v-else>
                       {{ itemColumn.data }}

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

@@ -15,7 +15,7 @@ interface Props {
 withDefaults(defineProps<Props>(), {
   title: "Delete Modal",
   message: "Do you want to delete",
-  itemName: "item",
+  itemName: "",
   modifierClasses: "is-normal",
   isDeleteActive: false,
   disableModalClose: false,