[Ingest pipelines] Add KibanaContextProvider as dependency of process…

…or editor (#75018)
elastic · Aug 17, 2020 · 156692c · 156692c
1 parent 22f0641
commit 156692c
Show file tree

Hide file tree

Showing 11 changed files with 62 additions and 64 deletions.
diff --git a/...est_pipelines/public/application/components/pipeline_form/on_failure_processors_title.tsx b/...est_pipelines/public/application/components/pipeline_form/on_failure_processors_title.tsx
@@ -8,10 +8,10 @@ import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { usePipelineProcessorsContext } from '../pipeline_processors_editor/context';
+import { useKibana } from '../../../shared_imports';
 
 export const OnFailureProcessorsTitle: FunctionComponent = () => {
-  const { links } = usePipelineProcessorsContext();
+  const { services } = useKibana();
   return (
     <EuiFlexGroup
       alignItems="center"
@@ -35,7 +35,10 @@ export const OnFailureProcessorsTitle: FunctionComponent = () => {
             values={{
               learnMoreLink: (
                 <EuiLink
-                  href={links.esDocsBasePath + '/handling-failure-in-pipelines.html'}
+                  href={
+                    services.documentation.getEsDocsBasePath() +
+                    '/handling-failure-in-pipelines.html'
+                  }
                   target="_blank"
                 >
                   {i18n.translate(

diff --git a/...ins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx b/...ins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx
@@ -10,7 +10,7 @@ import { EuiSpacer, EuiSwitch, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { Processor } from '../../../../common/types';
 
-import { getUseField, getFormRow, Field, useKibana } from '../../../shared_imports';
+import { getUseField, getFormRow, Field } from '../../../shared_imports';
 
 import {
   ProcessorsEditorContextProvider,
@@ -45,8 +45,6 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
   hasVersion,
   onEditorFlyoutOpen,
 }) => {
-  const { services } = useKibana();
-
   const [isVersionVisible, setIsVersionVisible] = useState<boolean>(hasVersion);
 
   return (
@@ -123,9 +121,6 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
 
       <ProcessorsEditorContextProvider
         onFlyoutOpen={onEditorFlyoutOpen}
-        links={{ esDocsBasePath: services.documentation.getEsDocsBasePath() }}
-        api={services.api}
-        toasts={services.notifications.toasts}
         onUpdate={onProcessorsUpdate}
         value={{ processors, onFailure }}
       >

diff --git a/...lugins/ingest_pipelines/public/application/components/pipeline_form/processors_header.tsx b/...lugins/ingest_pipelines/public/application/components/pipeline_form/processors_header.tsx
@@ -9,7 +9,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiTitle } from '@elastic/
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { usePipelineProcessorsContext } from '../pipeline_processors_editor/context';
+import { useKibana } from '../../../shared_imports';
 
 import {
   LoadFromJsonButton,
@@ -22,7 +22,7 @@ export interface Props {
 }
 
 export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson }) => {
-  const { links } = usePipelineProcessorsContext();
+  const { services } = useKibana();
   return (
     <EuiFlexGroup
       alignItems="center"
@@ -44,7 +44,10 @@ export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson }) => {
             defaultMessage="The processors used to pre-process documents before indexing. {learnMoreLink}"
             values={{
               learnMoreLink: (
-                <EuiLink href={links.esDocsBasePath + '/ingest-processors.html'} target="_blank">
+                <EuiLink
+                  href={services.documentation.getEsDocsBasePath() + '/ingest-processors.html'}
+                  target="_blank"
+                >
                   {i18n.translate(
                     'xpack.ingestPipelines.pipelineEditor.processorsDocumentationLink',
                     {

diff --git a/...ion/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx b/...ion/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx
@@ -5,6 +5,11 @@
  */
 import { act } from 'react-dom/test-utils';
 import React from 'react';
+
+import { notificationServiceMock, scopedHistoryMock } from 'src/core/public/mocks';
+
+import { LocationDescriptorObject } from 'history';
+import { KibanaContextProvider } from 'src/plugins/kibana_react/public';
 import { registerTestBed, TestBed } from '../../../../../../../test_utils';
 import {
   ProcessorsEditorContextProvider,
@@ -13,6 +18,13 @@ import {
   GlobalOnFailureProcessorsEditor,
 } from '../';
 
+import {
+  breadcrumbService,
+  uiMetricService,
+  documentationService,
+  apiService,
+} from '../../../services';
+
 jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
 
@@ -60,11 +72,27 @@ jest.mock('react-virtualized', () => {
   };
 });
 
+const history = scopedHistoryMock.create();
+history.createHref.mockImplementation((location: LocationDescriptorObject) => {
+  return `${location.pathname}?${location.search}`;
+});
+
+const appServices = {
+  breadcrumbs: breadcrumbService,
+  metric: uiMetricService,
+  documentation: documentationService,
+  api: apiService,
+  notifications: notificationServiceMock.createSetupContract(),
+  history,
+};
+
 const testBedSetup = registerTestBed<TestSubject>(
   (props: Props) => (
-    <ProcessorsEditorContextProvider {...props}>
-      <ProcessorsEditor /> <GlobalOnFailureProcessorsEditor />
-    </ProcessorsEditorContextProvider>
+    <KibanaContextProvider services={appServices}>
+      <ProcessorsEditorContextProvider {...props}>
+        <ProcessorsEditor /> <GlobalOnFailureProcessorsEditor />
+      </ProcessorsEditorContextProvider>
+    </KibanaContextProvider>
   ),
   {
     doMountAsync: false,

diff --git a/...cation/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx b/...cation/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
@@ -3,11 +3,9 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { notificationServiceMock } from 'src/core/public/mocks';
 
 import { setup, SetupResult } from './pipeline_processors_editor.helpers';
 import { Pipeline } from '../../../../../common/types';
-import { apiService } from '../../../services';
 
 const testProcessors: Pick<Pipeline, 'processors'> = {
   processors: [
@@ -46,11 +44,6 @@ describe('Pipeline Editor', () => {
       },
       onFlyoutOpen: jest.fn(),
       onUpdate,
-      links: {
-        esDocsBasePath: 'test',
-      },
-      toasts: notificationServiceMock.createSetupContract().toasts,
-      api: apiService,
     });
   });
 

diff --git a/...ne_processors_editor/components/manage_processor_form/manage_processor_form.container.tsx b/...ne_processors_editor/components/manage_processor_form/manage_processor_form.container.tsx
@@ -6,11 +6,10 @@
 
 import React, { FunctionComponent, useCallback, useEffect } from 'react';
 
-import { useForm, OnFormUpdateArg, FormData } from '../../../../../shared_imports';
+import { useForm, OnFormUpdateArg, FormData, useKibana } from '../../../../../shared_imports';
 import { ProcessorInternal } from '../../types';
 
 import { ManageProcessorForm as ViewComponent } from './manage_processor_form';
-import { usePipelineProcessorsContext } from '../../context';
 
 export type ManageProcessorFormOnSubmitArg = Omit<ProcessorInternal, 'id'>;
 
@@ -33,9 +32,7 @@ export const ManageProcessorForm: FunctionComponent<Props> = ({
   onSubmit,
   ...rest
 }) => {
-  const {
-    links: { esDocsBasePath },
-  } = usePipelineProcessorsContext();
+  const { services } = useKibana();
 
   const handleSubmit = useCallback(
     async (data: FormData, isValid: boolean) => {
@@ -67,6 +64,11 @@ export const ManageProcessorForm: FunctionComponent<Props> = ({
   }, [onFormUpdate]);
 
   return (
-    <ViewComponent {...rest} processor={processor} form={form} esDocsBasePath={esDocsBasePath} />
+    <ViewComponent
+      {...rest}
+      processor={processor}
+      form={form}
+      esDocsBasePath={services.documentation.getEsDocsBasePath()}
+    />
   );
 };
diff --git a/...cation/components/pipeline_processors_editor/components/test_pipeline/flyout_provider.tsx b/...cation/components/pipeline_processors_editor/components/test_pipeline/flyout_provider.tsx
@@ -17,6 +17,8 @@ import {
   EuiCallOut,
 } from '@elastic/eui';
 
+import { useKibana } from '../../../../../shared_imports';
+
 import { usePipelineProcessorsContext, useTestConfigContext } from '../../context';
 import { serialize } from '../../serialize';
 
@@ -27,10 +29,9 @@ export interface Props {
 }
 
 export const FlyoutProvider: React.FunctionComponent<Props> = ({ children }) => {
+  const { services } = useKibana();
   const {
     state: { processors },
-    api,
-    toasts,
   } = usePipelineProcessorsContext();
 
   const serializedProcessors = serialize(processors.state);
@@ -53,7 +54,7 @@ export const FlyoutProvider: React.FunctionComponent<Props> = ({ children }) =>
       setIsExecuting(true);
       setExecuteError(null);
 
-      const { error, data: output } = await api.simulatePipeline({
+      const { error, data: output } = await services.api.simulatePipeline({
         documents,
         verbose,
         pipeline: { ...serializedProcessors },
@@ -68,7 +69,7 @@ export const FlyoutProvider: React.FunctionComponent<Props> = ({ children }) =>
 
       setExecuteOutput(output);
 
-      toasts.addSuccess(
+      services.notifications.toasts.addSuccess(
         i18n.translate('xpack.ingestPipelines.testPipelineFlyout.successNotificationText', {
           defaultMessage: 'Pipeline executed',
         }),
@@ -79,7 +80,7 @@ export const FlyoutProvider: React.FunctionComponent<Props> = ({ children }) =>
 
       setSelectedTab('output');
     },
-    [serializedProcessors, api, toasts]
+    [services.api, services.notifications.toasts, serializedProcessors]
   );
 
   useEffect(() => {

diff --git a/...ponents/pipeline_processors_editor/components/test_pipeline/flyout_tabs/tab_documents.tsx b/...ponents/pipeline_processors_editor/components/test_pipeline/flyout_tabs/tab_documents.tsx
@@ -17,9 +17,10 @@ import {
   Form,
   useForm,
   FormConfig,
+  useKibana,
 } from '../../../../../../shared_imports';
 
-import { usePipelineProcessorsContext, useTestConfigContext, TestConfig } from '../../../context';
+import { useTestConfigContext, TestConfig } from '../../../context';
 
 import { documentsSchema } from './schema';
 
@@ -31,7 +32,7 @@ interface Props {
 }
 
 export const DocumentsTab: React.FunctionComponent<Props> = ({ handleExecute, isExecuting }) => {
-  const { links } = usePipelineProcessorsContext();
+  const { services } = useKibana();
 
   const { setCurrentTestConfig, testConfig } = useTestConfigContext();
   const { verbose: cachedVerbose, documents: cachedDocuments } = testConfig;
@@ -71,7 +72,7 @@ export const DocumentsTab: React.FunctionComponent<Props> = ({ handleExecute, is
             values={{
               learnMoreLink: (
                 <EuiLink
-                  href={`${links.esDocsBasePath}/simulate-pipeline-api.html`}
+                  href={`${services.documentation.getEsDocsBasePath()}/simulate-pipeline-api.html`}
                   target="_blank"
                   external
                 >

diff --git a/...st_pipelines/public/application/components/pipeline_processors_editor/context/context.tsx b/...st_pipelines/public/application/components/pipeline_processors_editor/context/context.tsx
@@ -18,9 +18,6 @@ interface Props extends ProcessorsContextProps {
 
 export const ProcessorsEditorContextProvider: FunctionComponent<Props> = ({
   children,
-  links,
-  api,
-  toasts,
   onUpdate,
   value,
   onFlyoutOpen,
@@ -29,9 +26,6 @@ export const ProcessorsEditorContextProvider: FunctionComponent<Props> = ({
     <TestConfigContextProvider>
       <PipelineProcessorsContextProvider
         onFlyoutOpen={onFlyoutOpen}
-        links={links}
-        api={api}
-        toasts={toasts}
         onUpdate={onUpdate}
         value={value}
       >

diff --git a/...s/public/application/components/pipeline_processors_editor/context/processors_context.tsx b/...s/public/application/components/pipeline_processors_editor/context/processors_context.tsx
@@ -15,10 +15,7 @@ import React, {
   useRef,
 } from 'react';
 
-import { NotificationsSetup } from 'src/core/public';
-
 import { Processor } from '../../../../../common/types';
-import { ApiService } from '../../../services';
 
 import {
   EditorMode,
@@ -27,7 +24,6 @@ import {
   OnUpdateHandlerArg,
   ContextValue,
   ContextValueState,
-  Links,
   ProcessorInternal,
 } from '../types';
 
@@ -51,9 +47,6 @@ import { getValue } from '../utils';
 const PipelineProcessorsContext = createContext<ContextValue>({} as any);
 
 export interface Props {
-  links: Links;
-  api: ApiService;
-  toasts: NotificationsSetup['toasts'];
   value: {
     processors: Processor[];
     onFailure?: Processor[];
@@ -66,9 +59,6 @@ export interface Props {
 }
 
 export const PipelineProcessorsContextProvider: FunctionComponent<Props> = ({
-  links,
-  api,
-  toasts,
   value: { processors: originalProcessors, onFailure: originalOnFailureProcessors },
   onUpdate,
   onFlyoutOpen,
@@ -211,9 +201,6 @@ export const PipelineProcessorsContextProvider: FunctionComponent<Props> = ({
   return (
     <PipelineProcessorsContext.Provider
       value={{
-        links,
-        api,
-        toasts,
         onTreeAction,
         state,
       }}

diff --git a/...lugins/ingest_pipelines/public/application/components/pipeline_processors_editor/types.ts b/...lugins/ingest_pipelines/public/application/components/pipeline_processors_editor/types.ts
@@ -5,17 +5,11 @@
  */
 
 import { Dispatch } from 'react';
-import { NotificationsSetup } from 'src/core/public';
 import { OnFormUpdateArg } from '../../../shared_imports';
-import { ApiService } from '../../services';
 import { SerializeResult } from './serialize';
 import { OnActionHandler, ProcessorInfo } from './components';
 import { ProcessorsDispatch, State as ProcessorsReducerState } from './processors_reducer';
 
-export interface Links {
-  esDocsBasePath: string;
-}
-
 /**
  * An array of keys that map to a value in an object
  * structure.
@@ -76,9 +70,6 @@ export interface ContextValueState {
 }
 
 export interface ContextValue {
-  links: Links;
-  toasts: NotificationsSetup['toasts'];
-  api: ApiService;
   onTreeAction: OnActionHandler;
   state: ContextValueState;
 }