[Spaces] - Space-aware Settings UI

src/core_plugins/kibana/public/management/sections/settings/__snapshots__/advanced_settings.test.js.snap

@@ -51,6 +51,7 @@ exports[`AdvancedSettings should render normally 1`] = `
       />
     </EuiFlexItem>
   </EuiFlexGroup>
+  <advanced_settings_page_subtitle />
   <EuiSpacer
     size="m"
   />
@@ -396,6 +397,7 @@ exports[`AdvancedSettings should render specific setting if given setting key 1`
       />
     </EuiFlexItem>
   </EuiFlexGroup>
+  <advanced_settings_page_subtitle />
   <EuiSpacer
     size="m"
   />

src/core_plugins/kibana/public/management/sections/settings/advanced_settings.js

@@ -35,7 +35,12 @@ import { Form } from './components/form';
 import { getAriaName, toEditableConfig, DEFAULT_CATEGORY } from './lib';
 
 import './advanced_settings.less';
-import { registerDefaultComponents, PAGE_TITLE_COMPONENT, PAGE_FOOTER_COMPONENT } from './components/default_component_registry';
+import {
+  registerDefaultComponents,
+  PAGE_TITLE_COMPONENT,
+  PAGE_SUBTITLE_COMPONENT,
+  PAGE_FOOTER_COMPONENT
+} from './components/default_component_registry';
 import { getSettingsComponent } from './components/component_registry';
 
 export class AdvancedSettings extends Component {
@@ -145,6 +150,7 @@ export class AdvancedSettings extends Component {
     const { filteredSettings, query, footerQueryMatched } = this.state;
 
     const PageTitle = getSettingsComponent(PAGE_TITLE_COMPONENT);
+    const PageSubtitle = getSettingsComponent(PAGE_SUBTITLE_COMPONENT);
     const PageFooter = getSettingsComponent(PAGE_FOOTER_COMPONENT);
 
     return (
@@ -161,6 +167,7 @@ export class AdvancedSettings extends Component {
             />
           </EuiFlexItem>
         </EuiFlexGroup>
+        <PageSubtitle />
         <EuiSpacer size="m" />
         <CallOuts />
         <EuiSpacer size="m" />

src/core_plugins/kibana/public/management/sections/settings/components/default_component_registry.js

@@ -19,12 +19,15 @@
 
 import { tryRegisterSettingsComponent } from './component_registry';
 import { PageTitle } from './page_title';
+import { PageSubtitle } from './page_subtitle';
 import { PageFooter } from './page_footer';
 
 export const PAGE_TITLE_COMPONENT = 'advanced_settings_page_title';
+export const PAGE_SUBTITLE_COMPONENT = 'advanced_settings_page_subtitle';
 export const PAGE_FOOTER_COMPONENT = 'advanced_settings_page_footer';
 
 export function registerDefaultComponents() {
   tryRegisterSettingsComponent(PAGE_TITLE_COMPONENT, PageTitle);
+  tryRegisterSettingsComponent(PAGE_SUBTITLE_COMPONENT, PageSubtitle);
   tryRegisterSettingsComponent(PAGE_FOOTER_COMPONENT, PageFooter);
 }

src/core_plugins/kibana/public/management/sections/settings/components/page_subtitle/__snapshots__/page_subtitle.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageSubtitle should render normally 1`] = `""`;

src/core_plugins/kibana/public/management/sections/settings/components/page_subtitle/index.js

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { PageSubtitle } from './page_subtitle';

src/core_plugins/kibana/public/management/sections/settings/components/page_subtitle/page_subtitle.js

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const PageSubtitle = () => null;

src/core_plugins/kibana/public/management/sections/settings/components/page_subtitle/page_subtitle.test.js

@@ -0,0 +1,28 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { PageSubtitle } from './page_subtitle';
+
+describe('PageSubtitle', () => {
+  it('should render normally', () => {
+    expect(shallow(<PageSubtitle />)).toMatchSnapshot();
+  });
+});

src/ui/public/management/index.js

@@ -21,6 +21,7 @@ import { ManagementSection } from './section';
 
 export {
   PAGE_TITLE_COMPONENT,
+  PAGE_SUBTITLE_COMPONENT,
   PAGE_FOOTER_COMPONENT,
 } from '../../../core_plugins/kibana/public/management/sections/settings/components/default_component_registry';
 

