From d371c568f1beac2e53bd8d8415bb643280e43efb Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Wed, 3 Apr 2024 17:42:27 -0700
Subject: [PATCH] Add count

---
 .../src/hooks/api/accessApproval/mutation.tsx    |  5 ++++-
 frontend/src/layouts/AppLayout/AppLayout.tsx     | 16 +++++++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/src/hooks/api/accessApproval/mutation.tsx b/frontend/src/hooks/api/accessApproval/mutation.tsx
index 7a150092c..c81295e60 100644
--- a/frontend/src/hooks/api/accessApproval/mutation.tsx
+++ b/frontend/src/hooks/api/accessApproval/mutation.tsx
@@ -88,7 +88,10 @@ export const useCreateAccessRequest = () => {
       return data;
     },
     onSuccess: (_, { projectSlug }) => {
-      queryClient.invalidateQueries(accessApprovalKeys.getAccessApprovalRequests(projectSlug));
+      queryClient.invalidateQueries([
+        accessApprovalKeys.getAccessApprovalRequests(projectSlug),
+        accessApprovalKeys.getAccessApprovalRequestCount(projectSlug)
+      ]);
     }
   });
 };
diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
index a6c25c7c2..2fcdc9339 100644
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -5,7 +5,7 @@
 /* eslint-disable no-var */
 /* eslint-disable func-names */
 
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import Image from "next/image";
@@ -64,6 +64,7 @@ import {
   fetchOrgUsers,
   useAddUserToWsNonE2EE,
   useCreateWorkspace,
+  useGetAccessRequestsCount,
   useGetOrgTrialUrl,
   useGetSecretApprovalRequestCount,
   useGetUserAction,
@@ -124,9 +125,15 @@ export const AppLayout = ({ children }: LayoutProps) => {
   const { user } = useUser();
   const { subscription } = useSubscription();
   const workspaceId = currentWorkspace?.id || "";
+  const projectSlug = currentWorkspace?.slug || "";
   const { data: updateClosed } = useGetUserAction("december_update_closed");
 
   const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({ workspaceId });
+  const { data: accessApprovalRequestCount } = useGetAccessRequestsCount({ projectSlug });
+
+  const pendingRequestsCount = useMemo(() => {
+    return (secretApprovalReqCount?.open || 0) + (accessApprovalRequestCount?.pendingCount || 0);
+  }, [secretApprovalReqCount, accessApprovalRequestCount]);
 
   const isAddingProjectsAllowed = subscription?.workspaceLimit
     ? subscription.workspacesUsed < subscription.workspaceLimit
@@ -555,9 +562,12 @@ export const AppLayout = ({ children }: LayoutProps) => {
                             icon="system-outline-189-domain-verification"
                           >
                             Approvals
-                            {Boolean(secretApprovalReqCount?.open) && (
+                            {Boolean(
+                              secretApprovalReqCount?.open ||
+                                accessApprovalRequestCount?.pendingCount
+                            ) && (
                               <span className="ml-2 rounded border border-primary-400 bg-primary-600 py-0.5 px-1 text-xs font-semibold text-black">
-                                {secretApprovalReqCount?.open}
+                                {pendingRequestsCount}
                               </span>
                             )}
                           </MenuItem>