From 35593c80cd0b49d654a06c4cb27422199c6ca260 Mon Sep 17 00:00:00 2001
From: mvbraathen <marius.vorrang.brathen@nav.no>
Date: Tue, 15 Aug 2023 19:12:51 +0200
Subject: [PATCH] Changes to how alerts is shown

---
 src/locales/nb/skjema.json            |  2 +-
 src/skjema/08-vedlegg/VedleggView.tsx | 65 ++++++++++-----------------
 2 files changed, 25 insertions(+), 42 deletions(-)

diff --git a/src/locales/nb/skjema.json b/src/locales/nb/skjema.json
index 36a37db83..b21124f4d 100644
--- a/src/locales/nb/skjema.json
+++ b/src/locales/nb/skjema.json
@@ -1383,7 +1383,7 @@
     "vedlegg.netbetalingsplan.avdraglaan.tittel": "Nedbetalingsplan",
     "vedlegg.oppholdstillatel.oppholdstillatel.tittel": "Registreringsbevis eller oppholdstillatelse",
     "vedlegg.opplasting.feil.forStor": "Opplastingen feilet. Total filstørrelse kan ikke overstige 10MB.",
-    "vedlegg.opplasting.feil.filType": "Opplastingen feilet. Kun JPEG, PNG, og PDF filer er støttet.",
+    "vedlegg.opplasting.feil.filType": "Opplastingen feilet. Støtter kun JPEG, PNG og PDF filer",
     "vedlegg.opplasting.feil.generell": "Opplastingen feilet. Vennligst prøv igjen.",
     "vedlegg.opplasting.feil.infotekst": "Opplasting av vedlegget feilet. Vennligst prøv igjen eller send vedlegget senere.",
     "vedlegg.opplasting.feil.muligVirus": "Opplastingen ble stoppet av antivirus-programmet. Du kan prøve på nytt med en annen fil.",
diff --git a/src/skjema/08-vedlegg/VedleggView.tsx b/src/skjema/08-vedlegg/VedleggView.tsx
index f1928d11b..4fd200888 100644
--- a/src/skjema/08-vedlegg/VedleggView.tsx
+++ b/src/skjema/08-vedlegg/VedleggView.tsx
@@ -12,32 +12,10 @@ import {ChangeEvent, useEffect, useRef} from "react";
 import {useUpdateOkonomiskOpplysning} from "../../generated/okonomiske-opplysninger-ressurs/okonomiske-opplysninger-ressurs";
 import {useQueryClient} from "@tanstack/react-query";
 import {Alert} from "@navikt/ds-react";
-import styled, {keyframes} from "styled-components";
-
-const slideInRight = keyframes`
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-`;
-
-const ToastAlert = styled(Alert)`
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    z-index: 1000;
-    animation: ${slideInRight} 0.3s forwards;
-`;
-
-const VISNINGSTID_TOAST = 5000;
 
 const VedleggView = ({opplysning}: {opplysning: Opplysning}) => {
-    const [showSuccessToast, setShowSuccessToast] = React.useState(false);
-    const [showErrorToast, setShowErrorToast] = React.useState(false);
+    const [showSuccessAlert, setShowSuccessAlert] = React.useState(false);
+    const [showErrorAlert, setShowErrorAlert] = React.useState(false);
     const previousSuccessRef = useRef<string | null | undefined>();
     const previousErrorRef = useRef<string | null | undefined>();
 
@@ -69,20 +47,18 @@ const VedleggView = ({opplysning}: {opplysning: Opplysning}) => {
 
     useEffect(() => {
         if (success && success !== previousSuccessRef.current) {
-            setShowSuccessToast(true);
-            setTimeout(() => setShowSuccessToast(false), VISNINGSTID_TOAST);
+            setShowSuccessAlert(true);
         } else if (!success) {
-            setShowSuccessToast(false);
+            setShowSuccessAlert(false);
         }
         previousSuccessRef.current = success;
     }, [success]);
 
     useEffect(() => {
         if (error && error !== previousErrorRef.current) {
-            setShowErrorToast(true);
-            setTimeout(() => setShowErrorToast(false), VISNINGSTID_TOAST);
+            setShowErrorAlert(true);
         } else if (!error) {
-            setShowErrorToast(false);
+            setShowErrorAlert(false);
         }
         previousErrorRef.current = error;
     }, [error]);
@@ -96,25 +72,32 @@ const VedleggView = ({opplysning}: {opplysning: Opplysning}) => {
             <p>{t(`${textKey}.vedlegg.sporsmal.tittel`)}</p>
             <div className="vedleggsliste">
                 {files.map((fil) => (
-                    <OpplastetVedlegg key={fil.uuid} fil={fil} onDelete={deleteFile} />
+                    <OpplastetVedlegg
+                        key={fil.uuid}
+                        fil={fil}
+                        onDelete={() => {
+                            deleteFile(fil.uuid);
+                            setShowSuccessAlert(false);
+                        }}
+                    />
                 ))}
             </div>
+            {showSuccessAlert && (
+                <Alert variant="success" className={"py-2"} inline>
+                    {success}
+                </Alert>
+            )}
+            {showErrorAlert && (
+                <Alert variant="error" className={"py-2"} inline>
+                    {error}
+                </Alert>
+            )}
             <VedleggFileSelector
                 opplysning={opplysning}
                 isDisabled={loading || opplysning.vedleggStatus === VedleggFrontendVedleggStatus.VedleggAlleredeSendt}
                 visSpinner={!!opplysning.pendingLasterOppFil}
                 doUpload={handleUpload}
             />
-            {showSuccessToast && (
-                <ToastAlert variant="success" className={"py-2"}>
-                    {success}
-                </ToastAlert>
-            )}
-            {showErrorToast && (
-                <ToastAlert variant="error" className={"py-2"}>
-                    {error}
-                </ToastAlert>
-            )}
             <Checkbox
                 label={t("opplysninger.vedlegg.alleredelastetopp")}
                 id={opplysning.type + "_allerede_lastet_opp_checkbox"}