change imports

elastic · Oct 13, 2021 · 2210f33 · 2210f33
1 parent 7bf6759
commit 2210f33
Show file tree

Hide file tree

Showing 73 changed files with 157 additions and 2,227 deletions.
diff --git a/...age-template/src/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap b/...age-template/src/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap
diff --git a/packages/kbn-react-page-template/src/no_data_page/no_data_card/elastic_agent_card.test.tsx b/packages/kbn-react-page-template/src/no_data_page/no_data_card/elastic_agent_card.test.tsx
@@ -9,37 +9,33 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import { ElasticAgentCard } from './elastic_agent_card';
-import { KibanaContext } from '../../page_template';
 
-const kibanaContext: KibanaContext = {
-  isDarkMode: false,
-  addBasePath: (path: string) => (path ? path : 'path'),
-};
+const addBasePath = (path: string) => (path ? path : 'path');
 
 describe('ElasticAgentCard', () => {
   test('renders', () => {
-    const component = shallow(<ElasticAgentCard solution="Solution" {...kibanaContext} />);
+    const component = shallow(<ElasticAgentCard solution="Solution" addBasePath={addBasePath} />);
     expect(component).toMatchSnapshot();
   });
 
   describe('props', () => {
     test('recommended', () => {
       const component = shallow(
-        <ElasticAgentCard recommended solution="Solution" {...kibanaContext} />
+        <ElasticAgentCard recommended solution="Solution" addBasePath={addBasePath} />
       );
       expect(component).toMatchSnapshot();
     });
 
     test('button', () => {
       const component = shallow(
-        <ElasticAgentCard button="Button" solution="Solution" {...kibanaContext} />
+        <ElasticAgentCard button="Button" solution="Solution" addBasePath={addBasePath} />
       );
       expect(component).toMatchSnapshot();
     });
 
     test('href', () => {
       const component = shallow(
-        <ElasticAgentCard href="#" button="Button" solution="Solution" {...kibanaContext} />
+        <ElasticAgentCard href="#" button="Button" solution="Solution" addBasePath={addBasePath} />
       );
       expect(component).toMatchSnapshot();
     });

diff --git a/packages/kbn-react-page-template/src/no_data_page/no_data_card/elastic_agent_card.tsx b/packages/kbn-react-page-template/src/no_data_page/no_data_card/elastic_agent_card.tsx
@@ -10,12 +10,11 @@ import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiButton, EuiCard } from '@elastic/eui';
 import { NoDataPageActions, NO_DATA_RECOMMENDED } from '../no_data_page';
-import { KibanaContext } from '../../page_template';
 
-export type ElasticAgentCardProps = KibanaContext &
-  NoDataPageActions & {
-    solution: string;
-  };
+export type ElasticAgentCardProps = NoDataPageActions & {
+  solution: string;
+  addBasePath: (path: string) => string;
+};
 
 /**
  * Applies extra styling to a typical EuiAvatar

diff --git a/packages/kbn-react-page-template/src/no_data_page/no_data_card/elastic_beats_card.test.tsx b/packages/kbn-react-page-template/src/no_data_page/no_data_card/elastic_beats_card.test.tsx
@@ -9,37 +9,51 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import { ElasticBeatsCard } from './elastic_beats_card';
-import { KibanaContext } from '../../page_template';
 
-const kibanaContext: KibanaContext = {
-  isDarkMode: false,
-  addBasePath: (path: string) => (path ? path : 'path'),
-};
+const addBasePath = (path: string) => (path ? path : 'path');
 
 describe('ElasticBeatsCard', () => {
   test('renders', () => {
-    const component = shallow(<ElasticBeatsCard solution="Solution" {...kibanaContext} />);
+    const component = shallow(
+      <ElasticBeatsCard solution="Solution" isDarkMode={false} addBasePath={addBasePath} />
+    );
     expect(component).toMatchSnapshot();
   });
 
   describe('props', () => {
     test('recommended', () => {
       const component = shallow(
-        <ElasticBeatsCard recommended solution="Solution" {...kibanaContext} />
+        <ElasticBeatsCard
+          recommended
+          solution="Solution"
+          isDarkMode={false}
+          addBasePath={addBasePath}
+        />
       );
       expect(component).toMatchSnapshot();
     });
 
     test('button', () => {
       const component = shallow(
-        <ElasticBeatsCard button="Button" solution="Solution" {...kibanaContext} />
+        <ElasticBeatsCard
+          button="Button"
+          solution="Solution"
+          isDarkMode={false}
+          addBasePath={addBasePath}
+        />
       );
       expect(component).toMatchSnapshot();
     });
 
     test('href', () => {
       const component = shallow(
-        <ElasticBeatsCard href="#" button="Button" solution="Solution" {...kibanaContext} />
+        <ElasticBeatsCard
+          href="#"
+          button="Button"
+          solution="Solution"
+          isDarkMode={false}
+          addBasePath={addBasePath}
+        />
       );
       expect(component).toMatchSnapshot();
     });

diff --git a/packages/kbn-react-page-template/src/no_data_page/no_data_card/elastic_beats_card.tsx b/packages/kbn-react-page-template/src/no_data_page/no_data_card/elastic_beats_card.tsx
@@ -10,12 +10,12 @@ import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiButton, EuiCard } from '@elastic/eui';
 import { NoDataPageActions, NO_DATA_RECOMMENDED } from '../no_data_page';
-import { KibanaContext } from '../../page_template';
 
-export type ElasticBeatsCardProps = KibanaContext &
-  NoDataPageActions & {
-    solution: string;
-  };
+export type ElasticBeatsCardProps = NoDataPageActions & {
+  solution: string;
+  addBasePath: (path: string) => string;
+  isDarkMode: boolean;
+};
 
 export const ElasticBeatsCard: FunctionComponent<ElasticBeatsCardProps> = ({
   recommended,

diff --git a/packages/kbn-react-page-template/src/no_data_page/no_data_page.tsx b/packages/kbn-react-page-template/src/no_data_page/no_data_page.tsx
@@ -24,7 +24,6 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { ElasticAgentCard, ElasticBeatsCard, NoDataCard } from './no_data_card';
 import { KibanaPageTemplateSolutionNavAvatar } from '../solution_nav';
-import { KibanaContext } from '../page_template';
 
 export const NO_DATA_PAGE_MAX_WIDTH = 950;
 export const NO_DATA_PAGE_TEMPLATE_PROPS: EuiPageTemplateProps = {
@@ -83,9 +82,20 @@ export interface NoDataPageProps {
    * Otherwise use a custom key that contains `EuiCard` props.
    */
   actions: NoDataPageActionsProps;
+
+  /**
+   * Prepend Kibana's base path
+   * @param path
+   */
+  addBasePath: (path: string) => string;
+
+  /**
+   * Is Kibana is darkMode
+   */
+  isDarkMode: boolean;
 }
 
-export const NoDataPage: FunctionComponent<NoDataPageProps & KibanaContext> = ({
+export const NoDataPage: FunctionComponent<NoDataPageProps> = ({
   solution,
   logo,
   actions,
@@ -113,12 +123,7 @@ export const NoDataPage: FunctionComponent<NoDataPageProps & KibanaContext> = ({
       if (actionsKeys[i] === 'elasticAgent') {
         return (
           <EuiFlexItem key={`empty-page-agent-action`} className="kbnNoDataPageContents__item">
-            <ElasticAgentCard
-              solution={solution}
-              isDarkMode={isDarkMode}
-              addBasePath={addBasePath}
-              {...action}
-            />
+            <ElasticAgentCard solution={solution} addBasePath={addBasePath} {...action} />
           </EuiFlexItem>
         );
       } else if (actionsKeys[i] === 'beats') {

diff --git a/packages/kbn-react-page-template/src/page_template.test.tsx b/packages/kbn-react-page-template/src/page_template.test.tsx
@@ -8,15 +8,10 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import { KibanaContext, KibanaPageTemplate, KibanaPageTemplateProps } from './page_template';
+import { KibanaPageTemplate, KibanaPageTemplateProps } from './page_template';
 import { EuiEmptyPrompt } from '@elastic/eui';
 import { KibanaPageTemplateSolutionNavProps } from './solution_nav';
 
-const kibanaContext: KibanaContext = {
-  isDarkMode: false,
-  addBasePath: (path: string) => (path ? path : 'path'),
-};
-
 const navItems: KibanaPageTemplateSolutionNavProps['items'] = [
   {
     name: 'Ingest',
@@ -64,6 +59,8 @@ const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = {
     custom: {},
   },
   docsLink: 'test',
+  isDarkMode: false,
+  addBasePath: (str) => str,
 };
 
 describe('KibanaPageTemplate', () => {
@@ -77,15 +74,14 @@ describe('KibanaPageTemplate', () => {
           description: 'test',
           rightSideItems: ['test'],
         }}
-        {...kibanaContext}
       />
     );
     expect(component).toMatchSnapshot();
   });
 
   test('render custom empty prompt only', () => {
     const component = shallow(
-      <KibanaPageTemplate isEmptyState={true} {...kibanaContext}>
+      <KibanaPageTemplate isEmptyState={true}>
         <EuiEmptyPrompt title={<h1>custom test</h1>} />
       </KibanaPageTemplate>
     );
@@ -102,7 +98,6 @@ describe('KibanaPageTemplate', () => {
           description: 'test',
           rightSideItems: ['test'],
         }}
-        {...kibanaContext}
       >
         <EuiEmptyPrompt title={<h1>custom test</h1>} />
       </KibanaPageTemplate>
@@ -119,7 +114,6 @@ describe('KibanaPageTemplate', () => {
           description: 'test',
           rightSideItems: ['test'],
         }}
-        {...kibanaContext}
       />
     );
     expect(component).toMatchSnapshot();
@@ -139,7 +133,6 @@ describe('KibanaPageTemplate', () => {
           icon: 'solution',
           items: navItems,
         }}
-        {...kibanaContext}
       />
     );
     expect(component).toMatchSnapshot();
@@ -160,7 +153,6 @@ describe('KibanaPageTemplate', () => {
           items: navItems,
         }}
         noDataConfig={noDataConfig}
-        {...kibanaContext}
       />
     );
     expect(component).toMatchSnapshot();
@@ -175,7 +167,6 @@ describe('KibanaPageTemplate', () => {
           items: navItems,
         }}
         pageSideBarProps={{ className: 'customClass' }}
-        {...kibanaContext}
       />
     );
     expect(component.prop('pageSideBarProps').className).toEqual(

diff --git a/packages/kbn-react-page-template/src/page_template.tsx b/packages/kbn-react-page-template/src/page_template.tsx
@@ -27,43 +27,26 @@ import {
 import { NoDataPage, NoDataPageProps, NO_DATA_PAGE_TEMPLATE_PROPS } from './no_data_page';
 
 /**
- * Required Kibana context for rendering page template
+ * A thin wrapper around EuiPageTemplate with a few Kibana specific additions
  */
-export interface KibanaContext {
+export type KibanaPageTemplateProps = EuiPageTemplateProps & {
   /**
-   * Append Kibana's basePath
-   * @param path
+   * Changes the template type depending on other props provided.
+   * With `pageHeader` only: Uses `centeredBody` and fills an EuiEmptyPrompt with `pageHeader` info.
+   * With `children` only: Uses `centeredBody`
+   * With `pageHeader` and `children`: Uses `centeredContent`
    */
-  addBasePath: (path: string) => string;
-
+  isEmptyState?: boolean;
   /**
-   * If Kibana is in dark mode
+   * Quick creation of EuiSideNav. Hooks up mobile instance too
    */
-  isDarkMode: boolean;
-}
-
-/**
- * A thin wrapper around EuiPageTemplate with a few Kibana specific additions
- */
-export type KibanaPageTemplateProps = KibanaContext &
-  EuiPageTemplateProps & {
-    /**
-     * Changes the template type depending on other props provided.
-     * With `pageHeader` only: Uses `centeredBody` and fills an EuiEmptyPrompt with `pageHeader` info.
-     * With `children` only: Uses `centeredBody`
-     * With `pageHeader` and `children`: Uses `centeredContent`
-     */
-    isEmptyState?: boolean;
-    /**
-     * Quick creation of EuiSideNav. Hooks up mobile instance too
-     */
-    solutionNav?: KibanaPageTemplateSolutionNavProps;
-    /**
-     * Accepts a configuration object, that when provided, ignores pageHeader and children and instead
-     * displays Agent, Beats, and custom cards to direct users to the right ingest location
-     */
-    noDataConfig?: NoDataPageProps;
-  };
+  solutionNav?: KibanaPageTemplateSolutionNavProps;
+  /**
+   * Accepts a configuration object, that when provided, ignores pageHeader and children and instead
+   * displays Agent, Beats, and custom cards to direct users to the right ingest location
+   */
+  noDataConfig?: NoDataPageProps;
+};
 
 export const KibanaPageTemplate: FunctionComponent<KibanaPageTemplateProps> = ({
   template,
@@ -76,8 +59,6 @@ export const KibanaPageTemplate: FunctionComponent<KibanaPageTemplateProps> = ({
   pageSideBarProps,
   solutionNav,
   noDataConfig,
-  isDarkMode,
-  addBasePath,
   ...rest
 }) => {
   /**
@@ -152,6 +133,7 @@ export const KibanaPageTemplate: FunctionComponent<KibanaPageTemplateProps> = ({
   if (noDataConfig) {
     return (
       <EuiPageTemplate
+        data-test-subj={rest['data-test-subj']}
         template={template}
         className={classes}
         pageSideBar={pageSideBar}
@@ -162,7 +144,7 @@ export const KibanaPageTemplate: FunctionComponent<KibanaPageTemplateProps> = ({
         }}
         {...NO_DATA_PAGE_TEMPLATE_PROPS}
       >
-        <NoDataPage {...noDataConfig} isDarkMode={isDarkMode} addBasePath={addBasePath} />
+        <NoDataPage {...noDataConfig} />
       </EuiPageTemplate>
     );
   }

diff --git a/src/plugins/home/public/application/components/home.test.tsx b/src/plugins/home/public/application/components/home.test.tsx
@@ -28,6 +28,9 @@ jest.mock('../kibana_services', () => ({
 jest.mock('../../../../../../src/plugins/kibana_react/public', () => ({
   overviewPageActions: jest.fn().mockReturnValue([]),
   OverviewPageFooter: jest.fn().mockReturnValue(<></>),
+}));
+
+jest.mock('@kbn/react-page-template', () => ({
   KibanaPageTemplate: jest.fn().mockReturnValue(<></>),
 }));
 

diff --git a/src/plugins/home/public/application/components/home.tsx b/src/plugins/home/public/application/components/home.tsx
@@ -10,8 +10,9 @@ import React, { Component } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { i18n } from '@kbn/i18n';
+import { KibanaPageTemplate } from '@kbn/react-page-template';
 import type { TelemetryPluginStart } from 'src/plugins/telemetry/public';
-import { KibanaPageTemplate, OverviewPageFooter } from '../../../../kibana_react/public';
+import { OverviewPageFooter } from '../../../../kibana_react/public';
 import { HOME_APP_BASE_PATH } from '../../../common/constants';
 import type { FeatureCatalogueEntry, FeatureCatalogueSolution } from '../../services';
 import { FeatureCatalogueCategory } from '../../services';

diff --git a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx
@@ -10,7 +10,7 @@ import { snakeCase } from 'lodash';
 import React, { FC, MouseEvent } from 'react';
 import { EuiCard, EuiFlexItem } from '@elastic/eui';
 import { METRIC_TYPE } from '@kbn/analytics';
-import { KibanaPageTemplateSolutionNavAvatar } from '../../../../../kibana_react/public';
+import { KibanaPageTemplateSolutionNavAvatar } from '@kbn/react-page-template';
 import { FeatureCatalogueSolution } from '../../../';
 import { createAppNavigationHandler } from '../app_navigation_handler';
 import { getServices } from '../../kibana_services';