Add second CM6 switch-away survey (#10789)

Restart CM6 switch-away survey

GitOrigin-RevId: 1d62aaf27834cb3919f6ca30c269a1ef3c2e9a5e

services/web/app/src/Features/Project/ProjectController.js

@@ -1260,6 +1260,7 @@ const ProjectController = {
               showUpgradePrompt,
               fixedSizeDocument: true,
               useOpenTelemetry: Settings.useOpenTelemetryClient,
+              showCM6SwitchAwaySurvey: Settings.showCM6SwitchAwaySurvey,
             })
             timer.done()
           }

services/web/app/views/project/editor/editor.pug

@@ -1,7 +1,3 @@
-//- We will be restarting the survey later after some time
-//- Until then, the component will not be rendered
-- var showCM6SwitchAwaySurvey = false
-
 div.full-size(
 	ng-show="ui.view == 'editor' || ui.view === 'file'"
 	layout="pdf"
@@ -16,7 +12,7 @@ div.full-size(
 	custom-toggler-msg-when-open=hasFeature('custom-togglers') ? translate("tooltip_hide_pdf") : false
 	custom-toggler-msg-when-closed=hasFeature('custom-togglers') ? translate("tooltip_show_pdf") : false
 )
-	if (showCM6SwitchAwaySurvey)
+	if (settings.showCM6SwitchAwaySurvey)
 		cm6-switch-away-survey()
 
 	include ./editor-pane

services/web/app/views/project/editor/meta.pug

@@ -34,6 +34,7 @@ meta(name="ol-legacyEditorThemes" data-type="json" content=legacyEditorThemes)
 meta(name="ol-showUpgradePrompt" data-type="boolean" content=showUpgradePrompt)
 meta(name="ol-useOpenTelemetry" data-type="boolean" content=useOpenTelemetry)
 meta(name="ol-showSupport", data-type="boolean" content=showSupport)
+meta(name="ol-showCM6SwitchAwaySurvey", data-type="boolean" content=showCM6SwitchAwaySurvey)
 
 - var fileActionI18n = ['edited', 'renamed', 'created', 'deleted'].reduce((acc, i) => {acc[i] = translate('file_action_' + i); return acc}, {})
 meta(name="ol-fileActionI18n" data-type="json" content=fileActionI18n)

services/web/frontend/js/features/source-editor/components/cm6-switch-away-survey.tsx

@@ -1,8 +1,12 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Button } from 'react-bootstrap'
-import customLocalStorage from '../../../infrastructure/local-storage'
 import useScopeValue from '../../../shared/hooks/use-scope-value'
 import getMeta from '../../../utils/meta'
+import {
+  hasSeenCM6SwitchAwaySurvey,
+  setHasSeenCM6SwitchAwaySurvey,
+} from '../utils/switch-away-survey'
+import { sendMB } from '../../../infrastructure/event-tracking'
 
 type CM6SwitchAwaySurveyState = 'disabled' | 'enabled' | 'shown'
 
