From d63e00c8a3667dd911cad4bda38be0efecf9db83 Mon Sep 17 00:00:00 2001 From: Rishabh Mishra Date: Tue, 23 Jul 2024 11:39:53 +0530 Subject: [PATCH] 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 --- .../components/organization/domain/index.tsx | 29 ++++++++------ .../organization/project/members/index.tsx | 37 ++++++++++++------ .../organization/project/project.tsx | 38 +++++++++---------- .../react/hooks/useOrganizationDomains.ts | 27 ++++--------- 4 files changed, 68 insertions(+), 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 index 4da7f15a7..77558d8c1 100644 --- 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() { - {/* @ts-ignore */} @@ -86,7 +86,6 @@ export default function Domain() { } const AllowedEmailDomains = () => { - let navigate = useNavigate({ from: '/domains' }); return ( @@ -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 ( navigate({ to: '/domains/modal' })} + data-test-id="frontier-sdk-add-domain-btn" > Add Domain 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 index a94abe773..7a2b25906 100644 --- 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,7 +105,16 @@ 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(() => { @@ -113,7 +122,7 @@ export const Members = ({ return members?.length || updatedTeams?.length ? [...updatedTeams, ...members] : []; - }, [isLoading, members, teams]); + }, [members, teams]); return ( @@ -125,7 +134,9 @@ export const Members = ({ parentStyle={{ height: 'calc(100vh - 212px)' }} style={tableStyle} > - + Add a member } @@ -329,7 +339,7 @@ const AddMemberDropdown = ({ ) : topTeams.length ? (
- {topTeams.map(team => { + {topTeams.map((team, i) => { const initals = getInitials(team?.title || team.name); return ( addTeam(team?.id || '')} className={styles.inviteDropdownItem} + data-test-id={`frontier-sdk-add-team-to-project-dropdown-item-${i}`} > ) : topUsers.length ? (
- {topUsers.map(user => { + {topUsers.map((user, i) => { const initals = getInitials(user?.title || user.email); return ( addMember(user?.id || '')} + data-test-id={`frontier-sdk-add-user-to-project-dropdown-item-${i}`} > {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 index 427f3be9f..75c0fa627 100644 --- 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" /> Projects diff --git a/sdks/js/packages/core/react/hooks/useOrganizationDomains.ts b/sdks/js/packages/core/react/hooks/useOrganizationDomains.ts index a7f7b2844..55994e5d6 100644 --- a/sdks/js/packages/core/react/hooks/useOrganizationDomains.ts +++ b/sdks/js/packages/core/react/hooks/useOrganizationDomains.ts @@ -1,8 +1,9 @@ -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([]); const [isDomainsLoading, setIsDomainsLoading] = useState(false); const { client, activeOrganization: organization } = useFrontier(); @@ -10,13 +11,11 @@ export const useOrganizationDomains = () => { 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 }; };