feat: introducing support for csv files download

anuvu · Feb 26, 2024 · 2fad64a · 2fad64a
1 parent 0cd3bc7
commit 2fad64a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx
@@ -139,6 +139,7 @@ export class Operation extends React.Component<OperationProps, OperationState> {
           type: mapStatusCodeToType(statusCode),
           code: statusCode || 0,
           content: formatResponseContent(data, contentType),
+          format: contentType,
         },
       });
     });

diff --git a/src/components/ResponseSamples/DownloadResponse.tsx b/src/components/ResponseSamples/DownloadResponse.tsx
@@ -4,14 +4,22 @@ import { OperationModel } from '../../services';
 interface DownloadResponseProps {
   operation?: OperationModel;
   content: any;
+  format?: string;
 }
 
-export const DownloadResponse = ({ operation, content }: DownloadResponseProps) => {
+const getHrefTextFormat = (format?: string) => {
+  if (format === 'text/csv') {
+    return format;
+  }
+  return 'text/plain';
+};
+
+export const DownloadResponse = ({ operation, content, format }: DownloadResponseProps) => {
   content = typeof content === 'object' && content !== null ? JSON.stringify(content) : content;
   const downloadItAnchor = (
     <a
       style={{ color: '#326CD1', cursor: 'pointer', fontWeight: 600 }}
-      href={`data:text/plain;charset=utf-8,${encodeURIComponent(content)}`}
+      href={`data:${getHrefTextFormat(format)};charset=utf-8,${encodeURIComponent(content)}`}
       download={`${operation?.id || ''}Response`}
     >
       download it

diff --git a/src/components/ResponseSamples/ResponseSamples.tsx b/src/components/ResponseSamples/ResponseSamples.tsx
@@ -25,7 +25,7 @@ export class ResponseSamples extends React.Component<ResponseSamplesProps> {
       return response.content && response.content.hasSample;
     });
     const hasResponseSamples = responses && responses.length > 0;
-    const content = customResponse?.content;
+    const { content, format } = customResponse || {};
     const contentLength = content?.length || JSON.stringify(content)?.length || 0;
     const reachedMaxPayloadLength = contentLength > MAX_CONTENT_LENGTH;
 
@@ -36,7 +36,7 @@ export class ResponseSamples extends React.Component<ResponseSamplesProps> {
             <RightPanelHeader> {l('response')} </RightPanelHeader>
             <div>
               {reachedMaxPayloadLength ? (
-                <DownloadResponse operation={operation} content={content} />
+                <DownloadResponse operation={operation} content={content} format={format} />
               ) : (
                 <PayloadSamples customData={customResponse} />
               )}