[triggersActions] app. Hash Router -> Router

Author: alexwizp

x-pack/plugins/apm/public/components/app/ServiceDetails/AlertIntegrations/index.tsx

@@ -82,7 +82,7 @@ export function AlertIntegrations(props: Props) {
                   }
                 ),
                 href: plugin.core.http.basePath.prepend(
-                  '/app/kibana#/management/insightsAndAlerting/triggersActions/alerts'
+                  '/app/management/insightsAndAlerting/triggersActions/alerts'
                 ),
                 icon: 'tableOfContents'
               }

x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_dropdown.tsx

@@ -35,7 +35,7 @@ export const MetricsAlertDropdown = () => {
         icon="tableOfContents"
         key="manageLink"
         href={kibana.services?.application?.getUrlForApp(
-          'kibana#/management/insightsAndAlerting/triggersActions/alerts'
+          'management/insightsAndAlerting/triggersActions/alerts'
         )}
       >
         <FormattedMessage id="xpack.infra.alerting.manageAlerts" defaultMessage="Manage alerts" />

x-pack/plugins/infra/public/components/alerting/inventory/alert_dropdown.tsx

@@ -35,7 +35,7 @@ export const InventoryAlertDropdown = () => {
         icon="tableOfContents"
         key="manageLink"
         href={kibana.services?.application?.getUrlForApp(
-          'kibana#/management/insightsAndAlerting/triggersActions/alerts'
+          'management/insightsAndAlerting/triggersActions/alerts'
         )}
       >
         <FormattedMessage id="xpack.infra.alerting.manageAlerts" defaultMessage="Manage alerts" />

x-pack/plugins/infra/public/components/alerting/logs/alert_dropdown.tsx

@@ -15,8 +15,8 @@ export const AlertDropdown = () => {
   const [flyoutVisible, setFlyoutVisible] = useState(false);
   const manageAlertsLinkProps = useLinkProps(
     {
-      app: 'kibana',
-      hash: 'management/insightsAndAlerting/triggersActions/alerts',
+      app: 'management',
+      pathname: '/insightsAndAlerting/triggersActions/alerts',
     },
     {
       hrefOnly: true,

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

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { lazy } from 'react';
-import { Switch, Route, Redirect, HashRouter } from 'react-router-dom';
+import { Switch, Route, Redirect, Router } from 'react-router-dom';
 import {
   ChromeStart,
   DocLinksStart,
@@ -14,8 +14,9 @@ import {
   ApplicationStart,
   ChromeBreadcrumb,
   CoreStart,
+  ScopedHistory,
 } from 'kibana/public';
-import { BASE_PATH, Section, routeToAlertDetails } from './constants';
+import { Section, routeToAlertDetails } from './constants';
 import { AppContextProvider, useAppDependencies } from './app_context';
 import { hasShowAlertsCapability } from './lib/capabilities';
 import { ActionTypeModel, AlertTypeModel } from '../types';
@@ -44,6 +45,7 @@ export interface AppDeps {
   capabilities: ApplicationStart['capabilities'];
   actionTypeRegistry: TypeRegistry<ActionTypeModel>;
   alertTypeRegistry: TypeRegistry<AlertTypeModel>;
+  history: ScopedHistory;
 }
 
 export const App = (appDeps: AppDeps) => {
@@ -52,11 +54,11 @@ export const App = (appDeps: AppDeps) => {
   const sectionsRegex = sections.join('|');
 
   return (
-    <HashRouter>
+    <Router history={appDeps.history}>
       <AppContextProvider appDeps={appDeps}>
         <AppWithoutRouter sectionsRegex={sectionsRegex} />
       </AppContextProvider>
-    </HashRouter>
+    </Router>
   );
 };
 
@@ -67,7 +69,7 @@ export const AppWithoutRouter = ({ sectionsRegex }: { sectionsRegex: string }) =
   return (
     <Switch>
       <Route
-        path={`${BASE_PATH}/:section(${sectionsRegex})`}
+        path={`/:section(${sectionsRegex})`}
         component={suspendedComponentWithProps(TriggersActionsUIHome, 'xl')}
       />
       {canShowAlerts && (
@@ -76,7 +78,7 @@ export const AppWithoutRouter = ({ sectionsRegex }: { sectionsRegex: string }) =
           component={suspendedComponentWithProps(AlertDetailsRoute, 'xl')}
         />
       )}
-      <Redirect from={`${BASE_PATH}`} to={`${BASE_PATH}/${DEFAULT_SECTION}`} />
+      <Redirect from={'/'} to={`${DEFAULT_SECTION}`} />
     </Switch>
   );
 };

x-pack/plugins/triggers_actions_ui/public/application/constants/index.ts

@@ -7,14 +7,12 @@
 export { BASE_ALERT_API_PATH } from '../../../../alerting/common';
 export { BASE_ACTION_API_PATH } from '../../../../actions/common';
 
-export const BASE_PATH = '/management/insightsAndAlerting/triggersActions';
-
 export type Section = 'connectors' | 'alerts';
 
-export const routeToHome = `${BASE_PATH}`;
-export const routeToConnectors = `${BASE_PATH}/connectors`;
-export const routeToAlerts = `${BASE_PATH}/alerts`;
-export const routeToAlertDetails = `${BASE_PATH}/alert/:alertId`;
+export const routeToHome = `/`;
+export const routeToConnectors = `/connectors`;
+export const routeToAlerts = `/alerts`;
+export const routeToAlertDetails = `/alert/:alertId`;
 
 export { TIME_UNITS } from './time_units';
 export enum SORT_ORDERS {

x-pack/plugins/triggers_actions_ui/public/application/home.tsx

@@ -21,7 +21,7 @@ import {
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
-import { BASE_PATH, Section, routeToConnectors, routeToAlerts } from './constants';
+import { Section, routeToConnectors, routeToAlerts } from './constants';
 import { getCurrentBreadcrumb } from './lib/breadcrumb';
 import { getCurrentDocTitle } from './lib/doc_title';
 import { useAppDependencies } from './app_context';
@@ -76,7 +76,7 @@ export const TriggersActionsUIHome: React.FunctionComponent<RouteComponentProps<
   }
 
   const onSectionChange = (newSection: Section) => {
-    history.push(`${BASE_PATH}/${newSection}`);
+    history.push(`/${newSection}`);
   };
 
   // Set breadcrumb and page title

x-pack/plugins/triggers_actions_ui/public/application/lib/breadcrumb.test.ts

@@ -13,19 +13,19 @@ describe('getCurrentBreadcrumb', () => {
       text: i18n.translate('xpack.triggersActionsUI.connectors.breadcrumbTitle', {
         defaultMessage: 'Connectors',
       }),
-      href: `#${routeToConnectors}`,
+      href: `${routeToConnectors}`,
     });
     expect(getCurrentBreadcrumb('alerts')).toMatchObject({
       text: i18n.translate('xpack.triggersActionsUI.alerts.breadcrumbTitle', {
         defaultMessage: 'Alerts',
       }),
-      href: `#${routeToAlerts}`,
+      href: `${routeToAlerts}`,
     });
     expect(getCurrentBreadcrumb('home')).toMatchObject({
       text: i18n.translate('xpack.triggersActionsUI.home.breadcrumbTitle', {
         defaultMessage: 'Alerts and Actions',
       }),
-      href: `#${routeToHome}`,
+      href: `${routeToHome}`,
     });
   });
 });

x-pack/plugins/triggers_actions_ui/public/application/lib/breadcrumb.ts

@@ -15,21 +15,21 @@ export const getCurrentBreadcrumb = (type: string): { text: string; href: string
         text: i18n.translate('xpack.triggersActionsUI.connectors.breadcrumbTitle', {
           defaultMessage: 'Connectors',
         }),
-        href: `#${routeToConnectors}`,
+        href: `${routeToConnectors}`,
       };
     case 'alerts':
       return {
         text: i18n.translate('xpack.triggersActionsUI.alerts.breadcrumbTitle', {
           defaultMessage: 'Alerts',
         }),
-        href: `#${routeToAlerts}`,
+        href: `${routeToAlerts}`,
       };
     default:
       return {
         text: i18n.translate('xpack.triggersActionsUI.home.breadcrumbTitle', {
           defaultMessage: 'Alerts and Actions',
         }),
-        href: `#${routeToHome}`,
+        href: `${routeToHome}`,
       };
   }
 };

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.test.tsx

@@ -127,7 +127,7 @@ describe('connector_add_flyout', () => {
     const manageLink = callout.find('EuiButton');
     expect(manageLink).toHaveLength(1);
     expect(manageLink.getElements()[0].props.href).toMatchInlineSnapshot(
-      `"/app/kibana#/management/stack/license_management/"`
+      `"/app//management/stack/license_management/"`
     );
 
     const subscriptionLink = callout.find('EuiButtonEmpty');