[KAIZEN-0] Sørge for korrekt saksoversikt komponent

navikt · Sep 26, 2023 · 8fb532b · 8fb532b
1 parent 72d237e
commit 8fb532b
Show file tree

Hide file tree

Showing 12 changed files with 471 additions and 37 deletions.
diff --git a/src/app/Routing.tsx b/src/app/Routing.tsx
@@ -2,12 +2,12 @@ import React, { Suspense } from 'react';
 import { Switch } from 'react-router';
 import { SentryRoute } from '../sentry-route';
 import { paths } from './routes/routing';
-import SakerFullscreen from './personside/infotabs/saksoversikt/SakerFullscreen';
 import SaksDokumentEgetVindu from './personside/infotabs/saksoversikt/SaksDokumentIEgetVindu';
 import Personoversikt from './personside/Personoversikt';
 import Startbilde from './startbilde/Startbilde';
 import { useFodselsnummer } from '../utils/customHooks';
 import { CenteredLazySpinner } from '../components/LazySpinner';
+import SakerFullscreenProxy from './personside/infotabs/saksoversikt/SakerFullscreenProxy';
 
 function Routing() {
     const fnr = useFodselsnummer();
@@ -17,7 +17,7 @@ function Routing() {
             <Switch key={fnr}>
                 <SentryRoute
                     path={`${paths.sakerFullscreen}/:fodselsnummer/`}
-                    render={(routeProps) => <SakerFullscreen fnr={routeProps.match.params.fodselsnummer} />}
+                    render={(routeProps) => <SakerFullscreenProxy fnr={routeProps.match.params.fodselsnummer} />}
                 />
                 <SentryRoute
                     path={`${paths.saksdokumentEgetVindu}/:fodselsnummer/`}

diff --git a/src/app/personside/infotabs/oversikt/Oversikt.tsx b/src/app/personside/infotabs/oversikt/Oversikt.tsx
@@ -9,7 +9,7 @@ import UtbetalingerOversikt from './UtbetalingerOversikt';
 import MeldingerOversikt from './MeldingerOversikt';
 import { INFOTABS } from '../InfoTabEnum';
 import ErrorBoundary from '../../../../components/ErrorBoundary';
-import SakerOversiktV2 from './SakerOversiktV2';
+import SakerOversiktFactory from './SakerOversiktFactory';
 
 const oversiktMediaThreshold = pxToRem(750);
 
@@ -58,7 +58,7 @@ function Oversikt() {
                     <Oversiktskomponent
                         tittel={'Saker'}
                         infotabPath={INFOTABS.SAKER}
-                        component={SakerOversiktV2}
+                        component={SakerOversiktFactory}
                         hurtigtast={'S'}
                     />
                 </KolonneStyle>

diff --git a/src/app/personside/infotabs/oversikt/SakerOversiktFactory.tsx b/src/app/personside/infotabs/oversikt/SakerOversiktFactory.tsx
@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+import IfFeatureToggleOff from '../../../../components/featureToggle/IfFeatureToggleOff';
+import IfFeatureToggleOn from '../../../../components/featureToggle/IfFeatureToggleOn';
+import { FeatureToggles } from '../../../../components/featureToggle/toggleIDs';
+import SakerOversiktV2 from './SakerOversiktV2';
+import SakerOversikt from './SakerOversikt';
+
+interface Props {
+    setHeaderContent: (content: ReactNode) => void;
+}
+
+function SakerOversiktFactory(props: Props) {
+    return (
+        <>
+            <IfFeatureToggleOn toggleID={FeatureToggles.BrukSoknadsstatus}>
+                <SakerOversiktV2 setHeaderContent={props.setHeaderContent} />
+            </IfFeatureToggleOn>
+            <IfFeatureToggleOff toggleID={FeatureToggles.BrukSoknadsstatus}>
+                <SakerOversikt setHeaderContent={props.setHeaderContent} />
+            </IfFeatureToggleOff>
+        </>
+    );
+}
+
+export default SakerOversiktFactory;
diff --git a/src/app/personside/infotabs/saksoversikt/SakerFullscreenLenkeV2.tsx b/src/app/personside/infotabs/saksoversikt/SakerFullscreenLenkeV2.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { useInfotabsDyplenker } from '../dyplenker';
+import styled from 'styled-components';
+import LenkepanelPersonoversikt from '../../../../utils/LenkepanelPersonoversikt';
+import theme from '../../../../styles/personOversiktTheme';
+import { useHentAlleSakstemaFraResourceV2, useSakstemaURLStateV2 } from './useSakstemaURLState';
+import { aggregertSakstemaV2 } from './utils/saksoversiktUtilsV2';
+
+const StyledLenkepanelPersonoversikt = styled(LenkepanelPersonoversikt)`
+    margin-bottom: ${theme.margin.layout};
+`;
+
+function reactrouterLink(props: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+    const { href, ...rest } = props;
+    return <Link to={href!} {...rest} target="_blank" />;
+}
+
+function SakerFullscreenLenkeV2() {
+    const { alleSakstema } = useHentAlleSakstemaFraResourceV2();
+    const { valgteSakstemaer, valgtDokument } = useSakstemaURLStateV2(alleSakstema);
+    const dyplenker = useInfotabsDyplenker();
+    const aggregertSak = aggregertSakstemaV2(alleSakstema, valgteSakstemaer);
+
+    return (
+        <StyledLenkepanelPersonoversikt
+            linkCreator={reactrouterLink}
+            url={dyplenker.saker.link(aggregertSak, valgtDokument, true)}
+        >
+            Åpne i fullscreen
+        </StyledLenkepanelPersonoversikt>
+    );
+}
+
+export default SakerFullscreenLenkeV2;
diff --git a/src/app/personside/infotabs/saksoversikt/SakerFullscreenProxy.tsx b/src/app/personside/infotabs/saksoversikt/SakerFullscreenProxy.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import IfFeatureToggleOn from '../../../../components/featureToggle/IfFeatureToggleOn';
+import { FeatureToggles } from '../../../../components/featureToggle/toggleIDs';
+import IfFeatureToggleOff from '../../../../components/featureToggle/IfFeatureToggleOff';
+import SakerFullscreen from './SakerFullscreen';
+import SakerFullscreenV2 from './SakerFullscreenV2';
+
+interface Props {
+    fnr: string;
+}
+
+function SakerFullscreenProxy(props: Props) {
+    return (
+        <>
+            <IfFeatureToggleOn toggleID={FeatureToggles.BrukSoknadsstatus}>
+                <SakerFullscreenV2 fnr={props.fnr} />
+            </IfFeatureToggleOn>
+            <IfFeatureToggleOff toggleID={FeatureToggles.BrukSoknadsstatus}>
+                <SakerFullscreen fnr={props.fnr} />
+            </IfFeatureToggleOff>
+        </>
+    );
+}
+
+export default SakerFullscreenProxy;
diff --git a/src/app/personside/infotabs/saksoversikt/SaksoversiktContainerV2.tsx b/src/app/personside/infotabs/saksoversikt/SaksoversiktContainerV2.tsx
@@ -13,6 +13,7 @@ import { useHentAlleSakstemaFraResourceV2, useSakstemaURLStateV2 } from './useSa
 import sakstema from '../../../../rest/resources/sakstemaResource';
 import DokumentOgVedleggV2 from './dokumentvisning/DokumentOgVedleggV2';
 import JournalPosterV2 from './saksdokumenter/JournalPosterV2';
+import SakerFullscreenLenkeV2 from './SakerFullscreenLenkeV2';
 
 const saksoversiktMediaTreshold = '70rem';
 
@@ -66,7 +67,7 @@ function SaksoversiktContainer() {
                         <SaksoversiktStyle>
                             <ScrollBar keepScrollId="saker-sakstema">
                                 <ErrorBoundary boundaryName="Sakstemaliste">
-                                    <SakerFullscreenLenke />
+                                    <SakerFullscreenLenkeV2 />
                                     <SakstemaListe />
                                 </ErrorBoundary>
                             </ScrollBar>

diff --git a/src/app/personside/infotabs/saksoversikt/__snapshots__/SaksoversiktContainer.test.tsx.snap b/src/app/personside/infotabs/saksoversikt/__snapshots__/SaksoversiktContainer.test.tsx.snap
@@ -92,27 +92,6 @@ exports[`Viser saksoversiktcontainer med alt innhold 1`] = `
   padding: .5rem;
 }
 
-.c2 {
-  padding: 0rem;
-  font-weight: 600;
-}
-
-.c2 a {
-  padding: 0.9375rem;
-}
-
-.c2 a:visited {
-  color: currentColor !important;
-}
-
-.c2 .lenkepanel {
-  margin-bottom: 0;
-}
-
-.c3 {
-  margin-bottom: .5rem;
-}
-
 .c22 {
   color: #645f5a;
   margin-top: 3px;
@@ -122,6 +101,11 @@ exports[`Viser saksoversiktcontainer med alt innhold 1`] = `
   line-height: 1rem;
 }
 
+.c16 {
+  background-color: #cce1f3;
+  padding: 0.2rem 0.9375rem;
+}
+
 .c24 {
   margin-left: 0.5rem;
 }
@@ -206,11 +190,6 @@ exports[`Viser saksoversiktcontainer med alt innhold 1`] = `
   justify-content: space-between;
 }
 
-.c16 {
-  background-color: #cce1f3;
-  padding: 0.2rem 0.9375rem;
-}
-
 .c10 {
   padding: 0rem;
   position: relative;
@@ -317,6 +296,27 @@ exports[`Viser saksoversiktcontainer med alt innhold 1`] = `
   outline: none;
 }
 
+.c2 {
+  padding: 0rem;
+  font-weight: 600;
+}
+
+.c2 a {
+  padding: 0.9375rem;
+}
+
+.c2 a:visited {
+  color: currentColor !important;
+}
+
+.c2 .lenkepanel {
+  margin-bottom: 0;
+}
+
+.c3 {
+  margin-bottom: .5rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;