Fixes #36350 - Add line breaks to long bookmarks

theforeman · Aug 9, 2023 · 6479a47 · 6479a47
1 parent 4381a7b
commit 6479a47
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 20 deletions.
diff --git a/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/BookmarkItems.js b/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/BookmarkItems.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import EllipisWithTooltip from 'react-ellipsis-with-tooltip';
 import { PlusIcon } from '@patternfly/react-icons';
 import {
   DropdownItem,
@@ -10,6 +9,7 @@ import {
 import { sprintf, translate as __ } from '../../../common/I18n';
 import { STATUS } from '../../../constants';
 import DocumentationUrl from '../DocumentationLink';
+import './bookmarks.scss';
 
 export const addBookmarkItem = ({ setModalOpen }) => (
   <DropdownGroup key="create-bookmark">
@@ -39,29 +39,44 @@ const pendingItem = (
   </DropdownItem>
 );
 
-const bookmarksList = ({ bookmarks, onBookmarkClick }) =>
-  (bookmarks.length > 0 &&
-    bookmarks.map(({ name, query }) => (
-      <DropdownItem
-        ouiaId={`${name}-dropdown-item`}
-        key={name}
-        onClick={() => onBookmarkClick(query)}
-      >
-        <EllipisWithTooltip>{name}</EllipisWithTooltip>
+const bookmarksList = ({ bookmarks, onBookmarkClick }) => {
+  const hasLongerName = bookmarks.some(bookmark => bookmark.name.length > 90);
+
+  return (
+    (bookmarks.length > 0 &&
+      bookmarks.map(({ name, query }) => (
+        <DropdownItem
+          ouiaId={`${name}-dropdown-item`}
+          className={`bookmarks-dropdown-item ${
+            hasLongerName ? 'expanded' : ''
+          }`}
+          key={name}
+          onClick={() => onBookmarkClick(query)}
+        >
+          {name}
+        </DropdownItem>
+      ))) || (
+      <DropdownItem ouiaId="not-found-dropdown-item" key="not found" isDisabled>
+        {__('None found')}
       </DropdownItem>
-    ))) || (
-    <DropdownItem ouiaId="not-found-dropdown-item" key="not found" isDisabled>
-      {__('None found')}
-    </DropdownItem>
+    )
   );
+};
+
+const errorItem = errors => {
+  const hasLongerName = errors.some(error => error.name.length > 90);
 
-const errorItem = errors => (
-  <DropdownItem ouiaId="error-dropdown-item" key="bookmarks-errors" isDisabled>
-    <EllipisWithTooltip>
+  return (
+    <DropdownItem
+      ouiaId="error-dropdown-item"
+      className={`bookmarks-dropdown-item ${hasLongerName ? 'expanded' : ''}`}
+      key="bookmarks-errors"
+      isDisabled
+    >
       {sprintf('Failed to load bookmarks: %s', errors)}
-    </EllipisWithTooltip>
-  </DropdownItem>
-);
+    </DropdownItem>
+  );
+};
 
 export const savedBookmarksItems = ({
   bookmarks,

diff --git a/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/bookmarks.scss b/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/bookmarks.scss
@@ -0,0 +1,26 @@
+@import '~@theforeman/vendor/scss/variables';
+
+.bookmarks-dropdown-item {
+  word-break: break-word;
+  overflow-wrap: break-word;
+  white-space: nowrap;
+}
+
+.bookmarks-dropdown-item.expanded {
+  width: 450px;
+  white-space: normal;
+}
+
+@media only screen and (min-width: $pf-global--breakpoint--xl) {
+  .bookmarks-dropdown-item.expanded {
+    width: 600px;
+    white-space: normal;
+  }
+}
+
+@media only screen and (min-width: $pf-global--breakpoint--2xl) {
+  .bookmarks-dropdown-item.expanded {
+    width: 700px;
+    white-space: normal;
+  }
+}