Adds a toast for docx import feedback form (#32695)

* adding a toast for import docx feedback form link

* renaming importDocxFeedbackToast to importDocxFeedbackToastGenerator

* fixing capital letter in translation

* adding noopener and shorter link

GitOrigin-RevId: fc1ea105f5d092e25bd2dc3966710a897959d944

services/web/frontend/extracted-translations.json

@@ -481,6 +481,7 @@
   "document_updated_externally": "",
   "document_updated_externally_detail": "",
   "documentation": "",
+  "docx_import_feedback_message": "",
   "doesnt_match": "",
   "doing_this_allow_log_in_through_institution": "",
   "doing_this_allow_log_in_through_institution_2": "",

services/web/frontend/js/features/ide-react/components/global-toasts.tsx

@@ -6,6 +6,7 @@ import { debugConsole } from '@/utils/debugging'
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
 import { OLToastContainer } from '@/shared/components/ol/ol-toast-container'
 import clipboardToastGenerators from '@/features/source-editor/components/clipboard-toasts'
+import importDocxFeedbackToastGenerators from '@/features/project-list/components/new-project-button/import-docx-feedback-toast'
 
 const moduleGeneratorsImport = importOverleafModules('toastGenerators') as {
   import: { default: GlobalToastGeneratorEntry[] }
@@ -27,6 +28,7 @@ type GlobalToastGenerator = (
 const GENERATOR_LIST: GlobalToastGeneratorEntry[] = [
   ...moduleGenerators.flat(),
   ...clipboardToastGenerators,
+  ...importDocxFeedbackToastGenerators,
 ]
 const GENERATOR_MAP: Map<string, GlobalToastGenerator> = new Map(
   GENERATOR_LIST.map(({ key, generator }) => [key, generator])

services/web/frontend/js/features/ide-react/components/modals/project-converted-from-docx-modal.tsx

@@ -8,6 +8,7 @@ import {
 } from '@/shared/components/ol/ol-modal'
 import OLButton from '@/shared/components/ol/ol-button'
 import { useEffect, useState } from 'react'
+import { showImportDocxFeedbackToast } from '@/features/project-list/components/new-project-button/import-docx-feedback-toast'
 
 function ProjectConvertedFromDocxModal() {
   const [
@@ -34,7 +35,10 @@ function ProjectConvertedFromDocxModal() {
     <>
       {showProjectConvertedFromDocxModal && (
         <ProjectConvertedFromDocxModalContent
-          onHide={() => setShowProjectConvertedFromDocxModal(false)}
+          onHide={() => {
+            setShowProjectConvertedFromDocxModal(false)
+            showImportDocxFeedbackToast()
+          }}
         />
       )}
     </>

services/web/frontend/js/features/project-list/components/new-project-button/import-docx-feedback-toast.tsx

@@ -0,0 +1,42 @@
+import { GlobalToastGeneratorEntry } from '@/features/ide-react/components/global-toasts'
+import { Trans } from 'react-i18next'
+
+const ImportDocxFeedbackToast = () => {
+  return (
+    <div>
+      <Trans
+        i18nKey="docx_import_feedback_message"
+        components={[
+          /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+          <a
+            href="https://forms.gle/B1qrdiD983YcQCJA9"
+            target="_blank"
+            rel="noopener noreferrer"
+          />,
+        ]}
+      />
+    </div>
+  )
+}
+
+const generators: GlobalToastGeneratorEntry[] = [
+  {
+    key: 'import:docx-feedback',
+    generator: () => ({
+      content: <ImportDocxFeedbackToast />,
+      type: 'info',
+      autoHide: false,
+      isDismissible: true,
+    }),
+  },
+]
+
+export default generators
+
+export const showImportDocxFeedbackToast = () => {
+  window.dispatchEvent(
+    new CustomEvent('ide:show-toast', {
+      detail: { key: 'import:docx-feedback' },
+    })
+  )
+}

services/web/locales/en.json

@@ -617,6 +617,7 @@
   "document_updated_externally_detail": "This document was just updated externally. Any recent changes you have made may have been overwritten. To see previous versions, please look in the history.",
   "documentation": "Documentation",
   "documentation_articles": "Documentation and articles",
+  "docx_import_feedback_message": "This is a new feature, <0>give us feedback</0> once you’ve had a look at the document",
   "does_not_contain_or_significantly_match_your_email": "does not contain or significantly match your email",
   "doesnt_match": "Doesn’t match",
   "doing_this_allow_log_in_through_institution": "Doing this will allow you to log in to <b>__appName__</b> through your institution and will reconfirm your institutional email address.",