Skip to content

[Time to Visualize] Panel Title Fixes#78365

Merged
ThomThomson merged 27 commits intoelastic:masterfrom
ThomThomson:fix/title-placeholder
Sep 29, 2020
Merged

[Time to Visualize] Panel Title Fixes#78365
ThomThomson merged 27 commits intoelastic:masterfrom
ThomThomson:fix/title-placeholder

Conversation

@ThomThomson
Copy link
Copy Markdown
Contributor

@ThomThomson ThomThomson commented Sep 23, 2020

Summary

This PR contains 3 small changes to the way embeddable panel titles work.

1. Placeholder Title

In a continuation of #74960, embeddable panels render a placeholder title when all of the following conditions are met:

  • The title is falsey
  • Panel title is configured to be shown (both via dashboard options and on the panel options)
  • The dashboard is in edit mode

Open Question: Should manually setting the panel title to a blank string be a valid input? Currently it is considered valid, and results in showing the placeholder title. Another option is having a blank string title fall back on the default title, which means that the placeholder title will only appear on by value embeddables because they are the only ones with no default title.

Screen Shot 2020-09-24 at 3 12 48 PM

2. Show Panel Title State Storage

Fixes #77862

Previously, the setting of the show panel switch on the customize panel modal was encoded in the title itself. The value of an empty string was interpreted as meaning 'hide the panel title'.

This PR stores the setting in an existing & unused embeddable input prop: hidePanelTitles. This change means that any custom panel titles are no longer lost when flipping the 'show panel title' switch

Screen Shot 2020-09-24 at 3 16 47 PM

3. Text Input Value

Previously, when there was no title present, the default title (saved object title) would be populated into the placeholder prop of the title input. This was frustrating because making a small change to the title would result in the user having to retype the full title from scratch. Now loading with a default title, and resetting to the default title put it directly into the value prop of the input so it can be edited as is.

Screen Shot 2020-09-24 at 3 41 42 PM

Checklist

Delete any items that are not applicable to this PR.

For maintainers

@majagrubic
Copy link
Copy Markdown
Contributor

I like the reuse of hidePanelTitle(s). Works well. The only thing that's a minor downside is when first editing a title the checkbox is selected:
Screenshot 2020-09-24 at 09 22 03

...which on second thought is not wrong, cause we are kinda showing the title, although the title is "No Title" 😂

@ThomThomson
Copy link
Copy Markdown
Contributor Author

Yeah, I was messing around with that, and found that if you were choosing to add a panel title, you wouldn't want the 'show panel title' switch to be off, because that just adds an extra click. It's an easy enough behaviour to change though if people feel strongly either way!

@ThomThomson ThomThomson added Feature:Embedding Embedding content via iFrame release_note:roadmap Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// v7.10.0 v8.0.0 labels Sep 24, 2020
@ThomThomson ThomThomson marked this pull request as ready for review September 24, 2020 19:52
@ThomThomson ThomThomson requested review from a team as code owners September 24, 2020 19:52
@elasticmachine
Copy link
Copy Markdown
Contributor

Pinging @elastic/kibana-app (Team:KibanaApp)

@ryankeairns ryankeairns self-requested a review September 28, 2020 20:55
Copy link
Copy Markdown
Contributor

@ryankeairns ryankeairns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks and works as expected; addresses my outstanding questions from the other PR.

Thanks!!


.embPanel__placeholderTitleText {
@include euiTextTruncate;
font-weight: lighter;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please always use an EUI variable for font weight. It ensures that the correct font variant is available.

Suggested change
font-weight: lighter;
font-weight: $euiFontWeightRegular;

Copy link
Copy Markdown
Contributor Author

@ThomThomson ThomThomson Sep 28, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense, I've used $euiFontWeightLight for this.

Copy link
Copy Markdown
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SASS LGTM 👍

Copy link
Copy Markdown
Contributor

@Dosant Dosant left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code LGTM,
Tested dashboard, didn't notice anything weird.

I also test example plugins and was a bit confuse with book embeddable. When I click edit title there, it isn't pre-filled for some reason (other test embeddable work similar to dashboard):

Screenshot 2020-09-29 at 17 45 46

Screenshot 2020-09-29 at 17 45 52

I assume this isn't excepted

@ThomThomson
Copy link
Copy Markdown
Contributor Author

Turns out the book embeddable was just missing the defaultTitle prop on its output. I've added that and everything works as expected now. Thanks for noticing this!

@kibanamachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

Metrics [docs]

page load bundle size

id value diff baseline
embeddable 290.6KB +2.4KB 288.2KB

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@ThomThomson ThomThomson merged commit bf93974 into elastic:master Sep 29, 2020
ThomThomson added a commit to ThomThomson/kibana that referenced this pull request Sep 29, 2020
* [Dashboard][Embeddable] Add placeholder title to embeddable panel, stored 'show panel title' prop in embeddable input.
Co-authored-by: Maja Grubic <maja.grubic@elastic.co>
ThomThomson added a commit that referenced this pull request Sep 29, 2020
* [Dashboard][Embeddable] Add placeholder title to embeddable panel, stored 'show panel title' prop in embeddable input.
Co-authored-by: Maja Grubic <maja.grubic@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feature:Embedding Embedding content via iFrame Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// v7.10.0 v8.0.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Dashboard] Show Panel Title Switch Erases Title

7 participants