Merge pull request #5499 from overleaf/msm-remove-angular-nav-toolbar

Remove Angular Navigation UI

GitOrigin-RevId: a71da3da665515ec6ce74ae41ff1f0b47b86134e

services/web/app/src/Features/Project/ProjectController.js

@@ -891,10 +891,6 @@ const ProjectController = {
                 logsUIVariant.newLogsUI
               ),
               logsUISubvariant: logsUIVariant.subvariant,
-              showNewNavigationUI: shouldDisplayFeature(
-                'new_navigation_ui',
-                true
-              ),
               showPdfDetach,
               showNewPdfPreview,
               showSymbolPalette: shouldDisplayFeature(

services/web/app/views/project/editor.pug

@@ -78,12 +78,7 @@ block content
 			ng-cloak
 		)
 			.ui-layout-center
-				if showNewNavigationUI
-					include ./editor/header-react
-				else
-					include ./editor/header
-
-				!= moduleIncludes("publish:body", locals)
+				include ./editor/header-react
 
 				include ./editor/history/toolbarV2.pug
 
@@ -115,9 +110,7 @@ block content
 
 			if !isRestrictedTokenMember
 				.ui-layout-east
-					aside.chat(
-						ng-controller="ReactChatController"
-					)
+					aside.chat
 						chat()
 
 	script(type="text/ng-template", id="genericMessageModalTemplate")

services/web/app/views/project/editor/header.pug

@@ -1,155 +0,0 @@
-header.toolbar.toolbar-header.toolbar-with-labels(
-	ng-cloak,
-	ng-hide="state.loading"
-)
-	.toolbar-left
-		a.btn.btn-full-height(
-			href,
-			ng-click="ui.leftMenuShown = true;",
-		)
-			i.fa.fa-fw.fa-bars.editor-menu-icon
-			p.toolbar-label #{translate("menu")}
-		a.btn.btn-full-height.header-cobranding-logo-container(
-			ng-if="::(cobranding.isProjectCobranded && cobranding.logoImgUrl)"
-			ng-href="{{ ::cobranding.brandVariationHomeUrl }}"
-			target="_blank"
-			rel="noreferrer noopener"
-		)
-			img.header-cobranding-logo(
-				ng-src="{{ ::cobranding.logoImgUrl }}"
-				alt="{{ ::cobranding.brandVariationName }}"
-			)
-
-		a.toolbar-header-back-projects(
-			href="/project"
-		)
-			i.fa.fa-fw.fa-level-up
-
-	span(ng-controller="PdfViewToggleController")
-		a.btn.btn-full-height.btn-full-height-no-border(
-			href,
-			ng-show="ui.pdfLayout == 'flat'",
-			tooltip="PDF",
-			tooltip-placement="bottom",
-			tooltip-append-to-body="true",
-			ng-click="togglePdfView()",
-			ng-class="{ 'active': ui.view == 'pdf' }"
-		)
-			i.fa.fa-file-pdf-o
-
-	.toolbar-center.project-name(ng-controller="ProjectNameController")
-		span.name(
-			ng-dblclick="!permissions.admin || startRenaming()",
-			ng-show="!state.renaming"
-			tooltip="{{ project.name }}",
-			tooltip-class="project-name-tooltip"
-			tooltip-placement="bottom",
-			tooltip-append-to-body="true",
-			tooltip-enable="state.overflowed"
-		) {{ project.name }}
-
-		input.form-control(
-			type="text"
-			ng-model="inputs.name",
-			ng-show="state.renaming",
-			on-enter="finishRenaming()",
-			ng-blur="finishRenaming()",
-			select-name-when="state.renaming"
-		)
-
-		a.rename(
-			ng-if="permissions.admin",
-			href='#',
-			tooltip-placement="bottom",
-			tooltip=translate('rename'),
-			tooltip-append-to-body="true",
-			ng-click="startRenaming()",
-			ng-show="!state.renaming"
-		)
-			i.fa.fa-pencil
-
-	.toolbar-right
-		.online-users(
-			ng-if="onlineUsersArray.length < 4"
-			ng-controller="OnlineUsersController"
-		)
-			span.online-user(
-				ng-repeat="user in onlineUsersArray",
-				ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }",
-				popover="{{ user.name }}"
-				popover-placement="bottom"
-				popover-append-to-body="true"
-				popover-trigger="mouseenter"
-				ng-click="gotoUser(user)"
-			) {{ userInitial(user) }}
-
-		.online-users.dropdown(
-			dropdown
-			ng-if="onlineUsersArray.length >= 4"
-			ng-controller="OnlineUsersController"
-		)
-			span.online-user.online-user-multi(
-				dropdown-toggle,
-				tooltip=translate('connected_users'),
-				tooltip-placement="left"
-			)
-				strong {{ onlineUsersArray.length }}
-				i.fa.fa-fw.fa-users
-			ul.dropdown-menu.pull-right
-				li.dropdown-header #{translate('connected_users')}
-				li(ng-repeat="user in onlineUsersArray")
-					a(href, ng-click="gotoUser(user)")
-						span.online-user(
-							ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }"
-						) {{ user.name.slice(0,1) }}
-						| {{ user.name }}
-
-		if !isRestrictedTokenMember
-			a.btn.btn-full-height(
-				href,
-				ng-if="project.features.trackChangesVisible",
-				ng-class="{ active: ui.reviewPanelOpen && ui.view !== 'history' }"
-				ng-disabled="ui.view === 'history'"
-				ng-click="toggleReviewPanel()"
-			)
-				i.review-icon
-				p.toolbar-label
-					| #{translate("review")}
-
-		a.btn.btn-full-height(
-			href
-			ng-click="openShareProjectModal(permissions.admin);"
-			ng-controller="ReactShareProjectModalController"
-		)
-			i.fa.fa-fw.fa-group
-			p.toolbar-label #{translate("share")}
-
-			share-project-modal(
-				handle-hide="handleHide"
-				show="show"
-				is-admin="isAdmin"
-			)
-		!= moduleIncludes('publish:button', locals)
-
-		if !isRestrictedTokenMember
-			a.btn.btn-full-height(
-				href,
-				ng-click="toggleHistory();",
-				ng-class="{ active: (ui.view == 'history') }",
-			)
-				i.fa.fa-fw.fa-history
-				p.toolbar-label #{translate("history")}
-			a.btn.btn-full-height(
-				href,
-				ng-class="{ active: ui.chatOpen }",
-				ng-click="toggleChat();",
-				ng-controller="ChatButtonController",
-				ng-show="!anonymous",
-			)
-				i.fa.fa-fw.fa-comment(
-					ng-class="{ 'bounce': unreadMessages > 0 }"
-				)
-				span.label.label-info(
-					ng-show="unreadMessages > 0"
-				) {{ unreadMessages }}
-				p.toolbar-label #{translate("chat")}

