chore: adds docTile click event

Author: John P Vajda

src/components/quickstarts/QuickstartDataSources.js

@@ -1,60 +1,72 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import pluralize from 'pluralize';
-import { Surface, Link, Tag } from '@newrelic/gatsby-theme-newrelic';
+import { Surface, Link, Tag, useTessen } from '@newrelic/gatsby-theme-newrelic';
 import Intro from '../Intro';
 import { quickstart } from '../../types';
 
-const QuickstartDataSources = ({ quickstart }) => (
-  <>
-    <Intro
-      css={css`
-        margin-bottom: 16px;
-      `}
-    >
-      {quickstart.title} observability quickstart contains{' '}
-      {pluralize('data source', quickstart.documentation?.length ?? 0, true)}.
-      This is how you'll get your data into New Relic.{' '}
-    </Intro>
+const QuickstartDataSources = ({ quickstart }) => {
+  const tessen = useTessen();
 
-    <div
-      css={css`
-        display: grid;
-        grid-gap: 1rem;
-        grid-template-columns: repeat(3, 1fr);
+  const handleDocsTileClick = () => {
+    tessen.track('instantObservability', 'DocsTileClick', {
+      quickstartName: quickstart.name,
+      quickstartId: quickstart.id,
+    });
+  };
 
-        @media (max-width: 1180px) {
-          grid-template-columns: repeat(1, 1fr);
-        }
-      `}
-    >
-      {quickstart.documentation.map((doc, index) => (
-        <Surface
-          key={index}
-          as={Link}
-          to={doc.url}
-          base={Surface.BASE.PRIMARY}
-          css={css`
-            padding: 1rem;
-            color: inherit;
-          `}
-          interactive
-        >
-          <h3>{doc.name}</h3>
-          {doc.description && <p>{doc.description}</p>}
-          <Tag
+  return (
+    <>
+      <Intro
+        css={css`
+          margin-bottom: 16px;
+        `}
+      >
+        {quickstart.title} observability quickstart contains{' '}
+        {pluralize('data source', quickstart.documentation?.length ?? 0, true)}.
+        This is how you'll get your data into New Relic.{' '}
+      </Intro>
+
+      <div
+        css={css`
+          display: grid;
+          grid-gap: 1rem;
+          grid-template-columns: repeat(3, 1fr);
+
+          @media (max-width: 1180px) {
+            grid-template-columns: repeat(1, 1fr);
+          }
+        `}
+      >
+        {quickstart.documentation.map((doc, index) => (
+          <Surface
+            key={index}
+            as={Link}
+            to={doc.url}
+            base={Surface.BASE.PRIMARY}
+            onClick={handleDocsTileClick}
             css={css`
-              display: inline-block;
-              margin-bottom: 1rem;
+              padding: 1rem;
+              color: inherit;
             `}
+            interactive
           >
-            Docs
-          </Tag>
-        </Surface>
-      ))}
-    </div>
-  </>
-);
+            <h3>{doc.name}</h3>
+            {doc.description && <p>{doc.description}</p>}
+            <Tag
+              css={css`
+                display: inline-block;
+                margin-bottom: 1rem;
+              `}
+            >
+              Docs
+            </Tag>
+          </Surface>
+        ))}
+      </div>
+    </>
+  );
+};
 
 QuickstartDataSources.propTypes = {
   quickstart: quickstart.isRequired,