add per space configuration to custom header banner

docs/management/advanced-options.asciidoc

@@ -209,6 +209,27 @@ from *{stack-monitor-app}*.
 Turns off all unnecessary animations in the {kib} UI. Refresh the page to apply
 the changes.
 
+[float]
+[[kibana-banners-settings]]
+==== Banners
+
+[horizontal]
+[[banners-placement]]`banners:placement`::
+Set to `Top` to display a banner above the Elastic header. Defaults to the value of 
+the `xpack.banners.placement` configuration property.
+
+[[banners-textcontent]]`banners:textContent`::
+The text to display inside the banner for this space, either plain text or Markdown.
+Defaults to the value of the `xpack.banners.textContent` configuration property.
+
+[[banners-textcolor]]`banners:textColor`::
+The color for the banner text for this space. Defaults to the value of
+the `xpack.banners.textColor` configuration property.
+
+[[banners-backgroundcolor]]`banners:backgroundColor`::
+The color of the banner background for this space. Defaults to the value of
+the `xpack.banners.backgroundColor` configuration property.
+
 [float]
 [[kibana-dashboard-settings]]
 ==== Dashboard

docs/settings/banners-settings.asciidoc

@@ -9,14 +9,19 @@ Banners are disabled by default. You need to manually configure them in order to
 
 You can configure the `xpack.banners` settings in your `kibana.yml` file.
 
+[NOTE]
+====
+Banners are a https://www.elastic.co/subscriptions[subscription feature].
+====
+
 [[general-banners-settings-kb]]
 ==== General banner settings
 
 [cols="2*<"]
 |===
 
 | `xpack.banners.placement`
-| Set to `header` to enable the header banner. Defaults to `disabled`.
+| Set to `top` to display a banner above the Elastic header. Defaults to `disabled`.
 
 | `xpack.banners.textContent`
 | The text to display inside the banner, either plain text or Markdown.
@@ -27,9 +32,7 @@ You can configure the `xpack.banners` settings in your `kibana.yml` file.
 | `xpack.banners.backgroundColor`
 | The color of the banner background. Defaults to `#FFF9E8`.
 
-|===
+| `xpack.banners.disableSpaceBanners`
+| If true, per-space banner overrides will be disabled. Defaults to `false`.
 
-[NOTE]
-====
-The `banners` plugin is a https://www.elastic.co/subscriptions[subscription feature]
-====
+|===

src/core/server/mocks.ts

@@ -50,6 +50,8 @@ export { capabilitiesServiceMock } from './capabilities/capabilities_service.moc
 export { coreUsageDataServiceMock } from './core_usage_data/core_usage_data_service.mock';
 export { i18nServiceMock } from './i18n/i18n_service.mock';
 
