Use consistent name for telemetry recording

2023-12-29 13:31:13 +01:00 · 2023-12-29 13:31:13 +01:00 · ce88978d43
--- a/src/app/(proper_react)/redesign/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/start-free-scan/StartFreeScanView.tsx
+++ b/src/app/(proper_react)/redesign/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/start-free-scan/StartFreeScanView.tsx
@ -23,7 +23,7 @@ export type Props = {

 export function StartFreeScanView(props: Props) {
  const l10n = useL10n();
-  const record = useTelemetry();
+  const recordTelemetry = useTelemetry();

  return (
    <FixView
@ -59,7 +59,7 @@ export function StartFreeScanView(props: Props) {
              href={process.env.NEXT_PUBLIC_HOW_IT_WORKS_SUMO_URL}
              target="_blank"
              onClick={() => {
-                record("link", "click", {
+                recordTelemetry("link", "click", {
                  link_id: "returning_user_info_scan_learn_more",
                });
              }}
@ -75,7 +75,7 @@ export function StartFreeScanView(props: Props) {
            variant="primary"
            href="/redesign/user/welcome/free-scan?referrer=fix"
            onPress={() => {
-              record("ctaButton", "click", {
+              recordTelemetry("ctaButton", "click", {
                button_id: "intent_to_start_free_scan",
              });
            }}
@ -88,7 +88,7 @@ export function StartFreeScanView(props: Props) {
            variant="secondary"
            href="/redesign/user/dashboard/fix/high-risk-data-breaches"
            onPress={() => {
-              record("ctaButton", "click", {
+              recordTelemetry("ctaButton", "click", {
                button_id: "skipped_free_scan",
              });
            }}
--- a/src/app/(proper_react)/redesign/(authenticated)/user/welcome/EnterInfo.tsx
+++ b/src/app/(proper_react)/redesign/(authenticated)/user/welcome/EnterInfo.tsx
@ -72,7 +72,7 @@ export const EnterInfo = ({
  const [invalidInputs, setInvalidInputs] = useState<Array<string>>([]);
  const [requestingScan, setRequestingScan] = useState(false);

-  const record = useTelemetry();
+  const recordTelemetry = useTelemetry();
  const explainerDialogState = useOverlayTriggerState({});
  const explainerDialogTrigger = useOverlayTrigger(
    { type: "dialog" },
@ -88,11 +88,11 @@ export const EnterInfo = ({
      if (isOpen) {
        // TODO: Uncomment popup_id after it has been added to metrics.yaml
        // in https://github.com/mozilla/blurts-server/pull/3913.
-        record("popup", "view", {
+        recordTelemetry("popup", "view", {
          // popup_id: "enter_scan_info_confirmation_modal",
        });
      } else {
-        record("button", "click", {
+        recordTelemetry("button", "click", {
          button_id: "edit_free_scan",
        });
      }
@ -189,7 +189,7 @@ export const EnterInfo = ({
  const handleOnSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

-    record("ctaButton", "click", {
+    recordTelemetry("ctaButton", "click", {
      button_id: "started_free_scan",
    });

@ -301,7 +301,7 @@ export const EnterInfo = ({
          // TODO: Figure out how to intercept the fetch request in a test:
          /* c8 ignore next */
          onPress={() => {
-            record("ctaButton", "click", {
+            recordTelemetry("ctaButton", "click", {
              button_id: "confirmed_free_scan",
            });
            handleRequestScan();
@ -335,7 +335,7 @@ export const EnterInfo = ({
          // TODO: Add unit test when changing this code:
          /* c8 ignore next */
          onClick={() => {
-            record("button", "click", {
+            recordTelemetry("button", "click", {
              button_id: "why_do_we_need_this_info",
            });
            explainerDialogState.open();
@ -365,7 +365,7 @@ export const EnterInfo = ({
                  validationState={validationState}
                  inputValue={value}
                  onFocus={() => {
-                    record("field", "focus", {
+                    recordTelemetry("field", "focus", {
                      field_id: key,
                    });
                  }}
@ -384,7 +384,7 @@ export const EnterInfo = ({
                  validationState={validationState}
                  value={value}
                  onFocus={() => {
-                    record("field", "focus", {
+                    recordTelemetry("field", "focus", {
                      field_id: key,
                    });
                  }}
--- a/src/app/(proper_react)/redesign/(authenticated)/user/welcome/GetStarted.tsx
+++ b/src/app/(proper_react)/redesign/(authenticated)/user/welcome/GetStarted.tsx
@ -24,7 +24,7 @@ export type Props = {

 export const GetStarted = (props: Props) => {
  const l10n = useL10n();
-  const record = useTelemetry();
+  const recordTelemetry = useTelemetry();
  const explainerDialogState = useOverlayTriggerState({});
  const explainerDialogTrigger = useOverlayTrigger(
    { type: "dialog" },
@ -47,7 +47,7 @@ export const GetStarted = (props: Props) => {
          {...buttonProps}
          ref={triggerRef}
          onClick={() => {
-            record("button", "click", {
+            recordTelemetry("button", "click", {
              button_id: "welcome_data_protection",
            });
            explainerDialogState.open();
--- a/src/app/(proper_react)/redesign/(authenticated)/user/welcome/View.tsx
+++ b/src/app/(proper_react)/redesign/(authenticated)/user/welcome/View.tsx
@ -42,7 +42,7 @@ export const View = ({
  const skipInitialStep = stepId === "enterInfo";
  const [currentStep, setCurrentStep] = useState<StepId>(stepId);
  const router = useRouter();
-  const record = useTelemetry();
+  const recordTelemetry = useTelemetry();

  useEffect(() => {
    let pageName = "welcome";
@ -52,11 +52,11 @@ export const View = ({
      pageName = "scanning_for_exposures";
    }

-    record("page", "view", {
+    recordTelemetry("page", "view", {
      utm_campaign: skipInitialStep ? "legacy_user" : "new_user",
      utm_source: pageName,
    });
-  }, [currentStep, record, skipInitialStep]);
+  }, [currentStep, recordTelemetry, skipInitialStep]);

  const currentComponent =
    currentStep === "findExposures" ? (
@ -74,7 +74,7 @@ export const View = ({
        previousRoute={previousRoute}
        skipInitialStep={skipInitialStep}
        onGoBack={() => {
-          record("button", "click", {
+          recordTelemetry("button", "click", {
            button_id: "declined_free_scan",
          });

@ -89,7 +89,7 @@ export const View = ({
      <GetStarted
        dataBrokerCount={dataBrokerCount}
        onStart={() => {
-          record("ctaButton", "click", {
+          recordTelemetry("ctaButton", "click", {
            button_id: "welcome_start",
          });
          setCurrentStep("enterInfo");
--- a/src/app/components/client/PremiumUpsellDialog.tsx
+++ b/src/app/components/client/PremiumUpsellDialog.tsx
@ -73,7 +73,7 @@ function PremiumUpsellDialogContent({
  const l10n = useL10n();
  const defaultSelectedKey = "yearly";
  const [selectedTab, setSelectedTab] = useState<Key>(defaultSelectedKey);
-  const record = useTelemetry();
+  const recordTelemetry = useTelemetry();

  const isMonthly = selectedTab === "monthly";
  const tabsData = [
@ -100,7 +100,7 @@ function PremiumUpsellDialogContent({
          tabs={tabsData}
          defaultSelectedKey={defaultSelectedKey}
          onSelectionChange={(selectedKey) => {
-            record("button", "click", {
+            recordTelemetry("button", "click", {
              button_id:
                selectedKey === "monthly"
                  ? "selected_monthly_plan"
@ -156,7 +156,7 @@ function PremiumUpsellDialogContent({
          //       the back-end because the page unloads before we can do so.
          //       This will be dealt with in upstream Glean:
          //       https://matrix.to/#/!SCdsJdSTaQHjzEVrAE:mozilla.org/$muLULIgsOMaLwe3HR6HI_oJbMkyD5gZBoRN3GmDL8Ko
-          record("upgradeIntent", "click", {
+          recordTelemetry("upgradeIntent", "click", {
            button_id: isMonthly
              ? "intent_to_purchase_monthly_plan_nav_modal"
              : "intent_to_purchase_yearly_plan_nav_modal",
@ -183,7 +183,7 @@ function PremiumUpsellDialog({
  ...otherProps
 }: PremiumUpsellDialogProps & OverlayTriggerProps) {
  const l10n = useL10n();
-  const record = useTelemetry();
+  const recordTelemetry = useTelemetry();

  return (
    <div className={styles.modal}>
@ -193,7 +193,7 @@ function PremiumUpsellDialog({
            title={l10n.getString("premium-upsell-dialog-title")}
            illustration={<Image src={ModalImage} alt="" />}
            onDismiss={() => {
-              record("button", "click", {
+              recordTelemetry("button", "click", {
                button_id: "close_upsell_modal",
              });
              return void state.close();
--- a/src/app/hooks/mocks/useTelemetry.ts
+++ b/src/app/hooks/mocks/useTelemetry.ts
@ -4,8 +4,8 @@

 import type { useTelemetry as ogUseTelemetry } from "../useTelemetry";

-const mockRecord = jest.fn();
+const mockedRecordTelemetry = jest.fn();

 export const useTelemetry: typeof ogUseTelemetry = () => {
-  return mockRecord as ReturnType<typeof ogUseTelemetry>;
+  return mockedRecordTelemetry as ReturnType<typeof ogUseTelemetry>;
 };
--- a/src/app/hooks/useTelemetry.ts
+++ b/src/app/hooks/useTelemetry.ts
@ -23,7 +23,7 @@ export const useTelemetry = () => {
  const { gtag } = useGa();

  const { Glean, Ga } = TelemetryPlatforms;
-  const record = <
+  const recordTelemetry = <
    EventModule extends keyof GleanMetricMap,
    EventName extends keyof GleanMetricMap[EventModule],
  >(
@ -53,5 +53,5 @@ export const useTelemetry = () => {
    }
  };

-  return record;
+  return recordTelemetry;
 };