chore: add upload file limit message (#122)

* chore: add upload file limit message

* chore: lint update

* chore: fix due date

* chore: move rubric detail to tooltip

src/components/FileUpload/index.jsx

@@ -6,7 +6,7 @@ import { DataTable, Dropzone } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { nullMethod } from 'utils';
-import { useActiveStepName, useFileUploadEnabled } from 'hooks/app';
+import { useActiveStepName, useFileUploadConfig } from 'hooks/app';
 import { useViewStep } from 'hooks/routing';
 import FilePreview from 'components/FilePreview';
 import { stepNames } from 'constants';
@@ -20,7 +20,11 @@ import messages from './messages';
 import './styles.scss';
 
 export const createFileActionCell = ({ onDeletedFile, isReadOnly }) => (props) => (
-  <ActionCell {...props} onDeletedFile={onDeletedFile} disabled={isReadOnly} />
+  <ActionCell
+    {...props}
+    onDeletedFile={onDeletedFile}
+    disabled={isReadOnly}
+  />
 );
 
 const FileUpload = ({
@@ -40,8 +44,11 @@ const FileUpload = ({
   } = useFileUploadHooks({ onFileUploaded });
   const viewStep = useViewStep();
   const activeStepName = useActiveStepName();
+  const {
+    enabled, fileUploadLimit, allowedExtensions, maxFileSize,
+  } = useFileUploadConfig() || {};
 
-  if (!useFileUploadEnabled() || viewStep === stepNames.studentTraining) {
+  if (!enabled || viewStep === stepNames.studentTraining) {
     return null;
   }
 
@@ -70,21 +77,29 @@ const FileUpload = ({
   return (
     <div>
       <h3>{formatMessage(messages.fileUploadTitle)}</h3>
-      {uploadedFiles.length > 0 && isReadOnly && <FilePreview defaultCollapsePreview={defaultCollapsePreview} />}
+      {uploadedFiles.length > 0 && isReadOnly && (
+        <FilePreview defaultCollapsePreview={defaultCollapsePreview} />
+      )}
       <b>{formatMessage(messages.uploadedFilesTitle)}</b>
       <DataTable
         itemCount={uploadedFiles.length}
         data={uploadedFiles.map((file) => ({
           ...file,
           size: typeof file.size === 'number' ? filesize(file.size) : 'Unknown',
         }))}
-        tableActions={[
-          <FileDownload files={uploadedFiles} />,
-        ]}
+        tableActions={[<FileDownload files={uploadedFiles} />]}
         columns={columns}
       />
-      {!isReadOnly && (
-        <Dropzone multiple onProcessUpload={onProcessUpload} progressVariant="bar" />
+      {!isReadOnly && fileUploadLimit > uploadedFiles.length && (
+        <Dropzone
+          multiple
+          onProcessUpload={onProcessUpload}
+          progressVariant="bar"
+          accept={{
+            '*': (allowedExtensions || []).map((ext) => `.${ext}`),
+          }}
+          maxSize={maxFileSize}
+        />
       )}
       {!isReadOnly && isModalOpen && (
         <UploadConfirmModal

src/components/InfoPopover/index.jsx

@@ -20,7 +20,7 @@ import messages from './messages';
 export const InfoPopover = ({ onClick, children }) => {
   const { formatMessage } = useIntl();
   return (
-    <div className="d-inline-block">
+    <div className="d-inline-block" title={formatMessage(messages.rubricDetails)}>
       <OverlayTrigger
         trigger="focus"
         placement="bottom"
@@ -40,9 +40,6 @@ export const InfoPopover = ({ onClick, children }) => {
           size="inline"
         />
       </OverlayTrigger>
-      <span className="ml-2.5 micro">
-        Rubric details
-      </span>
     </div>
   );
 };

src/data/services/lms/hooks/selectors/oraConfig.ts

@@ -28,8 +28,8 @@ export const usePrompts = () => useORAConfigData()?.prompts;
 export const useSubmissionConfig = (): types.SubmissionConfig | undefined => (
   useORAConfigData()?.submissionConfig
 );
-export const useFileUploadEnabled = (): boolean | undefined => (
-  useSubmissionConfig()?.fileResponseConfig?.enabled
+export const useFileUploadConfig = (): types.FileResponseConfig | undefined => (
+  useSubmissionConfig()?.fileResponseConfig
 );
 
 export const useAssessmentStepConfig = (): types.AssessmentStepConfig | undefined => (

src/data/services/lms/types/blockInfo.ts

@@ -22,6 +22,7 @@ export interface FileResponseConfig {
   enabled: boolean,
   optional: boolean,
   fileUploadLimit: number,
+  maxFileSize: number,
   allowedExtensions: string[],
   blockedExtensions: string[],
   fileTypeDescription: string,

src/hooks/app.js

@@ -33,6 +33,7 @@ export const {
   useStepState,
   useSubmissionConfig,
   useTextResponses,
+  useFileUploadConfig,
   useTrainingStepIsCompleted,
 } = lmsSelectors;
 

src/views/XBlockView/StatusRow/DueDateMessage/useDueDateMessage.js

@@ -13,7 +13,7 @@ const useDueDateMessage = () => {
   const { formatMessage } = useIntl();
   const { activeStepName, stepState } = useGlobalState();
   const stepConfig = useActiveStepConfig();
-  const dispDate = ({ value }) => {
+  const dispDate = (value) => {
     const date = new Date(moment(value));
     return date.toLocaleString();
   };