improve(uploadFiles): move upload files related props to its own oject

Author: v-tarasevich-blitz-brain

datahub-web-react/src/alchemy-components/components/Editor/Editor.tsx

@@ -54,11 +54,7 @@ export const Editor = forwardRef((props: EditorProps, ref) => {
         dataTestId,
         onKeyDown,
         hideBorder,
-        uploadFile,
-        onFileUploadAttempt,
-        onFileUploadFailed,
-        onFileUploadSucceeded,
-        onFileDownloadView,
+        uploadFileProps,
     } = props;
     const { manager, state, getContext } = useRemirror({
         extensions: () => [
@@ -77,11 +73,7 @@ export const Editor = forwardRef((props: EditorProps, ref) => {
             new HistoryExtension({}),
             new HorizontalRuleExtension({}),
             new FileDragDropExtension({
-                onFileUpload: uploadFile,
-                onFileUploadAttempt,
-                onFileUploadFailed,
-                onFileUploadSucceeded,
-                onFileDownloadView,
+                uploadFileProps,
             }),
             new GapCursorExtension(), // required to allow cursor placement next to non-editable inline elements
             new ImageExtension({ enableResizing: !readOnly }),

datahub-web-react/src/alchemy-components/components/Editor/extensions/fileDragDrop/FileDragDropExtension.tsx

@@ -31,9 +31,8 @@ import {
 import { FileUploadFailureType, FileUploadSource } from '@components/components/Editor/types';
 import { notification } from '@components/components/Notification/notification';
 
-interface FileDragDropOptions {
+interface FileUploadProps {
     onFileUpload?: (file: File) => Promise<string>;
-    supportedTypes?: string[];
     onFileUploadAttempt?: (fileType: string, fileSize: number, source: FileUploadSource) => void;
     onFileUploadFailed?: (
         fileType: string,
@@ -46,6 +45,11 @@ interface FileDragDropOptions {
     onFileDownloadView?: (fileType: string, fileSize: number) => void;
 }
 
+interface FileDragDropOptions {
+    uploadFileProps?: FileUploadProps;
+    supportedTypes?: string[];
+}
+
 /**
  * The FileDragDrop extension allows users to drag and drop files into the editor.
  * It creates file nodes that render differently based on file type (images, PDFs, etc.)
@@ -141,12 +145,12 @@ class FileDragDropExtension extends NodeExtension<FileDragDropOptions> {
         // Process each file
         const fileArray = Array.from(files);
         const processPromises = fileArray.map(async (file) => {
-            this.options.onFileUploadAttempt?.(file.type, file.size, 'drag-and-drop');
+            this.options.uploadFileProps?.onFileUploadAttempt?.(file.type, file.size, 'drag-and-drop');
 
             const validation = validateFile(file, { allowedTypes: supportedTypes });
             if (!validation.isValid) {
                 console.error(validation.error);
-                this.options.onFileUploadFailed?.(
+                this.options.uploadFileProps?.onFileUploadFailed?.(
                     file.type,
                     file.size,
                     'drag-and-drop',
@@ -181,14 +185,14 @@ class FileDragDropExtension extends NodeExtension<FileDragDropOptions> {
             view.dispatch(transaction);
 
             // Upload file if handler is provided
-            if (this.options.onFileUpload) {
+            if (this.options.uploadFileProps?.onFileUpload) {
                 try {
-                    const finalUrl = await this.options.onFileUpload(file);
+                    const finalUrl = await this.options.uploadFileProps.onFileUpload(file);
                     this.updateNodeWithUrl(view, placeholderAttrs.id, finalUrl);
-                    this.options.onFileUploadSucceeded?.(file.type, file.size, 'drag-and-drop');
+                    this.options.uploadFileProps.onFileUploadSucceeded?.(file.type, file.size, 'drag-and-drop');
                 } catch (uploadError) {
                     console.error(uploadError);
-                    this.options.onFileUploadFailed?.(
+                    this.options.uploadFileProps.onFileUploadFailed?.(
                         file.type,
                         file.size,
                         'drag-and-drop',
@@ -202,7 +206,7 @@ class FileDragDropExtension extends NodeExtension<FileDragDropOptions> {
                     });
                 }
             } else {
-                this.options.onFileUploadFailed?.(
+                this.options.uploadFileProps?.onFileUploadFailed?.(
                     file.type,
                     file.size,
                     'drag-and-drop',
@@ -215,7 +219,7 @@ class FileDragDropExtension extends NodeExtension<FileDragDropOptions> {
             }
         } catch (error) {
             console.error(error);
-            this.options.onFileUploadFailed?.(
+            this.options.uploadFileProps?.onFileUploadFailed?.(
                 file.type,
                 file.size,
                 'drag-and-drop',
@@ -382,7 +386,9 @@ class FileDragDropExtension extends NodeExtension<FileDragDropOptions> {
     ReactComponent: ComponentType<NodeViewComponentProps> = (props) => (
         <FileNodeView
             {...props}
-            onFileDownloadView={(fileType, fileSize) => this.options.onFileDownloadView?.(fileType, fileSize)}
+            onFileDownloadView={(fileType, fileSize) =>
+                this.options.uploadFileProps?.onFileDownloadView?.(fileType, fileSize)
+            }
         />
     );
 
@@ -405,12 +411,14 @@ const decoratedExt = extension<FileDragDropOptions>({
     handlerKeys: [],
     customHandlerKeys: [],
     defaultOptions: {
-        onFileUpload: async (_file: File) => '',
+        uploadFileProps: {
+            onFileUpload: async (_file: File) => '',
+            onFileUploadAttempt: () => {},
+            onFileUploadFailed: () => {},
+            onFileUploadSucceeded: () => {},
+            onFileDownloadView: () => {},
+        },
         supportedTypes: SUPPORTED_FILE_TYPES,
-        onFileUploadAttempt: () => {},
-        onFileUploadFailed: () => {},
-        onFileUploadSucceeded: () => {},
-        onFileDownloadView: () => {},
     },
 })(FileDragDropExtension);
 

datahub-web-react/src/alchemy-components/components/Editor/toolbar/FileUploadButton.tsx

@@ -26,7 +26,7 @@ export const FileUploadButton = () => {
     const [showDropdown, setShowDropdown] = useState(false);
 
     // Hide the button when uploading of files is disabled
-    if (!fileExtension.options.onFileUpload) return null;
+    if (!fileExtension.options.uploadFileProps?.onFileUpload) return null;
 
     return (
         <Dropdown

datahub-web-react/src/alchemy-components/components/Editor/toolbar/FileUploadContent.tsx

@@ -54,7 +54,8 @@ export const FileUploadContent = ({ hideDropdown }: Props) => {
         if (files.length === 0) return;
 
         const supportedTypes = SUPPORTED_FILE_TYPES;
-        const { onFileUpload, onFileUploadAttempt, onFileUploadFailed, onFileUploadSucceeded } = fileExtension.options;
+        const { onFileUpload, onFileUploadAttempt, onFileUploadFailed, onFileUploadSucceeded } =
+            fileExtension.options.uploadFileProps || {};
 
         try {
             // Process files concurrently

datahub-web-react/src/alchemy-components/components/Editor/toolbar/Toolbar.tsx

@@ -67,7 +67,7 @@ export const Toolbar = ({ styles }: Props) => {
     const remirrorContext = useRemirrorContext();
     const fileExtension = remirrorContext.getExtension(FileDragDropExtension);
 
-    const shouldShowImageButtonV2 = documentationFileUploadV1 && fileExtension.options.onFileUpload;
+    const shouldShowImageButtonV2 = documentationFileUploadV1 && fileExtension.options.uploadFileProps?.onFileUpload;
 
     return (
         <Container style={styles}>

datahub-web-react/src/alchemy-components/components/Editor/types.ts

@@ -7,6 +7,20 @@ export enum FileUploadFailureType {
     UNKNOWN = 'unknown',
 }
 
+export interface FileUploadProps {
+    onFileUpload?: (file: File) => Promise<string>;
+    onFileUploadAttempt?: (fileType: string, fileSize: number, source: FileUploadSource) => void;
+    onFileUploadFailed?: (
+        fileType: string,
+        fileSize: number,
+        source: FileUploadSource,
+        failureType: FileUploadFailureType,
+        comment?: string,
+    ) => void;
+    onFileUploadSucceeded?: (fileType: string, fileSize: number, source: FileUploadSource) => void;
+    onFileDownloadView?: (fileType: string, fileSize: number) => void;
+}
+
 export type EditorProps = {
     readOnly?: boolean;
     content?: string;
@@ -19,15 +33,5 @@ export type EditorProps = {
     dataTestId?: string;
     onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     hideBorder?: boolean;
-    uploadFile?: (file: File) => Promise<string>;
-    onFileUploadAttempt?: (fileType: string, fileSize: number, source: FileUploadSource) => void;
-    onFileUploadFailed?: (
-        fileType: string,
-        fileSize: number,
-        source: FileUploadSource,
-        failureType: FileUploadFailureType,
-        comment?: string,
-    ) => void;
-    onFileUploadSucceeded?: (fileType: string, fileSize: number, source: FileUploadSource) => void;
-    onFileDownloadView?: (fileType: string, fileSize: number) => void;
+    uploadFileProps?: FileUploadProps;
 };

datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/AboutFieldTab.tsx

@@ -103,7 +103,12 @@ export function AboutFieldTab({ properties }: AboutFieldTabProps) {
                         <FieldDescription
                             expandedField={expandedField}
                             editableFieldInfo={editableFieldInfo}
-                            editorProps={{ uploadFile, ...uploadFileAnalyticsCallbacks }}
+                            editorProps={{
+                                uploadFileProps: {
+                                    onFileUpload: uploadFile,
+                                    ...uploadFileAnalyticsCallbacks,
+                                },
+                            }}
                         />
                         <FieldTags
                             expandedField={expandedField}

datahub-web-react/src/app/entityV2/shared/tabs/Documentation/components/DescriptionEditor.tsx

@@ -214,8 +214,10 @@ export const DescriptionEditor = ({ onComplete }: DescriptionEditorProps) => {
                         content={updatedDescription}
                         onChange={handleEditorChange}
                         placeholder="Describe this asset to make it more discoverable. Tag @user or reference @asset to make your docs come to life!"
-                        uploadFile={uploadFile}
-                        {...uploadFileAnalyticsCallbacks}
+                        uploadFileProps={{
+                            onFileUpload: uploadFile,
+                            ...uploadFileAnalyticsCallbacks,
+                        }}
                         hideBorder
                     />
                 </EditorContainer>

datahub-web-react/src/app/entityV2/summary/documentation/EditDescriptionModal.tsx

@@ -89,8 +89,10 @@ export default function EditDescriptionModal({
                 onChange={(description) => setUpdatedDescription(description)}
                 toolbarStyles={toolbarStyles}
                 dataTestId="description-editor"
-                uploadFile={uploadFile}
-                {...uploadFileAnalyticsCallbacks}
+                uploadFileProps={{
+                    onFileUpload: uploadFile,
+                    ...uploadFileAnalyticsCallbacks,
+                }}
             />
         </Modal>
     );