Refactor url and link handling

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__test__/DetailView.test.tsx

@@ -5,6 +5,7 @@
  */
 
 import { shallow } from 'enzyme';
+import { Location } from 'history';
 import React from 'react';
 import { RRRRenderResponse } from 'react-redux-request';
 import { ErrorGroupAPIResponse } from 'x-pack/plugins/apm/server/lib/errors/get_error_group';
@@ -25,7 +26,7 @@ describe('DetailView', () => {
       <DetailView
         errorGroup={{} as any}
         urlParams={{}}
-        location={{ state: '' }}
+        location={{} as Location}
       />
     );
     expect(wrapper.isEmptyRender()).toBe(true);
@@ -53,9 +54,9 @@ describe('DetailView', () => {
       <DetailView
         errorGroup={errorGroup}
         urlParams={{}}
-        location={{ state: '' }}
+        location={{} as Location}
       />
-    ).find('DiscoverErrorButton');
+    ).find('DiscoverErrorLink');
 
     expect(wrapper.exists()).toBe(true);
     expect(wrapper).toMatchSnapshot();
@@ -96,7 +97,7 @@ describe('DetailView', () => {
       <DetailView
         errorGroup={errorGroup}
         urlParams={{}}
-        location={{ state: '' }}
+        location={{} as Location}
       />
     ).find('StickyProperties');
 
@@ -120,7 +121,7 @@ describe('DetailView', () => {
       <DetailView
         errorGroup={errorGroup}
         urlParams={{}}
-        location={{ state: '' }}
+        location={{} as Location}
       />
     ).find('EuiTabs');
 
@@ -144,7 +145,7 @@ describe('DetailView', () => {
       <DetailView
         errorGroup={errorGroup}
         urlParams={{}}
-        location={{ state: '' }}
+        location={{} as Location}
       />
     ).find('TabContent');
 

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__test__/__snapshots__/DetailView.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DetailView should render Discover button 1`] = `
-<DiscoverErrorButton
+<DiscoverErrorLink
   error={
     Object {
       "@timestamp": "myTimestamp",
@@ -39,7 +39,7 @@ exports[`DetailView should render Discover button 1`] = `
   >
     View 10 occurrences in Discover
   </EuiButtonEmpty>
-</DiscoverErrorButton>
+</DiscoverErrorLink>
 `;
 
 exports[`DetailView should render StickyProperties 1`] = `
@@ -74,9 +74,8 @@ exports[`DetailView should render StickyProperties 1`] = `
       Object {
         "fieldName": "transaction.id",
         "label": "Transaction sample ID",
-        "val": <Connect(Component)
+        "val": <Connect(UnconnectedKibanaLink)
           hash="/myService/transactions/myTransactionType/myTransactionName"
-          pathname="/app/apm"
           query={
             Object {
               "traceId": "traceId",
@@ -85,7 +84,7 @@ exports[`DetailView should render StickyProperties 1`] = `
           }
         >
           myTransactionName
-        </Connect(Component)>,
+        </Connect(UnconnectedKibanaLink)>,
         "width": "25%",
       },
       Object {

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx

@@ -12,6 +12,7 @@ import {
   EuiTitle
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { Location } from 'history';
 import { first, get } from 'lodash';
 import React from 'react';
 import { RRRRenderResponse } from 'react-redux-request';
@@ -20,6 +21,13 @@ import {
   ERROR_EXC_STACKTRACE,
   ERROR_LOG_STACKTRACE
 } from 'x-pack/plugins/apm/common/constants';
+import { KibanaLink } from 'x-pack/plugins/apm/public/components/shared/Links/KibanaLink';
+import {
+  fromQuery,
+  history,
+  toQuery
+} from 'x-pack/plugins/apm/public/components/shared/Links/url_helpers';
+import { legacyEncodeURIComponent } from 'x-pack/plugins/apm/public/components/shared/Links/url_helpers';
 import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams';
 import { ErrorGroupAPIResponse } from 'x-pack/plugins/apm/server/lib/errors/get_error_group';
 import { APMError } from 'x-pack/plugins/apm/typings/es_schemas/Error';
@@ -41,9 +49,7 @@ import {
   unit,
   units
 } from '../../../../style/variables';
-import { fromQuery, history, toQuery } from '../../../../utils/url';
-import { KibanaLink, legacyEncodeURIComponent } from '../../../../utils/url';
-import { DiscoverErrorButton } from '../../../shared/DiscoverButtons/DiscoverErrorButton';
+import { DiscoverErrorLink } from '../../../shared/Links/DiscoverLinks/DiscoverErrorLink';
 import {
   getPropertyTabNames,
   PropertiesTable,
@@ -90,7 +96,7 @@ const exceptionStacktraceTab = {
 interface Props {
   errorGroup: RRRRenderResponse<ErrorGroupAPIResponse>;
   urlParams: IUrlParams;
-  location: any;
+  location: Location;
 }
 
 export function DetailView({ errorGroup, urlParams, location }: Props) {
@@ -179,7 +185,7 @@ export function DetailView({ errorGroup, urlParams, location }: Props) {
             )}
           </h3>
         </EuiTitle>
-        <DiscoverErrorButton error={error} kuery={urlParams.kuery}>
+        <DiscoverErrorLink error={error} kuery={urlParams.kuery}>
           <EuiButtonEmpty iconType="discoverApp">
             {i18n.translate(
               'xpack.apm.errorGroupDetails.viewOccurrencesInDiscoverButtonLabel',
@@ -190,7 +196,7 @@ export function DetailView({ errorGroup, urlParams, location }: Props) {
               }
             )}
           </EuiButtonEmpty>
-        </DiscoverErrorButton>
+        </DiscoverErrorLink>
       </HeaderContainer>
 
       <PaddedContainer>
@@ -241,7 +247,6 @@ function getTransactionLink(error: APMError, transaction?: Transaction) {
 
   return (
     <KibanaLink
-      pathname={'/app/apm'}
       hash={path}
       query={{
         transactionId: transaction.transaction.id,

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/view.tsx

@@ -6,6 +6,7 @@
 
 import { EuiBadge, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { Location } from 'history';
 import { get } from 'lodash';
 import React, { Fragment } from 'react';
 import styled from 'styled-components';
@@ -75,7 +76,7 @@ function getShortGroupId(errorGroupId?: string) {
 
 interface Props {
   urlParams: IUrlParams;
-  location: any;
+  location: Location;
 }
 
 export function ErrorGroupDetails({ urlParams, location }: Props) {

x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.js.snap

@@ -493,8 +493,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
             >
               <a
                 className="euiLink euiLink--primary c0"
-                href="#/opbeans-python/errors/a0ce2c8978ef92cdf2ff163ae28576ee"
-                onClick={[Function]}
+                href="#/opbeans-python/errors/a0ce2c8978ef92cdf2ff163ae28576ee?_g=(time:(from:now-24h,mode:quick,to:now))&_a="
               >
                 a0ce2
               </a>
@@ -514,8 +513,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                 <a
                   aria-describedby="overlay1"
                   className="euiLink euiLink--primary c2"
-                  href="#/opbeans-python/errors/a0ce2c8978ef92cdf2ff163ae28576ee"
-                  onClick={[Function]}
+                  href="#/opbeans-python/errors/a0ce2c8978ef92cdf2ff163ae28576ee?_g=(time:(from:now-24h,mode:quick,to:now))&_a="
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
                 >
@@ -574,8 +572,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
             >
               <a
                 className="euiLink euiLink--primary c0"
-                href="#/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a"
-                onClick={[Function]}
+                href="#/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a?_g=(time:(from:now-24h,mode:quick,to:now))&_a="
               >
                 f3ac9
               </a>
@@ -595,8 +592,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                 <a
                   aria-describedby="overlay3"
                   className="euiLink euiLink--primary c2"
-                  href="#/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a"
-                  onClick={[Function]}
+                  href="#/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a?_g=(time:(from:now-24h,mode:quick,to:now))&_a="
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
                 >
@@ -655,8 +651,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
             >
               <a
                 className="euiLink euiLink--primary c0"
-                href="#/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840"
-                onClick={[Function]}
+                href="#/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840?_g=(time:(from:now-24h,mode:quick,to:now))&_a="
               >
                 e9086
               </a>
@@ -676,8 +671,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                 <a
                   aria-describedby="overlay5"
                   className="euiLink euiLink--primary c2"
-                  href="#/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840"
-                  onClick={[Function]}
+                  href="#/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840?_g=(time:(from:now-24h,mode:quick,to:now))&_a="
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
                 >
@@ -736,8 +730,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
             >
               <a
                 className="euiLink euiLink--primary c0"
-                href="#/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc"
-                onClick={[Function]}
+                href="#/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc?_g=(time:(from:now-24h,mode:quick,to:now))&_a="
               >
                 8673d
               </a>
@@ -757,8 +750,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                 <a
                   aria-describedby="overlay7"
                   className="euiLink euiLink--primary c2"
-                  href="#/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc"
-                  onClick={[Function]}
+                  href="#/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc?_g=(time:(from:now-24h,mode:quick,to:now))&_a="
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
                 >

x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/index.js

@@ -9,12 +9,8 @@ import PropTypes from 'prop-types';
 import { EuiBasicTable, EuiBadge } from '@elastic/eui';
 import numeral from '@elastic/numeral';
 import moment from 'moment';
-import {
-  toQuery,
-  fromQuery,
-  history,
-  RelativeLink
-} from '../../../../utils/url';
+import { toQuery, fromQuery, history } from '../../../shared/Links/url_helpers';
+import { KibanaLink } from '../../../shared/Links/KibanaLink';
 import TooltipOverlay from '../../../shared/TooltipOverlay';
 import styled from 'styled-components';
 import {
@@ -30,15 +26,15 @@ function paginateItems({ items, pageIndex, pageSize }) {
   return items.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
 }
 
-const GroupIdLink = styled(RelativeLink)`
+const GroupIdLink = styled(KibanaLink)`
   font-family: ${fontFamilyCode};
 `;
 
 const MessageAndCulpritCell = styled.div`
   ${truncate('100%')};
 `;
 
-const MessageLink = styled(RelativeLink)`
+const MessageLink = styled(KibanaLink)`
   font-family: ${fontFamilyCode};
   font-size: ${fontSizes.large};
   ${truncate('100%')};
@@ -98,7 +94,7 @@ class List extends Component {
         width: px(unit * 6),
         render: groupId => {
           return (
-            <GroupIdLink path={`/${serviceName}/errors/${groupId}`}>
+            <GroupIdLink hash={`/${serviceName}/errors/${groupId}`}>
               {groupId.slice(0, 5) || notAvailableLabel}
             </GroupIdLink>
           );
@@ -118,7 +114,7 @@ class List extends Component {
           return (
             <MessageAndCulpritCell>
               <TooltipOverlay content={message || notAvailableLabel}>
-                <MessageLink path={`/${serviceName}/errors/${item.groupId}`}>
+                <MessageLink hash={`/${serviceName}/errors/${item.groupId}`}>
                   {message || notAvailableLabel}
                 </MessageLink>
               </TooltipOverlay>

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

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { Location } from 'history';
 import React from 'react';
 import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams';
 import { ErrorGroupOverviewRequest } from '../../../store/reactReduxRequest/errorGroupList';
@@ -12,7 +13,7 @@ import List from './List';
 
 interface ErrorGroupOverviewProps {
   urlParams: IUrlParams;
-  location: any;
+  location: Location;
 }
 
 const ErrorGroupOverview: React.SFC<ErrorGroupOverviewProps> = ({

x-pack/plugins/apm/public/components/app/Main/Breadcrumbs.js

@@ -7,10 +7,8 @@
 import React from 'react';
 import { withBreadcrumbs } from 'react-router-breadcrumbs-hoc';
 import { flatten, capitalize } from 'lodash';
-
 import chrome from 'ui/chrome';
-
-import { toQuery } from '../../../utils/url';
+import { toQuery } from '../../shared/Links/url_helpers';
 import { routes } from './routeConfig';
 
 class Breadcrumbs extends React.Component {

x-pack/plugins/apm/public/components/app/Main/routeConfig.tsx

@@ -6,10 +6,9 @@
 
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { Redirect } from 'react-router-dom';
-
+import { Redirect, RouteComponentProps } from 'react-router-dom';
+import { legacyDecodeURIComponent } from 'x-pack/plugins/apm/public/components/shared/Links/url_helpers';
 import { StringMap } from '../../../../typings/common';
-import { legacyDecodeURIComponent } from '../../../utils/url';
 // @ts-ignore
 import ErrorGroupDetails from '../ErrorGroupDetails';
 import { ServiceDetails } from '../ServiceDetails';
@@ -22,15 +21,12 @@ interface BreadcrumbArgs {
   };
 }
 
-interface RenderArgs {
-  location: StringMap;
-  match: {
-    params: StringMap;
-  };
+interface RouteParams {
+  serviceName: string;
 }
 
 const renderAsRedirectTo = (to: string) => {
-  return ({ location }: RenderArgs) => (
+  return ({ location }: RouteComponentProps<RouteParams>) => (
     <Redirect
       to={{
         ...location,
@@ -98,7 +94,7 @@ export const routes = [
         exact: true,
         path: '/:serviceName',
         breadcrumb: ({ match }: BreadcrumbArgs) => match.params.serviceName,
-        render: (props: RenderArgs) =>
+        render: (props: RouteComponentProps<RouteParams>) =>
           renderAsRedirectTo(`/${props.match.params.serviceName}/transactions`)(
             props
           )