From 46ebc899ee978ef27489a43422dae17b945fdcd1 Mon Sep 17 00:00:00 2001
From: leangseu-edx <83240113+leangseu-edx@users.noreply.github.com>
Date: Mon, 24 Jan 2022 14:30:07 -0500
Subject: [PATCH] tri-fix (#49)

* fix: response display to show medium size on even the content isn't big enough

* fix: don't show download button when there isn't submission files

* feat: additional default support file for image renderer
---
 src/components/FilePreview/FileRenderer.jsx   |  5 +
 .../FilePreview/FileRenderer.test.jsx         |  5 +
 .../__snapshots__/FileRenderer.test.jsx.snap  | 95 +++++++++++++++++++
 .../ResponseDisplay/ResponseDisplay.scss      |  8 +-
 .../ResponseDisplay/SubmissionFiles.jsx       | 88 +++++++++--------
 .../PreviewDisplay.test.jsx.snap              | 50 ++++++++++
 .../SubmissionFiles.test.jsx.snap             |  7 --
 src/data/constants/files.js                   |  5 +
 8 files changed, 213 insertions(+), 50 deletions(-)

diff --git a/src/components/FilePreview/FileRenderer.jsx b/src/components/FilePreview/FileRenderer.jsx
index fde6592..145c912 100644
--- a/src/components/FilePreview/FileRenderer.jsx
+++ b/src/components/FilePreview/FileRenderer.jsx
@@ -23,6 +23,11 @@ export const RENDERERS = StrictDict({
   [FileTypes.bmp]: ImageRenderer,
   [FileTypes.png]: ImageRenderer,
   [FileTypes.txt]: TXTRenderer,
+  [FileTypes.gif]: ImageRenderer,
+  [FileTypes.jfif]: ImageRenderer,
+  [FileTypes.pjpeg]: ImageRenderer,
+  [FileTypes.pjp]: ImageRenderer,
+  [FileTypes.svg]: ImageRenderer,
 });
 
 export const ERROR_STATUSES = {
diff --git a/src/components/FilePreview/FileRenderer.test.jsx b/src/components/FilePreview/FileRenderer.test.jsx
index d240d0c..dc77cf2 100644
--- a/src/components/FilePreview/FileRenderer.test.jsx
+++ b/src/components/FilePreview/FileRenderer.test.jsx
@@ -93,6 +93,11 @@ describe('FileRenderer', () => {
         test(FileTypes.bmp, () => checkFile(3, ImageRenderer));
         test(FileTypes.png, () => checkFile(4, ImageRenderer));
         test(FileTypes.txt, () => checkFile(5, TXTRenderer));
+        test(FileTypes.gif, () => checkFile(6, ImageRenderer));
+        test(FileTypes.jfif, () => checkFile(7, ImageRenderer));
+        test(FileTypes.pjpeg, () => checkFile(8, ImageRenderer));
+        test(FileTypes.pjp, () => checkFile(9, ImageRenderer));
+        test(FileTypes.svg, () => checkFile(10, ImageRenderer));
       });
 
       test('getter for error', () => {
diff --git a/src/components/FilePreview/__snapshots__/FileRenderer.test.jsx.snap b/src/components/FilePreview/__snapshots__/FileRenderer.test.jsx.snap
index 2d2659a..9ca4611 100644
--- a/src/components/FilePreview/__snapshots__/FileRenderer.test.jsx.snap
+++ b/src/components/FilePreview/__snapshots__/FileRenderer.test.jsx.snap
@@ -101,6 +101,44 @@ exports[`FileRenderer component snapshot successful rendering bmp 1`] = `
 </FileCard>
 `;
 
+exports[`FileRenderer component snapshot successful rendering gif 1`] = `
+<FileCard
+  file={
+    Object {
+      "description": "file description 6",
+      "downloadUrl": "/url-path/fake_file_6.gif",
+      "name": "fake_file_6.gif",
+    }
+  }
+>
+  <ImageRenderer
+    fileName="fake_file_6.gif"
+    onError={[MockFunction this.props.onError]}
+    onSuccess={[MockFunction this.props.onSuccess]}
+    url="/url-path/fake_file_6.gif"
+  />
+</FileCard>
+`;
+
+exports[`FileRenderer component snapshot successful rendering jfif 1`] = `
+<FileCard
+  file={
+    Object {
+      "description": "file description 7",
+      "downloadUrl": "/url-path/fake_file_7.jfif",
+      "name": "fake_file_7.jfif",
+    }
+  }
+>
+  <ImageRenderer
+    fileName="fake_file_7.jfif"
+    onError={[MockFunction this.props.onError]}
+    onSuccess={[MockFunction this.props.onSuccess]}
+    url="/url-path/fake_file_7.jfif"
+  />
+</FileCard>
+`;
+
 exports[`FileRenderer component snapshot successful rendering jpeg 1`] = `
 <FileCard
   file={
@@ -158,6 +196,44 @@ exports[`FileRenderer component snapshot successful rendering pdf 1`] = `
 </FileCard>
 `;
 
+exports[`FileRenderer component snapshot successful rendering pjp 1`] = `
+<FileCard
+  file={
+    Object {
+      "description": "file description 9",
+      "downloadUrl": "/url-path/fake_file_9.pjp",
+      "name": "fake_file_9.pjp",
+    }
+  }
+>
+  <ImageRenderer
+    fileName="fake_file_9.pjp"
+    onError={[MockFunction this.props.onError]}
+    onSuccess={[MockFunction this.props.onSuccess]}
+    url="/url-path/fake_file_9.pjp"
+  />
+</FileCard>
+`;
+
+exports[`FileRenderer component snapshot successful rendering pjpeg 1`] = `
+<FileCard
+  file={
+    Object {
+      "description": "file description 8",
+      "downloadUrl": "/url-path/fake_file_8.pjpeg",
+      "name": "fake_file_8.pjpeg",
+    }
+  }
+>
+  <ImageRenderer
+    fileName="fake_file_8.pjpeg"
+    onError={[MockFunction this.props.onError]}
+    onSuccess={[MockFunction this.props.onSuccess]}
+    url="/url-path/fake_file_8.pjpeg"
+  />
+</FileCard>
+`;
+
 exports[`FileRenderer component snapshot successful rendering png 1`] = `
 <FileCard
   file={
@@ -177,6 +253,25 @@ exports[`FileRenderer component snapshot successful rendering png 1`] = `
 </FileCard>
 `;
 
+exports[`FileRenderer component snapshot successful rendering svg 1`] = `
+<FileCard
+  file={
+    Object {
+      "description": "file description 10",
+      "downloadUrl": "/url-path/fake_file_10.svg",
+      "name": "fake_file_10.svg",
+    }
+  }
+>
+  <ImageRenderer
+    fileName="fake_file_10.svg"
+    onError={[MockFunction this.props.onError]}
+    onSuccess={[MockFunction this.props.onSuccess]}
+    url="/url-path/fake_file_10.svg"
+  />
+</FileCard>
+`;
+
 exports[`FileRenderer component snapshot successful rendering txt 1`] = `
 <FileCard
   file={
diff --git a/src/containers/ResponseDisplay/ResponseDisplay.scss b/src/containers/ResponseDisplay/ResponseDisplay.scss
index 3f517de..39d9f98 100644
--- a/src/containers/ResponseDisplay/ResponseDisplay.scss
+++ b/src/containers/ResponseDisplay/ResponseDisplay.scss
@@ -2,7 +2,7 @@
 
 .response-display {
   padding: map-get($spacers, 0);
-  max-width: map-get($container-max-widths, "md");
+  width: map-get($container-max-widths, "md");
   overflow-y: hidden;
   height: fit-content;
 
@@ -43,4 +43,10 @@
   .preview-display {
     padding: map-get($spacers, 3) 0;
   }
+}
+
+@include media-breakpoint-down(sm) {
+  .response-display {
+    min-width: 100vw;
+  }
 }
\ No newline at end of file
diff --git a/src/containers/ResponseDisplay/SubmissionFiles.jsx b/src/containers/ResponseDisplay/SubmissionFiles.jsx
index 22180c6..bdc0715 100644
--- a/src/containers/ResponseDisplay/SubmissionFiles.jsx
+++ b/src/containers/ResponseDisplay/SubmissionFiles.jsx
@@ -27,53 +27,57 @@ export class SubmissionFiles extends React.Component {
     return (
       <Card className="submission-files">
         {files.length ? (
-          <Collapsible.Advanced defaultOpen>
-            <Collapsible.Trigger className="submission-files-title">
-              <h3>{this.title}</h3>
-              <Collapsible.Visible whenClosed>
-                <Icon src={ArrowDropDown} />
-              </Collapsible.Visible>
-              <Collapsible.Visible whenOpen>
-                <Icon src={ArrowDropUp} />
-              </Collapsible.Visible>
-            </Collapsible.Trigger>
-            <Collapsible.Body className="submission-files-body">
-              <div className="submission-files-table">
-                <DataTable
-                  columns={[
-                    {
-                      Header: intl.formatMessage(messages.tableNameHeader),
-                      accessor: 'name',
-                      Cell: FileNameCell,
-                    },
-                    {
-                      Header: intl.formatMessage(messages.tableExtensionHeader),
-                      accessor: 'name',
-                      id: 'extension',
-                      Cell: FileExtensionCell,
-                    },
-                    {
-                      Header: intl.formatMessage(messages.tablePopoverHeader),
-                      accessor: '',
-                      Cell: FilePopoverCell,
-                    },
-                  ]}
-                  data={files}
-                  itemCount={files.length}
-                >
-                  <DataTable.Table />
-                </DataTable>
-              </div>
-            </Collapsible.Body>
-          </Collapsible.Advanced>
+          <>
+            <Collapsible.Advanced defaultOpen>
+              <Collapsible.Trigger className="submission-files-title">
+                <h3>{this.title}</h3>
+                <Collapsible.Visible whenClosed>
+                  <Icon src={ArrowDropDown} />
+                </Collapsible.Visible>
+                <Collapsible.Visible whenOpen>
+                  <Icon src={ArrowDropUp} />
+                </Collapsible.Visible>
+              </Collapsible.Trigger>
+              <Collapsible.Body className="submission-files-body">
+                <div className="submission-files-table">
+                  <DataTable
+                    columns={[
+                      {
+                        Header: intl.formatMessage(messages.tableNameHeader),
+                        accessor: 'name',
+                        Cell: FileNameCell,
+                      },
+                      {
+                        Header: intl.formatMessage(
+                          messages.tableExtensionHeader,
+                        ),
+                        accessor: 'name',
+                        id: 'extension',
+                        Cell: FileExtensionCell,
+                      },
+                      {
+                        Header: intl.formatMessage(messages.tablePopoverHeader),
+                        accessor: '',
+                        Cell: FilePopoverCell,
+                      },
+                    ]}
+                    data={files}
+                    itemCount={files.length}
+                  >
+                    <DataTable.Table />
+                  </DataTable>
+                </div>
+              </Collapsible.Body>
+            </Collapsible.Advanced>
+            <Card.Footer className="text-right">
+              <FileDownload files={files} />
+            </Card.Footer>
+          </>
         ) : (
           <div className="submission-files-title no-submissions">
             <h3>{this.title}</h3>
           </div>
         )}
-        <Card.Footer className="text-right">
-          <FileDownload files={files} />
-        </Card.Footer>
       </Card>
     );
   }
diff --git a/src/containers/ResponseDisplay/__snapshots__/PreviewDisplay.test.jsx.snap b/src/containers/ResponseDisplay/__snapshots__/PreviewDisplay.test.jsx.snap
index dbad76f..eee11bb 100644
--- a/src/containers/ResponseDisplay/__snapshots__/PreviewDisplay.test.jsx.snap
+++ b/src/containers/ResponseDisplay/__snapshots__/PreviewDisplay.test.jsx.snap
@@ -70,5 +70,55 @@ exports[`PreviewDisplay component snapshot files render with props 1`] = `
     }
     key="fake_file_5.txt"
   />
+  <FileRenderer
+    file={
+      Object {
+        "description": "file description 6",
+        "downloadUrl": "/url-path/fake_file_6.gif",
+        "name": "fake_file_6.gif",
+      }
+    }
+    key="fake_file_6.gif"
+  />
+  <FileRenderer
+    file={
+      Object {
+        "description": "file description 7",
+        "downloadUrl": "/url-path/fake_file_7.jfif",
+        "name": "fake_file_7.jfif",
+      }
+    }
+    key="fake_file_7.jfif"
+  />
+  <FileRenderer
+    file={
+      Object {
+        "description": "file description 8",
+        "downloadUrl": "/url-path/fake_file_8.pjpeg",
+        "name": "fake_file_8.pjpeg",
+      }
+    }
+    key="fake_file_8.pjpeg"
+  />
+  <FileRenderer
+    file={
+      Object {
+        "description": "file description 9",
+        "downloadUrl": "/url-path/fake_file_9.pjp",
+        "name": "fake_file_9.pjp",
+      }
+    }
+    key="fake_file_9.pjp"
+  />
+  <FileRenderer
+    file={
+      Object {
+        "description": "file description 10",
+        "downloadUrl": "/url-path/fake_file_10.svg",
+        "name": "fake_file_10.svg",
+      }
+    }
+    key="fake_file_10.svg"
+  />
 </div>
 `;
diff --git a/src/containers/ResponseDisplay/__snapshots__/SubmissionFiles.test.jsx.snap b/src/containers/ResponseDisplay/__snapshots__/SubmissionFiles.test.jsx.snap
index 7149dc3..bb3b9cb 100644
--- a/src/containers/ResponseDisplay/__snapshots__/SubmissionFiles.test.jsx.snap
+++ b/src/containers/ResponseDisplay/__snapshots__/SubmissionFiles.test.jsx.snap
@@ -11,13 +11,6 @@ exports[`SubmissionFiles component snapshot files does not exist 1`] = `
       Submission Files (0)
     </h3>
   </div>
-  <Card.Footer
-    className="text-right"
-  >
-    <Connect(FileDownload)
-      files={Array []}
-    />
-  </Card.Footer>
 </Card>
 `;
 
diff --git a/src/data/constants/files.js b/src/data/constants/files.js
index d8bbfad..7439a1c 100644
--- a/src/data/constants/files.js
+++ b/src/data/constants/files.js
@@ -7,6 +7,11 @@ export const FileTypes = StrictDict({
   png: 'png',
   bmp: 'bmp',
   txt: 'txt',
+  gif: 'gif',
+  jfif: 'jfif',
+  pjpeg: 'pjpeg',
+  pjp: 'pjp',
+  svg: 'svg',
 });
 
 export default FileTypes;