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/components/editor-navigation-toolbar.tsx

@@ -0,0 +1,38 @@
+import { useState, useCallback } from 'react'
+import { useOnlineUsersContext } from '@/features/ide-react/context/online-users-context'
+import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
+import * as eventTracking from '@/infrastructure/event-tracking'
+import EditorNavigationToolbarRoot from '@/features/editor-navigation-toolbar/components/editor-navigation-toolbar-root'
+import ShareProjectModal from '@/features/share-project-modal/components/share-project-modal'
+
+function EditorNavigationToolbar() {
+  const [showShareModal, setShowShareModal] = useState(false)
+  const { onlineUsersArray } = useOnlineUsersContext()
+  const { openDoc } = useEditorManagerContext()
+
+  const handleOpenShareModal = () => {
+    eventTracking.sendMBOnce('ide-open-share-modal-once')
+    setShowShareModal(true)
+  }
+
+  const handleHideShareModal = useCallback(() => {
+    setShowShareModal(false)
+  }, [])
+
+  return (
+    <>
+      <EditorNavigationToolbarRoot
+        // @ts-ignore
+        onlineUsersArray={onlineUsersArray}
+        openDoc={openDoc}
+        openShareProjectModal={handleOpenShareModal}
+      />
+      <ShareProjectModal
+        show={showShareModal}
+        handleHide={handleHideShareModal}
+      />
+    </>
+  )
+}
+
+export default EditorNavigationToolbar

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

@@ -1,63 +0,0 @@
-import React, { useCallback } from 'react'
-import ChatToggleButton from '@/features/editor-navigation-toolbar/components/chat-toggle-button'
-import HistoryToggleButton from '@/features/editor-navigation-toolbar/components/history-toggle-button'
-import LayoutDropdownButton from '@/features/editor-navigation-toolbar/components/layout-dropdown-button'
-import MenuButton from '@/features/editor-navigation-toolbar/components/menu-button'
-import { useLayoutContext } from '@/shared/context/layout-context'
-import { sendMB } from '@/infrastructure/event-tracking'
-import OnlineUsersWidget from '@/features/editor-navigation-toolbar/components/online-users-widget'
-import { useOnlineUsersContext } from '@/features/ide-react/context/online-users-context'
-
-type HeaderProps = {
-  chatIsOpen: boolean
-  setChatIsOpen: (chatIsOpen: boolean) => void
-  historyIsOpen: boolean
-  setHistoryIsOpen: (historyIsOpen: boolean) => void
-}
-
-export default function Header({
-  chatIsOpen,
-  setChatIsOpen,
-  historyIsOpen,
-  setHistoryIsOpen,
-}: HeaderProps) {
-  const { setLeftMenuShown } = useLayoutContext()
-  const { onlineUsersArray } = useOnlineUsersContext()
-
-  function toggleChatOpen() {
-    setChatIsOpen(!chatIsOpen)
-  }
-
-  function toggleHistoryOpen() {
-    setHistoryIsOpen(!historyIsOpen)
-  }
-
-  const handleShowLeftMenuClick = useCallback(() => {
-    sendMB('navigation-clicked-menu')
-    setLeftMenuShown(value => !value)
-  }, [setLeftMenuShown])
-
-  return (
-    <header className="toolbar toolbar-header">
-      <div className="toolbar-left">
-        <MenuButton onClick={handleShowLeftMenuClick} />
-      </div>
-      <div className="toolbar-right">
-        <OnlineUsersWidget
-          onlineUsers={onlineUsersArray}
-          goToUser={() => alert('Not implemented')}
-        />
-        <LayoutDropdownButton />
-        <HistoryToggleButton
-          historyIsOpen={historyIsOpen}
-          onClick={toggleHistoryOpen}
-        />
-        <ChatToggleButton
-          chatIsOpen={chatIsOpen}
-          onClick={toggleChatOpen}
-          unreadMessageCount={0}
-        />
-      </div>
-    </header>
-  )
-}

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

@@ -7,14 +7,16 @@ import PlaceholderChat from '@/features/ide-react/components/layout/placeholder/
 import PlaceholderHistory from '@/features/ide-react/components/layout/placeholder/placeholder-history'
 import MainLayout from '@/features/ide-react/components/layout/main-layout'
 import { EditorAndSidebar } from '@/features/ide-react/components/editor-and-sidebar'
