Studio: Allow to start the import when there is already a process in progress from onClick

[katinthehatsite]

Related issues

Closes https://github.com/Automattic/dotcom-forge/issues/9759

Proposed Changes

This PR ensures that multiple import processes can be started at the same time from the Import / Export tab for different sites. It is currently possible with the drag and drop functionality but not with file selector.

Testing Instructions

• Pull the changes from this branch
• Start the app with npm start
• Navigate to the Import/Export tab on Studio site A
• Start the import process with file selector e.g. by clicking to select a file (and not drag and drop)
• Switch to the Import/Export tab on Studio site B
• Start the import process with file selector e.g. by clicking to select a file (and not drag and drop)
• Confirm the second import starts

Pre-merge Checklist

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

[fredrikekelund]

Nice catch, and this change works as expected 👍

However, I think it'd make sense to solve this at a more foundational level. The entire "main view" component tree should re-render when we switch sites, IMO. If it did, it would also resolve this problem, since React would instantiate a new <input>.

Changing the key prop passed to TabPanel accomplishes that:

diff --git a/src/components/site-content-tabs.tsx b/src/components/site-content-tabs.tsx
index c95f8b6..56cebb2 100644
--- a/src/components/site-content-tabs.tsx
+++ b/src/components/site-content-tabs.tsx
@@ -41,7 +41,7 @@ export function SiteContentTabs() {
                                        orientation="horizontal"
                                        onSelect={ ( tabName ) => setSelectedTab( tabName as TabName ) }
                                        initialTabName={ selectedTab }
-                                       key={ selectedTab }
+                                       key={ selectedSite.id + selectedTab }
                                >
                                        { ( { name } ) => (
                                                <div className="h-full">