Merge pull request #31573 from overleaf/mg-context-menu-feedback

Add feedback button to context menu

GitOrigin-RevId: f7d2b27f7f49a4cd3cbad2e8c6f114967f84ab65

services/web/frontend/js/features/source-editor/components/editor-context-menu-feedback.tsx

@@ -0,0 +1,39 @@
+import { FC, memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  DropdownItem,
+  DropdownDivider,
+} from '@/shared/components/dropdown/dropdown-menu'
+import DropdownListItem from '@/shared/components/dropdown/dropdown-list-item'
+import SplitTestBadge from '@/shared/components/split-test-badge'
+
+const FEEDBACK_FORM_URL = 'https://forms.gle/BsbNQeSwGKEwXpxTA'
+const handleClick = () => {
+  window.open(FEEDBACK_FORM_URL, '_blank', 'noopener,noreferrer')
+}
+
+export const EditorContextMenuFeedback: FC = memo(
+  function EditorContextMenuFeedback() {
+    const { t } = useTranslation()
+
+    return (
+      <>
+        <DropdownDivider />
+        <DropdownListItem>
+          <DropdownItem
+            as="button"
+            onClick={handleClick}
+            leadingIcon={
+              <SplitTestBadge
+                splitTestName="editor-context-menu"
+                displayOnVariants={['enabled']}
+              />
+            }
+          >
+            {t('give_feedback')}
+          </DropdownItem>
+        </DropdownListItem>
+      </>
+    )
+  }
+)

services/web/frontend/js/features/source-editor/components/editor-context-menu.tsx

@@ -15,6 +15,7 @@ import { contextMenuStateField } from '../extensions/context-menu'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
 import { useContextMenuItems } from '../hooks/use-context-menu-items'
 import DropdownListItem from '@/shared/components/dropdown/dropdown-list-item'
+import { EditorContextMenuFeedback } from './editor-context-menu-feedback'
 
 const EditorContextMenu: FC = () => {
   const state = useCodeMirrorStateContext()
@@ -78,6 +79,7 @@ const EditorContextMenuContent: FC = memo(function EditorContextMenuContent() {
             </DropdownListItem>
           </Fragment>
         ))}
+        <EditorContextMenuFeedback />
       </DropdownMenu>
     </Dropdown>
   )