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

navikt · Sep 26, 2023 · 84f653e · 84f653e
1 parent 72d237e
commit 84f653e
Show file tree

Hide file tree

Showing 13 changed files with 558 additions and 125 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/SakerFullscreenV2.tsx b/src/app/personside/infotabs/saksoversikt/SakerFullscreenV2.tsx
@@ -8,14 +8,14 @@ import { loggEvent } from '../../../../utils/logger/frontendLogger';
 import DropDownMenu from '../../../../components/DropDownMenu';
 import { Undertittel } from 'nav-frontend-typografi';
 import { sakerTest } from '../dyplenkeTest/utils-dyplenker-test';
-import SakstemaListe from './sakstemaliste/SakstemaListe';
 import { forkortetTemanavn } from './utils/saksoversiktUtils';
 import { useHentAlleSakstemaFraResourceV2, useSakstemaURLStateV2 } from './useSakstemaURLState';
 import { filtrerSakstemaerUtenDataV2 } from './sakstemaliste/SakstemaListeUtils';
 import { CenteredLazySpinner } from '../../../../components/LazySpinner';
 import { aggregertTemanavnV2 } from './utils/saksoversiktUtilsV2';
 import DokumentOgVedleggV2 from './dokumentvisning/DokumentOgVedleggV2';
 import JournalPosterV2 from './saksdokumenter/JournalPosterV2';
+import SakstemaListeV2 from './sakstemaliste/SakstemaListeV2';
 
 interface Props {
     fnr: string;
@@ -68,7 +68,7 @@ function Innhold() {
     );
     const sakstemaListeDropdown = (
         <DropDownMenu header={tittel}>
-            <SakstemaListe />
+            <SakstemaListeV2 />
         </DropDownMenu>
     );
 

diff --git a/src/app/personside/infotabs/saksoversikt/SaksoversiktContainerV2.tsx b/src/app/personside/infotabs/saksoversikt/SaksoversiktContainerV2.tsx
@@ -3,16 +3,16 @@ import { SakstemaResponse } from '../../../../models/saksoversikt/sakstema';
 import styled from 'styled-components/macro';
 import theme from '../../../../styles/personOversiktTheme';
 import { BigCenteredLazySpinner } from '../../../../components/BigCenteredLazySpinner';
-import SakstemaListe from './sakstemaliste/SakstemaListe';
 import { ScrollBar } from '../utils/InfoTabsScrollBar';
 import ErrorBoundary from '../../../../components/ErrorBoundary';
 import { AlertStripeInfo } from 'nav-frontend-alertstriper';
 import { useKeepQueryParams } from '../../../../utils/hooks/useKeepQueryParams';
-import SakerFullscreenLenke from './SakerFullscreenLenke';
 import { useHentAlleSakstemaFraResourceV2, useSakstemaURLStateV2 } from './useSakstemaURLState';
 import sakstema from '../../../../rest/resources/sakstemaResource';
 import DokumentOgVedleggV2 from './dokumentvisning/DokumentOgVedleggV2';
 import JournalPosterV2 from './saksdokumenter/JournalPosterV2';
+import SakerFullscreenLenkeV2 from './SakerFullscreenLenkeV2';
+import SakstemaListeV2 from './sakstemaliste/SakstemaListeV2';
 
 const saksoversiktMediaTreshold = '70rem';
 
@@ -66,8 +66,8 @@ function SaksoversiktContainer() {
                         <SaksoversiktStyle>
                             <ScrollBar keepScrollId="saker-sakstema">
                                 <ErrorBoundary boundaryName="Sakstemaliste">
-                                    <SakerFullscreenLenke />
-                                    <SakstemaListe />
+                                    <SakerFullscreenLenkeV2 />
+                                    <SakstemaListeV2 />
                                 </ErrorBoundary>
                             </ScrollBar>
                             <ScrollBar keepScrollId="saker-saksdokumenter">