[ui-importer] Add configured filesystems in importer

[nidhibhatg]

What changes were proposed in this pull request?

• Adds configured filesystems in importer and displays all the filesystems
• Modifies file chooser to support upload and create folder
• Adds functionality to click files for importer use case
• Style improvements

How was this patch tested?

• unit tests and manually

Please review Hue Contributing Guide before opening a pull request.

[github-actions]

✅ Test files were modified. Ensure that the tests cover all relevant changes. ✅

[github-actions]

Python Coverage Report •

File	Stmts	Miss	Cover	Missing
TOTAL	53734	27013	49%

report-only-changed-files is enabled. No files were changed during this commit :)

Pytest Report

Tests	Skipped	Failures	Errors	Time
1090	106 💤	0 ❌	0 🔥	6m 2s ⏱️

[ramprasadagarwal]

Nice work.
Please check the comments below.

[bjornalm]

Lots of good feedback from @ramprasadagarwal. I'll hold while you guys sort it out, but I did notice that the screenshot of the drag and drop looks weird where the "drop area" appears behind the action buttons of the modal.

[github-actions]

UI Code Coverage Report

Lines	Statements	Branches	Functions
	39.5% (30873/78144)	31.26% (14393/46041)	24.77% (2221/8966)

[github-actions]

Backend Code Coverage Report •

File	Stmts	Miss	Cover	Missing
TOTAL	54223	27042	50%

report-only-changed-files is enabled. No files were changed during this commit :)

[bjornalm]

Nice work. I reviewed the first half of the files. Will continue with the rest later, but you can start addressing the issues.

[bjornalm]

did we really agree that these are the only supported file formats?

[bjornalm]

@nidhibhatg I'm also trying out some deep PR review AI prompting using the the copilot chat functionality. Please have a look, I think they make sense. Unfortunately I can't get them to appear as comments in the actual code.

1. Accessibility: Table Row Interactivity
   File: FileChooserModal.tsx
   Location: Table row rendering and click handling

Comment:
For accessibility, consider adding role="button" and tabIndex={0} to clickable table rows, and handle keyboard interaction (Enter/Space) to allow keyboard users to select files or folders. This will make file/folder selection more accessible to all users.

2. Accessibility: Error Message Announcements
   Files:

ImporterSourceSelector.tsx
FileChooserModal.tsx
LocalFileUploadOption.tsx
Comment:
To improve accessibility, error messages shown to users should be wrapped in a container with aria-live="polite" or aria-live="assertive" so that screen readers announce them as soon as they appear.

3. Accessibility: Modal Focus Management
   File: FileChooserModal.tsx
   Location: Modal open/close logic

Comment:
Consider implementing focus management for modals: focus should be trapped within the modal while open, and returned to the triggering element when closed. This will improve keyboard navigation and accessibility for screen reader users.

4. Error Handling: Backend Error Messages
   File: FileChooserModal.tsx
   Location: Folder creation error handling

Comment:
Currently, API errors (e.g., when creating a folder) are surfaced directly to users. Please consider mapping or sanitizing backend error messages into more user-friendly text to avoid exposing technical details or confusing messages to end users.

5. Testing: Prefer user-event Over fireEvent
   Files:

LocalFileUploadOption.test.tsx
ImporterSourceSelector.test.tsx
BottomSlidePanel.test.tsx
Comment:
For future test maintenance, please prefer using @testing-library/user-event rather than fireEvent. user-event simulates real user interactions and helps catch more realistic issues.

6. Minor: onPressEnter Handler Bug
   File: FileChooserModal.tsx
   Location: BottomSlidePanel for create folder

Comment:
The onPressEnter prop is currently set as onPressEnter={() => handleCreate}. This creates a new function that returns handleCreate instead of calling it. It should be onPressEnter={handleCreate} to ensure the handler is called when Enter is pressed.

[Copilot]

Pull Request Overview

This PR adds support for configured filesystems in the importer and enhances the file chooser with upload and folder-creation capabilities.

• Introduces a reusable BottomSlidePanel component for folder creation UI
• Extends FileChooserModal with drag-and-drop, polling, upload button, and error/retry handling
• Updates ImporterSourceSelector to fetch and render configured filesystems dynamically

Reviewed Changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 3 comments.

File	Description
reactComponents/BottomSlidePanel/BottomSlidePanel.tsx	New bottom slide panel component
apps/storageBrowser/FileChooserModal/FileChooserModal.tsx	File chooser extended to support upload & folder creation
apps/newimporter/ImporterSourceSelector/ImporterSourceSelector.tsx	Fetch and display configured filesystems
apps/newimporter/ImporterSourceSelector/LocalFileUploadOption.tsx	Local file upload option with size validation

Comments suppressed due to low confidence (4)

desktop/core/src/desktop/js/reactComponents/BottomSlidePanel/BottomSlidePanel.tsx:24

• The onPrimaryClick prop is typed as (unknown) => void, which is ambiguous. Consider changing it to a clear signature like () => void or specify the exact argument type.

onPrimaryClick?: (unknown) => void;

desktop/core/src/desktop/js/reactComponents/BottomSlidePanel/BottomSlidePanel.tsx:66

• The mask div has role="button" but no accessible name. Add aria-label or aria-labelledby (e.g., aria-label="Close panel") so screen readers announce its purpose.

<div className={`hue-bottom-slide-mask ${isOpen ? 'fade-in' : 'fade-out'}`}

desktop/core/src/desktop/js/reactComponents/BottomSlidePanel/BottomSlidePanel.scss:62

• Missing semicolon after the padding: 16px 24px property in .hue-bottom-slide-panel__footer. Add a semicolon to avoid CSS parsing errors.

    padding: 16px 24px

desktop/core/src/desktop/js/apps/storageBrowser/FileChooserModal/FileChooserModal.tsx:207

• The variable name is undefined here. You probably meant to use createFolderValue or the new folder name returned from the API.

          setDestPath(prev => `${prev}/${name}`);

[tabraiz12]

why not just use value={createFolderValue}, we don't need to trigger onChange than?

[ramprasadagarwal]

Nice work,
Please add the tests and this PR is good from my side.

[ramprasadagarwal]

FileChooser Component has lot of new code, can we add those tests here?