Studio: Improve error handling when importing invalid file formats

[katinthehatsite]

Related issues

Fixes STU-1050

Proposed Changes

This PR ensures that when the invalid file format is added for import, we display an error in the Add site modal:

Additionally, it moves file validation to an earlier point in the Import process and also displays an error to the user instead of starting the process and then throwing an error:

Testing Instructions

• Pull the changes from this branch
• Start Studio with npm start
• Click on the Add site in the sidebar
• Select Import from backup option
• Drag an invalid file format like .png
• Observe that you can see an error appearing
• Navigate back
• Click again on Import from backup option
• Confirm that the error is gone
• Navigate to the Import/Export tab
• Drag an invalid file format into the field
• Observe that you can see the error
• Switch to other tabs and then switch back to Import/Export tab
• Observe that the error is cleared

Pre-merge Checklist

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

[github-actions]

📊 Performance Test Results

Comparing d1a3d66 vs trunk

site-editor

Metric	trunk	d1a3d66	Diff	Change
load	10261.00 ms	15335.00 ms	+5074.00 ms	🔴 49.4%

site-startup

Metric	trunk	d1a3d66	Diff	Change
siteCreation	29018.00 ms	31271.00 ms	+2253.00 ms	🔴 7.8%
siteStartup	11122.00 ms	10075.00 ms	-1047.00 ms	🟢 -9.4%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change

[gcsecsey]

Thanks Kat for improving the error messages, the new error styling is informative and minimal IMO, it works great. I confirm that the errors are also cleared when navigating away and back again.

Import from a backup	Import/Export tab