Merge pull request #430 from navikt/dev

[PROD] Url fikser, ansatt.nav.no url & hotkey fikser

Author: LudvigHz

.github/workflows/main-v3.yaml

@@ -43,7 +43,7 @@ jobs:
           team: personoversikt
           source: ./packages/internarbeidsflate-decorator-v3/dist/
           destination: /internarbeidsflate-decorator-v3/dev/latest
-          no_cache_paths: 'internarbeidsflate-decorator-v3/dev/latest/dist/asset-manifest.json,internarbeidsflate-decorator-v3/dev/latest/dist/bundle.js,internarbeidsflate-decorator-v3/dev/latest/dist/index.css'
+          cache_invalidation: true
           identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
           project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
 
@@ -54,6 +54,6 @@ jobs:
           team: personoversikt
           source: ./packages/internarbeidsflate-decorator-v3/dist/
           destination: /internarbeidsflate-decorator-v3/prod/latest
-          no_cache_paths: 'internarbeidsflate-decorator-v3/prod/latest/dist/asset-manifest.json,internarbeidsflate-decorator-v3/prod/latest/dist/bundle.js,internarbeidsflate-decorator-v3/prod/latest/dist/index.css'
+          cache_invalidation: true
           identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
           project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}

README.md

@@ -99,7 +99,7 @@ export interface Markup {
   etterSokefelt?: string; // Gir muligheten for sende inn egen html som blir en del av dekoratøren
 }
 
-// Miljø. Foreløpig er kun q0 og q1 støttet.
+// Miljø
 export type Environment =
   | 'q0'
   | 'q1'
@@ -110,7 +110,7 @@ export type Environment =
   | 'local'
   | 'mock';
 
-export type UrlFormat = 'LOCAL' | 'ADEO' | 'NAV_NO'; // UrlFormat. Brukes om proxy ikke er satt.
+export type UrlFormat = 'LOCAL' | 'ADEO' | 'NAV_NO' | 'ANSATT'; // UrlFormat. Brukes om proxy ikke er satt & i url til websocket.
 ```
 
 # Henvendelser

bun.lockb

@@ -46,11 +46,11 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@navikt/aksel-icons": "^6.4.1",
-    "@navikt/ds-css": "^6.4.1",
-    "@navikt/ds-react": "^6.4.1",
-    "@navikt/ds-tailwind": "^6.4.1",
-    "@navikt/ds-tokens": "^6.4.1",
+    "@navikt/aksel-icons": "^6.8.0",
+    "@navikt/ds-css": "^6.8.0",
+    "@navikt/ds-react": "^6.8.0",
+    "@navikt/ds-tailwind": "^6.8.0",
+    "@navikt/ds-tokens": "^6.8.0",
     "@tanstack/query-core": "^5.29.0",
     "classnames": "^2.5.1",
     "use-sync-external-store": "^1.2.0",

packages/internarbeidsflate-decorator-v3/package.json

@@ -1,6 +1,5 @@
 import React from 'react';
 import AppName from './AppName';
-import Enhet from './Enhet';
 import EnhetVelger from './EnhetVelger';
 import HotkeyMenuElement from './HotkeyMenuElement';
 import Markup from './Markup';
@@ -14,8 +13,7 @@ const Banner: React.FC = () => {
       <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">
-            <Enhet />
+          <div className="dr-flex dr-flex-1 dr-gap-4 xl:dr-gap-8 dr-w-full dr-justify-center dr-items-center">
             <EnhetVelger />
             <SearchArea />
             <Markup />

packages/internarbeidsflate-decorator-v3/src/components/Banner.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { ChangeEvent, useMemo } from 'react';
 import { Select } from '@navikt/ds-react';
-import { ChangeEvent, useMemo } from 'react';
 import StoreHandler from '../store/StoreHandler';
 
 const EnhetVelger: React.FC = () => {
@@ -9,53 +8,43 @@ const EnhetVelger: React.FC = () => {
     enhetId: state.enhet.value,
   }));
 
-  const options = useMemo(() => {
-    const res: JSX.Element[] = [];
-
-    if (enheter?.length) {
-      res.push(
-        <option value="" key="velg_enheter" disabled>
-          Velg enhet
-        </option>,
-      );
-
-      for (const enhet of enheter) {
-        res.push(
-          <option
-            key={enhet.enhetId}
-            value={enhet.enhetId}
-          >{`${enhet.enhetId} ${enhet.navn}`}</option>,
-        );
-      }
-    }
-    return res;
+  const options: React.JSX.Element[] = useMemo(() => {
+    const enhetOptions =
+      enheter?.map((enhet) => (
+        <option key={enhet.enhetId} value={enhet.enhetId}>
+          {`${enhet.enhetId} ${enhet.navn}`}
+        </option>
+      )) ?? [];
+
+    return [
+      <option value="" key="velg_enhet" disabled selected>
+        Velg enhet
+      </option>,
+      ...enhetOptions,
+    ];
   }, [enheter]);
 
-  const onChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    if (!enheter) {
+  const onChange = async (e: ChangeEvent<HTMLSelectElement>) => {
+    if (!enheter?.length) {
       throw new Error('Hadde ingen enheter når veileder prøvde å endre enhet');
     }
     const value = e.currentTarget.value;
-    StoreHandler.enhetValueManager.changeEnhetLocallyAndExternally(
+    await StoreHandler.enhetValueManager.changeEnhetLocallyAndExternally(
       enheter,
       value,
     );
   };
 
-  if (!options.length || enheter?.length === 1) return null;
-
   return (
-    <>
-      <Select
-        aria-label="Velg enhet"
-        value={enhetId ?? undefined}
-        label={undefined}
-        onChange={onChange}
-        className="!dr-w-52 !dr-border !dr-border-solid !dr-border-gray-400 !dr-rounded-medium !dr-outline-none"
-      >
-        {options}
-      </Select>
-    </>
+    <Select
+      value={enhetId ?? undefined}
+      label="Velg enhet"
+      onChange={onChange}
+      hideLabel
+      className="dr-w-64"
+    >
+      {options}
+    </Select>
   );
 };
 

packages/internarbeidsflate-decorator-v3/src/components/EnhetVelger.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Button, TextField } from '@navikt/ds-react';
-import { useEffect, useRef, useState } from 'react';
 import { MagnifyingGlassIcon, XMarkIcon } from '@navikt/aksel-icons';
 import { useHotkeyState } from '../states/HotkeyState';
 import StoreHandler from '../store/StoreHandler';
@@ -87,7 +86,7 @@ const SearchArea: React.FC = () => {
 export default SearchArea;
 
 interface Config {
-  icon: JSX.Element;
+  icon: React.JSX.Element;
   label: string;
   onClick: () => void;
 }

packages/internarbeidsflate-decorator-v3/src/components/SearchArea.tsx

@@ -1,15 +1,23 @@
 import React from 'react';
 import StoreHandler from '../store/StoreHandler';
+import { BodyShort, Skeleton } from '@navikt/ds-react';
 
 const VeilederDetails: React.FC = () => {
   const veileder = StoreHandler.store((state) => state.veileder);
 
-  if (!veileder) return null;
-
   return (
-    <div>
-      <div>{veileder.ident ?? EMDASH}</div>
-      <div>{veileder.navn}</div>
+    <div className="dr-w-72">
+      {veileder ? (
+        <>
+          <BodyShort>{veileder.ident ?? EMDASH}</BodyShort>
+          <BodyShort>{veileder.navn}</BodyShort>
+        </>
+      ) : (
+        <>
+          <Skeleton variant="text" className="dr-bg-gray-400" width="40%" />
+          <Skeleton variant="text" className="dr-bg-gray-400" width="100%" />
+        </>
+      )}
     </div>
   );
 };

packages/internarbeidsflate-decorator-v3/src/components/VeilederDetails.tsx

@@ -14,8 +14,10 @@ const useAppLogic = (props: AppProps) => {
   useSyncHotkeys(props);
   const { startListening, stopListening } = useHotkeys();
 
+  const { enableHotkeys = true } = props;
+
   useEffect(() => {
-    if (props.enableHotkeys) {
+    if (enableHotkeys) {
       startListening();
     }
     return () => stopListening();

packages/internarbeidsflate-decorator-v3/src/hooks/useAppLogic.tsx

@@ -88,14 +88,13 @@ export class FnrValueManager extends ContextValueManager {
   };
 
   readonly changeFnrLocallyAndExternally = async (newFnr?: string) => {
-    const revert = this.optimisticUpdate('fnr');
+    this.optimisticUpdate('fnr');
     this.changeFnrLocally(newFnr);
     const res = await this.contextHolderApi.changeFnr(newFnr);
     if (res.error) {
       this.#errorMessageManager.addErrorMessage(
         PredefiniertFeilmeldinger.OPPDATER_BRUKER_CONTEXT_FEILET,
       );
-      revert();
     }
   };
 
@@ -127,9 +126,9 @@ export class FnrValueManager extends ContextValueManager {
     }
   };
 
-  readonly clearFnr = () => {
+  readonly clearFnr = async () => {
     this.changeFnrLocally();
-    this.clearFnrExternally();
+    await this.clearFnrExternally();
     this.#propsUpdateHandler.clearOldValue('fnr');
   };
 

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

@@ -8,4 +8,4 @@ export type Environment =
   | 'local'
   | 'mock';
 
-export type UrlFormat = 'LOCAL' | 'ADEO' | 'NAV_NO';
+export type UrlFormat = 'LOCAL' | 'ADEO' | 'NAV_NO' | 'ANSATT';

packages/internarbeidsflate-decorator-v3/src/utils/environmentUtils.ts

@@ -61,6 +61,13 @@ const naisDomain = (environment: Environment) => {
   return '.intern.dev.nav.no';
 };
 
+const ansattDomain = (environment: Environment) => {
+  if (environment === 'prod') {
+    return '.ansatt.nav.no';
+  }
+  return '.ansatt.dev.nav.no';
+};
+
 const modiaUrl = (
   fnr: string | undefined | null,
   path: string,
@@ -103,6 +110,7 @@ export const modiaContextHolderUrl = (
         environment,
       )}.adeo.no/modiacontextholder`;
     case 'NAV_NO':
+    case 'ANSATT':
       return `https://modiacontextholder${naisDomain(
         environment,
       )}/modiacontextholder`;
@@ -117,6 +125,8 @@ export const wsEventDistribusjon = (
   switch (urlFormat) {
     case 'LOCAL':
       return 'ws://localhost:4000/ws/';
+    case 'ANSATT':
+      return `wss://modiaeventdistribution${ansattDomain(environment)}/ws/`;
     default: {
       if (environment === 'q2')
         return `wss://modiaeventdistribution${naisDomain(environment)}/ws/`;