From 78ec4663ccd5cf5e1432c728a6ad91e150702c16 Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujit@lime-technology.com>
Date: Mon, 9 Dec 2024 10:22:51 -0500
Subject: [PATCH] feat(web): add count labels to notification tabs

---
 justfile                                      |  3 +++
 web/components/Loading/Error.vue              |  1 -
 web/components/Notifications/Indicator.vue    |  4 ++--
 web/components/Notifications/Sidebar.vue      |  5 +---
 web/components/Notifications/TabList.vue      | 24 +++++++++++++++++++
 .../graphql/notification.query.ts             |  6 ++++-
 web/composables/gql/gql.ts                    |  4 ++--
 web/composables/gql/graphql.ts                |  4 ++--
 8 files changed, 39 insertions(+), 12 deletions(-)
 create mode 100644 web/components/Notifications/TabList.vue

diff --git a/justfile b/justfile
index 33a2b726a..e1be9d01d 100644
--- a/justfile
+++ b/justfile
@@ -16,6 +16,9 @@ setup:
     just api/setup
     just web/setup
 
+# restore notification files under api/dev
+restore-notifications:
+    git checkout ./api/dev/notifications
 
 # starts ignoring a file already tracked by git. (gitignore will not apply to these files)
 [group('git')]
diff --git a/web/components/Loading/Error.vue b/web/components/Loading/Error.vue
index ff79ab312..3e83face4 100644
--- a/web/components/Loading/Error.vue
+++ b/web/components/Loading/Error.vue
@@ -22,7 +22,6 @@ import { cn } from '~/components/shadcn/utils';
 const props = withDefaults(
   defineProps<{
     class?: string;
-    /** hasdfsa */
     loading: boolean;
     error: Error | null | undefined;
   }>(),
diff --git a/web/components/Notifications/Indicator.vue b/web/components/Notifications/Indicator.vue
index dc5cbce37..623191a3a 100644
--- a/web/components/Notifications/Indicator.vue
+++ b/web/components/Notifications/Indicator.vue
@@ -4,9 +4,9 @@ import { useQuery } from '@vue/apollo-composable';
 import { cn } from '~/components/shadcn/utils';
 import { Importance } from '~/composables/gql/graphql';
 import { onWatcherCleanup } from 'vue';
-import { unreadOverview } from './graphql/notification.query';
+import { notificationsOverview } from './graphql/notification.query';
 
-const { result } = useQuery(unreadOverview, null, {
+const { result } = useQuery(notificationsOverview, null, {
   pollInterval: 2_000, // 2 seconds
 });
 
diff --git a/web/components/Notifications/Sidebar.vue b/web/components/Notifications/Sidebar.vue
index 29ad5d538..3e2c0c0b0 100644
--- a/web/components/Notifications/Sidebar.vue
+++ b/web/components/Notifications/Sidebar.vue
@@ -50,10 +50,7 @@ const confirmAndDeleteAll = async () => {
         <!-- which means they won't shrink below the height of their content, even if you use flex-1 or other flex properties. -->
         <Tabs default-value="unread" class="flex-1 flex flex-col min-h-0" activation-mode="manual">
           <div class="flex flex-row justify-between items-center flex-wrap gap-5 px-6">
-            <TabsList class="ml-[1px]">
-              <TabsTrigger value="unread"> Unread </TabsTrigger>
-              <TabsTrigger value="archived"> Archived </TabsTrigger>
-            </TabsList>
+            <NotificationsTabList />
             <TabsContent value="unread">
               <Button
                 :disabled="loadingArchiveAll"
diff --git a/web/components/Notifications/TabList.vue b/web/components/Notifications/TabList.vue
new file mode 100644
index 000000000..bd191c5b4
--- /dev/null
+++ b/web/components/Notifications/TabList.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useQuery } from '@vue/apollo-composable';
+import { notificationsOverview } from './graphql/notification.query';
+
+const { result } = useQuery(notificationsOverview);
+
+const overview = computed(() => {
+  if (!result.value) {
+    return;
+  }
+  return result.value.notifications.overview;
+});
+</script>
+
+<template>
+  <TabsList>
+    <TabsTrigger value="unread">
+      Unread <span v-if="overview">({{ overview.unread.total }})</span>
+    </TabsTrigger>
+    <TabsTrigger value="archived">
+      Archived <span v-if="overview">({{ overview.archive.total }})</span>
+    </TabsTrigger>
+  </TabsList>
+</template>
diff --git a/web/components/Notifications/graphql/notification.query.ts b/web/components/Notifications/graphql/notification.query.ts
index 28275b2dd..65320b07c 100644
--- a/web/components/Notifications/graphql/notification.query.ts
+++ b/web/components/Notifications/graphql/notification.query.ts
@@ -81,9 +81,10 @@ export const deleteAllNotifications = graphql(/* GraphQL */ `
   }
 `);
 
-export const unreadOverview = graphql(/* GraphQL */ `
+export const notificationsOverview = graphql(/* GraphQL */ `
   query Overview {
     notifications {
+      id
       overview {
         unread {
           info
@@ -91,6 +92,9 @@ export const unreadOverview = graphql(/* GraphQL */ `
           alert
           total
         }
+        archive {
+          total
+        }
       }
     }
   }
diff --git a/web/composables/gql/gql.ts b/web/composables/gql/gql.ts
index 717a7a456..fa44954f3 100644
--- a/web/composables/gql/gql.ts
+++ b/web/composables/gql/gql.ts
@@ -21,7 +21,7 @@ const documents = {
     "\n  mutation ArchiveAllNotifications {\n    archiveAll {\n      unread {\n        total\n      }\n      archive {\n        info\n        warning\n        alert\n        total\n      }\n    }\n  }\n": types.ArchiveAllNotificationsDocument,
     "\n  mutation DeleteNotification($id: String!, $type: NotificationType!) {\n    deleteNotification(id: $id, type: $type) {\n      archive {\n        total\n      }\n    }\n  }\n": types.DeleteNotificationDocument,
     "\n  mutation DeleteAllNotifications {\n    deleteAllNotifications {\n      archive {\n        total\n      }\n      unread {\n        total\n      }\n    }\n  }\n": types.DeleteAllNotificationsDocument,
-    "\n  query Overview {\n    notifications {\n      overview {\n        unread {\n          info\n          warning\n          alert\n          total\n        }\n      }\n    }\n  }\n": types.OverviewDocument,
+    "\n  query Overview {\n    notifications {\n      id\n      overview {\n        unread {\n          info\n          warning\n          alert\n          total\n        }\n        archive {\n          total\n        }\n      }\n    }\n  }\n": types.OverviewDocument,
     "\n  mutation ConnectSignIn($input: ConnectSignInInput!) {\n    connectSignIn(input: $input)\n  }\n": types.ConnectSignInDocument,
     "\n  mutation SignOut {\n    connectSignOut\n  }\n": types.SignOutDocument,
     "\n  fragment PartialCloud on Cloud {\n    error\n    apiKey {\n      valid\n      error\n    }\n    cloud {\n      status\n      error\n    }\n    minigraphql {\n      status\n      error\n    }\n    relay {\n      status\n      error\n    }\n  }\n": types.PartialCloudFragmentDoc,
@@ -77,7 +77,7 @@ export function graphql(source: "\n  mutation DeleteAllNotifications {\n    dele
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query Overview {\n    notifications {\n      overview {\n        unread {\n          info\n          warning\n          alert\n          total\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query Overview {\n    notifications {\n      overview {\n        unread {\n          info\n          warning\n          alert\n          total\n        }\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  query Overview {\n    notifications {\n      id\n      overview {\n        unread {\n          info\n          warning\n          alert\n          total\n        }\n        archive {\n          total\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query Overview {\n    notifications {\n      id\n      overview {\n        unread {\n          info\n          warning\n          alert\n          total\n        }\n        archive {\n          total\n        }\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/web/composables/gql/graphql.ts b/web/composables/gql/graphql.ts
index 0f4aaa69f..0bedc2ac9 100644
--- a/web/composables/gql/graphql.ts
+++ b/web/composables/gql/graphql.ts
@@ -1702,7 +1702,7 @@ export type DeleteAllNotificationsMutation = { __typename?: 'Mutation', deleteAl
 export type OverviewQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type OverviewQuery = { __typename?: 'Query', notifications: { __typename?: 'Notifications', overview: { __typename?: 'NotificationOverview', unread: { __typename?: 'NotificationCounts', info: number, warning: number, alert: number, total: number } } } };
+export type OverviewQuery = { __typename?: 'Query', notifications: { __typename?: 'Notifications', id: string, overview: { __typename?: 'NotificationOverview', unread: { __typename?: 'NotificationCounts', info: number, warning: number, alert: number, total: number }, archive: { __typename?: 'NotificationCounts', total: number } } } };
 
 export type ConnectSignInMutationVariables = Exact<{
   input: ConnectSignInInput;
@@ -1758,7 +1758,7 @@ export const ArchiveNotificationDocument = {"kind":"Document","definitions":[{"k
 export const ArchiveAllNotificationsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"ArchiveAllNotifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"archiveAll"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"unread"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}}]}},{"kind":"Field","name":{"kind":"Name","value":"archive"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"info"}},{"kind":"Field","name":{"kind":"Name","value":"warning"}},{"kind":"Field","name":{"kind":"Name","value":"alert"}},{"kind":"Field","name":{"kind":"Name","value":"total"}}]}}]}}]}}]} as unknown as DocumentNode<ArchiveAllNotificationsMutation, ArchiveAllNotificationsMutationVariables>;
 export const DeleteNotificationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteNotification"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"type"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"NotificationType"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteNotification"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}},{"kind":"Argument","name":{"kind":"Name","value":"type"},"value":{"kind":"Variable","name":{"kind":"Name","value":"type"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"archive"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}}]}}]}}]}}]} as unknown as DocumentNode<DeleteNotificationMutation, DeleteNotificationMutationVariables>;
 export const DeleteAllNotificationsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteAllNotifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteAllNotifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"archive"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}}]}},{"kind":"Field","name":{"kind":"Name","value":"unread"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}}]}}]}}]}}]} as unknown as DocumentNode<DeleteAllNotificationsMutation, DeleteAllNotificationsMutationVariables>;
-export const OverviewDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Overview"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"notifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"overview"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"unread"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"info"}},{"kind":"Field","name":{"kind":"Name","value":"warning"}},{"kind":"Field","name":{"kind":"Name","value":"alert"}},{"kind":"Field","name":{"kind":"Name","value":"total"}}]}}]}}]}}]}}]} as unknown as DocumentNode<OverviewQuery, OverviewQueryVariables>;
+export const OverviewDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Overview"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"notifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"overview"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"unread"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"info"}},{"kind":"Field","name":{"kind":"Name","value":"warning"}},{"kind":"Field","name":{"kind":"Name","value":"alert"}},{"kind":"Field","name":{"kind":"Name","value":"total"}}]}},{"kind":"Field","name":{"kind":"Name","value":"archive"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}}]}}]}}]}}]}}]} as unknown as DocumentNode<OverviewQuery, OverviewQueryVariables>;
 export const ConnectSignInDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"ConnectSignIn"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ConnectSignInInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"connectSignIn"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}]}]}}]} as unknown as DocumentNode<ConnectSignInMutation, ConnectSignInMutationVariables>;
 export const SignOutDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SignOut"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"connectSignOut"}}]}}]} as unknown as DocumentNode<SignOutMutation, SignOutMutationVariables>;
 export const serverStateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"serverState"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PartialCloud"}}]}},{"kind":"Field","name":{"kind":"Name","value":"config"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"valid"}}]}},{"kind":"Field","name":{"kind":"Name","value":"info"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"os"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hostname"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"owner"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"username"}}]}},{"kind":"Field","name":{"kind":"Name","value":"registration"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"state"}},{"kind":"Field","name":{"kind":"Name","value":"expiration"}},{"kind":"Field","name":{"kind":"Name","value":"keyFile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"contents"}}]}},{"kind":"Field","name":{"kind":"Name","value":"updateExpiration"}}]}},{"kind":"Field","name":{"kind":"Name","value":"vars"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"regGen"}},{"kind":"Field","name":{"kind":"Name","value":"regState"}},{"kind":"Field","name":{"kind":"Name","value":"configError"}},{"kind":"Field","name":{"kind":"Name","value":"configValid"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PartialCloud"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Cloud"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"valid"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"minigraphql"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"relay"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]} as unknown as DocumentNode<serverStateQuery, serverStateQueryVariables>;