[web] Rename `docRoot_id` to `docRootId` in the frontend code (#26337)

* Rename `rootDoc_id` to `rootDocId` in the frontend

* Update types

* Fix frontend test

GitOrigin-RevId: b755a4ebf7b8c0b8ed800d713bbae8cfcfdd5046

services/web/frontend/js/features/editor-left-menu/hooks/use-root-doc-id.tsx

@@ -6,7 +6,7 @@ import useSaveProjectSettings from './use-save-project-settings'
 
 export default function useRootDocId() {
   const [rootDocId] =
-    useScopeValue<ProjectSettings['rootDocId']>('project.rootDoc_id')
+    useScopeValue<ProjectSettings['rootDocId']>('project.rootDocId')
   const { permissionsLevel } = useEditorContext()
   const saveProjectSettings = useSaveProjectSettings()
 

services/web/frontend/js/features/editor-left-menu/hooks/use-save-project-settings.tsx

@@ -19,13 +19,7 @@ export default function useSaveProjectSettings() {
         await saveProjectSettings(projectId, {
           [key]: newSetting,
         })
-
-        // rootDocId is used in our tsx and our endpoint, but rootDoc_id is used in our project $scope, etc
-        // as we use both namings in many files, and convert back and forth,
-        // its complicated to seperate and choose one name for all usages
-        // todo: make rootDocId or rootDoc_id consistent, and remove need for this/ other conversions
-        const settingsKey = key === 'rootDocId' ? 'rootDoc_id' : key
-        setProjectSettings({ ...projectSettings, [settingsKey]: newSetting })
+        setProjectSettings({ ...projectSettings, [key]: newSetting })
       }
     }
   }

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

@@ -127,10 +127,11 @@ export const IdeReactProvider: FC<React.PropsWithChildren> = ({ children }) => {
   // Populate scope values when joining project, then fire project:joined event
   useEffect(() => {
     function handleJoinProjectResponse({
-      project,
+      project: { rootDoc_id: rootDocId, ..._project },
       permissionsLevel,
     }: JoinProjectPayload) {
-      scopeStore.set('project', { rootDoc_id: null, ...project })
+      const project = { ..._project, rootDocId }
+      scopeStore.set('project', project)
       scopeStore.set('permissionsLevel', permissionsLevel)
       // Make watchers update immediately
       scopeStore.flushUpdates()

services/web/frontend/js/shared/context/project-context.tsx

@@ -36,7 +36,7 @@ export const ProjectProvider: FC<React.PropsWithChildren> = ({ children }) => {
     compiler,
     imageName,
     name,
-    rootDoc_id: rootDocId,
+    rootDocId,
     members,
     invites,
     features,

services/web/frontend/stories/decorators/scope.tsx

@@ -41,7 +41,7 @@ const project: Project = {
   },
   members: [],
   invites: [],
-  rootDoc_id: '5e74f1a7ce17ae0041dfd056',
+  rootDocId: '5e74f1a7ce17ae0041dfd056',
   rootFolder: [
     {
       _id: 'root-folder-id',

services/web/test/frontend/helpers/editor-providers.jsx

@@ -103,7 +103,7 @@ export function EditorProviders({
         name: PROJECT_NAME,
         owner: projectOwner,
         features: projectFeatures,
-        rootDoc_id: rootDocId,
+        rootDocId,
         rootFolder,
         imageName,
         compiler,

services/web/types/project.ts

@@ -25,7 +25,8 @@ export type Project = {
   owner: MongoUser
   members: ProjectMember[]
   invites: ProjectInvite[]
-  rootDoc_id?: string
+  // `rootDoc_id` in the backend; `rootDocId` in the frontend
+  rootDocId?: string
   rootFolder?: Folder[]
   deletedByExternalDataSource?: boolean
 }