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

…nder the "Administration" tab in the UI.
treeverse · Feb 11, 2025 · 205ff9a · 205ff9a
1 parent 237587b
commit 205ff9a
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 32 deletions.
diff --git a/webui/src/lib/components/auth/forms.jsx b/webui/src/lib/components/auth/forms.jsx
@@ -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"
 
 export const AttachModal = ({
                               show, searchFn, resolveEntityFn = (ent => ent.id), onAttach, onHide, addText = "Add",
@@ -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>

diff --git a/webui/src/lib/components/auth/nav.jsx b/webui/src/lib/components/auth/nav.jsx
@@ -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();
@@ -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>
@@ -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>
@@ -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>

diff --git a/webui/src/lib/components/controls.jsx b/webui/src/lib/components/controls.jsx
@@ -22,7 +22,7 @@ import {
     Typography
 } from "@mui/material";
 import InputGroup from "react-bootstrap/InputGroup";
-
+import "../../styles/globals.css"
 
 const defaultDebounceMs = 300;
 
@@ -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>
     );

diff --git a/webui/src/pages/auth/users/user/credentials.jsx b/webui/src/pages/auth/users/user/credentials.jsx
@@ -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();
@@ -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) => (
+            <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'}/>

diff --git a/webui/src/styles/globals.css b/webui/src/styles/globals.css
@@ -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%;
 }