Use app bar for page title

[lewisbirks]

Update the page template to use the app-bar component rather than a h1 for the title.

This has meant removing the container-fluid class from the div wrapping the body so that the padding does not cause misallignment.

Testing done

Tested on a page generated from the warnings-ng plugin

Submitter checklist

• Make sure you are opening from a topic/feature/bugfix branch (right side) and not your main branch!
• Ensure that the pull request title represents the desired changelog entry
• Please describe what you did
• Link to relevant issues in GitHub or Jira
• Link to relevant pull requests, esp. upstream and downstream changes
• Ensure you have provided tests that demonstrate the feature works or the issue is fixed

[uhafner]

Which minimum Jenkins version does contain the app bar?

What is the reason for this PR? Does something look not ok in recent Jenkisn versions?

[lewisbirks]

Which minimum Jenkins version does contain the app bar?

From what I can tell the app-bar was first introduced in 2.325.

As for why, I'm playing around with a PR for the warnings-ng plugin to update the cards there away from the bootstrap ones to the ones defined in the jenkins design library. Whilst doing so I noticed that the headings weren't rendered using the app bar component. So to keep things consistent across the whole of Jenkins (in the event the app bar changes or has new functionality added to it) I thought it would be worth updating the bootstrap library to make use of it.

The app bar has unique spacing/sizing that regular headings don’t have, see https://weekly.ci.jenkins.io/design-library/app-bars/

[uhafner]

Which minimum Jenkins version does contain the app bar?

From what I can tell the app-bar was first introduced in 2.325.

Ok, then there is no need to change the baseline here.

As for why, I'm playing around with a PR for the warnings-ng plugin to update the cards there away from the bootstrap ones to the ones defined in the jenkins design library. Whilst doing so I noticed that the headings weren't rendered using the app bar component. So to keep things consistent across the whole of Jenkins (in the event the app bar changes or has new functionality added to it) I thought it would be worth updating the bootstrap library to make use of it.

The app bar has unique spacing/sizing that regular headings don’t have, see https://weekly.ci.jenkins.io/design-library/app-bars/

I already thought to integrate the app bar in my plugins. Wouldn't it make more sense to let the bs page container unchanged and add the app bar directly in the views of the plugin? Otherwise you cannot add buttons into the app bar. So the app bar typically is used as:

<l:main-panel>
  <l:app-bar title="Page title" subtitle="3">
    <button class="jenkins-button jenkins-button--primary">
      <l:icon src="symbol-add" />
      Primary
    </button>
    <button class="jenkins-button">Secondary</button>
    <button class="jenkins-button">Secondary</button>
    <t:help href="https://www.jenkins.io" />
  </l:app-bar>
  ...
</l:main-panel>

When we hard-code it here this is not really possible.

[lewisbirks]

Ahh so are you instead suggesting that we close this one and I make the change directly in warnings-ng? If so, sure I can make a PR there instead to do that

[uhafner]

I'm really sorry, but when I now look at the code in the warnings plugin, it seems to produce too much code duplication.

So maybe it makes more sense to keep this PR and not the PR of the warnings plugin?

Then one can use it with

<bs:page it="${it}" title"Hello Title">

</bs:page>

to get the app bar without additional content.

And

<bs:page it="${it}" notitle="true">
    <l:app-bar title="Page title" subtitle="3">
        <button class="jenkins-button jenkins-button--primary">
          <l:icon src="symbol-add" />
          Primary
        </button>
        <button class="jenkins-button">Secondary</button>
        <button class="jenkins-button">Secondary</button>
        <t:help href="https://www.jenkins.io" />
      </l:app-bar>
      
      Content
</bs:page>

to get the page with app bar and buttons by creating the app bar by code?

[lewisbirks]

it seems to produce too much code duplication

Yeah that was my main concern as well

[uhafner]

Then I will merge this PR if this is ok for you? I wasn't aware about the consequences.

[lewisbirks]

Let me push an update to the documentation and then I'll be happy for it to be merged 🙂

[uhafner]

Thanks!