Merge pull request #7837 from overleaf/ta-storybook-context-fix

Storybook Fixes

GitOrigin-RevId: b2f80cec162d3d78d41a8864f9021f58370db37e

services/web/frontend/stories/chat.stories.js

@@ -3,7 +3,6 @@ import { v4 as uuid } from 'uuid'
 import { ContextRoot } from '../js/shared/context/root-context'
 import ChatPane from '../js/features/chat/components/chat-pane'
 import { stubMathJax } from '../../test/frontend/features/chat/components/stubs'
-import { setupContext } from './fixtures/context'
 import useFetchMock from './hooks/use-fetch-mock'
 
 const ONE_MINUTE = 60 * 1000
@@ -40,7 +39,6 @@ function generateMessages(count) {
 }
 
 stubMathJax()
-setupContext()
 
 export const Conversation = args => {
   useFetchMock(fetchMock => {

services/web/frontend/stories/editor-navigation-toolbar.stories.js

@@ -1,9 +1,5 @@
 import ToolbarHeader from '../js/features/editor-navigation-toolbar/components/toolbar-header'
 
-import { setupContext } from './fixtures/context'
-
-setupContext()
-
 export const UpToThreeConnectedUsers = args => {
   return <ToolbarHeader {...args} />
 }

services/web/frontend/stories/editor-switch.stories.js

@@ -1,5 +1,4 @@
 import EditorSwitch from '../js/features/source-editor/components/editor-switch'
-import { setupContext } from './fixtures/context'
 import { withContextRoot } from './utils/with-context-root'
 
 export default {
@@ -7,8 +6,6 @@ export default {
   component: EditorSwitch,
 }
 
-setupContext()
-
 export const Switcher = () => {
   return withContextRoot(<EditorSwitch />, {
     editor: {

services/web/frontend/stories/file-tree.stories.js

@@ -10,6 +10,7 @@ import useFetchMock from './hooks/use-fetch-mock'
 const MOCK_DELAY = 2000
 
 window._ide = {
+  ...window._ide,
   socket: new MockedSocket(),
 }
 const DEFAULT_PROJECT = {

services/web/frontend/stories/fixtures/context.js

@@ -6,35 +6,34 @@ export function setupContext() {
     id: 'fake_user',
     allowedFreeTrial: true,
   }
-  let $scope = {}
-  if (window._ide) {
-    $scope = {
-      ...window._ide.$scope,
-      user: window.user,
-      project: {
-        features: {},
-        rootFolder: [
-          {
-            _id: 'root-folder-id',
-            name: 'rootFolder',
-            docs: [],
-            folders: [],
-            fileRefs: [],
-          },
-        ],
-      },
-      $watch: () => {},
-      $applyAsync: () => {},
-      $broadcast: () => {},
-      ui: {
-        chatOpen: true,
-        pdfLayout: 'flat',
-      },
-      settings: {
-        pdfViewer: 'js',
-      },
-      toggleHistory: () => {},
-    }
+  const $scope = {
+    ...window._ide?.$scope,
+    user: window.user,
+    project: {
+      _id: window.project_id,
+      name: 'Project Fake Name',
+      features: {},
+      rootFolder: [
+        {
+          _id: 'root-folder-id',
+          name: 'rootFolder',
+          docs: [],
+          folders: [],
+          fileRefs: [],
+        },
+      ],
+    },
+    $watch: () => {},
+    $applyAsync: () => {},
+    $broadcast: () => {},
+    ui: {
+      chatOpen: true,
+      pdfLayout: 'flat',
+    },
+    settings: {
+      pdfViewer: 'js',
+    },
+    toggleHistory: () => {},
   }
   window._ide = {
     ...window._ide,
@@ -66,4 +65,7 @@ export function setupContext() {
   window.ExposedSettings = window.ExposedSettings || {}
   window.ExposedSettings.appName = 'Overleaf'
   window.gitBridgePublicBaseUrl = 'https://git.stories.com'
+
+  window.metaAttributesCache = window.metaAttributesCache || new Map()
+  window.metaAttributesCache.set('ol-user', window.user)
 }

services/web/frontend/stories/git-bridge-modal.stories.js

@@ -1,5 +1,4 @@
 import { ContextRoot } from '../js/shared/context/root-context'
-import { setupContext } from './fixtures/context'
 import importOverleafModules from '../macros/import-overleaf-module.macro'
 import useFetchMock from './hooks/use-fetch-mock'
 
@@ -9,8 +8,6 @@ const [
   },
 ] = importOverleafModules('gitBridge')
 
-setupContext()
-
 export const GitBridgeUrlModal = args => <GitBridgeModal {...args} />
 GitBridgeUrlModal.args = {
   type: 'show_url',

services/web/frontend/stories/outline.stories.js

@@ -1,8 +1,5 @@
 import OutlinePane from '../js/features/outline/components/outline-pane'
 import { ContextRoot } from '../js/shared/context/root-context'
-import { setupContext } from './fixtures/context'
-
-setupContext()
 
 export const Basic = args => <OutlinePane {...args} />
 Basic.args = {

services/web/frontend/stories/pdf-preview-error-boundary.stories.js

@@ -1,5 +1,4 @@
 import ErrorBoundaryFallback from '../js/features/pdf-preview/components/error-boundary-fallback'
-import { setupContext } from './fixtures/context'
 import { withContextRoot } from './utils/with-context-root'
 
 export default {
@@ -7,8 +6,6 @@ export default {
   component: ErrorBoundaryFallback,
 }
 
-setupContext()
-
 export const PreviewErrorBoundary = () => {
   return withContextRoot(<ErrorBoundaryFallback type="preview" />)
 }

services/web/frontend/stories/pdf-preview.stories.js

@@ -1,7 +1,6 @@
 import { withContextRoot } from './utils/with-context-root'
 import { useCallback, useMemo, useState } from 'react'
 import useFetchMock from './hooks/use-fetch-mock'
-import { setupContext } from './fixtures/context'
 import { Button } from 'react-bootstrap'
 import PdfPreviewPane from '../js/features/pdf-preview/components/pdf-preview-pane'
 import PdfPreview from '../js/features/pdf-preview/components/pdf-preview'
@@ -23,8 +22,6 @@ import {
 } from './fixtures/compile'
 import { cloneDeep } from 'lodash'
 
-setupContext()
-
 export default {
   title: 'Editor / PDF Preview',
   component: PdfPreview,

services/web/frontend/stories/pdf-viewer.stories.js

@@ -1,6 +1,6 @@
+import { useEffect, Suspense } from 'react'
 import useFetchMock from './hooks/use-fetch-mock'
 import { withContextRoot } from './utils/with-context-root'
-import { setupContext } from './fixtures/context'
 import PdfSynctexControls from '../js/features/pdf-preview/components/pdf-synctex-controls'
 import PdfViewer from '../js/features/pdf-preview/components/pdf-viewer'
 import {
@@ -9,9 +9,6 @@ import {
   mockSynctex,
   mockValidPdf,
 } from './fixtures/compile'
-import { useEffect } from 'react'
-
-setupContext()
 
 export default {
   title: 'Editor / PDF Viewer',
@@ -49,14 +46,16 @@ export const Interactive = () => {
   }, [])
 
   return withContextRoot(
-    <div>
-      <div className="pdf-viewer">
-        <PdfViewer />
-      </div>
-      <div style={{ position: 'absolute', top: 150, left: 50 }}>
-        <PdfSynctexControls />
+    <Suspense fallback="Loading">
+      <div>
+        <div className="pdf-viewer">
+          <PdfViewer />
+        </div>
+        <div style={{ position: 'absolute', top: 150, left: 50 }}>
+          <PdfSynctexControls />
+        </div>
       </div>
-    </div>,
+    </Suspense>,
     scope
   )
 }

services/web/frontend/stories/share-project-modal.stories.js

@@ -128,6 +128,7 @@ const project = {
     readAndWrite: 'rw-token',
   },
   owner: {
+    _id: 'fakeOwnerId',
     email: 'stories@overleaf.com',
   },
   members: [