fix: add permission check for requests count badge; extract into a co…

…mponent
fallenbagel · Jan 6, 2025 · 5702b75 · 5702b75
1 parent f3931da
commit 5702b75
Showing 1 changed file with 39 additions and 18 deletions.
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
@@ -117,6 +117,33 @@ const SidebarLinks: SidebarLinkProps[] = [
   },
 ];
 
+const PendingRequestsBadge = ({
+  requests,
+  hasPermission,
+}: {
+  requests: RequestCountResponse | undefined;
+  hasPermission: (
+    permission: Permission | Permission[],
+    options?: { type: 'and' | 'or' }
+  ) => boolean;
+}) => {
+  if (
+    !hasPermission([Permission.MANAGE_REQUESTS, Permission.ADMIN], {
+      type: 'or',
+    }) ||
+    !requests ||
+    requests.pending === 0
+  ) {
+    return null;
+  }
+
+  return (
+    <span className="ml-3">
+      <Badge badgeType="default">{requests.pending}</Badge>
+    </span>
+  );
+};
+
 const Sidebar = ({ open, setClosed }: SidebarProps) => {
   const navRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
@@ -210,15 +237,12 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                             {intl.formatMessage(
                               menuMessages[sidebarLink.messagesKey]
                             )}
-                            {sidebarLink.messagesKey === 'requests' &&
-                              requests &&
-                              requests.pending > 0 && (
-                                <span className="ml-3">
-                                  <Badge badgeType="default">
-                                    {requests.pending}
-                                  </Badge>
-                                </span>
-                              )}
+                            {sidebarLink.messagesKey === 'requests' && (
+                              <PendingRequestsBadge
+                                requests={requests}
+                                hasPermission={hasPermission}
+                              />
+                            )}
                           </Link>
                         );
                       })}
@@ -280,15 +304,12 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                       {intl.formatMessage(
                         menuMessages[sidebarLink.messagesKey]
                       )}
-                      {sidebarLink.messagesKey === 'requests' &&
-                        requests &&
-                        requests.pending > 0 && (
-                          <span className="ml-3">
-                            <Badge badgeType="default">
-                              {requests.pending}
-                            </Badge>
-                          </span>
-                        )}
+                      {sidebarLink.messagesKey === 'requests' && (
+                        <PendingRequestsBadge
+                          requests={requests}
+                          hasPermission={hasPermission}
+                        />
+                      )}
                     </Link>
                   );
                 })}