@appscode/design-system 2.17.85 → 2.17.86

package/package.json

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

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

@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   isOfflineInstaller: false,
 });
 
-const appList = [
+const baseAppList = [
   {
     name: "id",
     icon_url: "https://cdn.appscode.com/images/products/platform/platform.svg",
@@ -73,15 +73,21 @@ const appList = [
   },
 ];
 
-if (props.activeOrgType !== 3) {
-  appList.splice(1, 0, {
-    name: "console",
-    icon_url: "https://cdn.appscode.com/images/products/console/console_512x512.svg",
-    title: "Console",
-    port: "5990",
-    sub_title: "Manage your kubernetes clusters",
-  });
-}
+const appList = computed(() => {
+  const list = [...baseAppList];
+
+  if (props.activeOrgType !== 3) {
+    list.splice(1, 0, {
+      name: "console",
+      icon_url: "https://cdn.appscode.com/images/products/console/console_512x512.svg",
+      title: "Console",
+      port: "5990",
+      sub_title: "Manage your kubernetes clusters",
+    });
+  }
+
+  return list;
+});
 
 const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
 const NavbarItemContent = defineAsyncComponent(() => import("./NavbarItemContent.vue"));
@@ -91,7 +97,7 @@ function handleIsActiveChange(isActive: string) {
   showDrawer.value = !!isActive?.length;
 }
 
-const getUrl = (product: (typeof appList)[0]) => {
+const getUrl = (product: (typeof baseAppList)[0]) => {
   if (props.baseUrl.search("bb.test") !== -1) {
     return `http://bb.test:${product.port}/${product.name}/`;
   } else if (props.baseUrl.search("localhost") !== -1) {
@@ -101,32 +107,36 @@ const getUrl = (product: (typeof appList)[0]) => {
   return `${props.baseUrl}/${product.name}/`;
 };
 
-const appListWithUrl = appList.map((el) => {
-  return {
-    ...el,
-    url: getUrl(el),
-  };
-});
+const appListWithUrl = computed(() =>
+  appList.value.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
-  // but always keep billing when this is an offline installer
-  const selfHostList = ["billing", "selfhost", "learn"];
-  if (isSelfHosted.value && selfHostList.includes(element.name)) {
-    if (element.name === "billing" && props.isOfflineInstaller && props.activeOrgType === 6) return true;
-    return false;
-  }
-
-  return true;
-});
+const filteredAppList = computed(() =>
+  appListWithUrl.value.filter((element) => {
+    // remove own app from dropdown
+    if (element.name === props.currentApp) return false;
+
+    // remove billing selfhost & learn from selfhost mode
+    // but always keep billing when this is an offline installer
+    const selfHostList = ["billing", "selfhost", "learn"];
+    if (isSelfHosted.value && selfHostList.includes(element.name)) {
+      if (element.name === "billing" && props.isOfflineInstaller && props.activeOrgType === 6) return true;
+      return false;
+    }
+
+    return true;
+  }),
+);
 
 const handleClick = (name: string) => {
   if (name === "grafana") setCookie("gorg", props.activeOrganization, { domain: props.rootDomain });