fix(sdk): avatar overlaping with members table header (#678)

* chore: update apsara version * fix: remove negative z-index from avatar
raystack · Jul 18, 2024 · 416dbbe · 416dbbe
1 parent 80533e6
commit 416dbbe
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 26 deletions.
diff --git a/sdks/js/packages/core/package.json b/sdks/js/packages/core/package.json
@@ -79,7 +79,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.1",
-    "@raystack/apsara": "^0.16.2",
+    "@raystack/apsara": "^0.17.0",
     "@tanstack/react-router": "0.0.1-beta.194",
     "axios": "^1.5.0",
     "class-variance-authority": "^0.7.0",

diff --git a/sdks/js/packages/core/react/components/organization/members/member.columns.tsx b/sdks/js/packages/core/react/components/organization/members/member.columns.tsx
@@ -24,21 +24,15 @@ import { Role } from '~/src/types';
 import { differenceWith, getInitials, isEqualById } from '~/utils';
 import styles from '../organization.module.css';
 
-export const getColumns: (
-  id: string,
-  memberRoles: Record<string, Role[]>,
-  roles: Role[],
-  canDeleteUser?: boolean,
-  refetch?: () => void
-) => ApsaraColumnDef<
-  V1Beta1User & V1Beta1Invitation & { invited?: boolean }
->[] = (
-  organizationId,
-  memberRoles = {},
-  roles = [],
+export const getColumns = (
+  organizationId: string,
+  memberRoles: Record<string, Role[]> = {},
+  roles: Role[] = [],
   canDeleteUser = false,
   refetch = () => null
-) => [
+): ApsaraColumnDef<
+  V1Beta1User & V1Beta1Invitation & { invited?: boolean }
+>[] => [
   {
     header: '',
     accessorKey: 'avatar',
@@ -55,13 +49,10 @@ export const getColumns: (
         <Avatar
           src={getValue()}
           fallback={getInitials(
-            row.original?.title ||
-              row.original?.email ||
-              // @ts-ignore
-              row.original?.user_id
+            row.original?.title || row.original?.email || row.original?.user_id
           )}
           // @ts-ignore
-          style={{ marginRight: 'var(--mr-12)', zIndex: -1 }}
+          style={{ marginRight: 'var(--mr-12)' }}
         />
       );
     }
@@ -176,16 +167,16 @@ const MembersActions = ({
         // @ts-ignore
         data: { policies = [] }
       } = await client?.frontierServiceListPolicies({
-        orgId: organizationId,
-        userId: member.id
+        org_id: organizationId,
+        user_id: member.id
       });
       const deletePromises = policies.map((p: V1Beta1Policy) =>
         client?.frontierServiceDeletePolicy(p.id as string)
       );
 
       await Promise.all(deletePromises);
       await client?.frontierServiceCreatePolicy({
-        roleId: role.id as string,
+        role_id: role.id as string,
         title: role.name as string,
         resource: resource,
         principal: principal
@@ -211,6 +202,7 @@ const MembersActions = ({
               <div
                 onClick={() => updateRole(role)}
                 className={styles.dropdownActionItem}
+                data-test-id={`update-role-${role?.name}-dropdown-item`}
               >
                 <UpdateIcon />
                 Make {role.title}
@@ -219,7 +211,11 @@ const MembersActions = ({
           ))}
 
           <DropdownMenu.Item style={{ padding: 0 }}>
-            <div onClick={deleteMember} className={styles.dropdownActionItem}>
+            <div
+              onClick={deleteMember}
+              className={styles.dropdownActionItem}
+              data-test-id="remove-member-dropdown-item"
+            >
               <TrashIcon />
               Remove
             </div>

diff --git a/sdks/js/pnpm-lock.yaml b/sdks/js/pnpm-lock.yaml