From ec3b1f53cbfbf748506dd37544c04082667c94d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Solga=CC=8Ard?= <vetle.bu.solgard@nav.no>
Date: Tue, 5 Nov 2024 13:23:34 +0100
Subject: [PATCH] IS-2649: Show content of oppfolgingsoppgave in oversikt

---
 src/api/types/personoversiktTypes.ts          |  29 +++++
 .../{FristColumn.tsx => FristDataCell.tsx}    | 106 ++++++++++--------
 src/components/HendelseFilterPanel.tsx        |   4 +-
 src/components/NewOversiktTable.tsx           |  36 +++---
 src/components/OppfolgingsoppgaveModal.tsx    |  55 +++++++++
 src/components/Sokeresultat.tsx               |   6 +-
 .../toolbar/AssignVeileder/TildelVeileder.tsx |   4 +-
 src/components/toolbar/Toolbar.tsx            |   4 +-
 src/containers/Oversikt.tsx                   |   4 +-
 src/context/tab/TabTypeContext.tsx            |   6 +-
 test/components/FristColumnTest.tsx           |  29 ++---
 test/components/HendelseTypeFilter.test.tsx   |   2 +-
 12 files changed, 192 insertions(+), 93 deletions(-)
 rename src/components/{FristColumn.tsx => FristDataCell.tsx} (64%)
 create mode 100644 src/components/OppfolgingsoppgaveModal.tsx

diff --git a/src/api/types/personoversiktTypes.ts b/src/api/types/personoversiktTypes.ts
index 53625d82..21280a52 100644
--- a/src/api/types/personoversiktTypes.ts
+++ b/src/api/types/personoversiktTypes.ts
@@ -107,3 +107,32 @@ export enum Oppfolgingsgrunn {
   VURDER_ANNEN_YTELSE = 'VURDER_ANNEN_YTELSE',
   ANNET = 'ANNET',
 }
+
+export function oppfolgingsgrunnToString(
+  oppfolgingsgrunn: Oppfolgingsgrunn
+): string {
+  switch (oppfolgingsgrunn) {
+    case Oppfolgingsgrunn.TA_KONTAKT_SYKEMELDT:
+      return 'Ta kontakt med den sykmeldte';
+    case Oppfolgingsgrunn.TA_KONTAKT_ARBEIDSGIVER:
+      return 'Ta kontakt med arbeidsgiver';
+    case Oppfolgingsgrunn.TA_KONTAKT_BEHANDLER:
+      return 'Ta kontakt med behandler';
+    case Oppfolgingsgrunn.VURDER_DIALOGMOTE_SENERE:
+      return 'Vurder behov for dialogmøte';
+    case Oppfolgingsgrunn.FOLG_OPP_ETTER_NESTE_SYKMELDING:
+      return 'Følg opp etter neste sykmelding';
+    case Oppfolgingsgrunn.VURDER_TILTAK_BEHOV:
+      return 'Vurder behov for tiltak';
+    case Oppfolgingsgrunn.VURDER_ARBEIDSUFORHET:
+      return 'Vurder §8-4 - Arbeidsuførhet';
+    case Oppfolgingsgrunn.FRISKMELDING_TIL_ARBEIDSFORMIDLING:
+      return 'Vurder §8-5 - Friskmelding til arbeidsformidling';
+    case Oppfolgingsgrunn.VURDER_14A:
+      return 'Vurder §14a';
+    case Oppfolgingsgrunn.VURDER_ANNEN_YTELSE:
+      return 'Vurder annen ytelse';
+    case Oppfolgingsgrunn.ANNET:
+      return 'Annet';
+  }
+}
diff --git a/src/components/FristColumn.tsx b/src/components/FristDataCell.tsx
similarity index 64%
rename from src/components/FristColumn.tsx
rename to src/components/FristDataCell.tsx
index de7348fd..11cdd897 100644
--- a/src/components/FristColumn.tsx
+++ b/src/components/FristDataCell.tsx
@@ -5,12 +5,16 @@ import {
   FileTextIcon,
   HourglassTopFilledIcon,
 } from '@navikt/aksel-icons';
