lablup / lablup/backend.ai-webui

Add Feature to Navigate to Session Creation with Selected Image from "My Environments"

Open
#2,908 1 comment 0 reactions 0 assignees View on GitHub
migration
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.