Fixed the issue where long values overflowed the modal in tables in A…

…dministration tab (#8640)
treeverse · Feb 24, 2025 · 3e22eaf · 3e22eaf
1 parent b51b7a8
commit 3e22eaf
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 11 deletions.
diff --git a/webui/src/lib/components/auth/forms.jsx b/webui/src/lib/components/auth/forms.jsx
@@ -12,7 +12,7 @@ import {Checkbox, DataTable, DebouncedFormControl, AlertError, Loading} from "..
 
 export const AttachModal = ({
                               show, searchFn, resolveEntityFn = (ent => ent.id), onAttach, onHide, addText = "Add",
-                              emptyState = 'No matches', modalTitle = 'Add', headers = ['Select', 'ID'],
+                              emptyState = 'No matches', modalTitle = 'Add', headers = ['', 'ID'],
                               filterPlaceholder = 'Filter...'
                             }) => {
   const search = useRef(null);
@@ -45,7 +45,9 @@ export const AttachModal = ({
               onRemove={() => setSelected(selected.filter(selectedEnt => selectedEnt.id !== ent.id))}
               name={'selected'}/>,
             <strong>{resolveEntityFn(ent)}</strong>
-          ]}/>
+          ]}
+          firstFixedCol={true}
+        />
 
         <div className="mt-3">
           {(selected.length > 0) &&

diff --git a/webui/src/lib/components/controls.jsx b/webui/src/lib/components/controls.jsx
@@ -335,18 +335,26 @@ export const RefreshButton = ({ onClick, size = "md", variant = "light", tooltip
     );
 };
 
-export const DataTable = ({ headers, results, rowFn, keyFn = (row) => row[0], actions = [], emptyState = null }) => {
+export const DataTable = ({ headers, results, rowFn, keyFn = (row) => row[0], actions = [],
+                              emptyState = null, firstFixedCol = false }) => {
 
     if ((!results || results.length === 0) && emptyState !== null) {
         return <Alert variant="warning">{emptyState}</Alert>;
     }
 
     return (
-        <Table>
+        <Table className="w-100" style={{ tableLayout: "fixed" }}>
             <thead>
                 <tr>
-                {headers.map(header => (
-                    <th key={header}>{header}</th>
+                {headers.map((header, i) => (
+                    <th
+                        key={header}
+                        title={header}
+                        style={firstFixedCol && i === 0 ? { width: "30px" } : {}}
+                        className="text-nowrap overflow-hidden text-truncate align-middle"
+                    >
+                        {header}
+                    </th>
                 ))}
                 {(!!actions && actions.length > 0) && <th/>}
                 </tr>
@@ -355,7 +363,11 @@ export const DataTable = ({ headers, results, rowFn, keyFn = (row) => row[0], ac
             {results.map(row => (
                 <tr key={keyFn(row)}>
                     {rowFn(row).map((cell, i) => (
-                        <td key={`${keyFn(row)}-${i}`}>
+                        <td
+                            key={`${keyFn(row)}-${i}`}
+                            title={keyFn(row)}
+                            className="text-nowrap overflow-hidden text-truncate align-middle"
+                        >
                             {cell}
                         </td>
                     ))}

diff --git a/webui/src/pages/auth/groups/index.tsx b/webui/src/pages/auth/groups/index.tsx
@@ -196,7 +196,9 @@ const GroupsContainer = () => {
                     elements.push(<FormattedDate dateValue={group.creation_date}/>)
 
                     return elements;
-                }}/>
+                }}
+                firstFixedCol={true}
+            />
 
             <Paginator
                 nextPage={nextPage}

diff --git a/webui/src/pages/auth/policies/index.jsx b/webui/src/pages/auth/policies/index.jsx
@@ -119,7 +119,9 @@ const PoliciesContainer = () => {
                         {policy.id}
                     </Link>,
                     <FormattedDate dateValue={policy.creation_date}/>
-                ]}/>
+                ]}
+                firstFixedCol={true}
+            />
 
             <Paginator
                 nextPage={nextPage}

diff --git a/webui/src/pages/auth/users/index.jsx b/webui/src/pages/auth/users/index.jsx
@@ -122,7 +122,9 @@ const UsersContainer = ({nextPage, refresh, setRefresh, error, loading, userList
                         { resolveUserDisplayName(user) }
                     </Link>,
                     <FormattedDate dateValue={user.creation_date}/>
-                ]}/>
+                ]}
+                firstFixedCol={true}
+            />
 
             <Paginator
                 nextPage={nextPage}

diff --git a/webui/src/pages/auth/users/user/groups.jsx b/webui/src/pages/auth/users/user/groups.jsx
@@ -99,7 +99,7 @@ const UserGroupsList = ({ userId, after, onPaginate }) => {
             filterPlaceholder={"Find Group..."}
             modalTitle={"Add to Groups"}
             addText={"Add to Groups"}
-            headers={["Select", "Group Name"]}
+            headers={["", "Group Name"]}
             searchFn={(prefix) =>
               auth.listGroups(prefix, "", 5).then((res) => res.results)
             }