fix ui

Kong · Nov 15, 2024 · 83db8f5 · 83db8f5
1 parent a73b377
commit 83db8f5
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 12 deletions.
diff --git a/packages/insomnia/src/ui/components/modals/add-request-to-collection-modal.tsx b/packages/insomnia/src/ui/components/modals/add-request-to-collection-modal.tsx
@@ -51,7 +51,7 @@ export const AddRequestToCollectionModal: FC<AddRequestModalProps> = ({ onHide }
   }, []);
 
   const isBtnDisabled = requestFetcher.state !== 'idle'
-    || !selectedProjectId;
+    || !selectedProjectId || !selectedWorkspaceId;
 
   const createNewRequest = async () => {
     requestFetcher.submit(
@@ -71,7 +71,7 @@ export const AddRequestToCollectionModal: FC<AddRequestModalProps> = ({ onHide }
         <ModalBody className="wide">
           <div className="form-control form-control--outlined">
             <label>
-              {strings.project.singular}:
+              {strings.project.plural}:
               <select name="projectId" value={selectedProjectId} onChange={e => setSelectedProjectId(e.target.value)}>
                 {projectOptions.map(project => (
                   <option key={project._id} value={project._id}>
@@ -94,7 +94,7 @@ export const AddRequestToCollectionModal: FC<AddRequestModalProps> = ({ onHide }
 
           <div className="form-control form-control--outlined">
             <label>
-              {strings.workspace.singular}:
+              {strings.collection.plural}:
               <select name="workspaceId" value={selectedWorkspaceId} onChange={e => setSelectedWorkspaceId(e.target.value)}>
                 {workspaceOptions.map(workspace => (
                   <option key={workspace._id} value={workspace._id}>
@@ -111,7 +111,7 @@ export const AddRequestToCollectionModal: FC<AddRequestModalProps> = ({ onHide }
                 color: 'var(--color-danger)',
               }}
             >
-              Workspace is required
+              Collection is required
             </p>
           )}
           {requestFetcher.data?.error && (
@@ -136,7 +136,7 @@ export const AddRequestToCollectionModal: FC<AddRequestModalProps> = ({ onHide }
               className="btn"
               onClick={createNewRequest}
             >
-              {requestFetcher.state !== 'idle' && <Icon icon='spinner' className='animate-spin' />} Save
+              {requestFetcher.state !== 'idle' && <Icon icon='spinner' className='animate-spin' />} Add
             </button>
           </div>
         </ModalFooter>

diff --git a/packages/insomnia/src/ui/components/tabs/tabList.tsx b/packages/insomnia/src/ui/components/tabs/tabList.tsx
@@ -6,7 +6,7 @@ import { type ChangeBufferEvent, type ChangeType, database } from '../../../comm
 import * as models from '../../../models/index';
 import type { MockRoute } from '../../../models/mock-route';
 import type { Request } from '../../../models/request';
-import { INNER_TAB_HEIGHT, INSOMNIA_TAB_HEIGHT } from '../../constant';
+import { INSOMNIA_TAB_HEIGHT } from '../../constant';
 import { useInsomniaTabContext } from '../../context/app/insomnia-tab-context';
 import { Icon } from '../icon';
 import { AddRequestToCollectionModal } from '../modals/add-request-to-collection-modal';
@@ -156,7 +156,7 @@ export const OrganizationTabList = ({ showActiveStatus = true, currentPage = ''
   };
 
   return (
-    <div className={`flex h-[${INSOMNIA_TAB_HEIGHT}px] box-content border-b border-solid border-[--hl-sm]`}>
+    <div className="flex box-content border-b border-solid border-[--hl-sm]" style={{ height: `${INSOMNIA_TAB_HEIGHT}px` }}>
       <GridList
         aria-label="Insomnia Tabs"
         onSelectionChange={handleSelectionChange}
@@ -165,7 +165,9 @@ export const OrganizationTabList = ({ showActiveStatus = true, currentPage = ''
         defaultSelectedKeys={['req_737492dce0c3460a8a55762e5d1bbd99']}
         selectionMode="single"
         selectionBehavior='replace'
-        className={`flex h-[${INNER_TAB_HEIGHT}px] bg-[--color-bg] max-w-[calc(100%-50px)] overflow-x-scroll hide-scrollbars`} // Use +1 height to mask the wrapper border, and let the custom element in InsomniaTab act as the fake border.（we need different border for active tab）
+        className="flex bg-[--color-bg] max-w-[calc(100%-50px)] overflow-x-scroll hide-scrollbars h-[41px]"
+        // Use +1 height to mask the wrapper border, and let the custom element in InsomniaTab act as the fake border.（we need different border for active tab）
+        style={{ height: `${INSOMNIA_TAB_HEIGHT + 1}px` }}
         items={tabList}
       >
         {item => <InsomniaTab tab={item} />}

diff --git a/packages/insomnia/src/ui/constant.ts b/packages/insomnia/src/ui/constant.ts
@@ -1,4 +1,3 @@
 // this a constant file just for renderer process
 
 export const INSOMNIA_TAB_HEIGHT = 40;
-export const INNER_TAB_HEIGHT = 41;
diff --git a/packages/insomnia/src/ui/hooks/tab.ts b/packages/insomnia/src/ui/hooks/tab.ts
@@ -171,7 +171,7 @@ export const useInsomniaTab = ({
     if (type === TabEnum.Request) {
       return {
         type,
-        name: activeRequest?.name || 'Untitled request',
+        name: activeRequest?.name || 'New Request',
         url: generateTabUrl(type),
         organizationId: organizationId,
         projectId: projectId,
@@ -187,7 +187,7 @@ export const useInsomniaTab = ({
     if (type === TabEnum.Folder) {
       return {
         type,
-        name: 'My folder',
+        name: activeRequestGroup?.name || 'My Folder',
         url: generateTabUrl(type),
         organizationId: organizationId,
         projectId: projectId,
@@ -257,7 +257,7 @@ export const useInsomniaTab = ({
     }
 
     return;
-  }, [activeMockRoute?.method, activeMockRoute?.name, activeProject.name, activeRequest, activeWorkspace.name, generateTabUrl, getTabId, organizationId, projectId, unitTestSuite?.name, workspaceId]);
+  }, [activeMockRoute?.method, activeMockRoute?.name, activeProject.name, activeRequest, activeRequestGroup?.name, activeWorkspace.name, generateTabUrl, getTabId, organizationId, projectId, unitTestSuite?.name, workspaceId]);
 
   useEffect(() => {
     const type = getTabType(location.pathname);