navikt · LudvigHz · May 14, 2024 · Apr 30, 2024 · May 6, 2024 · May 6, 2024
@@ -7,7 +7,7 @@ concurrency:
 
 jobs:
   deploy:
-    name: Deploy application to dev
+    name: Build and deploy
     runs-on: ubuntu-latest
     permissions:
       contents: 'read'

@@ -3,17 +3,20 @@ import { CustomServer } from './CustomServer';
 import { BadRequestResponse } from './responses/BadRequestResponse';
 import { InternalServerErrorResponse } from './responses/InternalServerErrorResponse';
 import { SuccessResponse } from './responses/SuccessResponse';
-import { mockMe } from '../internarbeidsflate-decorator-v3/src/__mocks__/mock-handlers'
+import { mockMe } from '../internarbeidsflate-decorator-v3/src/__mocks__/mock-handlers';
 import { NotFoundResponse } from './responses/NotFoundResponse';
 import { BunServerWebsocket } from './types';
 
 type Metadata = { ident: string };
 
 const serve = () => {
-  type Context = { aktivEnhet: string | undefined; aktivBruker: string | undefined };
+  type Context = {
+    aktivEnhet: string | undefined;
+    aktivBruker: string | undefined;
+  };
   const context: Context = { aktivEnhet: '0118', aktivBruker: '10108000398' };
   const clients: Record<string, BunServerWebsocket> = {};
-  const codeToFnr: Record<string, string> = {}
+  const codeToFnr: Record<string, string> = {};
 
   const app = new CustomServer();
 
@@ -37,11 +40,11 @@ const serve = () => {
   });
 
   app.get('/modiacontextholder/api/context/v2/aktivbruker', () => {
-    return new SuccessResponse({aktivBruker: context.aktivBruker });
+    return new SuccessResponse({ aktivBruker: context.aktivBruker });
   });
 
   app.get('/modiacontextholder/api/context/v2/aktivenhet', () => {
-    return new SuccessResponse({aktivEnhet: context.aktivEnhet });
+    return new SuccessResponse({ aktivEnhet: context.aktivEnhet });
   });
 
   app.get('/modiacontextholder/api/context/enhet/:enhetId', (request) => {
@@ -72,26 +75,33 @@ const serve = () => {
       await Bun.readableStreamToJSON(request.body);
 
     if (eventType === 'NY_AKTIV_BRUKER') {
-      context.aktivBruker = verdi
+      context.aktivBruker = verdi;
     } else if (eventType === 'NY_AKTIV_ENHET') {
-      context.aktivEnhet = verdi
+      context.aktivEnhet = verdi;
     }
     broadCastToClients(eventType);
 
-    return new SuccessResponse({...context});
+    return new SuccessResponse({ ...context });
+  });
+
+  app.delete('/modiacontextholder/api/context/aktivbruker', () => {
+    context.aktivBruker = undefined;
+    return new SuccessResponse({ aktivBruker: context.aktivBruker });
   });
 
   app.post('/modiacontextholder/api/fnr-code/retrieve', async (request) => {
     if (!request.body) {
       return new BadRequestResponse('No body provided');
     }
 
-    const { code }: { code: string } = await Bun.readableStreamToJSON(request.body);
+    const { code }: { code: string } = await Bun.readableStreamToJSON(
+      request.body,
+    );
 
-    const fnr = codeToFnr[code]
+    const fnr = codeToFnr[code];
 
     if (!fnr) {
-      return new NotFoundResponse()
+      return new NotFoundResponse();
     }
 
     return new SuccessResponse({ fnr, code });
@@ -102,11 +112,13 @@ const serve = () => {
       return new BadRequestResponse('No body provided');
     }
 
-    const { fnr }: { fnr: string } = await Bun.readableStreamToJSON(request.body);
+    const { fnr }: { fnr: string } = await Bun.readableStreamToJSON(
+      request.body,
+    );
 
-    const code = crypto.randomUUID()
+    const code = crypto.randomUUID();
 
-    codeToFnr[code] = fnr
+    codeToFnr[code] = fnr;
 
     return new SuccessResponse({ fnr, code });
   });

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Internarbeidsflate Decorator</title>
   </head>
   <body>
     <div id="root"></div>

@@ -17,6 +17,7 @@
   },
   "scripts": {
     "dev": "bunx --bun vite",
+    "dev:fullscreen": "VITE_DECORATOR_MODE=fullscreen bunx --bun vite",
     "build": "bunx --bun vite build",
     "build:watch": "bunx --bun vite build --watch",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -58,6 +59,7 @@
     "@navikt/ds-tailwind": "^6.4.1",
     "@navikt/ds-tokens": "^6.4.1",
     "@tanstack/query-core": "^5.29.0",
+    "classnames": "^2.5.1",
     "use-sync-external-store": "^1.2.0",
     "zustand": "^4.5.2"
   }

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import './index.css';
 import { AppProps } from './types/AppProps';
 import { useOnOutsideClick } from './hooks/useOnOutsideClick';
