Merge pull request #2562 from navikt/vedlegg-lastned

Lenke for å laste ned dokument som ikke kan vises
navikt · Feb 7, 2025 · d42282a · d42282a
2 parents d761849 + 00f7ee6
commit d42282a
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git a/src/app/personside/infotabs/saksoversikt/saksdokumenter/DokumentLenke.tsx b/src/app/personside/infotabs/saksoversikt/saksdokumenter/DokumentLenke.tsx
@@ -1,12 +1,8 @@
 import { Link, useLocation } from '@tanstack/react-router';
 import { Element, Undertekst } from 'nav-frontend-typografi';
-import styled from 'styled-components';
 import { type Dokument, DokumentStatus, type Journalpost } from '../../../../../models/saksoversikt/journalpost';
 import type { Sakstema } from '../../../../../models/saksoversikt/sakstema';
-import theme from '../../../../../styles/personOversiktTheme';
-import { getSaksdokumentUrl } from '../dokumentvisning/getSaksdokumentUrl';
 import { erSakerFullscreen } from '../utils/erSakerFullscreen';
-import SvgDownload from './../../../../../svg/download.svg';
 
 interface Props {
     dokument: Dokument;
@@ -15,19 +11,6 @@ interface Props {
     journalPost: Journalpost;
 }
 
-const LastNedLenke = styled.a`
-    margin-left: 0.5rem;
-
-    svg {
-        position: relative;
-        top: 2px;
-    }
-
-    &:hover {
-        color: ${theme.color.lenkeSelected};
-    }
-`;
-
 const dokumentTekst = (dokument: Dokument) => {
     return (
         dokument.tittel +
@@ -56,7 +39,7 @@ function DokumentLenke(props: Props) {
         );
     }
 
-    const saksdokumentUrl = getSaksdokumentUrl(journalpostId, dokumentReferanse);
+    //  const saksdokumentUrl = getSaksdokumentUrl(journalpostId, dokumentReferanse);
     return (
         <>
             {apneDokumentINyttVindu ? (
@@ -71,16 +54,24 @@ function DokumentLenke(props: Props) {
             ) : (
                 <Link
                     to={erFullScreen ? '/saker' : '/person/saker'}
-                    search={{ sakstema: props.valgtSakstema.temakode, dokument: dokumentReferanse }}
+                    search={{
+                        sakstema: props.valgtSakstema.temakode,
+                        dokument: dokumentReferanse
+                    }}
                     className="lenke typo-element"
                 >
                     {dokumentTekst(props.dokument)}
                 </Link>
             )}
+
+            {/*
+            // Disabled as the link is wrong and does not work
+
             <LastNedLenke href={saksdokumentUrl} className="lenke typo-element" download title="Last ned">
                 <SvgDownload aria-hidden width={20} height={20} />
                 <span className="sr-only">Last ned pdf</span>
             </LastNedLenke>
+              */}
         </>
     );
 }

diff --git a/src/components/ObjectHttpFeilHandtering.tsx b/src/components/ObjectHttpFeilHandtering.tsx
@@ -1,10 +1,22 @@
+import { Normaltekst } from 'nav-frontend-typografi';
 import type * as React from 'react';
 import { type ReactNode, useEffect, useState } from 'react';
+import styled from 'styled-components';
 import { postConfig } from '../api/config';
 import { CenteredLazySpinner } from './LazySpinner';
 
 type Omit<T, U> = Pick<T, Exclude<keyof T, U>>;
 
+const supportedFileTypes = ['application/pdf', ''];
+const canEmbedFileType = (contentType: string) => supportedFileTypes.includes(contentType.toLowerCase());
+
+const DownloadLink = styled.div`
+  flex: 1 1 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 interface Props
     extends Omit<React.DetailedHTMLProps<React.ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>, 'onError'> {
     url: string;
@@ -49,6 +61,17 @@ export function ObjectHttpFeilHandtering({ url, fnr, onError, children, ...rest
         return <>{children}</>;
     }
 
+    if (!canEmbedFileType(contentType)) {
+        return (
+            <DownloadLink>
+                <Normaltekst>
+                    Vedlegget kan ikke vises i nettleseren. Last ned filen for å se innholdet:{' '}
+                    <a href={blobUrl}>Last ned dokument</a>
+                </Normaltekst>
+            </DownloadLink>
+        );
+    }
+
     //biome-ignore lint/correctness/noChildrenProp: biome migration
     //biome-ignore lint/a11y/useAltText: biome migration
     return <object data={blobUrl} children={children} {...rest} type={contentType} />;