mirrors/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia synced 2024-11-07 22:30:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add default request and folder names (#6632)

Browse Source 
* Add default request and folder names in debug and test view

* fix sizes

* extract function

---------

Co-authored-by: jackkav <jackkav@gmail.com>
This commit is contained in:
James Gatz 2023-10-03 17:10:02 +02:00 committed by GitHub
parent 9ff6e9f66f
commit 40692b7af7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 85 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/insomnia/src/ui/routes/debug.tsx
View File

@ -37,7 +37,7 @@ import { PlatformKeyCombinations } from '../../common/settings';
import type { GrpcMethodInfo } from '../../main/ipc/grpc';
import * as models from '../../models';
import { Environment } from '../../models/environment';
import { isGrpcRequest, isGrpcRequestId } from '../../models/grpc-request';
import { GrpcRequest, isGrpcRequest, isGrpcRequestId } from '../../models/grpc-request';
import { getByParentId as getGrpcRequestMetaByParentId } from '../../models/grpc-request-meta';
import {
isEventStreamRequest,
@ -45,11 +45,12 @@ import {
isRequestId,
Request,
} from '../../models/request';
import { isRequestGroup } from '../../models/request-group';
import { isRequestGroup, RequestGroup } from '../../models/request-group';
import { getByParentId as getRequestMetaByParentId } from '../../models/request-meta';
import {
isWebSocketRequest,
isWebSocketRequestId,
WebSocketRequest,
} from '../../models/websocket-request';
import { invariant } from '../../utils/invariant';
import { RequestActionsDropdown } from '../components/dropdowns/request-actions-dropdown';
@ -144,6 +145,10 @@ const EventStreamSpinner = ({ requestId }: { requestId: string }) => {
return readyState ? <ConnectionCircle className='flex-shrink-0' data-testid="EventStreamSpinner__Connected" /> : null;
};
const getRequestNameOrFallback = (doc: Request | RequestGroup | GrpcRequest | WebSocketRequest): string => {
return !isRequestGroup(doc) ? doc.name || doc.url || 'Untitled request' : doc.name || 'Untitled folder';
};
export const Debug: FC = () => {
const {
activeWorkspace,
@ -878,6 +883,7 @@ export const Debug: FC = () => {
}}
>
{item => {
return (
<Item
key={item.doc._id}
@ -916,7 +922,7 @@ export const Debug: FC = () => {
gRPC
</span>
)}
<span className="truncate">{item.doc.name}</span>
<span className="truncate">{getRequestNameOrFallback(item.doc)}</span>
<span className="flex-1" />
{item.pinned && (
<Icon className='text-[--font-size-sm]' icon="thumb-tack" />
@ -1016,7 +1022,7 @@ export const Debug: FC = () => {
icon={item.collapsed ? 'folder' : 'folder-open'}
/>
)}
<span className="truncate">{item.doc.name}</span>
<span className="truncate">{getRequestNameOrFallback(item.doc)}</span>
<span className="flex-1" />
{isWebSocketRequest(item.doc) && <WebSocketSpinner requestId={item.doc._id} />}
{isEventStreamRequest(item.doc) && <EventStreamSpinner requestId={item.doc._id} />}

87
packages/insomnia/src/ui/routes/test-suite.tsx
View File

@ -19,9 +19,11 @@ import {
import { database } from '../../common/database';
import { documentationLinks } from '../../common/documentation';
import * as models from '../../models';
import { isGrpcRequest } from '../../models/grpc-request';
import { isRequest, Request } from '../../models/request';
import { isUnitTest, UnitTest } from '../../models/unit-test';
import { UnitTestSuite } from '../../models/unit-test-suite';
import { isWebSocketRequest } from '../../models/websocket-request';
import { invariant } from '../../utils/invariant';
import {
CodeEditor,
@ -29,6 +31,7 @@ import {
} from '../components/codemirror/code-editor';
import { EditableInput } from '../components/editable-input';
import { Icon } from '../components/icon';
import { getMethodShortHand } from '../components/tags/method-tag';
const UnitTestItemView = ({
unitTest,
@ -73,7 +76,7 @@ const UnitTestItemView = ({
<div className="p-[--padding-sm] flex-shrink-0 overflow-hidden">
<div className="flex items-center gap-2 w-full">
<Button
className="flex flex-shrink-0 flex-nowrap items-center justify-center aspect-square h-full aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
className="flex flex-shrink-0 flex-nowrap items-center justify-center aspect-square h-8 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
onPress={() => setIsOpen(!isOpen)}
>
<Icon icon={isOpen ? 'chevron-down' : 'chevron-right'} />
@ -121,30 +124,90 @@ const UnitTestItemView = ({
key: request._id,
}))}
>
<Button aria-label='Select a request' className="px-4 py-1 flex flex-1 h-6 items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
<Button aria-label='Select a request' className="px-4 py-1 flex flex-1 h-8 items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
<SelectValue<Request> className="flex truncate items-center justify-center gap-2">
{({ isPlaceholder, selectedItem }) => {
if (isPlaceholder || !selectedItem) {
{({ isPlaceholder, selectedItem: request }) => {
if (isPlaceholder || !request) {
return <span>Select a request</span>;
}
return <Fragment>{selectedItem.name}</Fragment>;
return (
<Fragment>
{isRequest(request) && (
<span
className={
`w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center
${{
'GET': 'text-[--color-font-surprise] bg-[rgba(var(--color-surprise-rgb),0.5)]',
'POST': 'text-[--color-font-success] bg-[rgba(var(--color-success-rgb),0.5)]',
'HEAD': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
'OPTIONS': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
'DELETE': 'text-[--color-font-danger] bg-[rgba(var(--color-danger-rgb),0.5)]',
'PUT': 'text-[--color-font-warning] bg-[rgba(var(--color-warning-rgb),0.5)]',
'PATCH': 'text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]',
}[request.method] || 'text-[--color-font] bg-[--hl-md]'}`
}
>
{getMethodShortHand(request)}
</span>
)}
{isWebSocketRequest(request) && (
<span className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]">
WS
</span>
)}
{isGrpcRequest(request) && (
<span className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]">
gRPC
</span>
)}
<span>{request.name || request.url || 'Untitled request'}</span>
</Fragment>
);
}}
</SelectValue>
<Icon icon="caret-down" />
</Button>
<Popover className="min-w-max">
<ListBox<Request> className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[50vh] focus:outline-none">
{item => (
{request => (
<Item
className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
aria-label={item.name}
textValue={item.name}
value={item}
aria-label={request.name}
textValue={request.name}
value={request}
>
{({ isSelected }) => (
<Fragment>
<span>{item.name}</span>
{isRequest(request) && (
<span
className={
`w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center
${{
'GET': 'text-[--color-font-surprise] bg-[rgba(var(--color-surprise-rgb),0.5)]',
'POST': 'text-[--color-font-success] bg-[rgba(var(--color-success-rgb),0.5)]',
'HEAD': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
'OPTIONS': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
'DELETE': 'text-[--color-font-danger] bg-[rgba(var(--color-danger-rgb),0.5)]',
'PUT': 'text-[--color-font-warning] bg-[rgba(var(--color-warning-rgb),0.5)]',
'PATCH': 'text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]',
}[request.method] || 'text-[--color-font] bg-[--hl-md]'}`
}
>
{getMethodShortHand(request)}
</span>
)}
{isWebSocketRequest(request) && (
<span className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]">
WS
</span>
)}
{isGrpcRequest(request) && (
<span className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]">
gRPC
</span>
)}
<span>{request.name || request.url || 'Untitled request'}</span>
{isSelected && (
<Icon
icon="check"
@ -160,7 +223,7 @@ const UnitTestItemView = ({
</Select>
<Button
className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
className="flex flex-shrink-0 items-center justify-center aspect-square h-8 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
onPress={() => {
deleteUnitTestFetcher.submit(
{},
@ -174,7 +237,7 @@ const UnitTestItemView = ({
<Icon icon="trash" />
</Button>
<Button
className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
className="flex flex-shrink-0 items-center justify-center aspect-square h-8 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
onPress={() => {
runTestFetcher.submit(
{},