Merge pull request #15319 from overleaf/ii-ide-page-prototype-share-modal

Share modal for React IDE page

GitOrigin-RevId: f72f824abdcb5a135c354e3ccc35912b2097673f

services/web/frontend/js/features/ide-react/context/ide-react-context.tsx

@@ -18,7 +18,6 @@ import { JoinProjectPayload } from '@/features/ide-react/connection/join-project
 import { useConnectionContext } from '@/features/ide-react/context/connection-context'
 import { getMockIde } from '@/shared/context/mock/mock-ide'
 import { populateEditorScope } from '@/features/ide-react/context/editor-manager-context'
-import { debugConsole } from '@/utils/debugging'
 import { postJSON } from '@/infrastructure/fetch-json'
 import { EventLog } from '@/features/ide-react/editor/event-log'
 import { populateSettingsScope } from '@/features/ide-react/scope-adapters/settings-adapter'
@@ -41,10 +40,6 @@ const IdeReactContext = createContext<IdeReactContextValue | undefined>(
   undefined
 )
 
-function showGenericMessageModal(title: string, message: string) {
-  debugConsole.log('*** showGenericMessageModal ***', title, message)
-}
-
 function populateIdeReactScope(store: ReactScopeValueStore) {
   store.set('sync_tex_error', false)
   store.set('settings', window.userSettings)
@@ -156,7 +151,6 @@ export const IdeReactProvider: FC = ({ children }) => {
     return {
       ...getMockIde(),
       socket,
-      showGenericMessageModal,
       reportError,
       // TODO: MIGRATION: Remove this once it's no longer used
       fileTreeManager: {

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

@@ -0,0 +1,71 @@
+import {
+  createContext,
+  useContext,
+  FC,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react'
+import GenericMessageModal, {
+  GenericMessageModalOwnProps,
+} from '@/features/ide-react/components/modals/generic-message-modal'
+
+type ModalsContextValue = {
+  showGenericMessageModal: (
+    title: GenericMessageModalOwnProps['title'],
+    message: GenericMessageModalOwnProps['message']
+  ) => void
+}
+
+const ModalsContext = createContext<ModalsContextValue | undefined>(undefined)
+
+export const ModalsContextProvider: FC = ({ children }) => {
+  const [showGenericModal, setShowGenericModal] = useState(false)
+  const [genericMessageModalData, setGenericMessageModalData] =
+    useState<GenericMessageModalOwnProps>({ title: '', message: '' })
+
+  const handleHideGenericModal = useCallback(() => {
+    setShowGenericModal(false)
+  }, [])
+
+  const showGenericMessageModal = useCallback(
+    (
+      title: GenericMessageModalOwnProps['title'],
+      message: GenericMessageModalOwnProps['message']
+    ) => {
+      setGenericMessageModalData({ title, message })
+      setShowGenericModal(true)
+    },
+    []
+  )
+
+  const value = useMemo<ModalsContextValue>(
+    () => ({
+      showGenericMessageModal,
+    }),
+    [showGenericMessageModal]
+  )
+
+  return (
+    <ModalsContext.Provider value={value}>
+      {children}
+      <GenericMessageModal
+        show={showGenericModal}
+        onHide={handleHideGenericModal}
+        {...genericMessageModalData}
+      />
+    </ModalsContext.Provider>
+  )
+}
+
+export function useModalsContext(): ModalsContextValue {
+  const context = useContext(ModalsContext)
+
+  if (!context) {
+    throw new Error(
+      'useModalsContext is only available inside ModalsContextProvider'
+    )
+  }
+
+  return context
+}

services/web/frontend/js/features/ide-react/context/react-context-root.tsx

@@ -16,6 +16,7 @@ import { OnlineUsersProvider } from '@/features/ide-react/context/online-users-c
 import { MetadataProvider } from '@/features/ide-react/context/metadata-context'
 import { ReferencesProvider } from '@/features/ide-react/context/references-context'
 import { SplitTestProvider } from '@/shared/context/split-test-context'
+import { ModalsContextProvider } from '@/features/ide-react/context/modals-context'
 import { FileTreePathProvider } from '@/features/file-tree/contexts/file-tree-path'
 
 export const ReactContextRoot: FC = ({ children }) => {
@@ -38,7 +39,9 @@ export const ReactContextRoot: FC = ({ children }) => {
                                   <EditorManagerProvider>
                                     <OnlineUsersProvider>
                                       <MetadataProvider>
-                                        {children}
+                                        <ModalsContextProvider>
+                                          {children}
+                                        </ModalsContextProvider>
                                       </MetadataProvider>
                                     </OnlineUsersProvider>
                                   </EditorManagerProvider>