-import Header from '@/features/ide-react/components/header'
 import EditorLeftMenu from '@/features/editor-left-menu/components/editor-left-menu'
+import EditorNavigationToolbar from '@/features/ide-react/components/editor-navigation-toolbar'
 import { useLayoutEventTracking } from '@/features/ide-react/hooks/use-layout-event-tracking'
+import useSocketListeners from '@/features/ide-react/hooks/use-socket-listeners'
 
 // This is filled with placeholder content while the real content is migrated
 // away from Angular
 export default function IdePage() {
   useLayoutEventTracking()
+  useSocketListeners()
 
   const [leftColumnDefaultSize, setLeftColumnDefaultSize] = useState(20)
   const { registerUserActivity } = useConnectionContext()
@@ -32,24 +34,8 @@ export default function IdePage() {
     return () => document.body.removeEventListener('click', listener)
   }, [listener])
 
-  const { chatIsOpen, setChatIsOpen, view, setView } = useLayoutContext()
+  const { chatIsOpen, view } = useLayoutContext()
   const historyIsOpen = view === 'history'
-  const setHistoryIsOpen = useCallback(
-    (historyIsOpen: boolean) => {
-      setView(historyIsOpen ? 'history' : 'editor')
-    },
-    [setView]
-  )
-
-  const headerContent = (
-    <Header
-      chatIsOpen={chatIsOpen}
-      setChatIsOpen={setChatIsOpen}
-      historyIsOpen={historyIsOpen}
-      setHistoryIsOpen={setHistoryIsOpen}
-    />
-  )
-  const chatContent = <PlaceholderChat />
 
   const mainContent = historyIsOpen ? (
     <PlaceholderHistory
@@ -70,8 +56,8 @@ export default function IdePage() {
       <Alerts />
       <EditorLeftMenu />
       <MainLayout
-        headerContent={headerContent}
-        chatContent={chatContent}
+        headerContent={<EditorNavigationToolbar />}
+        chatContent={<PlaceholderChat />}
         mainContent={mainContent}
         chatIsOpen={chatIsOpen}
         shouldPersistLayout

services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-header.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import ChatToggleButton from '@/features/editor-navigation-toolbar/components/chat-toggle-button'
+import ShareProjectButton from '@/features/editor-navigation-toolbar/components/share-project-button'
 import HistoryToggleButton from '@/features/editor-navigation-toolbar/components/history-toggle-button'
 import LayoutDropdownButton from '@/features/editor-navigation-toolbar/components/layout-dropdown-button'
 
@@ -16,6 +17,8 @@ export default function PlaceholderHeader({
   historyIsOpen,
   setHistoryIsOpen,
 }: PlaceholderHeaderProps) {
+  function handleOpenShareModal() {}
+
   function toggleChatOpen() {
     setChatIsOpen(!chatIsOpen)
   }
@@ -28,11 +31,12 @@ export default function PlaceholderHeader({
     <header className="toolbar toolbar-header">
       <div className="toolbar-left">Header placeholder</div>
       <div className="toolbar-right">
-        <LayoutDropdownButton />
+        <ShareProjectButton onClick={handleOpenShareModal} />
         <HistoryToggleButton
           historyIsOpen={historyIsOpen}
           onClick={toggleHistoryOpen}
         />
+        <LayoutDropdownButton />
         <ChatToggleButton
           chatIsOpen={chatIsOpen}
           onClick={toggleChatOpen}

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

@@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next'
+import { Modal } from 'react-bootstrap'
+import AccessibleModal from '@/shared/components/accessible-modal'
+
+export type GenericMessageModalOwnProps = {
+  title: string
+  message: string
+}
+
+type GenericMessageModalProps = React.ComponentProps<typeof AccessibleModal> &
+  GenericMessageModalOwnProps
+
+function GenericMessageModal({
+  title,
+  message,
+  ...modalProps
+}: GenericMessageModalProps) {
+  const { t } = useTranslation()
+
+  return (
+    <AccessibleModal {...modalProps}>
+      <Modal.Header closeButton>
+        <Modal.Title>{title}</Modal.Title>
+      </Modal.Header>
+
+      <Modal.Body className="modal-body-share">{message}</Modal.Body>
+
+      <Modal.Footer>
+        <button className="btn btn-info" onClick={() => modalProps.onHide()}>
+          {t('ok')}
+        </button>
+      </Modal.Footer>
+    </AccessibleModal>
+  )
+}
+
+export default GenericMessageModal