feat(admin-ui): migrate admin-ui users to connectRPC (#1212)

Author: rohanchkrabrty

ui/package.json

@@ -11,7 +11,7 @@
     "build:client": "node scripts/gen-swagger-client.mjs"
   },
   "dependencies": {
-    "@bufbuild/protobuf": "^2.6.2",
+    "@bufbuild/protobuf": "^2.9.0",
     "@connectrpc/connect": "^2.1.0",
     "@connectrpc/connect-query": "^2.1.1",
     "@connectrpc/connect-web": "^2.1.0",
@@ -20,7 +20,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@raystack/apsara": "^0.52.0",
     "@raystack/frontier": "^0.72.4",
-    "@raystack/proton": "^0.1.0-434b8aec0c95625a6633f4e890be311d3e0fefef",
+    "@raystack/proton": "0.1.0-80ce71da5211fde064d83731a80cee2dffbdf84b",
     "@stitches/react": "^1.2.8",
     "@tanstack/react-query": "^5.83.0",
     "@tanstack/react-query-devtools": "^5.90.2",
@@ -56,4 +56,4 @@
     "vite": "^4.5.9",
     "vite-plugin-svgr": "^4.3.0"
   }
-}
+}

ui/pnpm-lock.yaml

@@ -1,11 +1,10 @@
-import { Text, DropdownMenu } from "@raystack/apsara";
+import { Text, DropdownMenu, Skeleton } from "@raystack/apsara";
 import styles from "./side-panel.module.css";
 import { useCallback, useEffect, useState, useMemo } from "react";
-import Skeleton from "react-loading-skeleton";
 import { api } from "~/api";
 import {
   type SearchUserOrganizationsResponse_UserOrganization,
-  SearchOrganizationUsersResponse_OrganizationUserSchema
+  SearchOrganizationUsersResponse_OrganizationUserSchema,
 } from "@raystack/proton/frontier";
 import { create } from "@bufbuild/protobuf";
 import type { V1Beta1Role } from "~/api/frontier";
@@ -57,11 +56,11 @@ export const MembershipDropdown = ({
   }, [data?.orgId, fetchRoles]);
 
   const toggleAssignRoleDialog = () => {
-    setIsAssignRoleDialogOpen((value) => !value);
+    setIsAssignRoleDialogOpen(value => !value);
   };
 
   const toggleSuspendDialog = () => {
-    setIsSuspendDialogOpen((value) => !value);
+    setIsSuspendDialogOpen(value => !value);
   };
 
   const onRoleUpdate = () => {
@@ -75,17 +74,20 @@ export const MembershipDropdown = ({
   };
 
   const memoizedUser = useMemo(
-    () => create(SearchOrganizationUsersResponse_OrganizationUserSchema, {
-      ...user,
-      roleNames: data?.roleNames || [],
-      roleTitles: data?.roleTitles || [],
-      roleIds: data?.roleIds || [],
-    }),
-    [user, data?.roleNames, data?.roleTitles, data?.roleIds]
+    () =>
+      create(
+        SearchOrganizationUsersResponse_OrganizationUserSchema,
+        Object.assign(user ?? {}, {
+          roleNames: data?.roleNames || [],
+          roleTitles: data?.roleTitles || [],
+          roleIds: data?.roleIds || [],
+        }),
+      ),
+    [user, data?.roleNames, data?.roleTitles, data?.roleIds],
   );
 
   if (isLoading) {
-    return <Skeleton height={30} />;
+    return <Skeleton height={32} />;
   }
 
   return (
@@ -115,8 +117,7 @@ export const MembershipDropdown = ({
         <DropdownMenu.Content>
           <DropdownMenu.Item
             onClick={toggleAssignRoleDialog}
-            data-test-id="admin-ui-user-details-assign-role"
-          >
+            data-test-id="admin-ui-user-details-assign-role">
             Assign role...
           </DropdownMenu.Item>
           {/* TODO: Removed for now */}

ui/src/pages/users/details/audit-log/audit-log.module.css

@@ -7,7 +7,6 @@ import {
   getAvatarColor,
 } from "@raystack/apsara";
 import { NavLink } from "react-router-dom";
-import { ChevronRightIcon } from "@radix-ui/react-icons";
 import { SidebarIcon } from "@raystack/apsara/icons";
 import UserIcon from "~/assets/icons/users.svg?react";
 import styles from "./navbar.module.css";
@@ -29,7 +28,10 @@ export const UserDetailsNavbar = ({
     <nav className={styles.navbar}>
       <Flex gap="medium" align="center">
         <Breadcrumb size="small">
-          <Breadcrumb.Item href="/users" leadingIcon={<UserIcon />}>
+          <Breadcrumb.Item
+            href="/users"
+            leadingIcon={<UserIcon />}
+            data-test-id="admin-ui-user-details-breadcrumb-users">
             Users
           </Breadcrumb.Item>
           <Breadcrumb.Separator />
@@ -42,7 +44,8 @@ export const UserDetailsNavbar = ({
                 fallback={getUserName(user)?.[0]}
                 size={1}
               />
-            }>
+            }
+            data-test-id="admin-ui-user-details-breadcrumb-user">
             {getUserName(user)}
           </Breadcrumb.Item>
         </Breadcrumb>

ui/src/pages/users/details/audit-log/audit-log.tsx

@@ -1,9 +1,9 @@
 import { Flex, List, Text, CopyButton, Tooltip } from "@raystack/apsara";
-import dayjs from "dayjs";
 import { CalendarIcon } from "@radix-ui/react-icons";
 import styles from "./side-panel.module.css";
 import { UserState, USER_STATES } from "../../util";
 import { useUser } from "../user-context";
+import { timestampToDayjs } from "~/utils/connect-timestamp";
 
 export const SidePanelDetails = () => {
   const { user } = useUser();
@@ -33,7 +33,9 @@ export const SidePanelDetails = () => {
         <List.Value>
           <Flex gap={3}>
             <CalendarIcon />
-            <Text>{dayjs(user?.created_at).format("DD MMM YYYY")}</Text>
+            <Text>
+              {timestampToDayjs(user?.createdAt)?.format("DD MMM YYYY")}
+            </Text>
           </Flex>
         </List.Value>
       </List.Item>

ui/src/pages/users/details/audit-log/index.ts

@@ -1,4 +1,3 @@
-import { useCallback } from "react";
 import { Avatar, getAvatarColor, SidePanel, Text } from "@raystack/apsara";
 import { SidePanelDetails } from "./side-panel-details";
 import { SidePanelMembership } from "./side-panel-membership";
@@ -34,8 +33,7 @@ export const UserDetailsSidePanel = () => {
   return (
     <SidePanel
       data-test-id="admin-ui-user-details-sidepanel"
-      className={styles["side-panel"]}
-    >
+      className={styles["side-panel"]}>
       <SidePanel.Header
         title={getUserName(user)}
         icon={