From 1ce0b0ff1f31c5a755a246f859c25d9763365a4c Mon Sep 17 00:00:00 2001
From: rudouglas <ruairidouglas@gmail.com>
Date: Fri, 11 Jun 2021 13:43:00 +0100
Subject: [PATCH] chore: adding NRBrowser and tidying

---
 src/components/Tabs/Bar.js       | 18 ++++++++--
 src/components/Tabs/BarItem.js   | 23 +++++++++++--
 src/pages/observability-packs.js | 57 ++++++++++++++++----------------
 3 files changed, 64 insertions(+), 34 deletions(-)

diff --git a/src/components/Tabs/Bar.js b/src/components/Tabs/Bar.js
index 76c1688d1..4c0b25400 100644
--- a/src/components/Tabs/Bar.js
+++ b/src/components/Tabs/Bar.js
@@ -2,17 +2,29 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import useMobileDetect from 'use-mobile-detect-hook';
 import { css } from '@emotion/react';
-
+import {
+  useTessen,
+  useInstrumentedData,
+} from '@newrelic/gatsby-theme-newrelic';
 import useTabs from './useTabs';
 
 const MobileTabControl = ({ children }) => {
   const [currentTab, setCurrentTab] = useTabs();
-
+  const tessen = useTessen();
+  useInstrumentedData(
+    { actionName: 'oPackTabToggle', currentTab },
+    { enabled: Boolean(currentTab) }
+  );
   // eslint gets angry about using props from React.Children.map
   /* eslint-disable react/prop-types */
   return (
     <select
-      onChange={(e) => setCurrentTab(e.target.value)}
+      onChange={(e) => {
+        setCurrentTab(e.target.value);
+        tessen.track('observabilityPack', `ObservabilityPackTabToggle`, {
+          oPackTabToggle: e.target.value,
+        });
+      }}
       css={css`
         width: 100%;
         margin-bottom: 1em;
diff --git a/src/components/Tabs/BarItem.js b/src/components/Tabs/BarItem.js
index 8f25dfb0e..9c303a67d 100644
--- a/src/components/Tabs/BarItem.js
+++ b/src/components/Tabs/BarItem.js
@@ -1,7 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
-
+import {
+  useTessen,
+  useInstrumentedData,
+} from '@newrelic/gatsby-theme-newrelic';
 import useTabs from './useTabs';
 
 const BarItem = ({ index, children, id, count, disabled }) => {
@@ -9,13 +12,27 @@ const BarItem = ({ index, children, id, count, disabled }) => {
 
   const isSelected =
     id === currentTab || (currentTab === undefined && index === 0);
-
+  const tessen = useTessen();
+  useInstrumentedData(
+    {
+      actionName: 'oPackTabToggle',
+      currentTab,
+      oPackTabCount: count,
+    },
+    { enabled: Boolean(currentTab) }
+  );
   return (
     <button
       role="tab"
       aria-controls={id}
       type="button"
-      onClick={() => !disabled && setCurrentTab(id)}
+      onClick={() => {
+        !disabled && setCurrentTab(id);
+        tessen.track('observabilityPack', `ObservabilityPackTabToggle`, {
+          oPackTabToggle: id,
+          oPackTabCount: count,
+        });
+      }}
       css={css`
         border: 0;
         background: none;
diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js
index 8cd35be55..749090ce8 100644
--- a/src/pages/observability-packs.js
+++ b/src/pages/observability-packs.js
@@ -9,7 +9,11 @@ import PackListTile from '../components/PackListTile';
 import PackList from '../components/PackList';
 import Select from '../components/Select';
 import SegmentedControl from '../components/SegmentedControl';
-import { SearchInput, useTessen } from '@newrelic/gatsby-theme-newrelic';
+import {
+  SearchInput,
+  useTessen,
+  useInstrumentedData,
+} from '@newrelic/gatsby-theme-newrelic';
 import { useQueryParam, StringParam } from 'use-query-params';
 import { useDebounce } from 'react-use';
 
@@ -42,12 +46,30 @@ const ObservabilityPacksPage = ({ data, location }) => {
   const [querySearch, setQuerySearch] = useQueryParam('search', StringParam);
   const [queryFilter, setQueryFilter] = useQueryParam('filter', StringParam);
   const [querySort, setQuerySort] = useQueryParam('sort', StringParam);
+  const [view, setView] = useState(VIEWS.GRID);
+  useInstrumentedData(
+    { actionName: 'oPackViewToggle', oPackViewState: view },
+    { enabled: Boolean(view) }
+  );
+  useInstrumentedData(
+    { actionName: 'oPackSort', oPackSortState: sortState },
+    { enabled: Boolean(searchTerm) }
+  );
+  useInstrumentedData(
+    { actionName: 'oPackFilter', oPackFilterState: containingFilterState },
+    { enabled: Boolean(containingFilterState) }
+  );
   useDebounce(
     () => {
       if (searchTerm && searchTerm !== '') {
         tessen.track('observabilityPack', `ObservabilityPackSearch`, {
-          observabilityPackSearchTerm: searchTerm,
+          oPackSearchTerm: searchTerm,
         });
+        if (typeof window !== 'undefined' && window.newrelic) {
+          window.newrelic.addPageAction('oPackSearch', {
+            oPackSearchTerm: searchTerm,
+          });
+        }
       }
     },
     1000,
@@ -65,8 +87,6 @@ const ObservabilityPacksPage = ({ data, location }) => {
     }
   }, [querySearch, queryFilter, querySort]);
 
-  const [view, setView] = useState(VIEWS.GRID);
-
   useEffect(() => {
     setView(view);
   }, [view]);
@@ -113,7 +133,6 @@ const ObservabilityPacksPage = ({ data, location }) => {
     setQuerySort,
     setQuerySearch,
   ]);
-
   return (
     <>
       <DevSiteSeo title="Observability Packs" location={location} />
@@ -172,8 +191,8 @@ const ObservabilityPacksPage = ({ data, location }) => {
               onChange={(e) => {
                 setSortState(e.target.value);
                 document.getElementById(e.target.id).blur();
-                tessen.track('observabilityPack', `ObservabilityPackFilter`, {
-                  filter: containingFilterState,
+                tessen.track('observabilityPack', `ObservabilityPackSort`, {
+                  oPackSortState: e.target.value,
                 });
               }}
             >
@@ -193,8 +212,8 @@ const ObservabilityPacksPage = ({ data, location }) => {
               onChange={(e) => {
                 setContainingFilterState(e.target.value);
                 document.getElementById(e.target.id).blur();
-                tessen.track('observabilityPack', `ObservabilityPackSort`, {
-                  sort: sortState,
+                tessen.track('observabilityPack', `ObservabilityPackFilter`, {
+                  oPackFilterState: containingFilterState,
                 });
               }}
             >
@@ -211,7 +230,7 @@ const ObservabilityPacksPage = ({ data, location }) => {
           onChange={(_e, view) => {
             setView(view);
             tessen.track('observabilityPack', `ObservabilityPackViewToggle`, {
-              viewToggle: view,
+              oPackViewState: view,
             });
           }}
         />
@@ -252,24 +271,6 @@ const ObservabilityPacksPage = ({ data, location }) => {
                     pack.logo ||
                     'https://via.placeholder.com/400x275.png?text=Image'
                   }
-                  onClick={() => {
-                    tessen.track(
-                      'ObservabilityPack',
-                      `ObservabilityPackClickThroughView`,
-                      {
-                        clickThroughFromView: view,
-                      }
-                    );
-                    tessen.track(
-                      'ObservabilityPack',
-                      `ObservabilityPackClickThroughPack`,
-                      {
-                        clickThroughToPackSlug: pack.fields.slug,
-                        clickThroughToPackId: pack.id,
-                        clickThroughToPackName: pack.name,
-                      }
-                    );
-                  }}
                   to={`${pack.fields.slug}`}
                 />
               );