Feature: add auto open share modal config for global. (#474)

* feat(admin): add auto open share modal config for global.

* feat(upload): Apply the flag that disables the automatic open create share modal.

* fix: remove migration and add new config variable to seed script

* chore(translations): improve auto open share modal description

* refactor: run formatter

---------

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/components/upload/Dropzone.tsx

@@ -36,12 +36,12 @@ const Dropzone = ({
   title,
   isUploading,
   maxShareSize,
-  showCreateUploadModalCallback,
+  onFilesChanged,
 }: {
   title?: string;
   isUploading: boolean;
   maxShareSize: number;
-  showCreateUploadModalCallback: (files: FileUpload[]) => void;
+  onFilesChanged: (files: FileUpload[]) => void;
 }) => {
   const t = useTranslate();
 
@@ -69,7 +69,7 @@ const Dropzone = ({
               newFile.uploadingProgress = 0;
               return newFile;
             });
-            showCreateUploadModalCallback(files);
+            onFilesChanged(files);
           }
         }}
         className={classes.dropzone}

frontend/src/components/upload/EditableUpload.tsx

@@ -217,7 +217,7 @@ const EditableUpload = ({
       <Dropzone
         title={t("share.edit.append-upload")}
         maxShareSize={maxShareSize}
-        showCreateUploadModalCallback={appendFiles}
+        onFilesChanged={appendFiles}
         isUploading={isUploading}
       />
       {existingAndUploadedFiles.length > 0 && (

frontend/src/i18n/translations/en-US.ts

@@ -448,8 +448,9 @@ export default {
   "admin.config.share.zip-compression-level.description":
     "Adjust the level to balance between file size and compression speed. Valid values range from 0 to 9, with 0 being no compression and 9 being maximum compression. ",
   "admin.config.share.chunk-size": "Chunk size",
-  "admin.config.share.chunk-size.description":
-    "Adjust the chunk size (in bytes) for your uploads to balance efficiency and reliability according to your internet connection. Smaller chunks can enhance success rates for unstable connections, while larger chunks speed up uploads for stable connections.",
+  "admin.config.share.chunk-size.description": "Adjust the chunk size (in bytes) for your uploads to balance efficiency and reliability according to your internet connection. Smaller chunks can enhance success rates for unstable connections, while larger chunks speed up uploads for stable connections.",
+  "admin.config.share.auto-open-share-modal": "Auto open create share modal",
+  "admin.config.share.auto-open-share-modal.description": "The share creation modal automatically appears when a user selects files, eliminating the need to manually click the button.",
 
   "admin.config.smtp.enabled": "Enabled",
   "admin.config.smtp.enabled.description":

frontend/src/i18n/translations/zh-CN.ts

@@ -358,8 +358,9 @@ export default {
   "admin.config.share.zip-compression-level.description":
     "调整压缩质量来平衡压缩文件的大小和压缩的速度。有效值介于 0 和 9 之间，0 为不压缩，9 为最高质量压缩。 ",
   "admin.config.share.chunk-size": "块大小",
-  "admin.config.share.chunk-size.description":
-    "根据你的互联网连接情况调整上传文件的块大小（以字节为单位），以平衡效率和可靠性。 较小的块有助于提高不稳定网络环境中的上传成功率，而较大的块则可以加快稳定网络环境中的上传速度。",
+  "admin.config.share.chunk-size.description": "根据你的互联网连接情况调整上传文件的块大小（以字节为单位），以平衡效率和可靠性。 较小的块有助于提高不稳定网络环境中的上传成功率，而较大的块则可以加快稳定网络环境中的上传速度。",
+  "admin.config.share.auto-open-share-modal": "自动打开创建共享对话框",
+  "admin.config.share.auto-open-share-modal.description": "每当用户选择完将要被上传的文件后，自动打开创建共享的对话框。",
   "admin.config.smtp.enabled": "启用",
   "admin.config.smtp.enabled.description":
     "是否开启 SMTP，仅当输入主机名、端口、发送邮箱、用户名和密码后开启",

frontend/src/pages/admin/config/[category].tsx

@@ -72,7 +72,7 @@ export default function AppShellDemo() {
   };
 
   const updateConfigVariable = (configVariable: UpdateConfig) => {
-    if (configVariable.key === 'general.appUrl') {
+    if (configVariable.key === "general.appUrl") {
       configVariable.value = sanitizeUrl(configVariable.value);
     }
 
@@ -91,7 +91,7 @@ export default function AppShellDemo() {
   };
 
   const sanitizeUrl = (url: string): string => {
-    return url.endsWith('/') ? url.slice(0, -1) : url;
+    return url.endsWith("/") ? url.slice(0, -1) : url;
   };
 
   useEffect(() => {

frontend/src/pages/upload/index.tsx

@@ -40,6 +40,7 @@ const Upload = ({
   const chunkSize = useRef(parseInt(config.get("share.chunkSize")));
 
   maxShareSize ??= parseInt(config.get("share.maxSize"));
+  const autoOpenCreateUploadModal = config.get("share.autoOpenShareModal");
 
   const uploadFiles = async (share: CreateShare, files: FileUpload[]) => {
     setisUploading(true);
@@ -121,7 +122,6 @@ const Upload = ({
   };
 
   const showCreateUploadModalCallback = (files: FileUpload[]) => {
-    setFiles(files);
     showCreateUploadModal(
       modals,
       {
@@ -139,6 +139,15 @@ const Upload = ({
     );
   };
 
+  const handleDropzoneFilesChanged = (files: FileUpload[]) => {
+    if (autoOpenCreateUploadModal) {
+      setFiles(files);
+      showCreateUploadModalCallback(files);
+    } else {
+      setFiles((oldArr) => [...oldArr, ...files]);
+    }
+  };
+
   useEffect(() => {
     // Check if there are any files that failed to upload
     const fileErrorCount = files.filter(
@@ -191,8 +200,13 @@ const Upload = ({
         </Button>
       </Group>
       <Dropzone
+        title={
+          !autoOpenCreateUploadModal && files.length > 0
+            ? t("share.edit.append-upload")
+            : undefined
+        }
         maxShareSize={maxShareSize}
-        showCreateUploadModalCallback={showCreateUploadModalCallback}
+        onFilesChanged={handleDropzoneFilesChanged}
         isUploading={isUploading}
       />
       {files.length > 0 && (