feat: show file size in file popover (#47)

* feat: show file size in file popover

* chore: update file popover content's props

src/components/FilePopoverContent/__snapshots__/index.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FilePopoverContent component snapshot 1`] = `
+exports[`FilePopoverContent component snapshot default 1`] = `
 <Fragment>
   <div
     className="help-popover-option"
@@ -28,5 +28,62 @@ exports[`FilePopoverContent component snapshot 1`] = `
     <br />
     long descriptive text...
   </div>
+  <div
+    className="help-popover-option"
+  >
+    <strong>
+      <FormattedMessage
+        defaultMessage="File Size"
+        description="Popover title for file size"
+        id="ora-grading.FilePopoverCellContent.fileSizeTitle"
+      />
+    </strong>
+    <br />
+    filesize(6000)
+  </div>
+</Fragment>
+`;
+
+exports[`FilePopoverContent component snapshot invalid size 1`] = `
+<Fragment>
+  <div
+    className="help-popover-option"
+  >
+    <strong>
+      <FormattedMessage
+        defaultMessage="File Name"
+        description="Popover title for file name"
+        id="ora-grading.FilePopoverContent.filePopoverNameTitle"
+      />
+    </strong>
+    <br />
+    some file name
+  </div>
+  <div
+    className="help-popover-option"
+  >
+    <strong>
+      <FormattedMessage
+        defaultMessage="File Description"
+        description="Popover title for file description"
+        id="ora-grading.FilePopoverCellContent.filePopoverDescriptionTitle"
+      />
+    </strong>
+    <br />
+    long descriptive text...
+  </div>
+  <div
+    className="help-popover-option"
+  >
+    <strong>
+      <FormattedMessage
+        defaultMessage="File Size"
+        description="Popover title for file size"
+        id="ora-grading.FilePopoverCellContent.fileSizeTitle"
+      />
+    </strong>
+    <br />
+    Unknown
+  </div>
 </Fragment>
 `;

src/components/FilePopoverContent/index.jsx

@@ -2,33 +2,39 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import filesize from 'filesize';
 
 import messages from './messages';
 
-export const FilePopoverContent = ({ file }) => (
+export const FilePopoverContent = ({ name, description, size }) => (
   <>
     <div className="help-popover-option">
       <strong><FormattedMessage {...messages.filePopoverNameTitle} /></strong>
       <br />
-      {file.name}
+      {name}
     </div>
     <div className="help-popover-option">
       <strong><FormattedMessage {...messages.filePopoverDescriptionTitle} /></strong>
       <br />
-      {file.description}
+      {description}
+    </div>
+    <div className="help-popover-option">
+      <strong><FormattedMessage {...messages.fileSizeTitle} /></strong>
+      <br />
+      {typeof (size) === 'number' ? filesize(size) : 'Unknown'}
     </div>
   </>
 );
 
 FilePopoverContent.defaultProps = {
+  description: '',
+  size: null,
 };
 
 FilePopoverContent.propTypes = {
-  file: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    description: PropTypes.string,
-    downloadURL: PropTypes.string,
-  }).isRequired,
+  name: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  size: PropTypes.number,
 };
 
 export default FilePopoverContent;

src/components/FilePopoverContent/index.test.jsx

@@ -1,29 +1,38 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
+import filesize from 'filesize';
 import FilePopoverContent from '.';
 
+jest.mock('filesize', () => (size) => `filesize(${size})`);
+
 describe('FilePopoverContent', () => {
   describe('component', () => {
     const props = {
-      file: {
-        name: 'some file name',
-        description: 'long descriptive text...',
-        downloadURL: 'this-url-is.working',
-      },
+      name: 'some file name',
+      description: 'long descriptive text...',
+      downloadURL: 'this-url-is.working',
+      size: 6000,
     };
     let el;
     beforeEach(() => {
       el = shallow(<FilePopoverContent {...props} />);
     });
-    test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+    describe('snapshot', () => {
+      test('default', () => expect(el).toMatchSnapshot());
+      test('invalid size', () => {
+        el.setProps({
+          size: null,
+        });
+        expect(el).toMatchSnapshot();
+      });
     });
 
     describe('behavior', () => {
       test('content', () => {
-        expect(el.text()).toContain(props.file.name);
-        expect(el.text()).toContain(props.file.description);
+        expect(el.text()).toContain(props.name);
+        expect(el.text()).toContain(props.description);
+        expect(el.text()).toContain(filesize(props.size));
       });
     });
   });

src/components/FilePopoverContent/messages.js

@@ -11,6 +11,11 @@ const messages = defineMessages({
     defaultMessage: 'File Description',
     description: 'Popover title for file description',
   },
+  fileSizeTitle: {
+    id: 'ora-grading.FilePopoverCellContent.fileSizeTitle',
+    defaultMessage: 'File Size',
+    description: 'Popover title for file size',
+  },
 });
 
 export default messages;

src/components/FilePreview/FileCard.jsx

@@ -14,7 +14,7 @@ export const FileCard = ({ file, children }) => (
   <Card className="file-card" key={file.name}>
     <Collapsible className="file-collapsible" defaultOpen title={<h3>{file.name}</h3>}>
       <div className="preview-panel">
-        <FileInfo><FilePopoverContent file={file} /></FileInfo>
+        <FileInfo><FilePopoverContent {...file} /></FileInfo>
         {children}
       </div>
     </Collapsible>

src/components/FilePreview/__snapshots__/FileCard.test.jsx.snap

@@ -19,13 +19,9 @@ exports[`File Preview Card component snapshot 1`] = `
     >
       <FileInfo>
         <FilePopoverContent
-          file={
-            Object {
-              "description": "test-file description",
-              "downloadUrl": "destination/test-file-name.pdf",
-              "name": "test-file-name.pdf",
-            }
-          }
+          description="test-file description"
+          downloadUrl="destination/test-file-name.pdf"
+          name="test-file-name.pdf"
         />
       </FileInfo>
       <h1>