Legg til mulighet for å ignorere ekstern state

Brukes i oversiktsbilder der man ikke har bruker i kontekst men fortsatt
vil kunne bruke søkefeltet til å navigere til "person" side.

Author: LudvigHz

Migrating-v3.md

@@ -62,12 +62,14 @@ konfigurasjonen til å passe v3.
 
    **Nye props**
 
-   | v3                        | Kommentar                                                              |
-   | ------------------------- | ---------------------------------------------------------------------- |
-   | `showHotkeys: boolean`    | Vis knapp som åpner modal med liste om registrete hotkeys.             |
-   | `environment`             | Hvilket miljø appen kjører i                                           |
-   | `urlFormat`               | Hvilket URL format som brukes (ansatt eller intern)                    |
-   | `fetchActiveUserOnMount`  | Om bruker fra context skal hentes dersom `fnr` er `undefined`          |
-   | `fetchActiveEnhetOnMount` | Om enhet fra context skal hentes dersom `enhet` er `undefined`         |
-   | `enableHotkeys`           | Skru på hotkeys (NB: ikke på by default)                               |
-   | `includeCredentials`      | Sett `credentials: "include"` på outgoing requests til contextholderen |
+   | v3                        | Kommentar                                                                                                                                                                                                                   |
+   | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+   | `showHotkeys: boolean`    | Vis knapp som åpner modal med liste om registrete hotkeys.                                                                                                                                                                  |
+   | `environment`             | Hvilket miljø appen kjører i                                                                                                                                                                                                |
+   | `urlFormat`               | Hvilket URL format som brukes (ansatt eller intern)                                                                                                                                                                         |
+   | `fetchActiveUserOnMount`  | Om bruker fra context skal hentes dersom `fnr` er `undefined`                                                                                                                                                               |
+   | `fetchActiveEnhetOnMount` | Om enhet fra context skal hentes dersom `enhet` er `undefined`                                                                                                                                                              |
+   | `fnrSyncMode`             | "sync" eller "writeOnly". Styrer om state skal synkroniseres eller om endringer kun skal gå en vei. Brukes for oversikts apper der man ikke har bruker i kontekst men ønsker å kunne navigere til personview med søkefeltet |
+   | `enhetSyncMode`           | Fungerer likt som `fnrSyncMode` men for brukers enhet                                                                                                                                                                       |
+   | `enableHotkeys`           | Skru på hotkeys (NB: ikke på by default)                                                                                                                                                                                    |
+   | `includeCredentials`      | Sett `credentials: "include"` på outgoing requests til contextholderen                                                                                                                                                      |

README.md

@@ -1,8 +1,5 @@
 # Dekoratør for interne arbeidsflater V3
 
