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

package/components/_transitions.scss

@@ -151,6 +151,41 @@
   position: absolute;
 }
 
+.zoom-list-move, /* apply transition to moving elements */
+.zoom-list-enter-active,
+.zoom-list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.zoom-list-enter-from,
+.zoom-list-leave-to {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+.zoom-list-leave-active {
+  position: absolute;
+}
+
+.slide-left-list-move,
+.slide-left-list-enter-active,
+.slide-left-list-leave-active {
+  transition: all 0.3s ease-in-out;
+}
+.slide-left-list-enter-from,
+.slide-left-list-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+.slide-left-list-enter-to,
+.slide-left-list-leave-from {
+  transform: translateX(0px);
+  opacity: 1;
+}
+.slide-left-list-leave-active {
+  position: absolute;
+}
+
 .overview-card-enter-active {
   transition: all 0.2s ease-in-out;
 }

package/package.json

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

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

@@ -110,11 +110,6 @@
         </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/modals/LongRunningTasksModal.vue

@@ -110,6 +110,7 @@ import {
   Ref,
   toRefs,
   watch,
+  watchEffect,
 } from "vue";
 import { defineAsyncComponent, ref } from "vue";
 import { Task, TaskLog } from "../../../typings/long-running-tasks.ts";
@@ -172,7 +173,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[idToStepIndex.value[activeStepId.value]];
+  const task = tasks.value.find((task) => task.id === activeStepId.value);
   return task;
 });
 
@@ -206,7 +207,6 @@ 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,36 +252,12 @@ 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 ||
-    longRunningTaskStatus.value === "Failed" ||
-    longRunningTaskStatus.value === "Success"
+    activeTask.value?.status === "Failed" ||
+    activeTask.value?.status === "Success"
   );
 });
 const enableModalFooter = computed(() => {
@@ -289,50 +265,47 @@ const enableModalFooter = computed(() => {
 });
 
 // generate report issue title with error step title
-const getReportIssueInfo = (): { title: string; body: string } => {
+const getReportIssueTitle = (): 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);
-      stepLogsFromErrorTasks.push(task?.logs[task?.logs?.length - 1] || "");
+      stepTitlesFromErrorTasks.push(task.step);
     }
   });
-  // return final object
-  return {
-    title: stepTitlesFromErrorTasks.join(", "),
-    body: stepLogsFromErrorTasks.join(", "),
-  };
+  // return final string
+  return stepTitlesFromErrorTasks.join(", ");
 };
 
 // report button
-const showReportButton = computed(
-  () => longRunningTaskStatus.value === "Failed"
-);
+const showReportButton = computed(() => activeTask.value?.status === "Failed");
 function onReportIssueClick() {
-  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
+  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]
   } %0A %60%60%60`;
   window.open(url, "_blank");
 }
 
 // success button
 const showSuccessButton = computed(
-  () =>
-    longRunningTaskStatus.value === "Success" && !!successCtx.value?.btnTitle
+  () => activeTask.value?.status === "Success" && successCtx.value?.btnTitle
 );
 
 // execute on success and on error functions
-watch(longRunningTaskStatus, (n) => {
-  if (n === "Success") {
-    successCtx.value.onSuccess();
-  } else if (n === "Failed") {
-    errorCtx.value?.onError("Operation Failed");
+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] || ""
+      );
+    }
   }
-});
+);
 </script>
 
 <style scoped lang="scss">

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

@@ -97,7 +97,9 @@
           <table-row class="is-hoverless">
             <table-cell
               :colspan="
-                actionable ? tableHeaders.length + 1 : tableHeaders.length
+                tableHeaders.length +
+                (actionable ? 1 : 0) +
+                (collapsible ? 1 : 0)
               "
               class="no-data-available has-text-centered"
             >
@@ -107,11 +109,6 @@
         </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/notification/AlertBox.vue

@@ -1,61 +0,0 @@
-<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>