From b89130c90d48c1e03caca61c82251654f4dbeb3c Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Mon, 26 Oct 2020 15:23:15 -0700
Subject: [PATCH 1/5] Added telemetry for the home page

---
 .../components/add_data/add_data.tsx          | 101 ++++++++++--------
 .../public/application/components/home.js     |  14 ++-
 .../components/manage_data/manage_data.tsx    |  81 ++++++++------
 .../solutions_section/solution_panel.tsx      |  75 +++++++------
 .../overview_page_footer.tsx                  |  72 +++++++------
 5 files changed, 197 insertions(+), 146 deletions(-)

diff --git a/src/plugins/home/public/application/components/add_data/add_data.tsx b/src/plugins/home/public/application/components/add_data/add_data.tsx
index 0311c1fc5e5c..4b2a3d2d5d22 100644
--- a/src/plugins/home/public/application/components/add_data/add_data.tsx
+++ b/src/plugins/home/public/application/components/add_data/add_data.tsx
@@ -17,69 +17,78 @@
  * under the License.
  */
 
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import PropTypes from 'prop-types';
 import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { METRIC_TYPE } from '@kbn/analytics';
 // @ts-expect-error untyped service
 import { FeatureCatalogueEntry } from '../../services';
 import { createAppNavigationHandler } from '../app_navigation_handler';
 // @ts-expect-error untyped component
 import { Synopsis } from '../synopsis';
+import { getServices } from '../../kibana_services';
 
 interface Props {
   addBasePath: (path: string) => string;
   features: FeatureCatalogueEntry[];
 }
 