-> [!NOTE]
-> v2.1 kjører fortsatt i prod. Du kan finne denne i [v2.1 branchen](https://github.com/navikt/internarbeidsflatedecorator/tree/v2.1)
-
 **[Migrasjonsguide for V3](./Migrating-v3.md)**
 
 Dekoratøren er en navigasjonsmeny som skal kunne brukes på tvers av fagapplikasjoner i NAV.
@@ -60,7 +57,6 @@ function App() {
 ### Manuelt oppsett
 
 Om man ikke bruker react så kan man fortsatt ta ibruk decoratoren, men man må da kalle render-funksjonen selv.
-Ett eksempel på hvordan dette kan gjøres kan ses i [index.html](../public/index.html).
 
 ## Konfigurasjon
 
@@ -74,6 +70,8 @@ export interface DecoratorProps {
   enableHotkeys?: boolean | undefined; // Aktivere hurtigtaster
   fetchActiveEnhetOnMount?: boolean | undefined; // Om enhet er undefined fra container appen, og denne er satt til true, henter den sist aktiv enhet og bruker denne.
   fetchActiveUserOnMount?: boolean | undefined; // Om fnr er undefined fra container appen, og denne er satt til true for at den skal hente siste aktiv fnr.
+  fnrSyncMode?: 'sync' | 'writeOnly'; // Modus til fnr state management. "sync" er default. "writeOnly" gjør at endringer aldri hentes men vil settes dersom det oppdateres lokalt i appen
+  enhetSyncMode?: 'sync' | 'writeOnly'; // Samme som fnrSyncMode, men for enhet state.
   onEnhetChanged: (enhetId?: string | null, enhet?: Enhet) => void; // Kalles når enheten endres
   onFnrChanged: (fnr?: string | null) => void; // Kalles når fnr enheten endres
   onLinkClick?: (link: { text: string; url: string }) => void; // Kan brukes for å legge til callbacks ved klikk på lenker i menyen. Merk at callbacken ikke kan awaites og man må selv håndtere at siden lukkes. Nyttig for å f.eks tracke navigasjon events i amplitude
@@ -108,7 +106,7 @@ export type Environment =
   | 'local'
   | 'mock';
 
-export type UrlFormat = 'LOCAL' | 'NAV_NO' | 'ANSATT'; // UrlFormat. Brukes om proxy ikke er satt & i url til websocket.
+export type UrlFormat = 'LOCAL' | 'NAV_NO' | 'ANSATT'; // UrlFormat. Brukes til lenker i menyen & WS urlen
 
 export interface HotkeyObject {
   char: string;

packages/internarbeidsflate-decorator-v3/src/Decorator.tsx

@@ -1,6 +1,5 @@
 import React, { PropsWithChildren } from 'react';
 import './index.css';
-import { AppProps } from './types/AppProps';
 import useAppLogic from './hooks/useAppLogic';
 import Banner from './components/Banner';
 import Menu from './components/Menu';
@@ -9,9 +8,20 @@ import NewEnhetModal from './components/modals/NewEnhetModal';
 import ErrorMessage from './components/ErrorMessageDisplay';
 import { useOnOutsideClick } from './hooks/useOnOutsideClick';
 import { useAppState } from './states/AppState';
+import { DecoratorProps } from './types/AppProps';
+
+const Decorator: React.FC<PropsWithChildren<DecoratorProps>> = (props) => {
+  useAppLogic({
+    ...props,
+    ignoreExternalFnr: props.fnrSyncMode === 'writeOnly',
+    fetchActiveUserOnMount:
+      props.fnrSyncMode === 'writeOnly' || props.fetchActiveUserOnMount,
+
+    ignoreExternalEnhet: props.fnrSyncMode === 'writeOnly',
+    fetchActiveEnhetOnMount:
+      props.enhetSyncMode === 'writeOnly' || props.fetchActiveEnhetOnMount,
+  });
 
-const Decorator: React.FC<PropsWithChildren<AppProps>> = (props) => {
-  useAppLogic(props);
   const ref = useOnOutsideClick<HTMLElement>(() =>
     useAppState.setState({ open: false }),
   );

packages/internarbeidsflate-decorator-v3/src/hooks/useSyncStore.ts

@@ -4,6 +4,6 @@ import StoreHandler from '../store/StoreHandler';
 
 export const useSyncStore = (appProps: AppProps) => {
   useEffect(() => {
-    StoreHandler.propsUpdateHandler.onPropsUpdated(appProps);
+    void StoreHandler.propsUpdateHandler.onPropsUpdated(appProps);
   }, [appProps]);
 };

packages/internarbeidsflate-decorator-v3/src/store/EventHandler.ts

@@ -8,12 +8,19 @@ import { FnrValueManager } from './FnrValueManager';
 import { StoreProps } from './StoreHandler';
 import { SubstateHandler, SubstateHandlerProps } from './SubstateHandler';
 
+export type EventHandlerOptions = {
+  ignoreExternalFnr?: boolean | undefined;
+  ignoreExternalEnhet?: boolean | undefined;
+};
+
 export class EventHandler extends SubstateHandler {
   #webSocketWrapper?: WebSocketWrapper | undefined;
   #errorMessageManager: ErrorMessageManager;
   #fnrValueManager: FnrValueManager;
   #enhetValueManager: EnhetValueManager;
 
+  #options: EventHandlerOptions = {};
+
   constructor(
     substateProps: SubstateHandlerProps,
     fnrValueManager: FnrValueManager,
@@ -25,7 +32,14 @@ export class EventHandler extends SubstateHandler {
     this.#enhetValueManager = enhetValueManager;
     this.#errorMessageManager = errorMessageManager;
   }
-  initialize = ({ wsUrl, environment, veileder }: StoreProps) => {
+
+  initialize = ({
+    wsUrl,
+    environment,
+    veileder,
+    ignoreExternalEnhet,
+    ignoreExternalFnr,
+  }: StoreProps) => {
     this.#webSocketWrapper = new WebSocketWrapper(
       `${wsUrl}${veileder.ident}`,
       environment,
@@ -36,14 +50,17 @@ export class EventHandler extends SubstateHandler {
     );
     this.#webSocketWrapper.open();
     this.registerShutdown('websocketwrapper', this.#webSocketWrapper.close);
+
+    this.#options.ignoreExternalFnr = ignoreExternalFnr;
+    this.#options.ignoreExternalEnhet = ignoreExternalEnhet;
   };
 
   #onWSMessage = (message: MessageEvent<WebSocketMessage>) => {
     const data = message.data;
     if (data === 'NY_AKTIV_BRUKER') {
-      this.#handleFnrChangedExternally();
+      void this.#handleFnrChangedExternally();
     } else if (data === 'NY_AKTIV_ENHET') {
-      this.#handleEnhetChangedExternally();
+      void this.#handleEnhetChangedExternally();
     }
   };
 
@@ -55,6 +72,8 @@ export class EventHandler extends SubstateHandler {
   };
 
   #handleFnrChangedExternally = async () => {
+    if (this.#options.ignoreExternalFnr) return;
+
     const response = await this.contextHolderApi.getVeiledersActiveFnr();
     if (response.error || !response.data || !response.data.aktivBruker) {
       this.#errorMessageManager.addErrorMessage(
@@ -75,6 +94,8 @@ export class EventHandler extends SubstateHandler {
   };
 
   #handleEnhetChangedExternally = async () => {
+    if (this.#options.ignoreExternalEnhet) return;
+
     const response = await this.contextHolderApi.getVeiledersActiveEnhet();
     if (response.error || !response.data || !response.data.aktivEnhet) {
       this.#errorMessageManager.addErrorMessage(

packages/internarbeidsflate-decorator-v3/src/store/__test__/StoreHandler.test.ts

@@ -133,6 +133,27 @@ describe('StoreHandler test', () => {
     expect(storeHandler.state.veileder).toStrictEqual(mockMe);
   });
 
+  it('skal ignorere events fra websocket om igoreExternalFnr er true', async () => {
+    const storeHandler = new StoreHandler();
+    updateMockContext({ aktivBruker: '07063000250' });
+    storeHandler.propsUpdateHandler.onPropsUpdated({
+      enhet: '0118',
+      fnr: undefined,
+      ignoreExternalFnr: true,
+      ...defaultProps,
+    });
+    await ws.connected;
+    sendWSMessage('NY_AKTIV_BRUKER');
+    await awaitTimeout(100, 'for å la staten bli propagert');
+    expect(storeHandler.state.fnr.value).toBe(undefined);
+    expect(storeHandler.state.fnr.showModal).toBeFalsy();
+
+    updateMockContext({ aktivEnhet: '0219' });
+    sendWSMessage('NY_AKTIV_ENHET');
+    await awaitTimeout(100, 'for å la staten bli propagert');
+    expect(storeHandler.state.enhet.showModal).toBeTruthy();
+  });
+
   it('skal vise modal om bruker endrer aktiv enhet i annet vindu, gitt at det ikke er samme enhet', async () => {
     const storeHandler = new StoreHandler();
 

packages/internarbeidsflate-decorator-v3/src/types/AppProps.ts

@@ -15,6 +15,15 @@ interface DomainProps {
   onFnrChanged: (fnr?: string | null) => void;
   onLinkClick?: (link: { text: string; url: string }) => void;
   websocketUrl?: string | undefined;
+
+  ignoreExternalFnr?: boolean;
+  ignoreExternalEnhet?: boolean;
 }
 
 export interface AppProps extends DomainProps, Omit<AppState, 'open'> {}
+
+export interface DecoratorProps
+  extends Omit<AppProps, 'ignoreExternalFnr' | 'ignoreExternalEnhet'> {
+  fnrSyncMode?: 'writeOnly' | 'sync';
+  enhetSyncMode?: 'writeOnly' | 'sync';
+}