diff --git a/services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx b/services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx index eb3552105d..31e3e52536 100644 --- a/services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx +++ b/services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx @@ -14,14 +14,10 @@ import { DefaultSynctexControl } from '@/features/pdf-preview/components/detach- import classnames from 'classnames' export type EditorProps = { - shouldPersistLayout?: boolean editorContent: ReactNode } -export default function EditorAndPdf({ - shouldPersistLayout = false, - editorContent, -}: EditorProps) { +export default function EditorAndPdf({ editorContent }: EditorProps) { const { t } = useTranslation() const { view, pdfLayout, changeLayout, detachRole, reattach } = useLayoutContext() @@ -49,9 +45,7 @@ export default function EditorAndPdf({ return ( > -} - function convertFileRefToBinaryFile(fileRef: FileRef): BinaryFile { return { _id: fileRef._id, @@ -58,11 +52,8 @@ function fileViewFile(fileRef: FileRef) { } } -export function EditorAndSidebar({ - shouldPersistLayout, - leftColumnDefaultSize, - setLeftColumnDefaultSize, -}: EditorAndSidebarProps) { +export function EditorAndSidebar() { + const [leftColumnDefaultSize, setLeftColumnDefaultSize] = useState(20) const [leftColumnIsOpen, setLeftColumnIsOpen] = useState(true) const { rootDocId } = useProjectContext() const { eventEmitter } = useIdeReactContext() @@ -75,9 +66,6 @@ export function EditorAndSidebar({ const { projectJoined } = useIdeReactContext() const { selectEntity } = useSelectFileTreeEntity() const [, setOpenFile] = useScopeValue('openFile') - - const historyIsOpen = view === 'history' - const [openEntity, setOpenEntity] = useState< FileTreeDocumentFindResult | FileTreeFileRefFindResult | null >(null) @@ -157,88 +145,93 @@ export function EditorAndSidebar({ } }, [fileTreeReady, openInitialDoc, projectJoined, rootDocId]) - // Keep the editor file tree around so that it is available and up to date - // when restoring a file - const leftColumnContent = ( - <> - + ) + + if (view === 'history') { + return ( + + {editorSidebar} + + + } + leftColumnDefaultSize={leftColumnDefaultSize} + setLeftColumnDefaultSize={setLeftColumnDefaultSize} + rightColumnContent={ + + + + } + leftColumnIsOpen={leftColumnIsOpen} + setLeftColumnIsOpen={setLeftColumnIsOpen} /> - {historyIsOpen ? : null} - + ) + } + + // Always have the editor mounted when not in history view, and hide and + // show it as necessary + const editorPane = ( + ) let rightColumnContent - if (historyIsOpen) { + if (openDocId === undefined) { + rightColumnContent = + } else if (selectedEntityCount === 0) { rightColumnContent = ( - - - + <> + {editorPane} + + ) - } else { - let editorContent = null - - // Always have the editor mounted when not in history view, and hide and - // show it as necessary - const editorPane = ( - - ) - if (openDocId === undefined) { - rightColumnContent = - } else if (selectedEntityCount === 0) { - rightColumnContent = ( - <> - {editorPane} - - - ) - } else if (selectedEntityCount > 1) { - editorContent = ( - <> - {editorPane} - - - ) - } else if (openEntity) { - editorContent = - openEntity.type === 'doc' ? ( - editorPane - ) : ( + } else if (selectedEntityCount > 1) { + rightColumnContent = ( + {editorPane} - + - ) - } - - if (editorContent) { - rightColumnContent = ( - - ) - } + } + /> + ) + } else if (openEntity) { + rightColumnContent = ( + + {editorPane} + {openEntity.type !== 'doc' && ( + + )} + + } + /> + ) } return ( ) } diff --git a/services/web/frontend/js/features/ide-react/components/editor-sidebar.tsx b/services/web/frontend/js/features/ide-react/components/editor-sidebar.tsx index 56051c972b..128098e203 100644 --- a/services/web/frontend/js/features/ide-react/components/editor-sidebar.tsx +++ b/services/web/frontend/js/features/ide-react/components/editor-sidebar.tsx @@ -9,46 +9,40 @@ import { import classNames from 'classnames' type EditorSidebarProps = { - shouldShow: boolean - shouldPersistLayout: boolean + shouldShow?: boolean onFileTreeInit: () => void onFileTreeSelect: FileTreeSelectHandler onFileTreeDelete: FileTreeDeleteHandler } export default function EditorSidebar({ - shouldShow, - shouldPersistLayout, + shouldShow = false, onFileTreeInit, onFileTreeSelect, onFileTreeDelete, }: EditorSidebarProps) { return ( - <> - - + + + + + +
+ + + ) } diff --git a/services/web/frontend/js/features/ide-react/components/editor/editor-pane.tsx b/services/web/frontend/js/features/ide-react/components/editor/editor-pane.tsx index 60eb4ed236..523571bf0c 100644 --- a/services/web/frontend/js/features/ide-react/components/editor/editor-pane.tsx +++ b/services/web/frontend/js/features/ide-react/components/editor/editor-pane.tsx @@ -1,58 +1,39 @@ import { Panel, PanelGroup } from 'react-resizable-panels' -import { VerticalResizeHandle } from '@/features/ide-react/components/resize/vertical-resize-handle' -import React, { ElementType } from 'react' +import React, { FC, lazy, Suspense } from 'react' import useScopeValue from '@/shared/hooks/use-scope-value' import SourceEditor from '@/features/source-editor/components/source-editor' import { EditorScopeValue } from '@/features/ide-react/context/editor-manager-context' -import importOverleafModules from '../../../../../macros/import-overleaf-module.macro' import classNames from 'classnames' -import { useTranslation } from 'react-i18next' +import { LoadingPane } from '@/features/ide-react/components/editor/loading-pane' +import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner' +import { VerticalResizeHandle } from '@/features/ide-react/components/resize/vertical-resize-handle' -const symbolPaletteComponents = importOverleafModules( - 'sourceEditorSymbolPalette' -) as { import: { default: ElementType }; path: string }[] +const SymbolPalettePane = lazy( + () => import('@/features/ide-react/components/editor/symbol-palette-pane') +) -export type EditorPaneProps = { - shouldPersistLayout?: boolean - show: boolean -} - -export function EditorPane({ shouldPersistLayout, show }: EditorPaneProps) { - const { t } = useTranslation() +export const EditorPane: FC<{ show: boolean }> = ({ show }) => { const [editor] = useScopeValue('editor') + const isLoading = Boolean( + (!editor.sharejs_doc || editor.opening) && + !editor.error_state && + editor.open_doc_id + ) + return ( - + - {(!editor.sharejs_doc || editor.opening) && - !editor.error_state && - !!editor.open_doc_id ? ( -
- - -   {t('loading')}… - -
- ) : null} + {isLoading && } - {editor.showSymbolPalette ? ( + + {editor.showSymbolPalette && ( <> -
- {symbolPaletteComponents.map( - ({ import: { default: Component }, path }) => ( - - ) - )} -
+ }> + + - ) : null} + )} ) } diff --git a/services/web/frontend/js/features/ide-react/components/editor/loading-pane.tsx b/services/web/frontend/js/features/ide-react/components/editor/loading-pane.tsx new file mode 100644 index 0000000000..f6759c6519 --- /dev/null +++ b/services/web/frontend/js/features/ide-react/components/editor/loading-pane.tsx @@ -0,0 +1,15 @@ +import { FC } from 'react' +import { useTranslation } from 'react-i18next' + +export const LoadingPane: FC = () => { + const { t } = useTranslation() + + return ( +
+ + +   {t('loading')}… + +
+ ) +} diff --git a/services/web/frontend/js/features/ide-react/components/editor/symbol-palette-pane.tsx b/services/web/frontend/js/features/ide-react/components/editor/symbol-palette-pane.tsx new file mode 100644 index 0000000000..990328fe99 --- /dev/null +++ b/services/web/frontend/js/features/ide-react/components/editor/symbol-palette-pane.tsx @@ -0,0 +1,20 @@ +import React, { ElementType, FC } from 'react' +import importOverleafModules from '../../../../../macros/import-overleaf-module.macro' + +const symbolPaletteComponents = importOverleafModules( + 'sourceEditorSymbolPalette' +) as { import: { default: ElementType }; path: string }[] + +const SymbolPalettePane: FC = () => { + return ( +
+ {symbolPaletteComponents.map( + ({ import: { default: Component }, path }) => ( + + ) + )} +
+ ) +} + +export default SymbolPalettePane diff --git a/services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx b/services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx index 101992a4d5..9b876cfa16 100644 --- a/services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx +++ b/services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx @@ -1,71 +1,28 @@ -import { useConnectionContext } from '@/features/ide-react/context/connection-context' -import { useEffect, useState } from 'react' import { Alerts } from '@/features/ide-react/components/alerts/alerts' -import { useLayoutContext } from '@/shared/context/layout-context' import MainLayout from '@/features/ide-react/components/layout/main-layout' -import { EditorAndSidebar } from '@/features/ide-react/components/editor-and-sidebar' import EditorLeftMenu from '@/features/editor-left-menu/components/editor-left-menu' -import EditorNavigationToolbar from '@/features/ide-react/components/editor-navigation-toolbar' -import ChatPane from '@/features/chat/components/chat-pane' import { useLayoutEventTracking } from '@/features/ide-react/hooks/use-layout-event-tracking' import useSocketListeners from '@/features/ide-react/hooks/use-socket-listeners' -import { useModalsContext } from '@/features/ide-react/context/modals-context' import { useOpenFile } from '@/features/ide-react/hooks/use-open-file' import { useEditingSessionHeartbeat } from '@/features/ide-react/hooks/use-editing-session-heartbeat' import { useRegisterUserActivity } from '@/features/ide-react/hooks/use-register-user-activity' import { useHasLintingError } from '@/features/ide-react/hooks/use-has-linting-error' +import { useConnectionState } from '@/features/ide-react/hooks/use-connection-state' -// This is filled with placeholder content while the real content is migrated -// away from Angular export default function IdePage() { - useLayoutEventTracking() - useSocketListeners() - useEditingSessionHeartbeat() - useRegisterUserActivity() - useHasLintingError() - - // This returns a function to open a binary file but for now we just use the - // fact that it also patches in ide.binaryFilesManager. Once Angular is gone, - // we can remove this hook from here and use it in the history file restore - // component instead. - useOpenFile() - - const [leftColumnDefaultSize, setLeftColumnDefaultSize] = useState(20) - const { connectionState } = useConnectionContext() - const { showLockEditorMessageModal } = useModalsContext() - - // Show modal when editor is forcefully disconnected - useEffect(() => { - if (connectionState.forceDisconnected) { - showLockEditorMessageModal(connectionState.forcedDisconnectDelay) - } - }, [ - connectionState.forceDisconnected, - connectionState.forcedDisconnectDelay, - showLockEditorMessageModal, - ]) - - const { chatIsOpen } = useLayoutContext() - - const mainContent = ( - - ) + useLayoutEventTracking() // send event when the layout changes + useSocketListeners() // listen for project-related websocket messages + useEditingSessionHeartbeat() // send a batched event when user is active + useRegisterUserActivity() // record activity and ensure connection when user is active + useHasLintingError() // pass editor:lint hasLintingError to the compiler + useOpenFile() // create ide.binaryFilesManager (TODO: move to the history file restore component) + useConnectionState() // show modal when editor is forcefully disconnected return ( <> - } - chatContent={} - mainContent={mainContent} - chatIsOpen={chatIsOpen} - shouldPersistLayout - /> + ) } diff --git a/services/web/frontend/js/features/ide-react/components/layout/layout-with-placeholders.tsx b/services/web/frontend/js/features/ide-react/components/layout/layout-with-placeholders.tsx deleted file mode 100644 index f3f2d175f8..0000000000 --- a/services/web/frontend/js/features/ide-react/components/layout/layout-with-placeholders.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { useState } from 'react' -import PlaceholderHeader from '@/features/ide-react/components/layout/placeholder/placeholder-header' -import PlaceholderChat from '@/features/ide-react/components/layout/placeholder/placeholder-chat' -import PlaceholderHistory from '@/features/ide-react/components/layout/placeholder/placeholder-history' -import PlaceholderEditorMainContent from '@/features/ide-react/components/layout/placeholder/placeholder-editor-main-content' -import MainLayout from '@/features/ide-react/components/layout/main-layout' - -export default function LayoutWithPlaceholders({ - shouldPersistLayout, -}: { - shouldPersistLayout: boolean -}) { - const [chatIsOpen, setChatIsOpen] = useState(false) - const [historyIsOpen, setHistoryIsOpen] = useState(false) - const [leftColumnDefaultSize, setLeftColumnDefaultSize] = useState(20) - - const headerContent = ( - - ) - const chatContent = - const mainContent = historyIsOpen ? ( - - ) : ( - - ) - - return ( - - ) -} diff --git a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx index 92d05e6811..4aa409d64b 100644 --- a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx +++ b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx @@ -1,31 +1,23 @@ import { Panel, PanelGroup } from 'react-resizable-panels' -import { ReactNode, useState } from 'react' +import { useState } from 'react' import { HorizontalResizeHandle } from '../resize/horizontal-resize-handle' import useFixedSizeColumn from '@/features/ide-react/hooks/use-fixed-size-column' import useCollapsiblePanel from '@/features/ide-react/hooks/use-collapsible-panel' import classNames from 'classnames' +import { useLayoutContext } from '@/shared/context/layout-context' +import EditorNavigationToolbar from '@/features/ide-react/components/editor-navigation-toolbar' +import ChatPane from '@/features/chat/components/chat-pane' +import { EditorAndSidebar } from '@/features/ide-react/components/editor-and-sidebar' const CHAT_DEFAULT_SIZE = 20 -type PageProps = { - headerContent: ReactNode - chatContent: ReactNode - mainContent: ReactNode - chatIsOpen: boolean - shouldPersistLayout: boolean -} - // The main area below the header is split into two: the main content and chat. // The reason for not splitting the left column containing the file tree and // outline here is that the history view has its own file tree, so it is more // convenient to replace the whole of the main content when in history view. -export default function MainLayout({ - headerContent, - chatContent, - mainContent, - chatIsOpen, - shouldPersistLayout, -}: PageProps) { +export default function MainLayout() { + const { chatIsOpen } = useLayoutContext() + const { fixedPanelRef: chatPanelRef, handleLayout } = useFixedSizeColumn( CHAT_DEFAULT_SIZE, chatIsOpen @@ -37,10 +29,10 @@ export default function MainLayout({ return (
- {headerContent} +
- {mainContent} + {chatIsOpen ? ( <> @@ -61,7 +53,7 @@ export default function MainLayout({ minSize={5} collapsible > - {chatContent} + ) : null} diff --git a/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-chat.tsx b/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-chat.tsx deleted file mode 100644 index edb7f7a461..0000000000 --- a/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-chat.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' - -export default function PlaceholderChat() { - return ( - - ) -} diff --git a/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-editor-and-pdf.tsx b/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-editor-and-pdf.tsx deleted file mode 100644 index d032fe7b56..0000000000 --- a/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-editor-and-pdf.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import React, { useRef, useState } from 'react' -import { useTranslation } from 'react-i18next' -import { - ImperativePanelHandle, - Panel, - PanelGroup, -} from 'react-resizable-panels' -import { HorizontalResizeHandle } from '@/features/ide-react/components/resize/horizontal-resize-handle' -import { HorizontalToggler } from '@/features/ide-react/components/resize/horizontal-toggler' -import { VerticalResizeHandle } from '@/features/ide-react/components/resize/vertical-resize-handle' -import useCollapsiblePanel from '@/features/ide-react/hooks/use-collapsible-panel' - -type PlaceholderEditorAndPdfProps = { - shouldPersistLayout?: boolean -} - -export default function PlaceholderEditorAndPdf({ - shouldPersistLayout = false, -}: PlaceholderEditorAndPdfProps) { - const { t } = useTranslation() - const [pdfIsOpen, setPdfIsOpen] = useState(false) - const [symbolPaletteIsOpen, setSymbolPaletteIsOpen] = useState(false) - - const pdfPanelRef = useRef(null) - useCollapsiblePanel(pdfIsOpen, pdfPanelRef) - - return ( - - - - - Editor placeholder -
- - - {symbolPaletteIsOpen ? ( - <> - - -
- Symbol palette placeholder -
- - - ) : null} - - - setPdfIsOpen(!pdfIsOpen)}> - - - setPdfIsOpen(!collapsed)} - > - PDF placeholder - - - ) -} diff --git a/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-editor-main-content.tsx b/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-editor-main-content.tsx deleted file mode 100644 index 0e1d39beec..0000000000 --- a/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-editor-main-content.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React, { useState } from 'react' -import TwoColumnMainContent from '@/features/ide-react/components/layout/two-column-main-content' -import PlaceholderEditorAndPdf from '@/features/ide-react/components/layout/placeholder/placeholder-editor-and-pdf' -import PlaceholderEditorSidebar from '@/features/ide-react/components/layout/placeholder/placeholder-editor-sidebar' - -type PlaceholderEditorMainContentProps = { - shouldPersistLayout: boolean - leftColumnDefaultSize: number - setLeftColumnDefaultSize: React.Dispatch> -} - -export default function PlaceholderEditorMainContent({ - shouldPersistLayout, - leftColumnDefaultSize, - setLeftColumnDefaultSize, -}: PlaceholderEditorMainContentProps) { - const [leftColumnIsOpen, setLeftColumnIsOpen] = useState(true) - - const leftColumnContent = ( - - ) - const rightColumnContent = ( - - ) - - return ( - - ) -} diff --git a/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-editor-sidebar.tsx b/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-editor-sidebar.tsx deleted file mode 100644 index d96735da50..0000000000 --- a/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-editor-sidebar.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react' -import { Panel, PanelGroup } from 'react-resizable-panels' -import { VerticalResizeHandle } from '@/features/ide-react/components/resize/vertical-resize-handle' - -type PlaceholderEditorSidebarProps = { - shouldPersistLayout: boolean -} - -export default function PlaceholderEditorSidebar({ - shouldPersistLayout, -}: PlaceholderEditorSidebarProps) { - return ( - - ) -} diff --git a/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-file.tsx b/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-file.tsx deleted file mode 100644 index 716d43ab44..0000000000 --- a/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-file.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react' - -export default function PlaceholderFile() { - return
File placeholder
-} diff --git a/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-header.tsx b/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-header.tsx deleted file mode 100644 index 944b1d29ff..0000000000 --- a/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-header.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' -import ChatToggleButton from '@/features/editor-navigation-toolbar/components/chat-toggle-button' -import HistoryToggleButton from '@/features/editor-navigation-toolbar/components/history-toggle-button' - -type PlaceholderHeaderProps = { - chatIsOpen: boolean - setChatIsOpen: (chatIsOpen: boolean) => void - historyIsOpen: boolean - setHistoryIsOpen: (historyIsOpen: boolean) => void -} - -export default function PlaceholderHeader({ - chatIsOpen, - setChatIsOpen, - historyIsOpen, - setHistoryIsOpen, -}: PlaceholderHeaderProps) { - function toggleChatOpen() { - setChatIsOpen(!chatIsOpen) - } - - function toggleHistoryOpen() { - setHistoryIsOpen(!historyIsOpen) - } - - return ( -
-
Header placeholder
-
- - -
-
- ) -} diff --git a/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-history.tsx b/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-history.tsx deleted file mode 100644 index 1bcbcf45c9..0000000000 --- a/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-history.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React, { useState } from 'react' -import TwoColumnMainContent from '@/features/ide-react/components/layout/two-column-main-content' - -type PlaceholderHistoryProps = { - shouldPersistLayout: boolean - leftColumnDefaultSize: number - setLeftColumnDefaultSize: React.Dispatch> -} - -export default function PlaceholderHistory({ - shouldPersistLayout, - leftColumnDefaultSize, - setLeftColumnDefaultSize, -}: PlaceholderHistoryProps) { - const [leftColumnIsOpen, setLeftColumnIsOpen] = useState(true) - - const leftColumnContent = ( - - ) - const rightColumnContent = ( -
History document diff viewer and versions list placeholder
- ) - - return ( - - ) -} diff --git a/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-pdf.tsx b/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-pdf.tsx deleted file mode 100644 index dca03dec74..0000000000 --- a/services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-pdf.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react' - -export default function PlaceholderPdf() { - return
PDF
-} diff --git a/services/web/frontend/js/features/ide-react/components/layout/two-column-main-content.tsx b/services/web/frontend/js/features/ide-react/components/layout/two-column-main-content.tsx index 8d89d24799..ad53bbdc88 100644 --- a/services/web/frontend/js/features/ide-react/components/layout/two-column-main-content.tsx +++ b/services/web/frontend/js/features/ide-react/components/layout/two-column-main-content.tsx @@ -17,7 +17,6 @@ type TwoColumnMainContentProps = { setLeftColumnIsOpen: ( leftColumnIsOpen: TwoColumnMainContentProps['leftColumnIsOpen'] ) => void - shouldPersistLayout?: boolean } export default function TwoColumnMainContent({ @@ -28,7 +27,6 @@ export default function TwoColumnMainContent({ rightColumnContent, leftColumnIsOpen, setLeftColumnIsOpen, - shouldPersistLayout = false, }: TwoColumnMainContentProps) { const { t } = useTranslation() @@ -52,9 +50,7 @@ export default function TwoColumnMainContent({ return ( ) { useEffect(() => { - const panel = panelRef.current - if (!panel) { - return - } - if (panelIsOpen) { - panel.expand() - } else { - panel.collapse() + if (panelRef.current) { + if (panelIsOpen) { + panelRef.current.expand() + } else { + panelRef.current.collapse() + } } }, [panelIsOpen, panelRef]) } diff --git a/services/web/frontend/js/features/ide-react/hooks/use-connection-state.ts b/services/web/frontend/js/features/ide-react/hooks/use-connection-state.ts new file mode 100644 index 0000000000..386a919bdd --- /dev/null +++ b/services/web/frontend/js/features/ide-react/hooks/use-connection-state.ts @@ -0,0 +1,19 @@ +import { useEffect } from 'react' +import { useConnectionContext } from '@/features/ide-react/context/connection-context' +import { useModalsContext } from '@/features/ide-react/context/modals-context' + +export const useConnectionState = () => { + const { connectionState } = useConnectionContext() + const { showLockEditorMessageModal } = useModalsContext() + + // Show modal when editor is forcefully disconnected + useEffect(() => { + if (connectionState.forceDisconnected) { + showLockEditorMessageModal(connectionState.forcedDisconnectDelay) + } + }, [ + connectionState.forceDisconnected, + connectionState.forcedDisconnectDelay, + showLockEditorMessageModal, + ]) +} diff --git a/services/web/frontend/js/features/ide-react/hooks/use-fixed-size-column.ts b/services/web/frontend/js/features/ide-react/hooks/use-fixed-size-column.ts index 4ca2e32fce..fb0fd760cd 100644 --- a/services/web/frontend/js/features/ide-react/hooks/use-fixed-size-column.ts +++ b/services/web/frontend/js/features/ide-react/hooks/use-fixed-size-column.ts @@ -15,7 +15,7 @@ export default function useFixedSizeColumn( return fixedPanelRef.current?.getSize('pixels') || 0 }, [fixedPanelRef]) - const handleLayout = useCallback( + const handleLayout: PanelGroupOnLayout = useCallback( sizes => { // Measure the pixel width here because it's not always up to date in the // panel's onResize @@ -26,7 +26,7 @@ export default function useFixedSizeColumn( setInitialLayoutDone(true) }, [measureFixedPanelSizePixels] - ) as PanelGroupOnLayout + ) useEffect(() => { if (!isOpen) { diff --git a/services/web/frontend/js/features/ide-react/hooks/use-open-file.ts b/services/web/frontend/js/features/ide-react/hooks/use-open-file.ts index 6aaefb0ad9..1329982c3d 100644 --- a/services/web/frontend/js/features/ide-react/hooks/use-open-file.ts +++ b/services/web/frontend/js/features/ide-react/hooks/use-open-file.ts @@ -21,6 +21,4 @@ export function useOpenFile() { // Expose BinaryFilesManager via ide object solely for the benefit of the file // restore feature in history. This can be removed once Angular is gone. ide.binaryFilesManager = { openFileWithId } - - return openFileWithId } diff --git a/services/web/frontend/stories/ide-page/layout.stories.tsx b/services/web/frontend/stories/ide-page/layout.stories.tsx deleted file mode 100644 index cc30a14a95..0000000000 --- a/services/web/frontend/stories/ide-page/layout.stories.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import LayoutWithPlaceholders from '@/features/ide-react/components/layout/layout-with-placeholders' - -export default { - title: 'Editor / Page Layout', - component: LayoutWithPlaceholders, - decorators: [ - (Story: any) => ( -
- -
- ), - ], -} - -export const Persisted = { - args: { - shouldPersistLayout: true, - }, -} - -export const Unpersisted = { - args: { - shouldPersistLayout: false, - }, -} diff --git a/services/web/frontend/stylesheets/app/editor/ide-react.less b/services/web/frontend/stylesheets/app/editor/ide-react.less index f1095cd9bc..f48a93a90e 100644 --- a/services/web/frontend/stylesheets/app/editor/ide-react.less +++ b/services/web/frontend/stylesheets/app/editor/ide-react.less @@ -128,6 +128,11 @@ } } +.ide-react-editor-panel { + display: flex; + flex-direction: column; +} + // Ensure an element with class "full-size", such as the binary file view, stays within the bounds of the panel .ide-react-panel { position: relative;