show label in progress bar when uploading files

core/i18n/resources/en/common.js

@@ -173,6 +173,7 @@ Do you want to proceed?`,
     undefinedName: 'Undefined name',
     unique: 'Unique',
     upload: 'Upload',
+    uploadingFile: 'Uploading file ({{progressPercent}}%)',
     view: 'View',
     warning: 'Warning',
     warning_plural: 'Warnings',

webapp/components/progressBar.js

@@ -5,33 +5,40 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { LinearProgress } from '@mui/material'
 
+import { useI18n } from '@webapp/store/system'
+
 const ProgressBarWithLabel = (props) => {
-  const { className, color, value } = props
+  const { className, color, textKey = null, value } = props
+
+  const i18n = useI18n()
+  const progressPercent = Math.floor(value)
+  const text = textKey ? i18n.t(textKey, { progressPercent }) : `${progressPercent}%`
 
   return (
     <div className={classNames('progress-bar-with-label', className)}>
       <LinearProgress className={className} color={color} value={value} variant="determinate" />
-      <span>{Math.floor(value)}%</span>
+      <span>{text}</span>
     </div>
   )
 }
 
 ProgressBarWithLabel.propTypes = {
   className: PropTypes.string,
   color: PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning', 'inherit']),
+  textKey: PropTypes.string,
   value: PropTypes.number,
 }
 
 const ProgressBar = (props) => {
-  const { className: classNameProp, color, indeterminate = true, progress = 0, showText = true } = props
+  const { className: classNameProp, color, indeterminate = true, progress = 0, showText = true, textKey = null } = props
 
   const className = classNames('progress-bar', classNameProp)
 
   if (indeterminate) {
     return <LinearProgress className={className} color={color} />
   }
   if (showText) {
-    return <ProgressBarWithLabel className={className} color={color} value={progress} />
+    return <ProgressBarWithLabel className={className} color={color} textKey={textKey} value={progress} />
   }
   return <LinearProgress className={className} color={color} variant="determinate" value={progress} />
 }
@@ -42,6 +49,7 @@ ProgressBar.propTypes = {
   indeterminate: PropTypes.bool,
   progress: PropTypes.number,
   showText: PropTypes.bool,
+  textKey: PropTypes.string,
 }
 
 export default ProgressBar

webapp/components/survey/SurveyCreate/SurveyCreate.js

@@ -13,10 +13,11 @@ import { RecordCycle } from '@core/record/recordCycle'
 
 import { appModuleUri, homeModules } from '@webapp/app/appModules'
 
+import { contentTypes } from '@webapp/service/api'
 import { useI18n } from '@webapp/store/system'
 import { useSurveyInfo } from '@webapp/store/survey'
+import { useUserIsSystemAdmin } from '@webapp/store/user'
 import { TestId } from '@webapp/utils/testId'
-import { contentTypes } from '@webapp/service/api'
 
 import ButtonGroup from '@webapp/components/form/buttonGroup'
 import { FormItem, Input } from '@webapp/components/form/Input'
@@ -27,7 +28,6 @@ import { Button, Dropzone, ProgressBar, RadioButtonGroup } from '@webapp/compone
 
 import { createTypes, importSources, useCreateSurvey } from './store'
 import { SurveyDropdown } from '../SurveyDropdown'
-import { useUserIsSystemAdmin } from '@webapp/store/user'
 
 const fileMaxSizeDefault = 1000 // 1GB
 const fileMaxSizeSystemAdmin = 2000 // 2GB
@@ -170,7 +170,7 @@ const SurveyCreate = (props) => {
         <>
           {uploading && uploadProgressPercent >= 0 ? (
             <div className="row">
-              <ProgressBar indeterminate={false} progress={uploadProgressPercent} />
+              <ProgressBar indeterminate={false} progress={uploadProgressPercent} textKey="common.uploadingFile" />
             </div>
           ) : (
             <>

webapp/components/survey/SurveyCreate/SurveyCreate.scss

@@ -37,4 +37,8 @@
   .cycle-dropdown {
     width: 10rem;
   }
+
+  .progress-bar-with-label {
+    flex-direction: column;
+  }
 }

webapp/views/App/FileUploadDialog/FileUploadDialog.js

@@ -48,7 +48,7 @@ export const FileUploadDialog = () => {
       <ModalBody>
         <Dropzone accept={accept} maxSize={maxSize} onDrop={onFilesDrop} droppedFiles={files} />
         {uploading && uploadProgressPercent >= 0 && (
-          <ProgressBar indeterminate={false} progress={uploadProgressPercent} />
+          <ProgressBar indeterminate={false} progress={uploadProgressPercent} textKey="common.uploadingFile" />
         )}
       </ModalBody>
       <ModalFooter>

webapp/views/App/FileUploadDialog/FileUploadDialog.scss

@@ -2,4 +2,8 @@
   .dropzone {
     height: 15rem;
   }
+
+  .progress-bar-with-label {
+    flex-direction: column;
+  }
 }