lablup / lablup/backend.ai-webui
Add Feature to Navigate to Session Creation with Selected Image from "My Environments"
- Dominant language
- TypeScript
- Stars
- 133
- Forks
- 81
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 344
Description
## Description
Add a feature that allows users to navigate from the "My Environments" page to the session creation page with a specific image pre-selected. This streamlines the workflow by reducing the steps needed to launch a session with a customized image.
## Root Cause Analysis
Currently, `CustomizedImageList` (My Environments page) only offers a delete action for each image. Users must manually navigate to session creation and re-select their image, which is cumbersome.
## Implementation Strategy
The session launcher already supports pre-filling form values via URL query parameters (`formValues` JSON). This pattern is already used by `StartPage` (lines 195-202). The only change needed is adding a "Create Session" button to the `CustomizedImageList` control column.
**Flow:**
1. User clicks "Create Session" button on an image row in My Environments
1. Button serializes the image name into form values: `{ environments: { version: "" } `}
1. Navigates to `/session/start?step=0&formValues=`
1. `SessionLauncherPage` reads query params and merges into initial form values
1. `ImageEnvironmentSelectFormItems` auto-resolves the image from the version string
## Related Files
- `react/src/components/CustomizedImageList.tsx` — add "Create Session" button in control column (primary change)
- `react/src/pages/SessionLauncherPage.tsx` — already supports formValues query param (no changes needed)
- `react/src/components/ImageEnvironmentSelectFormItems.tsx` — already resolves images from version strings (no changes needed)
- `react/src/pages/StartPage.tsx` — reference implementation of the same navigation pattern
- `react/src/hooks/index.tsx` — `useWebUINavigate` hook for navigation
## Suggested Fix Direction
1. Add a "Create Session" button (e.g., PlayCircleOutlined icon) next to the existing delete button in `CustomizedImageList` control column
1. Use `useWebUINavigate` + URL query params to navigate to `/session/start` with the image pre-selected
1. Follow the existing pattern from `StartPage` for serializing form values
## Testing
- Verify navigation works for customized images of different registries/architectures
- Verify the pre-selected image appears correctly in the session launcher form
- Verify user can still modify other form fields after navigation
JIRA Issue: FR-34
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.