Merge pull request #4180 from overleaf/ae-new-file-button

Open the new file modal with an event

GitOrigin-RevId: 1eca8faf63bdd2011b931868b0e1073bb047266e

services/web/frontend/js/features/file-tree/contexts/file-tree-actionable.js

@@ -4,6 +4,7 @@ import React, {
   useMemo,
   useReducer,
   useContext,
+  useEffect,
 } from 'react'
 import PropTypes from 'prop-types'
 
@@ -323,6 +324,22 @@ export function FileTreeActionableProvider({ hasWritePermissions, children }) {
     dispatch({ type: ACTION_TYPES.CANCEL })
   }, [])
 
+  // listen for `file-tree.start-creating` events
+  useEffect(() => {
+    function handleEvent(event) {
+      dispatch({
+        type: ACTION_TYPES.START_CREATE_FILE,
+        newFileCreateMode: event.detail.mode,
+      })
+    }
+
+    window.addEventListener('file-tree.start-creating', handleEvent)
+
+    return () => {
+      window.removeEventListener('file-tree.start-creating', handleEvent)
+    }
+  }, [])
+
   const value = {
     canDelete: selectedEntityIds.size > 0,
     canRename: selectedEntityIds.size === 1,

services/web/frontend/js/ide/file-tree/controllers/FileTreeController.js

@@ -19,29 +19,11 @@ import App from '../../../base'
 App.controller(
   'FileTreeController',
   function ($scope, $modal, ide, $rootScope) {
-    $scope.openNewDocModal = reactBridgeParentFolderId =>
+    $scope.openNewDocModal = () => {
-      $modal.open({
+      window.dispatchEvent(
-        templateUrl: 'newFileModalTemplate',
+        new CustomEvent('file-tree.start-creating', { detail: { mode: 'doc' } })
-        controller: 'NewFileModalController',
+      )
-        size: 'lg',
+    }
-        resolve: {
-          parent_folder() {
-            if (reactBridgeParentFolderId) {
-              return { id: reactBridgeParentFolderId }
-            }
-            return ide.fileTreeManager.getCurrentFolder()
-          },
-          projectFeatures() {
-            return ide.$scope.project.features
-          },
-          type() {
-            return 'doc'
-          },
-          userFeatures() {
-            return ide.$scope.user.features
-          },
-        },
-      })
 
     $scope.openNewFolderModal = () =>
       $modal.open({