[Canvas] Switch Canvas to use React Router (#100579)

* Switch Canvas to use React Router

* Fix typescript errors

* Remove @scant/router from package.json

* Fix tests

* Fix functional test

* Fix functional tests

* Fix bad merge in package.json

* Cleanup from code review comments

* Fix double basepath append

Co-authored-by: Kibana Machine <[email protected]>

package.json

@@ -128,20 +128,21 @@
     "@kbn/config": "link:bazel-bin/packages/kbn-config/npm_module",
     "@kbn/config-schema": "link:bazel-bin/packages/kbn-config-schema/npm_module",
     "@kbn/crypto": "link:bazel-bin/packages/kbn-crypto/npm_module",
-    "@kbn/mapbox-gl": "link:bazel-bin/packages/kbn-mapbox-gl/npm_module",
     "@kbn/i18n": "link:bazel-bin/packages/kbn-i18n/npm_module",
     "@kbn/interpreter": "link:packages/kbn-interpreter",
     "@kbn/io-ts-utils": "link:bazel-bin/packages/kbn-io-ts-utils/npm_module",
     "@kbn/legacy-logging": "link:bazel-bin/packages/kbn-legacy-logging/npm_module",
     "@kbn/logging": "link:bazel-bin/packages/kbn-logging/npm_module",
+    "@kbn/mapbox-gl": "link:bazel-bin/packages/kbn-mapbox-gl/npm_module",
     "@kbn/monaco": "link:bazel-bin/packages/kbn-monaco/npm_module",
-    "@kbn/securitysolution-list-constants": "link:bazel-bin/packages/kbn-securitysolution-list-constants/npm_module",
+    "@kbn/rule-data-utils": "link:packages/kbn-rule-data-utils",
     "@kbn/securitysolution-es-utils": "link:bazel-bin/packages/kbn-securitysolution-es-utils/npm_module",
-    "@kbn/securitysolution-io-ts-types": "link:bazel-bin/packages/kbn-securitysolution-io-ts-types/npm_module",
     "@kbn/securitysolution-io-ts-alerting-types": "link:bazel-bin/packages/kbn-securitysolution-io-ts-alerting-types/npm_module",
     "@kbn/securitysolution-io-ts-list-types": "link:bazel-bin/packages/kbn-securitysolution-io-ts-list-types/npm_module",
+    "@kbn/securitysolution-io-ts-types": "link:bazel-bin/packages/kbn-securitysolution-io-ts-types/npm_module",
     "@kbn/securitysolution-io-ts-utils": "link:bazel-bin/packages/kbn-securitysolution-io-ts-utils/npm_module",
     "@kbn/securitysolution-list-api": "link:bazel-bin/packages/kbn-securitysolution-list-api/npm_module",
+    "@kbn/securitysolution-list-constants": "link:bazel-bin/packages/kbn-securitysolution-list-constants/npm_module",
     "@kbn/securitysolution-list-hooks": "link:bazel-bin/packages/kbn-securitysolution-list-hooks/npm_module",
     "@kbn/securitysolution-list-utils": "link:bazel-bin/packages/kbn-securitysolution-list-utils/npm_module",
     "@kbn/securitysolution-utils": "link:bazel-bin/packages/kbn-securitysolution-utils/npm_module",
@@ -160,7 +161,6 @@
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mapbox/vector-tile": "1.3.1",
     "@reduxjs/toolkit": "^1.5.1",
-    "@scant/router": "^0.1.1",
     "@slack/webhook": "^5.0.4",
     "@turf/along": "6.0.1",
     "@turf/area": "6.0.1",
@@ -273,7 +273,6 @@
     "json-stringify-safe": "5.0.1",
     "jsonwebtoken": "^8.5.1",
     "jsts": "^1.6.2",
-    "@kbn/rule-data-utils": "link:packages/kbn-rule-data-utils",
     "kea": "^2.4.2",
     "leaflet": "1.5.1",
     "leaflet-draw": "0.4.14",

x-pack/plugins/canvas/i18n/components.ts

@@ -175,6 +175,12 @@ export const ComponentStrings = {
         defaultMessage: 'Asset thumbnail',
       }),
   },
+  CanvasLoading: {
+    getLoadingLabel: () =>
+      i18n.translate('xpack.canvas.canvasLoading.loadingMessage', {
+        defaultMessage: 'Loading',
+      }),
+  },
   ColorManager: {
     getAddAriaLabel: () =>
       i18n.translate('xpack.canvas.colorManager.addAriaLabel', {
@@ -1384,6 +1390,14 @@ export const ComponentStrings = {
       i18n.translate('xpack.canvas.workpadHeaderKioskControl.controlTitle', {
         defaultMessage: 'Cycle fullscreen pages',
       }),
+    getAutoplayListDurationManualText: () =>
+      i18n.translate('xpack.canvas.workpadHeaderKioskControl.autoplayListDurationManual', {
+        defaultMessage: 'Manually',
+      }),
+    getDisableTooltip: () =>
+      i18n.translate('xpack.canvas.workpadHeaderKioskControl.disableTooltip', {
+        defaultMessage: 'Disable auto-play',
+      }),
   },
   WorkpadHeaderRefreshControlSettings: {
     getRefreshAriaLabel: () =>

x-pack/plugins/canvas/public/application.tsx

@@ -18,7 +18,6 @@ import { includes, remove } from 'lodash';
 import { AppMountParameters, CoreStart, CoreSetup, AppUpdater } from 'kibana/public';
 
 import { CanvasStartDeps, CanvasSetupDeps } from './plugin';
-// @ts-expect-error untyped local
 import { App } from './components/app';
 import { KibanaContextProvider } from '../../../../src/plugins/kibana_react/public';
 import { registerLanguage } from './lib/monaco_language_def';
@@ -32,10 +31,6 @@ import { init as initStatsReporter } from './lib/ui_metric';
 import { CapabilitiesStrings } from '../i18n';
 
 import { startServices, services, ServicesProvider } from './services';
-// @ts-expect-error untyped local
-import { createHistory, destroyHistory } from './lib/history_provider';
-// @ts-expect-error untyped local
-import { stopRouter } from './lib/router_provider';
 import { initFunctions } from './functions';
 // @ts-expect-error untyped local
 import { appUnload } from './state/actions/app';
@@ -103,9 +98,6 @@ export const initializeCanvas = async (
     services.expressions.getService().registerFunction(fn);
   }
 
-  // Re-initialize our history
-  createHistory();
-
   // Create Store
   const canvasStore = await createStore(coreSetup, setupPlugins);
 
@@ -178,7 +170,4 @@ export const teardownCanvas = (coreStart: CoreStart, startPlugins: CanvasStartDe
 
   coreStart.chrome.setBadge(undefined);
   coreStart.chrome.setHelpExtension(undefined);
-
-  destroyHistory();
-  stopRouter();
 };