task/WP-388: Handle text overflow on longer system labels(systemName)

[tjgrafft]

Overview

The system name (root) in the dropdown menu is not truncated like the path folder names. This is causing a text overflow if the system name is a long string. See example below with Frontera system names/labels. Only an issue if the system name is over 20-char in length.

We can use the substring method, like I used for the path folder names below to handle this issue.

Related

• WP-388

Changes

• Added check if systemName was longer than 20 characters--used substring method to grab first 20 chars--otherwise render full systemName (or Shared Workspaces, if applicable)

Testing

1. Go to server > portal > settings > settings_default.py
2. Locate _PORTAL_DATAFILES_STORAGE_SYSTEMS
3. Change the name field for one of the objects to something like 'name': 'My Data (Frontera Scratch)'
4. Go to cep.test
5. Look in your Data Files to find the new system label you changed in settings
6. Open the Dropdown menu and check to make sure the long system label is no longer overflowing.
7. Compare with picture below
8. Change the name field back to the original label :)

UI

Notes

[codecov]

Codecov Report

Merging #901 (8654a0e) into main (d343e74) will not change coverage.
The diff coverage is n/a.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #901   +/-   ##
=======================================
  Coverage   63.40%   63.40%           
=======================================
  Files         432      432           
  Lines       12403    12403           
  Branches     2584     2584           
=======================================
  Hits         7864     7864           
  Misses       4327     4327           
  Partials      212      212           

Flag	Coverage Δ
javascript	69.75% <ø> (ø)
unittests	56.93% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

[rstijerina]

Should we expand the width of the dropdown window to fit longer system names @wesleyboar ?

[wesleyboar]

@rstijerina, making menu wider is fine.

@tjgrafft General note: If you use CSS for truncation (instead of JavaScript), then you never need to worry about character count. Browser will do the math for you.

[tjgrafft]

@wesleyboar Good point. Personally I didn't want to use truncate middle or the other truncate util I used for folder names bc I didn't think the ellipsis would look good in the dropdown menu, but I could make one without the ellipsis ending. Or I can have the dropdown menu autofit the width based on systemName. I'll look into both. Thanks!

[tjgrafft]

New look with auto width css

[rstijerina]

Should we have a max-width, for very long folder names?

[tjgrafft]

The path folder names won't be an issue bc they're being restricted to 20 chars. So it would only be an issue with system names/labels. My thinking is if we include a max-width the text overflow would happen again with a long system name. I know there's already code in the css file to handle media/device screen size rules. Do we think that's enough to handle the potential issue, or should I add a max-width of 800px and assume we'd never have a super long system name label past that?

[rstijerina]

Ah perfect, I think this is a good solution to this problem. Very long system names are unlikely, but we could address that in another task if need be.

[tjgrafft]

Sounds good!