feat(FR-1655): migrate SFTP server launch feature to React

[ironAiken2]

Resolves FR-1655

Summary

Migrates the SFTP/SSH server launch functionality from Lit-based components to React, following the modern architecture patterns established in the codebase.

Changes

• Extracted FolderExplorerHeaderActions as a new React component containing both File Browser and SFTP launch actions
• Migrated SFTP session creation logic to use the useStartSession hook for consistency
• Implemented comprehensive permission checking for SFTP volume access
• Added validation for SFTP scaling groups by current project
• Enhanced error handling with clear user feedback when SFTP is unavailable
• Updated all 21 language files with new permission error messages

Technical Details

• Uses React Suspense and lazy loading for better performance
• Leverages Relay for GraphQL data fetching
• Follows the established pattern of using useStartSession for session creation
• Maintains backward compatibility with existing functionality

Testing

The process for determining whether an SFTP session can be executed is as follows:

1. Determine whether the current project has a host that supports SFTP and is accessible.
2. If a host supporting SFTP exists, determine whether the user has access permissions for that host.
3. If access permissions are also present, determine whether an image supporting SFTP exists.

• File browser launch functionality works as before
• SFTP session creation works with proper permissions
• Error messages display correctly when SFTP is unavailable
• Permission checks properly validate volume access
• All translations are properly loaded

[ironAiken2]

• feature(FR-1688): Auto-launch primary app in Session Notification #4619
• feat(FR-1655): migrate SFTP server launch feature to React #4610 👈 (View in Graphite)
• refactor(FR-1656): extract filebrowser image logic into custom hook with UX improvements #4612
• feat(FR-1656): enhance file browser session notifications with primary app option #4602
• feat(FR-1093): migrate file browser function to react #4596
• feat(FR-1659): enhance session UI with primary app actions and Jupyter notebook import #4595 : 2 other dependent PRs (#4600 , #4604 )
• refactor(FR-1653): extract session creation logic into useStartSession hook #4592
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• flow:merge-queue - adds this PR to the back of the merge queue
• flow:hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

Coverage report for ./react

St.❔	Category	Percentage	Covered / Total
🔴	Statements	4.69%	547/11664
🔴	Branches	3.82%	314/8215
🔴	Functions	2.91%	104/3577
🔴	Lines	4.64%	529/11405

Test suite run success

125 tests passing in 14 suites.

Report generated by 🧪jest coverage report action from 971d534

[Copilot]

Pull Request Overview

This PR migrates the SFTP server launch functionality from Lit-based components to React, aligning with the modern architecture patterns in the codebase. The migration introduces proper permission checking, validation for SFTP scaling groups, and enhanced error handling.

Key Changes

• Created a new SFTPServerButton React component with comprehensive permission and resource validation
• Consolidated file browser and SFTP image hooks into a single useDefaultImagesWithFallback.ts file
• Added three new i18n keys across 21 language files for permission-related error messages

Reviewed Changes

Copilot reviewed 29 out of 29 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
react/src/components/SFTPServerButton.tsx	New React component implementing SFTP session launch with permission checks and validation
react/src/components/FolderExplorerHeader.tsx	Updated to use new SFTPServerButton component with Suspense wrapper
react/src/components/FileBrowserButton.tsx	Enhanced with permission checking for volume access
react/src/hooks/useDefaultImagesWithFallback.ts	Consolidated file browser and SSH/SFTP image hooks
react/src/hooks/useDefaultFileBrowserImageWithFallback.ts	Removed (functionality moved to consolidated hook)
react/src/hooks/useStartSession.tsx	Improved session creation handling with notification for existing sessions
react/src/pages/SessionLauncherPage.tsx	Added 'system' session type to interface
resources/i18n/*.json	Added three new translation keys for permission error messages

Comments suppressed due to low confidence (3)

react/src/components/SFTPServerButton.tsx:33

• Unknown directive: 'use memo'.

  'use memo';

react/src/hooks/useDefaultImagesWithFallback.ts:50

• Unknown directive: 'use memo'.

  'use memo';

react/src/hooks/useDefaultImagesWithFallback.ts:97

• Unknown directive: 'use memo'.

  'use memo';

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[agatha197]

If the sftp session is pending status and click the sftp app directly, it shows undefined and it is not updated before clicking the sftp app again.

[yomybaby]

LGTM

[agatha197]

Please re-request this PR after resolving this issue.
https://app.graphite.com/github/pr/lablup/backend.ai-webui/4610/feat(FR-1655)-migrate-SFTP-server-launch-feature-to-React#review-PRR_kwDOCRTcws7NyM8O

[agatha197]

LGTM!

[nowgnuesLee]

LGTM

[graphite-app]

Merge activity

• Nov 14, 10:09 AM UTC: yomybaby added this pull request to the Graphite merge queue.
• Nov 14, 10:11 AM UTC: Merged by the Graphite merge queue.