@appscode/design-system 1.0.43-alpha.19 → 1.0.43-alpha.190

package/vue-components/v3/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,8 +17,10 @@
             <header-item>
               <ac-button
                 modifier-classes="is-square is-transparent"
+                :disabled="isCloseOptionDisabled"
                 :icon-image="crossIcon"
                 @click.stop="destroyModal"
+                data-testid="modal-generic-close-icon"
               />
             </header-item>
           </header-items>
@@ -26,7 +28,7 @@
         <!-- modal header end -->
 
         <!-- modal body start  -->
-        <div class="ac-modal-body">
+        <div class="ac-modal-body ac-vscrollbar">
           <div class="ac-modal-content">
             <!-- freedom content start  -->
             <slot />
@@ -36,7 +38,12 @@
         <!-- 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>
@@ -54,32 +61,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
     },
+    ignoreOutsideClick: {
+      type: Boolean,
+      default: false
+    },
+    hideActionFooter: {
+      type: Boolean,
+      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() {
@@ -87,7 +106,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
     };
   },
 
@@ -100,8 +119,8 @@ export default defineComponent({
         } else {
           this.destroyModal();
         }
-      },
-    },
+      }
+    }
   },
 
   methods: {
@@ -115,12 +134,17 @@ export default defineComponent({
       this.showModal = true;
       document.addEventListener("keydown", this.onKeyDown);
     },
+    onModalOutsideClick() {
+      if (this.ignoreOutsideClick) return;
+      this.destroyModal();
+    },
     destroyModal() {
+      if (this.isCloseOptionDisabled) return;
       this.showModal = false;
       document.removeEventListener("keydown", this.onKeyDown);
 
       this.$emit("closemodal", true);
-    },
-  },
+    }
+  }
 });
 </script>

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

@@ -0,0 +1,83 @@
+<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"
+      />
+      <ac-button
+        modifier-classes="is-danger"
+        :is-loader-active="isDeleteActive"
+        title="Yes"
+        @click.stop="confirm(true)"
+      />
+    </template>
+  </modal>
+  <!-- modal end  -->
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+export default defineComponent({
+  components: {
+    Modal: defineAsyncComponent(() =>
+      import("../modal/Modal.vue").then((module) => module.default)
+    ),
+    AcButton: defineAsyncComponent(() =>
+      import("../button/Button.vue").then((module) => module.default)
+    ),
+  },
+  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,
+    },
+  },
+  emits: ["closemodal", "delete-confirmation-modal$confirm"],
+  methods: {
+    confirm(response) {
+      this.$emit("delete-confirmation-modal$confirm", response);
+    },
+    closeModal() {
+      this.confirm(false);
+      this.$emit("closemodal", true);
+    },
+  },
+});
+</script>

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

@@ -10,14 +10,16 @@
         <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"
         />
       </header-item>
     </template>
     <editor
-      :value="JSON.stringify(parsedContent, null, 4)"
+      :model-value="JSON.stringify(parsedContent, null, 4)"
       :read-only="true"
       language="json"
       :show-minimap="false"
@@ -28,36 +30,43 @@
 <script>
 import { defineComponent, defineAsyncComponent } from "vue";
 import { useToast } from "vue-toastification";
+import Preloader from "../../v2/preloader/Preloader.vue";
+import Banner from "../../v2/banner/Banner.vue";
 
 export default defineComponent({
   props: {
     open: {
       type: Boolean,
-      default: false,
+      default: false
     },
     editorTitle: {
       type: String,
-      default: "",
+      default: ""
     },
     editorContent: {
       type: null,
-      default: () => ({}),
-    },
+      default: () => ({})
+    }
   },
   emits: ["closemodal"],
   components: {
     Modal: defineAsyncComponent(() =>
-      import("../modal/Modal.vue").then((module) => module.default)
-    ),
-    Editor: defineAsyncComponent(() =>
-      import("../editor/Editor.vue").then((module) => module.default)
+      import("../modal/Modal.vue").then(module => module.default)
     ),
+    Editor: defineAsyncComponent({
+      loader: () =>
+        import("../editor/Editor.vue").then(module => module.default),
+      loadingComponent: Preloader,
+      delay: 200,
+      errorComponent: Banner,
+      timeout: 100000,
+    }),
     AcButton: defineAsyncComponent(() =>
-      import("../button/Button.vue").then((module) => module.default)
+      import("../button/Button.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)
+    )
   },
   computed: {
     parsedContent() {
@@ -66,7 +75,7 @@ export default defineComponent({
       } catch (e) {
         return this.editorContent;
       }
-    },
+    }
   },
   setup() {
     const toast = useToast();
@@ -81,7 +90,7 @@ export default defineComponent({
     },
     closeModal() {
       this.$emit("closemodal", true);
-    },
-  },
+    }
+  }
 });
 </script>

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

