starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-07-15 17:22:59 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Use mimeType for response viewer

Browse Source
This commit is contained in:
Gregory Schier
2025-04-22 06:58:53 -07:00
parent 2f8b2a81c7
commit 82451a26f6
1 changed files with 12 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src-web/components/HttpResponsePane.tsx
+12 -14
View File
@@ -5,6 +5,7 @@ import React, { useCallback, useMemo } from 'react';
import { useLocalStorage } from 'react-use'; import { useLocalStorage } from 'react-use';
import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse'; import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
import { useResponseViewMode } from '../hooks/useResponseViewMode'; import { useResponseViewMode } from '../hooks/useResponseViewMode';
import { getMimeTypeFromContentType } from '../lib/contentType';
import { getContentTypeFromHeaders } from '../lib/model_util'; import { getContentTypeFromHeaders } from '../lib/model_util';
import { ConfirmLargeResponse } from './ConfirmLargeResponse'; import { ConfirmLargeResponse } from './ConfirmLargeResponse';
import { Banner } from './core/Banner'; import { Banner } from './core/Banner';
@@ -48,6 +49,7 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
{}, {},
); );
const contentType = getContentTypeFromHeaders(activeResponse?.headers ?? null); const contentType = getContentTypeFromHeaders(activeResponse?.headers ?? null);
const mimeType = contentType == null ? null : getMimeTypeFromContentType(contentType).essence;
const tabs = useMemo<TabItem[]>( const tabs = useMemo<TabItem[]>(
() => [ () => [
@@ -59,7 +61,7 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
onChange: setViewMode, onChange: setViewMode,
items: [ items: [
{ label: 'Pretty', value: 'pretty' }, { label: 'Pretty', value: 'pretty' },
...(contentType?.startsWith('image') ? [] : [{ label: 'Raw', value: 'raw' }]), ...(mimeType?.startsWith('image') ? [] : [{ label: 'Raw', value: 'raw' }]),
], ],
}, },
}, },
@@ -77,7 +79,7 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
label: 'Info', label: 'Info',
}, },
], ],
[activeResponse?.headers, contentType, setViewMode, viewMode], [activeResponse?.headers, mimeType, setViewMode, viewMode],
); );
const activeTab = activeTabs?.[activeRequestId]; const activeTab = activeTabs?.[activeRequestId];
const setActiveTab = useCallback( const setActiveTab = useCallback(
@@ -123,9 +125,7 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
{activeResponse.state !== 'closed' && <LoadingIcon size="sm" />} {activeResponse.state !== 'closed' && <LoadingIcon size="sm" />}
<HttpStatusTag showReason response={activeResponse} /> <HttpStatusTag showReason response={activeResponse} />
<span>&bull;</span> <span>&bull;</span>
<HttpResponseDurationTag <HttpResponseDurationTag response={activeResponse} />
response={activeResponse}
/>
<span>&bull;</span> <span>&bull;</span>
<SizeTag contentLength={activeResponse.contentLength ?? 0} /> <SizeTag contentLength={activeResponse.contentLength ?? 0} />
@@ -162,23 +162,21 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
</EmptyStateText> </EmptyStateText>
) : activeResponse.state === 'closed' && activeResponse.contentLength === 0 ? ( ) : activeResponse.state === 'closed' && activeResponse.contentLength === 0 ? (
<EmptyStateText>Empty </EmptyStateText> <EmptyStateText>Empty </EmptyStateText>
) : contentType?.match(/^text\/event-stream$/i) && viewMode === 'pretty' ? ( ) : mimeType?.match(/^text\/event-stream/i) && viewMode === 'pretty' ? (
<EventStreamViewer response={activeResponse} /> <EventStreamViewer response={activeResponse} />
) : contentType?.match(/^image\/svg/) ? ( ) : mimeType?.match(/^image\/svg/) ? (
<SvgViewer response={activeResponse} /> <SvgViewer response={activeResponse} />
) : contentType?.match(/^image/i) ? ( ) : mimeType?.match(/^image/i) ? (
<EnsureCompleteResponse response={activeResponse} render={ImageViewer} /> <EnsureCompleteResponse response={activeResponse} render={ImageViewer} />
) : contentType?.match(/^audio/i) ? ( ) : mimeType?.match(/^audio/i) ? (
<EnsureCompleteResponse response={activeResponse} render={AudioViewer} /> <EnsureCompleteResponse response={activeResponse} render={AudioViewer} />
) : contentType?.match(/^video/i) ? ( ) : mimeType?.match(/^video/i) ? (
<EnsureCompleteResponse response={activeResponse} render={VideoViewer} /> <EnsureCompleteResponse response={activeResponse} render={VideoViewer} />
) : contentType?.match(/pdf/i) ? ( ) : mimeType?.match(/pdf/i) ? (
<EnsureCompleteResponse response={activeResponse} render={PdfViewer} /> <EnsureCompleteResponse response={activeResponse} render={PdfViewer} />
) : contentType?.match(/csv|tab-separated/i) ? ( ) : mimeType?.match(/csv|tab-separated/i) ? (
<CsvViewer className="pb-2" response={activeResponse} /> <CsvViewer className="pb-2" response={activeResponse} />
) : ( ) : (
// ) : viewMode === 'pretty' && contentType?.includes('json') ? (
// <JsonAttributeTree attrValue={activeResponse} />
<HTMLOrTextViewer <HTMLOrTextViewer
textViewerClassName="-mr-2 bg-surface" // Pull to the right textViewerClassName="-mr-2 bg-surface" // Pull to the right
response={activeResponse} response={activeResponse}