[Ingest Manager] Integrate beta messaging with Add Data (elastic#71147)

* Add methods to register directory notices and header links in tutorials, and use registered components when rendering tutorial directory

* Add methods to register module notices components in tutorial pages, and use registered components when rendering tutorial page

* Add `moduleName` field to server tutorial schema and test fixure

* Surface `moduleName` field from built in tutorials and registered apm tutorial

* Export component types

* Add KibanaContextProvider to home plugin app render

* Move setHttpClient to ingest manager plugin setup() method; add home as optional plugin dep; register tutorial module notice

* Fix key prop warnings

* Add dismissable tutorial directory notice and corresponding ingest manager global setting field

* Add tutorial directory header link and tie it to the state of the dismissible directory notice via observable

* Put spacing inside module notice component itself

* Check if ingest manager is available in current space

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

src/plugins/apm_oss/server/tutorial/index.ts

@@ -26,6 +26,7 @@ import { APM_STATIC_INDEX_PATTERN_ID } from '../../common/index_pattern_constant
 const apmIntro = i18n.translate('apmOss.tutorial.introduction', {
   defaultMessage: 'Collect in-depth performance metrics and errors from inside your applications.',
 });
+const moduleName = 'apm';
 
 export const tutorialProvider = ({
   indexPatternTitle,
@@ -68,6 +69,7 @@ export const tutorialProvider = ({
     name: i18n.translate('apmOss.tutorial.specProvider.name', {
       defaultMessage: 'APM',
     }),
+    moduleName,
     category: TutorialsCategory.OTHER,
     shortDescription: apmIntro,
     longDescription: i18n.translate('apmOss.tutorial.specProvider.longDescription', {

src/plugins/home/public/application/application.tsx

@@ -20,14 +20,19 @@
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { i18n } from '@kbn/i18n';
-import { ScopedHistory } from 'kibana/public';
+import { ScopedHistory, CoreStart } from 'kibana/public';
+import { KibanaContextProvider } from '../../../kibana_react/public';
 // @ts-ignore
 import { HomeApp } from './components/home_app';
 import { getServices } from './kibana_services';
 
 import './index.scss';
 
-export const renderApp = async (element: HTMLElement, history: ScopedHistory) => {
+export const renderApp = async (
+  element: HTMLElement,
+  coreStart: CoreStart,
+  history: ScopedHistory
+) => {
   const homeTitle = i18n.translate('home.breadcrumbs.homeTitle', { defaultMessage: 'Home' });
   const { featureCatalogue, chrome } = getServices();
 
@@ -36,7 +41,12 @@ export const renderApp = async (element: HTMLElement, history: ScopedHistory) =>
 
   chrome.setBreadcrumbs([{ text: homeTitle }]);
 
-  render(<HomeApp directories={directories} />, element);
+  render(
+    <KibanaContextProvider services={{ ...coreStart }}>
+      <HomeApp directories={directories} />
+    </KibanaContextProvider>,
+    element
+  );
 
   // dispatch synthetic hash change event to update hash history objects
   // this is necessary because hash updates triggered by using popState won't trigger this event naturally.

src/plugins/home/public/application/components/tutorial/tutorial.js

@@ -334,6 +334,23 @@ class TutorialUi extends React.Component {
     }
   };
 
+  renderModuleNotices() {
+    const notices = getServices().tutorialService.getModuleNotices();
+    if (notices.length && this.state.tutorial.moduleName) {
+      return (
+        <EuiFlexGroup direction="column" gutterSize="none">
+          {notices.map((ModuleNotice, index) => (
+            <EuiFlexItem key={index}>
+              <ModuleNotice moduleName={this.state.tutorial.moduleName} />
+            </EuiFlexItem>
+          ))}
+        </EuiFlexGroup>
+      );
+    } else {
+      return null;
+    }
+  }
+
   render() {
     let content;
     if (this.state.notFound) {
@@ -382,6 +399,7 @@ class TutorialUi extends React.Component {
             isBeta={this.state.tutorial.isBeta}
           />
 
+          {this.renderModuleNotices()}
           <EuiSpacer />
           <div className="eui-textCenter">{this.renderInstructionSetsToggle()}</div>
 

src/plugins/home/public/application/components/tutorial/tutorial.test.js

@@ -28,6 +28,9 @@ jest.mock('../../kibana_services', () => ({
     chrome: {
       setBreadcrumbs: () => {},
     },
+    tutorialService: {
+      getModuleNotices: () => [],
+    },
   }),
 }));
 jest.mock('../../../../../kibana_react/public', () => {

src/plugins/home/public/application/components/tutorial_directory.js

@@ -30,6 +30,7 @@ import {
   EuiTab,
   EuiFlexItem,
   EuiFlexGrid,
+  EuiFlexGroup,
   EuiSpacer,
   EuiTitle,
   EuiPageBody,
@@ -102,6 +103,7 @@ class TutorialDirectoryUi extends React.Component {
     this.state = {
       selectedTabId: openTab,
       tutorialCards: [],
+      notices: getServices().tutorialService.getDirectoryNotices(),
     };
   }
 
@@ -227,18 +229,62 @@ class TutorialDirectoryUi extends React.Component {
     );
   };
 
+  renderNotices = () => {
+    const notices = getServices().tutorialService.getDirectoryNotices();
+    return notices.length ? (
+      <EuiFlexGroup direction="column" gutterSize="none">
+        {notices.map((DirectoryNotice, index) => (
+          <EuiFlexItem key={index}>
+            <DirectoryNotice />
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+    ) : null;
+  };
+
+  renderHeaderLinks = () => {
+    const headerLinks = getServices().tutorialService.getDirectoryHeaderLinks();
+    return headerLinks.length ? (
+      <EuiFlexGroup gutterSize="m" alignItems="center">
+        {headerLinks.map((HeaderLink, index) => (
+          <EuiFlexItem key={index}>
+            <HeaderLink />
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+    ) : null;
+  };
+
+  renderHeader = () => {
+    const notices = this.renderNotices();
+    const headerLinks = this.renderHeaderLinks();
+
+    return (
+      <>
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem>
+            <EuiTitle size="l">
+              <h1>
+                <FormattedMessage
+                  id="home.tutorial.addDataToKibanaTitle"
+                  defaultMessage="Add data"
+                />
+              </h1>
+            </EuiTitle>
+          </EuiFlexItem>
+          {headerLinks ? <EuiFlexItem grow={false}>{headerLinks}</EuiFlexItem> : null}
+        </EuiFlexGroup>
+        {notices}
+      </>
+    );
+  };
+
   render() {
     return (
       <EuiPage restrictWidth={1200}>
         <EuiPageBody>
-          <EuiTitle size="l">
-            <h1>
-              <FormattedMessage id="home.tutorial.addDataToKibanaTitle" defaultMessage="Add data" />
-            </h1>
-          </EuiTitle>
-
+          {this.renderHeader()}
           <EuiSpacer size="m" />
-
           <EuiTabs>{this.renderTabs()}</EuiTabs>
           <EuiSpacer />
           {this.renderTabContent()}

src/plugins/home/public/index.ts

@@ -30,6 +30,9 @@ export {
   FeatureCatalogueCategory,
   Environment,
   TutorialVariables,
+  TutorialDirectoryNoticeComponent,
+  TutorialDirectoryHeaderLinkComponent,
+  TutorialModuleNoticeComponent,
 } from './services';
 export * from '../common/instruction_variant';
 import { HomePublicPlugin } from './plugin';

src/plugins/home/public/plugin.ts

@@ -104,7 +104,7 @@ export class HomePublicPlugin
           i18n.translate('home.pageTitle', { defaultMessage: 'Home' })
         );
         const { renderApp } = await import('./application');
-        return await renderApp(params.element, params.history);
+        return await renderApp(params.element, coreStart, params.history);
       },
     });
     kibanaLegacy.forwardApp('home', 'home');

src/plugins/home/public/services/tutorials/index.ts

@@ -17,4 +17,11 @@
  * under the License.
  */
 
-export { TutorialService, TutorialVariables, TutorialServiceSetup } from './tutorial_service';
+export {
+  TutorialService,
+  TutorialVariables,
+  TutorialServiceSetup,
+  TutorialDirectoryNoticeComponent,
+  TutorialDirectoryHeaderLinkComponent,
+  TutorialModuleNoticeComponent,
+} from './tutorial_service';

src/plugins/home/public/services/tutorials/tutorial_service.mock.ts

@@ -22,6 +22,9 @@ import { TutorialService, TutorialServiceSetup } from './tutorial_service';
 const createSetupMock = (): jest.Mocked<TutorialServiceSetup> => {
   const setup = {
     setVariable: jest.fn(),
+    registerDirectoryNotice: jest.fn(),
+    registerDirectoryHeaderLink: jest.fn(),
+    registerModuleNotice: jest.fn(),
   };
   return setup;
 };
@@ -30,6 +33,9 @@ const createMock = (): jest.Mocked<PublicMethodsOf<TutorialService>> => {
   const service = {
     setup: jest.fn(),
     getVariables: jest.fn(() => ({})),
+    getDirectoryNotices: jest.fn(() => []),
+    getDirectoryHeaderLinks: jest.fn(() => []),
+    getModuleNotices: jest.fn(() => []),
   };
   service.setup.mockImplementation(createSetupMock);
   return service;