+type MockedPluginInitializerConfig<T> = jest.Mocked<PluginInitializerContext<T>['config']>;
+
 export function pluginInitializerContextConfigMock<T>(config: T) {
   const globalConfig: SharedGlobalConfig = {
     kibana: {
@@ -68,7 +70,7 @@ export function pluginInitializerContextConfigMock<T>(config: T) {
     },
   };
 
-  const mock: jest.Mocked<PluginInitializerContext<T>['config']> = {
+  const mock: MockedPluginInitializerConfig<T> = {
     legacy: {
       globalConfig$: of(globalConfig),
       get: () => globalConfig,
@@ -80,8 +82,12 @@ export function pluginInitializerContextConfigMock<T>(config: T) {
   return mock;
 }
 
+type PluginInitializerContextMock<T> = Omit<PluginInitializerContext<T>, 'config'> & {
+  config: MockedPluginInitializerConfig<T>;
+};
+
 function pluginInitializerContextMock<T>(config: T = {} as T) {
-  const mock: PluginInitializerContext<T> = {
+  const mock: PluginInitializerContextMock<T> = {
     opaqueId: Symbol(),
     logger: loggingSystemMock.create(),
     env: {

src/plugins/advanced_settings/public/management_app/components/field/field.tsx

@@ -326,6 +326,7 @@ export class Field extends PureComponent<FieldProps> {
           <div data-test-subj={`advancedSetting-editField-${name}`}>
             <EuiCodeEditor
               {...a11yProps}
+              name={`advancedSetting-editField-${name}-editor`}
               mode={type}
               theme="textmate"
               value={currentValue}

src/plugins/kibana_usage_collection/server/collectors/management/schema.ts

@@ -43,6 +43,10 @@ export const stackManagementSchema: MakeSchemaFrom<UsageStats> = {
     type: 'keyword',
     _meta: { description: 'Default value of the setting was changed.' },
   },
+  'banners:textContent': {
+    type: 'keyword',
+    _meta: { description: 'Default value of the setting was changed.' },
+  },
   // non-sensitive
   'visualize:enableLabs': {
     type: 'boolean',
@@ -408,6 +412,18 @@ export const stackManagementSchema: MakeSchemaFrom<UsageStats> = {
     type: 'boolean',
     _meta: { description: 'Non-default value of setting.' },
   },
+  'banners:placement': {
+    type: 'keyword',
+    _meta: { description: 'Non-default value of setting.' },
+  },
+  'banners:textColor': {
+    type: 'text',
+    _meta: { description: 'Non-default value of setting.' },
+  },
+  'banners:backgroundColor': {
+    type: 'text',
+    _meta: { description: 'Non-default value of setting.' },
+  },
   'observability:enableAlertingExperience': {
     type: 'boolean',
     _meta: { description: 'Non-default value of setting.' },

src/plugins/kibana_usage_collection/server/collectors/management/types.ts

@@ -18,6 +18,7 @@ export interface UsageStats {
   'timelion:graphite.url': string;
   'xpackDashboardMode:roles': string;
   'securitySolution:ipReputationLinks': string;
+  'banners:textContent': string;
   /**
    * non-sensitive settings
    */
@@ -114,4 +115,7 @@ export interface UsageStats {
   'csv:quoteValues': boolean;
   'dateFormat:dow': string;
   dateFormat: string;
+  'banners:placement': string;
+  'banners:textColor': string;
+  'banners:backgroundColor': string;
 }

src/plugins/telemetry/schema/oss_plugins.json

@@ -7478,6 +7478,12 @@
             "description": "Default value of the setting was changed."
           }
         },
+        "banners:textContent": {
+          "type": "keyword",
+          "_meta": {
+            "description": "Default value of the setting was changed."
+          }
+        },
         "visualize:enableLabs": {
           "type": "boolean",
           "_meta": {
@@ -8027,6 +8033,24 @@
             "description": "Non-default value of setting."
           }
         },
+        "banners:placement": {
+          "type": "keyword",
+          "_meta": {
+            "description": "Non-default value of setting."
+          }
+        },
+        "banners:textColor": {
+          "type": "text",
+          "_meta": {
+            "description": "Non-default value of setting."
+          }
+        },
+        "banners:backgroundColor": {
+          "type": "text",
+          "_meta": {
+            "description": "Non-default value of setting."
+          }
+        },
         "observability:enableAlertingExperience": {
           "type": "boolean",
           "_meta": {

test/functional/page_objects/settings_page.ts

@@ -28,6 +28,7 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider
     async clickLinkText(text: string) {
       await find.clickByDisplayedLinkText(text);
     }
+
     async clickKibanaSettings() {
       await testSubjects.click('settings');
       await PageObjects.header.waitUntilLoadingHasFinished();
@@ -89,6 +90,22 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider
       await PageObjects.header.waitUntilLoadingHasFinished();
     }
 
+    async setAdvancedSettingsTextArea(propertyName: string, propertyValue: string) {
+      const wrapper = await testSubjects.find(`advancedSetting-editField-${propertyName}`);
+      const textarea = await wrapper.findByTagName('textarea');
+      await textarea.focus();
+      // only way to properly replace the value of the ace editor is via the JS api
+      await browser.execute(
+        (editor: string, value: string) => {
+          return (window as any).ace.edit(editor).setValue(value);
+        },
+        `advancedSetting-editField-${propertyName}-editor`,
+        propertyValue
+      );
+      await testSubjects.click(`advancedSetting-saveButton`);
+      await PageObjects.header.waitUntilLoadingHasFinished();
+    }
+
     async toggleAdvancedSettingCheckbox(propertyName: string) {
       await testSubjects.click(`advancedSetting-editField-${propertyName}`);
       await PageObjects.header.waitUntilLoadingHasFinished();
@@ -162,13 +179,15 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider
 
     async sortBy(columnName: string) {
       const chartTypes = await find.allByCssSelector('table.euiTable thead tr th button');
+
       async function getChartType(chart: Record<string, any>) {
         const chartString = await chart.getVisibleText();
         if (chartString === columnName) {
           await chart.click();
           await PageObjects.header.waitUntilLoadingHasFinished();
         }
       }
+
       const getChartTypesPromises = chartTypes.map(getChartType);
       return Promise.all(getChartTypesPromises);
     }

x-pack/plugins/banners/README.md

@@ -12,7 +12,7 @@ The options are
 
 The placement of the banner. The allowed values are: 
   - `disabled` -  The banner will be disabled
-  - `header` - The banner will be displayed in the header
+  - `top` - The banner will be displayed in the header
 
 - `textContent`
 
@@ -31,7 +31,7 @@ The color for the banner's background. Must be a valid hex color
 `kibana.yml`
 ```yaml
 xpack.banners:
-  placement: 'header'
+  placement: 'top'
   textContent: 'Production environment - Proceed with **special levels** of caution'
   textColor: '#FF0000'
   backgroundColor: '#CC2211'

x-pack/plugins/banners/common/types.ts

@@ -10,7 +10,7 @@ export interface BannerInfoResponse {
   banner: BannerConfiguration;
 }
 
-export type BannerPlacement = 'disabled' | 'header';
+export type BannerPlacement = 'disabled' | 'top';
 
 export interface BannerConfiguration {
   placement: BannerPlacement;

x-pack/plugins/banners/public/components/banner.tsx

@@ -26,7 +26,7 @@ export const Banner: FC<BannerProps> = ({ bannerConfig }) => {
       }}
     >
       <div data-test-subj="bannerInnerWrapper">
-        <Markdown markdown={textContent} />
+        <Markdown markdown={textContent} openLinksInNewTab={true} />
       </div>
     </div>
   );