refactor: extract shared hasPermission helper (MODSetter/SurfSense#1366)

- Add canPerform() helper function to members-query.atoms.ts
- Add usePermissionGate() hook for convenience
- Update team-content.tsx to use canPerform()
- Update roles-manager.tsx to use canPerform()
- Eliminates duplicated permission check logic
- Centralizes permission policy in one location

Fixes #1366

surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx

@@ -31,7 +31,7 @@ import {
 	deleteMemberMutationAtom,
 	updateMemberMutationAtom,
 } from "@/atoms/members/members-mutation.atoms";
-import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
+import { membersAtom, myAccessAtom, canPerform } from "@/atoms/members/members-query.atoms";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -126,14 +126,9 @@ export function TeamContent({ searchSpaceId }: TeamContentProps) {
 	const { data: access = null, isLoading: accessLoading } = useAtomValue(myAccessAtom);
 
 	const hasPermission = useCallback(
-		(permission: string) => {
+		(permission: string) => canPerform(access, permission),
-			if (!access) return false;
-			if (access.is_owner) return true;
-			return access.permissions?.includes(permission) ?? false;
-		},
 		[access]
 	);
-
 	const { data: members = [], isLoading: membersLoading } = useAtomValue(membersAtom);
 
 	const { mutateAsync: updateMember } = useAtomValue(updateMemberMutationAtom);

surfsense_web/atoms/members/members-query.atoms.ts

@@ -39,3 +39,38 @@ export const myAccessAtom = atomWithQuery((get) => {
 		},
 	};
 });
+
+/**
+ * Helper function to check if the current user has a specific permission.
+ * 
+ * @param access - The access object from useAtomValue(myAccessAtom)
+ * @param permission - The permission string to check
+ * @returns boolean indicating if the user has the permission
+ * 
+ * @example
+ * const access = useAtomValue(myAccessAtom);
+ * if (canPerform(access, 'manage_members')) { ... }
+ */
+export function canPerform(
+	access: { is_owner: boolean; permissions?: string[] } | null | undefined,
+	permission: string
+): boolean {
+	if (!access) return false;
+	if (access.is_owner) return true;
+	return access.permissions?.includes(permission) ?? false;
+}
+
+/**
+ * Hook wrapper for canPerform that reads from myAccessAtom internally.
+ * Use this if you want to avoid calling useAtomValue(myAccessAtom) separately.
+ * 
+ * @param permission - The permission string to check
+ * @returns boolean indicating if the user has the permission
+ * 
+ * @example
+ * const canManageMembers = usePermissionGate('manage_members');
+ */
+export function usePermissionGate(permission: string): boolean {
+	const access = useAtomValue(myAccessAtom);
+	return canPerform(access, permission);
+}

surfsense_web/components/settings/roles-manager.tsx

@@ -26,7 +26,7 @@ import {
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
-import { myAccessAtom } from "@/atoms/members/members-query.atoms";
+import { myAccessAtom, canPerform } from "@/atoms/members/members-query.atoms";
 import { permissionsAtom } from "@/atoms/permissions/permissions-query.atoms";
 import {
 	createRoleMutationAtom,
@@ -257,6 +257,9 @@ export function RolesManager({ searchSpaceId }: { searchSpaceId: number }) {
 	const { data: access = null } = useAtomValue(myAccessAtom);
 
 	const hasPermission = useCallback(
+		(permission: string) => canPerform(access, permission),
+		[access]
+	);
 		(permission: string) => {
 			if (!access) return false;
 			if (access.is_owner) return true;