From 6707a819ca5bd83bff673b10bc3c0ae18b4b85ee Mon Sep 17 00:00:00 2001
From: Hallvard Andreas Stark
 <57254397+hallvardastark@users.noreply.github.com>
Date: Fri, 8 Nov 2024 13:48:01 +0100
Subject: [PATCH] Setter inputfelter i lesevisning ved read only (#6801)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Setter inputfelter i lesevisning ved read only

* Sender ned props for alle relevante ytelser

* Gjør at man slipper å trykke på rediger for å se vurdering
---
 .../src/components/Uttak.tsx                  |  7 +++---
 .../UttakProsessStegPanelDef.tsx              |  5 ++--
 .../src/components/Uttak.tsx                  |  7 +++---
 .../UttakProsessStegPanelDef.tsx              |  7 +++---
 .../src/components/Uttak.tsx                  | 11 ++++----
 .../UttakProsessStegPanelDef.tsx              |  5 ++--
 .../src/types/ContainerContract.ts            |  5 ++--
 .../prosess-uttak/src/ui/Uttak.stories.tsx    |  1 +
 .../prosess-uttak/src/ui/UttakContainer.tsx   |  8 ++++--
 .../UttaksperiodeListe.tsx                    |  5 ++--
 .../ui/components/vurderDato/VurderDato.tsx   |  9 ++++---
 .../vurderDato/VurderDatoAksjonspunkt.tsx     | 25 +++++++++++--------
 12 files changed, 57 insertions(+), 38 deletions(-)

diff --git a/packages/behandling-opplaeringspenger/src/components/Uttak.tsx b/packages/behandling-opplaeringspenger/src/components/Uttak.tsx
index 5f9bb3315a..eb07bae5e7 100644
--- a/packages/behandling-opplaeringspenger/src/components/Uttak.tsx
+++ b/packages/behandling-opplaeringspenger/src/components/Uttak.tsx
@@ -1,9 +1,7 @@
-import React from 'react';
-
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import aksjonspunktStatus from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus';
-import { Aksjonspunkt, AlleKodeverk, ArbeidsgiverOpplysningerPerId } from '@k9-sak-web/types';
 import { Uttak } from '@k9-sak-web/prosess-uttak';
+import { Aksjonspunkt, AlleKodeverk, ArbeidsgiverOpplysningerPerId } from '@k9-sak-web/types';
 
 interface UttakProps {
   uuid: string;
@@ -15,6 +13,7 @@ interface UttakProps {
   alleKodeverk: AlleKodeverk;
   submitCallback: (data: { kode: string; begrunnelse: string; virkningsdato: string }[]) => void;
   virkningsdatoUttakNyeRegler?: string;
+  readOnly: boolean;
 }
 
 export default ({
@@ -27,6 +26,7 @@ export default ({
   alleKodeverk,
   submitCallback,
   virkningsdatoUttakNyeRegler,
+  readOnly,
 }: UttakProps) => {
   const relevanteAksjonspunkter = [aksjonspunktCodes.VENT_ANNEN_PSB_SAK, aksjonspunktCodes.VURDER_DATO_NY_REGEL_UTTAK];
   const funnedeRelevanteAksjonspunkter = aksjonspunkter.filter(aksjonspunkt =>
@@ -53,6 +53,7 @@ export default ({
         løsAksjonspunktVurderDatoNyRegelUttak,
         virkningsdatoUttakNyeRegler,
         erOverstyrer: false, // Overstyring er ikke implementert for Pleiepenger
+        readOnly,
       }}
     />
   );
diff --git a/packages/behandling-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx b/packages/behandling-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx
index 3a4f329ac1..738de8a4d0 100644
--- a/packages/behandling-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx
+++ b/packages/behandling-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx
@@ -1,8 +1,7 @@
+import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
 import { ProsessStegDef, ProsessStegPanelDef } from '@k9-sak-web/behandling-felles';
 import { prosessStegCodes } from '@k9-sak-web/konstanter';
-import React from 'react';
-import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import Uttak from '../../components/Uttak';
 import { OpplaeringspengerBehandlingApiKeys } from '../../data/opplaeringspengerBehandlingApi';
 
@@ -16,6 +15,7 @@ class PanelDef extends ProsessStegPanelDef {
     alleKodeverk,
     submitCallback,
     virkningsdatoUttakNyeRegler,
+    isReadOnly,
   }) => (
     <Uttak
       uuid={behandling.uuid}
@@ -26,6 +26,7 @@ class PanelDef extends ProsessStegPanelDef {
       alleKodeverk={alleKodeverk}
       submitCallback={submitCallback}
       virkningsdatoUttakNyeRegler={virkningsdatoUttakNyeRegler}
+      readOnly={isReadOnly}
     />
   );
 
diff --git a/packages/behandling-pleiepenger-sluttfase/src/components/Uttak.tsx b/packages/behandling-pleiepenger-sluttfase/src/components/Uttak.tsx
index 37912287e9..1db564ae8e 100644
--- a/packages/behandling-pleiepenger-sluttfase/src/components/Uttak.tsx
+++ b/packages/behandling-pleiepenger-sluttfase/src/components/Uttak.tsx
@@ -1,9 +1,7 @@
-import React from 'react';
-
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import aksjonspunktStatus from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus';
-import { Aksjonspunkt, AlleKodeverk, ArbeidsgiverOpplysningerPerId } from '@k9-sak-web/types';
 import { Uttak } from '@k9-sak-web/prosess-uttak';
+import { Aksjonspunkt, AlleKodeverk, ArbeidsgiverOpplysningerPerId } from '@k9-sak-web/types';
 
 interface UttakProps {
   uuid: string;
@@ -16,6 +14,7 @@ interface UttakProps {
   erFagytelsetypeLivetsSluttfase: boolean;
   submitCallback: (data: { kode: string; begrunnelse: string; virkningsdato: string }[]) => void;
   virkningsdatoUttakNyeRegler?: string;
+  readOnly: boolean;
 }
 
 export default ({
@@ -29,6 +28,7 @@ export default ({
   erFagytelsetypeLivetsSluttfase,
   submitCallback,
   virkningsdatoUttakNyeRegler,
+  readOnly,
 }: UttakProps) => {
   const relevanteAksjonspunkter = [aksjonspunktCodes.VENT_ANNEN_PSB_SAK, aksjonspunktCodes.VURDER_DATO_NY_REGEL_UTTAK];
   const funnedeRelevanteAksjonspunkter = aksjonspunkter.filter(aksjonspunkt =>
@@ -56,6 +56,7 @@ export default ({
         virkningsdatoUttakNyeRegler,
         aksjonspunkter: funnedeRelevanteAksjonspunkter,
         erOverstyrer: false, // Overstyring er ikke implementert for PILS
+        readOnly,
       }}
     />
   );
diff --git a/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx b/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx
index 7c110ae0ea..10598c695b 100644
--- a/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx
+++ b/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx
@@ -1,9 +1,8 @@
+import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
+import fagsakYtelseType from '@fpsak-frontend/kodeverk/src/fagsakYtelseType';
 import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
 import { ProsessStegDef, ProsessStegPanelDef } from '@k9-sak-web/behandling-felles';
 import { prosessStegCodes } from '@k9-sak-web/konstanter';
-import React from 'react';
-import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
-import fagsakYtelseType from '@fpsak-frontend/kodeverk/src/fagsakYtelseType';
 import AntallDagerLivetsSluttfaseIndex from '@k9-sak-web/prosess-uttak-antall-dager-sluttfase';
 import Uttak from '../../components/Uttak';
 import { PleiepengerSluttfaseBehandlingApiKeys } from '../../data/pleiepengerSluttfaseBehandlingApi';
@@ -20,6 +19,7 @@ class PanelDef extends ProsessStegPanelDef {
     erFagytelsetypeLivetsSluttfase,
     submitCallback,
     virkningsdatoUttakNyeRegler,
+    isReadOnly,
   }) => (
     <>
       <AntallDagerLivetsSluttfaseIndex kvoteInfo={kvoteInfo} />
@@ -33,6 +33,7 @@ class PanelDef extends ProsessStegPanelDef {
         erFagytelsetypeLivetsSluttfase={erFagytelsetypeLivetsSluttfase}
         submitCallback={submitCallback}
         virkningsdatoUttakNyeRegler={virkningsdatoUttakNyeRegler}
+        readOnly={isReadOnly}
       />
     </>
   );
diff --git a/packages/behandling-pleiepenger/src/components/Uttak.tsx b/packages/behandling-pleiepenger/src/components/Uttak.tsx
index ec78d95e92..1a8910471c 100644
--- a/packages/behandling-pleiepenger/src/components/Uttak.tsx
+++ b/packages/behandling-pleiepenger/src/components/Uttak.tsx
@@ -1,12 +1,10 @@
-import React from 'react';
-
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import aksjonspunktStatus from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus';
-import { Aksjonspunkt, AlleKodeverk, ArbeidsgiverOpplysningerPerId, Behandling } from '@k9-sak-web/types';
-import { Uttak } from '@k9-sak-web/prosess-uttak';
-import { useRestApiErrorDispatcher } from '@k9-sak-web/rest-api-hooks';
 import { findEndpointsForMicrofrontend, httpErrorHandler } from '@fpsak-frontend/utils';
 import { VilkarResultPicker } from '@k9-sak-web/prosess-felles';
+import { Uttak } from '@k9-sak-web/prosess-uttak';
+import { useRestApiErrorDispatcher } from '@k9-sak-web/rest-api-hooks';
+import { Aksjonspunkt, AlleKodeverk, ArbeidsgiverOpplysningerPerId, Behandling } from '@k9-sak-web/types';
 import { OverstyringUttakRequest } from '../types';
 
 interface UttakProps {
@@ -23,6 +21,7 @@ interface UttakProps {
   lagreOverstyringUttak: (values: any) => void;
   relevanteAksjonspunkter: string[];
   erOverstyrer: boolean;
+  readOnly: boolean;
 }
 
 export default ({
@@ -39,6 +38,7 @@ export default ({
   lagreOverstyringUttak,
   relevanteAksjonspunkter,
   erOverstyrer,
+  readOnly,
 }: UttakProps) => {
   const { versjon, links, status: behandlingStatus } = behandling;
   const { addErrorMessage } = useRestApiErrorDispatcher();
@@ -86,6 +86,7 @@ export default ({
         versjon,
         erOverstyrer,
         status: behandlingStatus.kode,
+        readOnly,
       }}
     />
   );
diff --git a/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx b/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx
index 422e8407ed..114b98c121 100644
--- a/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx
+++ b/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx
@@ -1,8 +1,7 @@
+import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
 import { ProsessStegDef, ProsessStegPanelDef } from '@k9-sak-web/behandling-felles';
 import { prosessStegCodes } from '@k9-sak-web/konstanter';
-import React from 'react';
-import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import Uttak from '../../components/Uttak';
 import { PleiepengerBehandlingApiKeys } from '../../data/pleiepengerBehandlingApi';
 
@@ -20,6 +19,7 @@ class PanelDef extends ProsessStegPanelDef {
     virkningsdatoUttakNyeRegler,
     relevanteAksjonspunkter,
     erOverstyrer,
+    isReadOnly,
   }) => (
     <Uttak
       uuid={behandling.uuid}
@@ -35,6 +35,7 @@ class PanelDef extends ProsessStegPanelDef {
       virkningsdatoUttakNyeRegler={virkningsdatoUttakNyeRegler}
       relevanteAksjonspunkter={relevanteAksjonspunkter}
       erOverstyrer={erOverstyrer}
+      readOnly={isReadOnly}
     />
   );
 
diff --git a/packages/prosess-uttak/src/types/ContainerContract.ts b/packages/prosess-uttak/src/types/ContainerContract.ts
index 0810228968..26c514ee0c 100644
--- a/packages/prosess-uttak/src/types/ContainerContract.ts
+++ b/packages/prosess-uttak/src/types/ContainerContract.ts
@@ -1,8 +1,8 @@
-import { Aksjonspunkt } from '@k9-sak-web/types';
 import { OverstyringUttakRequest } from '@k9-sak-web/behandling-pleiepenger';
-import Uttaksperioder from './Uttaksperioder';
+import { Aksjonspunkt } from '@k9-sak-web/types';
 import ArbeidsgiverOpplysninger from './ArbeidsgiverOpplysninger';
 import KodeverkMedNavn from './kodeverkMedNavnTsType';
+import Uttaksperioder from './Uttaksperioder';
 
 interface ContainerContract {
   httpErrorHandler?: (status: number, locationHeader?: string) => void;
@@ -31,6 +31,7 @@ interface ContainerContract {
   versjon?: number;
   erOverstyrer?: boolean;
   status?: string | false;
+  readOnly: boolean;
 }
 
 export default ContainerContract;
diff --git a/packages/prosess-uttak/src/ui/Uttak.stories.tsx b/packages/prosess-uttak/src/ui/Uttak.stories.tsx
index 3ea41fd994..18488a4acd 100644
--- a/packages/prosess-uttak/src/ui/Uttak.stories.tsx
+++ b/packages/prosess-uttak/src/ui/Uttak.stories.tsx
@@ -205,6 +205,7 @@ export const Uttak: Story = {
       erFagytelsetypeLivetsSluttfase: false,
       løsAksjonspunktVurderDatoNyRegelUttak: undefined,
       virkningsdatoUttakNyeRegler: '',
+      readOnly: false,
     },
   },
 };
diff --git a/packages/prosess-uttak/src/ui/UttakContainer.tsx b/packages/prosess-uttak/src/ui/UttakContainer.tsx
index 50374f7fc9..60484852e3 100644
--- a/packages/prosess-uttak/src/ui/UttakContainer.tsx
+++ b/packages/prosess-uttak/src/ui/UttakContainer.tsx
@@ -19,7 +19,7 @@ interface MainComponentProps {
 }
 
 const UttakContainer = ({ containerData }: MainComponentProps): JSX.Element => {
-  const { uttaksperioder, aksjonspunktkoder, aksjonspunkter, virkningsdatoUttakNyeRegler, erOverstyrer } =
+  const { uttaksperioder, aksjonspunktkoder, aksjonspunkter, virkningsdatoUttakNyeRegler, erOverstyrer, readOnly } =
     containerData;
   const [redigerVirkningsdato, setRedigervirkningsdato] = React.useState<boolean>(false);
   const aksjonspunktVurderDato = aksjonspunkter?.find(ap => ap.definisjon.kode === aksjonspunktVurderDatoKode);
@@ -52,7 +52,9 @@ const UttakContainer = ({ containerData }: MainComponentProps): JSX.Element => {
 
       <UtsattePerioderStripe />
       {/* Allerede løst og har klikket rediger, eller har uløst aksjonspunkt */}
-      {((virkningsdatoUttakNyeRegler && redigerVirkningsdato) || harAksjonspunktVurderDatoMedStatusOpprettet) && (
+      {((virkningsdatoUttakNyeRegler && redigerVirkningsdato) ||
+        harAksjonspunktVurderDatoMedStatusOpprettet ||
+        readOnly) && (
         <VurderDato
           avbryt={
             virkningsdatoUttakNyeRegler && redigerVirkningsdato ? () => setRedigervirkningsdato(false) : undefined
@@ -61,6 +63,7 @@ const UttakContainer = ({ containerData }: MainComponentProps): JSX.Element => {
             begrunnelse: aksjonspunktVurderDato?.begrunnelse,
             virkningsdato: virkningsdatoUttakNyeRegler,
           }}
+          readOnly={readOnly}
         />
       )}
       {!harVentAnnenPSBSakAksjonspunkt && (
@@ -68,6 +71,7 @@ const UttakContainer = ({ containerData }: MainComponentProps): JSX.Element => {
           uttaksperioder={lagUttaksperiodeliste(uttaksperioder)}
           redigerVirkningsdatoFunc={() => setRedigervirkningsdato(true)}
           redigerVirkningsdato={redigerVirkningsdato}
+          readOnly={readOnly}
         />
       )}
     </ContainerContext.Provider>
diff --git a/packages/prosess-uttak/src/ui/components/uttaksperiode-liste/UttaksperiodeListe.tsx b/packages/prosess-uttak/src/ui/components/uttaksperiode-liste/UttaksperiodeListe.tsx
index 5bdf24444c..838cd565fd 100644
--- a/packages/prosess-uttak/src/ui/components/uttaksperiode-liste/UttaksperiodeListe.tsx
+++ b/packages/prosess-uttak/src/ui/components/uttaksperiode-liste/UttaksperiodeListe.tsx
@@ -11,6 +11,7 @@ interface UttaksperiodeListeProps {
   uttaksperioder: Uttaksperiode[];
   redigerVirkningsdatoFunc: () => void;
   redigerVirkningsdato: boolean;
+  readOnly: boolean;
 }
 
 const splitUttakByDate = (
@@ -52,7 +53,7 @@ const UttaksperiodeListe = (props: UttaksperiodeListeProps): JSX.Element => {
     virkningsdatoUttakNyeRegler,
     status = false,
   } = React.useContext(ContainerContext);
-  const { uttaksperioder, redigerVirkningsdatoFunc, redigerVirkningsdato } = props;
+  const { uttaksperioder, redigerVirkningsdatoFunc, redigerVirkningsdato, readOnly } = props;
 
   const [before, afterOrCovering] = splitUttakByDate(uttaksperioder, virkningsdatoUttakNyeRegler);
 
@@ -111,7 +112,7 @@ const UttaksperiodeListe = (props: UttaksperiodeListeProps): JSX.Element => {
                         size="small"
                         className={styles.redigerDato}
                         onClick={redigerVirkningsdatoFunc}
-                        disabled={status === behandlingStatus.AVSLUTTET}
+                        disabled={status === behandlingStatus.AVSLUTTET || readOnly}
                       >
                         Rediger
                       </Button>
diff --git a/packages/prosess-uttak/src/ui/components/vurderDato/VurderDato.tsx b/packages/prosess-uttak/src/ui/components/vurderDato/VurderDato.tsx
index dbbb381a12..7df6c4e4f6 100644
--- a/packages/prosess-uttak/src/ui/components/vurderDato/VurderDato.tsx
+++ b/packages/prosess-uttak/src/ui/components/vurderDato/VurderDato.tsx
@@ -1,7 +1,7 @@
 import { Accordion, Alert, BodyLong, Label } from '@navikt/ds-react';
-import React, { useEffect } from 'react';
-import VurderDatoAksjonspunkt from './VurderDatoAksjonspunkt';
+import { useEffect } from 'react';
 import styles from './VurderDato.module.css';
+import VurderDatoAksjonspunkt from './VurderDatoAksjonspunkt';
 
 interface Props {
   avbryt?: () => void;
@@ -9,6 +9,7 @@ interface Props {
     virkningsdato: string;
     begrunnelse: string;
   };
+  readOnly: boolean;
 }
 
 // eslint-disable-next-line consistent-return
@@ -27,7 +28,7 @@ const scrollToVurderDatoContainer = () => {
     };
   }
 };
-const VurderDato = ({ avbryt, initialValues }: Props) => {
+const VurderDato = ({ avbryt, initialValues, readOnly }: Props) => {
   useEffect(() => {
     // avbryt er kun definert når vi skal redigere et løst aksjonspunkt
     if (typeof avbryt === 'function') {
@@ -73,7 +74,7 @@ const VurderDato = ({ avbryt, initialValues }: Props) => {
           </Accordion.Item>
         </Accordion>
       </Alert>
-      <VurderDatoAksjonspunkt avbryt={avbryt} initialValues={initialValues} />
+      <VurderDatoAksjonspunkt avbryt={avbryt} initialValues={initialValues} readOnly={readOnly} />
     </div>
   );
 };
diff --git a/packages/prosess-uttak/src/ui/components/vurderDato/VurderDatoAksjonspunkt.tsx b/packages/prosess-uttak/src/ui/components/vurderDato/VurderDatoAksjonspunkt.tsx
index 41881fa806..7a6d21b46b 100644
--- a/packages/prosess-uttak/src/ui/components/vurderDato/VurderDatoAksjonspunkt.tsx
+++ b/packages/prosess-uttak/src/ui/components/vurderDato/VurderDatoAksjonspunkt.tsx
@@ -17,9 +17,10 @@ interface Props {
     virkningsdato: string;
     begrunnelse: string;
   };
+  readOnly: boolean;
 }
 
-const VurderDatoAksjonspunkt = ({ avbryt, initialValues }: Props) => {
+const VurderDatoAksjonspunkt = ({ avbryt, initialValues, readOnly }: Props) => {
   const { løsAksjonspunktVurderDatoNyRegelUttak } = React.useContext(ContainerContext);
   const formMethods = useForm<FormData>({
     defaultValues: initialValues,
@@ -39,6 +40,7 @@ const VurderDatoAksjonspunkt = ({ avbryt, initialValues }: Props) => {
           fromDate={new Date('1 Jan 2019')}
           toDate={new Date('31 Dec 2025')}
           validate={[required, hasValidDate]}
+          isReadOnly={readOnly}
         />
         <TextAreaField
           name="begrunnelse"
@@ -46,17 +48,20 @@ const VurderDatoAksjonspunkt = ({ avbryt, initialValues }: Props) => {
           size="small"
           maxLength={1500}
           validate={[required, minLength(5), maxLength(1500)]}
+          readOnly={readOnly}
         />
-        <div className={styles.knapper}>
-          <Button size="small" type="submit" className={styles.bekreft}>
-            Bekreft og fortsett
-          </Button>
-          {avbryt && (
-            <Button variant="secondary" type="button" size="small" onClick={avbryt}>
-              Avbryt
+        {!readOnly && (
+          <div className={styles.knapper}>
+            <Button size="small" type="submit" className={styles.bekreft}>
+              Bekreft og fortsett
             </Button>
-          )}
-        </div>
+            {avbryt && (
+              <Button variant="secondary" type="button" size="small" onClick={avbryt}>
+                Avbryt
+              </Button>
+            )}
+          </div>
+        )}
       </div>
     </Form>
   );