[ML] Introduces useNavigateToPath().

x-pack/plugins/ml/public/application/contexts/kibana/index.ts

@@ -5,6 +5,7 @@
  */
 
 export { useMlKibana, StartServices, MlKibanaReactContextValue } from './kibana_context';
+export { useNavigateToPath, NavigateToPath } from './use_navigate_to_path';
 export { useUiSettings } from './use_ui_settings_context';
 export { useTimefilter } from './use_timefilter';
 export { useNotifications } from './use_notifications_context';

x-pack/plugins/ml/public/application/contexts/kibana/use_navigate_to_path.ts

@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+
+import { PLUGIN_ID } from '../../../../common/constants/app';
+
+import { useMlKibana } from './kibana_context';
+
+export type NavigateToPath = ReturnType<typeof useNavigateToPath>;
+
+export const useNavigateToPath = () => {
+  const {
+    services: {
+      application: { getUrlForApp, navigateToUrl },
+    },
+  } = useMlKibana();
+
+  return (path: string | undefined) => navigateToUrl(getUrlForApp(PLUGIN_ID, { path }));
+};

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx

@@ -7,17 +7,13 @@
 import React, { FC, Fragment } from 'react';
 import { EuiCard, EuiHorizontalRule, EuiIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { useMlKibana } from '../../../../../contexts/kibana';
+import { useNavigateToPath } from '../../../../../contexts/kibana';
 
 export const BackToListPanel: FC = () => {
-  const {
-    services: {
-      application: { navigateToUrl },
-    },
-  } = useMlKibana();
+  const navigateToPath = useNavigateToPath();
 
   const redirectToAnalyticsManagementPage = async () => {
-    await navigateToUrl('#/data_frame_analytics?');
+    await navigateToPath('/data_frame_analytics');
   };
 
   return (

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_clone/clone_button.tsx

@@ -13,7 +13,7 @@ import { DeepReadonly } from '../../../../../../../common/types/common';
 import { DataFrameAnalyticsConfig, isOutlierAnalysis } from '../../../../common';
 import { isClassificationAnalysis, isRegressionAnalysis } from '../../../../common/analytics';
 import { DEFAULT_RESULTS_FIELD } from '../../../../common/constants';
-import { useMlKibana } from '../../../../../contexts/kibana';
+import { useMlKibana, useNavigateToPath } from '../../../../../contexts/kibana';
 import {
   CreateAnalyticsFormProps,
   DEFAULT_NUM_TOP_FEATURE_IMPORTANCE_VALUES,
@@ -350,11 +350,11 @@ export function getCloneAction(createAnalyticsForm: CreateAnalyticsFormProps) {
 export const useNavigateToWizardWithClonedJob = () => {
   const {
     services: {
-      application: { navigateToUrl },
       notifications: { toasts },
       savedObjects,
     },
   } = useMlKibana();
+  const navigateToPath = useNavigateToPath();
 
   const savedObjectsClient = savedObjects.client;
 
@@ -395,8 +395,8 @@ export const useNavigateToWizardWithClonedJob = () => {
     }
 
     if (sourceIndexId) {
-      await navigateToUrl(
-        `ml#/data_frame_analytics/new_job?index=${encodeURIComponent(sourceIndexId)}&jobId=${
+      await navigateToPath(
+        `/data_frame_analytics/new_job?index=${encodeURIComponent(sourceIndexId)}&jobId=${
           item.config.id
         }`
       );

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_view/get_view_action.tsx

@@ -12,11 +12,9 @@ import { DataFrameAnalyticsListRow } from '../analytics_list/common';
 
 import { ViewButton } from './view_button';
 
-export const getViewAction = (
-  isManagementTable: boolean = false
-): EuiTableActionsColumnType<DataFrameAnalyticsListRow>['actions'][number] => ({
+export const getViewAction = (): EuiTableActionsColumnType<
+  DataFrameAnalyticsListRow
+>['actions'][number] => ({
   isPrimary: true,
-  render: (item: DataFrameAnalyticsListRow) => (
-    <ViewButton item={item} isManagementTable={isManagementTable} />
-  ),
+  render: (item: DataFrameAnalyticsListRow) => <ViewButton item={item} />,
 });

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_view/view_button.tsx

@@ -14,32 +14,24 @@ import {
   isOutlierAnalysis,
   isClassificationAnalysis,
 } from '../../../../common/analytics';
-import { useMlKibana } from '../../../../../contexts/kibana';
+import { useNavigateToPath } from '../../../../../contexts/kibana';
 
 import { getResultsUrl, DataFrameAnalyticsListRow } from '../analytics_list/common';
 
 interface ViewButtonProps {
   item: DataFrameAnalyticsListRow;
-  isManagementTable: boolean;
 }
 
-export const ViewButton: FC<ViewButtonProps> = ({ item, isManagementTable }) => {
-  const {
-    services: {
-      application: { navigateToUrl, navigateToApp },
-    },
-  } = useMlKibana();
+export const ViewButton: FC<ViewButtonProps> = ({ item }) => {
+  const navigateToPath = useNavigateToPath();
 
   const analysisType = getAnalysisType(item.config.analysis);
   const buttonDisabled =
     !isRegressionAnalysis(item.config.analysis) &&
     !isOutlierAnalysis(item.config.analysis) &&
     !isClassificationAnalysis(item.config.analysis);
 
-  const url = getResultsUrl(item.id, analysisType);
-  const navigator = isManagementTable
-    ? () => navigateToApp('ml', { path: url })
-    : () => navigateToUrl(url);
+  const onClickHandler = () => navigateToPath(getResultsUrl(item.id, analysisType));
 
   const buttonText = i18n.translate('xpack.ml.dataframe.analyticsList.viewActionName', {
     defaultMessage: 'View',
@@ -53,7 +45,7 @@ export const ViewButton: FC<ViewButtonProps> = ({ item, isManagementTable }) =>
       flush="left"
       iconType="visTable"
       isDisabled={buttonDisabled}
-      onClick={navigator}
+      onClick={onClickHandler}
       size="s"
     >
       {buttonText}

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_actions.tsx

@@ -43,7 +43,7 @@ export const useActions = (
   let modals: JSX.Element | null = null;
 
   const actions: EuiTableActionsColumnType<DataFrameAnalyticsListRow>['actions'] = [
-    getViewAction(isManagementTable),
+    getViewAction(),
   ];
 
   // isManagementTable will be the same for the lifecycle of the component

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/source_selection/source_selection.tsx

@@ -17,7 +17,7 @@ import {
 } from '@elastic/eui';
 
 import { SavedObjectFinderUi } from '../../../../../../../../../../src/plugins/saved_objects/public';
-import { useMlKibana } from '../../../../../contexts/kibana';
+import { useMlKibana, useNavigateToPath } from '../../../../../contexts/kibana';
 
 const fixedPageSize: number = 8;
 
@@ -27,16 +27,13 @@ interface Props {
 
 export const SourceSelection: FC<Props> = ({ onClose }) => {
   const {
-    services: {
-      application: { navigateToUrl },
-      savedObjects,
-      uiSettings,
-    },
+    services: { savedObjects, uiSettings },
   } = useMlKibana();
+  const navigateToPath = useNavigateToPath();
 
   const onSearchSelected = async (id: string, type: string) => {
-    await navigateToUrl(
-      `ml#/data_frame_analytics/new_job?${
+    await navigateToPath(
+      `/data_frame_analytics/new_job?${
         type === 'index-pattern' ? 'index' : 'savedSearchId'
       }=${encodeURIComponent(id)}`
     );

x-pack/plugins/ml/public/application/jobs/new_job/common/job_creator/util/general.ts

@@ -6,10 +6,9 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { ApplicationStart } from 'kibana/public';
-
 import { Job, Datafeed, Detector } from '../../../../../../../common/types/anomaly_detection_jobs';
 import { newJobCapsService } from '../../../../../services/new_job_capabilities_service';
+import { NavigateToPath } from '../../../../../contexts/kibana';
 import {
   ML_JOB_AGGREGATION,
   SPARSE_DATA_AGGREGATIONS,
@@ -261,10 +260,7 @@ export function convertToMultiMetricJob(jobCreator: JobCreatorType) {
   );
 }
 
-export function convertToAdvancedJob(
-  jobCreator: JobCreatorType,
-  { getUrlForApp, navigateToUrl }: ApplicationStart
-) {
+export function convertToAdvancedJob(jobCreator: JobCreatorType, navigateToPath: NavigateToPath) {
   jobCreator.createdBy = null;
   stashCombinedJob(jobCreator, true, true);
 
@@ -277,27 +273,18 @@ export function convertToAdvancedJob(
     jobType = JOB_TYPE.CATEGORIZATION;
   }
 
-  navigateToUrl(
-    getUrlForApp('ml', { path: window.location.href.replace(jobType, JOB_TYPE.ADVANCED) })
-  );
+  navigateToPath(window.location.href.replace(jobType, JOB_TYPE.ADVANCED));
 }
 
-export function resetJob(
-  jobCreator: JobCreatorType,
-  { getUrlForApp, navigateToUrl }: ApplicationStart
-) {
+export function resetJob(jobCreator: JobCreatorType, navigateToPath: NavigateToPath) {
   jobCreator.jobId = '';
   stashCombinedJob(jobCreator, true, true);
-
-  navigateToUrl(getUrlForApp('ml', { path: '/jobs/new_job' }));
+  navigateToPath('/jobs/new_job');
 }
 
-export function advancedStartDatafeed(
-  jobCreator: JobCreatorType,
-  { getUrlForApp, navigateToUrl }: ApplicationStart
-) {
+export function advancedStartDatafeed(jobCreator: JobCreatorType, navigateToPath: NavigateToPath) {
   stashCombinedJob(jobCreator, false, false);
-  navigateToUrl(getUrlForApp('ml', { path: '/jobs' }));
+  navigateToPath('/jobs');
 }
 
 export function aggFieldPairsCanBeCharted(afs: AggFieldPair[]) {

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/summary_step/summary.tsx

@@ -15,7 +15,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { useMlKibana } from '../../../../../contexts/kibana';
+import { useMlKibana, useNavigateToPath } from '../../../../../contexts/kibana';
 import { PreviousButton } from '../wizard_nav';
 import { WIZARD_STEPS, StepProps } from '../step_types';
 import { JobCreatorContext } from '../job_creator_context';
@@ -40,8 +40,11 @@ import { JobSectionTitle, DatafeedSectionTitle } from './components/common';
 
 export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) => {
   const {
-    services: { application, notifications },
+    services: { notifications },
   } = useMlKibana();
+
+  const navigateToPath = useNavigateToPath();
+
   const { jobCreator, jobValidator, jobValidatorUpdated, resultsLoader } = useContext(
     JobCreatorContext
   );
@@ -87,7 +90,7 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
     try {
       await jobCreator.createJob();
       await jobCreator.createDatafeed();
-      advancedStartDatafeed(jobCreator, application);
+      advancedStartDatafeed(jobCreator, navigateToPath);
     } catch (error) {
       // catch and display all job creation errors
       const { toasts } = notifications;
@@ -112,11 +115,11 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
   }
 
   function clickResetJob() {
-    resetJob(jobCreator, application);
+    resetJob(jobCreator, navigateToPath);
   }
 
   const convertToAdvanced = () => {
-    convertToAdvancedJob(jobCreator, application);
+    convertToAdvancedJob(jobCreator, navigateToPath);
   };
 
   useEffect(() => {

x-pack/plugins/ml/public/application/jobs/new_job/pages/job_type/page.tsx

@@ -18,7 +18,7 @@ import {
   EuiLink,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { useMlKibana } from '../../../../contexts/kibana';
+import { useNavigateToPath } from '../../../../contexts/kibana';
 import { useMlContext } from '../../../../contexts/ml';
 import { isSavedSearchSavedObject } from '../../../../../../common/types/kibana';
 import { DataRecognizer } from '../../../../components/data_recognizer';
@@ -28,12 +28,9 @@ import { CreateJobLinkCard } from '../../../../components/create_job_link_card';
 import { CategorizationIcon } from './categorization_job_icon';
 
 export const Page: FC = () => {
-  const {
-    services: {
-      application: { getUrlForApp, navigateToUrl },
-    },
-  } = useMlKibana();
   const mlContext = useMlContext();
+  const navigateToPath = useNavigateToPath();
+
   const [recognizerResultsCount, setRecognizerResultsCount] = useState(0);
 
   const { currentSavedSearch, currentIndexPattern } = mlContext;
@@ -80,16 +77,12 @@ export const Page: FC = () => {
       : `?savedSearchId=${currentSavedSearch.id}`;
   };
 
-  const navigateToPath = (path: string | undefined) =>
-    navigateToUrl(getUrlForApp('ml', { path: `${path}${getUrlParams()}` }));
-
   const addSelectionToRecentlyAccessed = () => {
     const title = !isSavedSearchSavedObject(currentSavedSearch)
       ? currentIndexPattern.title
       : (currentSavedSearch.attributes.title as string);
-    const url = getUrlForApp('ml', { path: '' });
-    addItemToRecentlyAccessed('jobs/new_job/datavisualizer', title, url);
-    navigateToPath('/jobs/new_job/datavisualizer');
+    addItemToRecentlyAccessed('jobs/new_job/datavisualizer', title, '');
+    navigateToPath(`/jobs/new_job/datavisualizer${getUrlParams()}`);
   };
 
   const jobTypes = [

x-pack/plugins/ml/public/application/routing/breadcrumbs.ts

@@ -8,7 +8,9 @@ import { EuiBreadcrumb } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 
-import { ApplicationStart, ChromeBreadcrumb } from 'kibana/public';
+import { ChromeBreadcrumb } from 'kibana/public';
+
+import { NavigateToPath } from '../contexts/kibana';
 
 export const ML_BREADCRUMB: ChromeBreadcrumb = Object.freeze({
   text: i18n.translate('xpack.ml.machineLearningBreadcrumbLabel', {
@@ -64,20 +66,20 @@ type Breadcrumb = keyof typeof breadcrumbs;
 
 export const breadcrumbOnClickFactory = (
   path: string | undefined,
-  { getUrlForApp, navigateToUrl }: ApplicationStart
+  navigateToPath: NavigateToPath
 ): EuiBreadcrumb['onClick'] => {
   return (e) => {
     e.preventDefault();
-    navigateToUrl(getUrlForApp('ml', { path }));
+    navigateToPath(path);
   };
 };
 
 export const getBreadcrumbWithUrlForApp = (
   breadcrumbName: Breadcrumb,
-  application: ApplicationStart
+  navigateToPath: NavigateToPath
 ): EuiBreadcrumb => {
   return {
     ...breadcrumbs[breadcrumbName],
-    onClick: breadcrumbOnClickFactory(breadcrumbs[breadcrumbName].href, application),
+    onClick: breadcrumbOnClickFactory(breadcrumbs[breadcrumbName].href, navigateToPath),
   };
 };