Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: WebUI NEO start page basic layout #2786

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: WebUI NEO start page basic layout #2786

wants to merge 1 commit into from
+1,058 −589

Conversation

ironAiken2
Copy link
Contributor

@ironAiken2 ironAiken2 commented Oct 29, 2024 •
edited
Loading

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.

image.png

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 Graphite App
Copy link

graphite-app bot commented Oct 29, 2024

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 Graphite App
Copy link
Contributor Author

ironAiken2 commented Oct 29, 2024 •
edited
Loading

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

@github-actions github-actions bot added area:ux UI / UX issue. area:i18n Localization size:XL 500~ LoC labels Oct 29, 2024
@ironAiken2 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 ironAiken2 marked this pull request as ready for review October 31, 2024 05:34
@github-actions GitHub Actions
Copy link

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

Coverage report for ./react

St.❔
 Category Percentage Covered / Total
🔴 Statements
5.32% (+0.03% 🔼)
 395/7429
🔴 Branches
4.58% (-0.01% 🔻)
 237/5178
🔴 Functions
3.18% (+0.02% 🔼)
 78/2451
🔴 Lines
5.23% (+0.03% 🔼)
 380/7264
Show new covered files 🐣
St.❔
 File Statements Branches Functions Lines
🔴
... / ActionItemContent.tsx
 0% 0% 0% 0%
🔴 pages/StartPage.tsx 0% 0% 0% 0%

Test suite run success

124 tests passing in 14 suites.

Report generated by 🧪jest coverage report action from 9cf442d

agatha197
agatha197 requested changes Nov 4, 2024
View reviewed changes
Copy link
Contributor

@agatha197 agatha197 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

react/src/pages/StartPage.tsx Outdated Show resolved Hide resolved
@ironAiken2 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 Graphite App
Copy link
Contributor Author

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

resolved!

YEONFEEL96
YEONFEEL96 requested changes Nov 8, 2024
View reviewed changes
Copy link

@YEONFEEL96 YEONFEEL96 left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 Outdated Show resolved Hide resolved
resources/i18n/en.json Outdated Show resolved Hide resolved
resources/i18n/en.json Outdated Show resolved Hide resolved
resources/i18n/en.json Outdated Show resolved Hide resolved
resources/i18n/en.json Outdated Show resolved Hide resolved
resources/i18n/ko.json Outdated Show resolved Hide resolved
resources/i18n/ko.json Outdated Show resolved Hide resolved
resources/i18n/ko.json Outdated Show resolved Hide resolved
resources/i18n/ko.json Outdated Show resolved Hide resolved
resources/i18n/ko.json Outdated Show resolved Hide resolved
@ironAiken2 ironAiken2 changed the title feat: WebUI NEO start page feat: WebUI NEO start page basic layout Nov 11, 2024
YEONFEEL96
YEONFEEL96 approved these changes Nov 12, 2024
View reviewed changes
Copy link

@YEONFEEL96 YEONFEEL96 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirmed that my changes have been reflected. LGTM.

agatha197
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 ironAiken2 linked an issue Nov 12, 2024 that may be closed by this pull request
WebUI NEO start page basic layout #2835
Open
agatha197
agatha197 approved these changes Nov 12, 2024
View reviewed changes
Copy link
Contributor

@agatha197 agatha197 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@ironAiken2 Graphite App
Copy link
Contributor Author

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

image.png

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

@ironAiken2 Graphite App
Copy link
Contributor Author

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
Copy link
Member

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 ironAiken2 changed the base branch from main to chore/pnpm-patch-react-project November 18, 2024 05:28
@ironAiken2 ironAiken2 mentioned this pull request Nov 18, 2024
Merged
This was referenced Nov 18, 2024
Merged
Merged
This was referenced Nov 18, 2024
Merged
Merged
Merged
Merged
@ironAiken2 Graphite App
Copy link
Contributor Author

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

@yomybaby yomybaby force-pushed the chore/pnpm-patch-react-project branch from f4d19c9 to 44ef647 Compare November 20, 2024 08:54
@ironAiken2 ironAiken2 force-pushed the feat/webui-neo-start-page branch 2 times, most recently from 92e62ca to 99960b4 Compare November 20, 2024 08:58
@yomybaby yomybaby force-pushed the chore/pnpm-patch-react-project branch from 844bc22 to 7d362f8 Compare November 20, 2024 09:06
@yomybaby yomybaby changed the base branch from chore/pnpm-patch-react-project to graphite-base/2786 November 20, 2024 09:10
@yomybaby yomybaby changed the base branch from graphite-base/2786 to main November 20, 2024 09:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@agatha197 agatha197 agatha197 approved these changes

@YEONFEEL96 YEONFEEL96 YEONFEEL96 approved these changes

@lizable lizable Awaiting requested review from lizable

@yomybaby yomybaby Awaiting requested review from yomybaby

Requested changes must be addressed to merge this pull request.

Assignees

@ironAiken2 ironAiken2

Labels
area:i18n Localization area:ux UI / UX issue. size:XL 500~ LoC
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

WebUI NEO start page basic layout
4 participants
@ironAiken2 @yomybaby @YEONFEEL96 @agatha197