x-pack/plugins/security/public/views/management/edit_role/index.js

@@ -19,8 +19,8 @@ import 'plugins/security/services/shield_indices';
 
 import { IndexPatternsProvider } from 'ui/index_patterns/index_patterns';
 import { XPackInfoProvider } from 'plugins/xpack_main/services/xpack_info';
+import { SpacesManager } from '../../../../../spaces/public/lib';
 import { UserProfileProvider } from 'plugins/xpack_main/services/user_profile';
-import { SpacesManager } from 'plugins/spaces/lib';
 import { checkLicenseError } from 'plugins/security/lib/check_license_error';
 import { EDIT_ROLES_PATH, ROLES_PATH } from '../management_urls';
 
@@ -79,8 +79,11 @@ routes.when(`${EDIT_ROLES_PATH}/:name?`, {
       const indexPatterns = Private(IndexPatternsProvider);
       return indexPatterns.getTitles();
     },
-    spaces($http, chrome) {
-      return new SpacesManager($http, chrome).getSpaces();
+    spaces($http, chrome, spacesEnabled) {
+      if (spacesEnabled) {
+        return new SpacesManager($http, chrome).getSpaces();
+      }
+      return [];
     }
   },
   controllerAs: 'editRole',

x-pack/plugins/spaces/public/views/management/components/advanced_settings_subtitle/advanced_settings_subtitle.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiCallOut, EuiSpacer } from '@elastic/eui';
+import React, { Fragment } from 'react';
+import { Space } from '../../../../../common/model/space';
+
+interface Props {
+  space: Space;
+}
+
+export const AdvancedSettingsSubtitle = (props: Props) => (
+  <Fragment>
+    <EuiSpacer size={'m'} />
+    <EuiCallOut
+      color="primary"
+      iconType="spacesApp"
+      title={
+        <p>
+          The settings on this page apply to the <strong>{props.space.name}</strong> space, unless
+          otherwise specified.
+        </p>
+      }
+    />
+  </Fragment>
+);

x-pack/plugins/spaces/public/views/management/components/advanced_settings_subtitle/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { AdvancedSettingsSubtitle } from './advanced_settings_subtitle';

x-pack/plugins/spaces/public/views/management/components/advanced_settings_title/advanced_settings_title.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import React from 'react';
+import { Space } from '../../../../../common/model/space';
+import { SpaceAvatar } from '../../../../components';
+
+interface Props {
+  space: Space;
+}
+
+export const AdvancedSettingsTitle = (props: Props) => (
+  <EuiFlexGroup gutterSize="s" responsive={false} alignItems={'center'}>
+    <EuiFlexItem grow={false}>
+      <SpaceAvatar space={props.space} />
+    </EuiFlexItem>
+    <EuiFlexItem style={{ marginLeft: '10px' }}>
+      <EuiText>
+        <h1 data-test-subj="managementSettingsTitle">Settings</h1>
+      </EuiText>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);

x-pack/plugins/spaces/public/views/management/components/advanced_settings_title/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { AdvancedSettingsTitle } from './advanced_settings_title';

x-pack/plugins/spaces/public/views/management/index.ts → x-pack/plugins/spaces/public/views/management/index.tsx

@@ -3,18 +3,25 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
 import 'plugins/spaces/views/management/page_routes';
-// @ts-ignore
-import { management } from 'ui/management';
+import React from 'react';
+import {
+  management,
+  PAGE_SUBTITLE_COMPONENT,
+  PAGE_TITLE_COMPONENT,
+  registerSettingsComponent,
+  // @ts-ignore
+} from 'ui/management';
 // @ts-ignore
 import routes from 'ui/routes';
