Add separate SVG response viewer

This commit is contained in:
Gregory Schier
2025-01-04 07:14:33 -08:00
parent 592c1228f1
commit 53f5ef3515
3 changed files with 20 additions and 3 deletions
+3
View File
@@ -27,6 +27,7 @@ import { EventStreamViewer } from './responseViewers/EventStreamViewer';
import { HTMLOrTextViewer } from './responseViewers/HTMLOrTextViewer'; import { HTMLOrTextViewer } from './responseViewers/HTMLOrTextViewer';
import { ImageViewer } from './responseViewers/ImageViewer'; import { ImageViewer } from './responseViewers/ImageViewer';
import { PdfViewer } from './responseViewers/PdfViewer'; import { PdfViewer } from './responseViewers/PdfViewer';
import {SvgViewer} from "./responseViewers/SvgViewer";
import { VideoViewer } from './responseViewers/VideoViewer'; import { VideoViewer } from './responseViewers/VideoViewer';
interface Props { interface Props {
@@ -167,6 +168,8 @@ export const ResponsePane = memo(function ResponsePane({
</div> </div>
) : contentType?.match(/^text\/event-stream$/i) && viewMode === 'pretty' ? ( ) : contentType?.match(/^text\/event-stream$/i) && viewMode === 'pretty' ? (
<EventStreamViewer response={activeResponse} /> <EventStreamViewer response={activeResponse} />
) : contentType?.match(/^image\/svg/) ? (
<SvgViewer response={activeResponse} />
) : contentType?.match(/^image/i) ? ( ) : contentType?.match(/^image/i) ? (
<EnsureCompleteResponse response={activeResponse} render={ImageViewer} /> <EnsureCompleteResponse response={activeResponse} render={ImageViewer} />
) : contentType?.match(/^audio/i) ? ( ) : contentType?.match(/^audio/i) ? (
@@ -86,7 +86,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
if (ops.length === 0) { if (ops.length === 0) {
toast.show({ toast.show({
id: 'no-sync-changes', id: 'no-sync-changes',
message: 'No changes detected for sync', message: 'No changes to sync',
}); });
return; return;
} }
@@ -97,7 +97,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
await applySync(activeWorkspace, ops); await applySync(activeWorkspace, ops);
toast.show({ toast.show({
id: 'applied-sync-changes', id: 'applied-sync-changes',
message: `Applied ${pluralizeCount('change', ops.length)}`, message: `Wrote ${pluralizeCount('change', ops.length)}`,
}); });
return; return;
} }
@@ -159,7 +159,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
await applySync(activeWorkspace, ops); await applySync(activeWorkspace, ops);
toast.show({ toast.show({
id: 'applied-confirmed-sync-changes', id: 'applied-confirmed-sync-changes',
message: `Applied ${pluralizeCount('change', ops.length)}`, message: `Wrote ${pluralizeCount('change', ops.length)}`,
}); });
} }
}, },
@@ -0,0 +1,14 @@
import type { HttpResponse } from '@yaakapp-internal/models';
import React from 'react';
import { useResponseBodyText } from '../../hooks/useResponseBodyText';
interface Props {
response: HttpResponse;
}
export function SvgViewer({ response }: Props) {
const rawTextBody = useResponseBodyText(response);
if (rawTextBody.data == null) return null;
const src = `data:image/svg+xml;base64,${btoa(rawTextBody.data)}`;
return <img src={src} alt="Response preview" className="max-w-full max-h-full pb-2" />;
}