feat: migrate remaining admin UI components to ConnectRPC (#1285)

Author: rohilsurana

ui/src/api/frontier.ts

@@ -10,16 +10,26 @@ import {
 import { useCallback } from "react";
 import type {
   SearchOrganizationUsersResponse_OrganizationUser,
+  Role,
+  Policy,
 } from "@raystack/proton/frontier";
-import type { V1Beta1Role } from "~/api/frontier";
-import { api } from "~/api";
+import {
+  FrontierService,
+  FrontierServiceQueries,
+  ListPoliciesRequestSchema,
+  DeletePolicyRequestSchema,
+  CreatePolicyRequestSchema,
+} from "@raystack/proton/frontier";
+import { create } from "@bufbuild/protobuf";
+import { useMutation, useTransport } from "@connectrpc/connect-query";
+import { createClient } from "@connectrpc/connect";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 interface AssignRoleProps {
   organizationId: string;
-  roles: V1Beta1Role[];
+  roles: Role[];
   user?: SearchOrganizationUsersResponse_OrganizationUser;
   onRoleUpdate: () => void;
   onClose: () => void;
@@ -40,6 +50,8 @@ export const AssignRole = ({
   onRoleUpdate,
   onClose,
 }: AssignRoleProps) => {
+  const transport = useTransport();
+
   const {
     handleSubmit,
     watch,
@@ -52,6 +64,14 @@ export const AssignRole = ({
     resolver: zodResolver(formSchema),
   });
 
+  const { mutateAsync: deletePolicy } = useMutation(
+    FrontierServiceQueries.deletePolicy,
+  );
+
+  const { mutateAsync: createPolicy } = useMutation(
+    FrontierServiceQueries.createPolicy,
+  );
+
   const roleIds = watch("roleIds");
 
   function onCheckedChange(value: boolean | string, roleId?: string) {
@@ -77,18 +97,23 @@ export const AssignRole = ({
 
   const onSubmit = async (data: FormData) => {
     try {
-      const policiesResp = await api?.frontierServiceListPolicies({
-        org_id: organizationId,
-        user_id: user?.id,
-      });
-      const policies = policiesResp?.data?.policies || [];
+      const client = createClient(FrontierService, transport);
+      const policiesResp = await client.listPolicies(
+        create(ListPoliciesRequestSchema, {
+          orgId: organizationId,
+          userId: user?.id,
+        }),
+      );
+      const policies = policiesResp.policies || [];
 
       const removedRolesPolicies = policies.filter(
-        (policy) => !(policy.role_id && data.roleIds.has(policy.role_id)),
+        (policy: Policy) => !(policy.roleId && data.roleIds.has(policy.roleId)),
       );
       await Promise.all(
-        removedRolesPolicies.map((policy) =>
-          api?.frontierServiceDeletePolicy(policy.id as string),
+        removedRolesPolicies.map((policy: Policy) =>
+          deletePolicy(
+            create(DeletePolicyRequestSchema, { id: policy.id || "" }),
+          ),
         ),
       );
 
@@ -97,12 +122,16 @@ export const AssignRole = ({
 
       const assignedRolesArr = Array.from(data.roleIds);
       await Promise.all(
-        assignedRolesArr.map((role_id) =>
-          api?.frontierServiceCreatePolicy({
-            role_id,
-            resource: resource,
-            principal: principal,
-          }),
+        assignedRolesArr.map((roleId) =>
+          createPolicy(
+            create(CreatePolicyRequestSchema, {
+              body: {
+                roleId,
+                resource,
+                principal,
+              },
+            }),
+          ),
         ),
       );
 
@@ -112,6 +141,7 @@ export const AssignRole = ({
 
       toast.success("Role assigned successfully");
     } catch (error) {
+      toast.error("Failed to assign role");
       console.error(error);
     }
   };

ui/src/api/index.ts

@@ -1,5 +1,5 @@
-import { V1Beta1Role } from "@raystack/frontier";
+import type { Role } from "@raystack/proton/frontier";
 
 export type RoleDetailsTypes = {
-  role: V1Beta1Role;
+  role: Role;
 };

ui/src/components/assign-role.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useState } from "react";
 import type { DataTableQuery } from "@raystack/apsara";
 import type {
-  V1Beta1RQLQueryPaginationResponse,
-  V1Beta1RQLQueryGroupResponse,
-} from "~/api/frontier";
+  RQLQueryGroupResponse,
+  RQLQueryPaginationResponse
+} from "@raystack/proton/frontier"
 import { useDebounceCallback } from "usehooks-ts";
 
 export interface GroupCountMap {
@@ -17,7 +17,7 @@ interface UseRQLResponse<T> {
   query: DataTableQuery;
   setQuery: (query: DataTableQuery) => void;
   fetchData: (apiQuery?: DataTableQuery) => Promise<void>;
-  group?: V1Beta1RQLQueryGroupResponse;
+  group?: RQLQueryGroupResponse;
   hasMore: boolean;
   onTableQueryChange: (query: DataTableQuery) => void;
   groupCountMap: GroupCountMap;
@@ -78,13 +78,13 @@ export const useRQL = <T extends unknown>({
 
         const pagination = response[
           "pagination"
-        ] as V1Beta1RQLQueryPaginationResponse;
+        ] as RQLQueryPaginationResponse;
         if (pagination) {
           setNextOffset(pagination?.offset || 0);
         }
         setHasMore(items.length !== 0 && items.length === limit);
 
-        const group = response.group as V1Beta1RQLQueryGroupResponse;
+        const group = response.group as RQLQueryGroupResponse;
         // Handle group counts
         if (group?.data && group.name) {
           const groupCount = group.data.reduce(

ui/src/containers/roles.list/types.tsx

@@ -9,7 +9,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { AUDIT_LOG_QUERY_KEY } from "../util";
 import { RQLExportRequest } from "@raystack/proton/frontier";
 
-const adminClient = clients.admin({ useBinary: false });
+const adminClient = clients.admin({ useBinary: true });
 
 interface NavbarProps {
   searchQuery?: string;

ui/src/containers/users.create/index.tsx

@@ -1,9 +1,12 @@
-import { useState } from "react";
 import type { SearchOrganizationUsersResponse_OrganizationUser } from "@raystack/proton/frontier";
-
+import {
+  FrontierServiceQueries,
+  RemoveOrganizationUserRequestSchema,
+} from "@raystack/proton/frontier";
+import { create } from "@bufbuild/protobuf";
+import { useMutation } from "@connectrpc/connect-query";
 import { Button, Dialog, Flex, Text, toast } from "@raystack/apsara";
-import { api } from "~/api";
-import { AxiosError } from "axios";
+import { ConnectError } from "@connectrpc/connect";
 
 interface RemoveMemberProps {
   organizationId: string;
@@ -18,29 +21,30 @@ export const RemoveMember = ({
   onRemove,
   onClose,
 }: RemoveMemberProps) => {
-  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { mutateAsync: removeOrganizationUser, isPending } = useMutation(
+    FrontierServiceQueries.removeOrganizationUser,
+  );
 
   async function onSubmit() {
     try {
       if (!user) return;
-      setIsSubmitting(true);
-      await api?.frontierServiceRemoveOrganizationUser(
-        organizationId,
-        user?.id || "",
+      await removeOrganizationUser(
+        create(RemoveOrganizationUserRequestSchema, {
+          id: organizationId,
+          userId: user?.id || "",
+        }),
       );
       if (onRemove) {
         onRemove(user);
       }
       toast.success("Member removed successfully");
     } catch (error) {
       const message =
-        error instanceof AxiosError
-          ? error.response?.data?.message
+        error instanceof ConnectError
+          ? error.message
           : "Unknown error";
       toast.error(`Failed to remove member: ${message}`);
       console.error(error);
-    } finally {
-      setIsSubmitting(false);
     }
   }
 
@@ -78,7 +82,7 @@ export const RemoveMember = ({
             type="submit"
             data-test-id="remove-member-submit-button"
             color="danger"
-            loading={isSubmitting}
+            loading={isPending}
             loaderText="Removing..."
             onClick={onSubmit}
           >

ui/src/hooks/useRQL.tsx

@@ -24,7 +24,7 @@ import { RenameProjectDialog } from "./rename-project";
 import { useState } from "react";
 import type React from "react";
 import Skeleton from "react-loading-skeleton";
-import { useAddProjectMembers } from "./useAddProjectMembers";
+import { useAddProjectMembers } from "./use-add-project-members";
 
 const DropdownLoader = () => {
   return (

ui/src/pages/audit-logs/list/navbar.tsx

@@ -106,6 +106,7 @@ export function OrganizationProjectssPage() {
     isFetchingNextPage,
     fetchNextPage,
     hasNextPage,
+    refetch: refetchOrgProjects,
     isError,
   } = useInfiniteQuery(
     AdminServiceQueries.searchOrganizationProjects,
@@ -139,15 +140,8 @@ export function OrganizationProjectssPage() {
   function handleProjectUpdate(
     project: SearchOrganizationProjectsResponse_OrganizationProject,
   ) {
-    // Invalidate and refetch the query instead of manually updating
-    queryClient.invalidateQueries({
-      queryKey: createConnectQueryKey({
-        schema: AdminServiceQueries.searchOrganizationProjects,
-        transport,
-        input: {},
-        cardinality: "infinite",
-      }),
-    });
+    // Refetch the query instead of manually updating
+    refetchOrgProjects();
   }
 
   useEffect(() => {
@@ -168,6 +162,7 @@ export function OrganizationProjectssPage() {
   }
 
   function handleMemberDialogClose() {
+    refetchOrgProjects();
     setMemberDialogConfig({
       projectId: "",
       open: false,