Update exiting clicks to enum

src/lib/actions/analytics.ts

@@ -139,9 +139,13 @@ export function isTrackingAllowed() {
 }
 
 export enum Click {
+    BreadcrumbClick = 'click_breadcrumb',
     KeyCreateClick = 'click_key_create',
+    MenuDropDownClick = 'click_menu_dropdown',
+    ModalCloseClick = 'click_close_modal',
     PlatformCreateClick = 'click_platform_create',
     OrganizationClickCreate = 'click_create_organization',
+    OrganizationClickUpgrade = 'click_organization_upgrade',
     OnboardingSetupDatabaseClick = 'click_onboarding_setup_database',
     OnboardingApiReferencesClick = 'click_onboarding_api_references',
     OnboardingTutorialsClick = 'click_onboarding_tutorials',

src/lib/components/fakeModal.svelte

@@ -2,7 +2,7 @@
     import { Alert } from '$lib/components';
     import { onMount } from 'svelte';
     import Form from '$lib/elements/forms/form.svelte';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { clickOnEnter } from '$lib/helpers/a11y';
 
     export let show = false;
@@ -23,7 +23,7 @@
 
     function handleBLur(event: MouseEvent) {
         if (event.target === backdrop) {
-            trackEvent('click_close_modal', {
+            trackEvent(Click.ModalCloseClick, {
                 from: 'backdrop'
             });
             closeModal();
@@ -38,7 +38,7 @@
     function handleKeydown(event: KeyboardEvent) {
         if (event.key === 'Escape') {
             event.preventDefault();
-            trackEvent('click_close_modal', {
+            trackEvent(Click.ModalCloseClick, {
                 from: 'escape'
             });
             closeModal();
@@ -100,7 +100,7 @@
                                 aria-label="Close Modal"
                                 title="Close Modal"
                                 on:click={() =>
-                                    trackEvent('click_close_modal', {
+                                    trackEvent(Click.ModalCloseClick, {
                                         from: 'button'
                                     })}
                                 on:click={closeModal}>

src/lib/components/modalSideCol.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { ModalWrapper } from '$lib/components';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Click, trackEvent } from '$lib/actions/analytics';
 
     export let show = false;
     export let title = '';
@@ -28,7 +28,7 @@
                         aria-label="Close Modal"
                         title="Close Modal"
                         on:click={() =>
-                            trackEvent('click_close_modal', {
+                            trackEvent(Click.ModalCloseClick, {
                                 from: 'button'
                             })}
                         on:click={close}>

src/lib/components/modalWrapper.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { disableCommands } from '$lib/commandCenter';
 
     export let show = false;
@@ -23,7 +23,7 @@
 
     function handleBLur(event: MouseEvent) {
         if (event.target === dialog) {
-            trackEvent('click_close_modal', {
+            trackEvent(Click.ModalCloseClick, {
                 from: 'backdrop'
             });
             closeModal();
@@ -50,7 +50,7 @@
     function handleKeydown(event: KeyboardEvent) {
         if (event.key === 'Escape') {
             event.preventDefault();
-            trackEvent('click_close_modal', {
+            trackEvent(Click.ModalCloseClick, {
                 from: 'escape'
             });
             closeModal();

src/lib/layout/breadcrumbs.svelte

@@ -6,12 +6,12 @@
 </script>
 
 <script lang="ts">
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Click, trackEvent } from '$lib/actions/analytics';
 
     export let breadcrumbs: Breadcrumb[];
 
     function track() {
-        trackEvent('click_breadcrumb');
+        trackEvent(Click.BreadcrumbClick);
     }
 </script>
 

src/lib/layout/header.svelte

@@ -6,7 +6,7 @@
     import { user } from '$lib/stores/user';
     import { organizationList, organization, newOrgModal } from '$lib/stores/organization';
     import { page } from '$app/stores';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { tooltip } from '$lib/actions/tooltip';
     import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
     import Button from '$lib/elements/forms/button.svelte';
@@ -53,7 +53,7 @@
     }
 
     $: if (showDropdown) {
-        trackEvent('click_menu_dropdown');
+        trackEvent(Click.MenuDropDownClick);
     }
 
     const slideFade: typeof slide = (node, options) => {
@@ -97,7 +97,7 @@
                 disabled={$organization?.markedForDeletion}
                 href={$upgradeURL}
                 on:click={() => {
-                    trackEvent('click_organization_upgrade', {
+                    trackEvent(Click.OrganizationClickUpgrade, {
                         from: 'button',
                         source: 'top_nav'
                     });