feat: add helper text to standalone file uploader and update build script

Author: ErykKul

package.json

@@ -64,7 +64,7 @@
   "scripts": {
     "start": "vite --base=/spa",
     "build": "tsc && vite build",
-    "build-uploader": "vite build --config vite.config.uploader.ts && cp -r public/locales dist-uploader/ && cp src/standalone-uploader/dvwebloaderV2.html dist-uploader/",
+    "build-uploader": "vite build --config vite.config.uploader.ts && cp -r public/locales dist-uploader/ && cp src/standalone-uploader/dvwebloaderV2.html src/standalone-uploader/embeddedDvWebloader.html dist-uploader/",
     "build-keycloak-theme": "npm run build && keycloakify build",
     "preview": "vite preview",
     "lint": "npm run typecheck && npm run lint:eslint && npm run lint:stylelint && npm run lint:prettier",

src/sections/shared/file-uploader/FileUploaderPanel.module.scss

@@ -0,0 +1,16 @@
+@import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
+
+.helper_text {
+  color: $dv-subtext-color;
+  font-size: 14px;
+  margin-bottom: 1rem;
+
+  a {
+    color: $dv-primary-color;
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

src/sections/shared/file-uploader/FileUploaderPanel.tsx

@@ -6,6 +6,7 @@
  */
 
 import { useMemo, useCallback } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
 import { useBlocker, useNavigate } from 'react-router-dom'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
 import { QueryParamKey, Route } from '@/sections/Route.enum'
@@ -14,6 +15,7 @@ import { ReplaceFileReferrer } from '@/sections/replace-file/ReplaceFileReferrer
 import { useFileUploaderContext } from './context/FileUploaderContext'
 import { FileUploaderPanelCore } from './FileUploaderPanelCore'
 import { ConfirmLeaveModal } from './confirm-leave-modal/ConfirmLeaveModal'
+import styles from './FileUploaderPanel.module.scss'
 
 interface FileUploaderPanelProps {
   fileRepository: FileRepository
@@ -27,6 +29,7 @@ const FileUploaderPanel = ({
   referrer
 }: FileUploaderPanelProps) => {
   const navigate = useNavigate()
+  const { t } = useTranslation('shared')
 
   const {
     fileUploaderState: { files, isSaving, uploadingToCancelMap },
@@ -80,6 +83,21 @@ const FileUploaderPanel = ({
 
   return (
     <>
+      <p className={styles.helper_text}>
+        <Trans
+          t={t}
+          i18nKey="fileUploader.supportedFiles"
+          components={{
+            anchor: (
+              <a
+                href="https://guides.dataverse.org/en/latest/user/dataset-management.html#tabular-data-files"
+                target="_blank"
+                rel="noreferrer"
+              />
+            )
+          }}
+        />
+      </p>
       <FileUploaderPanelCore
         fileRepository={fileRepository}
         datasetPersistentId={datasetPersistentId}

src/sections/shared/file-uploader/file-upload-input/FileUploadInput.tsx

@@ -1,7 +1,7 @@
 import { ChangeEventHandler, DragEventHandler, memo, useCallback, useRef, useState } from 'react'
 import { Accordion, Button, Card, ProgressBar } from '@iqss/dataverse-design-system'
 import { ExclamationTriangle, Plus, XLg } from 'react-bootstrap-icons'
-import { Trans, useTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 import { toast } from 'react-toastify'
 import cn from 'classnames'
 import MimeTypeDisplay from '@/files/domain/models/FileTypeToFriendlyTypeMap'
@@ -180,22 +180,6 @@ const FileUploadInput = ({ fileRepository, datasetPersistentId }: FileUploadInpu
 
   return (
     <div>
-      <p className={styles.helper_text}>
-        <Trans
-          t={t}
-          i18nKey="fileUploader.supportedFiles"
-          components={{
-            anchor: (
-              <a
-                href="https://guides.dataverse.org/en/latest/user/dataset-management.html#tabular-data-files"
-                target="_blank"
-                rel="noreferrer"
-              />
-            )
-          }}
-        />
-      </p>
-
       <Accordion defaultActiveKey="0">
         <Accordion.Item eventKey="0">
           <Accordion.Header>{t('fileUploader.accordionTitle')}</Accordion.Header>

src/standalone-uploader/StandaloneFileUploaderPanel.module.scss

@@ -0,0 +1,16 @@
+@import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
+
+.helper_text {
+  color: $dv-subtext-color;
+  font-size: 14px;
+  margin-bottom: 1rem;
+
+  a {
+    color: $dv-primary-color;
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

src/standalone-uploader/StandaloneFileUploaderPanel.tsx

@@ -6,9 +6,11 @@
  */
 
 import { useEffect, useCallback } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
 import { UploaderFileRepository } from '@/sections/shared/file-uploader/types'
 import { useFileUploaderContext } from '@/sections/shared/file-uploader/context/FileUploaderContext'
 import { FileUploaderPanelCore } from '@/sections/shared/file-uploader/FileUploaderPanelCore'
+import styles from './StandaloneFileUploaderPanel.module.scss'
 
 interface StandaloneFileUploaderPanelProps {
   fileRepository: UploaderFileRepository
@@ -21,6 +23,7 @@ export const StandaloneFileUploaderPanel = ({
   datasetPersistentId,
   siteUrl
 }: StandaloneFileUploaderPanelProps) => {
+  const { t } = useTranslation('shared')
   const {
     fileUploaderState: { files, isSaving, uploadingToCancelMap }
   } = useFileUploaderContext()
@@ -62,11 +65,28 @@ export const StandaloneFileUploaderPanel = ({
   }, [getDatasetUrl])
 
   return (
-    <FileUploaderPanelCore
-      fileRepository={fileRepository}
-      datasetPersistentId={datasetPersistentId}
-      onCancel={handleCancel}
-      onFilesAddedSuccess={handleFilesAddedSuccess}
-    />
+    <>
+      <p className={styles.helper_text}>
+        <Trans
+          t={t}
+          i18nKey="fileUploader.supportedFiles"
+          components={{
+            anchor: (
+              <a
+                href="https://guides.dataverse.org/en/latest/user/dataset-management.html#tabular-data-files"
+                target="_blank"
+                rel="noreferrer"
+              />
+            )
+          }}
+        />
+      </p>
+      <FileUploaderPanelCore
+        fileRepository={fileRepository}
+        datasetPersistentId={datasetPersistentId}
+        onCancel={handleCancel}
+        onFilesAddedSuccess={handleFilesAddedSuccess}
+      />
+    </>
   )
 }

src/standalone-uploader/embeddedDvWebloader.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Upload Files</title>
+    <!-- DVWebloader V2 Embedded Mode - for use in iframe within Dataverse JSF pages -->
+    <!-- Configuration: useS3Tagging comes from URL param (from Dataverse JVM setting) -->
+    <script>
+        window.dvWebloaderConfig = {
+            maxRetries: 3,
+            uploadTimeoutMs: 300000,
+            disableMD5Checksum: false
+        };
+    </script>
+    <style>
+        body { 
+            margin: 0; 
+            padding: 10px; 
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background-color: transparent;
+        }
+    </style>
+    <script type="module" src="dvwebloader-v2.js"></script>
+</head>
+<body>
+    <div id="root"></div>
+</body>
+</html>