From 54eaf79b5f87ab1baf5379b459792e9f443d52e7 Mon Sep 17 00:00:00 2001
From: prerna-parashar <78053555+prerna-parashar@users.noreply.github.com>
Date: Tue, 6 Sep 2022 09:55:33 -0700
Subject: [PATCH] satellite/analytics: Re-added user click events in Access
 Management flow (#5151)

* Re-added user click events in Access Management flow
---
 satellite/analytics/service.go                |  2 +-
 .../accessGrants/CreateAccessModal.vue        |  9 +++-----
 .../accessGrants/modals/CreateFormModal.vue   | 21 +++++++++++++++----
 .../accessGrants/modals/EncryptFormModal.vue  |  7 +++++++
 .../accessGrants/modals/GrantCreatedModal.vue | 15 +++++++++++++
 5 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/satellite/analytics/service.go b/satellite/analytics/service.go
index b2449fc5f..726adf502 100644
--- a/satellite/analytics/service.go
+++ b/satellite/analytics/service.go
@@ -59,7 +59,7 @@ const (
 	eventCopyToClipboardClicked     = "Copy to Clipboard Clicked"
 	eventCreateAccessGrantClicked   = "Create Access Grant Clicked"
 	eventCreateS3CredentialsClicked = "Create S3 Credentials Clicked"
-	eventKeysForCLIClicked          = "Keys for CLI Clicked"
+	eventKeysForCLIClicked          = "Create Keys For CLI Clicked"
 )
 
 var (
diff --git a/web/satellite/src/components/accessGrants/CreateAccessModal.vue b/web/satellite/src/components/accessGrants/CreateAccessModal.vue
index 482fcbdab..dab740fa4 100644
--- a/web/satellite/src/components/accessGrants/CreateAccessModal.vue
+++ b/web/satellite/src/components/accessGrants/CreateAccessModal.vue
@@ -242,21 +242,18 @@ export default class CreateAccessModal extends Vue {
             try {
                 await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, {accessGrant: this.access});
 
-                await this.$notify.success('Gateway credentials were generated successfully');
-                
                 await this.analytics.eventTriggered(AnalyticsEvent.GATEWAY_CREDENTIALS_CREATED);
 
+                await this.$notify.success('Gateway credentials were generated successfully');
+                
                 this.areKeysVisible = true;
             } catch (error) {
                 await this.$notify.error(error.message);
             }
         } else if (this.checkedType === 'api') {
             await this.analytics.eventTriggered(AnalyticsEvent.API_ACCESS_CREATED);
-        } else if (this.checkedType === 'access') {
-            await this.analytics.eventTriggered(AnalyticsEvent.ACCESS_GRANT_CREATED);
         }
-
-        this.analytics.eventTriggered(AnalyticsEvent.CREATE_KEYS_CLICKED); 
+        this.analytics.eventTriggered(AnalyticsEvent.ACCESS_GRANT_CREATED);
         this.accessGrantStep = 'grantCreated';
     }
 
diff --git a/web/satellite/src/components/accessGrants/modals/CreateFormModal.vue b/web/satellite/src/components/accessGrants/modals/CreateFormModal.vue
index 11a5cacb6..af9bb978d 100644
--- a/web/satellite/src/components/accessGrants/modals/CreateFormModal.vue
+++ b/web/satellite/src/components/accessGrants/modals/CreateFormModal.vue
@@ -40,7 +40,7 @@
                         @mouseover="toggleTooltipHover('access','over')"
                         @mouseleave="toggleTooltipHover('access','leave')"
                     >
-                        <span class="tooltip-text">Keys to upload, delete, and view your project's data.  <a class="tooltip-link" href="https://storj-labs.gitbook.io/dcs/concepts/access/access-grants" target="_blank" rel="noreferrer noopener">Learn More</a></span>
+                        <span class="tooltip-text">Keys to upload, delete, and view your project's data.  <a class="tooltip-link" href="https://docs.storj.io/dcs/concepts/access/access-grants" target="_blank" rel="noreferrer noopener" @click="trackPageVisit('https://docs.storj.io/dcs/concepts/access/access-grants')">Learn More</a></span>
                     </div>
                 </div>
                 <div class="access-grant__modal-container__body-container__type__type-container">
