feat(driver.js): showing driverjs tutorial for e2e link

Author: technikhil314

helpers/driverjsTutorials.ts

@@ -75,7 +75,17 @@ const copyLinkShortcutTutorial: Tutorial[] = [
   },
 ]
 
-const diffTutorials: TutorialMetadata[] = [
+const CopyE2ELinkTutorial: Tutorial[] = [
+  {
+    element: '#copyLinkButton',
+    popover: {
+      title: 'Copy E2E link',
+      description: 'Now links for large data comparison are end-to-end encrytpted automatically. Read more about it on github repo.',
+    },
+  },
+]
+
+const diffV1Tutorials: TutorialMetadata[] = [
   {
     tutorial: actionBarTutorial,
     cookieName: 'isSkipScrollInSyncTutorial',
@@ -88,6 +98,25 @@ const diffTutorials: TutorialMetadata[] = [
     tutorial: copyLinkShortcutTutorial,
     cookieName: 'isSkipCopyLinkShortcutTutorial',
   },
+  {
+    tutorial: CopyE2ELinkTutorial,
+    cookieName: 'isSkipCopyE2ELinkTutorial',
+  }
+]
+
+const diffV2Tutorials: TutorialMetadata[] = [
+  {
+    tutorial: CopyE2ELinkTutorial,
+    cookieName: 'isSkipCopyE2ELinkTutorial',
+  },
+  {
+    tutorial: backButtonTutorial,
+    cookieName: 'isSkipBackButtonPersistsDataTutorial',
+  },
+  {
+    tutorial: copyLinkShortcutTutorial,
+    cookieName: 'isSkipCopyLinkShortcutTutorial',
+  },
 ]
 
 const comparePageTutorials: TutorialMetadata[] = [
@@ -102,8 +131,8 @@ const comparePageTutorials: TutorialMetadata[] = [
 ]
 
 const tutorialsMetadata: TutorialsMetadata = {
-  '/v1/diff': diffTutorials,
-  '/v2/diff': diffTutorials,
+  '/v1/diff': diffV1Tutorials,
+  '/v2/diff': diffV2Tutorials,
   '/': comparePageTutorials,
   '/v2': comparePageTutorials,
 }

helpers/isSkipCopyE2ELinkTutorial.ts

@@ -0,0 +1,16 @@
+export default function () {
+  const cookies = document.cookie.split(';')
+  const cookieMap: {
+    isSkipCopyE2ELinkTutorial?: string
+  } = {
+    isSkipCopyE2ELinkTutorial: 'false',
+  }
+  cookies.forEach((element) => {
+    const [name, val] = element.split('=')
+    const trimmedName = name.trim()
+    if (trimmedName === 'isSkipCopyE2ELinkTutorial') {
+      cookieMap[trimmedName] = val
+    }
+  })
+  return cookieMap.isSkipCopyE2ELinkTutorial === 'true'
+}

helpers/types.ts

@@ -5,6 +5,7 @@ export interface Cookies {
   isSkipBackButtonPersistsDataTutorial: boolean
   isSkipSubmitKbdShortcutTutorial: boolean
   isSkipCopyLinkShortcutTutorial: boolean
+  isSkipCopyE2ELinkTutorial: boolean
 }
 
 export interface Tutorial {

pages/v2/diff.vue

@@ -79,6 +79,7 @@ import {
   E2E_DATA_LOADING_INFO,
   E2E_DATA_NO_LONGER_AVAILABLE_ERROR,
 } from '~/constants/messages'
+import showTutorials from '~/helpers/driverjsTutorials'
 export default Vue.extend({
   components: { DiffActionBar, Navbar, Footer },
   layout: 'main',
@@ -138,8 +139,8 @@ export default Vue.extend({
       const url = new URL(window.location.href)
       const id = url.searchParams.get('id')
       const key = url.hash.replace(/^#/, '')
-      let response = null;
-        let data = null
+      let response = null
+      let data = null
       try {
         response = await fetch(`/api/getLink?id=${id}`)
         data = await response.json()
@@ -200,6 +201,7 @@ export default Vue.extend({
             )
           }
         }
+        showTutorials(this.$cookies, this.$route.path, this.$cookies.isDarkMode)
       })
     },
     unzipCommitData(data: string) {

pages/v2/index.vue

@@ -144,14 +144,14 @@ export default Vue.extend({
     },
   },
   mounted() {
-    showTutorials(this.$cookies, this.$route.path, this.$cookies.isDarkMode)
     document.addEventListener('keydown', this.handleCtrlEnter)
     // Hover on each property to see its docs!
     const lhs = document.getElementById('lhs')
     const rhs = document.getElementById('rhs')
     const theme = this.$cookies.isDarkMode ? 'vs-dark' : 'light'
     const monacoEditorOptions = getMonacoEditorDefaultOptions(theme)
     loader.init().then((monaco) => {
+      showTutorials(this.$cookies, this.$route.path, this.$cookies.isDarkMode)
       if (lhs) {
         this.lhsEditor = monaco.editor.create(lhs, {
           ...monacoEditorOptions,

plugins/cookie-injector.client.ts

@@ -6,6 +6,7 @@ import isSkipBackButtonPersistsDataTutorial from '~/helpers/isSkipBackButtonPers
 import isSkipSubmitKbdShortcutTutorial from '~/helpers/isSkipSubmitKbdShortcutTutorial'
 import { Cookies } from '~/helpers/types'
 import isSkipCopyLinkShortcutTutorial from '~/helpers/isSkipCopyLinkShortcutTutorial'
+import isSkipCopyE2ELinkTutorial from '~/helpers/isSkipCopyE2ELinkTutorial'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -40,6 +41,7 @@ const cookieInjectorPlugin: Plugin = (_context, inject) => {
       isSkipBackButtonPersistsDataTutorial(),
     isSkipSubmitKbdShortcutTutorial: isSkipSubmitKbdShortcutTutorial(),
     isSkipCopyLinkShortcutTutorial: isSkipCopyLinkShortcutTutorial(),
+    isSkipCopyE2ELinkTutorial: isSkipCopyE2ELinkTutorial(),
   })
 }