+import { AdvancedSettingsSubtitle } from './components/advanced_settings_subtitle';
+import { AdvancedSettingsTitle } from './components/advanced_settings_title';
 
 const MANAGE_SPACES_KEY = 'manage_spaces';
 
 routes.defaults(/\/management/, {
   resolve: {
-    spacesManagementSection() {
+    spacesManagementSection(activeSpace: any) {
       function getKibanaSection() {
         return management.getSection('kibana');
       }
@@ -34,6 +41,12 @@ routes.defaults(/\/management/, {
             url: `#/management/spaces/list`,
           });
         }
+
+        const PageTitle = () => <AdvancedSettingsTitle space={activeSpace.space} />;
+        registerSettingsComponent(PAGE_TITLE_COMPONENT, PageTitle, true);
+
+        const SubTitle = () => <AdvancedSettingsSubtitle space={activeSpace.space} />;
+        registerSettingsComponent(PAGE_SUBTITLE_COMPONENT, SubTitle, true);
       }
 
       deregisterSpaces();

x-pack/plugins/spaces/public/views/nav_control/nav_control.js

@@ -26,10 +26,11 @@ const module = uiModules.get('spaces_nav', ['kibana']);
 
 let spacesManager;
 
-module.controller('spacesNavController', ($scope, $http, chrome, Private, activeSpace, spaceSelectorURL) => {
+module.controller('spacesNavController', ($scope, $http, chrome, Private, activeSpace) => {
   const userProfile = Private(UserProfileProvider);
 
   const domNode = document.getElementById(`spacesNavReactRoot`);
+  const spaceSelectorURL = chrome.getInjected('spaceSelectorURL');
 
   spacesManager = new SpacesManager($http, chrome, spaceSelectorURL);
 

x-pack/plugins/xpack_main/index.js

@@ -88,6 +88,8 @@ export const xpackMain = (kibana) => {
           telemetryUrl: config.get('xpack.xpack_main.telemetry.url'),
           telemetryEnabled: isTelemetryEnabled(config),
           telemetryOptedIn: null,
+          activeSpace: null,
+          spacesEnabled: config.get('xpack.spaces.enabled'),
           userProfile: {},
         };
       },

x-pack/plugins/xpack_main/public/components/telemetry/telemetry_form.js

@@ -7,6 +7,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import {
+  EuiCallOut,
   EuiPanel,
   EuiForm,
   EuiFlexGroup,
@@ -27,6 +28,8 @@ export class TelemetryForm extends Component {
     telemetryOptInProvider: PropTypes.object.isRequired,
     query: PropTypes.object,
     onQueryMatchChange: PropTypes.func.isRequired,
+    spacesEnabled: PropTypes.bool.isRequired,
+    activeSpace: PropTypes.object,
   };
 
   state = {
@@ -80,6 +83,8 @@ export class TelemetryForm extends Component {
                 </EuiFlexItem>
               </EuiFlexGroup>
             </EuiText>
+
+            {this.maybeGetSpacesWarning()}
             <EuiSpacer size="s" />
             <Field
               setting={{
@@ -97,6 +102,21 @@ export class TelemetryForm extends Component {
     );
   }
 
+  maybeGetSpacesWarning = () => {
+    if (!this.props.spacesEnabled) {
+      return null;
+    }
+    return (
+      <EuiCallOut
+        color="primary"
+        iconType="spacesApp"
+        title={
+          <p>This setting applies to <strong>all of Kibana.</strong></p>
+        }
+      />
+    );
+  }
+
   renderDescription = () => (
     <Fragment>
       <p>{CONFIG_TELEMETRY_DESC}</p>

x-pack/plugins/xpack_main/public/views/management/management.js

@@ -12,9 +12,25 @@ import { TelemetryForm } from '../../components';
 
 routes.defaults(/\/management/, {
   resolve: {
-    telemetryManagementSection: function (Private) {
+    telemetryManagementSection: function (Private, spacesEnabled, activeSpace) {
       const telemetryOptInProvider = Private(TelemetryOptInProvider);
-      const Component = (props) => <TelemetryForm telemetryOptInProvider={telemetryOptInProvider} {...props} />;
+
+      const spaceProps = {
+        spacesEnabled,
+      };
+
+      if (spacesEnabled) {
+        spaceProps.activeSpace = activeSpace ? activeSpace.space : null;
+      }
+
+      const Component = (props) => (
+        <TelemetryForm
+          spacesEnabled={spacesEnabled}
+          telemetryOptInProvider={telemetryOptInProvider}
+          {...spaceProps}
+          {...props}
+        />
+      );
 
       registerSettingsComponent(PAGE_FOOTER_COMPONENT, Component, true);
     }