[ML] Migrate to React BrowserRouter and Kibana provided History.

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

@@ -25,6 +25,7 @@ export type MlDependencies = Omit<MlSetupDependencies, 'share'> & MlStartDepende
 interface AppProps {
   coreStart: CoreStart;
   deps: MlDependencies;
+  appMountParams: AppMountParameters;
 }
 
 const localStorage = new Storage(window.localStorage);
@@ -46,8 +47,9 @@ export interface MlServicesContext {
 
 export type MlGlobalServices = ReturnType<typeof getMlGlobalServices>;
 
-const App: FC<AppProps> = ({ coreStart, deps }) => {
+const App: FC<AppProps> = ({ coreStart, deps, appMountParams }) => {
   const pageDeps = {
+    history: appMountParams.history,
     indexPatterns: deps.data.indexPatterns,
     config: coreStart.uiSettings!,
     setBreadcrumbs: coreStart.chrome!.setBreadcrumbs,
@@ -104,7 +106,11 @@ export const renderApp = (
   appMountParams.onAppLeave((actions) => actions.default());
 
   const mlLicense = setLicenseCache(deps.licensing, [
-    () => ReactDOM.render(<App coreStart={coreStart} deps={deps} />, appMountParams.element),
+    () =>
+      ReactDOM.render(
+        <App coreStart={coreStart} deps={deps} appMountParams={appMountParams} />,
+        appMountParams.element
+      ),
   ]);
 
   return () => {

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

@@ -5,6 +5,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 {
@@ -258,7 +261,10 @@ export function convertToMultiMetricJob(jobCreator: JobCreatorType) {
   );
 }
 
-export function convertToAdvancedJob(jobCreator: JobCreatorType) {
+export function convertToAdvancedJob(
+  jobCreator: JobCreatorType,
+  { getUrlForApp, navigateToUrl }: ApplicationStart
+) {
   jobCreator.createdBy = null;
   stashCombinedJob(jobCreator, true, true);
 
@@ -271,19 +277,27 @@ export function convertToAdvancedJob(jobCreator: JobCreatorType) {
     jobType = JOB_TYPE.CATEGORIZATION;
   }
 
-  window.location.href = window.location.href.replace(jobType, JOB_TYPE.ADVANCED);
+  navigateToUrl(
+    getUrlForApp('ml', { path: window.location.href.replace(jobType, JOB_TYPE.ADVANCED) })
+  );
 }
 
-export function resetJob(jobCreator: JobCreatorType) {
+export function resetJob(
+  jobCreator: JobCreatorType,
+  { getUrlForApp, navigateToUrl }: ApplicationStart
+) {
   jobCreator.jobId = '';
   stashCombinedJob(jobCreator, true, true);
 
-  window.location.href = '#/jobs/new_job';
+  navigateToUrl(getUrlForApp('ml', { path: '/jobs/new_job' }));
 }
 
-export function advancedStartDatafeed(jobCreator: JobCreatorType) {
+export function advancedStartDatafeed(
+  jobCreator: JobCreatorType,
+  { getUrlForApp, navigateToUrl }: ApplicationStart
+) {
   stashCombinedJob(jobCreator, false, false);
-  window.location.href = '#/jobs';
+  navigateToUrl(getUrlForApp('ml', { path: '/jobs' }));
 }
 
 export function aggFieldPairsCanBeCharted(afs: AggFieldPair[]) {

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

@@ -40,7 +40,7 @@ import { JobSectionTitle, DatafeedSectionTitle } from './components/common';
 
 export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) => {
   const {
-    services: { notifications },
+    services: { application, notifications },
   } = useMlKibana();
   const { jobCreator, jobValidator, jobValidatorUpdated, resultsLoader } = useContext(
     JobCreatorContext
@@ -87,7 +87,7 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
     try {
       await jobCreator.createJob();
       await jobCreator.createDatafeed();
-      advancedStartDatafeed(jobCreator);
+      advancedStartDatafeed(jobCreator, application);
     } catch (error) {
       // catch and display all job creation errors
       const { toasts } = notifications;
@@ -112,11 +112,11 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
   }
 
   function clickResetJob() {
-    resetJob(jobCreator);
+    resetJob(jobCreator, application);
   }
 
   const convertToAdvanced = () => {
-    convertToAdvancedJob(jobCreator);
+    convertToAdvancedJob(jobCreator, application);
   };
 
   useEffect(() => {

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

@@ -18,6 +18,7 @@ import {
   EuiLink,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { useMlKibana } from '../../../../contexts/kibana';
 import { useMlContext } from '../../../../contexts/ml';
 import { isSavedSearchSavedObject } from '../../../../../../common/types/kibana';
 import { DataRecognizer } from '../../../../components/data_recognizer';
@@ -27,6 +28,11 @@ 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 [recognizerResultsCount, setRecognizerResultsCount] = useState(0);
 
@@ -68,25 +74,27 @@ export const Page: FC = () => {
     },
   };
 
-  const getUrl = (basePath: string) => {
+  const getUrlParams = () => {
     return !isSavedSearchSavedObject(currentSavedSearch)
-      ? `${basePath}?index=${currentIndexPattern.id}`
-      : `${basePath}?savedSearchId=${currentSavedSearch.id}`;
+      ? `?index=${currentIndexPattern.id}`
+      : `?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 = getUrl('');
+    const url = getUrlForApp('ml', { path: '' });
     addItemToRecentlyAccessed('jobs/new_job/datavisualizer', title, url);
-
-    window.location.href = getUrl('#jobs/new_job/datavisualizer');
+    navigateToPath('/jobs/new_job/datavisualizer');
   };
 
   const jobTypes = [
     {
-      href: getUrl('#jobs/new_job/single_metric'),
+      onClick: () => navigateToPath('/jobs/new_job/single_metric'),
       icon: {
         type: 'createSingleMetricJob',
         ariaLabel: i18n.translate('xpack.ml.newJob.wizard.jobType.singleMetricAriaLabel', {
@@ -102,7 +110,7 @@ export const Page: FC = () => {
       id: 'mlJobTypeLinkSingleMetricJob',
     },
     {
-      href: getUrl('#jobs/new_job/multi_metric'),
+      onClick: () => navigateToPath('/jobs/new_job/multi_metric'),
       icon: {
         type: 'createMultiMetricJob',
         ariaLabel: i18n.translate('xpack.ml.newJob.wizard.jobType.multiMetricAriaLabel', {
@@ -119,7 +127,7 @@ export const Page: FC = () => {
       id: 'mlJobTypeLinkMultiMetricJob',
     },
     {
-      href: getUrl('#jobs/new_job/population'),
+      onClick: () => navigateToPath('/jobs/new_job/population'),
       icon: {
         type: 'createPopulationJob',
         ariaLabel: i18n.translate('xpack.ml.newJob.wizard.jobType.populationAriaLabel', {
@@ -136,7 +144,7 @@ export const Page: FC = () => {
       id: 'mlJobTypeLinkPopulationJob',
     },
     {
-      href: getUrl('#jobs/new_job/advanced'),
+      onClick: () => navigateToPath('/jobs/new_job/advanced'),
       icon: {
         type: 'createAdvancedJob',
         ariaLabel: i18n.translate('xpack.ml.newJob.wizard.jobType.advancedAriaLabel', {
@@ -153,7 +161,7 @@ export const Page: FC = () => {
       id: 'mlJobTypeLinkAdvancedJob',
     },
     {
-      href: getUrl('#jobs/new_job/categorization'),
+      onClick: () => navigateToPath('/jobs/new_job/categorization'),
       icon: {
         type: CategorizationIcon,
         ariaLabel: i18n.translate('xpack.ml.newJob.wizard.jobType.categorizationAriaLabel', {
@@ -247,11 +255,11 @@ export const Page: FC = () => {
         <EuiSpacer size="m" />
 
         <EuiFlexGrid gutterSize="l" columns={4}>
-          {jobTypes.map(({ href, icon, title, description, id }) => (
+          {jobTypes.map(({ onClick, icon, title, description, id }) => (
             <EuiFlexItem key={id}>
               <CreateJobLinkCard
                 data-test-subj={id}
-                href={href}
+                onClick={onClick}
                 icon={icon.type}
                 iconAreaLabel={icon.ariaLabel}
                 title={title}
@@ -307,7 +315,6 @@ export const Page: FC = () => {
                 />
               }
               onClick={addSelectionToRecentlyAccessed}
-              href={getUrl('#jobs/new_job/datavisualizer')}
             />
           </EuiFlexItem>
         </EuiFlexGrid>

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

@@ -4,47 +4,80 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiBreadcrumb } from '@elastic/eui';
+
 import { i18n } from '@kbn/i18n';
-import { ChromeBreadcrumb } from 'kibana/public';
+
+import { ApplicationStart, ChromeBreadcrumb } from 'kibana/public';
 
 export const ML_BREADCRUMB: ChromeBreadcrumb = Object.freeze({
   text: i18n.translate('xpack.ml.machineLearningBreadcrumbLabel', {
     defaultMessage: 'Machine Learning',
   }),
-  href: '#/',
+  href: '/',
 });
 
-export const SETTINGS: ChromeBreadcrumb = Object.freeze({
+export const SETTINGS_BREADCRUMB: ChromeBreadcrumb = Object.freeze({
   text: i18n.translate('xpack.ml.settingsBreadcrumbLabel', {
     defaultMessage: 'Settings',
   }),
-  href: '#/settings',
+  href: '/settings',
 });
 
 export const ANOMALY_DETECTION_BREADCRUMB: ChromeBreadcrumb = Object.freeze({
   text: i18n.translate('xpack.ml.anomalyDetectionBreadcrumbLabel', {
     defaultMessage: 'Anomaly Detection',
   }),
-  href: '#/jobs',
+  href: '/jobs',
 });
 
 export const DATA_FRAME_ANALYTICS_BREADCRUMB: ChromeBreadcrumb = Object.freeze({
   text: i18n.translate('xpack.ml.dataFrameAnalyticsLabel', {
     defaultMessage: 'Data Frame Analytics',
   }),
-  href: '#/data_frame_analytics',
+  href: '/data_frame_analytics',
 });
 
 export const DATA_VISUALIZER_BREADCRUMB: ChromeBreadcrumb = Object.freeze({
   text: i18n.translate('xpack.ml.datavisualizerBreadcrumbLabel', {
     defaultMessage: 'Data Visualizer',
   }),
-  href: '#/datavisualizer',
+  href: '/datavisualizer',
 });
 
 export const CREATE_JOB_BREADCRUMB: ChromeBreadcrumb = Object.freeze({
   text: i18n.translate('xpack.ml.createJobsBreadcrumbLabel', {
     defaultMessage: 'Create job',
   }),
-  href: '#/jobs/new_job',
+  href: '/jobs/new_job',
 });
+
+const breadcrumbs = {
+  ML_BREADCRUMB,
+  SETTINGS_BREADCRUMB,
+  ANOMALY_DETECTION_BREADCRUMB,
+  DATA_FRAME_ANALYTICS_BREADCRUMB,
+  DATA_VISUALIZER_BREADCRUMB,
+  CREATE_JOB_BREADCRUMB,
+};
+type Breadcrumb = keyof typeof breadcrumbs;
+
+export const breadcrumbOnClickFactory = (
+  path: string | undefined,
+  { getUrlForApp, navigateToUrl }: ApplicationStart
+): EuiBreadcrumb['onClick'] => {
+  return (e) => {
+    e.preventDefault();
+    navigateToUrl(getUrlForApp('ml', { path }));
+  };
+};
+
+export const getBreadcrumbWithUrlForApp = (
+  breadcrumbName: Breadcrumb,
+  application: ApplicationStart
+): EuiBreadcrumb => {
+  return {
+    ...breadcrumbs[breadcrumbName],
+    onClick: breadcrumbOnClickFactory(breadcrumbs[breadcrumbName].href, application),
+  };
+};