-export const AddData: FC<Props> = ({ addBasePath, features }) => (
-  <section className="homDataAdd" aria-labelledby="homDataAdd__title">
-    <EuiFlexGroup alignItems="center">
-      <EuiFlexItem grow={1}>
-        <EuiTitle size="s">
-          <h2 id="homDataAdd__title">
-            <FormattedMessage id="home.addData.sectionTitle" defaultMessage="Ingest your data" />
-          </h2>
-        </EuiTitle>
-      </EuiFlexItem>
+export const AddData: FC<Props> = ({ addBasePath, features }) => {
+  const { trackUiMetric } = getServices();
 
-      <EuiFlexItem className="homDataAdd__actions" grow={false}>
-        <div>
-          <EuiButtonEmpty
-            className="homDataAdd__actionButton"
-            flush="left"
-            href="#/tutorial_directory/sampleData"
-            iconType="visTable"
-            size="xs"
-          >
-            <FormattedMessage
-              id="home.addData.sampleDataButtonLabel"
-              defaultMessage="Try our sample data"
-            />
-          </EuiButtonEmpty>
-        </div>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-
-    <EuiSpacer size="m" />
+  return (
+    <section className="homDataAdd" aria-labelledby="homDataAdd__title">
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem grow={1}>
+          <EuiTitle size="s">
+            <h2 id="homDataAdd__title">
+              <FormattedMessage id="home.addData.sectionTitle" defaultMessage="Ingest your data" />
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
 
-    <EuiFlexGroup className="homDataAdd__content">
-      {features.map((feature) => (
-        <EuiFlexItem key={feature.id}>
-          <Synopsis
-            id={feature.id}
-            onClick={createAppNavigationHandler(feature.path)}
-            description={feature.description}
-            iconType={feature.icon}
-            title={feature.title}
-            url={addBasePath(feature.path)}
-            wrapInPanel
-          />
+        <EuiFlexItem className="homDataAdd__actions" grow={false}>
+          <div>
+            <EuiButtonEmpty
+              className="homDataAdd__actionButton"
+              flush="left"
+              href="#/tutorial_directory/sampleData"
+              iconType="visTable"
+              size="xs"
+            >
+              <FormattedMessage
+                id="home.addData.sampleDataButtonLabel"
+                defaultMessage="Try our sample data"
+              />
+            </EuiButtonEmpty>
+          </div>
         </EuiFlexItem>
-      ))}
-    </EuiFlexGroup>
-  </section>
-);
+      </EuiFlexGroup>
+
+      <EuiSpacer size="m" />
+
+      <EuiFlexGroup className="homDataAdd__content">
+        {features.map((feature) => (
+          <EuiFlexItem key={feature.id}>
+            <Synopsis
+              id={feature.id}
+              onClick={(event: MouseEvent) => {
+                createAppNavigationHandler(feature.path)(event);
+                trackUiMetric(METRIC_TYPE.CLICK, `ingest_data_card_${feature.id}`);
+              }}
+              description={feature.description}
+              iconType={feature.icon}
+              title={feature.title}
+              url={addBasePath(feature.path)}
+              wrapInPanel
+            />
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+    </section>
+  );
+};
 
 AddData.propTypes = {
   addBasePath: PropTypes.func.isRequired,
diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js
index 054f5a5344df..a990beaa6a44 100644
--- a/src/plugins/home/public/application/components/home.js
+++ b/src/plugins/home/public/application/components/home.js
@@ -21,6 +21,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
+import { METRIC_TYPE } from '@kbn/analytics';
 import { i18n } from '@kbn/i18n';
 import {
   OverviewPageFooter,
@@ -120,7 +121,7 @@ export class Home extends Component {
 
   renderNormal() {
     const { addBasePath, solutions, directories } = this.props;
-
+    const { trackUiMetric } = getServices();
     const devTools = this.findDirectoryById('console');
     const addDataFeatures = this.getFeaturesByCategory(FeatureCatalogueCategory.DATA);
     const manageDataFeatures = this.getFeaturesByCategory(FeatureCatalogueCategory.ADMIN);
@@ -171,7 +172,16 @@ export class Home extends Component {
 
           <EuiHorizontalRule margin="xl" aria-hidden="true" />
 
-          <OverviewPageFooter addBasePath={addBasePath} path={HOME_APP_BASE_PATH} />
+          <OverviewPageFooter
+            addBasePath={addBasePath}
+            path={HOME_APP_BASE_PATH}
+            onSetDefaultRoute={() => {
+              trackUiMetric(METRIC_TYPE.CLICK, 'set_home_as_default_route');
+            }}
+            onChangeDefaultRoute={() => {
+              trackUiMetric(METRIC_TYPE.CLICK, 'change_to_different_default_route');
+            }}
+          />
         </div>
       </main>
     );
diff --git a/src/plugins/home/public/application/components/manage_data/manage_data.tsx b/src/plugins/home/public/application/components/manage_data/manage_data.tsx
index 85f1bc04f353..296090157fcb 100644
--- a/src/plugins/home/public/application/components/manage_data/manage_data.tsx
+++ b/src/plugins/home/public/application/components/manage_data/manage_data.tsx
@@ -17,58 +17,69 @@
  * under the License.
  */
 
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import PropTypes from 'prop-types';
 import { EuiFlexGroup, EuiHorizontalRule, EuiSpacer, EuiTitle, EuiFlexItem } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 // @ts-expect-error untyped service
+import { METRIC_TYPE } from '@kbn/analytics';
 import { FeatureCatalogueEntry } from '../../services';
 import { createAppNavigationHandler } from '../app_navigation_handler';
 // @ts-expect-error untyped component
 import { Synopsis } from '../synopsis';
+import { getServices } from '../../kibana_services';
 
 interface Props {
   addBasePath: (path: string) => string;
   features: FeatureCatalogueEntry[];
 }
 
-export const ManageData: FC<Props> = ({ addBasePath, features }) => (
-  <>
-    {features.length > 1 && <EuiHorizontalRule margin="xl" aria-hidden="true" />}
+export const ManageData: FC<Props> = ({ addBasePath, features }) => {
+  const { trackUiMetric } = getServices();
+  return (
+    <>
+      {features.length > 1 && <EuiHorizontalRule margin="xl" aria-hidden="true" />}
 
-    {features.length > 0 && (
-      <section
-        className="homDataManage"
-        aria-labelledby="homDataManage__title"
-        data-test-subj="homDataManage"
-      >
-        <EuiTitle size="s">
-          <h2 id="homDataManage__title">
-            <FormattedMessage id="home.manageData.sectionTitle" defaultMessage="Manage your data" />
-          </h2>
-        </EuiTitle>
+      {features.length > 0 && (
+        <section
+          className="homDataManage"
+          aria-labelledby="homDataManage__title"
+          data-test-subj="homDataManage"
+        >
+          <EuiTitle size="s">
+            <h2 id="homDataManage__title">
+              <FormattedMessage
+                id="home.manageData.sectionTitle"
+                defaultMessage="Manage your data"
+              />
+            </h2>
+          </EuiTitle>
 
-        <EuiSpacer size="m" />
+          <EuiSpacer size="m" />
 
-        <EuiFlexGroup className="homDataManage__content">
-          {features.map((feature) => (
-            <EuiFlexItem key={feature.id}>
-              <Synopsis
-                id={feature.id}
-                onClick={createAppNavigationHandler(feature.path)}
-                description={feature.description}
-                iconType={feature.icon}
-                title={feature.title}
-                url={addBasePath(feature.path)}
-                wrapInPanel
-              />
-            </EuiFlexItem>
-          ))}
-        </EuiFlexGroup>
-      </section>
-    )}
-  </>
-);
+          <EuiFlexGroup className="homDataManage__content">
+            {features.map((feature) => (
+              <EuiFlexItem key={feature.id}>
+                <Synopsis
+                  id={feature.id}
+                  onClick={(event: MouseEvent) => {
+                    createAppNavigationHandler(feature.path)(event);
+                    trackUiMetric(METRIC_TYPE.CLICK, `manage_data_card_${feature.id}`);
+                  }}
+                  description={feature.description}
+                  iconType={feature.icon}
+                  title={feature.title}
+                  url={addBasePath(feature.path)}
+                  wrapInPanel
+                />
+              </EuiFlexItem>
+            ))}
+          </EuiFlexGroup>
+        </section>
+      )}
+    </>
+  );
+};
 
 ManageData.propTypes = {
   addBasePath: PropTypes.func.isRequired,
diff --git a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx
index 943260efb275..f457d7bafbaf 100644
--- a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx
+++ b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx
@@ -17,11 +17,13 @@
  * under the License.
  */
 
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
+import { METRIC_TYPE } from '@kbn/analytics';
 import { FeatureCatalogueEntry, FeatureCatalogueSolution } from '../../../';
 import { createAppNavigationHandler } from '../app_navigation_handler';
 import { SolutionTitle } from './solution_title';
+import { getServices } from '../../kibana_services';
 
 const getDescriptionText = (description: string): JSX.Element => (
   <EuiText size="s" key={`${description}`}>
@@ -53,37 +55,44 @@ interface Props {
   apps?: FeatureCatalogueEntry[];
 }
 
-export const SolutionPanel: FC<Props> = ({ addBasePath, solution, apps = [] }) => (
-  <EuiFlexItem
-    key={solution.id}
-    data-test-subj={`homSolutionPanel homSolutionPanel_${solution.id}`}
-    className={`${
-      solution.id === 'kibana' ? 'homSolutions__group homSolutions__group--single' : ''
-    } homSolutions__item`}
-    grow={1}
-  >
-    <a
-      className={`homSolutionPanel homSolutionPanel--${solution.id}`}
-      href={addBasePath(solution.path)}
-      onClick={createAppNavigationHandler(solution.path)}
+export const SolutionPanel: FC<Props> = ({ addBasePath, solution, apps = [] }) => {
+  const { trackUiMetric } = getServices();
+
+  return (
+    <EuiFlexItem
+      key={solution.id}
+      data-test-subj={`homSolutionPanel homSolutionPanel_${solution.id}`}
+      className={`${
+        solution.id === 'kibana' ? 'homSolutions__group homSolutions__group--single' : ''
+      } homSolutions__item`}
+      grow={1}
     >
-      <EuiPanel className="homSolutionPanel__inner" paddingSize="none">
-        <EuiFlexGroup gutterSize="none">
-          <EuiFlexItem grow={1} className={`homSolutionPanel__header`}>
-            <SolutionTitle
-              iconType={solution.icon}
-              title={solution.title}
-              subtitle={solution.subtitle}
-            />
-          </EuiFlexItem>
+      <a
+        className={`homSolutionPanel homSolutionPanel--${solution.id}`}
+        href={addBasePath(solution.path)}
+        onClick={(event: MouseEvent) => {
+          createAppNavigationHandler(solution.path)(event);
+          trackUiMetric(METRIC_TYPE.CLICK, `solution_panel_${solution.id}`);
+        }}
+      >
+        <EuiPanel className="homSolutionPanel__inner" paddingSize="none">
+          <EuiFlexGroup gutterSize="none">
+            <EuiFlexItem grow={1} className={`homSolutionPanel__header`}>
+              <SolutionTitle
+                iconType={solution.icon}
+                title={solution.title}
+                subtitle={solution.subtitle}
+              />
+            </EuiFlexItem>
 
-          <EuiFlexItem grow={1} className="homSolutionPanel__content">
-            {getDescriptions(
-              apps.length ? apps.map(({ subtitle = '' }) => subtitle) : solution.appDescriptions
-            )}
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPanel>
-    </a>
-  </EuiFlexItem>
-);
+            <EuiFlexItem grow={1} className="homSolutionPanel__content">
+              {getDescriptions(
+                apps.length ? apps.map(({ subtitle = '' }) => subtitle) : solution.appDescriptions
+              )}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
+      </a>
+    </EuiFlexItem>
+  );
+};
diff --git a/src/plugins/kibana_react/public/overview_page/overview_page_footer/overview_page_footer.tsx b/src/plugins/kibana_react/public/overview_page/overview_page_footer/overview_page_footer.tsx
index 4a8a5276e0e7..9574d4778bf3 100644
--- a/src/plugins/kibana_react/public/overview_page/overview_page_footer/overview_page_footer.tsx
+++ b/src/plugins/kibana_react/public/overview_page/overview_page_footer/overview_page_footer.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@@ -30,9 +30,18 @@ interface Props {
   addBasePath: (path: string) => string;
   /** The path to set as the new default route in advanced settings */
   path: string;
+  /** Callback function to invoke when the user wants to set their default route to the current page */
+  onSetDefaultRoute?: (event: MouseEvent) => void;
+  /** Callback function to invoke when the user wants to change their default route button is changed */
+  onChangeDefaultRoute?: (event: MouseEvent) => void;
 }
 
-export const OverviewPageFooter: FC<Props> = ({ addBasePath, path }) => {
+export const OverviewPageFooter: FC<Props> = ({
+  addBasePath,
+  path,
+  onSetDefaultRoute,
+  onChangeDefaultRoute,
+}) => {
   const [defaultRoute, setDefaultRoute] = useUiSetting$<string>('defaultRoute');
   const {
     services: {
@@ -44,43 +53,46 @@ export const OverviewPageFooter: FC<Props> = ({ addBasePath, path }) => {
   const { show, save } = application.capabilities.advancedSettings;
   const isAdvancedSettingsEnabled = show && save;
 
-  const defaultRoutebutton =
-    defaultRoute === path ? (
-      <RedirectAppLinks application={application}>
-        <EuiButtonEmpty
-          className="kbnOverviewPageFooter__button"
-          flush="both"
-          href={addBasePath('/app/management/kibana/settings#defaultRoute')}
-          iconType="home"
-          size="xs"
-        >
-          <FormattedMessage
-            id="kibana-react.pageFooter.changeHomeRouteLink"
-            defaultMessage="Display a different page on log in"
-          />
-        </EuiButtonEmpty>
-      </RedirectAppLinks>
-    ) : (
+  const defaultRoutebutton = defaultRoute.includes(path) ? (
+    <RedirectAppLinks application={application}>
       <EuiButtonEmpty
         className="kbnOverviewPageFooter__button"
         flush="both"
         iconType="home"
-        onClick={() => {
-          setDefaultRoute(path);
-          toasts.addSuccess({
-            title: i18n.translate('kibana-react.pageFooter.changeDefaultRouteSuccessToast', {
-              defaultMessage: 'Landing page updated',
-            }),
-          });
-        }}
         size="xs"
+        onClick={(event: MouseEvent) => {
+          application.navigateToUrl(addBasePath('/app/management/kibana/settings#defaultRoute'));
+          onChangeDefaultRoute(event);
+        }}
       >
         <FormattedMessage
-          id="kibana-react.pageFooter.makeDefaultRouteLink"
-          defaultMessage="Make this my landing page"
+          id="kibana-react.pageFooter.changeHomeRouteLink"
+          defaultMessage="Display a different page on log in"
         />
       </EuiButtonEmpty>
-    );
+    </RedirectAppLinks>
+  ) : (
+    <EuiButtonEmpty
+      className="kbnOverviewPageFooter__button"
+      flush="both"
+      iconType="home"
+      onClick={(event: MouseEvent) => {
+        setDefaultRoute(path);
+        toasts.addSuccess({
+          title: i18n.translate('kibana-react.pageFooter.changeDefaultRouteSuccessToast', {
+            defaultMessage: 'Landing page updated',
+          }),
+        });
+        onSetDefaultRoute(event);
+      }}
+      size="xs"
+    >
+      <FormattedMessage
+        id="kibana-react.pageFooter.makeDefaultRouteLink"
+        defaultMessage="Make this my landing page"
+      />
+    </EuiButtonEmpty>
+  );
 
   return (
     <footer className="kbnOverviewPageFooter">

From b634530f654f7342733651055cc08df2d8cb2ce5 Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Mon, 26 Oct 2020 15:27:52 -0700
Subject: [PATCH 2/5] Added check for click handlers in overview page footer

---
 .../overview_page_footer/overview_page_footer.tsx         | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/plugins/kibana_react/public/overview_page/overview_page_footer/overview_page_footer.tsx b/src/plugins/kibana_react/public/overview_page/overview_page_footer/overview_page_footer.tsx
index 9574d4778bf3..113992099aee 100644
--- a/src/plugins/kibana_react/public/overview_page/overview_page_footer/overview_page_footer.tsx
+++ b/src/plugins/kibana_react/public/overview_page/overview_page_footer/overview_page_footer.tsx
@@ -62,7 +62,9 @@ export const OverviewPageFooter: FC<Props> = ({
         size="xs"
         onClick={(event: MouseEvent) => {
           application.navigateToUrl(addBasePath('/app/management/kibana/settings#defaultRoute'));
-          onChangeDefaultRoute(event);
+          if (onChangeDefaultRoute) {
+            onChangeDefaultRoute(event);
+          }
         }}
       >
         <FormattedMessage
@@ -83,7 +85,9 @@ export const OverviewPageFooter: FC<Props> = ({
             defaultMessage: 'Landing page updated',
           }),
         });
-        onSetDefaultRoute(event);
+        if (onSetDefaultRoute) {
+          onSetDefaultRoute(event);
+        }
       }}
       size="xs"
     >

From b06868974d2dc69dcef9b4aa571a0a21dc53725d Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Wed, 28 Oct 2020 09:51:35 -0700
Subject: [PATCH 3/5] Fixed ts error

---
 .../public/application/components/manage_data/manage_data.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/home/public/application/components/manage_data/manage_data.tsx b/src/plugins/home/public/application/components/manage_data/manage_data.tsx
index 296090157fcb..86397e743047 100644
--- a/src/plugins/home/public/application/components/manage_data/manage_data.tsx
+++ b/src/plugins/home/public/application/components/manage_data/manage_data.tsx
@@ -21,8 +21,8 @@ import React, { FC, MouseEvent } from 'react';
 import PropTypes from 'prop-types';
 import { EuiFlexGroup, EuiHorizontalRule, EuiSpacer, EuiTitle, EuiFlexItem } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-// @ts-expect-error untyped service
 import { METRIC_TYPE } from '@kbn/analytics';
+// @ts-expect-error untyped service
 import { FeatureCatalogueEntry } from '../../services';
 import { createAppNavigationHandler } from '../app_navigation_handler';
 // @ts-expect-error untyped component

From 2122b89a57a44356c47c7cd5ff42334612f11c5c Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Wed, 28 Oct 2020 10:01:50 -0700
Subject: [PATCH 4/5] Updated snapshots

---
 .../__snapshots__/home.test.js.snap           | 30 +++++++++++++++++++
 .../components/add_data/add_data.test.tsx     |  6 ++++
 .../manage_data/manage_data.test.tsx          |  6 ++++
 .../solutions_section/solution_panel.test.tsx |  6 ++++
 4 files changed, 48 insertions(+)

diff --git a/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap b/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap
index e9b0494105e1..b949fa7995d3 100644
--- a/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap
+++ b/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap
@@ -44,6 +44,8 @@ exports[`home change home route should render a link to change the default route
     />
     <mockConstructor
       addBasePath={[Function]}
+      onChangeDefaultRoute={[Function]}
+      onSetDefaultRoute={[Function]}
       path="/app/home"
     />
   </div>
@@ -94,6 +96,8 @@ exports[`home directories should not render directory entry when showOnHomePage
     />
     <mockConstructor
       addBasePath={[Function]}
+      onChangeDefaultRoute={[Function]}
+      onSetDefaultRoute={[Function]}
       path="/app/home"
     />
   </div>
@@ -156,6 +160,8 @@ exports[`home directories should render ADMIN directory entry in "Manage your da
     />
     <mockConstructor
       addBasePath={[Function]}
+      onChangeDefaultRoute={[Function]}
+      onSetDefaultRoute={[Function]}
       path="/app/home"
     />
   </div>
@@ -218,6 +224,8 @@ exports[`home directories should render DATA directory entry in "Ingest your dat
     />
     <mockConstructor
       addBasePath={[Function]}
+      onChangeDefaultRoute={[Function]}
+      onSetDefaultRoute={[Function]}
       path="/app/home"
     />
   </div>
@@ -320,6 +328,8 @@ exports[`home directories should render solutions in the "solution section" 1`]
     />
     <mockConstructor
       addBasePath={[Function]}
+      onChangeDefaultRoute={[Function]}
+      onSetDefaultRoute={[Function]}
       path="/app/home"
     />
   </div>
@@ -370,6 +380,8 @@ exports[`home header render 1`] = `
     />
     <mockConstructor
       addBasePath={[Function]}
+      onChangeDefaultRoute={[Function]}
+      onSetDefaultRoute={[Function]}
       path="/app/home"
     />
   </div>
@@ -432,6 +444,8 @@ exports[`home header should show "Dev tools" link if console is available 1`] =
     />
     <mockConstructor
       addBasePath={[Function]}
+      onChangeDefaultRoute={[Function]}
+      onSetDefaultRoute={[Function]}
       path="/app/home"
     />
   </div>
@@ -482,6 +496,8 @@ exports[`home header should show "Manage" link if stack management is available
     />
     <mockConstructor
       addBasePath={[Function]}
+      onChangeDefaultRoute={[Function]}
+      onSetDefaultRoute={[Function]}
       path="/app/home"
     />
   </div>
@@ -532,6 +548,8 @@ exports[`home isNewKibanaInstance should safely handle execeptions 1`] = `
     />
     <mockConstructor
       addBasePath={[Function]}
+      onChangeDefaultRoute={[Function]}
+      onSetDefaultRoute={[Function]}
       path="/app/home"
     />
   </div>
@@ -582,6 +600,8 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when t
     />
     <mockConstructor
       addBasePath={[Function]}
+      onChangeDefaultRoute={[Function]}
+      onSetDefaultRoute={[Function]}
       path="/app/home"
     />
   </div>
@@ -632,6 +652,8 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when th
     />
     <mockConstructor
       addBasePath={[Function]}
+      onChangeDefaultRoute={[Function]}
+      onSetDefaultRoute={[Function]}
       path="/app/home"
     />
   </div>
@@ -682,6 +704,8 @@ exports[`home should render home component 1`] = `
     />
     <mockConstructor
       addBasePath={[Function]}
+      onChangeDefaultRoute={[Function]}
+      onSetDefaultRoute={[Function]}
       path="/app/home"
     />
   </div>
@@ -732,6 +756,8 @@ exports[`home welcome should show the normal home page if loading fails 1`] = `
     />
     <mockConstructor
       addBasePath={[Function]}
+      onChangeDefaultRoute={[Function]}
+      onSetDefaultRoute={[Function]}
       path="/app/home"
     />
   </div>
@@ -782,6 +808,8 @@ exports[`home welcome should show the normal home page if welcome screen is disa
     />
     <mockConstructor
       addBasePath={[Function]}
+      onChangeDefaultRoute={[Function]}
+      onSetDefaultRoute={[Function]}
       path="/app/home"
     />
   </div>
@@ -839,6 +867,8 @@ exports[`home welcome stores skip welcome setting if skipped 1`] = `
     />
     <mockConstructor
       addBasePath={[Function]}
+      onChangeDefaultRoute={[Function]}
+      onSetDefaultRoute={[Function]}
       path="/app/home"
     />
   </div>
diff --git a/src/plugins/home/public/application/components/add_data/add_data.test.tsx b/src/plugins/home/public/application/components/add_data/add_data.test.tsx
index b6d97db7388c..9ba554dd2c22 100644
--- a/src/plugins/home/public/application/components/add_data/add_data.test.tsx
+++ b/src/plugins/home/public/application/components/add_data/add_data.test.tsx
@@ -27,6 +27,12 @@ jest.mock('../app_navigation_handler', () => {
   };
 });
 
+jest.mock('../../kibana_services', () => ({
+  getServices: () => ({
+    trackUiMetric: jest.fn(),
+  }),
+}));
+
 beforeEach(() => {
   jest.clearAllMocks();
 });
diff --git a/src/plugins/home/public/application/components/manage_data/manage_data.test.tsx b/src/plugins/home/public/application/components/manage_data/manage_data.test.tsx
index 18a58e86eaa3..69c7ec46a7a2 100644
--- a/src/plugins/home/public/application/components/manage_data/manage_data.test.tsx
+++ b/src/plugins/home/public/application/components/manage_data/manage_data.test.tsx
@@ -27,6 +27,12 @@ jest.mock('../app_navigation_handler', () => {
   };
 });
 
+jest.mock('../../kibana_services', () => ({
+  getServices: () => ({
+    trackUiMetric: jest.fn(),
+  }),
+}));
+
 beforeEach(() => {
   jest.clearAllMocks();
 });
diff --git a/src/plugins/home/public/application/components/solutions_section/solution_panel.test.tsx b/src/plugins/home/public/application/components/solutions_section/solution_panel.test.tsx
index ddfe1288ff86..091677f77e63 100644
--- a/src/plugins/home/public/application/components/solutions_section/solution_panel.test.tsx
+++ b/src/plugins/home/public/application/components/solutions_section/solution_panel.test.tsx
@@ -32,6 +32,12 @@ const solutionEntry = {
   order: 1,
 };
 
+jest.mock('../../kibana_services', () => ({
+  getServices: () => ({
+    trackUiMetric: jest.fn(),
+  }),
+}));
+
 const addBasePathMock = (path: string) => (path ? path : 'path');
 
 describe('SolutionPanel', () => {

From 8a65debca248852bf6e31a43c18c244bf4dd2f12 Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Mon, 2 Nov 2020 13:53:44 -0700
Subject: [PATCH 5/5] Applied feedback

---
 .../home/public/application/components/add_data/add_data.tsx    | 2 +-
 .../public/application/components/manage_data/manage_data.tsx   | 2 +-
 .../application/components/solutions_section/solution_panel.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/plugins/home/public/application/components/add_data/add_data.tsx b/src/plugins/home/public/application/components/add_data/add_data.tsx
index 4b2a3d2d5d22..eb710f0fcc16 100644
--- a/src/plugins/home/public/application/components/add_data/add_data.tsx
+++ b/src/plugins/home/public/application/components/add_data/add_data.tsx
@@ -74,8 +74,8 @@ export const AddData: FC<Props> = ({ addBasePath, features }) => {
             <Synopsis
               id={feature.id}
               onClick={(event: MouseEvent) => {
-                createAppNavigationHandler(feature.path)(event);
                 trackUiMetric(METRIC_TYPE.CLICK, `ingest_data_card_${feature.id}`);
+                createAppNavigationHandler(feature.path)(event);
               }}
               description={feature.description}
               iconType={feature.icon}
diff --git a/src/plugins/home/public/application/components/manage_data/manage_data.tsx b/src/plugins/home/public/application/components/manage_data/manage_data.tsx
index 86397e743047..afef5010d47a 100644
--- a/src/plugins/home/public/application/components/manage_data/manage_data.tsx
+++ b/src/plugins/home/public/application/components/manage_data/manage_data.tsx
@@ -63,8 +63,8 @@ export const ManageData: FC<Props> = ({ addBasePath, features }) => {
                 <Synopsis
                   id={feature.id}
                   onClick={(event: MouseEvent) => {
-                    createAppNavigationHandler(feature.path)(event);
                     trackUiMetric(METRIC_TYPE.CLICK, `manage_data_card_${feature.id}`);
+                    createAppNavigationHandler(feature.path)(event);
                   }}
                   description={feature.description}
                   iconType={feature.icon}
diff --git a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx
index f457d7bafbaf..bd8334e656b5 100644
--- a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx
+++ b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx
@@ -71,8 +71,8 @@ export const SolutionPanel: FC<Props> = ({ addBasePath, solution, apps = [] }) =
         className={`homSolutionPanel homSolutionPanel--${solution.id}`}
         href={addBasePath(solution.path)}
         onClick={(event: MouseEvent) => {
-          createAppNavigationHandler(solution.path)(event);
           trackUiMetric(METRIC_TYPE.CLICK, `solution_panel_${solution.id}`);
+          createAppNavigationHandler(solution.path)(event);
         }}
       >
         <EuiPanel className="homSolutionPanel__inner" paddingSize="none">