diff --git a/package-lock.json b/package-lock.json index e5f6e79dab..75c8944c42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36995,9 +36995,9 @@ } }, "node_modules/react-resizable-panels": { - "version": "0.0.63", - "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-0.0.63.tgz", - "integrity": "sha512-AfA8b6kouhL4rBvgUGs17uzWVlYPaJIwwTCVeWRxNpUHJlCG1h9RIMlzA1849AZGsaNJO3j/SNdI5SS4GZDE3g==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-1.0.1.tgz", + "integrity": "sha512-bFKrVLO6VCDp9+zXvLybB3Ldd7MF+Q6E+qE6sxlDfVAlIwEWksJ94CD5RNXTN9a0E3YyAZUkhJEw3a9aCgymzA==", "dev": true, "peerDependencies": { "react": "^16.14.0 || ^17.0.0 || ^18.0.0", @@ -46748,7 +46748,7 @@ "react-i18next": "^13.3.1", "react-linkify": "^1.0.0-alpha", "react-refresh": "^0.14.0", - "react-resizable-panels": "^0.0.63", + "react-resizable-panels": "^1.0.1", "react2angular": "^4.0.6", "react2angular-shared-context": "^1.1.0", "requirejs": "^2.3.6", @@ -55574,7 +55574,7 @@ "react-i18next": "^13.3.1", "react-linkify": "^1.0.0-alpha", "react-refresh": "^0.14.0", - "react-resizable-panels": "^0.0.63", + "react-resizable-panels": "^1.0.1", "react2angular": "^4.0.6", "react2angular-shared-context": "^1.1.0", "recurly": "^4.0.0", @@ -78887,9 +78887,9 @@ } }, "react-resizable-panels": { - "version": "0.0.63", - "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-0.0.63.tgz", - "integrity": "sha512-AfA8b6kouhL4rBvgUGs17uzWVlYPaJIwwTCVeWRxNpUHJlCG1h9RIMlzA1849AZGsaNJO3j/SNdI5SS4GZDE3g==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-1.0.1.tgz", + "integrity": "sha512-bFKrVLO6VCDp9+zXvLybB3Ldd7MF+Q6E+qE6sxlDfVAlIwEWksJ94CD5RNXTN9a0E3YyAZUkhJEw3a9aCgymzA==", "dev": true, "requires": {} }, diff --git a/services/web/app/views/project/editor/file-tree-react.pug b/services/web/app/views/project/editor/file-tree-react.pug index 4640f7c3d9..9db18c5130 100644 --- a/services/web/app/views/project/editor/file-tree-react.pug +++ b/services/web/app/views/project/editor/file-tree-react.pug @@ -22,6 +22,6 @@ aside.editor-sidebar.full-size( set-started-free-trial="setStartedFreeTrial" ) - .outline-container( + outline-container( vertical-resizable-bottom ) diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-root.jsx b/services/web/frontend/js/features/file-tree/components/file-tree-root.jsx index d36e2a49ee..5131f23912 100644 --- a/services/web/frontend/js/features/file-tree/components/file-tree-root.jsx +++ b/services/web/frontend/js/features/file-tree/components/file-tree-root.jsx @@ -34,7 +34,7 @@ const FileTreeRoot = React.memo(function FileTreeRoot({ }) { const { _id: projectId } = useProjectContext(projectContextPropTypes) const { fileTreeData } = useFileTreeData() - const isReady = projectId && fileTreeData + const isReady = Boolean(projectId && fileTreeData) useEffect(() => { if (isReady) onInit() 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 e0a6934f2c..462e6c7543 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 @@ -2,7 +2,6 @@ import React, { FC, useState } from 'react' import { Panel, PanelGroup } from 'react-resizable-panels' import NoSelectionPane from '@/features/ide-react/components/editor/no-selection-pane' import FileView from '@/features/file-view/components/file-view' -import { fileViewFile } from '@/features/ide-react/hooks/use-file-tree' import MultipleSelectionPane from '@/features/ide-react/components/editor/multiple-selection-pane' import { HorizontalResizeHandle } from '@/features/ide-react/components/resize/horizontal-resize-handle' import { HorizontalToggler } from '@/features/ide-react/components/resize/horizontal-toggler' @@ -12,12 +11,12 @@ import { usePdfPane } from '@/features/ide-react/hooks/use-pdf-pane' import { useLayoutContext } from '@/shared/context/layout-context' import { useTranslation } from 'react-i18next' import classNames from 'classnames' +import { fileViewFile } from '@/features/ide-react/util/file-view' +import { useFileTreeOpenContext } from '@/features/ide-react/context/file-tree-open-context' export const EditorAndPdf: FC<{ editorPane: React.ReactNode - selectedEntityCount: number - openEntity: any // TODO -}> = ({ editorPane, selectedEntityCount, openEntity }) => { +}> = ({ editorPane }) => { const [resizing, setResizing] = useState(false) const { t } = useTranslation() @@ -33,6 +32,8 @@ export const EditorAndPdf: FC<{ const { view, pdfLayout } = useLayoutContext() + const { selectedEntityCount, openEntity } = useFileTreeOpenContext() + const editorIsOpen = view === 'editor' || view === 'file' || pdfLayout === 'sideBySide' @@ -50,8 +51,8 @@ export const EditorAndPdf: FC<{ void - onFileTreeSelect: FileTreeSelectHandler - onFileTreeDelete: FileTreeDeleteHandler -} +export default function EditorSidebar() { + const { view } = useLayoutContext() + + const { outlineDisabled, outlineRef } = useOutlinePane() -export default function EditorSidebar({ - 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 5c0cb32464..4da5a32fa3 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 @@ -7,13 +7,15 @@ import classNames from 'classnames' 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' +import { useFileTreeOpenContext } from '@/features/ide-react/context/file-tree-open-context' const SymbolPalettePane = lazy( () => import('@/features/ide-react/components/editor/symbol-palette-pane') ) -export const EditorPane: FC<{ show: boolean }> = ({ show }) => { +export const EditorPane: FC = () => { const [editor] = useScopeValue('editor') + const { selectedEntityCount, openEntity } = useFileTreeOpenContext() const isLoading = Boolean( (!editor.sharejs_doc || editor.opening) && @@ -22,12 +24,12 @@ export const EditorPane: FC<{ show: boolean }> = ({ show }) => { ) return ( -
- +
+ = ({ show }) => { }> diff --git a/services/web/frontend/js/features/ide-react/components/file-tree.tsx b/services/web/frontend/js/features/ide-react/components/file-tree.tsx index 712ab7de69..4213074a49 100644 --- a/services/web/frontend/js/features/ide-react/components/file-tree.tsx +++ b/services/web/frontend/js/features/ide-react/components/file-tree.tsx @@ -1,26 +1,19 @@ -import FileTreeRoot from '@/features/file-tree/components/file-tree-root' import React, { useCallback, useState } from 'react' import { useUserContext } from '@/shared/context/user-context' import { useReferencesContext } from '@/features/ide-react/context/references-context' import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context' import { useConnectionContext } from '@/features/ide-react/context/connection-context' -import { - FileTreeDeleteHandler, - FileTreeSelectHandler, -} from '@/features/ide-react/types/file-tree' import { RefProviders } from '../../../../../types/user' +import FileTreeRoot from '@/features/file-tree/components/file-tree-root' +import { useFileTreeOpenContext } from '@/features/ide-react/context/file-tree-open-context' -type FileTreeProps = { - onInit: () => void - onSelect: FileTreeSelectHandler - onDelete: FileTreeDeleteHandler -} - -export function FileTree({ onInit, onSelect, onDelete }: FileTreeProps) { +export function FileTree() { const user = useUserContext() const { indexAllReferences } = useReferencesContext() const { setStartedFreeTrial } = useIdeReactContext() const { isConnected } = useConnectionContext() + const { handleFileTreeInit, handleFileTreeSelect, handleFileTreeDelete } = + useFileTreeOpenContext() const [refProviders, setRefProviders] = useState( () => user.refProviders || {} @@ -45,9 +38,9 @@ export function FileTree({ onInit, onSelect, onDelete }: FileTreeProps) { setRefProviderEnabled={setRefProviderEnabled} setStartedFreeTrial={setStartedFreeTrial} isConnected={isConnected} - onInit={onInit} - onSelect={onSelect} - onDelete={onDelete} + onInit={handleFileTreeInit} + onSelect={handleFileTreeSelect} + onDelete={handleFileTreeDelete} />
) 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 e478946511..ff40cb11e3 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 @@ -11,11 +11,11 @@ import { HistoryProvider } from '@/features/history/context/history-context' import History from '@/features/ide-react/components/history' import EditorSidebar from '@/features/ide-react/components/editor-sidebar' import { EditorPane } from '@/features/ide-react/components/editor/editor-pane' -import { useFileTree } from '@/features/ide-react/hooks/use-file-tree' import { useTranslation } from 'react-i18next' import { useSidebarPane } from '@/features/ide-react/hooks/use-sidebar-pane' import { useChatPane } from '@/features/ide-react/hooks/use-chat-pane' import { EditorAndPdf } from '@/features/ide-react/components/editor-and-pdf' +import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context' export const MainLayout: FC = () => { const { view } = useLayoutContext() @@ -43,23 +43,12 @@ export const MainLayout: FC = () => { handlePaneExpand: handleChatExpand, } = useChatPane() - const { - selectedEntityCount, - openEntity, - openDocId, - handleFileTreeInit, - handleFileTreeSelect, - handleFileTreeDelete, - } = useFileTree() + const { currentDocumentId } = useEditorManagerContext() const { t } = useTranslation() - // keep the editor pane open - const editorPane = openDocId ? ( - - ) : null + // keep the editor pane open when a doc is open, even if the history view is open + const editorPane = currentDocumentId ? : null return (
@@ -78,18 +67,14 @@ export const MainLayout: FC = () => { ref={sidebarPanelRef} id="panel-sidebar" order={1} - defaultSizePixels={200} - minSizePixels={150} + defaultSize={10} + minSize={10} + maxSize={30} collapsible onCollapse={handleSidebarCollapse} onExpand={handleSidebarExpand} > - + {view === 'history' && } @@ -120,11 +105,7 @@ export const MainLayout: FC = () => { ) : ( - + )} @@ -139,8 +120,9 @@ export const MainLayout: FC = () => { ref={chatPanelRef} id="panel-chat" order={2} - defaultSizePixels={200} - minSizePixels={150} + defaultSize={20} + minSize={10} + maxSize={30} collapsible onCollapse={handleChatCollapse} onExpand={handleChatExpand} diff --git a/services/web/frontend/js/features/ide-react/components/resize/vertical-resize-handle.tsx b/services/web/frontend/js/features/ide-react/components/resize/vertical-resize-handle.tsx index 36a58a29a2..9fb2e878ad 100644 --- a/services/web/frontend/js/features/ide-react/components/resize/vertical-resize-handle.tsx +++ b/services/web/frontend/js/features/ide-react/components/resize/vertical-resize-handle.tsx @@ -1,13 +1,19 @@ import { PanelResizeHandle } from 'react-resizable-panels' import { useTranslation } from 'react-i18next' import { PanelResizeHandleProps } from 'react-resizable-panels/dist/declarations/src/PanelResizeHandle' +import classNames from 'classnames' export function VerticalResizeHandle(props: PanelResizeHandleProps) { const { t } = useTranslation() return ( -
+
) } diff --git a/services/web/frontend/js/features/ide-react/hooks/use-file-tree.ts b/services/web/frontend/js/features/ide-react/context/file-tree-open-context.tsx similarity index 73% rename from services/web/frontend/js/features/ide-react/hooks/use-file-tree.ts rename to services/web/frontend/js/features/ide-react/context/file-tree-open-context.tsx index f0558e4b0d..da1a66d5b8 100644 --- a/services/web/frontend/js/features/ide-react/hooks/use-file-tree.ts +++ b/services/web/frontend/js/features/ide-react/context/file-tree-open-context.tsx @@ -1,28 +1,46 @@ -import { FileRef } from '../../../../../types/file-ref' -import { BinaryFile } from '@/features/file-view/types/binary-file' +import { + createContext, + FC, + useCallback, + useContext, + useEffect, + useMemo, + useRef, + useState, +} from 'react' +import { useProjectContext } from '@/shared/context/project-context' +import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context' +import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context' import { useSelectFileTreeEntity } from '@/features/ide-react/hooks/use-select-file-tree-entity' import useScopeValue from '@/shared/hooks/use-scope-value' -import { useCallback, useEffect, useRef, useState } from 'react' +import { BinaryFile } from '@/features/file-view/types/binary-file' import { - FileTreeDeleteHandler, FileTreeDocumentFindResult, FileTreeFileRefFindResult, FileTreeFindResult, } from '@/features/ide-react/types/file-tree' import { debugConsole } from '@/utils/debugging' -import { useProjectContext } from '@/shared/context/project-context' -import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context' -import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context' +import { convertFileRefToBinaryFile } from '@/features/ide-react/util/file-view' -export const useFileTree = () => { +const FileTreeOpenContext = createContext< + | { + selectedEntityCount: number + openEntity: FileTreeDocumentFindResult | FileTreeFileRefFindResult | null + handleFileTreeInit: () => void + handleFileTreeSelect: (selectedEntities: FileTreeFindResult[]) => void + handleFileTreeDelete: (entity: FileTreeFindResult) => void + } + | undefined +>(undefined) + +export const FileTreeOpenProvider: FC = ({ children }) => { const { rootDocId } = useProjectContext() - const { eventEmitter } = useIdeReactContext() + const { eventEmitter, projectJoined } = useIdeReactContext() const { openDocId: openDocWithId, currentDocumentId: openDocId, openInitialDoc, } = useEditorManagerContext() - const { projectJoined } = useIdeReactContext() const { selectEntity } = useSelectFileTreeEntity() const [, setOpenFile] = useScopeValue('openFile') const [openEntity, setOpenEntity] = useState< @@ -68,8 +86,8 @@ export const useFileTree = () => { [fileTreeReady, setOpenFile, openDocWithId] ) - const handleFileTreeDelete: FileTreeDeleteHandler = useCallback( - entity => { + const handleFileTreeDelete = useCallback( + (entity: FileTreeFindResult) => { eventEmitter.emit('entity:deleted', entity) // Select the root document if the current document was deleted if (entity.entity._id === openDocId) { @@ -104,38 +122,37 @@ export const useFileTree = () => { } }, [fileTreeReady, openInitialDoc, projectJoined, rootDocId]) - return { - selectedEntityCount, - openEntity, - openDocId, + const value = useMemo(() => { + return { + selectedEntityCount, + openEntity, + handleFileTreeInit, + handleFileTreeSelect, + handleFileTreeDelete, + } + }, [ + handleFileTreeDelete, handleFileTreeInit, handleFileTreeSelect, - handleFileTreeDelete, - } + openEntity, + selectedEntityCount, + ]) + + return ( + + {children} + + ) } -function convertFileRefToBinaryFile(fileRef: FileRef): BinaryFile { - return { - _id: fileRef._id, - name: fileRef.name, - id: fileRef._id, - type: 'file', - selected: true, - linkedFileData: fileRef.linkedFileData, - created: fileRef.created ? new Date(fileRef.created) : new Date(), - } -} +export const useFileTreeOpenContext = () => { + const context = useContext(FileTreeOpenContext) -// `FileViewHeader`, which is TypeScript, expects a BinaryFile, which has a -// `created` property of type `Date`, while `TPRFileViewInfo`, written in JS, -// into which `FileViewHeader` passes its BinaryFile, expects a file object with -// `created` property of type `string`, which is a mismatch. `TPRFileViewInfo` -// is the only one making runtime complaints and it seems that other uses of -// `FileViewHeader` pass in a string for `created`, so that's what this function -// does too. -export function fileViewFile(fileRef: FileRef) { - return { - ...convertFileRefToBinaryFile(fileRef), - created: fileRef.created, + if (!context) { + throw new Error( + 'useFileTreeOpenContext is only available inside FileTreeOpenProvider' + ) } + + return context } diff --git a/services/web/frontend/js/features/ide-react/context/outline-context.tsx b/services/web/frontend/js/features/ide-react/context/outline-context.tsx new file mode 100644 index 0000000000..825765162a --- /dev/null +++ b/services/web/frontend/js/features/ide-react/context/outline-context.tsx @@ -0,0 +1,195 @@ +import { + createContext, + Dispatch, + FC, + SetStateAction, + useCallback, + useContext, + useMemo, + useState, +} from 'react' +import useScopeEventEmitter from '@/shared/hooks/use-scope-event-emitter' +import useEventListener from '@/shared/hooks/use-event-listener' +import * as eventTracking from '@/infrastructure/event-tracking' +import useScopeValue from '@/shared/hooks/use-scope-value' +import isValidTeXFile from '@/main/is-valid-tex-file' +import localStorage from '@/infrastructure/local-storage' +import { useProjectContext } from '@/shared/context/project-context' + +export type PartialFlatOutline = { + level: number + title: string + line: number +}[] + +export type FlatOutlineState = + | { + items: PartialFlatOutline + partial: boolean + } + | undefined + +const OutlineContext = createContext< + | { + flatOutline: FlatOutlineState + setFlatOutline: Dispatch> + highlightedLine: number + jumpToLine: (lineNumber: number, syncToPdf: boolean) => void + canShowOutline: boolean + outlineExpanded: boolean + toggleOutlineExpanded: () => void + } + | undefined +>(undefined) + +export const OutlineProvider: FC = ({ children }) => { + const [flatOutline, setFlatOutline] = useState(undefined) + const [currentlyHighlightedLine, setCurrentlyHighlightedLine] = + useState(-1) + const [binaryFileOpened, setBinaryFileOpened] = useState(false) + const [ignoreNextCursorUpdate, setIgnoreNextCursorUpdate] = + useState(false) + const [ignoreNextScroll, setIgnoreNextScroll] = useState(false) + + const goToLineEmitter = useScopeEventEmitter('editor:gotoLine', true) + + useEventListener( + 'file-view:file-opened', + useCallback(_ => { + setBinaryFileOpened(true) + }, []) + ) + + useEventListener( + 'scroll:editor:update', + useCallback( + evt => { + if (ignoreNextScroll) { + setIgnoreNextScroll(false) + return + } + setCurrentlyHighlightedLine(evt.detail + 1) + }, + [ignoreNextScroll] + ) + ) + + useEventListener( + 'cursor:editor:update', + useCallback( + evt => { + if (ignoreNextCursorUpdate) { + setIgnoreNextCursorUpdate(false) + return + } + setCurrentlyHighlightedLine(evt.detail.row + 1) + }, + [ignoreNextCursorUpdate] + ) + ) + + useEventListener( + 'doc:after-opened', + useCallback(evt => { + if (evt.detail) { + setIgnoreNextCursorUpdate(true) + } + setBinaryFileOpened(false) + setIgnoreNextScroll(true) + }, []) + ) + + const jumpToLine = useCallback( + (lineNumber: number, syncToPdf: boolean) => { + setIgnoreNextScroll(true) + goToLineEmitter(lineNumber, 0, syncToPdf) + eventTracking.sendMB('outline-jump-to-line') + }, + [goToLineEmitter] + ) + + const highlightedLine = useMemo( + () => + closestSectionLineNumber(flatOutline?.items, currentlyHighlightedLine), + [flatOutline, currentlyHighlightedLine] + ) + + // TODO: update when the file is renamed + const [docName] = useScopeValue('editor.open_doc_name') + const isTexFile = useMemo( + () => (docName ? isValidTeXFile(docName) : false), + [docName] + ) + + const { _id: projectId } = useProjectContext() + const storageKey = `file_outline.expanded.${projectId}` + + const [outlineExpanded, setOutlineExpanded] = useState( + () => localStorage.getItem(storageKey) !== false + ) + + const canShowOutline = isTexFile && !binaryFileOpened + + const toggleOutlineExpanded = useCallback(() => { + if (canShowOutline) { + localStorage.setItem(storageKey, !outlineExpanded) + eventTracking.sendMB( + outlineExpanded ? 'outline-collapse' : 'outline-expand' + ) + setOutlineExpanded(!outlineExpanded) + } + }, [canShowOutline, outlineExpanded, storageKey]) + + const value = useMemo( + () => ({ + flatOutline, + setFlatOutline, + highlightedLine, + jumpToLine, + canShowOutline, + outlineExpanded, + toggleOutlineExpanded, + }), + [ + flatOutline, + highlightedLine, + jumpToLine, + canShowOutline, + outlineExpanded, + toggleOutlineExpanded, + ] + ) + + return ( + {children} + ) +} + +export const useOutlineContext = () => { + const context = useContext(OutlineContext) + + if (!context) { + throw new Error( + 'useOutlineProvider is only available inside OutlineProvider' + ) + } + + return context +} + +const closestSectionLineNumber = ( + outline: { line: number }[] | undefined, + lineNumber: number +): number => { + if (!outline) { + return -1 + } + let highestLine = -1 + for (const section of outline) { + if (section.line > lineNumber) { + return highestLine + } + highestLine = section.line + } + return highestLine +} diff --git a/services/web/frontend/js/features/ide-react/context/react-context-root.tsx b/services/web/frontend/js/features/ide-react/context/react-context-root.tsx index aa97ba7ff6..200d3429d6 100644 --- a/services/web/frontend/js/features/ide-react/context/react-context-root.tsx +++ b/services/web/frontend/js/features/ide-react/context/react-context-root.tsx @@ -20,6 +20,8 @@ import { ModalsContextProvider } from '@/features/ide-react/context/modals-conte import { FileTreePathProvider } from '@/features/file-tree/contexts/file-tree-path' import { UserSettingsProvider } from '@/shared/context/user-settings-context' import { PermissionsProvider } from '@/features/ide-react/context/permissions-context' +import { FileTreeOpenProvider } from '@/features/ide-react/context/file-tree-open-context' +import { OutlineProvider } from '@/features/ide-react/context/outline-context' export const ReactContextRoot: FC = ({ children }) => { return ( @@ -42,11 +44,15 @@ export const ReactContextRoot: FC = ({ children }) => { - - - {children} - - + + + + + {children} + + + + 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 95e4984680..65c2a39aa2 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 @@ -12,7 +12,7 @@ export default function useFixedSizeColumn(isOpen: boolean) { const handleLayout: PanelGroupOnLayout = useCallback(() => { if (fixedPanelRef.current) { - fixedPanelSizeRef.current = fixedPanelRef.current.getSize().sizePixels + fixedPanelSizeRef.current = fixedPanelRef.current.getSize() setInitialLayoutDone(true) } }, []) @@ -43,9 +43,7 @@ export default function useFixedSizeColumn(isOpen: boolean) { const resizeObserver = new ResizeObserver(() => { // when the panel group resizes, set the size of this panel to the previous size, in pixels - fixedPanelRef.current?.resize({ - sizePixels: fixedPanelSizeRef.current, - }) + fixedPanelRef.current?.resize(fixedPanelSizeRef.current) }) resizeObserver.observe(panelGroupElement) diff --git a/services/web/frontend/js/features/ide-react/hooks/use-outline-pane.ts b/services/web/frontend/js/features/ide-react/hooks/use-outline-pane.ts new file mode 100644 index 0000000000..0c5a77727e --- /dev/null +++ b/services/web/frontend/js/features/ide-react/hooks/use-outline-pane.ts @@ -0,0 +1,44 @@ +import { useOutlineContext } from '@/features/ide-react/context/outline-context' +import { useProjectContext } from '@/shared/context/project-context' +import { useEffect, useRef } from 'react' +import { ImperativePanelHandle } from 'react-resizable-panels' +import localStorage from '@/infrastructure/local-storage' + +export const useOutlinePane = () => { + const { canShowOutline, outlineExpanded } = useOutlineContext() + const { _id: projectId } = useProjectContext() + const outlineDisabled = !canShowOutline || !outlineExpanded + + const outlineRef = useRef(null) + + // store the expanded height in localStorage when collapsing, + // so it can be restored when expanding after reloading the page + useEffect(() => { + const outlinePane = outlineRef.current + + if (outlinePane) { + // NOTE: outline size is shared across projects + const storageKey = 'ide-panel.outline.size' + + if (outlineDisabled) { + // collapsing, so store the current size if > 0 + const size = outlinePane.getSize() + if (size > 0) { + localStorage.setItem(storageKey, size) + } + + outlinePane.collapse() + } else { + outlinePane.expand() + + // if the panel has been expanded to zero height, use the stored height instead + if (outlinePane.getSize() === 0) { + const size = Number(localStorage.getItem(storageKey) || 50) + outlinePane.resize(size) + } + } + } + }, [outlineDisabled, projectId]) + + return { outlineDisabled, outlineRef } +} diff --git a/services/web/frontend/js/features/ide-react/types/file-tree.ts b/services/web/frontend/js/features/ide-react/types/file-tree.ts index 66d2476ca1..d115cafff6 100644 --- a/services/web/frontend/js/features/ide-react/types/file-tree.ts +++ b/services/web/frontend/js/features/ide-react/types/file-tree.ts @@ -32,9 +32,3 @@ export type FileTreeFindResult = | FileTreeFolderFindResult | FileTreeDocumentFindResult | FileTreeFileRefFindResult - -export type FileTreeSelectHandler = ( - selectedEntities: FileTreeFindResult[] -) => void - -export type FileTreeDeleteHandler = (entity: FileTreeFindResult) => void diff --git a/services/web/frontend/js/features/ide-react/util/file-view.ts b/services/web/frontend/js/features/ide-react/util/file-view.ts new file mode 100644 index 0000000000..d08a32cd30 --- /dev/null +++ b/services/web/frontend/js/features/ide-react/util/file-view.ts @@ -0,0 +1,28 @@ +import { FileRef } from '../../../../../types/file-ref' +import { BinaryFile } from '@/features/file-view/types/binary-file' + +export function convertFileRefToBinaryFile(fileRef: FileRef): BinaryFile { + return { + _id: fileRef._id, + name: fileRef.name, + id: fileRef._id, + type: 'file', + selected: true, + linkedFileData: fileRef.linkedFileData, + created: fileRef.created ? new Date(fileRef.created) : new Date(), + } +} + +// `FileViewHeader`, which is TypeScript, expects a BinaryFile, which has a +// `created` property of type `Date`, while `TPRFileViewInfo`, written in JS, +// into which `FileViewHeader` passes its BinaryFile, expects a file object with +// `created` property of type `string`, which is a mismatch. `TPRFileViewInfo` +// is the only one making runtime complaints and it seems that other uses of +// `FileViewHeader` pass in a string for `created`, so that's what this function +// does too. +export function fileViewFile(fileRef: FileRef) { + return { + ...convertFileRefToBinaryFile(fileRef), + created: fileRef.created, + } +} diff --git a/services/web/frontend/js/features/outline/components/outline-container.tsx b/services/web/frontend/js/features/outline/components/outline-container.tsx new file mode 100644 index 0000000000..d4b833ee8f --- /dev/null +++ b/services/web/frontend/js/features/outline/components/outline-container.tsx @@ -0,0 +1,95 @@ +import { FC, memo, useEffect, useRef, useState } from 'react' +import OutlinePane from '@/features/outline/components/outline-pane' +import { + FlatOutlineState, + PartialFlatOutline, + useOutlineContext, +} from '@/features/ide-react/context/outline-context' +import { + nestOutline, + Outline, +} from '@/features/source-editor/utils/tree-operations/outline' +import useScopeEventEmitter from '@/shared/hooks/use-scope-event-emitter' +import { debugConsole } from '@/utils/debugging' + +export const OutlineContainer: FC = memo(() => { + const { + flatOutline, + highlightedLine, + canShowOutline, + jumpToLine, + outlineExpanded, + toggleOutlineExpanded, + } = useOutlineContext() + + const outlineToggledEmitter = useScopeEventEmitter('outline-toggled') + + const [outline, setOutline] = useState<{ + items: Outline[] + partial: boolean + }>(() => ({ items: [], partial: false })) + + const prevFlatOutlineRef = useRef(undefined) + + // when the flat outline changes, calculate the nested outline + // TODO: only calculate when outlineExpanded is true + useEffect(() => { + const prevFlatOutline = prevFlatOutlineRef.current + prevFlatOutlineRef.current = flatOutline + + if (flatOutline) { + if (outlineChanged(prevFlatOutline?.items, flatOutline.items)) { + debugConsole.log('Rebuilding changed outline') + setOutline({ + items: nestOutline(flatOutline.items), + partial: flatOutline.partial, + }) + } + } else { + setOutline({ items: [], partial: false }) + } + }, [flatOutline]) + + return ( +
+ +
+ ) +}) +OutlineContainer.displayName = 'OutlineContainer' + +const outlineChanged = ( + a: PartialFlatOutline | undefined, + b: PartialFlatOutline +): boolean => { + if (!a) { + return true + } + + if (a.length !== b.length) { + return true + } + + for (let i = 0; i < a.length; i++) { + const aItem = a[i] + const bItem = b[i] + if ( + aItem.level !== bItem.level || + aItem.line !== bItem.line || + aItem.title !== bItem.title + ) { + return true + } + } + + return false +} diff --git a/services/web/frontend/js/features/outline/components/outline-pane.jsx b/services/web/frontend/js/features/outline/components/outline-pane.jsx index 6460544301..c25ef8d4ba 100644 --- a/services/web/frontend/js/features/outline/components/outline-pane.jsx +++ b/services/web/frontend/js/features/outline/components/outline-pane.jsx @@ -1,13 +1,11 @@ -import React, { useState, useEffect } from 'react' +import React, { useEffect } from 'react' import PropTypes from 'prop-types' import classNames from 'classnames' import { useTranslation } from 'react-i18next' import OutlineRoot from './outline-root' import Icon from '../../../shared/components/icon' -import localStorage from '../../../infrastructure/local-storage' import withErrorBoundary from '../../../infrastructure/error-boundary' -import { useProjectContext } from '../../../shared/context/project-context' import Tooltip from '../../../shared/components/tooltip' const OutlinePane = React.memo(function OutlinePane({ @@ -15,22 +13,13 @@ const OutlinePane = React.memo(function OutlinePane({ outline, jumpToLine, onToggle, - eventTracking, highlightedLine, - show, isPartial = false, + expanded, + toggleExpanded, }) { const { t } = useTranslation() - const { _id: projectId } = useProjectContext({ - _id: PropTypes.string.isRequired, - }) - - const storageKey = `file_outline.expanded.${projectId}` - const [expanded, setExpanded] = useState(() => { - const storedExpandedState = localStorage.getItem(storageKey) !== false - return storedExpandedState - }) const isOpen = isTexFile && expanded useEffect(() => { @@ -41,27 +30,13 @@ const OutlinePane = React.memo(function OutlinePane({ 'outline-pane-disabled': !isTexFile, }) - function handleExpandCollapseClick() { - if (isTexFile) { - localStorage.setItem(storageKey, !expanded) - eventTracking.sendMB(expanded ? 'outline-collapse' : 'outline-expand') - setExpanded(!expanded) - } - } - - // NOTE: This flag is for disabling the rendering of the component. Used while - // both an Angular and React-based file outline is present in the code base. - if (!show) { - return null - } - return (
- {expanded && isTexFile ? ( + {isOpen && (
- ) : null} + )}
) }) @@ -103,10 +78,10 @@ OutlinePane.propTypes = { outline: PropTypes.array.isRequired, jumpToLine: PropTypes.func.isRequired, onToggle: PropTypes.func.isRequired, - eventTracking: PropTypes.object.isRequired, highlightedLine: PropTypes.number, - show: PropTypes.bool.isRequired, isPartial: PropTypes.bool, + expanded: PropTypes.bool, + toggleExpanded: PropTypes.func.isRequired, } export default withErrorBoundary(OutlinePane) diff --git a/services/web/frontend/js/features/outline/controllers/outline-controller.js b/services/web/frontend/js/features/outline/controllers/outline-controller.js new file mode 100644 index 0000000000..dc37385af8 --- /dev/null +++ b/services/web/frontend/js/features/outline/controllers/outline-controller.js @@ -0,0 +1,9 @@ +import App from '@/base' +import { react2angular } from 'react2angular' +import { rootContext } from '@/shared/context/root-context' +import { OutlineContainer } from '@/features/outline/components/outline-container' + +App.component( + 'outlineContainer', + react2angular(rootContext.use(OutlineContainer)) +) diff --git a/services/web/frontend/js/features/source-editor/components/codemirror-outline.tsx b/services/web/frontend/js/features/source-editor/components/codemirror-outline.tsx index a37309b399..3b4f9e3f8e 100644 --- a/services/web/frontend/js/features/source-editor/components/codemirror-outline.tsx +++ b/services/web/frontend/js/features/source-editor/components/codemirror-outline.tsx @@ -1,190 +1,33 @@ -import { createPortal } from 'react-dom' import { useCodeMirrorStateContext } from './codemirror-editor' -import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' -import OutlinePane from '../../outline/components/outline-pane' +import React, { useEffect } from 'react' import { documentOutline } from '../languages/latex/document-outline' -import isValidTeXFile from '../../../main/is-valid-tex-file' -import useScopeValue from '../../../shared/hooks/use-scope-value' -import useScopeEventEmitter from '../../../shared/hooks/use-scope-event-emitter' -import * as eventTracking from '../../../infrastructure/event-tracking' -import { nestOutline, Outline } from '../utils/tree-query' import { ProjectionStatus } from '../utils/tree-operations/projection' -import useEventListener from '../../../shared/hooks/use-event-listener' import useDebounce from '../../../shared/hooks/use-debounce' - -const closestSectionLineNumber = ( - outline: { line: number }[] | undefined, - lineNumber: number -): number => { - if (!outline) { - return -1 - } - let highestLine = -1 - for (const section of outline) { - if (section.line > lineNumber) { - return highestLine - } - highestLine = section.line - } - return highestLine -} - -type PartialFlatOutline = { - level: number - title: string - line: number -}[] - -const outlineChanged = ( - a: PartialFlatOutline | undefined, - b: PartialFlatOutline -): boolean => { - if (!a) { - return true - } - - if (a.length !== b.length) { - return true - } - - for (let i = 0; i < a.length; i++) { - const aItem = a[i] - const bItem = b[i] - if ( - aItem.level !== bItem.level || - aItem.line !== bItem.line || - aItem.title !== bItem.title - ) { - return true - } - } - - return false -} +import { useOutlineContext } from '@/features/ide-react/context/outline-context' export const CodemirrorOutline = React.memo(function CodemirrorOutline() { + const { setFlatOutline } = useOutlineContext() + const state = useCodeMirrorStateContext() const debouncedState = useDebounce(state, 100) - const [docName] = useScopeValue('editor.open_doc_name') - const goToLineEmitter = useScopeEventEmitter('editor:gotoLine', true) - const outlineToggledEmitter = useScopeEventEmitter('outline-toggled') - const [currentlyHighlightedLine, setCurrentlyHighlightedLine] = - useState(-1) - const isTexFile = useMemo(() => isValidTeXFile(docName), [docName]) - const [ignoreNextCursorUpdate, setIgnoreNextCursorUpdate] = - useState(false) - const [ignoreNextScroll, setIgnoreNextScroll] = useState(false) - const [binaryFileOpened, setBinaryFileOpened] = useState(false) - - useEventListener( - 'file-view:file-opened', - useCallback(_ => { - setBinaryFileOpened(true) - }, []) - ) - - useEventListener( - 'scroll:editor:update', - useCallback( - evt => { - if (ignoreNextScroll) { - setIgnoreNextScroll(false) - return - } - setCurrentlyHighlightedLine(evt.detail + 1) - }, - [ignoreNextScroll] - ) - ) - - useEventListener( - 'cursor:editor:update', - useCallback( - evt => { - if (ignoreNextCursorUpdate) { - setIgnoreNextCursorUpdate(false) - return - } - setCurrentlyHighlightedLine(evt.detail.row + 1) - }, - [ignoreNextCursorUpdate] - ) - ) - - useEventListener( - 'doc:after-opened', - useCallback(evt => { - if (evt.detail) { - setIgnoreNextCursorUpdate(true) - } - setBinaryFileOpened(false) - setIgnoreNextScroll(true) - }, []) - ) - const outlineResult = debouncedState.field(documentOutline, false) // when the outline projection changes, calculate the flat outline - const flatOutline = useMemo(() => { - if (!outlineResult || outlineResult.status === ProjectionStatus.Pending) { - return undefined - } - - // We have a (potentially partial) outline. - return outlineResult.items.map(element => { - const { level, title, line } = element - return { level, title, line } - }) - }, [outlineResult]) - - const [outline, setOutline] = useState([]) - - const prevFlatOutlineRef = useRef(undefined) - - // when the flat outline changes, calculate the nested outline useEffect(() => { - const prevFlatOutline = prevFlatOutlineRef.current - prevFlatOutlineRef.current = flatOutline - - if (flatOutline) { - if (outlineChanged(prevFlatOutline, flatOutline)) { - setOutline(nestOutline(flatOutline)) - } + if (outlineResult && outlineResult.status !== ProjectionStatus.Pending) { + // We have a (potentially partial) outline. + setFlatOutline({ + items: outlineResult.items.map(element => ({ + level: element.level, + title: element.title, + line: element.line, + })), + partial: outlineResult?.status === ProjectionStatus.Partial, + }) } else { - setOutline([]) + setFlatOutline(undefined) } - }, [flatOutline]) + }, [outlineResult, setFlatOutline]) - const jumpToLine = useCallback( - (lineNumber, syncToPdf) => { - setIgnoreNextScroll(true) - goToLineEmitter(lineNumber, 0, syncToPdf) - eventTracking.sendMB('outline-jump-to-line') - }, - [goToLineEmitter] - ) - - const highlightedLine = useMemo( - () => closestSectionLineNumber(flatOutline, currentlyHighlightedLine), - [flatOutline, currentlyHighlightedLine] - ) - - const outlineDomElement = document.querySelector('.outline-container') - if (!outlineDomElement) { - return null - } - - return createPortal( - , - outlineDomElement - ) + return null }) diff --git a/services/web/frontend/js/features/source-editor/utils/tree-operations/outline.ts b/services/web/frontend/js/features/source-editor/utils/tree-operations/outline.ts index 696610015c..0ec3e873ed 100644 --- a/services/web/frontend/js/features/source-editor/utils/tree-operations/outline.ts +++ b/services/web/frontend/js/features/source-editor/utils/tree-operations/outline.ts @@ -3,6 +3,7 @@ import { SyntaxNode, SyntaxNodeRef } from '@lezer/common' import { NodeIntersectsChangeFn, ProjectionItem } from './projection' import * as tokens from '../../lezer-latex/latex.terms.mjs' import { getEnvironmentArguments, getEnvironmentName } from './environments' +import { PartialFlatOutline } from '@/features/ide-react/context/outline-context' export type Outline = { line: number @@ -116,7 +117,7 @@ export const enterNode = ( } const name = command.getChild('SectioningArgument')?.getChild('LongArg') - if (name == null || command == null) { + if (!name) { return } @@ -185,14 +186,13 @@ const flatItemToOutline = (item: { title: string line: number level: number -}): Outline => { - const { title, line, level } = item - return { title, line, level } -} +}): Outline => ({ + title: item.title, + line: item.line, + level: item.level, +}) -export const nestOutline = ( - flatOutline: { title: string; line: number; level: number }[] -): Outline[] => { +export const nestOutline = (flatOutline: PartialFlatOutline): Outline[] => { const parentStack: Outline[] = [] const outline = [] diff --git a/services/web/frontend/js/ide.js b/services/web/frontend/js/ide.js index c293b8bdfd..ca938e7229 100644 --- a/services/web/frontend/js/ide.js +++ b/services/web/frontend/js/ide.js @@ -46,6 +46,7 @@ import './features/share-project-modal/controllers/react-share-project-modal-con import './features/source-editor/controllers/grammarly-advert-controller' import './features/history/controllers/history-controller' import './features/editor-left-menu/controllers/editor-left-menu-controller' +import './features/outline/controllers/outline-controller' import { cleanupServiceWorker } from './utils/service-worker-cleanup' import { reportCM6Perf } from './infrastructure/cm6-performance' import { debugConsole } from '@/utils/debugging' diff --git a/services/web/frontend/js/shared/context/root-context.jsx b/services/web/frontend/js/shared/context/root-context.jsx index 0103c3dc17..893f74ce80 100644 --- a/services/web/frontend/js/shared/context/root-context.jsx +++ b/services/web/frontend/js/shared/context/root-context.jsx @@ -15,6 +15,7 @@ import { FileTreeDataProvider } from './file-tree-data-context' import { ProjectSettingsProvider } from '@/features/editor-left-menu/context/project-settings-context' import { FileTreePathProvider } from '@/features/file-tree/contexts/file-tree-path' import { UserSettingsProvider } from '@/shared/context/user-settings-context' +import { OutlineProvider } from '@/features/ide-react/context/outline-context' export function ContextRoot({ children, ide }) { return ( @@ -31,7 +32,9 @@ export function ContextRoot({ children, ide }) { - {children} + + {children} + diff --git a/services/web/frontend/stories/decorators/scope.tsx b/services/web/frontend/stories/decorators/scope.tsx index 1b4f6e4269..a9439d1b98 100644 --- a/services/web/frontend/stories/decorators/scope.tsx +++ b/services/web/frontend/stories/decorators/scope.tsx @@ -22,6 +22,7 @@ import { DetachCompileProvider } from '@/shared/context/detach-compile-context' import { ProjectSettingsProvider } from '@/features/editor-left-menu/context/project-settings-context' import { FileTreePathProvider } from '@/features/file-tree/contexts/file-tree-path' import { UserSettingsProvider } from '@/shared/context/user-settings-context' +import { OutlineProvider } from '@/features/ide-react/context/outline-context' const scopeWatchers: [string, (value: any) => void][] = [] @@ -245,6 +246,7 @@ export const ScopeDecorator = ( IdeAngularProvider, LayoutProvider, LocalCompileProvider, + OutlineProvider, ProjectProvider, ProjectSettingsProvider, SplitTestProvider, @@ -267,7 +269,9 @@ export const ScopeDecorator = ( - + + + diff --git a/services/web/frontend/stories/outline.stories.jsx b/services/web/frontend/stories/outline.stories.jsx index 41223454ff..03ed349e12 100644 --- a/services/web/frontend/stories/outline.stories.jsx +++ b/services/web/frontend/stories/outline.stories.jsx @@ -49,14 +49,13 @@ export default { component: OutlinePane, argTypes: { jumpToLine: { action: 'jumpToLine' }, + onToggle: { action: 'onToggle' }, + toggleExpanded: { action: 'toggleExpanded' }, }, args: { - eventTracking: { sendMB: () => {} }, isTexFile: true, outline: [], - jumpToLine: () => {}, - onToggle: () => {}, - show: true, + expanded: true, }, decorators: [ScopeDecorator], } diff --git a/services/web/frontend/stylesheets/app/editor/ide-react.less b/services/web/frontend/stylesheets/app/editor/ide-react.less index 0baf735059..cd0c8d64f4 100644 --- a/services/web/frontend/stylesheets/app/editor/ide-react.less +++ b/services/web/frontend/stylesheets/app/editor/ide-react.less @@ -92,8 +92,15 @@ height: 6px; background-color: @vertical-resizable-resizer-bg; - &:hover { - background-color: @vertical-resizable-resizer-hover-bg; + &.vertical-resize-handle-enabled { + &:hover { + background-color: @vertical-resizable-resizer-hover-bg; + } + } + + &:not(.vertical-resize-handle-enabled) { + opacity: 0.5; + cursor: default; } &::after { @@ -120,6 +127,7 @@ .ide-react-file-tree-panel { display: flex; + flex-direction: column; // Prevent the file tree expanding beyond the boundary of the panel .file-tree { diff --git a/services/web/frontend/stylesheets/app/editor/outline.less b/services/web/frontend/stylesheets/app/editor/outline.less index 53cd8fc921..8a6fb63f9d 100644 --- a/services/web/frontend/stylesheets/app/editor/outline.less +++ b/services/web/frontend/stylesheets/app/editor/outline.less @@ -1,5 +1,6 @@ .outline-container { width: 100%; + height: 100%; background-color: @file-tree-bg; } diff --git a/services/web/package.json b/services/web/package.json index 2db6359d20..8474c54a30 100644 --- a/services/web/package.json +++ b/services/web/package.json @@ -332,7 +332,7 @@ "react-i18next": "^13.3.1", "react-linkify": "^1.0.0-alpha", "react-refresh": "^0.14.0", - "react-resizable-panels": "^0.0.63", + "react-resizable-panels": "^1.0.1", "react2angular": "^4.0.6", "react2angular-shared-context": "^1.1.0", "requirejs": "^2.3.6", diff --git a/services/web/test/frontend/features/outline/components/outline-item.spec.tsx b/services/web/test/frontend/features/outline/components/outline-item.spec.tsx new file mode 100644 index 0000000000..b30ba59e8f --- /dev/null +++ b/services/web/test/frontend/features/outline/components/outline-item.spec.tsx @@ -0,0 +1,97 @@ +import OutlineItem from '../../../../../frontend/js/features/outline/components/outline-item' + +describe('', function () { + it('renders basic item', function () { + cy.mount( + + ) + + cy.findByRole('treeitem', { current: false }) + cy.findByRole('button', { name: 'Test Title' }) + cy.findByRole('button', { name: 'Collapse' }).should('not.exist') + }) + + it('collapses and expands', function () { + cy.mount( + + ) + + cy.findByRole('button', { name: 'Child' }) + cy.findByRole('button', { name: 'Collapse' }).click() + cy.findByRole('button', { name: 'Expand' }) + cy.findByRole('button', { name: 'Child' }).should('not.exist') + }) + + it('highlights', function () { + cy.mount( + + ) + + cy.findByRole('treeitem', { current: true }) + }) + + it('highlights when has collapsed highlighted child', function () { + cy.mount( + + ) + + cy.findByRole('treeitem', { name: 'Parent', current: false }) + cy.findByRole('treeitem', { name: 'Child', current: true }) + cy.findByRole('button', { name: 'Collapse' }).click() + cy.findByRole('treeitem', { name: 'Parent', current: true }) + }) + + it('click and double-click jump to location', function () { + cy.mount( + + ) + + cy.findByRole('button', { name: 'Parent' }).click() + cy.get('@jumpToLine').should('have.been.calledOnceWith', 1, false) + + cy.findByRole('button', { name: 'Parent' }).dblclick() + cy.get('@jumpToLine').should('have.been.calledThrice') + cy.get('@jumpToLine').should('have.been.calledWith', 1, true) + }) +}) diff --git a/services/web/test/frontend/features/outline/components/outline-item.test.jsx b/services/web/test/frontend/features/outline/components/outline-item.test.jsx deleted file mode 100644 index d557d395c8..0000000000 --- a/services/web/test/frontend/features/outline/components/outline-item.test.jsx +++ /dev/null @@ -1,109 +0,0 @@ -import { expect } from 'chai' -import sinon from 'sinon' -import { screen, render, fireEvent, waitFor } from '@testing-library/react' - -import OutlineItem from '../../../../../frontend/js/features/outline/components/outline-item' - -describe('', function () { - const jumpToLine = sinon.stub() - - afterEach(function () { - jumpToLine.reset() - }) - - it('renders basic item', function () { - const outlineItem = { - title: 'Test Title', - line: 1, - } - render() - - screen.getByRole('treeitem', { current: false }) - screen.getByRole('button', { name: outlineItem.title }) - expect(screen.queryByRole('button', { name: 'Collapse' })).to.not.exist - }) - - it('collapses and expands', function () { - const outlineItem = { - title: 'Parent', - line: 1, - children: [{ title: 'Child', line: 2 }], - } - render() - - const collapseButton = screen.getByRole('button', { name: 'Collapse' }) - - // test that children are rendered - screen.getByRole('button', { name: 'Child' }) - - fireEvent.click(collapseButton) - - screen.getByRole('button', { name: 'Expand' }) - - expect(screen.queryByRole('button', { name: 'Child' })).to.not.exist - }) - - it('highlights', function () { - const outlineItem = { - title: 'Parent', - line: 1, - } - - render( - - ) - - screen.getByRole('treeitem', { current: true }) - }) - - it('highlights when has collapsed highlighted child', function () { - const outlineItem = { - title: 'Parent', - line: 1, - children: [{ title: 'Child', line: 2 }], - } - render( - - ) - - screen.getByRole('treeitem', { name: 'Parent', current: false }) - screen.getByRole('treeitem', { name: 'Child', current: true }) - - fireEvent.click(screen.getByRole('button', { name: 'Collapse' })) - - screen.getByRole('treeitem', { name: 'Parent', current: true }) - }) - - it('click and double-click jump to location', async function () { - const outlineItem = { - title: 'Parent', - line: 1, - } - render() - - const titleButton = screen.getByRole('button', { name: outlineItem.title }) - - fireEvent.click(titleButton, { detail: 1 }) - await waitFor(() => { - expect(jumpToLine).to.be.calledOnce - expect(jumpToLine).to.be.calledWith(1, false) - }) - - jumpToLine.reset() - fireEvent.click(titleButton, { detail: 2 }) - await waitFor(() => { - expect(jumpToLine).to.be.calledOnce - expect(jumpToLine).to.be.calledWith(1, true) - }) - }) -}) diff --git a/services/web/test/frontend/features/outline/components/outline-list.spec.tsx b/services/web/test/frontend/features/outline/components/outline-list.spec.tsx new file mode 100644 index 0000000000..88912a944a --- /dev/null +++ b/services/web/test/frontend/features/outline/components/outline-list.spec.tsx @@ -0,0 +1,45 @@ +import OutlineList from '../../../../../frontend/js/features/outline/components/outline-list' + +describe('', function () { + it('renders items', function () { + cy.mount( + + ) + + cy.findByRole('treeitem', { name: 'Section 1' }) + cy.findByRole('treeitem', { name: 'Section 2' }) + }) + + it('renders as root', function () { + cy.mount( + + ) + + cy.findByRole('tree') + }) + + it('renders as non-root', function () { + cy.mount( + + ) + + cy.findByRole('group') + }) +}) diff --git a/services/web/test/frontend/features/outline/components/outline-list.test.jsx b/services/web/test/frontend/features/outline/components/outline-list.test.jsx deleted file mode 100644 index b46ab00520..0000000000 --- a/services/web/test/frontend/features/outline/components/outline-list.test.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import { screen, render } from '@testing-library/react' - -import OutlineList from '../../../../../frontend/js/features/outline/components/outline-list' - -describe('', function () { - const jumpToLine = () => {} - - it('renders items', function () { - const outline = [ - { - title: 'Section 1', - line: 1, - level: 10, - }, - { - title: 'Section 2', - line: 2, - level: 10, - }, - ] - render() - - screen.getByRole('treeitem', { name: 'Section 1' }) - screen.getByRole('treeitem', { name: 'Section 2' }) - }) - - it('renders as root', function () { - const outline = [ - { - title: 'Section', - line: 1, - level: 10, - }, - ] - render() - - screen.getByRole('tree') - }) - - it('renders as non-root', function () { - const outline = [ - { - title: 'Section', - line: 1, - level: 10, - }, - ] - render() - - screen.getByRole('group') - }) -}) diff --git a/services/web/test/frontend/features/outline/components/outline-pane.spec.tsx b/services/web/test/frontend/features/outline/components/outline-pane.spec.tsx new file mode 100644 index 0000000000..08dd2fcf13 --- /dev/null +++ b/services/web/test/frontend/features/outline/components/outline-pane.spec.tsx @@ -0,0 +1,118 @@ +import OutlinePane from '@/features/outline/components/outline-pane' +import { EditorProviders, PROJECT_ID } from '../../../helpers/editor-providers' +import { useState } from 'react' + +describe('', function () { + it('renders expanded outline', function () { + cy.mount( + + + + ) + + cy.findByRole('tree') + }) + + it('renders disabled outline', function () { + cy.mount( + + + + ) + + cy.findByRole('tree').should('not.exist') + }) + + it('expand outline and use local storage', function () { + window.localStorage.setItem(`file_outline.expanded.${PROJECT_ID}`, 'false') + + const onToggle = cy.stub() + + const Container = () => { + const [expanded, setExpanded] = useState(false) + + return ( + { + window.localStorage.setItem( + `file_outline.expanded.${PROJECT_ID}`, + expanded ? 'false' : 'true' + ) + setExpanded(!expanded) + }} + /> + ) + } + + cy.mount( + + + + ) + + cy.findByRole('tree').should('not.exist') + + cy.findByRole('button', { + name: 'Show File outline', + }).click() + + cy.findByRole('tree').then(() => { + expect(onToggle).to.be.calledTwice + expect( + window.localStorage.getItem(`file_outline.expanded.${PROJECT_ID}`) + ).to.equal('true') + }) + }) + + it('shows warning on partial result', function () { + cy.mount( + + + + ) + + cy.findByRole('status') + }) + + it('shows no warning on non-partial result', function () { + cy.mount( + + + + ) + + cy.findByRole('status').should('not.exist') + }) +}) diff --git a/services/web/test/frontend/features/outline/components/outline-pane.test.jsx b/services/web/test/frontend/features/outline/components/outline-pane.test.jsx deleted file mode 100644 index b1d41496a3..0000000000 --- a/services/web/test/frontend/features/outline/components/outline-pane.test.jsx +++ /dev/null @@ -1,149 +0,0 @@ -import { expect } from 'chai' -import sinon from 'sinon' -import { screen, fireEvent } from '@testing-library/react' - -import OutlinePane from '../../../../../frontend/js/features/outline/components/outline-pane' -import { renderWithEditorContext } from '../../../helpers/render-with-context' - -describe('', function () { - const jumpToLine = () => {} - const onToggle = sinon.stub() - const eventTracking = { sendMB: sinon.stub() } - - function render(children) { - renderWithEditorContext(children, { projectId: '123abc' }) - } - - let originalLocalStorage - before(function () { - originalLocalStorage = global.localStorage - - Object.defineProperty(global, 'localStorage', { - value: { - getItem: sinon.stub().returns(null), - setItem: sinon.stub(), - removeItem: sinon.stub(), - }, - }) - }) - - afterEach(function () { - onToggle.reset() - eventTracking.sendMB.reset() - global.localStorage.getItem.resetHistory() - global.localStorage.setItem.resetHistory() - }) - - after(function () { - Object.defineProperty(global, 'localStorage', { - value: originalLocalStorage, - }) - }) - - it('renders expanded outline', function () { - const outline = [ - { - title: 'Section', - line: 1, - level: 10, - }, - ] - render( - - ) - - screen.getByRole('tree') - }) - - it('renders disabled outline', function () { - const outline = [] - render( - - ) - - expect(screen.queryByRole('tree')).to.be.null - }) - - it('expand outline and use local storage', function () { - global.localStorage.getItem.callsFake(key => { - if (key.startsWith('file_outline.expanded.')) { - return false - } - return null - }) - - const outline = [ - { - title: 'Section', - line: 1, - level: 10, - }, - ] - render( - - ) - - expect(screen.queryByRole('tree')).to.be.null - const collapseButton = screen.getByRole('button', { - name: 'Show File outline', - }) - fireEvent.click(collapseButton) - - screen.getByRole('tree') - expect(global.localStorage.setItem).to.be.calledOnce - expect(global.localStorage.setItem).to.be.calledWithMatch(/123abc/, 'true') - expect(onToggle).to.be.calledTwice - }) - - it('shows warning on partial result', function () { - render( - - ) - expect(screen.queryByRole('status')).to.exist - }) - - it('shows no warning on non-partial result', function () { - render( - - ) - - expect(screen.queryByRole('status')).to.not.exist - }) -}) diff --git a/services/web/test/frontend/features/outline/components/outline-root.spec.tsx b/services/web/test/frontend/features/outline/components/outline-root.spec.tsx new file mode 100644 index 0000000000..2bf11511cc --- /dev/null +++ b/services/web/test/frontend/features/outline/components/outline-root.spec.tsx @@ -0,0 +1,22 @@ +import OutlineRoot from '../../../../../frontend/js/features/outline/components/outline-root' + +describe('', function () { + it('renders outline', function () { + cy.mount( + + ) + + cy.findByRole('tree') + cy.findByRole('link').should('not.exist') + }) + + it('renders placeholder', function () { + cy.mount() + + cy.findByRole('tree').should('not.exist') + cy.findByRole('link') + }) +}) diff --git a/services/web/test/frontend/features/outline/components/outline-root.test.jsx b/services/web/test/frontend/features/outline/components/outline-root.test.jsx deleted file mode 100644 index 3114af5fa7..0000000000 --- a/services/web/test/frontend/features/outline/components/outline-root.test.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import { expect } from 'chai' -import { screen, render } from '@testing-library/react' - -import OutlineRoot from '../../../../../frontend/js/features/outline/components/outline-root' - -describe('', function () { - const jumpToLine = () => {} - - it('renders outline', function () { - const outline = [ - { - title: 'Section', - line: 1, - level: 10, - }, - ] - render() - - screen.getByRole('tree') - expect(screen.queryByRole('link')).to.be.null - }) - - it('renders placeholder', function () { - const outline = [] - render() - - expect(screen.queryByRole('tree')).to.be.null - screen.getByRole('link') - }) -}) diff --git a/services/web/test/frontend/helpers/editor-providers.jsx b/services/web/test/frontend/helpers/editor-providers.jsx index 007a143345..cc8ec2f506 100644 --- a/services/web/test/frontend/helpers/editor-providers.jsx +++ b/services/web/test/frontend/helpers/editor-providers.jsx @@ -15,6 +15,7 @@ import { DetachCompileProvider } from '@/shared/context/detach-compile-context' import { ProjectSettingsProvider } from '@/features/editor-left-menu/context/project-settings-context' import { FileTreePathProvider } from '@/features/file-tree/contexts/file-tree-path' import { UserSettingsProvider } from '@/shared/context/user-settings-context' +import { OutlineProvider } from '@/features/ide-react/context/outline-context' // these constants can be imported in tests instead of // using magic strings @@ -141,6 +142,7 @@ export function EditorProviders({ IdeAngularProvider, LayoutProvider, LocalCompileProvider, + OutlineProvider, ProjectProvider, ProjectSettingsProvider, SplitTestProvider, @@ -163,7 +165,9 @@ export function EditorProviders({ - {children} + + {children} +