@appscode/design-system 2.2.36 → 2.2.38

package/package.json

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

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

@@ -56,14 +56,14 @@ function onAddClick() {
   prop.clearAllFields();
 }
 
-function onSaveItem() {
-  prop.saveNewItem();
-  resetAllData();
+async function onSaveItem() {
+  const resetData = await prop.saveNewItem();
+  if (resetData) resetAllData();
 }
 
-function onSaveEditedItem(row: number) {
-  prop.saveEditedItem(row);
-  resetAllData();
+async function onSaveEditedItem(row: number) {
+  const resetData = await prop.saveEditedItem(row);
+  if (resetData) resetAllData();
 }
 
 function resetAllData() {

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

@@ -1,20 +1,61 @@
 <script setup lang="ts">
-import { defineAsyncComponent, ref } from "vue";
-interface app {
-  url: string;
-  icon_url: string;
-  title: string;
-  sub_title: string;
-}
+import { computed, defineAsyncComponent, ref } from "vue";
 
 interface Props {
-  apps?: Array<app>;
+  currentApp: "console" | "db" | "platform" | "billing" | "selfhost" | "learn" | "grafana";
+  baseUrl: string;
 }
 
-withDefaults(defineProps<Props>(), {
-  apps: () => [],
+const props = withDefaults(defineProps<Props>(), {
+  currentApp: "platform",
+  baseUrl: "https://appscode.com",
 });
 
+const appList = [
+  {
+    name: "console",
+    icon_url: "https://cdn.appscode.com/images/products/console/console_512x512.svg",
+    title: "Console",
+    port: "5990",
+    sub_title: "Manage your kubernetes clusters",
+  },
+  {
+    name: "db",
+    icon_url: "https://cdn.appscode.com/images/products/kubedb/kubedb-512x512_1.svg",
+    title: "KubeDB",
+    port: "5996",
+    sub_title: "Manage your databases",
+  },
+  {
+    name: "grafana",
+    icon_url: "https://cdn.appscode.com/images/products/others/logos/grafana.svg",
+    title: "Grafana",
+    port: "3005",
+    sub_title: "Analyze your activities",
+  },
+  {
+    name: "selfhost",
+    icon_url: "https://cdn.appscode.com/images/products/selfhost/logos/selfhost.svg",
+    title: "SelfHost",
+    port: "5993",
+    sub_title: "Host AppsCode on your own cluster",
+  },
+  {
+    name: "billing",
+    icon_url: "https://cdn.appscode.com/images/products/billing/logos/billing.svg",
+    title: "Billing",
+    port: "5995",
+    sub_title: "Manage your contracts, licenses & billings",
+  },
+  {
+    name: "learn",
+    icon_url: "https://cdn.appscode.com/images/products/learn/logos/learn.svg",
+    title: "Learn",
+    port: "5988",
+    sub_title: "Be an Expert in Cloud Native technologies",
+  },
+];
+
 const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
 const NavbarItemContent = defineAsyncComponent(() => import("./NavbarItemContent.vue"));
 const showDrawer = ref(false);
@@ -22,6 +63,39 @@ const showDrawer = ref(false);
 function handleIsActiveChange(isActive: string) {
   showDrawer.value = !!isActive?.length;
 }
+
+const getUrl = (product: (typeof appList)[0]) => {
+  if (props.baseUrl.search("bb.test") !== -1) {
+    return `http://bb.test:${product.port}/${product.name}`;
+  } else if (props.baseUrl.search("localhost") !== -1) {
+    return `http://localhost:${product.port}/${product.name}`;
+  }
+
+  return `${props.baseUrl}/${product.name}`;
+};
+
+const appListWithUrl = appList.map((el) => {
+  return {
+    ...el,
+    url: getUrl(el),
+  };
+});
+
+const isSelfHosted = computed(() => {
+  const list = ["https://appscode.ninja", "https://appscode.com", "http://bb.test:8080"];
+  return !list.includes(props.baseUrl);
+});
+
+const filteredAppList = appListWithUrl.filter((element) => {
+  // remove own app from dropdown
+  if (element.name === props.currentApp) return false;
+
+  // remove billing selfhost & learn from selfhost mode
+  let selfHostList = ["billing", "selfhost", "learn"];
+  if (isSelfHosted.value && selfHostList.includes(element.name)) return false;
+
+  return true;
+});
 </script>
 
 <template>
@@ -63,7 +137,7 @@ function handleIsActiveChange(isActive: string) {
         <div v-if="showDrawer">
           <navbar-item-content class="navbar-dropdown-wrapper" style="right: -30px">
             <ul class="ac-scrollbar p-0 app-drawer">
-              <li v-for="app in apps" :key="app.url">
+              <li v-for="app in filteredAppList" :key="app.url">
                 <a :href="app.url">
                   <article class="media">
                     <figure class="media-left">

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

@@ -1,164 +0,0 @@
-<script setup lang="ts">
-import { computed, defineAsyncComponent, ref } from "vue";
-
-interface Props {
-  currentApp: "console" | "db" | "platform" | "billing" | "selfhost" | "learn" | "grafana";
-  baseUrl: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  currentApp: "platform",
-  baseUrl: "https://appscode.com",
-});
-
-const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
-const NavbarItemContent = defineAsyncComponent(() => import("./NavbarItemContent.vue"));
-const showDrawer = ref(false);
-
-function handleIsActiveChange(isActive: string) {
-  showDrawer.value = !!isActive?.length;
-}
-
-const getUrl = (products: Props["currentApp"]) => {
-  return `${props.baseUrl}/${products}`;
-};
-
-const appList = [
-  {
-    name: "console",
-    url: getUrl("console"),
-    icon_url: "https://cdn.appscode.com/images/products/console/console_512x512.svg",
-    title: "Console",
-    sub_title: "Manage your kubernetes clusters",
-  },
-  {
-    name: "db",
-    url: getUrl("db"),
-    icon_url: "https://cdn.appscode.com/images/products/kubedb/kubedb-512x512_1.svg",
-    title: "KubeDB",
-    sub_title: "Manage your databases",
-  },
-  {
-    name: "grafana",
-    url: getUrl("grafana"),
-    icon_url: "https://cdn.appscode.com/images/products/others/logos/grafana.svg",
-    title: "Grafana",
-    sub_title: "Analyze your activities",
-  },
-  {
-    name: "selfhost",
-    url: getUrl("selfhost"),
-    icon_url: "https://cdn.appscode.com/images/products/selfhost/logos/selfhost.svg",
-    title: "SelfHost",
-    sub_title: "Host AppsCode on your own cluster",
-  },
-  {
-    name: "billing",
-    url: getUrl("billing"),
-    icon_url: "https://cdn.appscode.com/images/products/billing/logos/billing.svg",
-    title: "Billing",
-    sub_title: "Manage your contracts, licenses & billings",
-  },
-  {
-    name: "learn",
-    url: getUrl("learn"),
-    icon_url: "https://cdn.appscode.com/images/products/learn/logos/learn.svg",
-    title: "Learn",
-    sub_title: "Be an Expert in Cloud Native technologies",
-  },
-];
-
-const isSelfHosted = computed(() => {
-  const list = ["https://appscode.ninja", "https://appscode.com", "http://bb.test:8080"];
-  return !list.includes(props.baseUrl);
-});
-
-const filteredAppList = appList.filter((element) => {
-  // remove own app from dropdown
-  if (element.name === props.currentApp) return false;
-
-  // remove billing selfhost & learn from selfhost mode
-  let selfHostList = ["billing", "selfhost", "learn"];
-  if (isSelfHosted.value && selfHostList.includes(element.name)) return false;
-
-  return true;
-});
-</script>
-
-<template>
-  <navbar-item @on-is-active-change="handleIsActiveChange">
-    <template #navbar-item>
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M6.66667 2H2V6.66667H6.66667V2Z"
-          stroke="#061B2D"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M14 2H9.33337V6.66667H14V2Z"
-          stroke="#061B2D"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M14 9.33334H9.33337V14H14V9.33334Z"
-          stroke="#061B2D"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M6.66667 9.33334H2V14H6.66667V9.33334Z"
-          stroke="#061B2D"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </template>
-    <template #navbar-content>
-      <transition>
-        <div v-if="showDrawer">
-          <navbar-item-content class="navbar-dropdown-wrapper" style="right: -30px">
-            <ul class="ac-scrollbar p-0 app-drawer">
-              <li v-for="app in filteredAppList" :key="app.url">
-                <a :href="app.url">
-                  <article class="media">
-                    <figure class="media-left">
-                      <p class="image">
-                        <img :src="app.icon_url" />
-                      </p>
-                    </figure>
-                    <div class="media-content">
-                      <div class="content">
-                        <p>
-                          <strong>{{ app.title }}</strong>
-                          <span>{{ app.sub_title }}</span>
-                        </p>
-                      </div>
-                    </div>
-                  </article>
-                </a>
-              </li>
-            </ul>
-          </navbar-item-content>
-        </div>
-      </transition>
-    </template>
-  </navbar-item>
-</template>
-
-<style scoped>
-.v-enter-active,
-.v-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-  opacity: 0;
-}
-</style>