@appscode/design-system 1.1.0-alpha.2 → 1.1.0-alpha.4

package/package.json

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

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

@@ -5,6 +5,7 @@
         v-if="!hideHeader"
         :header-title="tableTitle"
         :header-sub-title="tableSubTitle"
+        :remove-border-bottom="removeBorderBottom"
         :class="{ 'pl-0 pr-0': removeTableHeaderPadding }"
       >
         <header-item>
@@ -22,36 +23,40 @@ 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
-    }
+      default: false,
+    },
+    removeBorderBottom: {
+      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/table/Table.vue

@@ -110,6 +110,11 @@
         </tbody>
       </template>
     </table>
+
+    <!-- table footer info start -->
+    <slot name="table-footer-info" />
+    <!-- table footer info end -->
+
     <!-- pagination start -->
     <slot name="table-pagination" />
     <!-- pagination end -->

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

@@ -5,6 +5,7 @@
         v-if="!hideHeader"
         :header-title="tableTitle"
         :header-sub-title="tableSubTitle"
+        :remove-border-bottom="removeBorderBottom"
         :class="{ 'pl-0 pr-0': removeTableHeaderPadding }"
       >
         <template #title-right-actions>
@@ -50,6 +51,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    removeBorderBottom: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: {
     ContentLayout: defineAsyncComponent(() =>

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

@@ -110,7 +110,6 @@ import {
   Ref,
   toRefs,
   watch,
-  watchEffect,
 } from "vue";
 import { defineAsyncComponent, ref } from "vue";
 import { Task, TaskLog } from "../../../typings/long-running-tasks.ts";
@@ -173,7 +172,7 @@ const activeStepId: Ref<string> = ref("");
 // to find active task faster
 const idToStepIndex: Ref<Record<string, number>> = ref({});
 const activeTask = computed(() => {
-  const task = tasks.value.find((task) => task.id === activeStepId.value);
+  const task = tasks.value[idToStepIndex.value[activeStepId.value]];
   return task;
 });
 
@@ -207,6 +206,7 @@ function handleTaskLog(log: TaskLog) {
       task.status = log.status;
       if (log.status === "Failed") {
         task.logs.push(log.error || "");
+        errorCtx.value?.onError(log.error);
       } else {
         task.logs.push(log.msg || "");
       }
@@ -252,12 +252,36 @@ onBeforeUnmount(() => {
   subscription && subscription.unsubscribe();
 });
 
+const longRunningTaskStatus = computed(() => {
+  let successTaskCount = 0;
+  let failedTaskCount = 0;
+
+  // get count of success and failed task
+  tasks.value.forEach((task) => {
+    if (task?.status === "Success") successTaskCount++;
+    else if (task?.status === "Failed") failedTaskCount++;
+  });
+
+  if (tasks.value.length === 0) return "NotStarted";
+  // if all the task has been successful
+  else if (successTaskCount === tasks.value.length) {
+    return "Success";
+  }
+  // if all the task has been completed and some tasks are failed
+  else if (
+    failedTaskCount &&
+    successTaskCount + failedTaskCount === tasks.value.length
+  ) {
+    return "Failed";
+  } else return "Pending";
+});
+
 // modal close / footer feature
 const enableModalClose = computed(() => {
   return (
     connectionError.value ||
-    activeTask.value?.status === "Failed" ||
-    activeTask.value?.status === "Success"
+    longRunningTaskStatus.value === "Failed" ||
+    longRunningTaskStatus.value === "Success"
   );
 });
 const enableModalFooter = computed(() => {
@@ -265,47 +289,50 @@ const enableModalFooter = computed(() => {
 });
 
 // generate report issue title with error step title
-const getReportIssueTitle = (): string => {
+const getReportIssueInfo = (): { title: string; body: string } => {
   const stepTitlesFromErrorTasks: Array<string> = [];
+  const stepLogsFromErrorTasks: Array<string> = [];
   tasks.value.forEach((task) => {
     // if this taskLog is error task, push it to array
     if (task.error) {
-      stepTitlesFromErrorTasks.push(task.step);
+      stepTitlesFromErrorTasks.push(task?.step);
+      stepLogsFromErrorTasks.push(task?.logs[task?.logs?.length - 1] || "");
     }
   });
-  // return final string
-  return stepTitlesFromErrorTasks.join(", ");
+  // return final object
+  return {
+    title: stepTitlesFromErrorTasks.join(", "),
+    body: stepLogsFromErrorTasks.join(", "),
+  };
 };
 
 // report button
-const showReportButton = computed(() => activeTask.value?.status === "Failed");
+const showReportButton = computed(
+  () => longRunningTaskStatus.value === "Failed"
+);
 function onReportIssueClick() {
-  const url = `https://github.com/bytebuilders/community/issues/new?title=Chart Install: ${getReportIssueTitle()}&labels[]=bug&body=${
-    window.location.href
-  } %0A%0A %60%60%60 %0A  ${
-    activeTask.value?.logs[activeTask.value?.logs.length - 1 || 0]
+  const url = `https://github.com/bytebuilders/community/issues/new?title=Chart Install: ${
+    getReportIssueInfo().title
+  }&labels[]=bug&body=${window.location.href} %0A%0A %60%60%60 %0A  ${
+    getReportIssueInfo().body
   } %0A %60%60%60`;
   window.open(url, "_blank");
 }
 
 // success button
 const showSuccessButton = computed(
-  () => activeTask.value?.status === "Success" && successCtx.value?.btnTitle
+  () =>
+    longRunningTaskStatus.value === "Success" && !!successCtx.value?.btnTitle
 );
 
 // execute on success and on error functions
-watch(
-  () => activeTask.value?.status,
-  (n) => {
-    if (n === "Success") {
-      successCtx.value.onSuccess();
-    } else if (n === "Failed") {
-      errorCtx.value.onError(
-        activeTask.value?.logs[activeTask.value?.logs.length - 1 || 0] || ""
-      );
-    }
+watch(longRunningTaskStatus, (n) => {
+  if (n === "Success") {
+    successCtx.value.onSuccess();
+  } else if (n === "Failed") {
+    errorCtx.value?.onError("Operation Failed");
   }
-);
+});
 </script>
 
 <style scoped lang="scss">

package/vue-components/v3/notification/AlertBox.vue

@@ -0,0 +1,61 @@
+<template>
+  <!-- alert-message area start  -->
+  <!-- plsease, use this class name ('.is-info' 'is-success', 'is-error', 'is-warning') -->
+  <div :class="`ac-notification is-${notificationType} mb-15`">
+    <p>
+      <i v-if="!hideIcon" :class="`fa ${iconClass} mr-5`"></i
+      ><span v-html="getSanitizedHtml(content)"></span>
+      <ac-button
+        v-if="actionButton?.show"
+        :title="actionButton?.title"
+        :icon-class="actionButton?.iconClass"
+        data-testid="notification-action-button"
+        @click.prevent="actionButton?.action()"
+      >
+      </ac-button>
+    </p>
+  </div>
+  <!-- alert-message area end -->
+</template>
+
+<script setup lang="ts">
+import { toRefs, computed, defineAsyncComponent } from "vue";
+import DOMPurify from "dompurify";
+
+const AcButton = defineAsyncComponent(
+  () => import("@appscode/design-system/vue-components/v3/button/Button.vue")
+);
+
+const props = withDefaults(
+  defineProps<{
+    notificationType: string;
+    content: string;
+    hideIcon: boolean;
+    actionButton?: {
+      show: boolean;
+      title: string;
+      iconClass: string;
+      action: (...args: any) => void | undefined;
+    };
+  }>(),
+  {
+    notificationType: "",
+    content: "",
+    hideIcon: false,
+    actionButton: undefined,
+  }
+);
+
+const { notificationType, content, hideIcon, actionButton } = toRefs(props);
+
+const iconClass = computed(() => {
+  if (notificationType.value === "success") return "fa-check-circle";
+  else if (notificationType.value === "info") return "fa-info-circle";
+  else if (notificationType.value === "error") return "fa-times-circle";
+  else return "fa-info-circle";
+});
+
+const getSanitizedHtml = (content: string) => {
+  return DOMPurify.sanitize(content || "");
+};
+</script>

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

@@ -109,6 +109,11 @@
         </tbody>
       </template>
     </table>
+
+    <!-- table footer info start -->
+    <slot name="table-footer-info" />
+    <!-- table footer info end -->
+
     <!-- pagination start -->
     <slot name="table-pagination" />
     <!-- pagination end -->