Tidy up global scope values (#20379)

* Remove crypto from window
* Remove ui.loadingStyleSheet
* Remove onlineUsers scope
* Remove addNewComment

GitOrigin-RevId: 5e62ed7f265cdd530b5ca85488477093b0be775a

services/web/frontend/js/features/ide-react/components/editor/editor-pane.tsx

@@ -2,10 +2,8 @@ import { Panel, PanelGroup } from 'react-resizable-panels'
 import React, { FC, lazy, Suspense } from 'react'
 import useScopeValue from '@/shared/hooks/use-scope-value'
 import SourceEditor from '@/features/source-editor/components/source-editor'
-import {
-  EditorScopeValue,
-  useEditorManagerContext,
-} from '@/features/ide-react/context/editor-manager-context'
+import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
+import { EditorScopeValue } from '@/features/ide-react/scope-adapters/editor-manager-context-adapter'
 import classNames from 'classnames'
 import { LoadingPane } from '@/features/ide-react/components/editor/loading-pane'
 import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'

services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx

@@ -85,20 +85,6 @@ function hasGotoOffset(options: OpenDocOptions): options is GotoOffsetOptions {
   return typeof options.gotoOffset === 'number'
 }
 
-export type EditorScopeValue = {
-  showSymbolPalette: false
-  toggleSymbolPalette: () => void
-  sharejs_doc: DocumentContainer | null
-  open_doc_id: string | null
-  open_doc_name: string | null
-  opening: boolean
-  trackChanges: boolean
-  wantTrackChanges: boolean
-  showVisual: boolean
-  newSourceEditor: boolean
-  error_state: boolean
-}
-
 export const EditorManagerContext = createContext<EditorManager | undefined>(
   undefined
 )

services/web/frontend/js/features/ide-react/context/ide-react-context.tsx

@@ -20,7 +20,6 @@ import { useConnectionContext } from '@/features/ide-react/context/connection-co
 import { getMockIde } from '@/shared/context/mock/mock-ide'
 import { populateEditorScope } from '@/features/ide-react/scope-adapters/editor-manager-context-adapter'
 import { postJSON } from '@/infrastructure/fetch-json'
-import { populateOnlineUsersScope } from '@/features/ide-react/context/online-users-context'
 import { ReactScopeEventEmitter } from '@/features/ide-react/scope-event-emitter/react-scope-event-emitter'
 import getMeta from '@/utils/meta'
 
@@ -74,7 +73,6 @@ export function createReactScopeValueStore(projectId: string) {
   populateLayoutScope(scopeStore)
   populateProjectScope(scopeStore)
   populatePdfScope(scopeStore)
-  populateOnlineUsersScope(scopeStore)
   populateReviewPanelScope(scopeStore)
 
   scopeStore.allowNonExistentPath('hasLintingError')

services/web/frontend/js/features/ide-react/context/online-users-context.tsx

@@ -7,10 +7,8 @@ import {
   useMemo,
   useState,
 } from 'react'
-import { ReactScopeValueStore } from '@/features/ide-react/scope-value-store/react-scope-value-store'
 import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
 import { useConnectionContext } from '@/features/ide-react/context/connection-context'
-import useScopeValue from '@/shared/hooks/use-scope-value'
 import { CursorPosition } from '@/features/ide-react/types/cursor-position'
 import { omit } from 'lodash'
 import { Doc } from '../../../../../types/doc'
@@ -63,16 +61,9 @@ type OnlineUsersContextValue = {
   onlineUsersCount: number
 }
 
-export function populateOnlineUsersScope(store: ReactScopeValueStore) {
-  store.set('onlineUsers', {})
-  store.set('onlineUserCursorHighlights', {})
-  store.set('onlineUsersArray', [])
-  store.set('onlineUsersCount', 0)
-}
-
-const OnlineUsersContext = createContext<OnlineUsersContextValue | undefined>(
-  undefined
-)
+export const OnlineUsersContext = createContext<
+  OnlineUsersContextValue | undefined
+>(undefined)
 
 export const OnlineUsersProvider: FC = ({ children }) => {
   const { eventEmitter } = useIdeReactContext()
@@ -80,20 +71,12 @@ export const OnlineUsersProvider: FC = ({ children }) => {
   const { currentDocumentId } = useEditorManagerContext()
   const { fileTreeData } = useFileTreeData()
 
-  const [onlineUsers, setOnlineUsers] =
-    useScopeValue<OnlineUsersContextValue['onlineUsers']>('onlineUsers')
-  const [onlineUserCursorHighlights, setOnlineUserCursorHighlights] =
-    useScopeValue<OnlineUsersContextValue['onlineUserCursorHighlights']>(
-      'onlineUserCursorHighlights'
-    )
-  const [onlineUsersArray, setOnlineUsersArray] =
-    useScopeValue<OnlineUsersContextValue['onlineUsersArray']>(
-      'onlineUsersArray'
-    )
-  const [onlineUsersCount, setOnlineUsersCount] =
-    useScopeValue<OnlineUsersContextValue['onlineUsersCount']>(
-      'onlineUsersCount'
-    )
+  const [onlineUsers, setOnlineUsers] = useState<Record<string, OnlineUser>>({})
+  const [onlineUserCursorHighlights, setOnlineUserCursorHighlights] = useState<
+    Record<string, CursorHighlight[]>
+  >({})
+  const [onlineUsersArray, setOnlineUsersArray] = useState<OnlineUser[]>([])
+  const [onlineUsersCount, setOnlineUsersCount] = useState(0)
 
   const [currentPosition, setCurrentPosition] = useState<CursorPosition | null>(
     null

services/web/frontend/js/features/ide-react/context/react-context-root.tsx

@@ -73,8 +73,8 @@ export const ReactContextRoot: FC<{ providers?: Record<string, FC> }> = ({
                           <Providers.DetachProvider>
                             <Providers.EditorProvider>
                               <Providers.PermissionsProvider>
-                                <Providers.ProjectSettingsProvider>
-                                  <Providers.LayoutProvider>
+                                <Providers.LayoutProvider>
+                                  <Providers.ProjectSettingsProvider>
                                     <Providers.EditorManagerProvider>
                                       <Providers.LocalCompileProvider>
                                         <Providers.DetachCompileProvider>
@@ -94,8 +94,8 @@ export const ReactContextRoot: FC<{ providers?: Record<string, FC> }> = ({
                                         </Providers.DetachCompileProvider>
                                       </Providers.LocalCompileProvider>
                                     </Providers.EditorManagerProvider>
-                                  </Providers.LayoutProvider>
-                                </Providers.ProjectSettingsProvider>
+                                  </Providers.ProjectSettingsProvider>
+                                </Providers.LayoutProvider>
                               </Providers.PermissionsProvider>
                             </Providers.EditorProvider>
                           </Providers.DetachProvider>

services/web/frontend/js/features/ide-react/scope-adapters/editor-manager-context-adapter.ts

@@ -1,6 +1,20 @@
 import { ReactScopeValueStore } from '@/features/ide-react/scope-value-store/react-scope-value-store'
 import customLocalStorage from '@/infrastructure/local-storage'
 import getMeta from '@/utils/meta'
+import { DocumentContainer } from '@/features/ide-react/editor/document-container'
+
+export type EditorScopeValue = {
+  showSymbolPalette: false
+  toggleSymbolPalette: () => void
+  sharejs_doc: DocumentContainer | null
+  open_doc_id: string | null
+  open_doc_name: string | null
+  opening: boolean
+  trackChanges: boolean
+  wantTrackChanges: boolean
+  showVisual: boolean
+  error_state: boolean
+}
 
 export function populateEditorScope(
   store: ReactScopeValueStore,
@@ -8,7 +22,7 @@ export function populateEditorScope(
 ) {
   store.set('project.name', null)
 
-  store.set('editor', {
+  const editor: Omit<EditorScopeValue, 'showVisual'> = {
     showSymbolPalette: false,
     toggleSymbolPalette: () => {},
     sharejs_doc: null,
@@ -17,10 +31,10 @@ export function populateEditorScope(
     opening: true,
     trackChanges: false,
     wantTrackChanges: false,
-    // No Ace here
-    newSourceEditor: true,
     error_state: false,
-  })
+  }
+  store.set('editor', editor)
+
   store.persisted(
     'editor.showVisual',
     getMeta('ol-usedLatex') === 'never' || showVisualFallbackValue(projectId),

services/web/frontend/js/features/ide-react/scope-adapters/layout-context-adapter.ts

@@ -11,5 +11,4 @@ export default function populateLayoutScope(store: ReactScopeValueStore) {
   store.set('ui.leftMenuShown', false)
   store.set('ui.miniReviewPanelVisible', false)
   store.set('ui.pdfLayout', 'sideBySide')
-  store.set('ui.loadingStyleSheet', false)
 }

services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts

@@ -4,6 +4,5 @@ import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 export default function populateReviewPanelScope(store: ReactScopeValueStore) {
   store.set('loadingThreads', true)
   store.set('users', {})
-  store.set('addNewComment', () => {})
   store.set('usingNewReviewPanel', isSplitTestEnabled('review-panel-redesign'))
 }