@@ -66,7 +66,7 @@
                         @mouseover="toggleTooltipHover('s3','over')"
                         @mouseleave="toggleTooltipHover('s3','leave')"
                     >
-                        <span class="tooltip-text">Generates access key, secret key, and endpoint to use in your S3-supporting application.  <a class="tooltip-link" href="https://docs.storj.io/dcs/api-reference/s3-compatible-gateway" target="_blank" rel="noreferrer noopener">Learn More</a></span>
+                        <span class="tooltip-text">Generates access key, secret key, and endpoint to use in your S3-supporting application.  <a class="tooltip-link" href="https://docs.storj.io/dcs/api-reference/s3-compatible-gateway" target="_blank" rel="noreferrer noopener" @click="trackPageVisit('https://docs.storj.io/dcs/api-reference/s3-compatible-gateway')">Learn More</a></span>
                     </div>
                 </div>
                 <div class="access-grant__modal-container__body-container__type__type-container">
@@ -92,7 +92,7 @@
                         @mouseover="toggleTooltipHover('api','over')"
                         @mouseleave="toggleTooltipHover('api','leave')"
                     >
-                        <span class="tooltip-text">Creates access grant to run in the command line.  <a class="tooltip-link" href="https://docs.storj.io/dcs/getting-started/quickstart-uplink-cli/generate-access-grants-and-tokens/generate-a-token" target="_blank" rel="noreferrer noopener">Learn More</a></span>
+                        <span class="tooltip-text">Creates access grant to run in the command line.  <a class="tooltip-link" href="https://docs.storj.io/dcs/getting-started/quickstart-uplink-cli/generate-access-grants-and-tokens/generate-a-token" target="_blank" rel="noreferrer noopener" @click="trackPageVisit('https://docs.storj.io/dcs/getting-started/quickstart-uplink-cli/generate-access-grants-and-tokens/generate-a-token')">Learn More</a></span>
                     </div>
                 </div>
             </div>
@@ -178,7 +178,7 @@
                     </div> -->
         </div>
         <div class="access-grant__modal-container__footer-container">
-            <a href="https://docs.storj.io/dcs/concepts/access/access-grants/api-key" target="_blank" rel="noopener noreferrer">
+            <a href="https://docs.storj.io/dcs/concepts/access/access-grants/api-key" target="_blank" rel="noopener noreferrer" @click="trackPageVisit('https://docs.storj.io/dcs/concepts/access/access-grants/api-key')">
                 <v-button
                     label="Learn More"
                     width="150px"
@@ -218,6 +218,9 @@ import DurationSelection from '@/components/accessGrants/permissions/DurationSel
 import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
 import { AccessGrant } from '@/types/accessGrants';
 
+import { AnalyticsHttpApi } from '@/api/analytics';
+import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+
 type ShowPermissions = {
     show: boolean,
     position: string
@@ -263,6 +266,8 @@ export default class CreateFormModal extends Vue {
     public tooltipHover = '';
     public tooltipVisibilityTimer;
 
+    private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
+
     public mounted(): void {
         this.showAllPermissions = {show: false, position: "up"};
     }
@@ -314,6 +319,7 @@ export default class CreateFormModal extends Vue {
             this.propogateInfo()
             this.$emit('encrypt');
         }
+        this.analytics.eventTriggered(AnalyticsEvent.ENCRYPT_MY_ACCESS_CLICKED);
     }
 
     public toggleAllPermission(type): void {
@@ -360,6 +366,13 @@ export default class CreateFormModal extends Vue {
         }
     }
 
+    /**
+     * Sends "trackPageVisit" event to segment and opens link.
+     */
+    public trackPageVisit(link: string): void {
+        this.analytics.pageVisit(link);
+    }
+
 }
 </script>
 
