feat: WebUI NEO start page basic layout #2786

ironAiken2 · 2024-10-29T07:25:58Z

This PR is about UI changing for `Backend.AI WebUI NEO` #2835

Changes:

Added a start page utilizing the BAIBoard component.
Added ActionItemContent component (can be used as primary action card for start page and subsequent pages)
For responsive components, delete the descriptions of all cards if even one card causes scrolling.

! note

The Cloudscape board component uses the Grid component internally. The braek point of a grid component is calculated based on the size of the container, not the window size, as follows ref

The Cloudscape board component used for BAIBaord does not yet provide the ability to adjust columns per screen break point. ref

How to test:

Navigate to start page (/start)
Verify that the Button for each item is working properly.
Verify that each item is repositioned correctly. (The Resize option is currently not allowed.
In this PR, the default page has been changed from summary to start. We need to check if the redirect from error page to start is working properly, or if the refresh is working properly, etc.

Checklist: (if applicable)

Mention to the original issue
Documentation
Minium required manager version
Specific setting for review (eg., KB link, endpoint or how to setup)
Minimum requirements to check during review
Test case(s) to demonstrate the difference of before/after

graphite-app · 2024-10-29T07:26:03Z

Your org requires the Graphite merge queue for merging into main

Add the label “flow:merge-queue” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “flow:hotfix” to add to the merge queue as a hot fix.

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

ironAiken2 · 2024-10-29T07:26:13Z

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

feat: WebUI NEO start page basic layout #2786 👈 (View in Graphite)
chore: use pnpm patch in /react instead of patch-package #2661
e2e: fix broken tests due to NEO mainlayout, Agent select and Image parsing #2851
feat: NEO sider's toggle button and refactoring #2853
feat: Main Layout NEO sider #2850
feat: Global breadcrumb #2847
feat: WebUILink and WebUINavigate component #2846 : 1 other dependent PR (#2858 )
feat: Main layout NEO header #2844
main

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

github-actions · 2024-10-31T05:35:29Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	5.21% (-0.05% 🔻)	386/7404
🔴	Branches	4.45% (-0.08% 🔻)	229/5149
🔴	Functions	3.11% (-0.04% 🔻)	76/2446
🔴	Lines	5.13% (-0.05% 🔻)	371/7238

Show new covered files 🐣

St.^❔	File	Statements	Branches	Functions	Lines
🔴	`...` / WebUINavigate.tsx	0%	0%	0%	0%
🔴	`...` / UpdateEnvironmentImageIcon.tsx	0%	100%	0%	0%
🔴	`...` / ModelsIcon.tsx	0%	100%	0%	0%
🔴	`...` / UserOutlinedIcon.tsx	0%	100%	0%	0%
🔴	`...` / ExamplesIcon.tsx	0%	100%	0%	0%
🔴	`...` / EndpointsIcon.tsx	0%	100%	0%	0%
🔴	`...` / RecalculateResourcesIcon.tsx	0%	100%	0%	0%
🔴	`...` / SessionsIcon.tsx	0%	100%	0%	0%
🔴	`...` / MyEnvironmentsIcon.tsx	0%	100%	0%	0%
🔴	`...` / ExampleStart.tsx	0%	100%	0%	0%
🔴	`...` / InteractiveSession.tsx	0%	100%	0%	0%
🔴	`...` / PipelinesIcon.tsx	0%	100%	0%	0%
🔴	`...` / ModelServiceIcon.tsx	0%	100%	0%	0%
🔴	`...` / BatchSessionIcon.tsx	0%	100%	0%	0%
🔴	`...` / TrailsIcon.tsx	0%	100%	0%	0%
🔴	`...` / URLStartIcon.tsx	0%	100%	0%	0%
🔴	`...` / WebUILink.tsx	0%	0%	0%	0%
🔴	`...` / SiderToggleButton.tsx	0%	0%	0%	0%
🔴	`...` / ReverseThemeProvider.tsx	0%	0%	0%	0%
🔴	`...` / ActionItemContent.tsx	0%	0%	0%	0%
🔴	`...` / WebUIBreadcrumb.tsx	0%	0%	0%	0%
🔴	pages/StartPage.tsx	0%	0%	0%	0%
🔴	`...` / useKeyboardShortcut.ts	0%	0%	0%	0%
🔴	`...` / usePrimaryColors.ts	0%	100%	0%	0%

Show files with reduced coverage 🔻

St.^❔	File	Statements	Branches	Functions	Lines
🔴	`...` / BAINotificationButton.tsx	0%	0% (-100% 🔻)	0%	0%
🔴	`...` / BAIMenu.tsx	0%	0% (-100% 🔻)	0%	0%

Test suite run success

109 tests passing in 14 suites.

Report generated by 🧪jest coverage report action from 53bdf55

agatha197

The interactive type is selected when I click the Start Batch Session button.

react/src/pages/StartPage.tsx

ironAiken2 · 2024-11-06T04:38:39Z

The interactive type is selected when I click the Start Batch Session button.

resolved!

YEONFEEL96

Improved en-US and ko-KR description of each feature / button which shown in UI.
Some typos in ko-KR is also fixed.

For en-US, we will limit the use of 'a / the' on title to make is concise.
For ko-KR, we will limit the use of '~하기' in overall cases.

resources/i18n/en.json

resources/i18n/ko.json

YEONFEEL96

Confirmed that my changes have been reflected. LGTM.

react/src/pages/StartPage.tsx

agatha197

LGTM

yomybaby

Let's remove the default padding of BAIBoardItem. This will make it easier to customize and manage scroll position.

ironAiken2 · 2024-11-18T01:46:11Z

Let's remove the default padding of BAIBoardItem. This will make it easier to customize and manage scroll position.

Currently, we don't show a description when a scroll occurs, so the scroll itself shouldn't occur.

ironAiken2 · 2024-11-18T02:33:01Z

I tried to remove the default padding for board-item, but there are some issues.

�patch-package offical docs recommend using npm or yarn, and pnpm patch for pnpm. Since patch-package is patching based on package-lock.json, I don't think it's possible to use it with the current structure using pnpm. @yomybaby

yomybaby · 2024-11-18T02:40:25Z

I tried to remove the default padding for board-item, but there are some issues.

�patch-package offical docs recommend using npm or yarn, and pnpm patch for pnpm. Since patch-package is patching based on package-lock.json, I don't think it's possible to use it with the current structure using pnpm. @yomybaby

There is draft PR which I created, please check it.
https://app.graphite.dev/github/pr/lablup/backend.ai-webui/2661/chore-use-pnpm-patch-in-react-instead-of-patch-package
Teams thread

ironAiken2 · 2024-11-18T06:34:10Z

I tested it on pnpm patch PR and found it works fine, so I modified it to work based on pnpm patch. I've also fixed the scroll position issue. @yomybaby

github-actions bot assigned ironAiken2 Oct 29, 2024

github-actions bot added area:ux UI / UX issue. area:i18n Localization size:XL 500~ LoC labels Oct 29, 2024

ironAiken2 requested review from agatha197, lizable and yomybaby October 29, 2024 07:26

ironAiken2 force-pushed the feat/webui-neo-start-page branch 2 times, most recently from 056411b to 97917a8 Compare October 31, 2024 05:34

ironAiken2 marked this pull request as ready for review October 31, 2024 05:34

agatha197 requested changes Nov 4, 2024

View reviewed changes

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

ironAiken2 force-pushed the feat/webui-neo-start-page branch 2 times, most recently from 255afaa to d51430b Compare November 6, 2024 04:36

ironAiken2 requested a review from YEONFEEL96 November 6, 2024 04:36

ironAiken2 requested a review from agatha197 November 6, 2024 04:38

YEONFEEL96 requested changes Nov 8, 2024

View reviewed changes

ironAiken2 force-pushed the feat/webui-neo-start-page branch from d51430b to f9dd0c5 Compare November 11, 2024 02:15

ironAiken2 changed the title ~~feat: WebUI NEO start page~~ feat: WebUI NEO start page basic layout Nov 11, 2024

ironAiken2 requested a review from YEONFEEL96 November 11, 2024 02:25

YEONFEEL96 approved these changes Nov 12, 2024

View reviewed changes

agatha197 requested changes Nov 12, 2024

View reviewed changes

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

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

ironAiken2 linked an issue Nov 12, 2024 that may be closed by this pull request

WebUI NEO start page basic layout #2835

Open

ironAiken2 force-pushed the feat/webui-neo-start-page branch from f9dd0c5 to e2f4644 Compare November 12, 2024 05:24

ironAiken2 requested a review from agatha197 November 12, 2024 05:24

agatha197 approved these changes Nov 12, 2024

View reviewed changes

yomybaby force-pushed the feat/webui-neo-start-page branch from e2f4644 to 752f0d5 Compare November 15, 2024 10:08

yomybaby requested changes Nov 15, 2024

View reviewed changes

yomybaby force-pushed the feat/webui-neo-start-page branch from 752f0d5 to a4e1826 Compare November 15, 2024 10:14

ironAiken2 force-pushed the feat/webui-neo-start-page branch from a4e1826 to 60b7a2f Compare November 18, 2024 02:33

ironAiken2 requested a review from yomybaby November 18, 2024 02:34

ironAiken2 force-pushed the feat/webui-neo-start-page branch from 60b7a2f to 53bdf55 Compare November 18, 2024 05:28

ironAiken2 changed the base branch from main to chore/pnpm-patch-react-project November 18, 2024 05:28

ironAiken2 mentioned this pull request Nov 18, 2024

chore: use pnpm patch in /react instead of patch-package #2661

Draft

6 tasks

This was referenced Nov 18, 2024

feat: Main layout NEO header #2844

Open

feat: WebUILink and WebUINavigate component #2846

Open

This was referenced Nov 18, 2024

feat: Global breadcrumb #2847

Open

feat: Main Layout NEO sider #2850

Open

e2e: fix broken tests due to NEO mainlayout, Agent select and Image parsing #2851

Open

feat: NEO sider's toggle button and refactoring #2853

Open

ironAiken2 force-pushed the feat/webui-neo-start-page branch from 53bdf55 to ef57508 Compare November 18, 2024 06:32

feat: WebUI NEO start page

368ca41

ironAiken2 force-pushed the feat/webui-neo-start-page branch from ef57508 to 368ca41 Compare November 18, 2024 06:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: WebUI NEO start page basic layout #2786

feat: WebUI NEO start page basic layout #2786

ironAiken2 commented Oct 29, 2024 •

edited

Loading

graphite-app bot commented Oct 29, 2024

ironAiken2 commented Oct 29, 2024 •

edited by yomybaby

Loading

github-actions bot commented Oct 31, 2024 •

edited

Loading

agatha197 left a comment

ironAiken2 commented Nov 6, 2024

YEONFEEL96 left a comment •

edited

Loading

YEONFEEL96 left a comment

agatha197 left a comment

yomybaby left a comment

ironAiken2 commented Nov 18, 2024

ironAiken2 commented Nov 18, 2024

yomybaby commented Nov 18, 2024

ironAiken2 commented Nov 18, 2024

feat: WebUI NEO start page basic layout #2786

Are you sure you want to change the base?

feat: WebUI NEO start page basic layout #2786

Conversation

ironAiken2 commented Oct 29, 2024 • edited Loading

This PR is about UI changing for Backend.AI WebUI NEO #2835

graphite-app bot commented Oct 29, 2024

Your org requires the Graphite merge queue for merging into main

ironAiken2 commented Oct 29, 2024 • edited by yomybaby Loading

github-actions bot commented Oct 31, 2024 • edited Loading

Coverage report for ./react

Test suite run success

agatha197 left a comment

Choose a reason for hiding this comment

ironAiken2 commented Nov 6, 2024

YEONFEEL96 left a comment • edited Loading

Choose a reason for hiding this comment

YEONFEEL96 left a comment

Choose a reason for hiding this comment

agatha197 left a comment

Choose a reason for hiding this comment

yomybaby left a comment

Choose a reason for hiding this comment

ironAiken2 commented Nov 18, 2024

ironAiken2 commented Nov 18, 2024

yomybaby commented Nov 18, 2024

ironAiken2 commented Nov 18, 2024

ironAiken2 commented Oct 29, 2024 •

edited

Loading

This PR is about UI changing for `Backend.AI WebUI NEO` #2835

ironAiken2 commented Oct 29, 2024 •

edited by yomybaby

Loading

github-actions bot commented Oct 31, 2024 •

edited

Loading

Coverage report for `./react`

YEONFEEL96 left a comment •

edited

Loading