refactor: fix mobx action/computed hygiene and reaction leak

- Add FileStore.reset() action; was mutating observables outside action
- Move sort to sortedFiles computed; recalculates only when files change
- Dispose reaction on unmount to prevent leak

Author: yordan-st

packages/pluggableWidgets/file-uploader-web/src/components/FileUploaderRoot.tsx

@@ -34,21 +34,15 @@ export const FileUploaderRoot = observer((props: FileUploaderContainerProps): Re
             )}
 
             <div className={"files-list"}>
-                {[...(rootStore.files ?? [])]
-                    .sort((a, b) => {
-                        const isErrorA = a.fileStatus === "validationError" ? 1 : 0;
-                        const isErrorB = b.fileStatus === "validationError" ? 1 : 0;
-                        return isErrorA - isErrorB;
-                    })
-                    .map(fileStore => {
-                        return (
-                            <FileEntryContainer
-                                store={fileStore}
-                                key={fileStore.key}
-                                actions={props.enableCustomButtons ? props.customButtons : undefined}
-                            />
-                        );
-                    })}
+                {rootStore.sortedFiles.map(fileStore => {
+                    return (
+                        <FileEntryContainer
+                            store={fileStore}
+                            key={fileStore.key}
+                            actions={props.enableCustomButtons ? props.customButtons : undefined}
+                        />
+                    );
+                })}
             </div>
         </div>
     );

packages/pluggableWidgets/file-uploader-web/src/stores/FileStore.ts

@@ -63,7 +63,8 @@ export class FileStore {
             upload: action,
             fetchMxObject: action,
             markMissing: action,
-            markError: action
+            markError: action,
+            reset: action
         });
     }
 
@@ -80,6 +81,12 @@ export class FileStore {
         this.errorType = errorType;
     }
 
+    reset(): void {
+        this.errorType = undefined;
+        this.errorDescription = undefined;
+        this.fileStatus = "new";
+    }
+
     canExecute(listAction: ListActionValue): boolean {
         if (!this._objectItem) {
             return false;

packages/pluggableWidgets/file-uploader-web/src/stores/FileUploaderStore.ts

@@ -28,6 +28,7 @@ export class FileUploaderStore {
     _maxFileSize = 0;
     _maxFilesPerUpload: DynamicValue<Big> | undefined;
     _maxFilesPerBatch: DynamicValue<Big> | undefined;
+    _disposeRetryReaction: (() => void) | undefined;
 
     errorMessage?: string = undefined;
 
@@ -89,12 +90,13 @@ export class FileUploaderStore {
             _maxFilesPerUpload: observable,
             _maxFilesPerBatch: observable,
             isFileUploadLimitReached: computed,
-            warningMessage: computed
+            warningMessage: computed,
+            sortedFiles: computed
         });
 
         this.updateProps(props);
 
-        reaction(
+        this._disposeRetryReaction = reaction(
             () =>
                 this.files.filter(
                     f =>
@@ -167,6 +169,14 @@ export class FileUploaderStore {
         return activeFiles.length >= this.maxFilesPerUpload;
     }
 
+    get sortedFiles(): FileStore[] {
+        return [...this.files].sort((a, b) => {
+            const isErrorA = a.fileStatus === "validationError" ? 1 : 0;
+            const isErrorB = b.fileStatus === "validationError" ? 1 : 0;
+            return isErrorA - isErrorB;
+        });
+    }
+
     get warningMessage(): string | undefined {
         if (this.isFileUploadLimitReached) {
             return this.translations.get("uploadLimitReachedMessage", this.maxFilesPerUpload.toString());
@@ -205,15 +215,17 @@ export class FileUploaderStore {
 
         for (let i = 0; i < Math.min(slots, waiting.length); i++) {
             const file = waiting[i];
-            file.errorType = undefined;
-            file.errorDescription = undefined;
-            file.fileStatus = "new";
+            file.reset();
             if (file.validate()) {
                 file.upload();
             }
         }
     }
 
+    dispose(): void {
+        this._disposeRetryReaction?.();
+    }
+
     processDrop(acceptedFiles: File[], fileRejections: FileRejection[]): void {
         if (!this.objectCreationHelper.canCreateFiles) {
             console.error(

packages/pluggableWidgets/file-uploader-web/src/utils/useRootStore.ts

@@ -13,5 +13,9 @@ export function useRootStore(props: FileUploaderContainerProps): FileUploaderSto
         rootStore.updateProps(props);
     }, [rootStore, props]);
 
+    useEffect(() => {
+        return () => rootStore.dispose();
+    }, [rootStore]);
+
     return rootStore;
 }