[Spaces management] make section panel title optional

x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.test.tsx

@@ -11,6 +11,7 @@ import { mountWithIntl, shallowWithIntl } from '@kbn/test-jest-helpers';
 
 import { CustomizeSpace } from './customize_space';
 import { SpaceValidator } from '../../lib';
+import { SectionPanel } from '../section_panel';
 
 const validator = new SpaceValidator({ shouldValidate: true });
 
@@ -29,6 +30,29 @@ test('renders correctly', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('allows title prop', () => {
+  const space = {
+    id: 'space-3',
+    name: 'Space 3',
+    initials: 'S3',
+    color: '#FEEDED',
+    customAvatarInitials: true,
+    customAvatarColor: true,
+  };
+  const changeHandler = jest.fn();
+
+  const wrapper = shallowWithIntl(
+    <CustomizeSpace
+      title="Cool Customize Space Title"
+      space={space}
+      editingExistingSpace={true}
+      validator={validator}
+      onChange={changeHandler}
+    />
+  );
+  expect(wrapper.find(SectionPanel).prop('title')).toBe('Cool Customize Space Title');
+});
+
 test('updates identifier, initials and color when name is changed', () => {
   const space = {
     id: 'space-1',

x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.tsx

@@ -37,6 +37,7 @@ interface Props {
   space: FormValues;
   editingExistingSpace: boolean;
   onChange: (space: FormValues) => void;
+  title?: string;
 }
 
 interface State {
@@ -51,14 +52,11 @@ export class CustomizeSpace extends Component<Props, State> {
   };
 
   public render() {
-    const { validator, editingExistingSpace, space } = this.props;
+    const { validator, editingExistingSpace, space, title } = this.props;
     const { name = '', description = '' } = space;
-    const panelTitle = i18n.translate('xpack.spaces.management.manageSpacePage.generalTitle', {
-      defaultMessage: 'General',
-    });
 
     return (
-      <SectionPanel title={panelTitle} dataTestSubj="generalPanel">
+      <SectionPanel title={title} dataTestSubj="generalPanel">
         <EuiDescribedFormGroup
           title={
             <EuiTitle size="xs">

x-pack/plugins/spaces/public/management/edit_space/manage_space_page.tsx

@@ -189,6 +189,9 @@ export class ManageSpacePage extends Component<Props, State> {
     return (
       <div data-test-subj="spaces-edit-page">
         <CustomizeSpace
+          title={i18n.translate('xpack.spaces.management.manageSpacePage.generalTitle', {
+            defaultMessage: 'General',
+          })}
           space={this.state.space}
           onChange={this.onSpaceChange}
           editingExistingSpace={this.editingExistingSpace()}
@@ -198,7 +201,14 @@ export class ManageSpacePage extends Component<Props, State> {
         {!!this.props.allowSolutionVisibility && (
           <>
             <EuiSpacer size="l" />
-            <SolutionView space={this.state.space} onChange={this.onSpaceChange} />
+            <SolutionView
+              space={this.state.space}
+              onChange={this.onSpaceChange}
+              sectionTitle={i18n.translate(
+                'xpack.spaces.management.manageSpacePage.navigationTitle',
+                { defaultMessage: 'Navigation' }
+              )}
+            />
           </>
         )}
 

x-pack/plugins/spaces/public/management/edit_space/section_panel/section_panel.test.tsx

@@ -21,6 +21,16 @@ test('it renders without blowing up', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('it renders without optional title', () => {
+  const wrapper = shallowWithIntl(
+    <SectionPanel iconType="wrench">
+      <p>child</p>
+    </SectionPanel>
+  );
+
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('it renders children', () => {
   const wrapper = mountWithIntl(
     <SectionPanel iconType="logoElasticsearch" title="Elasticsearch">

x-pack/plugins/spaces/public/management/edit_space/section_panel/section_panel.tsx

@@ -12,7 +12,7 @@ import React, { Component, Fragment } from 'react';
 
 interface Props {
   iconType?: IconType;
-  title: string | ReactNode;
+  title?: string | ReactNode;
   dataTestSubj?: string;
 }
 
@@ -27,6 +27,10 @@ export class SectionPanel extends Component<Props, {}> {
   }
 
   public getTitle = () => {
+    if (!this.props.title) {
+      return null;
+    }
+
     return (
       <EuiFlexGroup alignItems={'baseline'} gutterSize="s" responsive={false}>
         <EuiFlexItem grow={false}>
@@ -52,7 +56,7 @@ export class SectionPanel extends Component<Props, {}> {
   public getForm = () => {
     return (
       <Fragment>
-        <EuiSpacer />
+        {this.props.title ? <EuiSpacer /> : null}
         {this.props.children}
       </Fragment>
     );

x-pack/plugins/spaces/public/management/edit_space/solution_view/solution_view.tsx

@@ -98,18 +98,14 @@ const getOptions = ({ size }: EuiThemeComputed): Array<EuiSuperSelectOption<Solu
 interface Props {
   space: Partial<Space>;
   onChange: (space: Partial<Space>) => void;
+  sectionTitle?: string;
 }
 
-export const SolutionView: FunctionComponent<Props> = ({ space, onChange }) => {
+export const SolutionView: FunctionComponent<Props> = ({ space, onChange, sectionTitle }) => {
   const { euiTheme } = useEuiTheme();
 
   return (
-    <SectionPanel
-      title={i18n.translate('xpack.spaces.management.manageSpacePage.navigationTitle', {
-        defaultMessage: 'Navigation',
-      })}
-      dataTestSubj="navigationPanel"
-    >
+    <SectionPanel title={sectionTitle} dataTestSubj="navigationPanel">
       <EuiFlexGroup>
         <EuiFlexItem>
           <EuiTitle size="xs">