diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js index c807659643..05e4c10b87 100644 --- a/services/web/app/src/Features/Project/ProjectController.js +++ b/services/web/app/src/Features/Project/ProjectController.js @@ -739,12 +739,8 @@ const ProjectController = { const allowedImageNames = ProjectHelper.getAllowedImagesForUser( sessionUser ) - const wantsOldFileTreeUI = - req.query && req.query.new_file_tree_ui === 'false' const wantsOldShareModalUI = req.query && req.query.new_share_modal_ui === 'false' - const wantsOldAddFilesModalUI = - req.query && req.query.new_add_files_modal_ui === 'false' const wantsOldGithubSyncUI = req.query && req.query.new_github_sync_ui === 'false' @@ -862,9 +858,7 @@ const ProjectController = { logsUISubvariant: logsUIVariant.subvariant, showNewNavigationUI: req.query && req.query.new_navigation_ui === 'true', - showReactFileTree: !wantsOldFileTreeUI, showReactShareModal: !wantsOldShareModalUI, - showReactAddFilesModal: !wantsOldAddFilesModalUI, showReactGithubSync: !wantsOldGithubSyncUI && user.alphaProgram, showNewBinaryFileUI: req.query && req.query.new_binary_file === 'true', diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug index e7777db3d9..589cc11071 100644 --- a/services/web/app/views/project/editor.pug +++ b/services/web/app/views/project/editor.pug @@ -99,11 +99,8 @@ block content custom-toggler-msg-when-closed=hasFeature('custom-togglers') ? translate("tooltip_show_filetree") : false ) .ui-layout-west - if showReactFileTree - include ./editor/file-tree-react - include ./editor/file-tree-history - else - include ./editor/file-tree + include ./editor/file-tree-react + include ./editor/file-tree-history include ./editor/history/fileTreeV2 .ui-layout-center @@ -187,8 +184,6 @@ block append meta //- used in public/js/libs/sharejs.js meta(name="ol-useShareJsHash" data-type="boolean" content=true) meta(name="ol-wsRetryHandshake" data-type="json" content=settings.wsRetryHandshake) - meta(name="ol-showReactFileTree" data-type="boolean" content=showReactFileTree) - meta(name="ol-showReactAddFilesModal" data-type="boolean" content=showReactAddFilesModal) meta(name="ol-showNewLogsUI" data-type="boolean" content=showNewLogsUI) meta(name="ol-logsUISubvariant" content=logsUISubvariant) diff --git a/services/web/app/views/project/editor/file-tree.pug b/services/web/app/views/project/editor/file-tree.pug deleted file mode 100644 index 5117e27a2c..0000000000 --- a/services/web/app/views/project/editor/file-tree.pug +++ /dev/null @@ -1,424 +0,0 @@ -aside.editor-sidebar.full-size( - ng-controller="FileTreeController" - ng-class="{ 'multi-selected': multiSelectedCount > 0 }" - ng-show="ui.view != 'history' || !history.isV2" - vertical-resizable-panes="outline-resizer" - vertical-resizable-panes-toggled-externally-on="outline-toggled" - vertical-resizable-panes-min-size="32" - vertical-resizable-panes-max-size="75%" -) - .file-tree( - vertical-resizable-top - ) - .toolbar.toolbar-filetree(ng-if="permissions.write") - a( - href, - ng-click="openNewDocModal()", - tooltip-html="'"+translate('new_file').replace(' ', '
')+"'", - tooltip-placement="bottom" - ) - i.fa.fa-fw.fa-file - a( - href, - ng-click="openNewFolderModal()", - tooltip-html="'"+translate('new_folder').replace(' ', '
')+"'", - tooltip-placement="bottom" - ) - i.fa.fa-fw.fa-folder - a( - href, - ng-click="openUploadFileModal()", - tooltip=translate('upload'), - tooltip-placement="bottom" - ) - i.fa.fa-fw.fa-upload - - .toolbar-right - a( - href, - ng-click="startRenamingSelected()", - tooltip=translate('rename'), - tooltip-placement="bottom", - ng-show="multiSelectedCount == 0" - ) - i.fa.fa-fw.fa-pencil - a( - href, - ng-click="openDeleteModalForSelected()", - tooltip=translate('delete'), - tooltip-placement="bottom", - tooltip-append-to-body="true" - ) - i.fa.fa-fw.fa-trash-o - - - .file-tree-inner( - ng-if="rootFolder", - ng-controller="FileTreeRootFolderController", - ng-class="{ 'no-toolbar': !permissions.write }" - ) - ul.list-unstyled.file-tree-list( - droppable="permissions.write" - accept=".entity-name" - on-drop-callback="onDrop" - ) - li( - ng-show="ui.pdfLayout == 'flat' && (ui.view == 'editor' || ui.view == 'pdf' || ui.view == 'file')" - ng-class="{ 'selected': ui.view == 'pdf' }" - ng-controller="PdfViewToggleController" - ) - .entity - .entity-name( - ng-click="togglePdfView()" - ) - i.fa.fa-fw.toggle - i.fa.fa-fw.fa-file-pdf-o - | PDF - - file-entity( - entity="entity", - permissions="permissions", - ng-repeat="entity in rootFolder.children | orderBy:[orderByFoldersFirst, 'name']" - ) - - li(ng-show="deletedDocs.length > 0 && ui.view == 'history'") - h3 #{translate("deleted_files")} - li( - ng-class="{ 'selected': entity.selected }", - ng-repeat="entity in deletedDocs | orderBy:'name'", - ng-controller="FileTreeEntityController", - ng-show="ui.view == 'history'" - ) - .entity - .entity-name( - ng-click="select($event)" - ) - //- Just a spacer to align with folders - i.fa.fa-fw.toggle - i.fa.fa-fw.fa-file - - span {{ entity.name }} - - .outline-container( - vertical-resizable-bottom - ng-controller="OutlineController" - ) - outline-pane( - is-tex-file="isTexFile" - outline="outline" - project-id="project_id" - jump-to-line="jumpToLine" - on-toggle="onToggle" - event-tracking="eventTracking" - highlighted-line="highlightedLine" - ) - - -script(type='text/ng-template', id='entityListItemTemplate') - li( - ng-class="{ 'selected': entity.selected, 'multi-selected': entity.multiSelected }", - ng-controller="FileTreeEntityController" - ) - .entity(ng-if="entity.type != 'folder'") - .entity-name( - ng-click="select($event)" - ng-dblclick="permissions.write && startRenaming()" - draggable="permissions.write" - draggable-helper="draggableHelper" - context-menu - data-target="context-menu-{{ entity.id }}" - context-menu-container="body" - context-menu-disabled="!permissions.write" - ) - //- Just a spacer to align with folders - i.fa.fa-fw.toggle(ng-if="entity.type != 'folder'") - - i.fa.fa-fw(ng-if="entity.type != 'folder'", ng-class="'fa-' + iconTypeFromName(entity.name)") - i.fa.fa-external-link-square.fa-rotate-180.linked-file-highlight( - ng-if="entity.linkedFileData.provider" - ) - span( - ng-hide="entity.renaming" - ) {{ entity.renamingToName || entity.name }} - span.rename-input - input( - ng-if="permissions.write", - ng-show="entity.renaming", - ng-model="inputs.name", - ng-blur="finishRenaming()", - select-name-when="entity.renaming", - on-enter="finishRenaming()" - valid-file - ) - - span.dropdown.entity-menu-toggle( - dropdown, - ng-if="permissions.write" - ) - a.dropdown-toggle.file-tree-dropdown-toggle(href, dropdown-toggle, stop-propagation="click") - - ul.dropdown-menu.dropdown-menu-right - li - a( - href - ng-click="startRenaming()" - right-click="startRenaming()" - ng-show="!entity.multiSelected" - ) #{translate("rename")} - li - a( - href - ng-click="openDeleteModal()" - right-click="openDeleteModal()" - stop-propagation="click" - ) #{translate("delete")} - - div.dropdown.context-menu( - id="context-menu-{{ entity.id }}", - ng-if="permissions.write" - ) - ul.dropdown-menu - li - a( - href - ng-click="startRenaming()" - right-click="startRenaming()" - ng-show="!entity.multiSelected" - ) #{translate("rename")} - li - a( - href - ng-click="openDeleteModal()" - right-click="openDeleteModal()" - stop-propagation="click" - ) #{translate("delete")} - - - .entity(ng-if="entity.type == 'folder'", ng-controller="FileTreeFolderController") - .entity-name( - ng-click="select($event)" - ng-dblclick="permissions.write && startRenaming()" - draggable="permissions.write" - draggable-helper="draggableHelper" - droppable="permissions.write" - accept=".entity-name" - on-drop-callback="onDrop" - ) - div( - context-menu - data-target="context-menu-{{ entity.id }}" - context-menu-container="body" - context-menu-disabled="!permissions.write" - ) - i.fa.fa-fw.toggle( - ng-if="entity.type == 'folder'" - ng-class="{'fa-angle-right': !expanded, 'fa-angle-down': expanded}" - ng-click="toggleExpanded()" - ) - - i.fa.fa-fw( - ng-if="entity.type == 'folder'" - ng-class="{\ - 'fa-folder': !expanded, \ - 'fa-folder-open': expanded \ - }" - ng-click="select($event)" - ) - - span( - ng-hide="entity.renaming" - ) {{ entity.renamingToName || entity.name }} - span.rename-input - input( - ng-if="permissions.write", - ng-show="entity.renaming", - ng-model="inputs.name", - ng-blur="finishRenaming()", - select-name-when="entity.renaming", - on-enter="finishRenaming()" - valid-file - ) - - span.dropdown.entity-menu-toggle( - dropdown, - ng-if="permissions.write" - ) - a.dropdown-toggle.file-tree-dropdown-toggle(href, dropdown-toggle, stop-propagation="click") - - ul.dropdown-menu.dropdown-menu-right - li - a( - href - ng-click="startRenaming()" - right-click="startRenaming()" - ng-show="!entity.multiSelected" - ) #{translate("rename")} - li - a( - href - ng-click="openDeleteModal()" - right-click="openDeleteModal()" - stop-propagation="click" - ) #{translate("delete")} - li.divider - li - a( - href - ng-click="openNewDocModal()" - right-click="openNewDocModal()" - ) #{translate("new_file")} - li - a( - href - ng-click="openNewFolderModal()" - right-click="openNewFolderModal()" - ) #{translate("new_folder")} - li - a( - href - ng-click="openUploadFileModal()" - right-click="openUploadFileModal()" - ) #{translate("upload_file")} - - .dropdown.context-menu( - ng-if="permissions.write" - id="context-menu-{{ entity.id }}" - ) - ul.dropdown-menu - li - a( - href - ng-click="startRenaming()" - right-click="startRenaming()" - ng-show="!entity.multiSelected" - ) #{translate("rename")} - li - a( - href - ng-click="openDeleteModal()" - right-click="openDeleteModal()" - stop-propagation="click" - ) #{translate("delete")} - li.divider - li - a( - href - ng-click="openNewDocModal()" - right-click="openNewDocModal()" - ) #{translate("new_file")} - li - a( - href - ng-click="openNewFolderModal()" - right-click="openNewFolderModal()" - ) #{translate("new_folder")} - li - a( - href - ng-click="openUploadFileModal()" - right-click="openUploadFileModal()" - ) #{translate("upload_file")} - - ul.list-unstyled( - ng-if="entity.type == 'folder' && (depth == null || depth < MAX_DEPTH)" - ng-show="expanded" - droppable="permissions.write" - accept=".entity-name" - on-drop-callback="onDrop" - ) - file-entity( - entity="child", - permissions="permissions", - ng-repeat="child in entity.children | orderBy:[orderByFoldersFirst, 'name']" - depth="(depth || 0) + 1" - ) - - .entity-limit-hit( - ng-if="depth === MAX_DEPTH" - ng-show="expanded" - ) - i.fa.fa-fw - span.entity-limit-hit-message - | Some files might be hidden - | - i.fa.fa-question-circle.entity-limit-hit-tooltip-trigger( - tooltip="Your project has hit Overleaf's maximum file depth limit. Files within this folder won't be visible." - tooltip-append-to-body="true" - aria-hidden="true" - ) - span.sr-only - | Your project has hit Overleaf's maximum file depth limit. Files within this folder won't be visible. - -script(type='text/ng-template', id='newFolderModalTemplate') - .modal-header - h3 #{translate("new_folder")} - .modal-body - form(novalidate, name="newFolderForm") - input.form-control( - type="text", - placeholder="Folder Name", - required, - ng-model="inputs.name", - on-enter="create()", - select-name-on="open", - valid-file, - name="name" - ) - div.alert.alert-danger.row-spaced-small(ng-show="newFolderForm.name.$error.validFile") - | #{translate('files_cannot_include_invalid_characters')} - div.alert.alert-danger.row-spaced-small(ng-if="error") - div(ng-switch="error") - span(ng-switch-when="already exists") #{translate("file_already_exists")} - span(ng-switch-default) {{error}} - .modal-footer - button.btn.btn-default( - ng-disabled="state.inflight" - ng-click="cancel()" - ) #{translate("cancel")} - button.btn.btn-primary( - ng-disabled="newFolderForm.$invalid || state.inflight" - ng-click="create()" - ) - span(ng-hide="state.inflight") #{translate("create")} - span(ng-show="state.inflight") #{translate("creating")}… - -script(type='text/ng-template', id='duplicateFileModalTemplate') - .modal-header - h3 #{translate("duplicate_file")} - .modal-body - p #{translate("file_already_exists_in_this_location", { fileName: "'{{ fileName }}'" })} - .modal-footer - button.btn.btn-default( - ng-click="cancel()" - ) #{translate("dismiss")} - -include ./new-file-modal - -script(type='text/ng-template', id='deleteEntityModalTemplate') - .modal-header - h3 #{translate("delete")} {{ entity.name }} - .modal-body - p !{translate("sure_you_want_to_delete")} - ul - li(ng-repeat="entity in entities") {{entity.name}} - .modal-footer - button.btn.btn-default( - ng-disabled="state.inflight" - ng-click="cancel()" - ) #{translate("cancel")} - button.btn.btn-danger( - ng-disabled="state.inflight" - ng-click="delete()" - ) - span(ng-hide="state.inflight") #{translate("delete")} - span(ng-show="state.inflight") #{translate("deleting")}… - -script(type='text/ng-template', id='invalidFileNameModalTemplate') - .modal-header - h3 #{translate('invalid_file_name')} - .modal-body - p #{translate('files_cannot_include_invalid_characters')} - .modal-footer - button.btn.btn-default( - ng-click="$close()" - ) #{translate('ok')} diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-root.js b/services/web/frontend/js/features/file-tree/components/file-tree-root.js index 1aa444cd7e..15ceb50b67 100644 --- a/services/web/frontend/js/features/file-tree/components/file-tree-root.js +++ b/services/web/frontend/js/features/file-tree/components/file-tree-root.js @@ -15,7 +15,6 @@ import FileTreeError from './file-tree-error' import { useFileTreeMutable } from '../contexts/file-tree-mutable' import { useDroppable } from '../contexts/file-tree-draggable' -import { useFileTreeAngularListener } from '../hooks/file-tree-angular-listener' import { useFileTreeSocketListener } from '../hooks/file-tree-socket-listener' import FileTreeModalCreateFile from './modals/file-tree-modal-create-file' @@ -60,7 +59,7 @@ function FileTreeRoot({ - {window.showReactAddFilesModal && } + @@ -69,7 +68,6 @@ function FileTreeRoot({ function FileTreeRootFolder() { useFileTreeSocketListener() - useFileTreeAngularListener() const { fileTreeData } = useFileTreeMutable() const { isOver, dropRef } = useDroppable(fileTreeData._id) diff --git a/services/web/frontend/js/features/file-tree/contexts/file-tree-actionable.js b/services/web/frontend/js/features/file-tree/contexts/file-tree-actionable.js index 8f39eae618..99b915df10 100644 --- a/services/web/frontend/js/features/file-tree/contexts/file-tree-actionable.js +++ b/services/web/frontend/js/features/file-tree/contexts/file-tree-actionable.js @@ -312,44 +312,12 @@ export function useFileTreeActionable() { ) const startCreatingDocOrFile = useCallback(() => { - if (window.showReactAddFilesModal) { - startCreatingFile('doc') - } else { - const parentFolderId = getSelectedParentFolderId( - fileTreeData, - selectedEntityIds - ) - - window.dispatchEvent( - new CustomEvent('FileTreeReactBridge.openNewDocModal', { - detail: { - mode: 'doc', - parentFolderId, - }, - }) - ) - } - }, [fileTreeData, selectedEntityIds, startCreatingFile]) + startCreatingFile('doc') + }, [startCreatingFile]) const startUploadingDocOrFile = useCallback(() => { - if (window.showReactAddFilesModal) { - startCreatingFile('upload') - } else { - const parentFolderId = getSelectedParentFolderId( - fileTreeData, - selectedEntityIds - ) - - window.dispatchEvent( - new CustomEvent('FileTreeReactBridge.openNewDocModal', { - detail: { - mode: 'upload', - parentFolderId, - }, - }) - ) - } - }, [fileTreeData, selectedEntityIds, startCreatingFile]) + startCreatingFile('upload') + }, [startCreatingFile]) const finishCreatingDocOrFile = useCallback( entity => { @@ -357,34 +325,10 @@ export function useFileTreeActionable() { return finishCreatingEntity(entity) .then(() => { - if (window.showReactAddFilesModal) { - dispatch({ type: ACTION_TYPES.CLEAR }) - } else { - // dispatch FileTreeReactBridge event to update the Angular modal - window.dispatchEvent( - new CustomEvent('FileTreeReactBridge.openNewFileModal', { - detail: { - done: true, - }, - }) - ) - } + dispatch({ type: ACTION_TYPES.CLEAR }) }) .catch(error => { - if (window.showReactAddFilesModal) { - dispatch({ type: ACTION_TYPES.ERROR, error }) - } else { - // dispatch FileTreeReactBridge event to update the Angular modal with - // an error - window.dispatchEvent( - new CustomEvent('FileTreeReactBridge.openNewFileModal', { - detail: { - error: true, - data: error.message, - }, - }) - ) - } + dispatch({ type: ACTION_TYPES.ERROR, error }) }) }, [dispatch, finishCreatingEntity] diff --git a/services/web/frontend/js/features/file-tree/hooks/file-tree-angular-listener.js b/services/web/frontend/js/features/file-tree/hooks/file-tree-angular-listener.js deleted file mode 100644 index c02556ca82..0000000000 --- a/services/web/frontend/js/features/file-tree/hooks/file-tree-angular-listener.js +++ /dev/null @@ -1,44 +0,0 @@ -import { useEffect } from 'react' - -import { useFileTreeActionable } from '../contexts/file-tree-actionable' - -// A temporary hack to listen to events dispatched from the Angular and update -// the React file tree accordingly -export function useFileTreeAngularListener() { - const { - finishCreatingDoc, - finishCreatingLinkedFile, - } = useFileTreeActionable() - - useEffect(() => { - function handleDispatchCreateDoc(ev) { - const { ...doc } = ev.detail - finishCreatingDoc(doc) - } - window.addEventListener( - 'FileTreeReactBridge.createDoc', - handleDispatchCreateDoc - ) - return () => - window.removeEventListener( - 'FileTreeReactBridge.createDoc', - handleDispatchCreateDoc - ) - }, [finishCreatingDoc]) - - useEffect(() => { - function handleDispatchCreateLinkedFile(ev) { - const { ...file } = ev.detail - finishCreatingLinkedFile(file) - } - window.addEventListener( - 'FileTreeReactBridge.createLinkedFile', - handleDispatchCreateLinkedFile - ) - return () => - window.removeEventListener( - 'FileTreeReactBridge.createLinkedFile', - handleDispatchCreateLinkedFile - ) - }, [finishCreatingLinkedFile]) -} diff --git a/services/web/frontend/js/ide/file-tree/FileTreeManager.js b/services/web/frontend/js/ide/file-tree/FileTreeManager.js index 01f8c209c7..8825afa19d 100644 --- a/services/web/frontend/js/ide/file-tree/FileTreeManager.js +++ b/services/web/frontend/js/ide/file-tree/FileTreeManager.js @@ -563,22 +563,6 @@ export default FileTreeManager = class FileTreeManager { } createDoc(name, parent_folder) { - if (window.showReactFileTree) { - const promise = new Promise((resolve, reject) => { - this.$scope.FileTreeReactBridgePromise = { - resolve, - reject, - } - }) - window.dispatchEvent( - new CustomEvent('FileTreeReactBridge.createDoc', { - detail: { - name, - }, - }) - ) - return promise - } // check if a doc/file/folder already exists with this name if (parent_folder == null) { parent_folder = this.getCurrentFolder() @@ -613,24 +597,6 @@ export default FileTreeManager = class FileTreeManager { } createLinkedFile(name, parent_folder, provider, data) { - if (window.showReactFileTree) { - const promise = new Promise((resolve, reject) => { - this.$scope.FileTreeReactBridgePromise = { - resolve, - reject, - } - }) - window.dispatchEvent( - new CustomEvent('FileTreeReactBridge.createLinkedFile', { - detail: { - name, - provider, - data, - }, - }) - ) - return promise - } // check if a doc/file/folder already exists with this name if (parent_folder == null) { parent_folder = this.getCurrentFolder() diff --git a/services/web/frontend/js/ide/file-tree/controllers/FileTreeController.js b/services/web/frontend/js/ide/file-tree/controllers/FileTreeController.js index 2dbb3fc198..4dc29288a0 100644 --- a/services/web/frontend/js/ide/file-tree/controllers/FileTreeController.js +++ b/services/web/frontend/js/ide/file-tree/controllers/FileTreeController.js @@ -78,23 +78,6 @@ App.controller( }, }) - if ( - window.showReactFileTree && - !window.FileTreeReactBridgeOpenNewDocModalListened - ) { - window.FileTreeReactBridgeOpenNewDocModalListened = true - window.addEventListener( - 'FileTreeReactBridge.openNewDocModal', - ({ detail }) => { - if (detail.mode === 'upload') { - $scope.openUploadFileModal(detail.parentFolderId) - } else { - $scope.openNewDocModal(detail.parentFolderId) - } - } - ) - } - $scope.orderByFoldersFirst = function (entity) { if ((entity != null ? entity.type : undefined) === 'folder') { return '0' @@ -207,24 +190,6 @@ App.controller( } $modalInstance.dismiss('done') }) - - if ( - window.showReactFileTree && - !window.FileTreeReactBridgeOpenNewFileModalListened - ) { - window.FileTreeReactBridgeOpenNewFileModalListened = true - window.addEventListener( - 'FileTreeReactBridge.openNewFileModal', - ({ detail }) => { - if (detail.done) { - ide.$scope.FileTreeReactBridgePromise.resolve() - } - if (detail.error) { - ide.$scope.FileTreeReactBridgePromise.reject(detail) - } - } - ) - } } )