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: React root including MainLayout, useBAINotification #2121

Merged
merged 171 commits into from
Jan 29, 2024
Merged

feat: React root including MainLayout, useBAINotification #2121

merged 171 commits into from
Jan 29, 2024

Conversation

yomybaby
Copy link
Member

@yomybaby yomybaby commented Dec 28, 2023 •
edited

This PR modifies the structure to have React as the root, with the existing backend.ai-webui components nested within. This change includes managing the Main layout, which corresponds to the Sider and Menu, within React.

Feature

Edit tasklist title
Beta Give feedback Tasklist Feature, more options

Delete tasklist

Delete tasklist block?
Are you sure? All relationships in this tasklist will be removed.
  1. config options related to Sider menus (such as menu_blocklist, menu_inactivelist...)
    Options
  2. Documentation link on header (#9f757, #62781)
    Options
  3. Notification list
    Options
  4. Task list
    Options
  5. Plugin menu (#3f3e1)
    Options
  6. Custom theme for sider configuration (#f6bf4)
    Options
  7. Apply light bg color to mwc-tab-bar => feat: React root phase 2 #2160
    Options
  8. Collapse sidebar config (Use Compact Sidebar by default) (#2288c)
    Options
  9. Add notification / task filtering
    Options
  10. 404 page
    Options
  11. routing 401, 404 and plugin pages in React part (react-router redirect) => feat: React root phase 2 #2160
    Options
  12. Timeout & off-line notification => feat: React root phase 2 #2160
    Options
  13. Display/Hide menu item on Sider depends on manage version (sujin) (#bd94355)
    Options

UI/Layout changes and bugs

Edit tasklist title
Beta Give feedback Tasklist UI/Layout changes and bugs, more options

Delete tasklist

Delete tasklist block?
Are you sure? All relationships in this tasklist will be removed.
  1. Add padding to the notification title (or close button) so that there is no overlapping.
    Options
  2. bg_task_failed or task_failed of background-task SSE? (handle both)
    Options
  3. When initial rendering, the badge of Notification Button is flickering => feat: React root phase 2 #2160
    Options
  4. potential undefined in plugin menu items when no plugins (you can test try to open 404 page eg/agent1231312) commit
    Options
  5. Missing: react route for Serving detail page (jongeun) (commit)
    Options
  6. Bug: No notification when login failed (ref) (jongeun) (commit)
    Options
  7. Theme: apply light theme to lit tab (commit) (sujin)
    Options
  8. Display functions according to the settings in config.toml.(e.g. userSignout, siteDescription, etc..) (commit)
    Options
  9. Bug: "자원사용량", "시스템 자원" broken UI (ref) @agatha197 (commit)
    Options
  10. Bug: Broken layout of Import page (ref, jongeun, commit)
    Options
  11. Bug: userDropdown is broken UI (jongeun, commit)
    Options
  12. Bug: user can navigate to use dropdown menu or webui logo even though page is added in blocklist and inactivelist @agatha197 => feat: React root phase 2 #2160
    Options
  13. Bug: Notification is not shown correct (ref) (jongeun, commit)
    Options
  14. Bug: notification drawer over the mask of lit modal (jongeun, commit)
    Options
  15. Bug: (electron) Slider menu 'summary' item doesn't selected when login. (ref) (jongeun, commit)
    Options
  16. Bug: (electron) Unexpected Application Error on Logout (ref) (jongeun, commit)
    Options
  17. Bug: (electron) When using TableColumnsSettingModal, selected changes not applied. (ref) (jongeun) handled in fix: initialValues props of <Form/> under Modal doesn't work in Electron #2178
    Options
  18. Bug: the click event doesn't work after clicking the create a new keypair button of the summary page. (superadmin only) -> handle in If keypair modal isn't closed and move to another page, any click event doesn't work. #2176
    Options
  19. Bug: error notification's detail button in drawer doesn't navigate to log page (jonguen, commit)
    Options

UI/Layout Idea

Edit tasklist title
Beta Give feedback Tasklist UI/Layout Idea, more options

Delete tasklist

Delete tasklist block?
Are you sure? All relationships in this tasklist will be removed.
  1. Compact sider setting 2288ccf
    Options
  2. Drawer UX: Not overlay style and change the close control (applied "drawer on content" style)
    Options
  3. Reduce the Sider width
    Options

How to test

  • Run running script again so that recognize the renamed file, react/src/hooks/index.tsx (npm run server:d, npm run build:d)

Reviewer check list

Please ref loop page.

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

@github-actions github-actions bot added the size:XL 500~ LoC label Dec 28, 2023
@aws-amplify-ap-northeast-2 AWS Amplify (ap-northeast-2)
Copy link

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-2121.d3g9cs6u59b8lw.amplifyapp.com

agatha197 and others added 25 commits January 2, 2024 19:26
@agatha197
feat: add menu items
cb6c85c
@agatha197
feat: add event listener to footer and divide menu into multiple array
c1108d2
@agatha197
style: wrapping terms of use
86669fe
@agatha197
style: increase z index of loading image
26870dc
@agatha197
feat: display title using state
884c6ff
@yomybaby
divide MainLayout into multiple components to make it a sibling of …
5431b59 
…backend-ai-webui
@yomybaby
add project selector to Header
d4b147e
@yomybaby
revert z-index of webui-styles
fee3037
@yomybaby
use UserDropDownMenu component
6afcbb8
@yomybaby
apply large style to Header items
f7d5cda
@agatha197
feat: display title according to the current path
0de13d7
@yomybaby
fix menu toggle button and user setting modal
7a93ee4
@agatha197
feat: add labelKey to the root page
b41c212
@yomybaby
menu show/hide based on user role
cdc5dae
@yomybaby
display version number on sider and change sider layout
02df917
@yomybaby
Merge branch 'react-root' of github.com:lablup/backend.ai-webui into …
09d7a99 
…react-root
@yomybaby
Merge branch 'main' into react-root
4af1047
@yomybaby
fix layout bug in MainLayout
de7ced7
@yomybaby
fix AnnoucementAlert layout
bc3a35f
@yomybaby
fix layout of StageStatusPanel
20bc0ae
@yomybaby
fix sider scroll bug
3c38611
@yomybaby
pull out Information react component in web component and remove hard…
4cfab54 
…coded margin of activity-panel
@yomybaby
remove dark style for tab in react component
73bd998
@yomybaby
remove comments and unused variables
10bf1bd
@yomybaby
fix preference and logs in UserDropMenu
15dfcd6
gee05053

This comment was marked as resolved.

Sign in to view

@ironAiken2 ironAiken2 self-requested a review January 29, 2024 02:08
@gee05053 gee05053 mentioned this pull request Jan 29, 2024
Closed
gee05053
gee05053 approved these changes Jan 29, 2024
View reviewed changes
Copy link
Contributor

@gee05053 gee05053 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 yomybaby dismissed ironAiken2’s stale review January 29, 2024 03:26

This is already resolved

@yomybaby yomybaby merged commit 70bb206 into main Jan 29, 2024
7 of 8 checks passed
@yomybaby yomybaby deleted the react-root branch January 29, 2024 03:26
@yomybaby yomybaby mentioned this pull request Jan 29, 2024
Merged
6 tasks
@agatha197 agatha197 added type:enhance Add new features area:lib Library and SDK related issue. area:ux UI / UX issue. area:i18n Localization type:refactor Refactoring current implementation. platform:general effort:epic Need to split into multiple sub-issues (epic). labels Jan 29, 2024
@yomybaby yomybaby mentioned this pull request Feb 5, 2024
Draft
6 tasks
@yomybaby yomybaby mentioned this pull request Apr 17, 2024
Merged
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gee05053 gee05053 gee05053 approved these changes

@lizable lizable Awaiting requested review from lizable

@ironAiken2 ironAiken2 Awaiting requested review from ironAiken2

Assignees

@yomybaby yomybaby

@agatha197 agatha197

Labels
area:i18n Localization area:lib Library and SDK related issue. area:ux UI / UX issue. effort:epic Need to split into multiple sub-issues (epic). field:localization field:UI / UX platform:general size:XL 500~ LoC type:enhance Add new features type:refactor Refactoring current implementation.
Projects
None yet
Milestone
24.03
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@yomybaby @agatha197 @gee05053 @ironAiken2