@@ -9,14 +9,14 @@ import ErrorMessage from './components/ErrorMessageDisplay';
 import Menu from './components/Menu';
 import { useSyncHotkeys } from './hooks/useSyncHotkeys';
 import { useHotkeys } from './hooks/useHotkeys';
-import { useEffect } from 'react';
 import NewUserModal from './components/modals/NewUserModal';
 import NewEnhetModal from './components/modals/NewEnhetModal';
 import { useSyncStore } from './hooks/useSyncStore';
 import useGlobalHandlers from './store/GlobalHandlers';
+import classNames from 'classnames';
 
 const App: React.FC<AppProps> = (props: AppProps) => {
-  const { onLinkClick } = props;
+  const { onLinkClick, isFullScreen } = props;
 
   useSyncStore(props);
   useSyncAppState(props);
@@ -31,23 +31,31 @@ const App: React.FC<AppProps> = (props: AppProps) => {
   }, [props.enableHotkeys, startListening, stopListening]);
 
   const ref = useOnOutsideClick<HTMLElement>(() =>
-    useAppState.setState({ open: false }),
+    useAppState.setState({ open: false })
   );
 
   const setHandler = useGlobalHandlers((state) => state.setHandler);
 
   useEffect(() => {
     if (onLinkClick) {
       setHandler('onLinkClick', (linkText, url) =>
-        onLinkClick({ text: linkText, url }),
+        onLinkClick({ text: linkText, url })
       );
     }
   }, [setHandler, onLinkClick]);
 
+  useEffect(() => {
+    if (props.isFullScreen) {
+      useAppState.setState({ open: true });
+    }
+  }, [props.isFullScreen]);
+
   return (
     <>
-      <div className="dekorator" data-theme="internarbeidsflatedecorator-theme">
-        <header ref={ref} className="dr-font-arial dr-text-white">
+      <div className={classNames('dekorator', { 'dr-h-screen': isFullScreen })}
+           data-theme="internarbeidsflatedecorator-theme">
+        <header ref={ref}
+                className={classNames('dr-font-arial', 'dr-text-white', { 'dr-h-full dr-flex dr-flex-col': isFullScreen })}>
           <Banner />
           <Menu />
           <ErrorMessage />

@@ -46,6 +46,8 @@ export class ContextHolderAPI extends ApiClient {
     });
   };
 
+  readonly clearFnr = () => this.delete<void>({ path: '/context/aktivbruker' });
+
   readonly getVeilederDetails = (): Promise<FetchResponse<Veileder>> => {
     return this.get<Veileder>({ path: `/decorator` });
   };

@@ -7,22 +7,26 @@ import Markup from './Markup';
 import MenuButton from './MenuButton';
 import SearchArea from './SearchArea';
 import VeilederDetails from './VeilederDetails';
