Creating useProjectUploader hook for project upload modal & Display modal when a project is successfully converted from Docx (#32676)

* creating useProjectUploader hook

* removing a comment and polishing some code

* removing doc from the array

* rewording comments

* creating the modal that appears after docs conversion is completed

* moving the file

* renaming translations

* moving into modals

* adding content within a list

* removing the newUrl variable

* changing translation name

* adding a button in the test

GitOrigin-RevId: f08ec6b02874f93a79039b831afad820239e094c

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

@@ -3,6 +3,7 @@ import ForceDisconnected from '@/features/ide-react/components/modals/force-disc
 import { UnsavedDocs } from '@/features/ide-react/components/unsaved-docs/unsaved-docs'
 import SystemMessages from '@/shared/components/system-messages'
 import ViewOnlyAccessModal from '@/features/share-project-modal/components/view-only-access-modal'
+import ProjectConvertedFromDocxModal from '@/features/ide-react/components/modals/project-converted-from-docx-modal'
 
 export const Modals = memo(() => {
   return (
@@ -11,6 +12,7 @@ export const Modals = memo(() => {
       <UnsavedDocs />
       <SystemMessages />
       <ViewOnlyAccessModal />
+      <ProjectConvertedFromDocxModal />
     </>
   )
 })

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

@@ -0,0 +1,84 @@
+import { Trans, useTranslation } from 'react-i18next'
+import {
+  OLModal,
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/shared/components/ol/ol-modal'
+import OLButton from '@/shared/components/ol/ol-button'
+import { useEffect, useState } from 'react'
+
+function ProjectConvertedFromDocxModal() {
+  const [
+    showProjectConvertedFromDocxModal,
+    setShowProjectConvertedFromDocxModal,
+  ] = useState(false)
+
+  useEffect(() => {
+    const query = window.location.search
+    const queryString = new URLSearchParams(query)
+
+    if (queryString.get('converted-from-docx') === 'true') {
+      setShowProjectConvertedFromDocxModal(true)
+
+      // Clean the URL immediately so a refresh doesn't trigger the modal again,
+      // but preserve other search params and the hash.
+      const url = new URL(window.location.href)
+      url.searchParams.delete('converted-from-docx')
+      window.history.replaceState(window.history.state, '', url.toString())
+    }
+  }, [])
+
+  return (
+    <>
+      {showProjectConvertedFromDocxModal && (
+        <ProjectConvertedFromDocxModalContent
+          onHide={() => setShowProjectConvertedFromDocxModal(false)}
+        />
+      )}
+    </>
+  )
+}
+
+function ProjectConvertedFromDocxModalContent({
+  onHide,
+}: {
+  onHide: () => void
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <OLModal
+      show
+      animation
+      onHide={onHide}
+      id="converted-from-docx-modal"
+      backdrop="static"
+    >
+      <OLModalHeader>
+        <OLModalTitle as="h3">
+          {t('document_successfully_imported')}
+        </OLModalTitle>
+      </OLModalHeader>
+      <OLModalBody>
+        <ul className="docx-modal-list">
+          <li>{t('the_document_has_been_converted_to')}</li>
+          <li>
+            <Trans
+              i18nKey="citations_and_cross_references_may_be_written_as_plain_text"
+              components={{ code: <code /> }}
+            />
+          </li>
+        </ul>
+      </OLModalBody>
+      <OLModalFooter>
+        <OLButton variant="primary" onClick={onHide}>
+          {t('start_editing')}
+        </OLButton>
+      </OLModalFooter>
+    </OLModal>
+  )
+}
+
+export default ProjectConvertedFromDocxModal