services/web/frontend/js/features/chat/controllers/chat-controller.js

@@ -1,26 +0,0 @@
-import App from '../../../base'
-import { react2angular } from 'react2angular'
-import { rootContext } from '../../../shared/context/root-context'
-
-import ChatPane from '../components/chat-pane'
-
-App.controller('ReactChatController', function ($scope, ide) {
-  $scope.chatIsOpen = ide.$scope.ui.chatOpen
-
-  ide.$scope.$watch('ui.chatOpen', newValue => {
-    $scope.$applyAsync(() => {
-      $scope.chatIsOpen = newValue
-    })
-  })
-
-  $scope.resetUnreadMessages = () =>
-    ide.$scope.$broadcast('chat:resetUnreadMessages')
-})
-
-App.component(
-  'chat',
-  react2angular(rootContext.use(ChatPane), [
-    'resetUnreadMessages',
-    'chatIsOpen',
-  ])
-)

services/web/frontend/js/ide/chat/controllers/ChatButtonController.js

@@ -1,49 +0,0 @@
-/* eslint-disable
-    max-len,
-    no-return-assign,
-*/
-// TODO: This file was created by bulk-decaffeinate.
-// Fix any style issues and re-enable lint.
-/*
- * decaffeinate suggestions:
- * DS102: Remove unnecessary code created because of implicit returns
- * DS103: Rewrite code to no longer use __guard__
- * DS207: Consider shorter variations of null checks
- * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
- */
-import App from '../../../base'
-
-export default App.controller('ChatButtonController', function ($scope, ide) {
-  $scope.toggleChat = function () {
-    $scope.ui.chatOpen = !$scope.ui.chatOpen
-    return $scope.resetUnreadMessages()
-  }
-
-  $scope.unreadMessages = 0
-  $scope.resetUnreadMessages = () => ($scope.unreadMessages = 0)
-
-  function handleNewMessage(message) {
-    if (message != null) {
-      if (
-        __guard__(message != null ? message.user : undefined, x => x.id) !==
-        ide.$scope.user.id
-      ) {
-        if (!$scope.ui.chatOpen) {
-          $scope.$applyAsync(() => {
-            $scope.unreadMessages += 1
-          })
-        }
-      }
-    }
-  }
-
-  window.addEventListener('Chat.MessageReceived', ({ detail: { message } }) =>
-    handleNewMessage(message)
-  )
-})
-
-function __guard__(value, transform) {
-  return typeof value !== 'undefined' && value !== null
-    ? transform(value)
-    : undefined
-}

services/web/frontend/js/ide/chat/index.js

@@ -1,2 +1,6 @@
-import './controllers/ChatButtonController'
-import '../../features/chat/controllers/chat-controller'
+import App from '../../base'
+import { rootContext } from '../../shared/context/root-context'
+import ChatPane from '../../features/chat/components/chat-pane'
+import { react2angular } from 'react2angular'
+
+App.component('chat', react2angular(rootContext.use(ChatPane)))

services/web/frontend/js/ide/online-users/OnlineUsersManager.js

@@ -16,7 +16,6 @@
  */
 import ColorManager from '../colors/ColorManager'
 import 'crypto-js/md5'
