Add spin icon when loading.

Use another alert modal. Generate errMsg in insomniaFetch.
Kong · Sep 23, 2024 · e77488e · e77488e
1 parent 74d63fa
commit e77488e
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 26 deletions.
diff --git a/packages/insomnia/src/ui/components/modals/invite-modal/invite-modal.tsx b/packages/insomnia/src/ui/components/modals/invite-modal/invite-modal.tsx
@@ -7,6 +7,7 @@ import defaultAvatarImg from '../../../../ui/images/default-avatar.svg';
 import { invariant } from '../../../../utils/invariant';
 import { SegmentEvent } from '../../../analytics';
 import { insomniaFetch } from '../../../insomniaFetch';
+import { Icon } from '../../icon';
 import { InviteForm } from './organization-invite-form';
 import { OrganizationMemberRolesSelector, type Role, SELECTOR_TYPE } from './organization-member-roles-selector';
 
@@ -123,14 +124,16 @@ const InviteModal: FC<{
                 />
               </Group>
             </div>
-            {membersInCurrentPage.length === 0 ? (
-              <p className='text-center'>
-                {queryStringRef.current
-                  ? `No member found for the search "${queryStringRef.current}"`
-                  : 'No member'
-                }
-              </p>
-            ) : (
+            {loading ?
+              (<Icon icon="spinner" className="text-[--color-font] block animate-spin m-auto" />) :
+              (membersInCurrentPage.length === 0 ? (
+                <p className='text-center'>
+                  {queryStringRef.current
+                    ? `No member found for the search "${queryStringRef.current}"`
+                    : 'No member'
+                  }
+                </p>
+              ) : (
                 <ListBox
                   aria-label="Invitation list"
                   items={membersInCurrentPage}
@@ -204,7 +207,8 @@ const InviteModal: FC<{
                     ));
                   }}
                 </ListBox>
-            )}
+              ))
+            }
             {(hasPrevPage || hasNextPage) && (
               <div className='flex justify-between mt-[24px] leading-[19px]'>
                 <Button

diff --git a/packages/insomnia/src/ui/components/modals/invite-modal/organization-invite-form.tsx b/packages/insomnia/src/ui/components/modals/invite-modal/organization-invite-form.tsx
@@ -453,18 +453,11 @@ async function inviteUserToOrganization(
   }).then(
     () => inviteeEmail,
     async error => {
-      if (error instanceof ResponseFailError && error.response.headers.get('content-type')?.includes('application/json')) {
-        let json;
-        try {
-          json = await error.response.json();
-        } catch (e) {
-          throw new Error(`Failed to invite ${inviteeEmail}`);
-        }
-        if (json?.message) {
-          throw new Error(json.message);
-        }
+      let errMsg = `Failed to invite ${inviteeEmail}`;
+      if (error instanceof ResponseFailError && error.message) {
+        errMsg = error.message;
       }
-      throw new Error(`Failed to invite ${inviteeEmail}`);
+      throw new Error(errMsg);
     }
   );
 }

diff --git a/...ges/insomnia/src/ui/components/modals/invite-modal/organization-member-roles-selector.tsx b/...ges/insomnia/src/ui/components/modals/invite-modal/organization-member-roles-selector.tsx
@@ -3,8 +3,7 @@ import React from 'react';
 import type { Key } from 'react-aria-components';
 import { Button, Menu, MenuItem, MenuTrigger, Popover, Text } from 'react-aria-components';
 
-import { showModal } from '..';
-import { ErrorModal } from '../error-modal';
+import { showAlert } from '..';
 
 export interface Role {
   id: string;
@@ -105,15 +104,18 @@ export const OrganizationMemberRolesSelector = (props: PropsForUpdateRole | Prop
         isUserOrganizationOwner,
         isRBACEnabled,
       } = props;
-      const { allow, message } = checkIfAllow(
+      const { allow, title, message } = checkIfAllow(
         isUserOrganizationOwner,
         userRole,
         isRBACEnabled,
         hasPermissionToChangeRoles,
       );
 
       if (!allow) {
-        showModal(ErrorModal, { error: new Error(message) });
+        showAlert({
+          title,
+          message,
+        });
       } else {
         setSelectedRoles([selectedRole.name]);
         onRoleChange(selectedRole);

diff --git a/packages/insomnia/src/ui/insomniaFetch.ts b/packages/insomnia/src/ui/insomniaFetch.ts
@@ -59,13 +59,22 @@ export async function insomniaFetch<T = void>({
     if (uri) {
       window.main.openDeepLink(uri);
     }
+    const isJson = response.headers.get('content-type')?.includes('application/json') || path.match(/\.json$/);
     if (onlyResolveOnSuccess && !response.ok) {
+      let errMsg = '';
+      if (isJson) {
+        try {
+          const json = await response.json();
+          if (typeof json?.message === 'string') {
+            errMsg = json.message;
+          }
+        } catch (err) { }
+      }
       throw new ResponseFailError(
-        `${response.status} ${response.statusText}`,
+        errMsg,
         response,
       );
     }
-    const isJson = response.headers.get('content-type')?.includes('application/json') || path.match(/\.json$/);
     return isJson ? response.json() : response.text();
   } catch (err) {
     if (err.name === 'AbortError') {