feat: migrate views-new project files to use SetProjectMemberRole and RemoveProjectMember

Update the design-revamped SDK views to use the new atomic RPCs:
- add-member-menu.tsx: use SetProjectMemberRole with fetched role UUID
- remove-member-dialog.tsx: use RemoveProjectMember
- project-details-view.tsx: use SetProjectMemberRole for role change

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: whoAbhishekSah

web/sdk/react/views-new/projects/components/add-member-menu.tsx

@@ -16,8 +16,10 @@ import { useQuery, useMutation } from '@connectrpc/connect-query';
 import {
   FrontierServiceQueries,
   ListOrganizationUsersRequestSchema,
-  CreatePolicyForProjectRequestSchema,
-  type User
+  ListRolesRequestSchema,
+  SetProjectMemberRoleRequestSchema,
+  type User,
+  type Role
 } from '@raystack/proton/frontier';
 import { create } from '@bufbuild/protobuf';
 import { useFrontier } from '../../../contexts/FrontierContext';
@@ -80,8 +82,22 @@ export function AddMemberMenu({
     [orgUsers, members]
   );
 
-  const { mutate: createPolicyForProject } = useMutation(
-    FrontierServiceQueries.createPolicyForProject,
+  const { data: rolesData } = useQuery(
+    FrontierServiceQueries.listRoles,
+    create(ListRolesRequestSchema, {
+      state: 'enabled',
+      scopes: [PERMISSIONS.ProjectNamespace]
+    }),
+    { enabled: !!projectId }
+  );
+
+  const viewerRole = useMemo(
+    () => (rolesData?.roles as Role[] ?? []).find((r: Role) => r.name === PERMISSIONS.RoleProjectViewer),
+    [rolesData]
+  );
+
+  const { mutate: setProjectMemberRole } = useMutation(
+    FrontierServiceQueries.setProjectMemberRole,
     {
       onSuccess: () => {
         toastManager.add({
@@ -102,30 +118,32 @@ export function AddMemberMenu({
 
   const addMember = useCallback(
     (userId: string) => {
-      if (!userId || !organization?.id || !projectId) return;
-      const principal = `${PERMISSIONS.UserNamespace}:${userId}`;
-      createPolicyForProject(
-        create(CreatePolicyForProjectRequestSchema, {
+      if (!userId || !organization?.id || !projectId || !viewerRole?.id) return;
+      setProjectMemberRole(
+        create(SetProjectMemberRoleRequestSchema, {
           projectId,
-          body: { roleId: PERMISSIONS.RoleProjectViewer, principal }
+          principalId: userId,
+          principalType: PERMISSIONS.UserNamespace,
+          roleId: viewerRole.id
         })
       );
     },
-    [createPolicyForProject, organization?.id, projectId]
+    [setProjectMemberRole, organization?.id, projectId, viewerRole]
   );
 
   const addTeam = useCallback(
     (teamId: string) => {
-      if (!teamId || !organization?.id || !projectId) return;
-      const principal = `${PERMISSIONS.GroupNamespace}:${teamId}`;
-      createPolicyForProject(
-        create(CreatePolicyForProjectRequestSchema, {
+      if (!teamId || !organization?.id || !projectId || !viewerRole?.id) return;
+      setProjectMemberRole(
+        create(SetProjectMemberRoleRequestSchema, {
           projectId,
-          body: { roleId: PERMISSIONS.RoleProjectViewer, principal }
+          principalId: teamId,
+          principalType: PERMISSIONS.GroupNamespace,
+          roleId: viewerRole.id
         })
       );
     },
-    [createPolicyForProject, organization?.id, projectId]
+    [setProjectMemberRole, organization?.id, projectId, viewerRole]
   );
 
   const toggleShowTeam = useCallback(() => {

web/sdk/react/views-new/projects/components/remove-member-dialog.tsx

@@ -11,11 +11,9 @@ import { toastManager } from '@raystack/apsara-v1';
 import { useMutation } from '@connectrpc/connect-query';
 import {
   FrontierServiceQueries,
-  ListPoliciesRequestSchema,
-  DeletePolicyRequestSchema
+  RemoveProjectMemberRequestSchema
 } from '@raystack/proton/frontier';
 import { create } from '@bufbuild/protobuf';
-import { useQuery } from '@connectrpc/connect-query';
 
 export interface RemoveMemberPayload {
   memberId: string;
@@ -68,28 +66,19 @@ function RemoveMemberForm({
 }: RemoveMemberFormProps) {
   const [isLoading, setIsLoading] = useState(false);
 
-  const { data: policiesData } = useQuery(
-    FrontierServiceQueries.listPolicies,
-    create(ListPoliciesRequestSchema, {
-      projectId: payload.projectId,
-      userId: payload.memberId
-    }),
-    { enabled: !!payload.projectId && !!payload.memberId }
-  );
-
-  const policies = policiesData?.policies ?? [];
-
-  const { mutateAsync: deletePolicy } = useMutation(
-    FrontierServiceQueries.deletePolicy
+  const { mutateAsync: removeProjectMember } = useMutation(
+    FrontierServiceQueries.removeProjectMember
   );
 
   async function handleRemove() {
     setIsLoading(true);
     try {
-      await Promise.all(
-        policies.map(p =>
-          deletePolicy(create(DeletePolicyRequestSchema, { id: p.id || '' }))
-        )
+      await removeProjectMember(
+        create(RemoveProjectMemberRequestSchema, {
+          projectId: payload.projectId,
+          principalId: payload.memberId,
+          principalType: 'app/user'
+        })
       );
       toastManager.add({ title: 'Member removed', type: 'success' });
       refetch();

web/sdk/react/views-new/projects/project-details-view.tsx

@@ -24,20 +24,15 @@ import deleteIcon from '../../assets/delete.svg';
 import { toastManager } from '@raystack/apsara-v1';
 import {
   useQuery,
-  useMutation,
-  createConnectQueryKey,
-  useTransport
+  useMutation
 } from '@connectrpc/connect-query';
-import { useQueryClient } from '@tanstack/react-query';
 import {
   FrontierServiceQueries,
   ListProjectGroupsRequestSchema,
   ListProjectUsersRequestSchema,
   GetProjectRequestSchema,
   ListRolesRequestSchema,
-  CreatePolicyForProjectRequestSchema,
-  DeletePolicyRequestSchema,
-  ListPoliciesRequestSchema,
+  SetProjectMemberRoleRequestSchema,
   type Role as ProtoRole
 } from '@raystack/proton/frontier';
 import { create } from '@bufbuild/protobuf';
@@ -289,49 +284,19 @@ export function ProjectDetailsView({
     ]
   );
 
-  const queryClient = useQueryClient();
-  const transport = useTransport();
-
-  const { mutateAsync: deletePolicy } = useMutation(
-    FrontierServiceQueries.deletePolicy
-  );
-  const { mutateAsync: createPolicyForProject } = useMutation(
-    FrontierServiceQueries.createPolicyForProject
+  const { mutateAsync: setProjectMemberRole } = useMutation(
+    FrontierServiceQueries.setProjectMemberRole
   );
 
   const updateMemberRole = useCallback(
     async (memberId: string, isTeam: boolean, role: ProtoRole) => {
       try {
-        const principal = isTeam
-          ? `${PERMISSIONS.GroupNamespace}:${memberId}`
-          : `${PERMISSIONS.UserNamespace}:${memberId}`;
-
-        const input = create(ListPoliciesRequestSchema, {
-          projectId,
-          ...(isTeam ? { groupId: memberId } : { userId: memberId })
-        });
-
-        const policiesData = await queryClient.fetchQuery({
-          queryKey: createConnectQueryKey({
-            schema: FrontierServiceQueries.listPolicies,
-            transport,
-            input,
-            cardinality: 'finite'
-          })
-        });
-
-        const policies = (policiesData as { policies?: { id?: string }[] })?.policies ?? [];
-
-        await Promise.all(
-          policies.map(p =>
-            deletePolicy(create(DeletePolicyRequestSchema, { id: p.id || '' }))
-          )
-        );
-
-        await createPolicyForProject(
-          create(CreatePolicyForProjectRequestSchema, {
+        await setProjectMemberRole(
+          create(SetProjectMemberRoleRequestSchema, {
             projectId,
-            body: { roleId: role.id as string, principal }
+            principalId: memberId,
+            principalType: isTeam ? PERMISSIONS.GroupNamespace : PERMISSIONS.UserNamespace,
+            roleId: role.id as string
           })
         );
         refetchMembers();
@@ -350,7 +315,7 @@ export function ProjectDetailsView({
         });
       }
     },
-    [queryClient, transport, deletePolicy, createPolicyForProject, projectId, refetchMembers]
+    [setProjectMemberRole, projectId, refetchMembers]
   );
 
   const handleDeleteSuccess = useCallback(() => {