CP 3.9 Fixes #36966, #36896, #36963 UI fixes

webpack/assets/javascripts/react_app/common/helpers.js

@@ -171,7 +171,7 @@ export const getWikiURL = section => foremanUrl(`/links/wiki/${section}`);
  */
 export const getDocsURL = (guide, chapter = null) => {
   const url = foremanUrl(`/links/docs/${guide}`);
-  return chapter ? `{url}?chapter={encodeURIComponent(chapter)}` : url;
+  return chapter ? `${url}?chapter=${encodeURIComponent(chapter)}` : url;
 };
 
 /**

webpack/assets/javascripts/react_app/common/helpers.test.js

@@ -10,6 +10,7 @@ import {
   stringIsPositiveNumber,
   formatDate,
   formatDateTime,
+  getDocsURL,
 } from './helpers';
 
 describe('isoCompatibleDate', () => {
@@ -130,3 +131,20 @@ describe('formatDateTime', () => {
     expect(formatDateTime(date)).toEqual('2020-03-06 14:00:00');
   });
 });
+
+describe('getDocsURL', () => {
+  it('should return URL with guide and chapter', () => {
+    const guide = 'Managing_Hosts';
+    const chapter = 'registering-a-host_managing-hosts';
+    const expectedUrl = '/links/docs/Managing_Hosts?chapter=registering-a-host_managing-hosts';
+
+    expect(getDocsURL(guide, chapter)).toEqual(expectedUrl);
+  });
+
+  it('should return URL with guide only when chapter is not provided', () => {
+    const guide = 'Managing_Hosts';
+    const expectedUrl = '/links/docs/Managing_Hosts';
+
+    expect(getDocsURL(guide)).toEqual(expectedUrl);
+  });
+});

webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.scss

@@ -11,6 +11,12 @@
   }
 }
 
+.pf-c-toolbar#data-toolbar {
+  // Override for unupdated plugins that use unupdated foreman CSS
+  display: grid;
+  justify-content: normal;
+}
+
 .pf-c-masthead__brand {
   padding-right: 15px;
 

webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js

@@ -231,7 +231,10 @@ const TableIndexPage = ({
               </ToolbarGroup>
             )}
             {actionButtons.length > 0 && (
-              <ToolbarGroup alignment={{ default: 'alignLeft' }}>
+              <ToolbarGroup
+                alignment={{ default: 'alignLeft' }}
+                className="table-toolbar-actions"
+              >
                 <ToolbarItem>
                   <ActionButtons buttons={actionButtons} />
                 </ToolbarItem>

webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.scss

@@ -13,8 +13,8 @@
       .toolbar-search {
         flex-grow: 1;
       }
-      .autocomplete-search {
-        max-width: 600px;
+      .table-toolbar-actions {
+        padding-left: 16px;
       }
     }
     .pf-c-toolbar__group {

webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.scss

@@ -15,4 +15,7 @@
   .pf-c-dropdown.pf-m-align-right {
     width: unset;
   }
+  .pf-c-dropdown { 
+    width: unset; // just in case Katello overrides it
+  }
 }