Fixed the issue where long values overflowed the modal in the pages u… #8640
Conversation
…nder the "Administration" tab in the UI.
Annaseli
added
the
include-changelog
E2E Test Results - DynamoDB Local - Local Block Adapter |
E2E Test Results - Quickstart |
| @@ -9,6 +9,7 @@ import {SearchIcon} from "@primer/octicons-react"; | |||
| import {useAPI} from "../../hooks/api"; | |||
| import {Checkbox, DataTable, DebouncedFormControl, AlertError, Loading} from "../controls"; | |||
|
|
|||
| import "../../../styles/globals.css" | |||
There was a problem hiding this comment.
Is this required? IIUC it's importet in main.tsx which should be enough...
This comment goes for all other files where this import exists
There was a problem hiding this comment.
you're right it works without the import
There was a problem hiding this comment.
Great first big PR -
Really nice effort mapping the issues, looking around, and getting to a complete solution.
Some notes:
- Agree with @guy-har 's comment about limiting the width of the checkbox.
- You should consider splitting this PR into one with the specific changes, and one with the general ones, that will apply multiple components. Since changing global components (potentially) affects the whole app, I think it's better to have a separate PR and discussion for it.
- Nit: better to have a shorter title for the PR, for better readability. 😊
Anyway, nice work 💪
There was a problem hiding this comment.
Generally speaking, we should try to avoid using globals.css as much as possible.
Historically it's been used quite heavily, but there's a task to change this.
The reasoning behind it is to let the bootstrap framework do all the UI work for us, and "guide" it using bootstrap classes. When we're using global classes, it's easy to fix one thing while breaking another one. Using the bootstrap classes gives us more confidence that the maintainers of the framework already checked this on different components.
I would start with the table component, and see which of these you can utilize.
Anyway, classes should be added to globals.css only as a last resort.
There was a problem hiding this comment.
Although it's tempting, please try to avoid re-formatting the whole file (unless you're changing big parts of it).
It makes reviewing harder, and messes with the git history.
There is a plan to apply auto-formatting on the React code, but it's not applied yet.
| @@ -43,7 +44,18 @@ const UserCredentialsList = ({ userId, after, onPaginate }) => { | |||
| </> | |||
| ); | |||
|
|
|||
| const getMsg = (email) => <span>Create new credentials for user <strong>{email}</strong>?</span>; | |||
| const getMsg = (email) => ( | |||
There was a problem hiding this comment.
Can you please explain this change?
…nder the "Administration" tab in the UI.
Closes #8489
Issue
Long values overflowed modal windows across multiple pages in the "Administration" tab. Initially reported for one modal, but found in Users, Groups, and other sections (for other sections I opened another issue).
Fix
Changes Made
1. "Add to Group" Pop-up (Groups -> click on some group name -> Add Members)
Updated the DataTable component to prevent overflow.
Changed in files:
webui/src/lib/components/controls.jsx (DataTable)
webui/src/lib/components/auth/forms.jsx (AttachModal)
The issue screenshot:
Fix:
Note
This pop-up is implemented using a "DataTable" and AttachModal, which is also used in other functions.
For example it fixed in addition this issue:
Issue:
Fix:
2. "Groups" Page (Groups -> Group Name) "Users" Page (Users -> User Name)
Fixed GroupHeader, PolicyHeader, UserHeader overflow.
Changed in files:
webui/src/lib/components/auth/nav.jsx (GroupHeader, PolicyHeader, UserHeader)
The issue screenshot:
Fix:
3. Fixed user name overflow in confirmation pop-up (Users -> selecting a user with a long name -> Access Credentials -> Create Access Key)
Changed in files:
webui/src/pages/auth/users/user/credentials.jsx (getMsg function)
The issue screenshot:
Fix:
Testing
Verified on lakeFS OSS using local DB & object store.