Merge branch 'main' into valideringBackend

backend/src/main/kotlin/no/nav/helse/sprik/plugins/Routing.kt

@@ -80,6 +80,12 @@ fun configureRouting(): ApplicationEngine = embeddedServer(CIO, applicationEngin
                 feilmeldingRepository.slettFeilmelding(id.toInt())
                 call.respond(status = HttpStatusCode.OK, message = "Feilmelding slettet")
             }
+            delete("api/slettfeilmelding/{id}") {
+                val id = call.parameters["id"]
+                checkNotNull(id) {"Id kan ikke være null"}
+                feilmeldingRepository.slettFeilmelding(id.toInt())
+                call.respond(status = HttpStatusCode.Created, message = "Feilmelding slettet")
+            }
         }
     }
     

frontend/src/components/FeilmeldingsInnhold.tsx

@@ -40,6 +40,11 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
         props.reset()
     }
 
+    const fullUpdate = async() => {
+        setKommentar(kommentarfelt)
+        oppdaterkommentar()
+    }
+
     return(
         <>
             <div className="flex justify-between ">
@@ -73,20 +78,14 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
             </div>
             <Skillelinje/>
             {props.children}
-            {kommentar.length === 0 ? 
-                <KommentarTekstfelt
-                    kommentarfelt={kommentarfelt} 
-                    setKommentarfelt={setKommentarfelt}
-                    oppdaterKommentar={() => {
-                        setKommentar(kommentarfelt)
-                        oppdaterkommentar()}
-                    }
-                /> 
-                    : 
+            
             <Kommentar 
                 tekst={kommentar} 
+                kommentarfelt={kommentarfelt} 
+                setKommentarfelt={setKommentarfelt}
+                oppdaterKommentar={fullUpdate}
             />
-            }
+
       </>
     )
 }

frontend/src/components/Kommentar.tsx

@@ -1,20 +1,19 @@
-import { ChatElipsisIcon } from "@navikt/aksel-icons"
+import { ChatElipsisIcon, PencilIcon } from "@navikt/aksel-icons"
 import { TextField, Button, Heading } from "@navikt/ds-react"
 import Skillelinje from "./Skillelinje"
+import { useState } from "react"
 
-interface kommentarTekstfeltInterface {
+interface kommentarInterface {
     kommentarfelt: string,
     setKommentarfelt: (val: string) => void
     oppdaterKommentar: () => void
-}
-interface kommentarInterface {
     tekst: string
 }
 
 /**
  * Kommentartekstfeltet er et tekstfelt med en knapp som poster en kommentar til en feil.
  */
-export const KommentarTekstfelt = (props: kommentarTekstfeltInterface) => {
+export const KommentarTekstfelt = (props: kommentarInterface) => {
     return (
         <div className="flex items-end gap-12 w-full mt-4 h-fit">
             <TextField
@@ -41,13 +40,34 @@ export const KommentarTekstfelt = (props: kommentarTekstfeltInterface) => {
  * @param tekst
  */
 export const Kommentar = (props: kommentarInterface) => {
+    const [redigerKommentar, setRedigerKommentar] = useState(false)
+
     return (
         <>
             <Skillelinje />
-            <div className="p-5 bg-bg-subtle rounded-lg w-2/3 my-4">
+            {props.tekst.length === 0 || redigerKommentar ?
+                <KommentarTekstfelt
+                    kommentarfelt={props.kommentarfelt}
+                    setKommentarfelt={props.setKommentarfelt}
+                    oppdaterKommentar={props.oppdaterKommentar}
+                    tekst={props.tekst}
+                />  
+                :           
+                <div className="flex flex-col gap-3 p-5 bg-bg-subtle rounded-lg w-2/3 my-4">
+                    <div className="flex justify-between items-center">
                         <Heading size="medium">Kommentar</Heading>
+                        <Button
+                            variant="tertiary"
+                            icon={<PencilIcon />}
+                            onClick={() => {
+                                setRedigerKommentar(true);
+                                console.log(redigerKommentar);
+                            }}
+                        ></Button>
+                    </div>
                     <p className="break-words">{props.tekst}</p>
                 </div>
+            }
         </>
     )
 }

frontend/src/components/RedigeringsVerktoy.tsx

@@ -102,7 +102,7 @@ const RedigeringsVerktoy = (props: redigeringsInterface) => {
                 >
                     Avbryt
                 </Button>
-                <SlettFeilKnapp id={props.id}/>
+                <SlettFeilKnapp setVisModal={props.setVisModal} reset={props.reset} id={props.id}/>
             </div>
         </div>
     )
@@ -110,11 +110,15 @@ const RedigeringsVerktoy = (props: redigeringsInterface) => {
 export default RedigeringsVerktoy;
 
 
-
-
-const SlettFeilKnapp = (props: {id : number}) => {
-    const SlettFeil = () => {
-        axios.delete(`/api/slettfeilmelding/${props.id}`)
+const SlettFeilKnapp = (props: {
+    id : number
+    reset: () => void
+    setVisModal: (visModal: boolean) => void
+}) => {
+    const SlettFeil = async () => {
+        await axios.delete(`/api/slettfeilmelding/${props.id}`)
+        props.reset()
+        props.setVisModal(false)
     }
 
     return(