+import { useAppState } from '../states/AppState';
 
 const Banner: React.FC = () => {
+  const isFullScreen = useAppState((state) => state.isFullScreen);
+
   return (
     <div className="dr-p-2 dr-bg-background dr-text-white">
       <div className="dr-max-w-full dr-mx-auto">
         <div className="dr-flex dr-flex-wrap dr-items-center dr-justify-evenly dr-gap-1">
           <AppName />
-          <div className="dr-flex dr-flex-wrap dr-flex-1 dr-gap-4 xl:dr-gap-8 dr-w-full dr-justify-center dr-items-center">
+          <div
+            className="dr-flex dr-flex-wrap dr-flex-1 dr-gap-4 xl:dr-gap-8 dr-w-full dr-justify-center dr-items-center">
             <Enhet />
             <EnhetVelger />
             <SearchArea />
             <Markup />
             <HotkeyMenuElement />
             <VeilederDetails />
           </div>
-          <MenuButton />
+          {!isFullScreen && <MenuButton />}
         </div>
       </div>
     </div>

@@ -3,22 +3,24 @@ import { useLinkHotkeys } from '../hooks/useLinkHotkeys';
 import { useAppState } from '../states/AppState';
 import StoreHandler from '../store/StoreHandler';
 import Links from './Links/Links';
+import classNames from 'classnames';
 
 const Menu: React.FC = () => {
   const isOpen = useAppState((state) => state.open);
+  const isFullScreen = useAppState((state) => state.isFullScreen);
 
   const environment = useAppState((state) => state.environment);
 
   const { fnr, aktoerId } = StoreHandler.store((state) => ({
     fnr: state.fnr.value,
-    aktoerId: '',
+    aktoerId: ''
   }));
 
   useLinkHotkeys({ environment, fnr, aktoerId });
   if (!isOpen) return null;
 
   return (
-    <div className="dr-bg-background">
+    <div className={classNames('dr-bg-background', { 'dr-h-full': isFullScreen })}>
       <Links />
     </div>
   );

@@ -11,6 +11,7 @@ export const useAppState = create<AppState>(() => ({
   showHotkeys: true,
   environment: 'q2',
   urlFormat: 'NAV_NO',
+  isFullScreen: false,
 }));
 
 export interface AppState {
@@ -24,4 +25,5 @@ export interface AppState {
   environment: Environment;
   urlFormat: UrlFormat;
   proxy?: string | undefined;
+  isFullScreen?: boolean;
 }
@@ -118,8 +118,18 @@ export class FnrValueManager extends ContextValueManager {
 
   readonly openFnrModal = () => this.openModal('fnr');
 
+  readonly clearFnrExternally = async () => {
+    const res = await this.contextHolderApi.clearFnr();
+    if (res.error) {
+      this.#errorMessageManager.addErrorMessage(
+        PredefiniertFeilmeldinger.OPPDATER_BRUKER_CONTEXT_FEILET,
+      );
+    }
+  };
+
   readonly clearFnr = () => {
     this.changeFnrLocally();
+    this.clearFnrExternally();
     this.#propsUpdateHandler.clearOldValue('fnr');
   };
 

@@ -155,17 +155,10 @@ export const fpSakUrl = (
     ? `${fpSakDomain(enironment)}/aktoer/${aktoerId}`
     : `${fpSakDomain(enironment)}`;
 
-const k9domain = (environment: Environment) =>
+const k9url = (environment: Environment) =>
   environment === 'prod'
-    ? 'https://k9-los-web.nais.adeo.no'
-    : 'https://k9-los-web.dev.adeo.no';
-const k9url = (
-  environment: Environment,
-  aktoerId?: string | undefined | null,
-) =>
-  aktoerId
-    ? `${k9domain(environment)}/aktoer/${aktoerId}`
-    : k9domain(environment);
+    ? 'https://k9-los-web.intern.nav.no'
+    : 'https://k9-los-web.intern.dev.nav.no';
 
 const arbeidssokerUrl = ({
   environment,
@@ -278,7 +271,7 @@ export const buildLinks = ({
       url: fpSakUrl(environment, aktoerId),
     },
     k9: {
-      url: k9url(environment, aktoerId),
+      url: k9url(environment),
     },
     rekrutteringsBistand: {
       url: `https://rekrutteringsbistand${naisDomain(environment)}`,

@@ -0,0 +1,26 @@
+import React from 'react';
+import Decorator from '../App';
+
+const FullScreenWrapper = () => {
+  // En minimal Decorator som viser en fullskjermvisning av applikasjonen
+  return <Decorator
+    appName="Test app"
+    enableHotkeys
+    showEnheter={true}
+    showSearchArea={true}
+    showHotkeys={true}
+    environment={'q2'}
+    urlFormat={'LOCAL'}
+    enhet={''}
+    fnr={''}
+    fetchActiveEnhetOnMount
+    fetchActiveUserOnMount
+    onEnhetChanged={() => {
+    }}
+    onFnrChanged={() => {
+    }}
+    isFullScreen={true}
+  />;
+};
+
+export default FullScreenWrapper;
@@ -1,9 +1,13 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import Wrapper from './Wrapper'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Wrapper from './Wrapper';
+import FullScreenWrapper from './FullScreenWrapper';
+
+
+const isFullscreen = import.meta.env.VITE_DECORATOR_MODE === 'fullscreen';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <Wrapper />
-  </React.StrictMode>,
-)
+    {isFullscreen ? <FullScreenWrapper /> : <Wrapper />}
+  </React.StrictMode>
+);
@@ -4,22 +4,23 @@ import react from '@vitejs/plugin-react';
 
 export default defineConfig({
     plugins: [
-      react(),
+      react()
     ],
     build: {
       cssMinify: true,
       minify: true,
       manifest: 'asset-manifest.json',
       rollupOptions: {
-        input: "src/index.ts",
-        preserveEntrySignatures: "exports-only",
+        input: 'src/index.ts',
+        preserveEntrySignatures: 'exports-only',
         // external: ["react", "react-dom"],
         output: {
-          entryFileNames: "bundle.js",
+          entryFileNames: 'bundle.js',
           // format: "iife",
           inlineDynamicImports: true,
-          assetFileNames: '[name].[ext]', 
-        },
-      },
-    },
-});
+          assetFileNames: '[name].[ext]'
+        }
+      }
+    }
+  }
+);
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,6 +46,8 @@ export class ContextHolderAPI extends ApiClient { @@
         });
       };
+      readonly clearFnr = () => this.delete<void>({ path: '/context/aktivbruker' });
       readonly getVeilederDetails = (): Promise<FetchResponse<Veileder>> => {
         return this.get<Veileder>({ path: `/decorator` });
       };
@@ Expand Down @@