From 08567c290eb130d8f031854a132e530f75fbb1c6 Mon Sep 17 00:00:00 2001 From: Tim Down Date: Tue, 6 Dec 2022 14:56:12 +0000 Subject: [PATCH] Add second CM6 switch-away survey (#10789) Restart CM6 switch-away survey GitOrigin-RevId: 1d62aaf27834cb3919f6ca30c269a1ef3c2e9a5e --- .../src/Features/Project/ProjectController.js | 1 + .../web/app/views/project/editor/editor.pug | 6 +--- .../web/app/views/project/editor/meta.pug | 1 + .../components/cm6-switch-away-survey.tsx | 35 +++++++++++-------- .../source-editor/utils/switch-away-survey.ts | 11 ++++++ .../frontend/js/ide/editor/EditorManager.js | 25 ++++++------- .../web/frontend/stylesheets/app/editor.less | 4 ++- 7 files changed, 47 insertions(+), 36 deletions(-) create mode 100644 services/web/frontend/js/features/source-editor/utils/switch-away-survey.ts diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js index 458d8a4ae0..02464c2485 100644 --- a/services/web/app/src/Features/Project/ProjectController.js +++ b/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() } diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug index 0092aeda81..7e510d76e7 100644 --- a/services/web/app/views/project/editor/editor.pug +++ b/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 diff --git a/services/web/app/views/project/editor/meta.pug b/services/web/app/views/project/editor/meta.pug index 034bc7ba2d..3589225576 100644 --- a/services/web/app/views/project/editor/meta.pug +++ b/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) diff --git a/services/web/frontend/js/features/source-editor/components/cm6-switch-away-survey.tsx b/services/web/frontend/js/features/source-editor/components/cm6-switch-away-survey.tsx index d8b2ba9365..67a44a6599 100644 --- a/services/web/frontend/js/features/source-editor/components/cm6-switch-away-survey.tsx +++ b/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(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() {
Take survey diff --git a/services/web/frontend/js/features/source-editor/utils/switch-away-survey.ts b/services/web/frontend/js/features/source-editor/utils/switch-away-survey.ts new file mode 100644 index 0000000000..d73e3f6a17 --- /dev/null +++ b/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) +} diff --git a/services/web/frontend/js/ide/editor/EditorManager.js b/services/web/frontend/js/ide/editor/EditorManager.js index 3d47cde589..7ca9ad39ee 100644 --- a/services/web/frontend/js/ide/editor/EditorManager.js +++ b/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 } } diff --git a/services/web/frontend/stylesheets/app/editor.less b/services/web/frontend/stylesheets/app/editor.less index 784cc0f18c..048b75b5db 100644 --- a/services/web/frontend/stylesheets/app/editor.less +++ b/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 {