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

Fixed the issue where long values overflowed the modal in the pages u… #8640

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

Fixed the issue where long values overflowed the modal in the pages u… #8640

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions webui/src/lib/components/auth/forms.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

you're right it works without the import


export const AttachModal = ({
show, searchFn, resolveEntityFn = (ent => ent.id), onAttach, onHide, addText = "Add",
Expand Down Expand Up @@ -52,8 +53,14 @@ export const AttachModal = ({
<p>
<strong>Selected: </strong>
{(selected.map(item => (
<Badge key={item.id} pill variant="primary" className="me-1">
{resolveEntityFn(item)}
<Badge
key={item.id}
pill
variant="primary"
className="me-1 text-truncate truncate-cell"
title={resolveEntityFn(item)}
>
{resolveEntityFn(item)}
</Badge>
)))}
</p>
Expand Down
22 changes: 19 additions & 3 deletions webui/src/lib/components/auth/nav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {Link, NavItem} from "../nav";
import {useAPI} from "../../hooks/api";
import {auth} from "../../api";

import "../../../styles/globals.css";

export const UserNav = ({ userId, page = 'groups' }) => {
const {RBAC: rbac} = useLoginConfigContext();
Expand Down Expand Up @@ -87,7 +88,12 @@ export const UserHeader = ({ userEmail, userId, page }) => {
<Link component={BreadcrumbItem} href='/auth/users'>
Users
</Link>
<Link component={BreadcrumbItem} href={{pathname: '/auth/users/:userId', params: {userId}}}>
<Link
component={BreadcrumbItem}
href={{pathname: '/auth/users/:userId', params: {userId}}}
className="d-inline-block text-truncate truncate-link"
title={userEmail}
>
{userEmail}
</Link>
</Breadcrumb>
Expand All @@ -104,7 +110,12 @@ export const GroupHeader = ({ groupId, page }) => {
<Link component={BreadcrumbItem} href='/auth/groups'>
Groups
</Link>
<Link component={BreadcrumbItem} href={{pathname: '/auth/groups/:groupId', params: {groupId}}}>
<Link
component={BreadcrumbItem}
href={{pathname: '/auth/groups/:groupId', params: {groupId}}}
className="d-inline-block text-truncate truncate-link"
title={groupId}
>
{groupId}
</Link>
</Breadcrumb>
Expand All @@ -121,7 +132,12 @@ export const PolicyHeader = ({ policyId }) => {
<Link component={BreadcrumbItem} href='/auth/policies'>
Policies
</Link>
<Link component={BreadcrumbItem} href={{pathname: '/auth/policies/:policyId', params: {policyId}}}>
<Link
component={BreadcrumbItem}
href={{pathname: '/auth/policies/:policyId', params: {policyId}}}
className="d-inline-block text-truncate truncate-link"
title={policyId}
>
{policyId}
</Link>
</Breadcrumb>
Expand Down
56 changes: 30 additions & 26 deletions webui/src/lib/components/controls.jsx
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

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

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.

Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
Typography
} from "@mui/material";
import InputGroup from "react-bootstrap/InputGroup";

import "../../styles/globals.css"

const defaultDebounceMs = 300;

Expand Down Expand Up @@ -342,36 +342,40 @@ export const DataTable = ({ headers, results, rowFn, keyFn = (row) => row[0], ac
}

return (
<Table>
<Table className="table-fixed">
<thead>
<tr>
{headers.map(header => (
<th key={header}>{header}</th>
))}
{(!!actions && actions.length > 0) && <th/>}
{headers.map(header => (
<th key={header}>{header}</th>
))}
{(!!actions && actions.length > 0) && <th/>}
</tr>
</thead>
<tbody>
{results.map(row => (
<tr key={keyFn(row)}>
{rowFn(row).map((cell, i) => (
<td key={`${keyFn(row)}-${i}`}>
{cell}
</td>
))}
{(!!actions && actions.length > 0) && (
<td>
<span className="row-hover">
{actions.map(action => (
<span key={`${keyFn(row)}-${action.key}`}>
{action.buttonFn(row)}
</span>
))}
</span>
</td>
)}
</tr>
))}
{results.map(row => (
<tr key={keyFn(row)}>
{rowFn(row).map((cell, i) => (
<td
key={`${keyFn(row)}-${i}`}
className="truncate-cell"
title={keyFn(row)}
>
{cell}
</td>
))}
{(!!actions && actions.length > 0) && (
<td>
<span className="row-hover">
{actions.map(action => (
<span key={`${keyFn(row)}-${action.key}`}>
{action.buttonFn(row)}
</span>
))}
</span>
</td>
)}
</tr>
))}
</tbody>
</Table>
);
Expand Down
14 changes: 13 additions & 1 deletion webui/src/pages/auth/users/user/credentials.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
} from "../../../../lib/components/controls";
import {useRouter} from "../../../../lib/hooks/router";

import "../../../../styles/globals.css"

const UserCredentialsList = ({ userId, after, onPaginate }) => {
const {user} = useUser();
Expand Down Expand Up @@ -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) => (
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you please explain this change?

<span>
Create new credentials for user{" "}
<strong
className="d-inline-block text-truncate truncate-cell"
title={email}
>
{email}
</strong>
{" "}?
</span>
);
return (
<>
<UserHeaderWithContext userId={userId} page={'credentials'}/>
Expand Down
21 changes: 21 additions & 0 deletions webui/src/styles/globals.css
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

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

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.

Original file line number Diff line number Diff line change
Expand Up @@ -922,4 +922,25 @@ td.entry-type-indicator {

.pull-details .description {
min-height: 160px;
}

.truncate-link {
display: inline-block;
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.truncate-cell {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}

.table-fixed {
table-layout: fixed;
width: 100%;
}
Loading