@appscode/design-system 2.2.36 → 2.2.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.2.36",
+  "version": "2.2.37",
   "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/Appdrawer2.vue

@@ -11,69 +11,80 @@ const props = withDefaults(defineProps<Props>(), {
   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",
+    port: "5990",
     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",
+    port: "5996",
     sub_title: "Manage your databases",
   },
   {
     name: "grafana",
-    url: getUrl("grafana"),
     icon_url: "https://cdn.appscode.com/images/products/others/logos/grafana.svg",
     title: "Grafana",
+    port: "3005",
     sub_title: "Analyze your activities",
   },
   {
     name: "selfhost",
-    url: getUrl("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",
-    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 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 = (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 = appList.filter((element) => {
+const filteredAppList = appListWithUrl.filter((element) => {
   // remove own app from dropdown
   if (element.name === props.currentApp) return false;