[Ingest Pipelines] Add url generator for ingest pipelines app (#77872) (

#78278)

* [Ingest Pipelines] Add url generator for ingest pipelines app

* [Ingest Pipelines] Fix type check error

* [Ingest Pipelines] Fix import errors

* [Ingest Pipelines] Fix type check errors

* [Ingest Pipelines] Fix type check errors

* [ILM] Update UrlGenerator interface, clean up internal navigation service

* [ILM] Fix function export

* [ILM] Update functions signatures

* [ILM] Fix errors

* [ILM] Fix errors

* [ILM] Rename ROUTES_CONFIG and export MANAGEMENT_APP_ID

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

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

src/plugins/management/common/contants.ts

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const MANAGEMENT_APP_ID = 'management';

src/plugins/management/public/index.ts

@@ -32,3 +32,5 @@ export {
   ManagementStart,
   DefinedSections,
 } from './types';
+
+export { MANAGEMENT_APP_ID } from '../common/contants';

src/plugins/management/public/plugin.ts

@@ -33,6 +33,7 @@ import {
   AppNavLinkStatus,
 } from '../../../core/public';
 
+import { MANAGEMENT_APP_ID } from '../common/contants';
 import {
   ManagementSectionsService,
   getSectionsServiceStartPrivate,
@@ -72,7 +73,7 @@ export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart
     }
 
     core.application.register({
-      id: 'management',
+      id: MANAGEMENT_APP_ID,
       title: i18n.translate('management.stackManagement.title', {
         defaultMessage: 'Stack Management',
       }),

x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipelines_clone.helpers.ts

@@ -5,10 +5,10 @@
  */
 
 import { registerTestBed, TestBedConfig, TestBed } from '../../../../../test_utils';
-import { BASE_PATH } from '../../../common/constants';
 import { PipelinesClone } from '../../../public/application/sections/pipelines_clone';
 import { getFormActions, PipelineFormTestSubjects } from './pipeline_form.helpers';
 import { WithAppDependencies } from './setup_environment';
+import { getClonePath, ROUTES } from '../../../public/application/services/navigation';
 
 export type PipelinesCloneTestBed = TestBed<PipelineFormTestSubjects> & {
   actions: ReturnType<typeof getFormActions>;
@@ -29,8 +29,8 @@ export const PIPELINE_TO_CLONE = {
 
 const testBedConfig: TestBedConfig = {
   memoryRouter: {
-    initialEntries: [`${BASE_PATH}create/${PIPELINE_TO_CLONE.name}`],
-    componentRoutePath: `${BASE_PATH}create/:name`,
+    initialEntries: [getClonePath({ clonedPipelineName: PIPELINE_TO_CLONE.name })],
+    componentRoutePath: ROUTES.clone,
   },
   doMountAsync: true,
 };

x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipelines_create.helpers.ts

@@ -5,19 +5,19 @@
  */
 
 import { registerTestBed, TestBedConfig, TestBed } from '../../../../../test_utils';
-import { BASE_PATH } from '../../../common/constants';
 import { PipelinesCreate } from '../../../public/application/sections/pipelines_create';
 import { getFormActions, PipelineFormTestSubjects } from './pipeline_form.helpers';
 import { WithAppDependencies } from './setup_environment';
+import { getCreatePath, ROUTES } from '../../../public/application/services/navigation';
 
 export type PipelinesCreateTestBed = TestBed<PipelineFormTestSubjects> & {
   actions: ReturnType<typeof getFormActions>;
 };
 
 const testBedConfig: TestBedConfig = {
   memoryRouter: {
-    initialEntries: [`${BASE_PATH}/create`],
-    componentRoutePath: `${BASE_PATH}/create`,
+    initialEntries: [getCreatePath()],
+    componentRoutePath: ROUTES.create,
   },
   doMountAsync: true,
 };

x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipelines_edit.helpers.ts

@@ -5,10 +5,10 @@
  */
 
 import { registerTestBed, TestBedConfig, TestBed } from '../../../../../test_utils';
-import { BASE_PATH } from '../../../common/constants';
 import { PipelinesEdit } from '../../../public/application/sections/pipelines_edit';
 import { getFormActions, PipelineFormTestSubjects } from './pipeline_form.helpers';
 import { WithAppDependencies } from './setup_environment';
+import { getEditPath, ROUTES } from '../../../public/application/services/navigation';
 
 export type PipelinesEditTestBed = TestBed<PipelineFormTestSubjects> & {
   actions: ReturnType<typeof getFormActions>;
@@ -29,8 +29,8 @@ export const PIPELINE_TO_EDIT = {
 
 const testBedConfig: TestBedConfig = {
   memoryRouter: {
-    initialEntries: [`${BASE_PATH}edit/${PIPELINE_TO_EDIT.name}`],
-    componentRoutePath: `${BASE_PATH}edit/:name`,
+    initialEntries: [getEditPath({ pipelineName: PIPELINE_TO_EDIT.name })],
+    componentRoutePath: ROUTES.edit,
   },
   doMountAsync: true,
 };

x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipelines_list.helpers.ts

@@ -6,7 +6,6 @@
 
 import { act } from 'react-dom/test-utils';
 
-import { BASE_PATH } from '../../../common/constants';
 import {
   registerTestBed,
   TestBed,
@@ -16,11 +15,12 @@ import {
 } from '../../../../../test_utils';
 import { PipelinesList } from '../../../public/application/sections/pipelines_list';
 import { WithAppDependencies } from './setup_environment';
+import { getListPath, ROUTES } from '../../../public/application/services/navigation';
 
 const testBedConfig: TestBedConfig = {
   memoryRouter: {
-    initialEntries: [BASE_PATH],
-    componentRoutePath: BASE_PATH,
+    initialEntries: [getListPath()],
+    componentRoutePath: ROUTES.list,
   },
   doMountAsync: true,
 };

x-pack/plugins/ingest_pipelines/common/constants.ts

@@ -9,9 +9,9 @@ const basicLicense: LicenseType = 'basic';
 
 export const PLUGIN_ID = 'ingest_pipelines';
 
-export const PLUGIN_MIN_LICENSE_TYPE = basicLicense;
+export const MANAGEMENT_APP_ID = 'management';
 
-export const BASE_PATH = '/';
+export const PLUGIN_MIN_LICENSE_TYPE = basicLicense;
 
 export const API_BASE_PATH = '/api/ingest_pipelines';
 

x-pack/plugins/ingest_pipelines/kibana.json

@@ -3,7 +3,7 @@
   "version": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["licensing", "management", "features"],
+  "requiredPlugins": ["licensing", "management", "features", "share"],
   "optionalPlugins": ["security", "usageCollection"],
   "configPath": ["xpack", "ingest_pipelines"],
   "requiredBundles": ["esUiShared", "kibanaReact"]

x-pack/plugins/ingest_pipelines/public/application/app.tsx

@@ -21,13 +21,14 @@ import {
 } from '../shared_imports';
 
 import { PipelinesList, PipelinesCreate, PipelinesEdit, PipelinesClone } from './sections';
+import { ROUTES } from './services/navigation';
 
 export const AppWithoutRouter = () => (
   <Switch>
-    <Route exact path="/" component={PipelinesList} />
-    <Route exact path={`/create/:sourceName`} component={PipelinesClone} />
-    <Route exact path={`/create`} component={PipelinesCreate} />
-    <Route exact path={`/edit/:name`} component={PipelinesEdit} />
+    <Route exact path={ROUTES.list} component={PipelinesList} />
+    <Route exact path={ROUTES.clone} component={PipelinesClone} />
+    <Route exact path={ROUTES.create} component={PipelinesCreate} />
+    <Route exact path={ROUTES.edit} component={PipelinesEdit} />
     {/* Catch all */}
     <Route component={PipelinesList} />
   </Switch>

x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create/pipelines_create.tsx

@@ -16,7 +16,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
-import { BASE_PATH } from '../../../../common/constants';
+import { getListPath } from '../../services/navigation';
 import { Pipeline } from '../../../../common/types';
 import { useKibana } from '../../../shared_imports';
 import { PipelineForm } from '../../components';
@@ -50,11 +50,11 @@ export const PipelinesCreate: React.FunctionComponent<RouteComponentProps & Prop
       return;
     }
 
-    history.push(BASE_PATH + `?pipeline=${encodeURIComponent(pipeline.name)}`);
+    history.push(getListPath({ inspectedPipelineName: pipeline.name }));
   };
 
   const onCancel = () => {
-    history.push(BASE_PATH);
+    history.push(getListPath());
   };
 
   useEffect(() => {

x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_edit/pipelines_edit.tsx

@@ -17,11 +17,11 @@ import {
 } from '@elastic/eui';
 
 import { EuiCallOut } from '@elastic/eui';
-import { BASE_PATH } from '../../../../common/constants';
 import { Pipeline } from '../../../../common/types';
 import { useKibana, SectionLoading } from '../../../shared_imports';
-import { PipelineForm } from '../../components';
 
+import { getListPath } from '../../services/navigation';
+import { PipelineForm } from '../../components';
 import { attemptToURIDecode } from '../shared';
 
 interface MatchParams {
@@ -56,11 +56,11 @@ export const PipelinesEdit: React.FunctionComponent<RouteComponentProps<MatchPar
       return;
     }
 
-    history.push(BASE_PATH + `?pipeline=${encodeURIComponent(updatedPipeline.name)}`);
+    history.push(getListPath({ inspectedPipelineName: updatedPipeline.name }));
   };
 
   const onCancel = () => {
-    history.push(BASE_PATH);
+    history.push(getListPath());
   };
 
   useEffect(() => {

x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/empty_list.tsx

@@ -11,6 +11,7 @@ import { useHistory } from 'react-router-dom';
 import { ScopedHistory } from 'kibana/public';
 import { reactRouterNavigate } from '../../../../../../../src/plugins/kibana_react/public';
 import { useKibana } from '../../../shared_imports';
+import { getCreatePath } from '../../services/navigation';
 
 export const EmptyList: FunctionComponent = () => {
   const { services } = useKibana();
@@ -44,7 +45,11 @@ export const EmptyList: FunctionComponent = () => {
             </p>
           }
           actions={
-            <EuiButton {...reactRouterNavigate(history, '/create')} iconType="plusInCircle" fill>
+            <EuiButton
+              {...reactRouterNavigate(history, getCreatePath())}
+              iconType="plusInCircle"
+              fill
+            >
               {i18n.translate('xpack.ingestPipelines.list.table.emptyPrompt.createButtonLabel', {
                 defaultMessage: 'Create a pipeline',
               })}

x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx

@@ -24,9 +24,9 @@ import {
 } from '@elastic/eui';
 
 import { Pipeline } from '../../../../common/types';
-import { BASE_PATH } from '../../../../common/constants';
 import { useKibana, SectionLoading } from '../../../shared_imports';
 import { UIM_PIPELINES_LIST_LOAD } from '../../constants';
+import { getEditPath, getClonePath, getListPath } from '../../services/navigation';
 
 import { EmptyList } from './empty_list';
 import { PipelineTable } from './table';
@@ -67,17 +67,17 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({
     }
   }, [pipelineNameFromLocation, data]);
 
-  const goToEditPipeline = (name: string) => {
-    history.push(`${BASE_PATH}/edit/${encodeURIComponent(name)}`);
+  const goToEditPipeline = (pipelineName: string) => {
+    history.push(getEditPath({ pipelineName }));
   };
 
-  const goToClonePipeline = (name: string) => {
-    history.push(`${BASE_PATH}/create/${encodeURIComponent(name)}`);
+  const goToClonePipeline = (clonedPipelineName: string) => {
+    history.push(getClonePath({ clonedPipelineName }));
   };
 
   const goHome = () => {
     setShowFlyout(false);
-    history.push(BASE_PATH);
+    history.push(getListPath());
   };
 
   if (data && data.length === 0) {

x-pack/plugins/ingest_pipelines/public/application/services/navigation.ts

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+const BASE_PATH = '/';
+
+const EDIT_PATH = 'edit';
+
+const CREATE_PATH = 'create';
+
+const _getEditPath = (name: string, encode = true): string => {
+  return `${BASE_PATH}${EDIT_PATH}/${encode ? encodeURIComponent(name) : name}`;
+};
+
+const _getCreatePath = (): string => {
+  return `${BASE_PATH}${CREATE_PATH}`;
+};
+
+const _getClonePath = (name: string, encode = true): string => {
+  return `${BASE_PATH}${CREATE_PATH}/${encode ? encodeURIComponent(name) : name}`;
+};
+const _getListPath = (name?: string): string => {
+  return `${BASE_PATH}${name ? `?pipeline=${encodeURIComponent(name)}` : ''}`;
+};
+
+export const ROUTES = {
+  list: _getListPath(),
+  edit: _getEditPath(':name', false),
+  create: _getCreatePath(),
+  clone: _getClonePath(':sourceName', false),
+};
+
+export const getListPath = ({
+  inspectedPipelineName,
+}: {
+  inspectedPipelineName?: string;
+} = {}): string => _getListPath(inspectedPipelineName);
+export const getEditPath = ({ pipelineName }: { pipelineName: string }): string =>
+  _getEditPath(pipelineName, true);
+export const getCreatePath = (): string => _getCreatePath();
+export const getClonePath = ({ clonedPipelineName }: { clonedPipelineName: string }): string =>
+  _getClonePath(clonedPipelineName, true);

x-pack/plugins/ingest_pipelines/public/index.ts

@@ -9,3 +9,10 @@ import { IngestPipelinesPlugin } from './plugin';
 export function plugin() {
   return new IngestPipelinesPlugin();
 }
+
+export {
+  INGEST_PIPELINES_APP_ULR_GENERATOR,
+  IngestPipelinesUrlGenerator,
+  IngestPipelinesUrlGeneratorState,
+  INGEST_PIPELINES_PAGES,
+} from './url_generator';

x-pack/plugins/ingest_pipelines/public/plugin.ts

@@ -10,10 +10,11 @@ import { CoreSetup, Plugin } from 'src/core/public';
 import { PLUGIN_ID } from '../common/constants';
 import { uiMetricService, apiService } from './application/services';
 import { Dependencies } from './types';
+import { registerUrlGenerator } from './url_generator';
 
 export class IngestPipelinesPlugin implements Plugin {
   public setup(coreSetup: CoreSetup, plugins: Dependencies): void {
-    const { management, usageCollection } = plugins;
+    const { management, usageCollection, share } = plugins;
     const { http, getStartServices } = coreSetup;
 
     // Initialize services
@@ -46,6 +47,8 @@ export class IngestPipelinesPlugin implements Plugin {
         };
       },
     });
+
+    registerUrlGenerator(coreSetup, management, share);
   }
 
   public start() {}

x-pack/plugins/ingest_pipelines/public/types.ts

@@ -6,8 +6,10 @@
 
 import { ManagementSetup } from 'src/plugins/management/public';
 import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
+import { SharePluginSetup } from '../../../../src/plugins/share/public';
 
 export interface Dependencies {
   management: ManagementSetup;
   usageCollection: UsageCollectionSetup;
+  share: SharePluginSetup;
 }