diff --git a/sdks/js/.changeset/metal-lemons-collect.md b/sdks/js/.changeset/metal-lemons-collect.md new file mode 100644 index 000000000..c8760d0d0 --- /dev/null +++ b/sdks/js/.changeset/metal-lemons-collect.md @@ -0,0 +1,5 @@ +--- +'@raystack/frontier': patch +--- + +minor ui fixes diff --git a/sdks/js/packages/core/package.json b/sdks/js/packages/core/package.json index 63290632a..f8c2d3520 100644 --- a/sdks/js/packages/core/package.json +++ b/sdks/js/packages/core/package.json @@ -68,7 +68,7 @@ }, "dependencies": { "@hookform/resolvers": "^3.1.1", - "@raystack/apsara": "0.10.9", + "@raystack/apsara": "0.11.1", "@tanstack/react-router": "0.0.1-beta.174", "axios": "^1.4.0", "class-variance-authority": "^0.7.0", diff --git a/sdks/js/packages/core/react/components/organization/domain/verify-domain.tsx b/sdks/js/packages/core/react/components/organization/domain/verify-domain.tsx index 1ab4d4504..c18609ea1 100644 --- a/sdks/js/packages/core/react/components/organization/domain/verify-domain.tsx +++ b/sdks/js/packages/core/react/components/organization/domain/verify-domain.tsx @@ -84,8 +84,8 @@ export const VerifyDomain = () => { - Before we can verify nasa.com, you'll need to create a TXT record in - your DNS configuration for this hostname. + Before we can verify {domain?.name}, you'll need to create a TXT + record in your DNS configuration for this hostname. { fetchOrganizationUser(); - }, [organization?.id, client, fetchOrganizationUser]); + }, [fetchOrganizationUser]); useEffect(() => { fetchOrganizationUser(); @@ -104,9 +104,11 @@ const MembersTable = ({ }: MembersTableType) => { let navigate = useNavigate({ from: '/members' }); - const tableStyle = users?.length - ? { width: '100%' } - : { width: '100%', height: '100%' }; + const tableStyle = useMemo( + () => + users?.length ? { width: '100%' } : { width: '100%', height: '100%' }, + [users?.length] + ); const columns = useMemo( () => getColumns(organizationId, isLoading), diff --git a/sdks/js/packages/core/react/components/organization/members/invite.tsx b/sdks/js/packages/core/react/components/organization/members/invite.tsx index 421bc7421..d5784dda6 100644 --- a/sdks/js/packages/core/react/components/organization/members/invite.tsx +++ b/sdks/js/packages/core/react/components/organization/members/invite.tsx @@ -10,7 +10,7 @@ import { } from '@raystack/apsara'; import { yupResolver } from '@hookform/resolvers/yup'; -import { useEffect, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { Controller, useForm } from 'react-hook-form'; import { useNavigate } from '@tanstack/react-router'; import { toast } from 'sonner'; @@ -18,15 +18,19 @@ import * as yup from 'yup'; import cross from '~/react/assets/cross.svg'; import { useFrontier } from '~/react/contexts/FrontierContext'; import { V1Beta1Group, V1Beta1Organization, V1Beta1Role } from '~/src'; +import Skeleton from 'react-loading-skeleton'; const inviteSchema = yup.object({ - type: yup.string(), - team: yup.string(), + type: yup.string().required(), + team: yup.string().required(), emails: yup.string().required() }); +type InviteSchemaType = yup.InferType; + export const InviteMember = () => { const { + watch, reset, control, handleSubmit, @@ -36,26 +40,28 @@ export const InviteMember = () => { }); const [teams, setTeams] = useState([]); const [roles, setRoles] = useState([]); - const [selectedRole, setRole] = useState(); - const [selectedTeam, setTeam] = useState(); + const [isLoading, setIsLoading] = useState(false); const navigate = useNavigate({ from: '/members/modal' }); const { client, activeOrganization: organization } = useFrontier(); - async function onSubmit({ emails }: any) { - const emailList = emails.split(',').map((e: string) => e.trim()); + async function onSubmit({ emails, type, team }: InviteSchemaType) { + const emailList = emails + .split(',') + .map(e => e.trim()) + .filter(str => str.length > 0); if (!organization?.id) return; if (!emailList.length) return; - if (!selectedRole) return; - if (!selectedTeam) return; + if (!type) return; + if (!team) return; try { await client?.frontierServiceCreateOrganizationInvitation( organization?.id, { userIds: emailList, - groupIds: [selectedTeam], - roleIds: [selectedRole] + groupIds: [team], + roleIds: [type] } ); toast.success('memebers added'); @@ -69,26 +75,47 @@ export const InviteMember = () => { } useEffect(() => { async function getInformation() { - if (!organization?.id) return; - - const { - // @ts-ignore - data: { roles: orgRoles } - } = await client?.frontierServiceListOrganizationRoles(organization.id); - const { - // @ts-ignore - data: { roles } - } = await client?.frontierServiceListRoles(); - const { - // @ts-ignore - data: { groups } - } = await client?.frontierServiceListOrganizationGroups(organization.id); - setRoles([...roles, ...orgRoles]); - setTeams(groups); + try { + setIsLoading(true); + + if (!organization?.id) return; + const { + // @ts-ignore + data: { roles: orgRoles } + } = await client?.frontierServiceListOrganizationRoles(organization.id); + const { + // @ts-ignore + data: { roles } + } = await client?.frontierServiceListRoles(); + const { + // @ts-ignore + data: { groups } + } = await client?.frontierServiceListOrganizationGroups( + organization.id + ); + setRoles([...roles, ...orgRoles]); + setTeams(groups); + } catch (err) { + console.error(err); + } finally { + setIsLoading(false); + } } getInformation(); }, [client, organization?.id]); + const values = watch(['emails', 'team', 'type']); + + const isDisabled = useMemo(() => { + const [emails, team, type] = values; + const emailList = + emails + ?.split(',') + .map((e: string) => e.trim()) + .filter(str => str.length > 0) || []; + return emailList.length <= 0 || !team || !type || isSubmitting; + }, [isSubmitting, values]); + return ( {/* @ts-ignore */} @@ -146,70 +173,75 @@ export const InviteMember = () => { - ( - - )} - control={control} - name="type" - /> - + {isLoading ? ( + + ) : ( + ( + + )} + control={control} + name="type" + /> + )} - {errors.emails && String(errors.emails?.message)} + {errors.type && String(errors.type?.message)} - ( - - )} - control={control} - name="team" - /> - + {isLoading ? ( + + ) : ( + ( + + )} + control={control} + name="team" + /> + )} - {errors.emails && String(errors.emails?.message)} + {errors.team && String(errors.team?.message)} - 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 index bc1597e9a..ffa9d56fb 100644 --- a/sdks/js/packages/core/react/components/organization/members/member.columns.tsx +++ b/sdks/js/packages/core/react/components/organization/members/member.columns.tsx @@ -30,7 +30,7 @@ export const getColumns: ( src={getValue()} fallback={getInitials(row.original?.title)} // @ts-ignore - style={{ marginRight: 'var(--mr-12)' }} + style={{ marginRight: 'var(--mr-12)', zIndex: -1 }} /> ); } diff --git a/sdks/js/pnpm-lock.yaml b/sdks/js/pnpm-lock.yaml index 9fdc51e93..544aebe8e 100644 --- a/sdks/js/pnpm-lock.yaml +++ b/sdks/js/pnpm-lock.yaml @@ -37,8 +37,8 @@ importers: specifier: ^3.1.1 version: 3.1.1(react-hook-form@7.45.2) '@raystack/apsara': - specifier: 0.10.9 - version: 0.10.9 + specifier: 0.11.1 + version: 0.11.1 '@tanstack/react-router': specifier: 0.0.1-beta.174 version: 0.0.1-beta.174(react-dom@18.2.0)(react@18.2.0) @@ -1006,8 +1006,8 @@ packages: react: 18.2.0 dev: true - /@raystack/apsara@0.10.9: - resolution: {integrity: sha512-06shMCSUFhteMylaAtaiUV+ogCR2/IvJqGTSdEN/JmTDP5kFlRFDdXnUohPrdRIbOQpIoQWbWaKsM/HY78tS2w==} + /@raystack/apsara@0.11.1: + resolution: {integrity: sha512-90zhdp3UWwDljMIHyWBH8HCKUe5YYrAZo5c/f3xpuACWUBFDnBdhLHzJlgw65iYtXu2QejDvg0FqRIJvjuhnBg==} engines: {node: '>=12.x.x'} dev: false