feat(studio): Use upload component in folder upload for drag/drop

[steramae-nvidia]

Signed-off-by: Sean Teramae steramae@nvidia.com

Summary by CodeRabbit

• Improvements
  • Updated the folder upload dialog with a streamlined file selection experience.
  • Added clearer handling for staged files, selected folders, file counts, and upload button states.
  • Prevented empty upload submissions.
  • Improved folder selection with a dedicated list control.

[steramae-nvidia]

This change is part of the following stack:

• feat(studio): Use upload component in folder upload for drag/drop #1035 ◀

_{Change managed by git-spice.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Changes

The fileset upload modal now manages file selection with the Foundations Upload component. It tracks selected upload items, updates file counts and button state, and removes the obsolete openFileDialog plumbing.

Fileset upload flow

Layer / File(s)	Summary
Upload modal file selection web/packages/studio/src/components/filesets/FilesetFileExplorer/UploadToFolderModal/index.tsx	The modal converts staged files into upload items, manages selection internally, uses SelectListbox for folders, and submits the selected items.
Explorer modal contract cleanup web/packages/studio/src/components/filesets/FilesetFileExplorer/FilesetFileExplorerModals.tsx, web/packages/studio/src/components/filesets/FilesetFileExplorer/index.tsx	The explorer and modal wrapper remove the unused openFileDialog parameter and prop.

Sequence Diagram(s)

sequenceDiagram
  participant FilesetFileExplorer
  participant UploadToFolderModal
  participant Upload
  FilesetFileExplorer->>UploadToFolderModal: provide staged files
  UploadToFolderModal->>Upload: initialize selected upload items
  Upload->>UploadToFolderModal: return selected files
  UploadToFolderModal->>FilesetFileExplorer: submit selected upload items

Loading

Suggested labels: feat

Suggested reviewers: htolentino-nvidia, marcusds

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: using the Upload component for drag-and-drop folder uploads in Studio.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch steramae/upload-modal-box

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

web/packages/studio/src/components/filesets/FilesetFileExplorer/UploadToFolderModal/index.tsx (1)

22-22: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Import FC as a type.

FC is used only as a type. Split it from the runtime React import.

Proposed fix

-import { FC, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { FC } from 'react';

As per coding guidelines, use import type for type-only imports in TypeScript.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@web/packages/studio/src/components/filesets/FilesetFileExplorer/UploadToFolderModal/index.tsx`
at line 22, Update the React imports in the module to import FC with a type-only
import, while keeping useEffect, useMemo, useRef, and useState in the runtime
import.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In
`@web/packages/studio/src/components/filesets/FilesetFileExplorer/UploadToFolderModal/index.tsx`:
- Line 22: Update the React imports in the module to import FC with a type-only
import, while keeping useEffect, useMemo, useRef, and useState in the runtime
import.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: 02aec31f-f0cb-4da3-a971-831971d8a4b8

📥 Commits

Reviewing files that changed from the base of the PR and between 58a02de and 5a97a16.

📒 Files selected for processing (3)

• web/packages/studio/src/components/filesets/FilesetFileExplorer/FilesetFileExplorerModals.tsx
• web/packages/studio/src/components/filesets/FilesetFileExplorer/UploadToFolderModal/index.tsx
• web/packages/studio/src/components/filesets/FilesetFileExplorer/index.tsx

💤 Files with no reviewable changes (1)

• web/packages/studio/src/components/filesets/FilesetFileExplorer/FilesetFileExplorerModals.tsx

[github-actions]

Suite	Lines Covered	Line Rate	Branch Rate
Unit Tests	30033/38046	78.9%	63.5%
Integration Tests	17773/36715	48.4%	20.8%