-import './controllers/OnlineUsersController'
 
 let OnlineUsersManager
 

services/web/frontend/js/ide/online-users/controllers/OnlineUsersController.js

@@ -1,29 +0,0 @@
-/* eslint-disable
-    max-len,
-    no-return-assign,
-*/
-// TODO: This file was created by bulk-decaffeinate.
-// Fix any style issues and re-enable lint.
-/*
- * decaffeinate suggestions:
- * DS102: Remove unnecessary code created because of implicit returns
- * DS207: Consider shorter variations of null checks
- * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
- */
-import App from '../../../base'
-
-export default App.controller('OnlineUsersController', function ($scope, ide) {
-  $scope.gotoUser = function (user) {
-    if (user.doc != null && user.row != null) {
-      return ide.editorManager.openDoc(user.doc, { gotoLine: user.row + 1 })
-    }
-  }
-
-  return ($scope.userInitial = function (user) {
-    if (user.user_id === 'anonymous-user') {
-      return '?'
-    } else {
-      return user.name.slice(0, 1)
-    }
-  })
-})

services/web/frontend/js/ide/pdf/PdfManager.js

@@ -10,7 +10,6 @@
  */
 import './controllers/PdfController'
 import './controllers/PdfSynctexController'
-import './controllers/PdfViewToggleController'
 import '../pdfng/directives/pdfJs'
 
 let PdfManager

services/web/frontend/js/ide/pdf/controllers/PdfViewToggleController.js

@@ -1,31 +0,0 @@
-/* eslint-disable
-    no-return-assign,
-*/
-// TODO: This file was created by bulk-decaffeinate.
-// Fix any style issues and re-enable lint.
-/*
- * decaffeinate suggestions:
- * DS102: Remove unnecessary code created because of implicit returns
- * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
- */
-import App from '../../../base'
-
-export default App.controller('PdfViewToggleController', function ($scope) {
-  $scope.togglePdfView = function () {
-    if ($scope.ui.view === 'pdf') {
-      return ($scope.ui.view = 'editor')
-    } else {
-      return ($scope.ui.view = 'pdf')
-    }
-  }
-
-  $scope.fileTreeClosed = false
-  return $scope.$on('layout:main:resize', function (e, state) {
-    if (state.west.initClosed) {
-      $scope.fileTreeClosed = true
-    } else {
-      $scope.fileTreeClosed = false
-    }
-    return $scope.$apply()
-  })
-})

services/web/frontend/js/ide/settings/controllers/ProjectNameController.js

@@ -1,77 +0,0 @@
-/* eslint-disable
-    max-len,
-    no-return-assign,
-    no-unused-vars,
-*/
-// TODO: This file was created by bulk-decaffeinate.
-// Fix any style issues and re-enable lint.
-/*
- * decaffeinate suggestions:
- * DS102: Remove unnecessary code created because of implicit returns
- * DS207: Consider shorter variations of null checks
- * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
- */
-import App from '../../../base'
-const MAX_PROJECT_NAME_LENGTH = 150
-
-export default App.controller(
-  'ProjectNameController',
-  function ($scope, $element, settings, ide) {
-    const projectNameReadOnlyEl = $element.find('.name')[0]
-
-    $scope.state = {
-      renaming: false,
-      overflowed: false,
-    }
-
-    $scope.inputs = {}
-
-    $scope.startRenaming = function () {
-      $scope.inputs.name = $scope.project.name
-      $scope.state.renaming = true
-      return $scope.$emit('project:rename:start')
-    }
-
-    $scope.finishRenaming = function () {
-      $scope.state.renaming = false
-      const newName = $scope.inputs.name
-      if ($scope.project.name === newName) {
-        return
-      }
-      const oldName = $scope.project.name
-      $scope.project.name = newName
-      return settings
-        .saveProjectSettings({ name: $scope.project.name })
-        .catch(function (response) {
-          const { data, status } = response
-          $scope.project.name = oldName
-          if (status === 400) {
-            return ide.showGenericMessageModal('Error renaming project', data)
-          } else {
-            return ide.showGenericMessageModal(
-              'Error renaming project',
-              'Please try again in a moment'
-            )
-          }
-        })
-    }
-
-    ide.socket.on('projectNameUpdated', name =>
-      $scope.$apply(() => ($scope.project.name = name))
-    )
-
-    return $scope.$watch('project.name', function (name) {
-      if (name != null) {
-        window.document.title =
-          name + ` - Online LaTeX Editor ${ExposedSettings.appName}`
-        return $scope.$applyAsync(
-          () =>
-            // This ensures that the element is measured *after* the binding is done (i.e. project name is rendered).
-            ($scope.state.overflowed =
-              projectNameReadOnlyEl.scrollWidth >
-              projectNameReadOnlyEl.clientWidth)
-        )
-      }
-    })
-  }
-)

services/web/frontend/js/ide/settings/index.js

@@ -2,4 +2,3 @@
 // Fix any style issues and re-enable lint.
 import './services/settings'
 import './controllers/SettingsController'
-import './controllers/ProjectNameController'