Fixes #36734 - Hide double title on Register Host page

theforeman · Sep 19, 2023 · 772cfd2 · 772cfd2
1 parent 2eacedb
commit 772cfd2
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 70 deletions.
diff --git a/...ssets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/index.js b/...ssets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/index.js
@@ -4,16 +4,15 @@ import { useSelector, useDispatch } from 'react-redux';
 
 import {
   Alert,
+  Button,
   Form,
   Grid,
   GridItem,
   Tab,
   Tabs,
   TabContent,
   TabTitleText,
-  Title,
 } from '@patternfly/react-core';
-import { HelpIcon } from '@patternfly/react-icons';
 
 import { translate as __ } from '../../../common/I18n';
 import {
@@ -173,30 +172,29 @@ const RegistrationCommandsPage = () => {
   }, [dispatch, hostGroupId, operatingSystemId]);
 
   return (
-    <PageLayout header={__('Register Host')} searchable={false}>
+    <PageLayout
+      header={__('Register Host')}
+      searchable={false}
+      toolbarButtons={
+        <Button
+          ouiaId="register-host-documentation-button"
+          component="a"
+          className="btn-docs"
+          href={docUrl(foremanVersion)}
+          rel="noreferrer"
+          target="_blank"
+          variant="secondary"
+        >
+          {__(' Documentation')}
+        </Button>
+      }
+    >
       <Form
         onSubmit={e => handleSubmit(e)}
         className="registration_commands_form"
         isHorizontal
       >
         <Grid hasGutter>
-          <GridItem span={12} />
-          <GridItem span={6}>
-            <Title ouiaId="title-register-host" headingLevel="h1">
-              {__('Register Host')}
-            </Title>
-          </GridItem>
-          <GridItem span={6}>
-            <a
-              href={docUrl(foremanVersion)}
-              target="_blank"
-              rel="noreferrer"
-              className="pf-c-button pf-m-secondary pf-m-small pull-right"
-            >
-              <HelpIcon /> {__('Documentation')}
-            </a>
-          </GridItem>
-
           <GridItem span={12}>
             <Tabs
               ouiaId="tabs-register-host"
@@ -210,7 +208,6 @@ const RegistrationCommandsPage = () => {
                 tabContentId="generalTab"
                 tabContentRef={generalTabRef}
               />
-
               <Tab
                 ouiaId="tab-advanced"
                 eventKey={1}

diff --git a/webpack/assets/javascripts/react_app/routes/common/PageLayout/PageLayout.js b/webpack/assets/javascripts/react_app/routes/common/PageLayout/PageLayout.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-comment-textnodes */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Col, Spinner } from 'patternfly-react';
@@ -25,58 +26,74 @@ const PageLayout = ({
   isLoading,
   pageSectionType,
   children,
-}) => (
-  <>
-    <Head>
-      <title>{header}</title>
-    </Head>
-    <PageSection variant={PageSectionVariants.light} type="breadcrumb">
-      <div id="breadcrumb">
-        {!breadcrumbOptions && (
-          <TextContent>
-            <Text ouiaId="breadcrumb_title" component="h1">
-              {header}
-            </Text>
-          </TextContent>
-        )}
-        {customBreadcrumbs ||
-          (breadcrumbOptions && <BreadcrumbBar {...breadcrumbOptions} />)}
-      </div>
-    </PageSection>
+}) => {
+  const title = (
+    <TextContent>
+      <Text ouiaId="breadcrumb_title" component="h1">
+        {header}
+      </Text>
+    </TextContent>
+  );
 
-    {(searchable || beforeToolbarComponent || isLoading || toolbarButtons) && (
-      <PageSection variant={PageSectionVariants.light}>
-        {beforeToolbarComponent}
-        <div className="title_filter_parent">
-          <Col className="title_filter" md={searchable ? 6 : 4}>
-            {searchable && (
-              <SearchBar
-                data={{
-                  ...searchProps,
-                  autocomplete: { ...searchProps.autocomplete, searchQuery },
-                }}
-                onSearch={onSearch}
-              />
-            )}
-          </Col>
-          <Col md={searchable ? 6 : 8}>
-            <div className="btn-toolbar pull-right">
-              {isLoading && (
-                <div id="toolbar-spinner">
-                  <Spinner loading size="sm" />
-                </div>
+  return (
+    <>
+      <Head>
+        <title>{header}</title>
+      </Head>
+
+      {(customBreadcrumbs || breadcrumbOptions) && (
+        <PageSection variant={PageSectionVariants.light} type="breadcrumb">
+          <div id="breadcrumb">
+            {customBreadcrumbs ||
+              (breadcrumbOptions && <BreadcrumbBar {...breadcrumbOptions} />)}
+          </div>
+        </PageSection>
+      )}
+
+      {(searchable || !toolbarButtons) && (
+        <PageSection variant={PageSectionVariants.light} type="breadcrumb">
+          <div id="breadcrumb">{title}</div>
+        </PageSection>
+      )}
+
+      {(searchable ||
+        beforeToolbarComponent ||
+        isLoading ||
+        toolbarButtons) && (
+        <PageSection variant={PageSectionVariants.light}>
+          {beforeToolbarComponent}
+          <div className="title_filter_parent">
+            <Col className="title_filter" md={6}>
+              {!searchable && title}
+              {searchable && (
+                <SearchBar
+                  data={{
+                    ...searchProps,
+                    autocomplete: { ...searchProps.autocomplete, searchQuery },
+                  }}
+                  onSearch={onSearch}
+                />
               )}
-              {toolbarButtons}
-            </div>
-          </Col>
-        </div>
+            </Col>
+            <Col md={6}>
+              <div className="btn-toolbar pull-right">
+                {isLoading && (
+                  <div id="toolbar-spinner">
+                    <Spinner loading size="sm" />
+                  </div>
+                )}
+                {toolbarButtons}
+              </div>
+            </Col>
+          </div>
+        </PageSection>
+      )}
+      <PageSection variant={PageSectionVariants.light} type={pageSectionType}>
+        {children}
       </PageSection>
-    )}
-    <PageSection variant={PageSectionVariants.light} type={pageSectionType}>
-      {children}
-    </PageSection>
-  </>
-);
+    </>
+  );
+};
 
 PageLayout.propTypes = {
   children: PropTypes.node.isRequired,