add per space configuration to custom header banner

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',
@@ -412,4 +416,16 @@ 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.' },
+  },
 };

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
    */
@@ -113,4 +114,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": {
@@ -8032,6 +8038,24 @@
           "_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."
+          }
         }
       }
     },

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/public/plugin.test.tsx

@@ -7,11 +7,19 @@
 
 import { getBannerInfoMock } from './plugin.test.mocks';
 import { coreMock } from '../../../../src/core/public/mocks';
+import { BannerConfiguration } from '../common/types';
 import { BannersPlugin } from './plugin';
-import { BannerClientConfig } from './types';
 
 const nextTick = async () => await new Promise<void>((resolve) => resolve());
 
+const createBannerConfig = (parts: Partial<BannerConfiguration> = {}): BannerConfiguration => ({
+  placement: 'disabled',
+  textContent: 'foo',
+  textColor: '#FFFFFF',
+  backgroundColor: '#000000',
+  ...parts,
+});
+
 describe('BannersPlugin', () => {
   let plugin: BannersPlugin;
   let pluginInitContext: ReturnType<typeof coreMock.createPluginInitializerContext>;
@@ -25,11 +33,12 @@ describe('BannersPlugin', () => {
 
     getBannerInfoMock.mockResolvedValue({
       allowed: false,
+      banner: createBannerConfig(),
     });
   });
 
-  const startPlugin = async (config: BannerClientConfig) => {
-    pluginInitContext = coreMock.createPluginInitializerContext(config);
+  const startPlugin = async () => {
+    pluginInitContext = coreMock.createPluginInitializerContext();
     plugin = new BannersPlugin(pluginInitContext);
     plugin.setup(coreSetup);
     plugin.start(coreStart);
@@ -41,46 +50,62 @@ describe('BannersPlugin', () => {
     getBannerInfoMock.mockReset();
   });
 
-  it('calls `getBannerInfo` if `config.placement !== disabled`', async () => {
-    await startPlugin({
-      placement: 'header',
+  describe('when banner is allowed', () => {
+    it('registers the header banner if `banner.placement` is `header`', async () => {
+      getBannerInfoMock.mockResolvedValue({
+        allowed: true,
+        banner: createBannerConfig({
+          placement: 'header',
+        }),
+      });
+
+      await startPlugin();
+
+      expect(coreStart.chrome.setHeaderBanner).toHaveBeenCalledTimes(1);
+      expect(coreStart.chrome.setHeaderBanner).toHaveBeenCalledWith({
+        content: expect.any(Function),
+      });
     });
 
-    expect(getBannerInfoMock).toHaveBeenCalledTimes(1);
-  });
+    it('does not register the header banner if `banner.placement` is `disabled`', async () => {
+      getBannerInfoMock.mockResolvedValue({
+        allowed: true,
+        banner: createBannerConfig({
+          placement: 'disabled',
+        }),
+      });
 
-  it('does not call `getBannerInfo` if `config.placement === disabled`', async () => {
-    await startPlugin({
-      placement: 'disabled',
-    });
+      await startPlugin();
 
-    expect(getBannerInfoMock).not.toHaveBeenCalled();
+      expect(coreStart.chrome.setHeaderBanner).toHaveBeenCalledTimes(0);
+    });
   });
 
-  it('registers the header banner if `getBannerInfo` return `allowed=true`', async () => {
-    getBannerInfoMock.mockResolvedValue({
-      allowed: true,
-    });
+  describe('when banner is not allowed', () => {
+    it('does not register the header banner if `banner.placement` is `header`', async () => {
+      getBannerInfoMock.mockResolvedValue({
+        allowed: false,
+        banner: createBannerConfig({
+          placement: 'header',
+        }),
+      });
 
-    await startPlugin({
-      placement: 'header',
-    });
+      await startPlugin();
 
-    expect(coreStart.chrome.setHeaderBanner).toHaveBeenCalledTimes(1);
-    expect(coreStart.chrome.setHeaderBanner).toHaveBeenCalledWith({
-      content: expect.any(Function),
+      expect(coreStart.chrome.setHeaderBanner).toHaveBeenCalledTimes(0);
     });
-  });
 
-  it('does not register the header banner if `getBannerInfo` return `allowed=false`', async () => {
-    getBannerInfoMock.mockResolvedValue({
-      allowed: false,
-    });
+    it('does not register the header banner if `banner.placement` is `disabled`', async () => {
+      getBannerInfoMock.mockResolvedValue({
+        allowed: false,
+        banner: createBannerConfig({
+          placement: 'disabled',
+        }),
+      });
 
-    await startPlugin({
-      placement: 'header',
-    });
+      await startPlugin();
 
-    expect(coreStart.chrome.setHeaderBanner).not.toHaveBeenCalled();
+      expect(coreStart.chrome.setHeaderBanner).toHaveBeenCalledTimes(0);
+    });
   });
 });