raystack · pyadav · Sep 14, 2023 · Sep 14, 2023 · Sep 14, 2023 · Sep 14, 2023
diff --git a/sdks/js/.changeset/metal-lemons-collect.md 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
@@ -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
@@ -84,8 +84,8 @@ export const VerifyDomain = () => {
 
         <Flex direction="column" gap="medium" style={{ padding: '24px 32px' }}>
           <Text size={2}>
-            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.
           </Text>
           <Flex
             style={{

diff --git a/sdks/js/packages/core/react/components/organization/members/index.tsx b/sdks/js/packages/core/react/components/organization/members/index.tsx
@@ -47,7 +47,7 @@ export default function WorkspaceMembers() {
 
   useEffect(() => {
     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
@@ -10,23 +10,27 @@ 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';
 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<typeof inviteSchema>;
+
 export const InviteMember = () => {
   const {
+    watch,
     reset,
     control,
     handleSubmit,
@@ -36,26 +40,28 @@ export const InviteMember = () => {
   });
   const [teams, setTeams] = useState<V1Beta1Group[]>([]);
   const [roles, setRoles] = useState<V1Beta1Role[]>([]);
-  const [selectedRole, setRole] = useState<string>();
-  const [selectedTeam, setTeam] = useState<string>();
+  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 (
     <Dialog open={true}>
       {/* @ts-ignore */}
@@ -146,70 +173,75 @@ export const InviteMember = () => {
               </Text>
             </InputField>
             <InputField label="Invite as">
-              <Controller
-                render={({ field }) => (
-                  <Select
-                    {...field}
-                    onValueChange={(value: string) => setRole(value)}
-                  >
-                    <Select.Trigger className="w-[180px]">
-                      <Select.Value placeholder="Select a role" />
-                    </Select.Trigger>
-                    <Select.Content style={{ width: '100% !important' }}>
-                      <Select.Group>
-                        {!roles.length && (
-                          <Select.Label>No roles available</Select.Label>
-                        )}
-                        {roles.map(role => (
-                          <Select.Item value={role.id} key={role.id}>
-                            {role.title || role.name}
-                          </Select.Item>
-                        ))}
-                      </Select.Group>
-                    </Select.Content>
-                  </Select>
-                )}
-                control={control}
-                name="type"
-              />
-
+              {isLoading ? (
+                <Skeleton height={'25px'} />
+              ) : (
+                <Controller
+                  render={({ field }) => (
+                    <Select {...field} onValueChange={field.onChange}>
+                      <Select.Trigger className="w-[180px]">
+                        <Select.Value placeholder="Select a role" />
+                      </Select.Trigger>
+                      <Select.Content style={{ width: '100% !important' }}>
+                        <Select.Group>
+                          {!roles.length && (
+                            <Select.Label>No roles available</Select.Label>
+                          )}
+                          {roles.map(role => (
+                            <Select.Item value={role.id} key={role.id}>
+                              {role.title || role.name}
+                            </Select.Item>
+                          ))}
+                        </Select.Group>
+                      </Select.Content>
+                    </Select>
+                  )}
+                  control={control}
+                  name="type"
+                />
+              )}
               <Text size={1} style={{ color: 'var(--foreground-danger)' }}>
-                {errors.emails && String(errors.emails?.message)}
+                {errors.type && String(errors.type?.message)}
               </Text>
             </InputField>
 
             <InputField label="Add to team">
-              <Controller
-                render={({ field }) => (
-                  <Select
-                    {...field}
-                    onValueChange={(value: string) => setTeam(value)}
-                  >
-                    <Select.Trigger className="w-[180px]">
-                      <Select.Value placeholder="Select a team" />
-                    </Select.Trigger>
-                    <Select.Content style={{ width: '100% !important' }}>
-                      <Select.Group>
-                        {teams.map(t => (
-                          <Select.Item value={t.id} key={t.id}>
-                            {t.title}
-                          </Select.Item>
-                        ))}
-                      </Select.Group>
-                    </Select.Content>
-                  </Select>
-                )}
-                control={control}
-                name="team"
-              />
-
+              {isLoading ? (
+                <Skeleton height={'25px'} />
+              ) : (
+                <Controller
+                  render={({ field }) => (
+                    <Select {...field} onValueChange={field.onChange}>
+                      <Select.Trigger className="w-[180px]">
+                        <Select.Value placeholder="Select a team" />
+                      </Select.Trigger>
+                      <Select.Content style={{ width: '100% !important' }}>
+                        <Select.Group>
+                          {teams.map(t => (
+                            <Select.Item value={t.id} key={t.id}>
+                              {t.title}
+                            </Select.Item>
+                          ))}
+                        </Select.Group>
+                      </Select.Content>
+                    </Select>
+                  )}
+                  control={control}
+                  name="team"
+                />
+              )}
               <Text size={1} style={{ color: 'var(--foreground-danger)' }}>
-                {errors.emails && String(errors.emails?.message)}
+                {errors.team && String(errors.team?.message)}
               </Text>
             </InputField>
             <Separator />
             <Flex justify="end">
-              <Button variant="primary" size="medium" type="submit">
+              <Button
+                variant="primary"
+                size="medium"
+                type="submit"
+                disabled={isDisabled}
+              >
                 {isSubmitting ? 'sending...' : 'Send invite'}
               </Button>
             </Flex>

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
@@ -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