refactor(FR-1653): extract session creation logic into useStartSession hook #4592

yomybaby · 2025-11-05T10:39:04Z

Refactor session creation logic into useStartSession hook

Summary

This PR extracts the complex session creation logic from the SessionLauncherPage component into a reusable custom hook called useStartSession. This refactoring improves code organization, maintainability, and testability.

Changes

New File

react/src/hooks/useStartSession.tsx - Custom hook containing all session creation logic (~297 lines)
- Handles session creation with all configuration options (batch, interactive, multiple sessions)
- Manages error handling and notifications
- Supports owner settings, resource allocation, and storage configuration

Modified File

react/src/pages/SessionLauncherPage.tsx - Refactored to use the new hook
- Removed ~280 lines of embedded session creation logic
- Simplified component to focus on UI concerns
- Maintained all existing functionality and behavior

Benefits

Better Separation of Concerns: UI logic separated from business logic
Improved Testability: Session creation logic can now be tested in isolation
Code Reusability: Hook can be used in other components if needed
Easier Maintenance: Changes to session creation logic are now centralized
Follows React Best Practices: Proper use of custom hooks for complex logic

Testing

All existing functionality has been preserved:

Session creation with various configurations
Batch mode and scheduling
Resource allocation
Storage mounting
Environment variables
Multiple session creation
Error handling and notifications
Navigation after creation

Checklist:

Code follows React best practices for custom hooks
All existing functionality is maintained
Error handling is preserved
No breaking changes to the API

yomybaby · 2025-11-05T10:39:19Z

feat(FR-1659): enhance session UI with primary app actions and Jupyter notebook import #4595 : 3 dependent PRs (#4596 , #4600 , #4604 )
refactor(FR-1653): extract session creation logic into useStartSession hook #4592 👈 (View in Graphite)
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 · 2025-11-05T10:41:19Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	4.64%	531/11433
🔴	Branches	3.77%	302/8016
🔴	Functions	2.89%	102/3529
🔴	Lines	4.59%	513/11176

Test suite run success

121 tests passing in 14 suites.

Report generated by 🧪jest coverage report action from 4c28ccd

Copilot

Pull Request Overview

This PR refactors session creation logic by extracting it from SessionLauncherPage into a reusable custom hook useStartSession. The refactoring improves code organization and enables the session creation logic to be used in multiple locations throughout the application.

Extracted session creation logic into a new custom hook useStartSession
Moved related types, constants, and helper functions to the new hook file
Updated SessionLauncherPage to use the new hook instead of inline implementation

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
react/src/hooks/useStartSession.tsx	New custom hook containing the extracted session creation logic, types, and helper functions
react/src/pages/SessionLauncherPage.tsx	Refactored to use the new `useStartSession` hook, removed inline session creation logic and unused imports

Comments suppressed due to low confidence (1)

react/src/hooks/useStartSession.tsx:34

Unknown directive: 'use memo'.

  'use memo';

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

react/src/hooks/useStartSession.tsx

react/src/pages/SessionLauncherPage.tsx

ironAiken2

LGTM

ironAiken2

LGTM

react/src/pages/SessionLauncherPage.tsx

nowgnuesLee

LGTM

graphite-app · 2025-11-06T08:10:52Z

Merge activity

Nov 6, 8:10 AM UTC: yomybaby added this pull request to the Graphite merge queue.
Nov 6, 8:12 AM UTC: Merged by the Graphite merge queue.