diff --git a/web/satellite/src/components/accessGrants/modals/EncryptFormModal.vue b/web/satellite/src/components/accessGrants/modals/EncryptFormModal.vue
index dd2dbbf0d..2925937ea 100644
--- a/web/satellite/src/components/accessGrants/modals/EncryptFormModal.vue
+++ b/web/satellite/src/components/accessGrants/modals/EncryptFormModal.vue
@@ -168,6 +168,9 @@ import AccessKeyIcon from '@/../static/images/accessGrants/accessKeyIcon.svg';
 import ThumbPrintIcon from '@/../static/images/accessGrants/thumbPrintIcon.svg';
 import DownloadIcon from '../../../../static/images/common/download.svg';
 
+import { AnalyticsHttpApi } from '@/api/analytics';
+import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+
 // @vue/component
 @Component({
     components: {
@@ -190,6 +193,8 @@ export default class EncryptFormModal extends Vue {
     private acknowledgementCheck = false;
     public currentDate = new Date().toISOString();
 
+    private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
+
     @Watch('passphrase')
     public applyPassphrase(): void {
         this.$emit('apply-passphrase', this.passphrase);
@@ -220,6 +225,7 @@ export default class EncryptFormModal extends Vue {
     public onCopyPassphraseClick(): void {
         this.$copyText(this.passphrase);
         this.isPassphraseCopied = true;
+        this.analytics.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED);
         this.$notify.success(`Passphrase was copied successfully`);
     }
 
@@ -229,6 +235,7 @@ export default class EncryptFormModal extends Vue {
     public downloadPassphrase(): void {
         this.isPassphraseDownloaded = true;
         Download.file(this.passphrase, `passphrase-${this.currentDate}.txt`)
+        this.analytics.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED);
     }
 }
 </script>
diff --git a/web/satellite/src/components/accessGrants/modals/GrantCreatedModal.vue b/web/satellite/src/components/accessGrants/modals/GrantCreatedModal.vue
index 0cdb1d268..f9488663e 100644
--- a/web/satellite/src/components/accessGrants/modals/GrantCreatedModal.vue
+++ b/web/satellite/src/components/accessGrants/modals/GrantCreatedModal.vue
@@ -165,6 +165,7 @@
                 href="https://docs.storj.io/dcs/api-reference/s3-compatible-gateway"
                 target="_blank"
                 rel="noopener noreferrer"
+                @click="trackPageVisit('https://docs.storj.io/dcs/api-reference/s3-compatible-gateway')"
             >
                 <v-button
                     label="Learn More"
@@ -212,6 +213,9 @@ import VButton from '@/components/common/VButton.vue';
 
 import { EdgeCredentials } from '@/types/accessGrants';
 
+import { AnalyticsHttpApi } from '@/api/analytics';
+import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+
 
 // @vue/component
 @Component({
@@ -237,6 +241,8 @@ export default class GrantCreatedModal extends Vue {
     private areCredentialsDownloaded = false;
     private isAccessGrantCopied = false;
 
+    private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
+
     /**
      * Global isLoading Variable
      **/
@@ -264,6 +270,7 @@ export default class GrantCreatedModal extends Vue {
     public onCopyAccessGrantClick(): void {
         this.$copyText(this.restrictedKey);
         this.isAccessGrantCopied = true;
+        this.analytics.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED);
         this.$notify.success(`Access Grant was copied successfully`);
     }
 
@@ -278,6 +285,7 @@ export default class GrantCreatedModal extends Vue {
         }
         this.areCredentialsDownloaded = true;
         Download.file(credentialMap[this.checkedType], `${this.checkedType}-credentials-${this.currentDate}.txt`)
+        this.analytics.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED);
     }
 
     /**
@@ -286,6 +294,13 @@ export default class GrantCreatedModal extends Vue {
     public learnMore(): void{
         window.open("https://docs.storj.io/dcs/api-reference/s3-compatible-gateway", '_blank');
     }
+
+    /**
+     * Sends "trackPageVisit" event to segment and opens link.
+     */
+    public trackPageVisit(link: string): void {
+        this.analytics.pageVisit(link);
+    }
 }
 </script>