-import React, { ReactElement } from 'react';
+import React, { ReactElement, useState } from 'react';
 import {
   AktivitetskravStatus,
-  Oppfolgingsgrunn,
+  oppfolgingsgrunnToString,
 } from '@/api/types/personoversiktTypes';
-import { Tooltip } from '@navikt/ds-react';
+import { Button, Table, Tooltip } from '@navikt/ds-react';
+import OppfolgingsoppgaveModal from '@/components/OppfolgingsoppgaveModal';
+import * as Amplitude from '@/utils/amplitude';
+import { useTabType } from '@/context/tab/TabTypeContext';
+import { OverviewTabType } from '@/konstanter';
 
 const texts = {
   tooltipAvventer: 'Avventer til',
@@ -21,8 +25,14 @@ const texts = {
   aktivitetskravvarselFrist: 'Aktivitetskrav: Svarfrist forhåndsvarsel',
 };
 
-interface FristColumnProps {
-  personData: PersonData;
+function logOppfolgingsOppgaveModalOpenEvent() {
+  Amplitude.logEvent({
+    type: Amplitude.EventType.ButtonClick,
+    data: {
+      url: window.location.href,
+      tekst: 'Åpnet oppfølgingsoppgave modal',
+    },
+  });
 }
 
 type Frist = {
@@ -31,49 +41,21 @@ type Frist = {
   tooltip: string;
 };
 
-const byFristAsc = (fristA: Frist, fristB: Frist) => {
+function byFristAsc(fristA: Frist, fristB: Frist) {
   return fristA.date > fristB.date ? 1 : -1;
-};
-
-const oppfolgingsgrunnTekster = (
-  oppfolgingsgrunn: Oppfolgingsgrunn
-): string => {
-  switch (oppfolgingsgrunn) {
-    case Oppfolgingsgrunn.TA_KONTAKT_SYKEMELDT:
-      return 'Ta kontakt med den sykmeldte';
-    case Oppfolgingsgrunn.TA_KONTAKT_ARBEIDSGIVER:
-      return 'Ta kontakt med arbeidsgiver';
-    case Oppfolgingsgrunn.TA_KONTAKT_BEHANDLER:
-      return 'Ta kontakt med behandler';
-    case Oppfolgingsgrunn.VURDER_DIALOGMOTE_SENERE:
-      return 'Vurder behov for dialogmøte';
-    case Oppfolgingsgrunn.FOLG_OPP_ETTER_NESTE_SYKMELDING:
-      return 'Følg opp etter neste sykmelding';
-    case Oppfolgingsgrunn.VURDER_TILTAK_BEHOV:
-      return 'Vurder behov for tiltak';
-    case Oppfolgingsgrunn.VURDER_ARBEIDSUFORHET:
-      return 'Vurder §8-4 - Arbeidsuførhet';
-    case Oppfolgingsgrunn.FRISKMELDING_TIL_ARBEIDSFORMIDLING:
-      return 'Vurder §8-5 - Friskmelding til arbeidsformidling';
-    case Oppfolgingsgrunn.VURDER_14A:
-      return 'Vurder §14a';
-    case Oppfolgingsgrunn.VURDER_ANNEN_YTELSE:
-      return 'Vurder annen ytelse';
-    case Oppfolgingsgrunn.ANNET:
-      return 'Annet';
-    default:
-      return 'Ukjent oppfølgingsgrunn';
-  }
-};
+}
 
-export const FristColumn = ({ personData }: FristColumnProps) => {
-  const {
+function fristerInfo(
+  {
     oppfolgingsoppgave,
     friskmeldingTilArbeidsformidlingFom,
     arbeidsuforhetvurdering,
     aktivitetskravvurdering,
     manglendeMedvirkning,
-  } = personData;
+  }: PersonData,
+  setIsModalOpen: (open: boolean) => void,
+  selectedTab: OverviewTabType
+): Frist[] {
   const frister: Frist[] = [];
   const aktivitetskravStatus = aktivitetskravvurdering?.status;
   const aktivitetskravVurderingFrist =
@@ -108,9 +90,22 @@ export const FristColumn = ({ personData }: FristColumnProps) => {
   }
   if (oppfolgingsoppgave?.frist) {
     frister.push({
-      icon: () => <FileTextIcon aria-hidden fontSize="1.5rem" />,
+      icon: () =>
+        selectedTab === OverviewTabType.MY_OVERVIEW ? (
+          <Button
+            size="xsmall"
+            icon={<FileTextIcon aria-hidden fontSize="1.5rem" />}
+            className="mr-1"
+            onClick={() => {
+              logOppfolgingsOppgaveModalOpenEvent();
+              setIsModalOpen(true);
+            }}
+          />
+        ) : (
+          <FileTextIcon aria-hidden fontSize="1.5rem" />
+        ),
       date: oppfolgingsoppgave.frist,
-      tooltip: `${oppfolgingsgrunnTekster(
+      tooltip: `${oppfolgingsgrunnToString(
         oppfolgingsoppgave.oppfolgingsgrunn
       )}`,
     });
@@ -139,9 +134,20 @@ export const FristColumn = ({ personData }: FristColumnProps) => {
       tooltip: texts.manglendeMedvirkningVarselFrist,
     });
   }
+  return frister;
+}
+
+interface Props {
+  personData: PersonData;
+}
+
+export function FristDataCell({ personData }: Props) {
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const { selectedTab } = useTabType();
+  const frister: Frist[] = fristerInfo(personData, setIsModalOpen, selectedTab);
 
   return (
-    <>
+    <Table.DataCell textSize="small">
       {frister.sort(byFristAsc).map(({ date, icon, tooltip }, index) => (
         <div key={index} className="flex flex-wrap items-center">
           <Tooltip content={tooltip} arrow={false}>
@@ -150,6 +156,14 @@ export const FristColumn = ({ personData }: FristColumnProps) => {
           <div>{toReadableDate(date)}</div>
         </div>
       ))}
-    </>
+      {personData.oppfolgingsoppgave && (
+        <OppfolgingsoppgaveModal
+          isOpen={isModalOpen}
+          setOpen={setIsModalOpen}
+          oppfolgingsoppgave={personData.oppfolgingsoppgave}
+          sykmeldtNavn={personData.navn}
+        />
+      )}
+    </Table.DataCell>
   );
-};
+}
diff --git a/src/components/HendelseFilterPanel.tsx b/src/components/HendelseFilterPanel.tsx
index 48b875bd..d8670fa6 100644
--- a/src/components/HendelseFilterPanel.tsx
+++ b/src/components/HendelseFilterPanel.tsx
@@ -234,12 +234,12 @@ function CheckboxLabel({ labelText, antallHendelser }: CheckboxLabelProps) {
 export function HendelseFilterPanel({ personRegister }: Props) {
   const { toggles } = useFeatureToggles();
   const { filterState, dispatch: dispatchFilterAction } = useFilters();
-  const { tabType } = useTabType();
+  const { selectedTab } = useTabType();
 
   const checkboxElements = hendelseCheckboxes(
     personRegister,
     filterState,
-    tabType,
+    selectedTab,
     toggles
   ).filter((checkboksElement) => checkboksElement.isVisible);
 
diff --git a/src/components/NewOversiktTable.tsx b/src/components/NewOversiktTable.tsx
index a0063079..5b35e9a6 100644
--- a/src/components/NewOversiktTable.tsx
+++ b/src/components/NewOversiktTable.tsx
@@ -4,7 +4,7 @@ import { VeilederColumn } from '@/components/VeilederColumn';
 import { PersonData } from '@/api/types/personregisterTypes';
 import { PersonRadVirksomhetColumn } from '@/components/PersonRadVirksomhetColumn';
 import { OppfolgingstilfelleDTO } from '@/api/types/personoversiktTypes';
-import { FristColumn } from '@/components/FristColumn';
+import { FristDataCell } from '@/components/FristDataCell';
 import { Sorting, SortingKey, useSorting } from '@/hooks/useSorting';
 import { LinkSyfomodiaperson } from '@/components/LinkSyfomodiaperson';
 import { toLastnameFirstnameFormat } from '@/utils/stringUtil';
@@ -14,13 +14,13 @@ import { OverviewTabType } from '@/konstanter';
 import * as Amplitude from '@/utils/amplitude';
 import { EventType } from '@/utils/amplitude';
 
-const getVarighetOppfolgingstilfelle = (
+function getVarighetOppfolgingstilfelle(
   oppfolgingstilfelle: OppfolgingstilfelleDTO | undefined
-): string => {
+): string {
   return oppfolgingstilfelle
     ? `${oppfolgingstilfelle.varighetUker} uker`
     : 'Ukjent';
-};
+}
 
 interface Props {
   personListe: [string, PersonData][];
@@ -30,17 +30,17 @@ interface Props {
   setSorting: (sorting: Sorting) => void;
 }
 
-export const NewOversiktTable = ({
+export function NewOversiktTable({
   personListe,
   selectedRows,
   setSelectedRows,
   sorting,
   setSorting,
-}: Props): ReactElement => {
+}: Props): ReactElement {
   const { columns } = useSorting();
-  const { tabType } = useTabType();
+  const { selectedTab } = useTabType();
 
-  const handleSort = (sortKey: string | undefined) => {
+  function handleSort(sortKey: string | undefined) {
     let direction: 'none' | 'ascending' | 'descending';
     if (sortKey === sorting.orderBy && sorting.direction === 'descending') {
       direction = 'none';
@@ -64,27 +64,27 @@ export const NewOversiktTable = ({
         retning: direction,
       },
     });
-  };
+  }
 
   const allRowsSelected = personListe.length === selectedRows.length;
   const anyRowsSelected = selectedRows.length > 0;
   const isRowSelected = (fnr: string) => selectedRows.includes(fnr);
 
-  const toggleSelectedRow = (fnr: string) => {
+  function toggleSelectedRow(fnr: string) {
     if (isRowSelected(fnr)) {
       setSelectedRows(selectedRows.filter((value) => value !== fnr));
     } else {
       setSelectedRows([...selectedRows, fnr]);
     }
-  };
+  }
 
-  const toggleSelectAllRows = () => {
+  function toggleSelectAllRows() {
     if (anyRowsSelected) {
       setSelectedRows([]);
     } else {
       setSelectedRows(personListe.map(([fnr]) => fnr));
     }
-  };
+  }
 
   return (
     <Table
@@ -109,7 +109,7 @@ export const NewOversiktTable = ({
           {columns
             .filter(
               (column) =>
-                tabType === OverviewTabType.ENHET_OVERVIEW ||
+                selectedTab === OverviewTabType.ENHET_OVERVIEW ||
                 column.sortKey !== 'VEILEDER'
             )
             .map((col, index) => (
@@ -156,7 +156,7 @@ export const NewOversiktTable = ({
             <Table.DataCell textSize="small">
               <PersonRadVirksomhetColumn personData={persondata} />
             </Table.DataCell>
-            {tabType === OverviewTabType.ENHET_OVERVIEW && (
+            {selectedTab === OverviewTabType.ENHET_OVERVIEW && (
               <Table.DataCell textSize="small">
                 <VeilederColumn personData={persondata} />
               </Table.DataCell>
@@ -166,9 +166,7 @@ export const NewOversiktTable = ({
                 persondata.latestOppfolgingstilfelle
               )}
             </Table.DataCell>
-            <Table.DataCell textSize="small">
-              <FristColumn personData={persondata} />
-            </Table.DataCell>
+            <FristDataCell personData={persondata} />
             <Table.DataCell
               textSize="small"
               className="[&>*:not(:last-child)]:mb-1.5"
@@ -184,4 +182,4 @@ export const NewOversiktTable = ({
       </Table.Body>
     </Table>
   );
-};
+}
diff --git a/src/components/OppfolgingsoppgaveModal.tsx b/src/components/OppfolgingsoppgaveModal.tsx
new file mode 100644
index 00000000..765ece4a
--- /dev/null
+++ b/src/components/OppfolgingsoppgaveModal.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { BodyLong, BodyShort, Label, Modal } from '@navikt/ds-react';
+import {
+  oppfolgingsgrunnToString,
+  OppfolgingsoppgaveDTO,
+} from '@/api/types/personoversiktTypes';
+import { toReadableDate } from '@/utils/dateUtils';
+
+const texts = {
+  header: 'Oppfølgingsoppgave',
+  oppfolgingsgrunn: 'Oppfølgingsgrunn',
+  frist: 'Frist',
+};
+
+interface Props {
+  isOpen: boolean;
+  setOpen: (open: boolean) => void;
+  oppfolgingsoppgave: OppfolgingsoppgaveDTO;
+  sykmeldtNavn: string;
+}
+
+export default function OppfolgingsoppgaveModal({
+  isOpen,
+  setOpen,
+  oppfolgingsoppgave,
+  sykmeldtNavn,
+}: Props) {
+  return (
+    <Modal
+      closeOnBackdropClick
+      className="w-full max-w-[50rem]"
+      aria-label="oppfølgingsoppgave"
+      open={isOpen}
+      onClose={() => setOpen(false)}
+      header={{
+        label: sykmeldtNavn,
+        heading: texts.header,
+      }}
+    >
+      <Modal.Body>
+        <Label size="small" as="p">
+          {texts.oppfolgingsgrunn}
+        </Label>
+        <BodyShort className="mb-4">
+          {oppfolgingsgrunnToString(oppfolgingsoppgave.oppfolgingsgrunn)}
+        </BodyShort>
+        <BodyLong className="mb-4">{oppfolgingsoppgave.tekst}</BodyLong>
+        <Label size="small" as="p">
+          {texts.frist}
+        </Label>
+        <BodyShort>{toReadableDate(oppfolgingsoppgave.frist)}</BodyShort>
+      </Modal.Body>
+    </Modal>
+  );
+}
diff --git a/src/components/Sokeresultat.tsx b/src/components/Sokeresultat.tsx
index 230cf1ce..8cb5fc9a 100644
--- a/src/components/Sokeresultat.tsx
+++ b/src/components/Sokeresultat.tsx
@@ -34,7 +34,7 @@ const lagListe = (
 const Sokeresultat = ({ allEvents }: SokeresultatProps) => {
   const tildelVeileder = useTildelVeileder();
   const { filterState } = useFilters();
-  const { tabType } = useTabType();
+  const { selectedTab } = useTabType();
 
   const [markertePersoner, setMarkertePersoner] = useState<string[]>([]);
   const [startItem, setStartItem] = useState(0);
@@ -42,10 +42,10 @@ const Sokeresultat = ({ allEvents }: SokeresultatProps) => {
 
   useEffect(() => {
     setMarkertePersoner([]);
-  }, [tabType]);
+  }, [selectedTab]);
 
   const selectedHendelsetypeFilter =
-    tabType === OverviewTabType.MY_OVERVIEW
+    selectedTab === OverviewTabType.MY_OVERVIEW
       ? {
           ...filterState.selectedHendelseType,
           ufordeltBruker: false,
diff --git a/src/components/toolbar/AssignVeileder/TildelVeileder.tsx b/src/components/toolbar/AssignVeileder/TildelVeileder.tsx
index ca003d3f..853732a0 100644
--- a/src/components/toolbar/AssignVeileder/TildelVeileder.tsx
+++ b/src/components/toolbar/AssignVeileder/TildelVeileder.tsx
@@ -35,11 +35,11 @@ const TildelVeileder = ({
   const [showList, setShowList] = useState(false);
   const [veilederIsChosen, setVeilederIsChosen] = useState(false);
   const [showError, setShowError] = useState(false);
-  const { tabType } = useTabType();
+  const { selectedTab } = useTabType();
 
   useEffect(() => {
     setShowList(false);
-  }, [tabType]);
+  }, [selectedTab]);
 
   const resetStateToDefault = () => {
     setChosenVeilederIdent('');
diff --git a/src/components/toolbar/Toolbar.tsx b/src/components/toolbar/Toolbar.tsx
index c191f4e6..6ab299e7 100644
--- a/src/components/toolbar/Toolbar.tsx
+++ b/src/components/toolbar/Toolbar.tsx
@@ -45,7 +45,7 @@ interface ToolbarProps extends ToolbarWrapperProps {
 }
 
 const Toolbar = (props: ToolbarProps) => {
-  const { tabType } = useTabType();
+  const { selectedTab } = useTabType();
 
   return (
     <ToolbarStyled>
@@ -56,7 +56,7 @@ const Toolbar = (props: ToolbarProps) => {
             handleTildelVeileder={props.buttonHandler}
             handleSelectAll={props.checkAllHandler}
           />
-          {tabType === OverviewTabType.ENHET_OVERVIEW && <SearchVeileder />}
+          {selectedTab === OverviewTabType.ENHET_OVERVIEW && <SearchVeileder />}
         </Element>
         <PaginationContainer
           numberOfItemsTotal={props.numberOfItemsTotal}
diff --git a/src/containers/Oversikt.tsx b/src/containers/Oversikt.tsx
index 1971fdb7..8c611074 100644
--- a/src/containers/Oversikt.tsx
+++ b/src/containers/Oversikt.tsx
@@ -50,7 +50,7 @@ export const Oversikt = ({
 }: OversiktProps) => {
   const aktivVeilederQuery = useAktivVeilederQuery();
   const { filterState } = useFilters();
-  const { tabType } = useTabType();
+  const { selectedTab } = useTabType();
 
   const personData: PersonregisterState = toPersonData(
     personoversiktData,
@@ -58,7 +58,7 @@ export const Oversikt = ({
   );
 
   const eventFilterValue =
-    tabType === OverviewTabType.MY_OVERVIEW
+    selectedTab === OverviewTabType.MY_OVERVIEW
       ? [aktivVeilederQuery.data?.ident || '']
       : filterState.selectedVeilederIdents;
 
diff --git a/src/context/tab/TabTypeContext.tsx b/src/context/tab/TabTypeContext.tsx
index 8e663e82..60575216 100644
--- a/src/context/tab/TabTypeContext.tsx
+++ b/src/context/tab/TabTypeContext.tsx
@@ -5,10 +5,10 @@ import { OverviewTabType } from '@/konstanter';
 type TabTypeProviderProps = { children: React.ReactNode };
 
 export const TabTypeContext = React.createContext<{
-  tabType: OverviewTabType;
+  selectedTab: OverviewTabType;
   setTabType: (tabType: OverviewTabType) => void;
 }>({
-  tabType: OverviewTabType.ENHET_OVERVIEW,
+  selectedTab: OverviewTabType.ENHET_OVERVIEW,
   setTabType: () => undefined,
 });
 
@@ -16,7 +16,7 @@ const TabTypeProvider = ({ children }: TabTypeProviderProps) => {
   const [tabType, setTabType] = useState(OverviewTabType.ENHET_OVERVIEW);
 
   return (
-    <TabTypeContext.Provider value={{ tabType, setTabType }}>
+    <TabTypeContext.Provider value={{ selectedTab: tabType, setTabType }}>
       {children}
     </TabTypeContext.Provider>
   );
diff --git a/test/components/FristColumnTest.tsx b/test/components/FristColumnTest.tsx
index 81e0b48f..865cc13f 100644
--- a/test/components/FristColumnTest.tsx
+++ b/test/components/FristColumnTest.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import { FristColumn } from '@/components/FristColumn';
+import { FristDataCell } from '@/components/FristDataCell';
 import React from 'react';
 import { PersonData, Skjermingskode } from '@/api/types/personregisterTypes';
 import { testdata } from '../data/fellesTestdata';
@@ -33,7 +33,7 @@ const fristFormatRegex = /\b\d{2}\.\d{2}\.\d{4}\b/;
 describe('FristColumn', () => {
   it('viser ingen frister når person har hverken aktivitetskrav AVVENT med frist eller oppfolgingsoppgave med frist', () => {
     const personUtenFrister: PersonData = { ...defaultPersonData };
-    render(<FristColumn personData={personUtenFrister} />);
+    render(<FristDataCell personData={personUtenFrister} />);
 
     expect(screen.queryAllByText(fristFormatRegex)).to.be.empty;
   });
@@ -52,7 +52,7 @@ describe('FristColumn', () => {
         ],
       },
     };
-    render(<FristColumn personData={personAvventerMedFrist} />);
+    render(<FristDataCell personData={personAvventerMedFrist} />);
 
     expect(screen.getByText(toReadableDate(aktivitetskravVurderingFrist))).to
       .exist;
@@ -64,9 +64,10 @@ describe('FristColumn', () => {
       ...defaultPersonData,
       oppfolgingsoppgave,
     };
-    render(<FristColumn personData={personOppfolgingsoppgaveMedFrist} />);
+    render(<FristDataCell personData={personOppfolgingsoppgaveMedFrist} />);
 
-    expect(screen.getByText(toReadableDate(oppfolgingsoppgave.frist))).to.exist;
+    expect(screen.getAllByText(toReadableDate(oppfolgingsoppgave.frist))).to
+      .exist;
   });
 
   it('viser frist for person når friskmelding til arbeidsformidling fom-dato er satt', () => {
@@ -75,7 +76,9 @@ describe('FristColumn', () => {
       ...defaultPersonData,
       friskmeldingTilArbeidsformidlingFom,
     };
-    render(<FristColumn personData={personFriskmeldingTilArbeidsformidling} />);
+    render(
+      <FristDataCell personData={personFriskmeldingTilArbeidsformidling} />
+    );
 
     expect(
       screen.getByText(toReadableDate(friskmeldingTilArbeidsformidlingFom))
@@ -92,7 +95,7 @@ describe('FristColumn', () => {
         },
       },
     };
-    render(<FristColumn personData={personManglendeMedvirkning} />);
+    render(<FristDataCell personData={personManglendeMedvirkning} />);
 
     expect(screen.getByText(toReadableDate(svarfrist))).to.exist;
   });
@@ -116,10 +119,10 @@ describe('FristColumn', () => {
       friskmeldingTilArbeidsformidlingFom,
     };
 
-    render(<FristColumn personData={personMedFlereFrister} />);
+    render(<FristDataCell personData={personMedFlereFrister} />);
 
     const allFrister = screen.getAllByText(fristFormatRegex);
-    expect(allFrister).to.have.length(3);
+    expect(allFrister).to.have.length(4); // 3 frister i oversikten + 1 i modal for oppfølgingsoppgave som finnes i DOM
     expect(allFrister[0]?.textContent).to.eq(
       toReadableDate(oppfolgingsoppgave.frist)
     );
@@ -146,7 +149,7 @@ describe('FristColumn', () => {
           ],
         },
       };
-      render(<FristColumn personData={personMedAvventerFrist} />);
+      render(<FristDataCell personData={personMedAvventerFrist} />);
 
       expect(screen.getByText(toReadableDate(aktivitetskravVurderingFrist))).to
         .exist;
@@ -168,7 +171,7 @@ describe('FristColumn', () => {
           ],
         },
       };
-      render(<FristColumn personData={personMedForhandsvarsel} />);
+      render(<FristDataCell personData={personMedForhandsvarsel} />);
 
       expect(
         screen.getByText(toReadableDate(aktivitetskravSvarfristForhandsvarsel))
@@ -192,7 +195,7 @@ describe('FristColumn', () => {
           ],
         },
       };
-      render(<FristColumn personData={personMedForhandsvarsel} />);
+      render(<FristDataCell personData={personMedForhandsvarsel} />);
 
       expect(screen.getByText(toReadableDate(svarfristForhandsvarselVis))).to
         .exist;
@@ -217,7 +220,7 @@ describe('FristColumn', () => {
           ],
         },
       };
-      render(<FristColumn personData={personMedForhandsvarsel} />);
+      render(<FristDataCell personData={personMedForhandsvarsel} />);
 
       expect(screen.getByText(toReadableDate(aktivitetskravAvventFristVis))).to
         .exist;
diff --git a/test/components/HendelseTypeFilter.test.tsx b/test/components/HendelseTypeFilter.test.tsx
index e58d3461..c5d030bf 100644
--- a/test/components/HendelseTypeFilter.test.tsx
+++ b/test/components/HendelseTypeFilter.test.tsx
@@ -128,7 +128,7 @@ describe('HendelseTypeFilter', () => {
       <NotificationProvider>
         <TabTypeContext.Provider
           value={{
-            tabType: OverviewTabType.MY_OVERVIEW,
+            selectedTab: OverviewTabType.MY_OVERVIEW,
             setTabType: () => void 0,
           }}
         >