chore: ui implement for self assessment

chore: delete file

Author: leangseu-edx

src/components/FileUpload/ActionCell.jsx

@@ -1,24 +1,35 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { IconButton, Icon } from '@edx/paragon';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Delete, Preview } from '@edx/paragon/icons';
 
 import messages from './messages';
 
-const ActionCell = () => {
+const ActionCell = ({
+  onDeletedFile,
+  disabled,
+  row,
+}) => {
   const { formatMessage } = useIntl();
+  const deleteFile = useCallback(async () => {
+    console.log('deleteFile', row.index);
+    await onDeletedFile(row.index);
+  }, []);
   return (
     <>
       <IconButton
         src={Delete}
         alt={formatMessage(messages.deleteButtonAltText)}
         iconAs={Icon}
+        onClick={deleteFile}
+        disabled={disabled}
       />
       <IconButton
         src={Preview}
         alt={formatMessage(messages.previewButtonAltText)}
         iconAs={Icon}
+        disabled={disabled}
       />
     </>
   );

src/components/FileUpload/__snapshots__/ActionCell.test.jsx.snap

@@ -5,6 +5,7 @@ exports[`<ActionCell /> renders 1`] = `
   <IconButton
     alt="Delete"
     iconAs="Icon"
+    onClick={[Function]}
     src={[Function]}
   />
   <IconButton

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

@@ -25,7 +25,7 @@ exports[`<FileUpload /> renders default 1`] = `
             "accessor": "fileSize",
           },
           Object {
-            "Cell": "ActionCell",
+            "Cell": [Function],
             "Header": "Actions",
             "accessor": "actions",
           },
@@ -106,7 +106,7 @@ exports[`<FileUpload /> renders read only 1`] = `
             "accessor": "fileSize",
           },
           Object {
-            "Cell": "ActionCell",
+            "Cell": [Function],
             "Header": "Actions",
             "accessor": "actions",
           },

src/components/FileUpload/index.jsx

@@ -14,7 +14,7 @@ import messages from './messages';
 
 import './styles.scss';
 
-const FileUpload = ({ isReadOnly, uploadedFiles, onFileUploaded }) => {
+const FileUpload = ({ isReadOnly, uploadedFiles, onFileUploaded, onDeletedFile }) => {
   const { formatMessage } = useIntl();
 
   const {
@@ -55,7 +55,7 @@ const FileUpload = ({ isReadOnly, uploadedFiles, onFileUploaded }) => {
               {
                 Header: formatMessage(messages.fileActionsTitle),
                 accessor: 'actions',
-                Cell: ActionCell,
+                Cell: (props) => <ActionCell {...props} onDeletedFile={onDeletedFile} disabled={isReadOnly} />,
               },
             ]}
           />
@@ -81,6 +81,7 @@ const FileUpload = ({ isReadOnly, uploadedFiles, onFileUploaded }) => {
 FileUpload.defaultProps = {
   isReadOnly: false,
   uploadedFiles: [],
+  onFileUploaded: () => { },
 };
 FileUpload.propTypes = {
   isReadOnly: PropTypes.bool,
@@ -91,7 +92,7 @@ FileUpload.propTypes = {
       fileSize: PropTypes.number,
     }),
   ),
-  onFileUploaded: PropTypes.func.isRequired,
+  onFileUploaded: PropTypes.func,
 };
 
 export default FileUpload;

src/components/FileUpload/index.test.jsx

@@ -26,6 +26,7 @@ describe('<FileUpload />', () => {
       },
     ],
     onFileUploaded: jest.fn(),
+    onDeletedFile: jest.fn().mockName('onDeletedFile'),
   };
 
   const mockHooks = (overrides) => {

src/components/InfoPopover/index.jsx

@@ -22,7 +22,7 @@ export const InfoPopover = ({ onClick, children }) => {
   return (
     <OverlayTrigger
       trigger="focus"
-      placement="right-end"
+      placement="bottom"
       flip
       overlay={(
         <Popover id="info-popover" className="overlay-help-popover">

src/components/Rubric/CriterionContainer/RadioCriterion.jsx

@@ -42,7 +42,7 @@ const RadioCriterion = ({ isGrading, criterion }) => {
 RadioCriterion.propTypes = {
   isGrading: PropTypes.bool.isRequired,
   criterion: PropTypes.shape({
-    optionsValue: PropTypes.string.isRequired,
+    optionsValue: PropTypes.string,
     optionsIsInvalid: PropTypes.bool.isRequired,
     optionsOnChange: PropTypes.func.isRequired,
     name: PropTypes.string.isRequired,

src/components/TextResponse/index.jsx

@@ -6,12 +6,12 @@ import RichTextEditor from 'components/TextResponse/RichTextEditor';
 
 import './index.scss';
 
-const TextResponse = ({ submissionConfig, value, onChange }) => {
+const TextResponse = ({ submissionConfig, value, onChange, isReadOnly }) => {
   const { textResponseConfig } = submissionConfig;
   const { optional, enabled } = textResponseConfig;
   const props = {
     optional,
-    disabled: !enabled,
+    disabled: !enabled || isReadOnly,
     value,
     onChange,
   };
@@ -34,7 +34,7 @@ TextResponse.propTypes = {
     }),
   }).isRequired,
   value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
+  onChange: PropTypes.func,
 };
 
 export default TextResponse;

src/components/TextResponse/index.scss

@@ -1,5 +1,13 @@
+@import "@edx/paragon/scss/core/core.scss";
+
 .textarea-response {
   min-height: 200px;
   max-height: 300px;
   overflow-y: scroll;
+}
+
+.tox-tinymce--disabled {
+  background-color: $input-disabled-bg;
+  // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+  opacity: 1;
 }

src/components/TextResponse/index.test.jsx

@@ -15,6 +15,7 @@ describe('<TextResponse />', () => {
     },
     value: 'value',
     onChange: jest.fn().mockName('onChange'),
+    isReadOnly: false,
   };
 
   it('render Text Editor ', () => {