- | {f.split('/').pop()} |
+ {f.split('/').pop()} |
{
await protoFilesKv.set(protoFiles.filter((p) => p !== f));
}}
diff --git a/src-web/components/HeaderSize.tsx b/src-web/components/HeaderSize.tsx
new file mode 100644
index 00000000..7e9445c7
--- /dev/null
+++ b/src-web/components/HeaderSize.tsx
@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useIsFullscreen } from '../hooks/useIsFullscreen';
+import { useOsInfo } from '../hooks/useOsInfo';
+
+interface HeaderSizeProps extends HTMLAttributes {
+ children?: ReactNode;
+ size: 'md' | 'lg';
+ ignoreStoplights?: boolean;
+}
+
+export function HeaderSize({
+ className,
+ style,
+ size,
+ ignoreStoplights,
+ ...props
+}: HeaderSizeProps) {
+ const platform = useOsInfo();
+ const fullscreen = useIsFullscreen();
+ const stoplightsVisible = platform?.osType === 'macos' && !fullscreen && !ignoreStoplights;
+ return (
+
+ {/* NOTE: This needs display:grid or else the element shrinks (even though scrollable) */}
+
+
);
-};
+}
diff --git a/src-web/components/Overlay.tsx b/src-web/components/Overlay.tsx
index 8b904858..052b7b4e 100644
--- a/src-web/components/Overlay.tsx
+++ b/src-web/components/Overlay.tsx
@@ -2,6 +2,7 @@ import classNames from 'classnames';
import FocusTrap from 'focus-trap-react';
import { motion } from 'framer-motion';
import type { ReactNode } from 'react';
+import React from 'react';
import { Portal } from './Portal';
interface Props {
@@ -43,10 +44,16 @@ export function Overlay({
onClick={onClose}
className={classNames(
'absolute inset-0',
- variant === 'default' && 'bg-gray-600/30 dark:bg-black/30 backdrop-blur-sm',
+ variant === 'default' && 'bg-background-backdrop backdrop-blur-sm',
)}
/>
- {children}
+ {children}
+
+ {/* Show draggable region at the top */}
+ {/* TODO: Figure out tauri drag region and also make clickable still */}
+ {variant === 'default' && (
+
+ )}
)}
diff --git a/src-web/components/RecentConnectionsDropdown.tsx b/src-web/components/RecentConnectionsDropdown.tsx
index cb71d468..54f62eec 100644
--- a/src-web/components/RecentConnectionsDropdown.tsx
+++ b/src-web/components/RecentConnectionsDropdown.tsx
@@ -11,12 +11,17 @@ import { HStack } from './core/Stacks';
interface Props {
connections: GrpcConnection[];
activeConnection: GrpcConnection;
- onPinned: (r: GrpcConnection) => void;
+ onPinnedConnectionId: (id: string) => void;
}
-export function RecentConnectionsDropdown({ activeConnection, connections, onPinned }: Props) {
+export function RecentConnectionsDropdown({
+ activeConnection,
+ connections,
+ onPinnedConnectionId,
+}: Props) {
const deleteConnection = useDeleteGrpcConnection(activeConnection?.id ?? null);
const deleteAllConnections = useDeleteGrpcConnections(activeConnection?.requestId);
+ const latestConnectionId = connections[0]?.id ?? 'n/a';
return (
({
key: c.id,
label: (
-
+
{formatDistanceToNowStrict(c.createdAt + 'Z')} ago •{' '}
- {c.elapsed}ms
+ {c.elapsed}ms
),
leftSlot: activeConnection?.id === c.id ? : ,
- onSelect: () => onPinned(c),
+ onSelect: () => onPinnedConnectionId(c.id),
})),
]}
>
{fallbackRequestName(activeRequest)}
diff --git a/src-web/components/RecentResponsesDropdown.tsx b/src-web/components/RecentResponsesDropdown.tsx
index f28340b8..175d3dc5 100644
--- a/src-web/components/RecentResponsesDropdown.tsx
+++ b/src-web/components/RecentResponsesDropdown.tsx
@@ -1,26 +1,30 @@
+import classNames from 'classnames';
import { useDeleteHttpResponse } from '../hooks/useDeleteHttpResponse';
import { useDeleteHttpResponses } from '../hooks/useDeleteHttpResponses';
import type { HttpResponse } from '../lib/models';
-import { Dropdown } from './core/Dropdown';
import { pluralize } from '../lib/pluralize';
-import { HStack } from './core/Stacks';
-import { StatusTag } from './core/StatusTag';
+import { Dropdown } from './core/Dropdown';
import { Icon } from './core/Icon';
import { IconButton } from './core/IconButton';
+import { HStack } from './core/Stacks';
+import { StatusTag } from './core/StatusTag';
interface Props {
responses: HttpResponse[];
activeResponse: HttpResponse;
- onPinnedResponse: (r: HttpResponse) => void;
+ onPinnedResponseId: (id: string) => void;
+ className?: string;
}
export const RecentResponsesDropdown = function ResponsePane({
activeResponse,
responses,
- onPinnedResponse,
+ onPinnedResponseId,
+ className,
}: Props) {
const deleteResponse = useDeleteHttpResponse(activeResponse?.id ?? null);
const deleteAllResponses = useDeleteHttpResponses(activeResponse?.requestId);
+ const latestResponseId = responses[0]?.id ?? 'n/a';
return (
({
+ ...responses.slice(0, 20).map((r: HttpResponse) => ({
key: r.id,
label: (
-
-
- • {r.elapsed}ms
+
+
+ →{' '}
+ {r.elapsed >= 0 ? `${r.elapsed}ms` : 'n/a'}
),
leftSlot: activeResponse?.id === r.id ? : ,
- onSelect: () => onPinnedResponse(r),
+ onSelect: () => onPinnedResponseId(r.id),
})),
]}
>
diff --git a/src-web/components/RequestMethodDropdown.tsx b/src-web/components/RequestMethodDropdown.tsx
index b0b88b0f..65ae9cfa 100644
--- a/src-web/components/RequestMethodDropdown.tsx
+++ b/src-web/components/RequestMethodDropdown.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
import { memo, useMemo } from 'react';
import { usePrompt } from '../hooks/usePrompt';
import { Button } from './core/Button';
@@ -57,7 +58,7 @@ export const RequestMethodDropdown = memo(function RequestMethodDropdown({
return (
-
diff --git a/src-web/components/RequestPane.tsx b/src-web/components/RequestPane.tsx
index cd9829ec..ea57214d 100644
--- a/src-web/components/RequestPane.tsx
+++ b/src-web/components/RequestPane.tsx
@@ -3,10 +3,12 @@ import type { CSSProperties } from 'react';
import React, { memo, useCallback, useMemo, useState } from 'react';
import { createGlobalState } from 'react-use';
import { useCancelHttpResponse } from '../hooks/useCancelHttpResponse';
+import { useContentTypeFromHeaders } from '../hooks/useContentTypeFromHeaders';
+import { useImportCurl } from '../hooks/useImportCurl';
import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
+import { useRequests } from '../hooks/useRequests';
import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
-import { useContentTypeFromHeaders } from '../hooks/useContentTypeFromHeaders';
import { useSendRequest } from '../hooks/useSendRequest';
import { useUpdateHttpRequest } from '../hooks/useUpdateHttpRequest';
import { tryFormatJson } from '../lib/formatters';
@@ -29,6 +31,7 @@ import { BearerAuth } from './BearerAuth';
import { BinaryFileEditor } from './BinaryFileEditor';
import { CountBadge } from './core/CountBadge';
import { Editor } from './core/Editor';
+import type { GenericCompletionOption } from './core/Editor/genericCompletion';
import type { TabItem } from './core/Tabs/Tabs';
import { TabContent, Tabs } from './core/Tabs/Tabs';
import { EmptyStateText } from './EmptyStateText';
@@ -38,9 +41,6 @@ import { GraphQLEditor } from './GraphQLEditor';
import { HeadersEditor } from './HeadersEditor';
import { UrlBar } from './UrlBar';
import { UrlParametersEditor } from './UrlParameterEditor';
-import { useImportCurl } from '../hooks/useImportCurl';
-import { useRequests } from '../hooks/useRequests';
-import type { GenericCompletionOption } from './core/Editor/genericCompletion';
interface Props {
style: CSSProperties;
@@ -109,11 +109,14 @@ export const RequestPane = memo(function RequestPane({
if (bodyType === BODY_TYPE_NONE) {
newContentType = null;
} else if (
- bodyType === BODY_TYPE_FORM_URLENCODED ||
- bodyType === BODY_TYPE_FORM_MULTIPART ||
- bodyType === BODY_TYPE_JSON ||
- bodyType === BODY_TYPE_OTHER ||
- bodyType === BODY_TYPE_XML
+ activeRequest.method.toLowerCase() !== 'put' &&
+ activeRequest.method.toLowerCase() !== 'patch' &&
+ activeRequest.method.toLowerCase() !== 'post' &&
+ (bodyType === BODY_TYPE_FORM_URLENCODED ||
+ bodyType === BODY_TYPE_FORM_MULTIPART ||
+ bodyType === BODY_TYPE_JSON ||
+ bodyType === BODY_TYPE_OTHER ||
+ bodyType === BODY_TYPE_XML)
) {
patch.method = 'POST';
newContentType = bodyType === BODY_TYPE_OTHER ? 'text/plain' : bodyType;
@@ -181,6 +184,7 @@ export const RequestPane = memo(function RequestPane({
activeRequest.authenticationType,
activeRequest.bodyType,
activeRequest.headers,
+ activeRequest.method,
activeRequest.urlParameters,
handleContentTypeChange,
updateRequest,
@@ -317,7 +321,6 @@ export const RequestPane = memo(function RequestPane({
useTemplating
autocompleteVariables
placeholder="..."
- className="!bg-gray-50"
heightMode={fullHeight ? 'full' : 'auto'}
defaultValue={`${activeRequest.body?.text ?? ''}`}
contentType="application/json"
@@ -330,7 +333,6 @@ export const RequestPane = memo(function RequestPane({
useTemplating
autocompleteVariables
placeholder="..."
- className="!bg-gray-50"
heightMode={fullHeight ? 'full' : 'auto'}
defaultValue={`${activeRequest.body?.text ?? ''}`}
contentType="text/xml"
@@ -340,7 +342,6 @@ export const RequestPane = memo(function RequestPane({
@@ -370,7 +371,6 @@ export const RequestPane = memo(function RequestPane({
useTemplating
autocompleteVariables
placeholder="..."
- className="!bg-gray-50"
heightMode={fullHeight ? 'full' : 'auto'}
defaultValue={`${activeRequest.body?.text ?? ''}`}
onChange={handleBodyTextChange}
diff --git a/src-web/components/ResizeHandle.tsx b/src-web/components/ResizeHandle.tsx
index 28456451..3e86009a 100644
--- a/src-web/components/ResizeHandle.tsx
+++ b/src-web/components/ResizeHandle.tsx
@@ -32,7 +32,7 @@ export function ResizeHandle({
className={classNames(
className,
'group z-10 flex',
- // 'bg-blue-100/10', // For debugging
+ // 'bg-fg-info', // For debugging
vertical ? 'w-full h-3 cursor-row-resize' : 'h-full w-3 cursor-col-resize',
justify === 'center' && 'justify-center',
justify === 'end' && 'justify-end',
diff --git a/src-web/components/ResponsePane.tsx b/src-web/components/ResponsePane.tsx
index 26628196..13be7047 100644
--- a/src-web/components/ResponsePane.tsx
+++ b/src-web/components/ResponsePane.tsx
@@ -2,8 +2,8 @@ import classNames from 'classnames';
import type { CSSProperties } from 'react';
import { memo, useMemo } from 'react';
import { createGlobalState } from 'react-use';
-import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
import { useContentTypeFromHeaders } from '../hooks/useContentTypeFromHeaders';
+import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
import { useResponseViewMode } from '../hooks/useResponseViewMode';
import type { HttpRequest } from '../lib/models';
import { isResponseLoading } from '../lib/models';
@@ -20,9 +20,11 @@ import { TabContent, Tabs } from './core/Tabs/Tabs';
import { EmptyStateText } from './EmptyStateText';
import { RecentResponsesDropdown } from './RecentResponsesDropdown';
import { ResponseHeaders } from './ResponseHeaders';
+import { AudioViewer } from './responseViewers/AudioViewer';
import { CsvViewer } from './responseViewers/CsvViewer';
import { ImageViewer } from './responseViewers/ImageViewer';
import { TextViewer } from './responseViewers/TextViewer';
+import { VideoViewer } from './responseViewers/VideoViewer';
import { WebPageViewer } from './responseViewers/WebPageViewer';
interface Props {
@@ -34,7 +36,7 @@ interface Props {
const useActiveTab = createGlobalState('body');
export const ResponsePane = memo(function ResponsePane({ style, className, activeRequest }: Props) {
- const { activeResponse, setPinnedResponse, responses } = usePinnedHttpResponse(activeRequest);
+ const { activeResponse, setPinnedResponseId, responses } = usePinnedHttpResponse(activeRequest);
const [viewMode, setViewMode] = useResponseViewMode(activeResponse?.requestId);
const [activeTab, setActiveTab] = useActiveTab();
const contentType = useContentTypeFromHeaders(activeResponse?.headers ?? null);
@@ -73,9 +75,10 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
style={style}
className={classNames(
className,
+ 'x-theme-responsePane',
'max-h-full h-full',
- 'bg-gray-50 dark:bg-gray-100 rounded-md border border-highlight',
- 'shadow shadow-gray-100 dark:shadow-gray-0 relative',
+ 'bg-background rounded-md border border-background-highlight',
+ 'relative',
)}
>
{activeResponse == null ? (
@@ -89,41 +92,41 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
) : (
{activeResponse && (
-
-
-
-
- {activeResponse.elapsed > 0 && (
- <>
- •
-
-
- )}
- {!!activeResponse.contentLength && (
- <>
- •
-
-
- )}
-
-
+
+
+ {activeResponse.elapsed > 0 && (
+ <>
+ •
+
+
+ )}
+ {!!activeResponse.contentLength && (
+ <>
+ •
+
+
+ )}
-
+
+
+
)}
@@ -138,7 +141,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
onChangeValue={setActiveTab}
label="Response"
tabs={tabs}
- className="ml-3 mr-1"
+ className="ml-3 mr-3 mb-3"
tabListClassName="mt-1.5"
>
@@ -146,19 +149,27 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
{!activeResponse.contentLength ? (
- Empty Body
+
+ Empty Body
+
) : contentType?.startsWith('image') ? (
+ ) : contentType?.startsWith('audio') ? (
+
+ ) : contentType?.startsWith('video') ? (
+
) : activeResponse.contentLength > 2 * 1000 * 1000 ? (
-
- Cannot preview text responses larger than 2MB
-
+ Cannot preview text responses larger than 2MB
) : viewMode === 'pretty' && contentType?.includes('html') ? (
) : contentType?.match(/csv|tab-separated/) ? (
) : (
-
+
)}
diff --git a/src-web/components/RouteError.tsx b/src-web/components/RouteError.tsx
index 0cd338e1..432478f5 100644
--- a/src-web/components/RouteError.tsx
+++ b/src-web/components/RouteError.tsx
@@ -26,7 +26,7 @@ export default function RouteError() {
>
Go Home
- |