Merge pull request #3632 from overleaf/msm-navbar-collaborator-widget

[ReactNavToolbar] Collaborators widget

GitOrigin-RevId: 65f2484962591103f02eb7624a974d0806b1abf0

services/web/frontend/js/shared/context/controllers/root-context-controller.js

@@ -23,6 +23,9 @@ App.controller('ReactRootContextController', function($scope, ide) {
   ide.$scope.$watch('ui.chatOpen', value => {
     $scope.chatIsOpenAngular = value
   })
+
+  // wrapper is required to avoid scope problems with `this` inside `EditorManager`
+  $scope.openDoc = (doc, args) => ide.editorManager.openDoc(doc, args)
 })
 
 App.component(
@@ -30,6 +33,11 @@ App.component(
   react2angular(rootContext.component, [
     'editorLoading',
     'setChatIsOpenAngular',
-    'chatIsOpenAngular'
+    'chatIsOpenAngular',
+    'openDoc',
+    // `$scope.onlineUsersArray` is already populated by `OnlineUsersManager`, which also creates
+    // a new array instance every time the list of online users change (which should refresh the
+    // value passed to React as a prop, triggering a re-render)
+    'onlineUsersArray'
   ])
 )

services/web/frontend/js/shared/context/editor-context.js

@@ -21,7 +21,9 @@ export function EditorProvider({
   children,
   loading,
   chatIsOpenAngular,
-  setChatIsOpenAngular
+  setChatIsOpenAngular,
+  openDoc,
+  onlineUsersArray
 }) {
   const cobranding = window.brandVariation
     ? {
@@ -63,6 +65,8 @@ export function EditorProvider({
     loading,
     projectId: window.project_id,
     isProjectOwner: ownerId === window.user.id,
+    openDoc,
+    onlineUsersArray,
     ui: {
       chatIsOpen,
       toggleChatOpen
@@ -80,7 +84,9 @@ EditorProvider.propTypes = {
   children: PropTypes.any,
   loading: PropTypes.bool,
   chatIsOpenAngular: PropTypes.bool,
-  setChatIsOpenAngular: PropTypes.func.isRequired
+  setChatIsOpenAngular: PropTypes.func.isRequired,
+  openDoc: PropTypes.func.isRequired,
+  onlineUsersArray: PropTypes.array.isRequired
 }
 
 export function useEditorContext(propTypes) {

services/web/frontend/js/shared/context/root-context.js

@@ -9,7 +9,9 @@ export function ContextRoot({
   children,
   editorLoading,
   chatIsOpenAngular,
-  setChatIsOpenAngular
+  setChatIsOpenAngular,
+  openDoc,
+  onlineUsersArray
 }) {
   return (
     <ApplicationProvider>
@@ -17,6 +19,8 @@ export function ContextRoot({
         loading={editorLoading}
         chatIsOpenAngular={chatIsOpenAngular}
         setChatIsOpenAngular={setChatIsOpenAngular}
+        openDoc={openDoc}
+        onlineUsersArray={onlineUsersArray}
       >
         <ChatProvider>{children}</ChatProvider>
       </EditorProvider>
@@ -28,7 +32,9 @@ ContextRoot.propTypes = {
   children: PropTypes.any,
   editorLoading: PropTypes.bool,
   chatIsOpenAngular: PropTypes.bool,
-  setChatIsOpenAngular: PropTypes.func.isRequired
+  setChatIsOpenAngular: PropTypes.func.isRequired,
+  openDoc: PropTypes.func.isRequired,
+  onlineUsersArray: PropTypes.array.isRequired
 }
 
 export const rootContext = createSharedContext(ContextRoot)