@@ -13,21 +17,20 @@ export default function CM6SwitchAwaySurvey() {
   const initialRichTextPreference = useRef<boolean>(richText)
 
   useEffect(() => {
-    // if cm6 is not available, don't show the survey
+    // If cm6 is not available, don't show the survey
     if (!getMeta('ol-showNewSourceEditorOption')) {
       return
     }
 
-    // If the user has previously seen the survey, then don't show it again
-    const hasSeenCM6SwitchAwaySurvey = customLocalStorage.getItem(
-      'editor.has_seen_cm6_switch_away_survey'
-    )
-    if (hasSeenCM6SwitchAwaySurvey) return
+    // If the user has previously seen any switch-away survey, then don't show
+    // the current one
+    if (hasSeenCM6SwitchAwaySurvey()) return
 
     if (initialRichTextPreference.current) {
       if (!richText && newSourceEditor) {
-        // If user change from rich text to cm6, we remove the rich text preference
-        // so if user use rich text -> cm6 -> ace, we will show the survey
+        // If user change from rich text to cm6, we remove the rich text
+        // preference so if user use rich text -> cm6 -> ace, we will show the
+        // current survey
         initialRichTextPreference.current = false
       }
 
@@ -50,10 +53,7 @@ export default function CM6SwitchAwaySurvey() {
       setTimeout(() => {
         if (state === 'enabled') {
           setState('shown')
-          customLocalStorage.setItem(
-            'editor.has_seen_cm6_switch_away_survey',
-            true
-          )
+          setHasSeenCM6SwitchAwaySurvey()
         }
       }, TIME_FOR_SURVEY_TO_APPEAR)
     }
@@ -69,6 +69,11 @@ export default function CM6SwitchAwaySurvey() {
     setState('disabled')
   }, [])
 
+  const handleFollowLink = useCallback(() => {
+    sendMB('cm6-switch-away-survey')
+    setState('disabled')
+  }, [])
+
   if (state !== 'shown') {
     return null
   }
@@ -93,11 +98,11 @@ export default function CM6SwitchAwaySurvey() {
         </div>
         <div style={{ display: 'inline-flex' }}>
           <a
-            href="https://forms.gle/aW5tMRASpQ7Snds6A"
+            href="https://forms.gle/Ygv8gLZ4N8LepQj56"
             className="btn btn-sm btn-info"
             target="_blank"
             rel="noreferrer"
-            onClick={handleClose}
+            onClick={handleFollowLink}
           >
             Take survey
           </a>

services/web/frontend/js/features/source-editor/utils/switch-away-survey.ts

@@ -0,0 +1,11 @@
+import localStorage from '../../../infrastructure/local-storage'
+
+const surveyOneKey = 'editor.has_seen_cm6_switch_away_survey'
+
+export function setHasSeenCM6SwitchAwaySurvey() {
+  localStorage.setItem(surveyOneKey, true)
+}
+
+export function hasSeenCM6SwitchAwaySurvey() {
+  return !!localStorage.getItem(surveyOneKey)
+}

services/web/frontend/js/ide/editor/EditorManager.js

@@ -22,6 +22,7 @@ import './controllers/SavingNotificationController'
 import './controllers/CompileButton'
 import './controllers/SwitchToPDFButton'
 import getMeta from '../../utils/meta'
+import { hasSeenCM6SwitchAwaySurvey } from '../../features/source-editor/utils/switch-away-survey'
 
 let EditorManager
 
@@ -176,11 +177,7 @@ export default EditorManager = (function () {
         return false
       }
 
-      // We will be restarting the survey later after some time
-      // Until then, we won't force user to use cm6 if they already use ace
-      const showCM6SwitchAwaySurvey = false
-
-      if (!showCM6SwitchAwaySurvey) {
+      const storedPrefIsCM6 = () => {
         const sourceEditor = this.localStorage(
           `editor.source_editor.${this.$scope.project_id}`
         )
@@ -188,19 +185,17 @@ export default EditorManager = (function () {
         return sourceEditor === 'cm6' || sourceEditor == null
       }
 
-      // the key will be changed when we decided to restart the survey
-      const hasSeenCM6SwitchAwaySurvey = this.localStorage(
-        'editor.has_seen_cm6_switch_away_survey'
-      )
+      const showCM6SwitchAwaySurvey = getMeta('ol-showCM6SwitchAwaySurvey')
 
-      if (hasSeenCM6SwitchAwaySurvey) {
-        const sourceEditor = this.localStorage(
-          `editor.source_editor.${this.$scope.project_id}`
-        )
+      if (!showCM6SwitchAwaySurvey) {
+        return storedPrefIsCM6()
+      }
 
-        return sourceEditor === 'cm6' || sourceEditor == null
+      if (hasSeenCM6SwitchAwaySurvey()) {
+        return storedPrefIsCM6()
       } else {
-        // force user to switch to cm6 if they haven't seen the switch away survey
+        // force user to switch to cm6 if they haven't seen either of the
+        // switch-away surveys
         return true
       }
     }

services/web/frontend/stylesheets/app/editor.less

@@ -811,7 +811,9 @@ CodeMirror
   z-index: @zindex-popover;
 
   .btn.close {
-    background-color: @ol-blue;
+    background-color: transparent;
+    color: #fff;
+    opacity: 1;
   }
 
   .warning-content {