IS-2867: Move dialogmelding to tredeling (#1653)

Author: eirikdahlen

src/components/behandler/VelgBehandler.tsx

@@ -51,6 +51,7 @@ export const VelgBehandler = ({
       legend={legend}
       name="behandlerRef"
       error={fieldState.error?.message}
+      size="small"
     >
       {behandlere.map((behandler, index) => (
         <Radio

src/mocks/isbehandlerdialog/mockIsbehandlerdialog.ts

@@ -18,7 +18,7 @@ const replaceNumberInString = (originalString: string, searchValue: string) => {
 
 export const mockIsbehandlerdialog = [
   http.get(`${ISBEHANDLERDIALOG_ROOT}/melding`, () => {
-    return HttpResponse.json(behandlerdialogMock);
+    return HttpResponse.json(behandlerdialogMockData);
   }),
   http.get(`${ISBEHANDLERDIALOG_ROOT}/melding/:uuid/:vedleggNumber/pdf`, () => {
     return HttpResponse.text("PDF");

src/sider/TredeltSide.tsx

@@ -43,7 +43,7 @@ export function SecondColumn({ children, className }: Props) {
   return (
     <div
       className={
-        "xl:flex-grow-[2] xl:flex-shrink-1 xl:basis-0 xl:h-screen xl:sticky xl:top-2 xl:overflow-y-scroll " +
+        "xl:flex-grow-[2] xl:flex-shrink-1 xl:basis-0 xl:h-screen xl:sticky xl:top-2 xl:overflow-y-scroll -xl:mt-2 " +
         className
       }
     >

src/sider/behandlerdialog/BehandlerdialogContainer.tsx

@@ -1,23 +1,30 @@
 import React, { ReactElement } from "react";
 import Side from "@/sider/Side";
-import Sidetopp from "@/components/Sidetopp";
 import SideLaster from "@/components/SideLaster";
-import { BehandlerdialogSide } from "@/sider/behandlerdialog/BehandlerdialogSide";
 import { Menypunkter } from "@/components/globalnavigasjon/GlobalNavigasjon";
+import * as Tredelt from "@/sider/TredeltSide";
+import { MeldingTilBehandler } from "@/sider/behandlerdialog/meldingtilbehandler/MeldingTilBehandler";
+import { Meldinger } from "@/sider/behandlerdialog/meldinger/Meldinger";
+import { useBehandlerdialogQuery } from "@/data/behandlerdialog/behandlerdialogQueryHooks";
 
 const texts = {
   title: "Dialog med behandler",
 };
 
 export const BehandlerdialogContainer = (): ReactElement => {
-  const henter = false;
-  const hentingFeilet = false;
+  const { isLoading, isError } = useBehandlerdialogQuery();
 
   return (
     <Side tittel={texts.title} aktivtMenypunkt={Menypunkter.BEHANDLERDIALOG}>
-      <SideLaster henter={henter} hentingFeilet={hentingFeilet}>
-        <Sidetopp tittel={texts.title} />
-        <BehandlerdialogSide />
+      <SideLaster henter={isLoading} hentingFeilet={isError}>
+        <Tredelt.Container>
+          <Tredelt.FirstColumn>
+            <Meldinger />
+          </Tredelt.FirstColumn>
+          <Tredelt.SecondColumn>
+            <MeldingTilBehandler />
+          </Tredelt.SecondColumn>
+        </Tredelt.Container>
       </SideLaster>
     </Side>
   );

src/sider/behandlerdialog/BehandlerdialogSide.tsx

@@ -69,6 +69,7 @@ export const ReturLegeerklaring = ({ melding }: ReturLegeerklaringProps) => {
           setVisReturModal(true);
           returLegeerklaring.reset();
         }}
+        size="small"
       >
         {texts.button}
       </Button>

src/sider/behandlerdialog/legeerklaring/ReturLegeerklaring.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Heading } from "@navikt/ds-react";
+import { Box, Heading } from "@navikt/ds-react";
 import { Samtaler } from "@/sider/behandlerdialog/meldinger/Samtaler";
 import BehandleBehandlerdialogSvarOppgaveKnapp from "@/sider/behandlerdialog/meldinger/BehandleBehandlerdialogSvarOppgaveKnapp";
 
@@ -9,12 +9,12 @@ export const texts = {
 
 export const Meldinger = () => {
   return (
-    <>
+    <Box background="surface-default" className="p-4">
       <Heading level="2" size="medium" spacing>
         {texts.header}
       </Heading>
       <BehandleBehandlerdialogSvarOppgaveKnapp />
       <Samtaler />
-    </>
+    </Box>
   );
 };

src/sider/behandlerdialog/meldinger/Meldinger.tsx

@@ -1,33 +1,23 @@
 import React from "react";
 import { MeldingTilBehandlerSkjema } from "@/sider/behandlerdialog/meldingtilbehandler/MeldingTilBehandlerSkjema";
-import { Alert, Heading } from "@navikt/ds-react";
-import styled from "styled-components";
+import { Alert, Box, Heading } from "@navikt/ds-react";
 
 const texts = {
   header: "Skriv til behandler",
   alertInfo:
-    "Dialogmeldingen skal bare benyttes i sykefraværsoppfølgingen. Meldingen vises til innbyggeren på Min side.",
+    "Dialogmeldingen skal kun benyttes i sykefraværsoppfølgingen. Meldingen vises til innbyggeren på Min side.",
 };
 
-const MeldingTilBehandlerAlert = styled(Alert)`
-  max-width: fit-content;
-  margin-bottom: 1.5em;
-
-  .navds-alert__wrapper {
-    max-width: fit-content;
-  }
-`;
-
 export const MeldingTilBehandler = () => {
   return (
-    <>
-      <Heading level="2" size="medium" spacing>
+    <Box background="surface-default" className="p-4 flex flex-col gap-4">
+      <Heading level="2" size="medium">
         {texts.header}
       </Heading>
-      <MeldingTilBehandlerAlert variant="warning" size="small">
+      <Alert variant="warning" size="small" inline>
         {texts.alertInfo}
-      </MeldingTilBehandlerAlert>
+      </Alert>
       <MeldingTilBehandlerSkjema />
-    </>
+    </Box>
   );
 };

src/sider/behandlerdialog/meldingtilbehandler/MeldingTilBehandler.tsx

@@ -91,6 +91,7 @@ export const MeldingTilBehandlerSkjema = () => {
           <Select
             id="type"
             className="mb-4"
+            size="small"
             label={texts.meldingsType.label}
             {...register("meldingsType", { required: true })}
             value={watch("meldingsType")}
@@ -121,6 +122,8 @@ export const MeldingTilBehandlerSkjema = () => {
           })}
           maxLength={MAX_LENGTH_BEHANDLER_MELDING}
           error={meldingTekstErrorMessage}
+          size="small"
+          minRows={4}
         />
         <ForhandsvisningModal
           contentLabel={texts.previewContentLabel}

src/sider/behandlerdialog/meldingtilbehandler/MeldingTilBehandlerSkjema.tsx

@@ -62,6 +62,7 @@ export const PaminnelseMelding = ({
       <div className="flex gap-4">
         <Button
           icon={<BellIcon aria-hidden />}
+          size="small"
           onClick={() => {
             setVisPaminnelseModal(true);
             paminnelseTilBehandler.reset();
@@ -72,6 +73,7 @@ export const PaminnelseMelding = ({
         </Button>
         <Button
           variant="secondary"
+          size="small"
           loading={behandleOppgave.isPending}
           onClick={handleFjernOppgaveClick}
         >

src/sider/behandlerdialog/paminnelse/PaminnelseMelding.tsx

@@ -50,7 +50,7 @@ describe("MeldingTilBehandler", () => {
     renderMeldingTilBehandler();
 
     const alertText =
-      "Dialogmeldingen skal bare benyttes i sykefraværsoppfølgingen. Meldingen vises til innbyggeren på Min side.";
+      "Dialogmeldingen skal kun benyttes i sykefraværsoppfølgingen. Meldingen vises til innbyggeren på Min side.";
 
     expect(screen.getByRole("heading", { name: "Skriv til behandler" })).to
       .exist;