fix(sdk): domain and project members table loading issue (#682)

* fix: cached data in domains table * fix: lint issues * fix: add isLoading dependency for table columns * chore: add TODO to remove isLoading
raystack · Jul 23, 2024 · d63e00c · d63e00c
1 parent c5812a6
commit d63e00c
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 63 deletions.
diff --git a/sdks/js/packages/core/react/components/organization/domain/index.tsx b/sdks/js/packages/core/react/components/organization/domain/index.tsx
@@ -23,7 +23,7 @@ import { DEFAULT_DATE_FORMAT } from '~/react/utils/constants';
 
 export default function Domain() {
   const { isFetching, domains, refetch } = useOrganizationDomains();
-  const { activeOrganization: organization } = useFrontier();
+  const { activeOrganization: organization, config } = useFrontier();
 
   const routerState = useRouterState();
 
@@ -72,11 +72,11 @@ export default function Domain() {
       <Flex direction="column" gap="large" style={styles.container}>
         <Flex direction="column" style={{ gap: '24px' }}>
           <AllowedEmailDomains />
-          {/* @ts-ignore */}
           <Domains
             domains={domains}
             isLoading={isLoading}
             canCreateDomain={canCreateDomain}
+            dateFormat={config?.dateFormat}
           />
         </Flex>
       </Flex>
@@ -86,7 +86,6 @@ export default function Domain() {
 }
 
 const AllowedEmailDomains = () => {
-  let navigate = useNavigate({ from: '/domains' });
   return (
     <Flex direction="row" justify="between" align="center">
       <Flex direction="column" gap="small">
@@ -101,32 +100,37 @@ const AllowedEmailDomains = () => {
 };
 
 const Domains = ({
-  domains,
+  domains = [],
   isLoading,
-  canCreateDomain
+  canCreateDomain,
+  dateFormat
 }: {
   domains: V1Beta1Domain[];
   isLoading?: boolean;
   canCreateDomain?: boolean;
+  dateFormat?: string;
 }) => {
   let navigate = useNavigate({ from: '/domains' });
-  const { config } = useFrontier();
-  const tableStyle = domains?.length
-    ? { width: '100%' }
-    : { width: '100%', height: '100%' };
+  const tableStyle = useMemo(
+    () =>
+      domains?.length ? { width: '100%' } : { width: '100%', height: '100%' },
+    [domains?.length]
+  );
 
   const columns = useMemo(
     () =>
       getColumns({
         canCreateDomain,
-        dateFormat: config?.dateFormat || DEFAULT_DATE_FORMAT
+        dateFormat: dateFormat || DEFAULT_DATE_FORMAT
       }),
-    [canCreateDomain, config?.dateFormat]
+    // TODO: remove isLoading after fixing the cache issue of column data in apsara table
+    [canCreateDomain, dateFormat, isLoading]
   );
+
   return (
     <Flex direction="row">
       <DataTable
-        data={domains ?? []}
+        data={domains}
         isLoading={isLoading}
         columns={columns}
         emptyState={noDataChildren}
@@ -156,6 +160,7 @@ const Domains = ({
                   disabled={!canCreateDomain}
                   style={{ width: 'fit-content' }}
                   onClick={() => navigate({ to: '/domains/modal' })}
+                  data-test-id="frontier-sdk-add-domain-btn"
                 >
                   Add Domain
                 </Button>

diff --git a/sdks/js/packages/core/react/components/organization/project/members/index.tsx b/sdks/js/packages/core/react/components/organization/project/members/index.tsx
@@ -105,15 +105,24 @@ export const Members = ({
         projectId,
         refetch
       ),
-    [memberRoles, groupRoles, roles, canUpdateProject, projectId, refetch]
+    [
+      memberRoles,
+      groupRoles,
+      roles,
+      canUpdateProject,
+      projectId,
+      refetch,
+      // TODO: remove isLoading after fixing the cache issue of column data in apsara table
+      isLoading
+    ]
   );
 
   const updatedUsers = useMemo(() => {
     const updatedTeams = teams.map(t => ({ ...t, isTeam: true }));
     return members?.length || updatedTeams?.length
       ? [...updatedTeams, ...members]
       : [];
-  }, [isLoading, members, teams]);
+  }, [members, teams]);
 
   return (
     <Flex direction="column" style={{ paddingTop: '32px' }}>
@@ -125,7 +134,9 @@ export const Members = ({
         parentStyle={{ height: 'calc(100vh - 212px)' }}
         style={tableStyle}
       >
-        <DataTable.Toolbar style={{ padding: 0, border: 0 }}>
+        <DataTable.Toolbar
+          style={{ padding: 0, border: 0, marginBottom: 'var(--pd-16)' }}
+        >
           <Flex justify="between" gap="small">
             <Flex style={{ maxWidth: '360px', width: '100%' }}>
               <DataTable.GloabalSearch
@@ -186,12 +197,10 @@ const AddMemberDropdown = ({
       if (!organization?.id) return;
       try {
         setIsOrgMembersLoading(true);
-        const {
-          // @ts-ignore
-          data: { users }
-        } = await client?.frontierServiceListOrganizationUsers(
+        const resp = await client?.frontierServiceListOrganizationUsers(
           organization?.id
         );
+        const users = resp?.data?.users || [];
         setOrgMembers(users);
       } catch ({ error }: any) {
         toast.error('Something went wrong', {
@@ -251,7 +260,7 @@ const AddMemberDropdown = ({
         const principal = `${PERMISSIONS.UserNamespace}:${userId}`;
 
         const policy: V1Beta1PolicyRequestBody = {
-          roleId: PERMISSIONS.RoleProjectViewer,
+          role_id: PERMISSIONS.RoleProjectViewer,
           resource,
           principal
         };
@@ -278,7 +287,7 @@ const AddMemberDropdown = ({
         const principal = `${PERMISSIONS.GroupNamespace}:${teamId}`;
 
         const policy: V1Beta1PolicyRequestBody = {
-          roleId: PERMISSIONS.RoleProjectViewer,
+          role_id: PERMISSIONS.RoleProjectViewer,
           resource,
           principal
         };
@@ -307,13 +316,14 @@ const AddMemberDropdown = ({
         <Button
           variant="primary"
           style={{ width: 'fit-content', display: 'flex' }}
+          data-test-id="frontier-sdk-add-project-member-btn"
         >
           Add a member
         </Button>
       </Popover.Trigger>
       <Popover.Content align="end" style={{ padding: 0, minWidth: '300px' }}>
         <TextField
-          // @ts-ignore
+          data-test-id="frontier-sdk-add-project-member-textfield"
           leading={
             <MagnifyingGlassIcon style={{ color: 'var(--foreground-base)' }} />
           }
@@ -329,14 +339,15 @@ const AddMemberDropdown = ({
             <Skeleton height={'32px'} />
           ) : topTeams.length ? (
             <div style={{ padding: 'var(--pd-4)', minHeight: '246px' }}>
-              {topTeams.map(team => {
+              {topTeams.map((team, i) => {
                 const initals = getInitials(team?.title || team.name);
                 return (
                   <Flex
                     gap="small"
                     key={team.id}
                     onClick={() => addTeam(team?.id || '')}
                     className={styles.inviteDropdownItem}
+                    data-test-id={`frontier-sdk-add-team-to-project-dropdown-item-${i}`}
                   >
                     <Avatar
                       fallback={initals}
@@ -364,14 +375,15 @@ const AddMemberDropdown = ({
           <Skeleton height={'32px'} />
         ) : topUsers.length ? (
           <div style={{ padding: 'var(--pd-4)', minHeight: '246px' }}>
-            {topUsers.map(user => {
+            {topUsers.map((user, i) => {
               const initals = getInitials(user?.title || user.email);
               return (
                 <Flex
                   gap="small"
                   key={user.id}
                   className={styles.inviteDropdownItem}
                   onClick={() => addMember(user?.id || '')}
+                  data-test-id={`frontier-sdk-add-user-to-project-dropdown-item-${i}`}
                 >
                   <Avatar
                     src={user?.avatar}
@@ -403,6 +415,7 @@ const AddMemberDropdown = ({
             onClick={toggleShowTeam}
             gap="small"
             className={styles.inviteDropdownItem}
+            data-test-id={`frontier-sdk-add-project-member-toggle`}
           >
             {showTeam ? (
               <>

diff --git a/sdks/js/packages/core/react/components/organization/project/project.tsx b/sdks/js/packages/core/react/components/organization/project/project.tsx
@@ -46,12 +46,11 @@ export const ProjectPage = () => {
     if (!organization?.id || !projectId || isDeleteRoute) return;
     try {
       setIsTeamsLoading(true);
-      const {
-        // @ts-ignore
-        data: { groups = [], role_pairs }
-      } = await client?.frontierServiceListProjectGroups(projectId, {
-        withRoles: true
+      const resp = await client?.frontierServiceListProjectGroups(projectId, {
+        with_roles: true
       });
+      const groups = resp?.data?.groups || [];
+      const role_pairs = resp?.data?.role_pairs || [];
       setTeams(groups);
       setGroupRoles(
         role_pairs.reduce((previous: any, gr: any) => {
@@ -71,13 +70,11 @@ export const ProjectPage = () => {
     if (!organization?.id || !projectId || isDeleteRoute) return;
     try {
       setIsMembersLoading(true);
-      const {
-        // @ts-ignore
-        data: { users, role_pairs }
-      } = await client?.frontierServiceListProjectUsers(projectId, {
-        withRoles: true
+      const resp = await client?.frontierServiceListProjectUsers(projectId, {
+        with_roles: true
       });
-
+      const users = resp?.data?.users || [];
+      const role_pairs = resp?.data?.role_pairs || [];
       setMembers(users);
       setMemberRoles(
         role_pairs.reduce((previous: any, mr: any) => {
@@ -97,10 +94,8 @@ export const ProjectPage = () => {
     if (!organization?.id || !projectId || isDeleteRoute) return;
     try {
       setIsProjectLoading(true);
-      const {
-        // @ts-ignore
-        data: { project }
-      } = await client?.frontierServiceGetProject(projectId);
+      const resp = await client?.frontierServiceGetProject(projectId);
+      const project = resp?.data?.project;
       setProject(project);
     } catch (error: any) {
       toast.error('Something went wrong', {
@@ -115,13 +110,11 @@ export const ProjectPage = () => {
     if (!organization?.id || !projectId || isDeleteRoute) return;
     try {
       setIsProjectRoleLoading(true);
-      const {
-        // @ts-ignore
-        data: { roles }
-      } = await client?.frontierServiceListRoles({
+      const resp = await client?.frontierServiceListRoles({
         state: 'enabled',
         scopes: [PERMISSIONS.ProjectNamespace]
       });
+      const roles = resp?.data?.roles || [];
       setRoles(roles);
     } catch (error: any) {
       toast.error('Something went wrong', {
@@ -139,7 +132,11 @@ export const ProjectPage = () => {
     getProjectRoles();
   }, [getProjectDetails, getProjectMembers, getProjectTeams, getProjectRoles]);
 
-  const isLoading = isProjectLoading || isTeamsLoading || isMembersLoading;
+  const isLoading =
+    isProjectLoading ||
+    isTeamsLoading ||
+    isMembersLoading ||
+    isProjectRoleLoading;
 
   const refetchTeamAndMembers = useCallback(() => {
     getProjectMembers();
@@ -155,6 +152,7 @@ export const ProjectPage = () => {
           // @ts-ignore
           src={backIcon}
           onClick={() => navigate({ to: '/projects' })}
+          data-test-id="frontier-sdk-projects-page-back-link"
         />
         <Text size={6}>Projects</Text>
       </Flex>

diff --git a/sdks/js/packages/core/react/hooks/useOrganizationDomains.ts b/sdks/js/packages/core/react/hooks/useOrganizationDomains.ts
@@ -1,22 +1,21 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useFrontier } from '../contexts/FrontierContext';
+import { V1Beta1Domain } from '~/src';
 
 export const useOrganizationDomains = () => {
-  const [domains, setDomains] = useState([]);
+  const [domains, setDomains] = useState<V1Beta1Domain[]>([]);
   const [isDomainsLoading, setIsDomainsLoading] = useState(false);
   const { client, activeOrganization: organization } = useFrontier();
 
   const getDomains = useCallback(async () => {
     try {
       setIsDomainsLoading(true);
       if (!organization?.id) return;
-      const {
-        // @ts-ignore
-        data: { domains = [] }
-      } = await client?.frontierServiceListOrganizationDomains(
+      const resp = await client?.frontierServiceListOrganizationDomains(
         organization?.id
       );
-      setDomains(domains);
+      const data = resp?.data?.domains || [];
+      setDomains(data);
     } catch (err) {
       console.error(err);
     } finally {
@@ -26,21 +25,11 @@ export const useOrganizationDomains = () => {
 
   useEffect(() => {
     getDomains();
-  }, [client, getDomains, organization?.id]);
-
-  const updatedDomains = useMemo(
-    () =>
-      isDomainsLoading
-        ? ([{ id: 1 }, { id: 2 }, { id: 3 }] as any)
-        : domains.length
-        ? domains
-        : [],
-    [isDomainsLoading, domains]
-  );
+  }, [getDomains]);
 
   return {
     isFetching: isDomainsLoading,
-    domains: updatedDomains,
+    domains: domains,
     refetch: getDomains
   };
 };