Added documentation for Empty States

[giovanni-vaccarino]

Description

This PR fixes #406. It demonstrates how to use <l:notice> to display messages when no content or data is available.

Files Added:

• EmptyStates.java -> Registers the new component in the design library by extending UISample. Here I defined the name displayed, the sidebar icon and the description
• resources/io/.../EmptyStates/index.jelly -> Renders the UI
• resources/io/.../EmptyStates/index.properties -> Contains the text titles and descriptions
• webapp/EmptyStates/empty-states.jelly -> Contains the code of the first example usage
• webapp/EmptyStates/empty-states-child-content.jelly -> Contains the code of the second example usage

Testing done

Here you can find the screenshots of the rendered UI:

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
• Ensure you have provided tests - that demonstrates feature works or fixes the issue

[janfaracik]

text parameter doesn't exist - notice.jelly

<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:d="jelly:define">
  <st:documentation>
    <st:attribute name="title" use="required">
      Sets the title for the notice. HTML isn't supported.
    </st:attribute>
    <st:attribute name="icon" use="required">
      Sets the icon for the notice. Supports Jenkins Symbols and regular images.
    </st:attribute>
  </st:documentation>

  <div class="jenkins-notice">
    <l:icon src="${attrs.icon}" />
    <div>${attrs.title}</div>
    <div class="jenkins-notice__description">
      <d:invokeBody />
    </div>
  </div>
</j:jelly>

[giovanni-vaccarino]

Thanks for the clarification!

I included the text parameter because I saw it in this PR (in systemInfo.jelly).

[janfaracik]

This looks great! Thanks for contributing.

[janfaracik]

Margin and size of the notice is a little off, we add custom styling to _component-sample.scss to work around that usually - if you add this to the bottom of that file it'll style the notice to be full width, and have no margin.

  .jenkins-notice {
    margin-bottom: 0;
    width: 100%;
    max-width: 650px;
  }

[timja]

if you're including content like this I think it would make for sense to include some HTML like maybe a call to action.

e.g. a button.

There's a (complex) example here:

https://github.com/jenkinsci/jenkins/blob/master/core/src/main/resources/jenkins/security/ApiTokenProperty/config.jelly#L104-L106

I would suggest something like (adjust the formatting to something that looks good in the example)::

Suggested change

	${%childNotionContent}
	<button
	type="button"
	class="jenkins-button jenkins-button--secondary">${%New item}</button>

[giovanni-vaccarino]

Thanks for the review.

As you suggested, I included a button. For the styling I used the suggested class "jenkins-button jenkins-button--secondary". I've tried also others like "jenkins-button jenkins-button--primary" or "jenkins-button jenkins-button--terniary", but I believe the suggested one fits best.

[timja]

Thanks! I ran this locally and just made some minor tweaks.

Much appreciated for this!

[janfaracik]

Thanks again! :)