Support compressed files that contain a SQL file in importer

[fluiddot]

Related to 8282-gh-Automattic/dotcom-forge.

Proposed Changes

• I noticed when creating compressed files on macOS that hidden/meta files were also included. To exclude them in the import, I added the function isFileAllowed that is used in the different backup handlers to filter those files out. It's important to clean up the backup content when importing SQL-only files, otherwise, the following condition won't be met and the import will fail.
• Update unit tests of listFiles to cover the changes, plus fix the issue spotted here.

studio/src/lib/import-export/import/validators/sql-validator.ts

Line 7 in caa31a0

return fileList.length === 1 && fileList[ 0 ].endsWith( '.sql' );

Testing Instructions

• Apply the following patch:

diff --git forkSrcPrefix/src/lib/import-export/import/importers/importer.ts forkDstPrefix/src/lib/import-export/import/importers/importer.ts
index 4ce10b9bc24f5a7193b49ad7b62dbf4ed70bbea9..95a12b57b3e3711be8caa252dddf3193cef3ef33 100644
--- forkSrcPrefix/src/lib/import-export/import/importers/importer.ts
+++ forkDstPrefix/src/lib/import-export/import/importers/importer.ts
@@ -35,6 +35,7 @@ export class DefaultImporter implements Importer {
 
 	protected async importDatabase(): Promise< void > {
 		// will implement in a different ticket
+		console.log( 'Trying to import the following SQL files:', this.backup.sqlFiles );
 	}
 
 	protected async importWpContent( rootPath: string ): Promise< void > {
diff --git forkSrcPrefix/src/components/content-tab-import-export.tsx forkDstPrefix/src/components/content-tab-import-export.tsx
index 436c8bcc281cb9f10501e05e2c965da7e0e0ac27..30acc63733ccf9fb6eab365e1483b1ca31a1c501 100644
--- forkSrcPrefix/src/components/content-tab-import-export.tsx
+++ forkDstPrefix/src/components/content-tab-import-export.tsx
@@ -1,6 +1,46 @@
+import { useEffect, useState } from 'react';
+import { getIpcApi } from '../lib/get-ipc-api';
+import { BackupArchiveInfo } from '../lib/import-export/import/types';
+
 interface ContentTabImportExportProps {
 	selectedSite: SiteDetails;
 }
-export function ContentTabImportExport( _props: ContentTabImportExportProps ) {
-	return null;
+export function ContentTabImportExport( { selectedSite }: ContentTabImportExportProps ) {
+	const [ file, setFile ] = useState< File | null >( null );
+
+	const handleFileChange = ( e: React.ChangeEvent< HTMLInputElement > ) => {
+		const selectedFile = e.target.files ? e.target.files[ 0 ] : null;
+		if ( selectedFile ) {
+			setFile( selectedFile );
+		}
+	};
+
+	useEffect( () => {
+		if ( file ) {
+			console.log( `File ready for import: ${ file.name }` );
+		}
+	}, [ file ] );
+
+	const handleSubmit = () => {
+		if ( file ) {
+			try {
+				const backupFile: BackupArchiveInfo = {
+					type: file.type,
+					path: file.path,
+				};
+				getIpcApi().importSite( { id: selectedSite.id, backupFile } );
+			} catch ( error ) {
+				console.error( 'Error importing site:', error );
+			}
+		} else {
+			console.warn( 'No file selected for import' );
+		}
+	};
+
+	return (
+		<div>
+			<input type="file" onChange={ handleFileChange } />
+			<button onClick={ handleSubmit }>Submit</button>
+		</div>
+	);
 }

• Run the command STUDIO_IMPORT_EXPORT=true npm start
• Navigate to the tab Import/Export
• Download and extract the content of the compressed file: backup-files.zip.
• For each of the extracted files:
  • Select the file and click Submit.
  • Observe in the logs the entry: Trying to import the following SQL files: [ <TEMPORAL_FOLDER>/<PATH_TO_FILE>/wp_posts.sql ].
  • Observe that the path to the SQL file is correct based on the extracted files.

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[sejas]

@fluiddot , The code looks good, but I'm not able to see the output of the submit button.

When I apply your patch and I run npm start, I see this error in the console:

<e> [ForkTsCheckerWebpackPlugin] ERROR in ./src/lib/import-export/import/importers/index.ts:1:15
<e> TS1261: Already included file name '/Users/macbookpro/Documents/projects/a8c/studio/src/lib/import-export/import/importers/importer.ts' differs from file name '/Users/macbookpro/Documents/projects/a8c/studio/src/lib/import-export/import/importers/Importer.ts' only in casing.
<e>   The file is in the program because:
<e>     Imported via './importer' from file '/Users/macbookpro/Documents/projects/a8c/studio/src/lib/import-export/import/importers/index.ts'
<e>     Imported via './importers/importer' from file '/Users/macbookpro/Documents/projects/a8c/studio/src/lib/import-export/import/import-manager.ts'
<e>     Imported via '../../import/importers/importer' from file '/Users/macbookpro/Documents/projects/a8c/studio/src/lib/import-export/tests/import/import-manager.test.ts'
<e>     Root file specified for compilation
<e>   > 1 | export * from './importer';

And here is the output.

WErVgS.mp4

[fluiddot]

@fluiddot , The code looks good, but I'm not able to see the output of the submit button.

When I apply your patch and I run npm start, I see this error in the console:

Oh, let me take a look. Maybe something got broken when solving conflicts after rebasing trunk.

[fluiddot]

@sejas I've updated the patch in the PR's description. I forgot that one of the files was renamed 😅. Let me know if now works. Thanks 🙇 !

[sejas]

@fluiddot , thanks for providing an easy way to test the PR.

I confirm it works as expected.
https://github.com/user-attachments/assets/4eeeac09-4d7f-4c88-8d5e-aea4c8e5f6ea

[sejas]

Should we exclude /^\.DS_Store$/ too ? Or is that already covered by /^\..*/, // Unix hidden files at root?

[fluiddot]

Good question. As you pointed out, we don't need to explicitly exclude .DS_Store as it will be covered by that pattern. In fact, the compressed files I added in backup-files.zip contain that hidden folder and are not being processed.