@@ -0,0 +1,337 @@
+<template>
+  <modal
+    :open="open"
+    :title="title"
+    :is-close-option-disabled="!enableModalClose"
+    :ignore-outside-click="true"
+    :hide-action-footer="!enableModalFooter"
+    @closemodal="$emit('close')"
+  >
+    <div v-if="connectionError" class="task-simple-wrapper">
+      <div class="task-cogs-icon">
+        <i class="fa fa-times-circle has-text-danger fa-5x fa-fw"></i>
+      </div>
+      <div class="task-log">
+        <span class="task-title">
+          <i class="fa fa-times-circle mr-5 is-failed" />
+          <span> Connection error </span>
+        </span>
+        <span>{{ connectionError }}</span>
+      </div>
+    </div>
+    <div
+      v-else-if="isNatsConnectionLoading || !activeStep"
+      class="is-justify-content-center"
+      :class="simple ? 'task-simple-wrapper' : 'task-complex-wrapper'"
+    >
+      <preloader
+        :style="{ height: '100%' }"
+        class="is-fullheight"
+        message="Connecting..."
+      />
+    </div>
+    <div v-else-if="simple" class="task-simple-wrapper">
+      <div class="task-cogs-icon">
+        <i class="fa fa-cog fa-spin fa-5x fa-fw"></i>
+        <span class="is-flex is-flex-direction-column">
+          <i class="fa fa-cog fa-spin fa-3x fa-bw"></i>
+          <i class="fa fa-cog fa-spin fa-3x fa-bw"></i>
+        </span>
+      </div>
+      <div class="task-log">
+        <span class="task-title">
+          <i
+            v-if="activeTask?.status === 'Running'"
+            class="fa fa-circle-o-notch fa-spin mr-5"
+          />
+          <i
+            v-else-if="activeTask?.status === 'Success'"
+            class="fa fa-check-circle mr-5 is-success"
+          />
+          <i
+            v-else-if="activeTask?.status === 'Failed'"
+            class="fa fa-times-circle mr-5 is-failed"
+          />
+          <span>
+            {{ activeTask?.step }}
+          </span>
+        </span>
+        <span>{{ activeTask?.logs[activeTask?.logs.length - 1] }}</span>
+      </div>
+    </div>
+    <div v-else class="task-complex-wrapper">
+      <ul class="task-list">
+        <li v-for="task in tasks" :key="task.step">
+          <long-running-task-item
+            :title="task.step"
+            :status="task.status"
+            :class="{ 'is-active': activeStep === task.step }"
+          />
+        </li>
+      </ul>
+      <long-running-task-terminal
+        :key="activeTask?.step"
+        :theme="theme"
+        :logs="activeTask?.logs"
+        class="task-log"
+      />
+    </div>
+
+    <template #modal-footer-controls>
+      <ac-button
+        title="Close"
+        modifier-classes="is-outlined"
+        @click.stop="$emit('close')"
+      />
+      <ac-button
+        v-if="showSuccessButton"
+        :title="successCtx?.btnTitle"
+        :is-loader-active="successCtx?.isLoaderActive"
+        modifier-classes="is-primary"
+        icon-class="step-forward"
+        @click="successCtx.onSuccessBtnClick"
+      />
+      <ac-button
+        v-if="showReportButton"
+        title="Report Issue"
+        modifier-classes="is-danger"
+        icon-class="external-link"
+        @click="onReportIssueClick"
+      />
+    </template>
+  </modal>
+</template>
+<script setup lang="ts">
+import {
+  computed,
+  getCurrentInstance,
+  onBeforeUnmount,
+  Ref,
+  toRefs,
+  watch,
+  watchEffect,
+} from "vue";
+import { defineAsyncComponent, ref } from "vue";
+import { Task, TaskLog } from "../../../typings/long-running-tasks.ts";
+import { Subscription, StringCodec } from "nats.ws";
+
+const Modal = defineAsyncComponent(() => import("../modal/Modal.vue"));
+const LongRunningTaskItem = defineAsyncComponent(
+  () => import("../long-running-tasks/LongRunningTaskItem.vue")
+);
+const LongRunningTaskTerminal = defineAsyncComponent(
+  () => import("../terminal/LongRunningTaskTerminal.vue")
+);
+const Preloader = defineAsyncComponent(
+  () => import("../../v2/preloader/Preloader.vue")
+);
+const AcButton = defineAsyncComponent(() => import("../button/Button.vue"));
+
+defineEmits(["close"]);
+
+const props = withDefaults(
+  defineProps<{
+    open: boolean;
+    theme: string;
+    title: string;
+    simple: boolean;
+    natsSubject: string;
+    isNatsConnectionLoading: boolean;
+    errorCtx?: {
+      connectionError: string;
+      onError: (msg: string) => void;
+    };
+    successCtx?: {
+      btnTitle?: string;
+      isLoaderActive?: boolean;
+      onSuccess: () => void;
+      onSuccessBtnClick?: () => void;
+    };
+  }>(),
+  {
+    open: true,
+    theme: "light",
+    simple: true,
+    title: "Sample title",
+    natsSubject: "",
+    isNatsConnectionLoading: false,
+    errorCtx: undefined,
+    successCtx: undefined,
+  }
+);
+
+const { natsSubject, open, errorCtx, successCtx } = toRefs(props);
+const connectionError = computed(() => errorCtx.value?.connectionError);
+const currentInstance = getCurrentInstance();
+const $nats = currentInstance?.appContext.config.globalProperties.$nc;
+let subscription: Subscription;
+
+const tasks: Ref<Array<Task>> = ref([]);
+const activeStep: Ref<string> = ref("");
+const activeTask = computed(() => {
+  const task = tasks.value.find((task) => task.step === activeStep.value);
+  return task;
+});
+
+function handleTaskLog(log: TaskLog) {
+  if (log.step) {
+    // log has a step
+    // so add new task
+    tasks.value.push({
+      ...log,
+      logs: [(log.msg && log.msg) || ""],
+    });
+    activeStep.value = log.step;
+  } else {
+    const task = tasks.value.find((task) => task.step === activeStep.value);
+    if (task) {
+      task.status = log.status;
+      if (log.status === "Failed") {
+        task.logs.push(log.error || "");
+      } else {
+        task.logs.push(log.msg || "");
+      }
+    }
+  }
+}
+
+async function subscribeToChannel(channelId: string) {
+  subscription = $nats?.subscribe(channelId);
+
+  console.log("Started listening", channelId);
+
+  if (subscription) {
+    // listen to channel events
+    for await (const msg of subscription) {
+      console.log("Long Running Tasks Modal=>");
+      console.log({ data: StringCodec().decode(msg.data) });
+      const log: TaskLog = JSON.parse(StringCodec().decode(msg.data));
+      console.log({ log });
+      handleTaskLog(log);
+    }
+    console.log("Stopped listening", channelId);
+    console.log("Closed Channel", channelId);
+  }
+}
+
+watchEffect(() => {
+  if (natsSubject.value) {
+    subscribeToChannel(natsSubject.value);
+  }
+});
+
+watch(open, (n) => {
+  if (!n) {
+    subscription && subscription.unsubscribe();
+  }
+});
+onBeforeUnmount(() => {
+  subscription && subscription.unsubscribe();
+});
+
+// modal close / footer feature
+const enableModalClose = computed(() => {
+  return (
+    connectionError.value ||
+    activeTask.value?.status === "Failed" ||
+    activeTask.value?.status === "Success"
+  );
+});
+const enableModalFooter = computed(() => {
+  return showReportButton.value || showSuccessButton.value;
+});
+
+// report button
+const showReportButton = computed(() => activeTask.value?.status === "Failed");
+function onReportIssueClick() {
+  const url = `https://github.com/bytebuilders/community/issues/new?title=Chart Install: ${
+    activeStep.value
+  }&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(
+  () => activeTask.value?.status === "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] || ""
+      );
+    }
+  }
+);
+</script>
+
+<style scoped lang="scss">
+.task-simple-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 40vw;
+  height: 40vh;
+  .task-cogs-icon {
+    width: 100%;
+    height: 70%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    color: var(--ac-primary);
+  }
+  .task-log {
+    width: 100%;
+    height: 30%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .task-title {
+      span,
+      i {
+        font-size: 16px;
+      }
+      i {
+        color: var(--ac-primary);
+        &.is-success {
+          color: #158748;
+        }
+        &.is-failed {
+          color: #ff3729;
+        }
+      }
+      font-weight: 500;
+    }
+    span {
+      font-size: 14px;
+    }
+  }
+}
+.task-complex-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 60vw;
+  height: 60vh;
+
+  .task-list {
+    width: 25%;
+    height: 100%;
+  }
+  .task-log {
+    width: 70%;
+    height: 100%;
+    border-radius: 1rem;
+    font-size: 13px;
+  }
+}
+</style>

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

@@ -1,10 +1,13 @@
 <template>
-  <div class="app-drawer-wrapper">
-    <div class="drawer-icon">
+  <div class="app-drawer-wrapper is-flex">
+    <div
+      class="drawer-icon  is-flex is-justify-content-center is-align-items-center"
+    >
       <svg
         class="gb_We"
         focusable="false"
         viewBox="0 0 24 24"
+        style="width: 22px;margin-top: 2px;"
         :style="{ fill: 'white' }"
       >
         <path
@@ -46,13 +49,15 @@ export default defineComponent({
   props: {
     apps: {
       type: Array,
-      default: () => [],
-    },
+      default: () => []
+    }
   },
   components: {
     NavbarItemContent: defineAsyncComponent(() =>
-      import("../../v2/navbar/NavbarItemContent.vue").then((module) => module.default)
-    ),
-  },
+      import("../../v2/navbar/NavbarItemContent.vue").then(
+        module => module.default
+      )
+    )
+  }
 });
 </script>