[WIP] Migrate Stack Management plugins to use new solutions nav

src/plugins/advanced_settings/public/component_registry/page_title/page_title.tsx

@@ -7,15 +7,12 @@
  */
 
 import React from 'react';
-import { EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export const PageTitle = () => {
   return (
-    <EuiText>
-      <h1 data-test-subj="managementSettingsTitle">
-        <FormattedMessage id="advancedSettings.pageTitle" defaultMessage="Settings" />
-      </h1>
-    </EuiText>
+    <span data-test-subj="managementSettingsTitle">
+      <FormattedMessage id="advancedSettings.pageTitle" defaultMessage="Settings" />
+    </span>
   );
 };

src/plugins/advanced_settings/public/management_app/advanced_settings.test.tsx

@@ -16,9 +16,10 @@ import {
   UserProvidedValues,
   UiSettingsType,
 } from '../../../../core/public';
+import { notificationServiceMock, docLinksServiceMock } from '../../../../core/public/mocks';
+import { KibanaPageTemplate } from '../../../kibana_react/public';
 import { FieldSetting } from './types';
 import { AdvancedSettings } from './advanced_settings';
-import { notificationServiceMock, docLinksServiceMock } from '../../../../core/public/mocks';
 import { ComponentRegistry } from '../component_registry';
 import { Search } from './components/search';
 
@@ -251,6 +252,7 @@ describe('AdvancedSettings', () => {
         dockLinks={docLinksServiceMock.createStartContract().links}
         uiSettings={mockConfig().core.uiSettings}
         componentRegistry={new ComponentRegistry().start}
+        managementPageLayout={KibanaPageTemplate}
       />
     );
 
@@ -273,6 +275,7 @@ describe('AdvancedSettings', () => {
         dockLinks={docLinksServiceMock.createStartContract().links}
         uiSettings={mockConfig().core.uiSettings}
         componentRegistry={new ComponentRegistry().start}
+        managementPageLayout={KibanaPageTemplate}
       />
     );
 
@@ -299,6 +302,7 @@ describe('AdvancedSettings', () => {
           dockLinks={docLinksServiceMock.createStartContract().links}
           uiSettings={mockConfig().core.uiSettings}
           componentRegistry={new ComponentRegistry().start}
+          managementPageLayout={KibanaPageTemplate}
         />
       );
 

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

@@ -6,13 +6,13 @@
  * Side Public License, v 1.
  */
 
-import React, { Component } from 'react';
+import React, { Component, ComponentType } from 'react';
 import { Subscription } from 'rxjs';
 import { UnregisterCallback } from 'history';
 import { parse } from 'query-string';
 
 import { UiCounterMetricType } from '@kbn/analytics';
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, Query } from '@elastic/eui';
+import { EuiSpacer, Query } from '@elastic/eui';
 
 import {
   IUiSettingsClient,
@@ -32,6 +32,7 @@ import { getAriaName, toEditableConfig, fieldSorter, DEFAULT_CATEGORY } from './
 
 import { FieldSetting, SettingsChanges } from './types';
 import { parseErrorMsg } from './components/search/search';
+import { KibanaPageTemplateProps } from '../../../kibana_react/public';
 
 export const QUERY = 'query';
 
@@ -43,6 +44,7 @@ interface AdvancedSettingsProps {
   toasts: ToastsStart;
   componentRegistry: ComponentRegistry['start'];
   trackUiMetric?: (metricType: UiCounterMetricType, eventName: string | string[]) => void;
+  managementPageLayout: ComponentType<KibanaPageTemplateProps>;
 }
 
 interface AdvancedSettingsState {
@@ -239,17 +241,21 @@ export class AdvancedSettings extends Component<AdvancedSettingsProps, AdvancedS
       componentRegistry.componentType.PAGE_SUBTITLE_COMPONENT
     );
     const PageFooter = componentRegistry.get(componentRegistry.componentType.PAGE_FOOTER_COMPONENT);
+    const ManagementPageLayout = this.props.managementPageLayout;
 
     return (
-      <div>
-        <EuiFlexGroup gutterSize="none">
-          <EuiFlexItem>
-            <PageTitle />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <Search query={query} categories={this.categories} onQueryChange={this.onQueryChange} />
-          </EuiFlexItem>
-        </EuiFlexGroup>
+      <ManagementPageLayout
+        pageHeader={{
+          pageTitle: <PageTitle />,
+          rightSideItems: [
+            <Search
+              query={query}
+              categories={this.categories}
+              onQueryChange={this.onQueryChange}
+            />,
+          ],
+        }}
+      >
         <PageSubtitle />
         <EuiSpacer size="m" />
         <CallOuts />
@@ -269,14 +275,15 @@ export class AdvancedSettings extends Component<AdvancedSettingsProps, AdvancedS
           dockLinks={this.props.dockLinks}
           toasts={this.props.toasts}
           trackUiMetric={this.props.trackUiMetric}
+          queryText={query.text}
         />
         <PageFooter
           toasts={this.props.toasts}
           query={query}
           onQueryMatchChange={this.onFooterQueryMatchChange}
           enableSaving={this.props.enableSaving}
         />
-      </div>
+      </ManagementPageLayout>
     );
   }
 }