Add translated messages for more connection error states (#19392)

GitOrigin-RevId: 981de624f3964ebe3ff1f0c751fcef9158864d5e

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

@@ -37,8 +37,12 @@ meta(name="ol-hasTrackChangesFeature", data-type="boolean" content=hasTrackChang
 meta(name="ol-inactiveTutorials", data-type="json" content=user.inactiveTutorials)
 meta(name="ol-projectTags" data-type="json" content=projectTags)
 meta(name="ol-linkSharingWarning" data-type="boolean" content=linkSharingWarning)
+
+// translations for the loading page, before i18n has loaded in the client
 meta(name="ol-loadingText", data-type="string" content=translate("loading"))
+meta(name="ol-translationIoNotLoaded", data-type="string" content=translate("could_not_connect_to_websocket_server"))
 meta(name="ol-translationLoadErrorMessage", data-type="string" content=translate("could_not_load_translations"))
+meta(name="ol-translationUnableToJoin", data-type="string" content=translate("could_not_connect_to_collaboration_server"))
 
 if (settings.overleaf != null)
 	meta(name="ol-overallThemes" data-type="json" content=overallThemes)

services/web/frontend/js/features/ide-react/components/loading-error.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react'
+import { ConnectionError } from '@/features/ide-react/connection/types/connection-state'
+import getMeta from '@/utils/meta'
+
+// NOTE: i18n translations might not be loaded in the client at this point,
+// so these translations have to be loaded from meta tags
+export const LoadingError: FC<{
+  connectionStateError: ConnectionError | ''
+  i18nError?: Error
+}> = ({ connectionStateError, i18nError }) => {
+  if (connectionStateError) {
+    switch (connectionStateError) {
+      case 'io-not-loaded':
+        return <>{getMeta('ol-translationIoNotLoaded')}</>
+
+      case 'unable-to-join':
+        return <>{getMeta('ol-translationUnableToJoin')}</>
+    }
+  }
+
+  if (i18nError) {
+    return <>{getMeta('ol-translationLoadErrorMessage')}</>
+  }
+
+  return null
+}

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

@@ -4,6 +4,7 @@ import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
 import getMeta from '@/utils/meta'
 import { useConnectionContext } from '../context/connection-context'
 import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
+import { LoadingError } from './loading-error'
 
 type Part = 'initial' | 'render' | 'connection' | 'translations' | 'project'
 
@@ -54,21 +55,6 @@ export const Loading: FC<{
     }
   }, [projectJoined])
 
-  const getLoadingScreenError = (): string => {
-    if (connectionState.error) {
-      // NOTE: translations not ready yet
-      return connectionState.error === 'io-not-loaded'
-        ? 'Could not connect to websocket server :('
-        : connectionState.error
-    }
-
-    if (i18n.error) {
-      return getMeta('ol-translationLoadErrorMessage')
-    }
-
-    return ''
-  }
-
   // Use loading text from the server, because i18n will not be ready initially
   const label = getMeta('ol-loadingText')
 
@@ -82,7 +68,12 @@ export const Loading: FC<{
         hasError={hasError}
       />
       {hasError && (
-        <p className="loading-screen-error">{getLoadingScreenError()}</p>
+        <p className="loading-screen-error">
+          <LoadingError
+            connectionStateError={connectionState.error}
+            i18nError={i18n.error}
+          />
+        </p>
       )}
     </div>
   )

services/web/frontend/js/features/ide-react/connection/types/connection-state.ts

@@ -1,4 +1,5 @@
 export type ConnectionError =
+  | 'io-not-loaded'
   | 'maintenance'
   | 'not-logged-in'
   | 'out-of-sync'
@@ -7,7 +8,6 @@ export type ConnectionError =
   | 'rate-limited'
   | 'unable-to-connect'
   | 'unable-to-join'
-  | 'io-not-loaded'
 
 export type ConnectionState = {
   readyState: WebSocket['CONNECTING'] | WebSocket['OPEN'] | WebSocket['CLOSED']

services/web/frontend/js/utils/meta.ts

@@ -191,6 +191,9 @@ export interface Meta {
   'ol-teamInvites': TeamInvite[]
   'ol-thirdPartyIds': ThirdPartyIds
   'ol-translationLoadErrorMessage': string
+  'ol-translationIoNotLoaded': string
+  'ol-translationUnableToJoin': string
+  'ol-translationMaintenance': string
   'ol-useShareJsHash': boolean
   'ol-user': User
   'ol-userAffiliations': Affiliation[]

services/web/frontend/stories/loading/loading-error.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { LoadingError } from '@/features/ide-react/components/loading-error'
+
+const meta: Meta<typeof LoadingError> = {
+  title: 'Loading Page / Loading Error',
+  component: LoadingError,
+}
+
+export default meta
+
+type Story = StoryObj<typeof LoadingError>
+
+export const IoNotLoaded: Story = {
+  render: () => {
+    window.metaAttributesCache.set(
+      'ol-translationIoNotLoaded',
+      'Could not connect to the WebSocket server'
+    )
+
+    return <LoadingError connectionStateError="io-not-loaded" />
+  },
+}
+
+export const UnableToJoin: Story = {
+  render: () => {
+    window.metaAttributesCache.set(
+      'ol-translationUnableToJoin',
+      'Could not connect to the collaboration server'
+    )
+
+    return <LoadingError connectionStateError="unable-to-join" />
+  },
+}

services/web/frontend/stories/loading/loading.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Loading } from '@/features/ide-react/components/loading'
+import { EditorProviders } from '../../../test/frontend/helpers/editor-providers'
+
+const meta: Meta<typeof Loading> = {
+  title: 'Loading Page / Loading',
+  component: Loading,
+  argTypes: {
+    setLoaded: { action: 'setLoaded' },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Loading>
+
+export const LoadingPage: Story = {
+  render: args => (
+    <EditorProviders>
+      <Loading {...args} />
+    </EditorProviders>
+  ),
+}

services/web/locales/en.json

@@ -349,6 +349,8 @@
   "copy_project": "Copy Project",
   "copy_response": "Copy response",
   "copying": "Copying",
+  "could_not_connect_to_collaboration_server": "Could not connect to collaboration server",
+  "could_not_connect_to_websocket_server": "Could not connect to WebSocket server",
   "could_not_load_translations": "Could not load translations",
   "country": "Country",
   "country_flag": "__country__ country flag",