From 501260105f73174019fc0b734223d2873fcd6bc9 Mon Sep 17 00:00:00 2001
From: mahamdan <mahamdan@cisco.com>
Date: Mon, 26 Feb 2024 22:07:24 +0200
Subject: [PATCH] feat: introducing support for csv files download

---
 src/components/Operation/Operation.tsx              |  1 +
 src/components/ResponseSamples/DownloadResponse.tsx | 12 ++++++++++--
 src/components/ResponseSamples/ResponseSamples.tsx  |  4 ++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx
index 6402f4136f..cac5787d37 100644
--- a/src/components/Operation/Operation.tsx
+++ b/src/components/Operation/Operation.tsx
@@ -202,6 +202,7 @@ export class Operation extends React.Component<OperationProps, OperationState> {
               type: mapStatusCodeToType(statusCode),
               code: statusCode || 0,
               content,
+              format: contentType,
             },
           });
         });
diff --git a/src/components/ResponseSamples/DownloadResponse.tsx b/src/components/ResponseSamples/DownloadResponse.tsx
index d3bb7d7a1f..2b41f7612a 100644
--- 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
index 926d73b116..dbf2390eb1 100644
--- 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} />
               )}