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

[Annaseli]

…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

• Applied truncation for long values in modals.
• Users can hover to see full value and copy the truncated value.
• Fix applied globally to relevant components where was possibly.

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)

• Chaned in PolicyHeader since it has the same structure as GroupHeader and 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.

[github-actions]

E2E Test Results - DynamoDB Local - Local Block Adapter

[github-actions]

E2E Test Results - Quickstart

[guy-har]

Looks Amazing!
Great work!
requesting changes because the checkbox has too much place now

[itaigilo]

Great first big PR -
Really nice effort mapping the issues, looking around, and getting to a complete solution.

Some notes:

1. Agree with @guy-har 's comment about limiting the width of the checkbox.
2. 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.
3. Nit: better to have a shorter title for the PR, for better readability. 😊

Anyway, nice work 💪

[Annaseli]

I addressed all the comments:

1. removed the "import styles"
2. removed the custom styles from globals.css and used bootstrap classes instead
3. split this PR to several PRs in order to address each fix in another PR
4. Narrowed the leftmose "checkbox" column using bootstrap classes
5. used shorter commit messages for better readability

So now this PR addresses only this fix:

Issue

Long values overflowed modal windows across tables in "Groups", "Users" and "Policies" pages in the "Administration" tab.

Fix

1. Applied truncation for long values in modals using react bootstrap classes.
2. Users can hover to see full value and copy the truncated value.

Changes Made

1. In the table: "Groups" main page (Administration -> Groups )
2. In the table: "Add to Group" Pop-up (Administration -> Groups -> click on some group name -> Add Members)
3. In the table: "Users" main page (Administration -> Users )
4. In the table: "Add to Groups" Pop-up (Administration -> Users -> click on some group name -> Add User to Group)
5. In similar pages in the "Policies" page

Updated the Table under the DataTable component to prevent overflow.

Changed in file:
webui/src/lib/components/controls.jsx (DataTable)

The issue screenshots:

Fixes:

Testing

Verified on lakeFS OSS using local DB & object store & ACL.

[itaigilo]

@Annaseli I'm not sure where it stands at the moment,
But according to your screenshots it seems that the column of the checkbox is too wide again.
Is this on purpose?

[Annaseli]

@itaigilo
You're right, compared to the original table with the overflow issue, the checkbox column is still quite wide in the screenshots above (though narrower than in my initial solution). To shrink it further, I added "col-12" in the following line of code:
${(firstFixedCol && i === 0) ? "col-1" : "col-12"}
in the controls.jsx file.
When all columns except the first one are set to "col-12", they cause the first column to become narrower.

Now, the column appears narrower:

[itaigilo]

Well, this is a usage of bootstrap classes which sort-of work for you, but it's pretty accidental. The bootstrap framework uses 12-cols grid elements, so setting an element as col-1 makes it take 1/12 of the width of a element, and col-12 makes it take the whole width of it. So these classes maybe work for you in this context, but there's no guarantee it'll work on other browsers, for example.

How about doing something like:
style={${(firstFixedCol && i === 0) ? "width: 60px" : ""`
(Not sure about the details, but the general idea is to give an actual fixed size for the first column.)

Does this give the same result?

[itaigilo]

(Having said that, I still think that a better overall solution is required here. Either by using a different Table package that might allow this truncate ability, or using a non-table solution for the Auth components (when thinking about it, these are not actually data tables, but UI components, and should be treated as such).
But since this requires an effort which is out-of-scope for this bug fix, it can be deferred.)

[Annaseli]

@itaigilo

I agree that using col-* isn't the best solution, and after I checked it a few days ago further, I found that overriding the width with a style like {{"width: X"}}, is indeed a more appropriate and common approach in React.

I understood that bootstrap’s col-* classes come from its grid system, which isn't designed to be used directly inside elements in tables. They attempt to control column width and they have an effect when combined with "table-layout: fixed" as I used it. Since Bootstrap’s grid system (col-*) is meant for div-based layouts rather than tables, it's not suitable perfectly inside .

I found out that a better approach for fixing column widths in tables:
To use style={{ width: "X%" }} inside .
or
To use with { width: "X%" } .

However, when I previously suggested it, I understood that it’s not a good practice and that we should use Bootstrap classes instead. The "w-" approach didn't work for me, but "col-" did.

In my earlier solution (before the col-* solution) , I used a fixed width, and it worked.

So, would you recommend using style={{ width: "X%" }} instead of col-* in this case?

I believe using percentages instead of a fixed 60px width is a better approach since the browser can dynamically adjust it rather than us setting a fixed size manually.

And yes, I agree with you that a more generalized approach is needed here, and that this PR provides just a compromise.

[itaigilo]

The thing is -
We use this mechanism only for the checkbox column. And since a checkbox has a fixed size, why do you prefer to give it a dynamic width instead of a fixed width (assuming, of course, that fixed width also gives good results for this)?