Fixes #39059 - Update PageLayout to use PF5

Author: MariaAga

app/assets/stylesheets/patternfly_and_overrides.scss

@@ -134,10 +134,6 @@ a {
   align-items: center;
   margin-left: auto;
 
-  #toolbar-spinner {
-    margin-right: 5px;
-  }
-
   .btn-group,
   .btn-docs {
     float: none;

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

@@ -11,6 +11,7 @@
 }
 
 .foreman-search-bar {
+  width: 100%;
   display: flex;
   .pf-v5-c-dropdown.pf-m-align-right {
     width: unset;

webpack/assets/javascripts/react_app/routes/common/PageLayout/PageLayout.js

@@ -1,7 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Col, Spinner } from 'patternfly-react';
 import {
+  Spinner,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
   PageSection,
   PageSectionVariants,
   TextContent,
@@ -59,32 +63,38 @@ const PageLayout = ({
         beforeToolbarComponent ||
         isLoading ||
         toolbarButtons) && (
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection
+          variant={PageSectionVariants.light}
+          className="page-toolbar-section"
+        >
           {beforeToolbarComponent}
-          <div className="title_filter_parent">
-            <Col className="title_filter" md={6}>
-              {!searchable && toolbarButtons && title}
-              {searchable && (
-                <SearchBar
-                  data={{
-                    ...searchProps,
-                    autocomplete: { ...searchProps.autocomplete, searchQuery },
-                  }}
-                  onSearch={onSearch}
-                />
-              )}
-            </Col>
-            <Col md={6}>
-              <div className="btn-toolbar pull-right">
-                {isLoading && (
-                  <div id="toolbar-spinner">
-                    <Spinner loading size="sm" />
-                  </div>
+          <Toolbar ouiaId="page-toolbar">
+            <ToolbarContent>
+              <ToolbarItem widths={{ default: '50%' }}>
+                {!searchable && toolbarButtons && title}
+                {searchable && (
+                  <SearchBar
+                    data={{
+                      ...searchProps,
+                      autocomplete: {
+                        ...searchProps.autocomplete,
+                        searchQuery,
+                      },
+                    }}
+                    onSearch={onSearch}
+                  />
                 )}
+              </ToolbarItem>
+              {isLoading && (
+                <ToolbarItem alignSelf="center" id="toolbar-spinner">
+                  <Spinner size="md" />
+                </ToolbarItem>
+              )}
+              <ToolbarGroup align={{ default: 'alignRight' }}>
                 {toolbarButtons}
-              </div>
-            </Col>
-          </div>
+              </ToolbarGroup>
+            </ToolbarContent>
+          </Toolbar>
         </PageSection>
       )}
       <PageSection variant={PageSectionVariants.light} type={pageSectionType}>

webpack/assets/javascripts/react_app/routes/common/PageLayout/PageLayout.test.js

@@ -92,4 +92,26 @@ describe('PageLayout', () => {
     const contentElement = getByText('Content');
     expect(contentElement).toBeInTheDocument();
   });
+
+  it('should show spinner when isLoading is true', () => {
+    const { container } = renderWithStore(
+      <Router>
+        <PageLayout {...pageLayoutMock} isLoading={true}>
+          <div>Content</div>
+        </PageLayout>
+      </Router>
+    );
+    expect(container.querySelector('#toolbar-spinner')).toBeInTheDocument();
+  });
+
+  it('should not show spinner when isLoading is false', () => {
+    const { container } = renderWithStore(
+      <Router>
+        <PageLayout {...pageLayoutMock} isLoading={false}>
+          <div>Content</div>
+        </PageLayout>
+      </Router>
+    );
+    expect(container.querySelector('#toolbar-spinner')).toBeNull();
+  });
 });