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.

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

feat: WebUI NEO start page basic layout #2786

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

Conversation

ironAiken2
Copy link
Contributor

@ironAiken2 ironAiken2 commented Oct 29, 2024

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

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.

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

github-actions bot commented Oct 31, 2024

Coverage report for ./react

St.
Category Percentage Covered / Total
🔴 Statements
5.3% (+0.03% 🔼)
395/7452
🔴 Branches
4.57% (-0.01% 🔻)
237/5188
🔴 Functions
3.18% (+0.02% 🔼)
78/2455
🔴 Lines
5.22% (+0.03% 🔼)
380/7286
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 22d27de

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

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

resolved!

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.

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
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.

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
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

@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

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
Labels
area:i18n Localization area:ux UI / UX issue. size:XL 500~ LoC
Projects
None yet
Development

Successfully merging this pull request may close these issues.

WebUI NEO start page basic layout
4 participants