Close pop-up window and update UI after reference provider linking (#15106)

GitOrigin-RevId: 3c93491041170cd78c66bc0ab5db516749f9eded

services/web/frontend/js/features/settings/components/linking-section.tsx

@@ -5,8 +5,10 @@ import importOverleafModules from '../../../../macros/import-overleaf-module.mac
 import { useSSOContext, SSOSubscription } from '../context/sso-context'
 import { SSOLinkingWidget } from './linking/sso-widget'
 import getMeta from '../../../utils/meta'
+import { useBroadcastUser } from '@/shared/hooks/user-channel/use-broadcast-user'
 
 function LinkingSection() {
+  useBroadcastUser()
   const { t } = useTranslation()
   const { subscriptions } = useSSOContext()
   const ssoErrorMessage = getMeta('ol-ssoErrorMessage') as string

services/web/frontend/js/shared/hooks/user-channel/use-broadcast-user.ts

@@ -0,0 +1,12 @@
+import { useEffect } from 'react'
+import { useUserContext } from '@/shared/context/user-context'
+import { useUserChannel } from './use-user-channel'
+
+export const useBroadcastUser = () => {
+  const user = useUserContext()
+  const channel = useUserChannel()
+
+  useEffect(() => {
+    channel?.postMessage(user)
+  }, [channel, user])
+}

services/web/frontend/js/shared/hooks/user-channel/use-receive-user.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react'
+import { useUserChannel } from './use-user-channel'
+
+export const useReceiveUser = (
+  handleData: (data: Record<string, any>) => void
+) => {
+  const channel = useUserChannel()
+
+  useEffect(() => {
+    const abortController = new AbortController()
+    channel?.addEventListener('message', ({ data }) => handleData(data), {
+      signal: abortController.signal,
+    })
+    return () => abortController.abort()
+  }, [channel, handleData])
+}

services/web/frontend/js/shared/hooks/user-channel/use-user-channel.ts

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react'
+
+export const useUserChannel = (): BroadcastChannel | null => {
+  const channelRef = useRef<BroadcastChannel | null>(null)
+
+  if (channelRef.current === null && 'BroadcastChannel' in window) {
+    channelRef.current = new BroadcastChannel('user')
+  }
+
+  useEffect(() => {
+    return () => channelRef.current?.close()
+  }, [])
+
+  return channelRef.current
+}