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
2022-01-24 14:30:07 -05:00
parent f7341efc71
commit 46ebc899ee
8 changed files with 213 additions and 50 deletions
--- 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 = {
--- 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', () => {
--- 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={
--- 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;
+  }
 }
--- 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>
    );
  }
--- 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>
 `;
--- 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>
 `;

--- 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;