From d292bd146f0c9d2557536ec3a2fe04fce69be2ea Mon Sep 17 00:00:00 2001 From: Alexandra Vedeler Date: Thu, 31 Oct 2024 12:57:36 +0100 Subject: [PATCH] Force reload when user has changed reportee in another tab (#1134) * added alert component for when cookie changes * moved ReloadAlert to main * QA changes --- .../ReloadAlert/ReloadAlert.module.css | 3 +++ src/components/ReloadAlert/ReloadAlert.tsx | 27 +++++++++++++++++++ .../FakePageWrapper/FakePageWrapper.tsx | 2 +- src/localizations/en.json | 3 ++- src/localizations/no_nb.json | 3 ++- src/localizations/no_nn.json | 3 ++- src/main.jsx | 2 ++ src/resources/Cookie/CookieMethods.ts | 27 +++++++++++++++++++ 8 files changed, 66 insertions(+), 4 deletions(-) create mode 100644 src/components/ReloadAlert/ReloadAlert.module.css create mode 100644 src/components/ReloadAlert/ReloadAlert.tsx diff --git a/src/components/ReloadAlert/ReloadAlert.module.css b/src/components/ReloadAlert/ReloadAlert.module.css new file mode 100644 index 000000000..9e4c1bbd6 --- /dev/null +++ b/src/components/ReloadAlert/ReloadAlert.module.css @@ -0,0 +1,3 @@ +.alertText { + margin-bottom: 10px; +} diff --git a/src/components/ReloadAlert/ReloadAlert.tsx b/src/components/ReloadAlert/ReloadAlert.tsx new file mode 100644 index 000000000..28ec26ea1 --- /dev/null +++ b/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 && ( + + window.location.reload()} + closeButton={false} + > + {t('common.refresh_cookie_alert')} + + + + ) + ); +}; diff --git a/src/features/amUI/common/FakePageWrapper/FakePageWrapper.tsx b/src/features/amUI/common/FakePageWrapper/FakePageWrapper.tsx index 309be9ebb..d06f0a344 100644 --- a/src/features/amUI/common/FakePageWrapper/FakePageWrapper.tsx +++ b/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, diff --git a/src/localizations/en.json b/src/localizations/en.json index 54b68d8af..3d6e13268 100644 --- a/src/localizations/en.json +++ b/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", diff --git a/src/localizations/no_nb.json b/src/localizations/no_nb.json index 01df2e5b1..be3a43df7 100644 --- a/src/localizations/no_nb.json +++ b/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", diff --git a/src/localizations/no_nn.json b/src/localizations/no_nn.json index bf148cf5f..1dd5724a1 100644 --- a/src/localizations/no_nn.json +++ b/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", diff --git a/src/main.jsx b/src/main.jsx index cb9f13a14..ebd429208 100644 --- a/src/main.jsx +++ b/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( + diff --git a/src/resources/Cookie/CookieMethods.ts b/src/resources/Cookie/CookieMethods.ts index 8d8951a03..0d8f8a6ff 100644 --- a/src/resources/Cookie/CookieMethods.ts +++ b/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; +};