Inline create button with the title

frontend/__tests__/components/factory/list-page.spec.tsx

@@ -39,8 +39,8 @@ describe(FireMan_.displayName, () => {
     wrapper = shallow(<FireMan_.WrappedComponent resources={resources} />);
   });
 
-  it('renders `PageHeading` if given `title`', () => {
-    expect(wrapper.find(PageHeading).exists()).toBe(false);
+  it('renders `title` if given `title`', () => {
+    expect(wrapper.find(PageHeading).props().title).toBe(undefined);
 
     const title = 'My pods';
     wrapper.setProps({ title });
@@ -53,7 +53,12 @@ describe(FireMan_.displayName, () => {
 
     const createProps = { foo: 'bar' };
     const button = wrapper
-      .setProps({ canCreate: true, createProps, createButtonText: 'Create Me!' })
+      .setProps({
+        canCreate: true,
+        createProps,
+        createButtonText: 'Create Me!',
+        title: 'Nights Watch',
+      })
       .find('#yaml-create');
 
     expect(

frontend/public/components/_nav-title.scss

@@ -24,6 +24,15 @@
     padding-left: $grid-gutter-width;
     padding-right: $grid-gutter-width;
   }
+  &--row {
+    @media (max-width: $screen-xs-max) {
+      margin-bottom: 30px;
+    }
+    @media (min-width: $screen-sm) {
+      display: flex;
+      flex-direction: row;
+    }
+  }
   &--detail {
     border-bottom: 1px solid $color-grey-background-border;
     flex-shrink: 0; // do not allow to shrink

frontend/public/components/factory/list-page.jsx

@@ -270,32 +270,31 @@ export const FireMan_ = connect(null, { filterList })(
 
       return (
         <>
-          {title && <PageHeading title={title} badge={badge} />}
-          {/* Show help text above the filter bar if there's a create button. */}
-          {helpText && createLink && (
-            <p className="co-m-pane__help-text co-help-text">{helpText}</p>
-          )}
-          <div
-            className={classNames(
-              { 'co-m-pane__filter-bar': createLink || helpText },
-              {
-                'co-m-pane__filter-bar--with-help-text': helpText && !createLink,
-              },
-            )}
-          >
-            {helpText && !createLink && (
-              <div className="co-m-pane__filter-bar-group co-m-pane__filter-bar-group--help-text">
-                {helpText}
-              </div>
-            )}
-            {createLink && <div className="co-m-pane__filter-bar-group">{createLink}</div>}
-            {!title && badge && (
-              <div className="co-m-pane__filter-bar-group co-m-pane__filter-bar-group--badge">
-                {badge}
-              </div>
-            )}
-          </div>
-          <div className="co-m-pane__body">
+          <PageHeading title={title} badge={badge} className="co-m-nav-title--row">
+            <div
+              className={classNames(
+                { 'co-m-pane__filter-bar--inline': (createLink || helpText) && title },
+                { 'co-m-pane__filter-bar--no-title': !title },
+                { 'co-m-pane__filter-bar': !createLink || helpText },
+                {
+                  'co-m-pane__filter-bar--with-help-text': helpText && !createLink,
+                },
+              )}
+            >
+              {createLink && (
+                <div className="co-m-pane__filter-bar-group co-m-pane__createLink">
+                  {createLink}
+                </div>
+              )}
+              {!title && badge && (
+                <div className="co-m-pane__filter-bar-group co-m-pane__filter-bar-group--badge">
+                  {badge}
+                </div>
+              )}
+            </div>
+          </PageHeading>
+          {helpText && <p className="co-m-pane__help-text co-help-text">{helpText}</p>}
+          <div className="co-m-pane__body co-m-pane__body--no-top-margin">
             {inject(this.props.children, {
               resources,
               expand: this.state.expand,

frontend/public/components/utils/headings.tsx

@@ -87,6 +87,7 @@ export const PageHeading = connectToModel((props: PageHeadingProps) => {
     badge,
     getResourceStatus = (resource: K8sResourceKind): string =>
       _.get(resource, ['status', 'phase'], null),
+    className,
   } = props;
   const extraResources = _.reduce(
     props.resourceKeys,
@@ -109,6 +110,7 @@ export const PageHeading = connectToModel((props: PageHeadingProps) => {
         { 'co-m-nav-title--detail': detail },
         { 'co-m-nav-title--logo': props.icon },
         { 'co-m-nav-title--breadcrumbs': breadcrumbsFor && !_.isEmpty(data) },
+        className,
       )}
       style={style}
     >
@@ -117,7 +119,9 @@ export const PageHeading = connectToModel((props: PageHeadingProps) => {
           <SplitItem isFilled>
             <BreadCrumbs breadcrumbs={breadcrumbsFor(data)} />
           </SplitItem>
-          {badge && <SplitItem>{badge}</SplitItem>}
+          {badge && (
+            <SplitItem>{<span className="co-m-pane__heading-badge">{badge}</span>}</SplitItem>
+          )}
         </Split>
       )}
       {showHeading && (
@@ -141,7 +145,7 @@ export const PageHeading = connectToModel((props: PageHeadingProps) => {
               )}
             </div>
           )}
-          {!breadcrumbsFor && badge}
+          {!breadcrumbsFor && badge && <span className="co-m-pane__heading-badge">{badge}</span>}
           {showActions && (
             <div className="co-actions" data-test-id="details-actions">
               {hasButtonActions && (
@@ -264,6 +268,7 @@ export type PageHeadingProps = {
   badge?: React.ReactNode;
   icon?: React.ComponentType<{ obj?: K8sResourceKind }>;
   getResourceStatus?: (resource: K8sResourceKind) => string;
+  className?: string;
 };
 
 export type ResourceOverviewHeadingProps = {

frontend/public/style/_common.scss

@@ -40,6 +40,12 @@ $co-external-link-padding-right: 15px;
     margin-right: 10px;
     min-width: 0; // enables truncation of selected item, if needed
   }
+  &--inline {
+    margin-left: auto;
+  }
+  &--no-title {
+    margin-bottom: 30px;
+  }
 }
 
 .co-m-pane__filter-bar,
@@ -105,6 +111,11 @@ $co-external-link-padding-right: 15px;
   }
 }
 
+.co-m-pane__heading-badge {
+  line-height: 0;
+  margin-left: var(--pf-global--spacer--sm);
+}
+
 .co-m-pane__heading-link {
   font-size: $font-size-base;
 }
@@ -374,9 +385,9 @@ $co-external-link-padding-right: 15px;
 
 .help-block {
   margin-bottom: 0;
- }
+}
 
- // Note: include .co-select-to-copy to enable single click selection of full text
+// Note: include .co-select-to-copy to enable single click selection of full text
 .co-truncate {
   @include co-truncate;
 }