From 7d85531f1df6ba92f6046142eea4efe5ab237188 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Mon, 9 Sep 2024 14:44:00 +0200
Subject: [PATCH] improve tab filters

---
 src/lib/helpers/load.ts                       |  2 +-
 .../organization-[organization]/header.svelte | 82 ++++++++-----------
 .../topics/topic-[topic]/header.svelte        | 17 ++--
 .../project-[project]/settings/header.svelte  | 38 ++++-----
 .../storage/bucket-[bucket]/header.svelte     | 17 ++--
 5 files changed, 65 insertions(+), 91 deletions(-)

diff --git a/src/lib/helpers/load.ts b/src/lib/helpers/load.ts
index 21e2f1ee6..21dafb863 100644
--- a/src/lib/helpers/load.ts
+++ b/src/lib/helpers/load.ts
@@ -36,7 +36,7 @@ export function getQuery(url: URL): string | undefined {
     return url.searchParams.get('query') ?? undefined;
 }
 
-export type TabElement = { href: string; title: string; event: string; hasChildren?: boolean };
+export type TabElement = { href: string; title: string; event: string; hasChildren?: boolean, disabled?: boolean };
 
 export function isTabSelected(
     tab: TabElement,
diff --git a/src/routes/(console)/organization-[organization]/header.svelte b/src/routes/(console)/organization-[organization]/header.svelte
index 3a1de1632..d733c6f1c 100644
--- a/src/routes/(console)/organization-[organization]/header.svelte
+++ b/src/routes/(console)/organization-[organization]/header.svelte
@@ -63,58 +63,42 @@
     $: avatars = $members.memberships?.map((m) => m.userName) ?? [];
     $: organizationId = $page.params.organization;
     $: path = `${base}/organization-${organizationId}`;
-    $: settingsTab = [
+    $: tabs = [
+
         {
             href: `${path}/settings`,
             event: 'settings',
-            title: 'Settings'
-        }
-    ];
-    $: permanentTabs = [
-        ...($canSeeProjects
-            ? [
-                  {
-                      href: path,
-                      title: 'Projects',
-                      event: 'projects',
-                      hasChildren: true
-                  }
-              ]
-            : []),
-        ...($isOwner
-            ? [
-                  {
-                      href: `${path}/members`,
-                      title: 'Members',
-                      event: 'members',
-                      hasChildren: true
-                  }
-              ]
-            : [])
-    ];
-    $: tabs = [
-        ...permanentTabs,
-        ...(isCloud && $isOwner
-            ? [
-                  {
-                      href: `${path}/usage`,
-                      event: 'usage',
-                      title: 'Usage',
-                      hasChildren: true
-                  }
-              ]
-            : []),
-        ...(isCloud && $canSeeBilling
-            ? [
-                  {
-                      href: `${path}/billing`,
-                      event: 'billing',
-                      title: 'Billing'
-                  }
-              ]
-            : []),
-        ...($isOwner ? settingsTab : [])
-    ];
+            title: 'Settings',
+            disabled: !$isOwner
+        },
+        {
+            href: path,
+            title: 'Projects',
+            event: 'projects',
+            hasChildren: true,
+            disabled: !$canSeeProjects
+        },
+        {
+            href: `${path}/members`,
+            title: 'Members',
+            event: 'members',
+            hasChildren: true,
+            disabled: !$isOwner
+        },
+        {
+            href: `${path}/usage`,
+            event: 'usage',
+            title: 'Usage',
+            hasChildren: true,
+          disabled: !(isCloud && $isOwner)
+        },
+        {
+            href: `${path}/billing`,
+            event: 'billing',
+            title: 'Billing',
+            disabled: !(isCloud && $canSeeBilling)
+        },
+    ].filter((tab) => !tab.disabled);;
 </script>
 
 {#if $organization?.$id}
diff --git a/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/header.svelte b/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/header.svelte
index 255da8eee..d64d26a90 100644
--- a/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/header.svelte
+++ b/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/header.svelte
@@ -21,16 +21,13 @@
             title: 'Activity',
             event: 'activity'
         },
-        ...($canWriteTopics
-            ? [
-                  {
-                      href: `${path}/settings`,
-                      title: 'Settings',
-                      event: 'settings'
-                  }
-              ]
-            : [])
-    ];
+        {
+            href: `${path}/settings`,
+            title: 'Settings',
+            event: 'settings',
+            disabled: !$canWriteTopics
+        }
+    ].filter((tab) => !tab.disabled);
 </script>
 
 <Cover>
diff --git a/src/routes/(console)/project-[project]/settings/header.svelte b/src/routes/(console)/project-[project]/settings/header.svelte
index d4af675cb..fef09b265 100644
--- a/src/routes/(console)/project-[project]/settings/header.svelte
+++ b/src/routes/(console)/project-[project]/settings/header.svelte
@@ -26,30 +26,26 @@
             title: 'Webhooks',
             event: 'webhooks'
         },
-        ...($canWriteProjects
-            ? [
-                  {
-                      href: `${path}/migrations`,
-                      title: 'Migrations',
-                      event: 'migrations'
-                  },
-                  {
-                      href: `${path}/smtp`,
-                      title: 'SMTP',
-                      event: 'smtp'
-                  }
-              ]
-            : [])
-    ];
-
-    if (isCloud) {
-        tabs.push({
+        {
+            href: `${path}/migrations`,
+            title: 'Migrations',
+            event: 'migrations',
+            disabled: !$canWriteProjects
+        },
+        {
+            href: `${path}/smtp`,
+            title: 'SMTP',
+            event: 'smtp',
+            disabled: !$canWriteProjects
+        },
+        {
             href: `${path}/usage`,
             title: 'Usage',
             event: 'usage',
-            hasChildren: true
-        });
-    }
+            hasChildren: true,
+            disabled: !isCloud
+        }
+    ].filter((tab) => !tab.disabled);;
 </script>
 
 <Cover>
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/header.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/header.svelte
index d8ef38133..8052187c8 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/header.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/header.svelte
@@ -23,16 +23,13 @@
             event: 'usage',
             hasChildren: true
         },
-        ...($canWriteBuckets
-            ? [
-                  {
-                      href: `${path}/settings`,
-                      event: 'settings',
-                      title: 'Settings'
-                  }
-              ]
-            : [])
-    ];
+        {
+            href: `${path}/settings`,
+            event: 'settings',
+            title: 'Settings',
+            disabled: !$canWriteBuckets
+        }
+    ].filter((tab) => !tab.disabled);
 </script>
 
 <Cover>