Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add per space configuration to custom header banner #94449

Merged
merged 30 commits into from
Mar 31, 2021

Conversation

pgayvallet
Copy link
Contributor

@pgayvallet pgayvallet commented Mar 11, 2021

Summary

Phase 2 of #17298

Allow per-space configuration of the header banner

Global versus banner configuration

The global configuration remains unchanged (via the kibana.yml configuration file)

The per-space configuration is done using the advanced settings management section, by editing the banners: settings.

Screenshot 2021-03-16 at 14 08 21

The config retrieval logic is the following:

  • For unauthenticated pages:

Use the global configuration if present, else disable the banner.

  • For authenticated page:

Use the space configuration (uiSettings) if present, else use the global configuration (kibana.yml), else disable the banner.

Checklist

Release note

It is now possible to add per-space configuration of the header banner from the banners plugin.

@pgayvallet pgayvallet added release_note:skip Skip the PR/issue when compiling release notes Team:Core Core services & architecture: plugins, logging, config, saved objects, http, ES client, i18n, etc v7.13.0 labels Mar 16, 2021
@pgayvallet pgayvallet changed the title Customizable header banner - phase 2 add per space configuration to custom header banner Mar 17, 2021
Copy link
Contributor Author

@pgayvallet pgayvallet left a comment

Choose a reason for hiding this comment

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

Self-review

