Force reload when user has changed reportee in another tab (#1134)

* added alert component for when cookie changes

* moved ReloadAlert to main

* QA changes

src/components/ReloadAlert/ReloadAlert.module.css

@@ -0,0 +1,3 @@
+.alertText {
+  margin-bottom: 10px;
+}

src/components/ReloadAlert/ReloadAlert.tsx

@@ -0,0 +1,27 @@
+import { useTranslation } from 'react-i18next';
+import { Button, Modal, Paragraph } from '@digdir/designsystemet-react';
+
+import { useCookieListener } from '@/resources/Cookie/CookieMethods';
+
+import classes from './ReloadAlert.module.css';
+
+export const ReloadAlert = () => {
+  const { t } = useTranslation();
+
+  const displayAlert = useCookieListener('AltinnPartyId');
+
+  return (
+    displayAlert && (
+      <Modal.Context>
+        <Modal
+          open
+          onClose={() => window.location.reload()}
+          closeButton={false}
+        >
+          <Paragraph className={classes.alertText}>{t('common.refresh_cookie_alert')}</Paragraph>
+          <Button onClick={() => window.location.reload()}>Ok</Button>
+        </Modal>
+      </Modal.Context>
+    )
+  );
+};

src/features/amUI/common/FakePageWrapper/FakePageWrapper.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Divider, Label, Search } from '@digdir/designsystemet-react';
+import { Divider, Label } from '@digdir/designsystemet-react';
 import {
   ClockDashedIcon,
   HandshakeIcon,

src/localizations/en.json

@@ -203,7 +203,8 @@
     "no_resources chosen": "No services selected",
     "restart_prompter_no_resources_chosen_ingress": "We cannot see that any services have been selected.",
     "popular_services": "Popular services",
-    "give_new_single_right": "Give power of attorney to new service"
+    "give_new_single_right": "Give power of attorney to new service",
+    "refresh_cookie_alert": "The chosen actor has been changed in another tab. To synchronize with the change, this page will now reload."
   },
   "users_page": {
     "page_title": "Users and groups - Altinn",

src/localizations/no_nb.json

@@ -60,7 +60,8 @@
     "update_poa": "Oppdater fullmakt",
     "give_poa": "Gi fullmakt",
     "delete_poa": "Slett fullmakt",
-    "has_poa": "Har fullmakt"
+    "has_poa": "Har fullmakt",
+    "refresh_cookie_alert": "Valgt aktør er endret i en annen fane. For å sykronisere visningen vil denne siden bli lastet på nytt."
   },
   "error_page": {
     "not_found_site_error_type": "Feil 404",

src/localizations/no_nn.json

@@ -60,7 +60,8 @@
     "update_poa": "Oppdater fullmakt",
     "give_poa": "Gi fullmakt",
     "delete_poa": "Slett fullmakt",
-    "has_poa": "Har fullmakt"
+    "has_poa": "Har fullmakt",
+    "refresh_cookie_alert": "Valgt aktør er endret i ein annen fane. For å sykronisere visninga vil denne sida bli lasta på nytt."
   },
   "error_page": {
     "not_found_site_error_type": "Feil 404",

src/main.jsx

@@ -12,6 +12,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { use } from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 
+import { ReloadAlert } from '@/components/ReloadAlert/ReloadAlert';
 import { RefreshToken } from '@/resources/Token/RefreshToken';
 import { Router } from '@/routes/Router/Router';
 
@@ -57,6 +58,7 @@ createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <Provider store={store}>
       <QueryClientProvider client={queryClient}>
+        <ReloadAlert />
         <RefreshToken />
         <RouterProvider router={Router}></RouterProvider>
       </QueryClientProvider>

src/resources/Cookie/CookieMethods.ts

@@ -1,3 +1,5 @@
+import { useState, useEffect } from 'react';
+
 export function getCookie(cname: string) {
   const name = cname + '=';
   const decodedCookie = decodeURIComponent(document.cookie);
@@ -13,3 +15,28 @@ export function getCookie(cname: string) {
   }
   return '';
 }
+
+/**
+ * Detects changes in a given cookie by polling it with the given interval
+ * @param cookieName The name of the cookie to be checked
+ * @param interval The interval in which to poll the cookie (given in milliseconds)
+ * @returns `true` if the cookie has been changed from it's original value, `false` otherwise.
+ */
+export const useCookieListener = (cookieName: string, interval = 2000) => {
+  const [cookieValue, setCookieValue] = useState(getCookie(cookieName));
+  const [cookieChanged, setCookieChanged] = useState(false);
+
+  useEffect(() => {
+    const checkCookie = setInterval(() => {
+      const currentCookie = getCookie(cookieName);
+      if (currentCookie !== cookieValue) {
+        setCookieValue(currentCookie);
+        setCookieChanged(true);
+      }
+    }, interval); // Check every interval
+
+    return () => clearInterval(checkCookie);
+  }, [cookieName, interval]);
+
+  return cookieChanged;
+};