[7.x] [APM] Persist local UI filter across views (#43988)

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

@@ -20,7 +20,7 @@ import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 import { APMError } from '../../../../../typings/es_schemas/ui/APMError';
 import { Transaction } from '../../../../../typings/es_schemas/ui/Transaction';
 import { StickyProperties } from '../../../shared/StickyProperties';
-import { TransactionLink } from '../../../shared/Links/apm/TransactionLink';
+import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
 import { isRumAgentName } from '../../../../../common/agent_name';
 
 interface Props {
@@ -43,9 +43,15 @@ function TransactionLinkWrapper({
   }
 
   return (
-    <TransactionLink transaction={transaction}>
+    <TransactionDetailLink
+      serviceName={transaction.service.name}
+      transactionId={transaction.transaction.id}
+      traceId={transaction.trace.id}
+      transactionName={transaction.transaction.name}
+      transactionType={transaction.transaction.type}
+    >
       {transaction.transaction.id}
-    </TransactionLink>
+    </TransactionDetailLink>
   );
 }
 

x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/List.test.tsx

@@ -6,7 +6,6 @@
 
 import { mount } from 'enzyme';
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
 import { mockMoment, toJson } from '../../../../../utils/testHelpers';
 import { ErrorGroupList } from '../index';
 import props from './props.json';
@@ -19,7 +18,7 @@ import {
 const mockRefreshTimeRange = jest.fn();
 const MockUrlParamsProvider: React.FC<{
   params?: IUrlParams;
-}> = ({ params = {}, children }) => (
+}> = ({ params = props.urlParams, children }) => (
   <UrlParamsContext.Provider
     value={{
       urlParams: params,
@@ -38,9 +37,9 @@ describe('ErrorGroupOverview -> List', () => {
   it('should render empty state', () => {
     const storeState = {};
     const wrapper = mount(
-      <MemoryRouter>
+      <MockUrlParamsProvider>
         <ErrorGroupList items={[]} />
-      </MemoryRouter>,
+      </MockUrlParamsProvider>,
       storeState
     );
 
@@ -49,7 +48,7 @@ describe('ErrorGroupOverview -> List', () => {
 
   it('should render with data', () => {
     const wrapper = mount(
-      <MockUrlParamsProvider params={props.urlParams}>
+      <MockUrlParamsProvider>
         <ErrorGroupList items={props.items} />
       </MockUrlParamsProvider>
     );

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

@@ -19,19 +19,19 @@ import {
   truncate,
   unit
 } from '../../../../style/variables';
-import { APMLink } from '../../../shared/Links/apm/APMLink';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
 import { ManagedTable } from '../../../shared/ManagedTable';
+import { ErrorDetailLink } from '../../../shared/Links/apm/ErrorDetailLink';
 
-const GroupIdLink = styled(APMLink)`
+const GroupIdLink = styled(ErrorDetailLink)`
   font-family: ${fontFamilyCode};
 `;
 
 const MessageAndCulpritCell = styled.div`
   ${truncate('100%')};
 `;
 
-const MessageLink = styled(APMLink)`
+const MessageLink = styled(ErrorDetailLink)`
   font-family: ${fontFamilyCode};
   font-size: ${fontSizes.large};
   ${truncate('100%')};
@@ -51,6 +51,10 @@ const ErrorGroupList: React.FC<Props> = props => {
     urlParams: { serviceName }
   } = useUrlParams();
 
+  if (!serviceName) {
+    throw new Error('Service name is required');
+  }
+
   const columns = useMemo(
     () => [
       {
@@ -62,7 +66,7 @@ const ErrorGroupList: React.FC<Props> = props => {
         width: px(unit * 6),
         render: (groupId: string) => {
           return (
-            <GroupIdLink path={`/services/${serviceName}/errors/${groupId}`}>
+            <GroupIdLink serviceName={serviceName} errorGroupId={groupId}>
               {groupId.slice(0, 5) || NOT_AVAILABLE_LABEL}
             </GroupIdLink>
           );
@@ -86,7 +90,8 @@ const ErrorGroupList: React.FC<Props> = props => {
                 content={message || NOT_AVAILABLE_LABEL}
               >
                 <MessageLink
-                  path={`/services/${serviceName}/errors/${item.groupId}`}
+                  serviceName={serviceName}
+                  errorGroupId={item.groupId}
                 >
                   {message || NOT_AVAILABLE_LABEL}
                 </MessageLink>

x-pack/legacy/plugins/apm/public/components/app/Home/Home.test.tsx

@@ -13,7 +13,11 @@ jest.mock('ui/index_patterns');
 jest.mock('ui/new_platform');
 
 describe('Home component', () => {
-  it('should render', () => {
-    expect(shallow(<Home />)).toMatchSnapshot();
+  it('should render services', () => {
+    expect(shallow(<Home tab="services" />)).toMatchSnapshot();
+  });
+
+  it('should render traces', () => {
+    expect(shallow(<Home tab="traces" />)).toMatchSnapshot();
   });
 });

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

@@ -8,31 +8,42 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiTitle,
-  EuiButtonEmpty
+  EuiButtonEmpty,
+  EuiTabs,
+  EuiSpacer
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { $ElementType } from 'utility-types';
 import { ApmHeader } from '../../shared/ApmHeader';
-import { HistoryTabs, IHistoryTab } from '../../shared/HistoryTabs';
 import { SetupInstructionsLink } from '../../shared/Links/SetupInstructionsLink';
 import { ServiceOverview } from '../ServiceOverview';
 import { TraceOverview } from '../TraceOverview';
-import { APMLink } from '../../shared/Links/apm/APMLink';
+import { ServiceOverviewLink } from '../../shared/Links/apm/ServiceOverviewLink';
+import { TraceOverviewLink } from '../../shared/Links/apm/TraceOverviewLink';
+import { EuiTabLink } from '../../shared/EuiTabLink';
+import { SettingsLink } from '../../shared/Links/apm/SettingsLink';
 
-const homeTabs: IHistoryTab[] = [
+const homeTabs = [
   {
-    path: '/services',
-    title: i18n.translate('xpack.apm.home.servicesTabLabel', {
-      defaultMessage: 'Services'
-    }),
+    link: (
+      <ServiceOverviewLink>
+        {i18n.translate('xpack.apm.home.servicesTabLabel', {
+          defaultMessage: 'Services'
+        })}
+      </ServiceOverviewLink>
+    ),
     render: () => <ServiceOverview />,
     name: 'services'
   },
   {
-    path: '/traces',
-    title: i18n.translate('xpack.apm.home.tracesTabLabel', {
-      defaultMessage: 'Traces'
-    }),
+    link: (
+      <TraceOverviewLink>
+        {i18n.translate('xpack.apm.home.tracesTabLabel', {
+          defaultMessage: 'Traces'
+        })}
+      </TraceOverviewLink>
+    ),
     render: () => <TraceOverview />,
     name: 'traces'
   }
@@ -42,7 +53,15 @@ const SETTINGS_LINK_LABEL = i18n.translate('xpack.apm.settingsLinkLabel', {
   defaultMessage: 'Settings'
 });
 
-export function Home() {
+interface Props {
+  tab: 'traces' | 'services';
+}
+
+export function Home({ tab }: Props) {
+  const selectedTab = homeTabs.find(
+    homeTab => homeTab.name === tab
+  ) as $ElementType<typeof homeTabs, number>;
+
   return (
     <div>
       <ApmHeader>
@@ -53,18 +72,30 @@ export function Home() {
             </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <APMLink path="/settings">
+            <SettingsLink>
               <EuiButtonEmpty size="s" color="primary" iconType="gear">
                 {SETTINGS_LINK_LABEL}
               </EuiButtonEmpty>
-            </APMLink>
+            </SettingsLink>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <SetupInstructionsLink />
           </EuiFlexItem>
         </EuiFlexGroup>
       </ApmHeader>
-      <HistoryTabs tabs={homeTabs} />
+      <EuiTabs>
+        {homeTabs.map(homeTab => (
+          <EuiTabLink
+            onClick={() => null}
+            isSelected={homeTab === selectedTab}
+            key={homeTab.name}
+          >
+            {homeTab.link}
+          </EuiTabLink>
+        ))}
+      </EuiTabs>
+      <EuiSpacer />
+      {selectedTab.render()}
     </div>
   );
 }