…n hook (#4592) # Refactor session creation logic into useStartSession hook Resolves #4591 ([FR-1653](https://lablup.atlassian.net/browse/FR-1653)) ## Summary This PR extracts the complex session creation logic from the `SessionLauncherPage` component into a reusable custom hook called `useStartSession`. This refactoring improves code organization, maintainability, and testability. ## Changes ### New File - **[react/src/hooks/useStartSession.tsx](react/src/hooks/useStartSession.tsx)** - Custom hook containing all session creation logic (~297 lines) - Handles session creation with all configuration options (batch, interactive, multiple sessions) - Manages error handling and notifications - Supports owner settings, resource allocation, and storage configuration ### Modified File - **[react/src/pages/SessionLauncherPage.tsx](react/src/pages/SessionLauncherPage.tsx)** - Refactored to use the new hook - Removed ~280 lines of embedded session creation logic - Simplified component to focus on UI concerns - Maintained all existing functionality and behavior ## Benefits 1. **Better Separation of Concerns**: UI logic separated from business logic 2. **Improved Testability**: Session creation logic can now be tested in isolation 3. **Code Reusability**: Hook can be used in other components if needed 4. **Easier Maintenance**: Changes to session creation logic are now centralized 5. **Follows React Best Practices**: Proper use of custom hooks for complex logic ## Testing All existing functionality has been preserved: - Session creation with various configurations - Batch mode and scheduling - Resource allocation - Storage mounting - Environment variables - Multiple session creation - Error handling and notifications - Navigation after creation **Checklist:** - [x] Code follows React best practices for custom hooks - [x] All existing functionality is maintained - [x] Error handling is preserved - [x] No breaking changes to the API [FR-1653]: https://lablup.atlassian.net/browse/FR-1653?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

github-actions bot added the size:XL 500~ LoC label Nov 5, 2025

github-actions bot assigned yomybaby Nov 5, 2025

yomybaby requested review from ironAiken2 and nowgnuesLee November 5, 2025 10:45

yomybaby force-pushed the refactor/FR-1653-extract-session-creation-hook branch from c55bbb6 to 8fd2558 Compare November 5, 2025 10:45

yomybaby marked this pull request as ready for review November 5, 2025 10:45

Copilot AI review requested due to automatic review settings November 5, 2025 10:45

Copilot AI reviewed Nov 5, 2025

View reviewed changes

react/src/hooks/useStartSession.tsx Show resolved Hide resolved

react/src/hooks/useStartSession.tsx Outdated Show resolved Hide resolved

react/src/pages/SessionLauncherPage.tsx Show resolved Hide resolved

react/src/pages/SessionLauncherPage.tsx Show resolved Hide resolved

yomybaby force-pushed the refactor/FR-1653-extract-session-creation-hook branch 4 times, most recently from 767de63 to 346cb6a Compare November 5, 2025 11:10

ironAiken2 approved these changes Nov 6, 2025

View reviewed changes

yomybaby force-pushed the refactor/FR-1653-extract-session-creation-hook branch from 346cb6a to cf4df2e Compare November 6, 2025 03:15

yomybaby marked this pull request as draft November 6, 2025 03:17

yomybaby force-pushed the refactor/FR-1653-extract-session-creation-hook branch from cf4df2e to 601fe05 Compare November 6, 2025 03:50

yomybaby marked this pull request as ready for review November 6, 2025 03:50

ironAiken2 approved these changes Nov 6, 2025

View reviewed changes

nowgnuesLee requested changes Nov 6, 2025

View reviewed changes

react/src/pages/SessionLauncherPage.tsx Outdated Show resolved Hide resolved

react/src/pages/SessionLauncherPage.tsx Outdated Show resolved Hide resolved

react/src/pages/SessionLauncherPage.tsx Show resolved Hide resolved

yomybaby mentioned this pull request Nov 6, 2025

feat(FR-1659): enhance session UI with primary app actions and Jupyter notebook import #4595

Merged

5 tasks

ironAiken2 mentioned this pull request Nov 6, 2025

feat(FR-1093): migrate file browser function to react #4596

Merged

5 tasks

yomybaby requested a review from nowgnuesLee November 6, 2025 07:39

yomybaby force-pushed the refactor/FR-1653-extract-session-creation-hook branch from 601fe05 to d27b474 Compare November 6, 2025 07:45

nowgnuesLee approved these changes Nov 6, 2025

View reviewed changes

graphite-app bot force-pushed the refactor/FR-1653-extract-session-creation-hook branch from d27b474 to 4c28ccd Compare November 6, 2025 08:11

graphite-app bot merged commit 4c28ccd into main Nov 6, 2025
11 checks passed

graphite-app bot deleted the refactor/FR-1653-extract-session-creation-hook branch November 6, 2025 08:12

github-pages bot temporarily deployed to github-pages November 6, 2025 08:12 Inactive

vercel bot had a problem deploying to Production November 6, 2025 09:04 Failure

yomybaby mentioned this pull request Nov 7, 2025

feature(FR-1471): migrate the GitHub/GitLab importing feature to React with VFolder usage mode option #4600

Merged

ironAiken2 mentioned this pull request Nov 7, 2025

feat(FR-1656): enhance file browser session notifications with primary app option #4602

Merged

3 tasks

yomybaby mentioned this pull request Nov 7, 2025

feat(FR-1660): add action buttons column to SessionNodes table #4604

Draft

ironAiken2 mentioned this pull request Nov 10, 2025

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

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(FR-1653): extract session creation logic into useStartSession hook #4592

refactor(FR-1653): extract session creation logic into useStartSession hook #4592

Uh oh!

yomybaby commented Nov 5, 2025 •

edited

Loading

Uh oh!

yomybaby commented Nov 5, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Nov 5, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ironAiken2 left a comment

Uh oh!

ironAiken2 left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nowgnuesLee left a comment

Uh oh!

graphite-app bot commented Nov 6, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

refactor(FR-1653): extract session creation logic into useStartSession hook #4592

refactor(FR-1653): extract session creation logic into useStartSession hook #4592

Uh oh!

Conversation

yomybaby commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Refactor session creation logic into useStartSession hook

Summary

Changes

New File

Modified File

Benefits

Testing

Uh oh!

yomybaby commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

github-actions bot commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report for ./react

Test suite run success

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ironAiken2 left a comment

Choose a reason for hiding this comment

Uh oh!

ironAiken2 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nowgnuesLee left a comment

Choose a reason for hiding this comment

Uh oh!

graphite-app bot commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

yomybaby commented Nov 5, 2025 •

edited

Loading

yomybaby commented Nov 5, 2025 •

edited

Loading

github-actions bot commented Nov 5, 2025 •

edited

Loading

Coverage report for `./react`

graphite-app bot commented Nov 6, 2025 •

edited

Loading