@@ -326,6 +326,7 @@ export class Field extends PureComponent<FieldProps> {
<div data-test-subj={`advancedSetting-editField-${name}`}>
<EuiCodeEditor
{...a11yProps}
name={`advancedSetting-editField-${name}-editor`}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was required for the addition of SettingsPage.setAdvancedSettingsTextArea (see test/functional/page_objects/settings_page.ts)

Comment on lines -27 to +22
if (this.config.placement !== 'disabled') {
getBannerInfo(http).then(
({ allowed, banner }) => {
if (allowed) {
chrome.setHeaderBanner({
content: toMountPoint(<Banner bannerConfig={banner} />),
});
}
},
() => {
chrome.setHeaderBanner(undefined);
getBannerInfo(http).then(
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Now that we got uiSettings-based per-space configuration, I had to remove the optimisation that was checking the configuration to see if the global banner was disabled, as it could be enabled for the current space.

Comment on lines 19 to 26
'banners:placement': {
name: i18n.translate('xpack.banners.settings.placement.title', {
defaultMessage: 'Banner placement',
}),
category: ['banner'],
order: 1,
type: 'select',
value: config.placement,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The trick here is that I'm using the kibana.yml configuration value as the default value when registering the uiSettings (thanks to the recently added synchronous context.config.get API)

The main upside is a better user experience, as the value displayed as the default one in the advanced settings app is the 'real' default value that would be effectively used. It's also easier to retrieve the computed config as we only need to query the uiSettings API.

@pgayvallet pgayvallet added release_note:enhancement and removed release_note:skip Skip the PR/issue when compiling release notes labels Mar 17, 2021
@pgayvallet pgayvallet marked this pull request as ready for review March 17, 2021 11:26
@pgayvallet pgayvallet requested a review from a team as a code owner March 17, 2021 11:26
@pgayvallet pgayvallet requested a review from a team March 17, 2021 11:26
@pgayvallet pgayvallet requested a review from a team as a code owner March 17, 2021 11:26
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-core (Team:Core)

Copy link
Member

@afharo afharo left a comment

Choose a reason for hiding this comment

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

Code review only: LGTM!

Comment on lines 8 to 11
import { IUiSettingsClient } from 'kibana/server';
import { ILicense } from '../../../licensing/server';
import { BannerInfoResponse, BannerConfiguration } from '../../common';
import { BannerInfoResponse, BannerConfiguration, BannerPlacement } from '../../common';
import { BannersRouter } from '../types';
Copy link
Member

Choose a reason for hiding this comment

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

Super-NIT: import type

@@ -9,35 +9,28 @@ import React from 'react';
import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from 'src/core/public';
Copy link
Member

Choose a reason for hiding this comment

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

Super-NIT: import type

Copy link
Contributor

@flash1293 flash1293 left a comment

Choose a reason for hiding this comment

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

kibana app changes LGTM, code review only

@alexfrancoeur
Copy link

alexfrancoeur commented Mar 17, 2021

Woo! Great work @pgayvallet . Some feedback and comments below

image

We should probably engage with @ryankeairns to provide some default colors here that aren't brown. Maybe we can just borrow from EUI templates?

I saved a banner and received no notification that it couldn't work due to the license check. I know we discussed adding static text here and it's infinitely more complicated (#94668) to hide / disable the setting or disabling the save button, but I'm going to ask this question any way. Could we provide a toast notification if you save and don't have the appropriate license? It makes for a confusing experience, so anything we can provide here would be great.

Mar-17-2021 17-12-20

Upon starting a trial after the fact, the banner is there as expected.

image

General banner related question, should we provide an option during configuration (and kibana.yml config) to indicate that you may want any URLs to open in a new tab? Similar to our markdown visualization. I imagine most folks will want that if they add a URL.

image

I didn't remove the per space banner and added a global config. A refresh persists the old space banner, but if I clear cache and log back in, I'm presented with the new global banner. Two quick things.

  • Ideally, we'd be able to disable or hide the space config here, but I imagine this is a limitation of uiSettings as well. Do we have any control here?
  • If the banner is cached, what's the turnaround time to see that updated?

Per space switching is looking great

Mar-17-2021 17-26-47

Overall, this looks good to me. I think we'll need to pull in @gchaps or someone on her team to help with text. @gchaps for context, we cannot perform a license check for any advanced settings today. Custom banners is a feature that is Gold+ only. So in the short term, we'll need to provide some visibile warning text in the Banner card on the advanced settings page. Is there any chance you might be able to help with the content?

@pgayvallet
Copy link
Contributor Author

@alexfrancoeur:

We should probably engage with @ryankeairns to provide some default colors here that aren't brown. Maybe we can just borrow from EUI templates?

It was actually @ryankeairns who provided these default values 😄 . But changing them would be trivial if we want to.

I know we discussed adding static text here and it's infinitely more complicated (#94668) to hide / disable the setting or disabling the save button, but I'm going to ask this question any way. Could we provide a toast notification if you save and don't have the appropriate license? It makes for a confusing experience, so anything we can provide here would be great.

You're going to hate the simplicity of the advancedSettings implementation as much as I started to do, but unfortunately this is not going to be possible without changes to the API. There is currently no 'hook' on the client-side to add such logic, and the settings definition are directly and exclusively retrieved from the server...

I know we discussed adding static text

We talked about it, but in the end I didn't add the 'this setting requires a gold of higher license to be used' description. Do you want me to, given that it's the only think we can really do without any ui/advanced settings improvement?

General banner related question, should we provide an option during configuration (and kibana.yml config) to indicate that you may want any URLs to open in a new tab? Similar to our markdown visualization

The markdown component we're using has a openLinksInNewTab property, so it's technically possible.

Now, do we want to add a configuration option for this, or should we just open all links in new tabs. I feel like the second option would be good enough? I don't see any use case where the user may want to open the link in the current Kibana tab, wdyt?

I didn't remove the per space banner and added a global config. A refresh persists the old space banner, but if I clear cache and log back in, I'm presented with the new global banner. Two quick things.

Hum, can I get more details here? Theoretically, if you initially have a space config and then add a global config after, the space config should still be used when accessing its associated space. Do you mean this wasn't the case?

@gchaps
Copy link
Contributor

gchaps commented Mar 26, 2021

Using "top" and "disabled" sounds much better to me. We could then put "top" in the description:

Banner placement
Display a top banner for this space, above the Elastic header.

@alexfrancoeur
Copy link

I'd wish, but no.

🤦 , worth a shot!

Maybe we should just name that placement option top?

I'd be fine with that, would we assume backwards compatibility in for 7.x with header?

@pgayvallet
Copy link
Contributor Author

pgayvallet commented Mar 29, 2021

I'd be fine with that, would we assume backwards compatibility in for 7.x with header?

I'll add a config deprecation for that to log a warning and replace the value used

@pgayvallet
Copy link
Contributor Author

@alexfrancoeur @gchaps Ok, I think we're getting there.

The banner section of the advanced settings:

Screenshot 2021-03-29 at 09 38 18

And the deprecation message if we used was currently using the header value:

Screenshot 2021-03-29 at 09 27 09

I also created #95627 which would unblock adding a description to our categories/sections.

PTAL

@alexfrancoeur
Copy link

Looking good @pgayvallet !

@gchaps
Copy link
Contributor

gchaps commented Mar 29, 2021

UI copy LGTM too!

docs/settings/banners-settings.asciidoc Outdated Show resolved Hide resolved
docs/settings/banners-settings.asciidoc Outdated Show resolved Hide resolved
@@ -16,7 +16,7 @@ You can configure the `xpack.banners` settings in your `kibana.yml` file.
|===

| `xpack.banners.placement`
| Set to `header` to enable the header banner. Defaults to `disabled`.
Copy link
Contributor

Choose a reason for hiding this comment

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

You'll also need to add documentation about the Banner settings to the Advanced Settings page.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks. WDYT about 14c33b6?

@pgayvallet
Copy link
Contributor Author

retest


[horizontal]
[[banners-placement]]`banners:placement`::
Set to `Top` to display a banner above the Elastic header. Defaults to the value of
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
Set to `Top` to display a banner above the Elastic header. Defaults to the value of
Set to `Top` to display a banner above the Elastic header for this space. Defaults to the value of

[float]
[[kibana-banners-settings]]
==== Banners

Copy link
Contributor

Choose a reason for hiding this comment

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

Suggest adding: Banners are a subscription feature.

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
advancedSettings 913.5KB 913.5KB +48.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
banners 11.9KB 11.7KB -181.0B

History

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

@pgayvallet pgayvallet merged commit ddac0e9 into elastic:master Mar 31, 2021
pgayvallet added a commit to pgayvallet/kibana that referenced this pull request Mar 31, 2021
* restore the banners ui settings

* fix banner init logic

* fix unit tests

* update telemetry schema

* add basic server-side plugin tests

* add FTR tests for banners plugin

* use keyword for sensitive setting

* update snapshots

* setting name consistency with configuration properties

* fix setting names in telemetry files

* open banner links in new tab

* add config.disableSpaceBanners property

* fix types

* add descriptions to banner settings

* change label and value header->top

* finishing header->top replacement

* doc nits

* add banners section to advanced options doc

* feedback on advanced options doc

* adapt deprecation to new format
# Conflicts:
#	src/plugins/kibana_usage_collection/server/collectors/management/schema.ts
#	src/plugins/kibana_usage_collection/server/collectors/management/types.ts
#	src/plugins/telemetry/schema/oss_plugins.json
@alexfrancoeur
Copy link

👏👏👏👏

pgayvallet added a commit that referenced this pull request Mar 31, 2021
* restore the banners ui settings

* fix banner init logic

* fix unit tests

* update telemetry schema

* add basic server-side plugin tests

* add FTR tests for banners plugin

* use keyword for sensitive setting

* update snapshots

* setting name consistency with configuration properties

* fix setting names in telemetry files

* open banner links in new tab

* add config.disableSpaceBanners property

* fix types

* add descriptions to banner settings

* change label and value header->top

* finishing header->top replacement

* doc nits

* add banners section to advanced options doc

* feedback on advanced options doc

* adapt deprecation to new format
# Conflicts:
#	src/plugins/kibana_usage_collection/server/collectors/management/schema.ts
#	src/plugins/kibana_usage_collection/server/collectors/management/types.ts
#	src/plugins/telemetry/schema/oss_plugins.json

Co-authored-by: Kibana Machine <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
release_note:enhancement Team:Core Core services & architecture: plugins, logging, config, saved objects, http, ES client, i18n, etc v7.13.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants