Tsf 3424 - Opprette notat i sak K9 (#4932)

* TSF-3424 - Grunnoppsett * Tailwind * Forbedret ca alt La til msw for storybook * Error states Forbedret innsending av data Forbedring av mock * Påbegynt inngang fra k9-sak Forbedret innsending av data * Bruker localstorage for å holde oversikt over uleste notater Laget visning av uleste notater * All funksjonalitet på plass * Flytter Queryprovider opp slik at det kan brukes flere steder * Tweaket på lagring av leste notater * Satt riktige versjoner av pakker * WIP: 24f3761 Merge branch 'master' into TSF-3424 * Fiks at notatvisning * feature toggle og rydding * Fikser tester * Fikser test * Separerer visning og logikk * Fikser bug i henting av data Bedre formatering av dato * tar bort tailwind * tok bort for mye tailwind --------- Co-authored-by: Thomas H. Wiberg <[email protected]>
navikt · Oct 25, 2023 · 2d8a25a · 2d8a25a
1 parent 704dd07
commit 2d8a25a
Show file tree

Hide file tree

Showing 43 changed files with 1,369 additions and 156 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -21,6 +21,7 @@ module.exports = {
     // ref: https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5
     // '@storybook/addon-essentials',
   ],
+  staticDirs: ['../public'],
 
   // reactOptions: {
   //   fastRefresh: true,
@@ -75,6 +76,11 @@ module.exports = {
         include: [PACKAGES_DIR],
         exclude: [CSS_DIR],
       },
+      {
+        test: /\.css$/,
+        use: ['postcss-loader'],
+        include: [CSS_DIR],
+      },
       {
         test: /\.less$/,
         use: [
@@ -100,7 +106,7 @@ module.exports = {
             },
           },
         ],
-        include: [CSS_DIR, NODE_MODULES],
+        include: [NODE_MODULES],
       },
       {
         test: /\.(jp|pn|sv)g$/,

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,12 +1,16 @@
-import React from 'react';
 import '@formatjs/intl-datetimeformat/polyfill-force';
-import '@formatjs/intl-datetimeformat/locale-data/nb';
 import '@formatjs/intl-numberformat/polyfill-force';
+import '@formatjs/intl-datetimeformat/locale-data/nb';
 import '@formatjs/intl-numberformat/locale-data/nb';
+import { initialize, mswLoader } from 'msw-storybook-addon';
+import React from 'react';
+import '@navikt/ds-css';
 import '@fpsak-frontend/assets/styles/global.css';
 import '@navikt/ft-plattform-komponenter/dist/style.css';
-import '@navikt/ds-css';
 
+initialize({ onUnhandledRequest: 'bypass' });
+
+export const loaders = [mswLoader];
 export const decorators = [
   Story => (
     <div style={{ margin: '40px' }}>

diff --git a/@types/externals.d.ts b/@types/externals.d.ts
@@ -1,3 +1,4 @@
 declare module '*.svg';
 declare module '*.less';
 declare module '*.css';
+declare module '*.module.css';
diff --git a/deploy/dev-fss-k9saksbehandling.yml b/deploy/dev-fss-k9saksbehandling.yml
@@ -115,3 +115,5 @@ spec:
       value: "true"
     - name: FAKTA_BEREGNING_REDESIGN
       value: "true"
+    - name: NOTAT_I_SAK
+      value: "true"
diff --git a/deploy/prod-fss-k9saksbehandling.yml b/deploy/prod-fss-k9saksbehandling.yml
@@ -115,3 +115,5 @@ spec:
       value: "false"
     - name: FAKTA_BEREGNING_REDESIGN
       value: "false"
+    - name: NOTAT_I_SAK
+      value: "false"
diff --git a/feature-toggles.json b/feature-toggles.json
@@ -74,5 +74,9 @@
   {
     "key": "FAKTA_BEREGNING_REDESIGN",
     "value": "${FAKTA_BEREGNING_REDESIGN}"
+  },
+  {
+    "key": "NOTAT_I_SAK",
+    "value": "${NOTAT_I_SAK}"
   }
 ]
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "lint:fix": "eslint --fix --cache packages --ext .ts,.tsx,.js,.jsx",
     "css:lint": "stylelint \"packages/**/*.css\"",
     "dev": "yarn dev-env-variables cross-env NODE_ENV=development APP_URL_K9FORMIDLING=http://localhost:8060/rest/dummy webpack serve --config webpack/webpack.dev.ts",
-    "dev-env-variables": "cross-env KLAGE_KABAL=true VARSELTEKST=true DOKUMENTDATA=true UNNTAKSBEHANDLING=true UTENLANDSOPPHOLD=true SOKNADPERIODESTRIPE=false TYPE_MEDISINSKE_OPPLYSNINGER_BREV=true LOS_MARKER_BEHANDLING=true LOS_MARKER_BEHANDLING_SUBMIT=true AKSJONSPUNKT_9014=true AKSJONSPUNKT_9015=true FRITEKST_REDIGERING=true FIX_SOKNADSFRIST_KALENDER_OG_READONLY=true INKLUDER_KALENDER_PILS=true FAKTA_BEREGNING_REDESIGN=true",
+    "dev-env-variables": "cross-env KLAGE_KABAL=true VARSELTEKST=true DOKUMENTDATA=true UNNTAKSBEHANDLING=true UTENLANDSOPPHOLD=true SOKNADPERIODESTRIPE=false TYPE_MEDISINSKE_OPPLYSNINGER_BREV=true LOS_MARKER_BEHANDLING=true LOS_MARKER_BEHANDLING_SUBMIT=true AKSJONSPUNKT_9014=true AKSJONSPUNKT_9015=true FRITEKST_REDIGERING=true FIX_SOKNADSFRIST_KALENDER_OG_READONLY=true INKLUDER_KALENDER_PILS=true FAKTA_BEREGNING_REDESIGN=true NOTAT_I_SAK=true",
     "dev-lokal": "cross-env NODE_ENV=development APP_URL_SAK=http://k9-sak:8080 APP_URL_K9OPPDRAG=http://k9-oppdrag:8070 APP_URL_K9FORMIDLING_DD=http://k9-formidling-dokumentdata:8294 APP_URL_K9FORMIDLING=http://k9-formidling:8290 SPLITTET_SAMMENLINGNING_BEREGNING=true webpack serve --config webpack/webpack.dev.ts",
     "dev-med-formidling": "cross-env NODE_ENV=development webpack serve --config webpack/webpack.dev.ts",
     "build": "cross-env NODE_ENV=production SENTRY_RELEASE=$(git rev-parse --short HEAD) webpack --config webpack/webpack.prod.ts",
@@ -47,7 +47,7 @@
     "@navikt/aksel-icons": "5.6.1",
     "@navikt/ds-css": "5.6.1",
     "@navikt/ds-react": "5.6.1",
-    "@navikt/ds-tailwind": "^5.5.0",
+    "@navikt/ds-tailwind": "^5.6.1",
     "@navikt/familie-endringslogg": "9.0.3",
     "@navikt/ft-plattform-komponenter": "2.3.5",
     "@popperjs/core": "2.11.8",
@@ -153,6 +153,7 @@
     "lint-staged": "13.3.0",
     "mini-css-extract-plugin": "2.7.6",
     "msw": "1.3.1",
+    "msw-storybook-addon": "^1.8.0",
     "postcss": "^8.4.30",
     "prettier": "3.0.3",
     "raf": "3.4.1",

diff --git a/packages/sak-app/package.json b/packages/sak-app/package.json
@@ -46,6 +46,7 @@
     "@k9-sak-web/sak-infosider": "1.0.0",
     "@k9-sak-web/sak-meldinger": "1.0.0",
     "@k9-sak-web/sak-meny-marker-behandling": "1.0.0",
+    "@k9-sak-web/sak-notat": "1.0.0",
     "@k9-sak-web/sak-soknadsperiodestripe": "1.0.0",
     "@k9-sak-web/types": "1.0.0",
     "@navikt/ds-react": "5.6.1",

diff --git a/packages/sak-app/src/app/AppIndex.tsx b/packages/sak-app/src/app/AppIndex.tsx
@@ -22,7 +22,6 @@ import '@navikt/ft-form-hooks/dist/style.css';
 import '@navikt/ft-plattform-komponenter/dist/style.css';
 import '@navikt/ft-prosess-beregningsgrunnlag/dist/style.css';
 import '@navikt/ft-ui-komponenter/dist/style.css';
-
 import 'nav-datovelger/lib/styles/main.css';
 import 'nav-frontend-alertstriper-style/dist/main.css';
 import 'nav-frontend-chevron-style/dist/main.css';

diff --git a/packages/sak-app/src/behandlingsupport/BehandlingSupportIndex.spec.tsx b/packages/sak-app/src/behandlingsupport/BehandlingSupportIndex.spec.tsx
@@ -1,16 +1,17 @@
+import { screen } from '@testing-library/react';
 import React from 'react';
-import sinon, { SinonStub } from 'sinon';
-import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+import sinon, { SinonStub } from 'sinon';
 
-import { BehandlingAppKontekst, Fagsak } from '@k9-sak-web/types';
 import behandlingStatus from '@fpsak-frontend/kodeverk/src/behandlingStatus';
 import behandlingType from '@fpsak-frontend/kodeverk/src/behandlingType';
+import { BehandlingAppKontekst, Fagsak } from '@k9-sak-web/types';
 
-import { VergeBehandlingmenyValg } from '../behandling/behandlingRettigheterTsType';
+import { renderWithReactQueryClient } from '@fpsak-frontend/utils-test/src/test-utils';
 import * as useTrackRouteParam from '../app/useTrackRouteParam';
+import { VergeBehandlingmenyValg } from '../behandling/behandlingRettigheterTsType';
+import { K9sakApiKeys, requestApi } from '../data/k9sakApi';
 import BehandlingSupportIndex, { hentSynligePaneler, hentValgbarePaneler } from './BehandlingSupportIndex';
-import { requestApi, K9sakApiKeys } from '../data/k9sakApi';
 
 describe('<BehandlingSupportIndex>', () => {
   const fagsak = {
@@ -66,15 +67,16 @@ describe('<BehandlingSupportIndex>', () => {
     requestApi.mock(K9sakApiKeys.HISTORY_TILBAKE, []);
     requestApi.mock(K9sakApiKeys.HISTORY_KLAGE, []);
 
-    render(
+    renderWithReactQueryClient(
       <MemoryRouter>
         <BehandlingSupportIndex
           fagsak={fagsak as Fagsak}
           alleBehandlinger={[behandling] as BehandlingAppKontekst[]}
           behandlingId={1}
           behandlingVersjon={2}
+          navAnsatt={navAnsatt}
         />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
 
     expect(screen.queryAllByTestId('TabMenyKnapp').length).toBe(3);

diff --git a/packages/sak-app/src/behandlingsupport/BehandlingSupportIndex.tsx b/packages/sak-app/src/behandlingsupport/BehandlingSupportIndex.tsx
@@ -1,25 +1,40 @@
-import React, { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
-
 import SupportMenySakIndex, { SupportTabs } from '@fpsak-frontend/sak-support-meny';
-import { ArbeidsgiverOpplysningerWrapper, BehandlingAppKontekst, Fagsak, Personopplysninger } from '@k9-sak-web/types';
-
+import { httpErrorHandler, useLocalStorage } from '@fpsak-frontend/utils';
+import { useRestApiErrorDispatcher } from '@k9-sak-web/rest-api-hooks';
+import {
+  ArbeidsgiverOpplysningerWrapper,
+  BehandlingAppKontekst,
+  Fagsak,
+  FeatureToggles,
+  NavAnsatt,
+  Personopplysninger,
+} from '@k9-sak-web/types';
+import axios from 'axios';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import { useNavigate } from 'react-router-dom';
 import { getSupportPanelLocationCreator } from '../app/paths';
 import useTrackRouteParam from '../app/useTrackRouteParam';
 import BehandlingRettigheter from '../behandling/behandlingRettigheterTsType';
 import styles from './behandlingSupportIndex.module.css';
 import DokumentIndex from './dokument/DokumentIndex';
 import HistorikkIndex from './historikk/HistorikkIndex';
 import MeldingIndex from './melding/MeldingIndex';
+import NotaterIndex from './notater/NotaterIndex';
 import TotrinnskontrollIndex from './totrinnskontroll/TotrinnskontrollIndex';
 
-export const hentSynligePaneler = (behandlingRettigheter?: BehandlingRettigheter): string[] =>
+export const hentSynligePaneler = (
+  behandlingRettigheter?: BehandlingRettigheter,
+  featureToggles?: FeatureToggles,
+): string[] =>
   Object.values(SupportTabs).filter(supportPanel => {
     switch (supportPanel) {
       case SupportTabs.TIL_BESLUTTER:
         return behandlingRettigheter && behandlingRettigheter.behandlingTilGodkjenning;
       case SupportTabs.FRA_BESLUTTER:
         return behandlingRettigheter && behandlingRettigheter.behandlingFraBeslutter;
+      case SupportTabs.NOTATER:
+        return featureToggles?.NOTAT_I_SAK;
       default:
         return true;
     }
@@ -45,6 +60,8 @@ interface OwnProps {
   behandlingRettigheter?: BehandlingRettigheter;
   personopplysninger?: Personopplysninger;
   arbeidsgiverOpplysninger?: ArbeidsgiverOpplysningerWrapper;
+  navAnsatt: NavAnsatt;
+  featureToggles?: FeatureToggles;
 }
 
 /**
@@ -61,7 +78,39 @@ const BehandlingSupportIndex = ({
   behandlingRettigheter,
   personopplysninger,
   arbeidsgiverOpplysninger,
+  navAnsatt,
+  featureToggles,
 }: OwnProps) => {
+  const { addErrorMessage } = useRestApiErrorDispatcher();
+  const [antallUlesteNotater, setAntallUlesteNotater] = useState(0);
+  const [lesteNotater] = useLocalStorage('lesteNotater', []);
+
+  const getNotater = (signal: AbortSignal) => {
+    axios
+      .get(`/k9/sak/api/notat`, {
+        signal,
+        params: {
+          saksnummer: fagsak.saksnummer,
+        },
+      })
+      .then(response => {
+        const ulesteNotater = response.data.filter(
+          notat => lesteNotater.findIndex(lestNotatId => lestNotatId === notat.notatId) === -1,
+        );
+        setAntallUlesteNotater(ulesteNotater.length);
+      })
+      .catch(error => {
+        httpErrorHandler(error?.response?.status, addErrorMessage, error?.response?.headers?.location);
+      });
+  };
+  const notaterQueryKey = ['notater', fagsak?.saksnummer];
+  useQuery({
+    queryKey: notaterQueryKey,
+    queryFn: ({ signal }) => getNotater(signal),
+    enabled: featureToggles?.NOTAT_I_SAK && !!fagsak,
+    refetchOnWindowFocus: false,
+  });
+
   const { selected: valgtSupportPanel, location } = useTrackRouteParam<string>({
     paramName: 'stotte',
     isQueryParam: true,
@@ -74,7 +123,10 @@ const BehandlingSupportIndex = ({
   const erPaVent = behandling ? behandling.behandlingPaaVent : false;
   const erSendMeldingRelevant = fagsak && !erPaVent;
 
-  const synligeSupportPaneler = useMemo(() => hentSynligePaneler(behandlingRettigheter), [behandlingRettigheter]);
+  const synligeSupportPaneler = useMemo(
+    () => hentSynligePaneler(behandlingRettigheter, featureToggles),
+    [behandlingRettigheter, featureToggles],
+  );
   const valgbareSupportPaneler = useMemo(
     () => hentValgbarePaneler(synligeSupportPaneler, erSendMeldingRelevant, behandlingRettigheter),
     [synligeSupportPaneler, erSendMeldingRelevant, behandlingRettigheter],
@@ -102,6 +154,7 @@ const BehandlingSupportIndex = ({
           valgbareTabs={valgbareSupportPaneler}
           valgtIndex={synligeSupportPaneler.findIndex(p => p === aktivtSupportPanel)}
           onClick={changeRouteCallback}
+          antallUlesteNotater={antallUlesteNotater}
         />
       </div>
       <div className={aktivtSupportPanel === SupportTabs.HISTORIKK ? styles.containerHistorikk : styles.container}>
@@ -139,6 +192,15 @@ const BehandlingSupportIndex = ({
             behandlingUuid={behandling?.uuid}
           />
         )}
+        {aktivtSupportPanel === SupportTabs.NOTATER && featureToggles?.NOTAT_I_SAK && (
+          <NotaterIndex
+            saksnummer={fagsak.saksnummer}
+            behandlingId={behandlingId}
+            behandlingVersjon={behandlingVersjon}
+            fagsakPerson={fagsak.person}
+            navAnsatt={navAnsatt}
+          />
+        )}
       </div>
     </>
   );

diff --git a/packages/sak-app/src/behandlingsupport/notater/NotaterIndex.tsx b/packages/sak-app/src/behandlingsupport/notater/NotaterIndex.tsx
@@ -0,0 +1,25 @@
+import { LoadingPanel, requireProps } from '@fpsak-frontend/shared-components';
+import Notater from '@k9-sak-web/sak-notat';
+import { FagsakPerson, NavAnsatt } from '@k9-sak-web/types';
+import React from 'react';
+
+interface OwnProps {
+  saksnummer: string;
+  behandlingId?: number;
+  behandlingVersjon?: number;
+  fagsakPerson?: FagsakPerson;
+  navAnsatt: NavAnsatt;
+}
+
+const EMPTY_ARRAY = [];
+
+/**
+ * NotaterIndex
+ *
+ * Container komponent. Har ansvar for å vise notater i saken.
+ */
+export const NotaterIndex = ({ saksnummer, navAnsatt }: OwnProps) => (
+  <Notater fagsakId={saksnummer} navAnsatt={navAnsatt} />
+);
+
+export default requireProps(['saksnummer'], <LoadingPanel />)(NotaterIndex);
diff --git a/packages/sak-app/src/fagsak/FagsakIndex.spec.tsx b/packages/sak-app/src/fagsak/FagsakIndex.spec.tsx
@@ -74,6 +74,7 @@ describe('<FagsakIndex>', () => {
     requestApi.mock(K9sakApiKeys.HENT_SAKSBEHANDLERE, {});
     requestApi.mock(K9sakApiKeys.FEATURE_TOGGLE, []);
     requestApi.mock(K9sakApiKeys.LOS_HENTE_MERKNAD, []);
+    requestApi.mock(K9sakApiKeys.NAV_ANSATT, {});
 
     const wrapper = shallow(<FagsakIndex />);
 

diff --git a/packages/sak-app/src/fagsak/FagsakIndex.tsx b/packages/sak-app/src/fagsak/FagsakIndex.tsx
@@ -19,13 +19,15 @@ import {
   Kodeverk,
   KodeverkMedNavn,
   MerknadFraLos,
+  NavAnsatt,
   Personopplysninger,
 } from '@k9-sak-web/types';
 import OvergangFraInfotrygd from '@k9-sak-web/types/src/overgangFraInfotrygd';
 import RelatertFagsak from '@k9-sak-web/types/src/relatertFagsak';
 import React, { useCallback, useMemo, useState } from 'react';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { QueryClient, QueryClientProvider } from 'react-query';
 import {
   behandlingerRoutePath,
   erBehandlingValgt,
@@ -60,6 +62,8 @@ const erOmsorgspenger = (fagsak: Fagsak) =>
     fagsakYtelseType.OMSORGSPENGER_MIDLERTIDIG_ALENE,
   ].includes(fagsak?.sakstype?.kode);
 
+const queryClient = new QueryClient();
+
 /**
  * FagsakIndex
  *
@@ -207,6 +211,8 @@ const FagsakIndex = () => {
     },
   );
 
+  const navAnsatt = restApiHooks.useGlobalStateRestApiData<NavAnsatt>(K9sakApiKeys.NAV_ANSATT);
+
   const erHastesak = merknaderFraLos && merknaderFraLos.merknadKoder?.includes(Merknadkode.HASTESAK);
 
   if (!fagsak) {
@@ -273,15 +279,19 @@ const FagsakIndex = () => {
           }
 
           return (
-            <BehandlingSupportIndex
-              fagsak={fagsak}
-              alleBehandlinger={alleBehandlinger}
-              behandlingId={behandlingId}
-              behandlingVersjon={behandlingVersjon}
-              behandlingRettigheter={behandlingRettigheter}
-              personopplysninger={behandlingPersonopplysninger}
-              arbeidsgiverOpplysninger={arbeidsgiverOpplysninger}
-            />
+            <QueryClientProvider client={queryClient}>
+              <BehandlingSupportIndex
+                fagsak={fagsak}
+                alleBehandlinger={alleBehandlinger}
+                behandlingId={behandlingId}
+                behandlingVersjon={behandlingVersjon}
+                behandlingRettigheter={behandlingRettigheter}
+                personopplysninger={behandlingPersonopplysninger}
+                arbeidsgiverOpplysninger={arbeidsgiverOpplysninger}
+                navAnsatt={navAnsatt}
+                featureToggles={featureToggles}
+              />
+            </QueryClientProvider>
           );
         }}
         visittkortContent={() => {