IS-1760: Always fetch skjermingskode from syfoperson and use icon wit…

…h tooltip (#384) * IS-1760: Always fetch from syfoperson Replace tag with icon fix icon and color fix test Adjust mock data * Add test * Fix querykey
navikt · Dec 4, 2023 · a55baae · a55baae
1 parent 66ece59
commit a55baae
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 38 deletions.
diff --git a/mock/data/personoversiktEnhetMock.ts b/mock/data/personoversiktEnhetMock.ts
@@ -7,7 +7,7 @@ import {
 export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
   {
     fnr: '01999911111',
-    navn: '',
+    navn: 'Korrupt Heis',
     enhet: '0316',
     veilederIdent: null,
     motebehovUbehandlet: null,
@@ -27,7 +27,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
   },
   {
     fnr: '99999922222',
-    navn: '',
+    navn: 'Korrupt Bordsen',
     enhet: '0316',
     veilederIdent: null,
     motebehovUbehandlet: true,
@@ -107,7 +107,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
   },
   {
     fnr: '59999933333',
-    navn: '',
+    navn: 'Korrupt Bolle',
     enhet: '0316',
     veilederIdent: 'Z101010',
     motebehovUbehandlet: true,
@@ -149,7 +149,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
   },
   {
     fnr: '99999944444',
-    navn: '',
+    navn: 'Stol Bordsen',
     enhet: '0316',
     veilederIdent: 'Z101010',
     motebehovUbehandlet: true,
@@ -187,7 +187,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
   },
   {
     fnr: '18999955555',
-    navn: '',
+    navn: 'Bord Stolesen',
     enhet: '0316',
     veilederIdent: null,
     motebehovUbehandlet: true,
@@ -221,7 +221,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
   },
   {
     fnr: '99999966666',
-    navn: '',
+    navn: 'Gulv Heisen',
     enhet: '0316',
     veilederIdent: 'M987654',
     motebehovUbehandlet: null,
@@ -251,7 +251,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
   },
   {
     fnr: '99999955556',
-    navn: '',
+    navn: 'Skjerm Visen',
     enhet: '0316',
     veilederIdent: null,
     motebehovUbehandlet: true,
@@ -281,7 +281,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
   },
   {
     fnr: '99999966667',
-    navn: '',
+    navn: 'Stol Sengestad',
     enhet: '0316',
     veilederIdent: 'M987654',
     motebehovUbehandlet: null,
@@ -311,7 +311,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
   },
   {
     fnr: '99999966668',
-    navn: '',
+    navn: 'Bord Plantesen',
     enhet: '0316',
     veilederIdent: 'M987654',
     motebehovUbehandlet: null,
@@ -341,7 +341,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
   },
   {
     fnr: '99999966669',
-    navn: '',
+    navn: 'Lun Gange',
     enhet: '0316',
     veilederIdent: 'Wienerbrød',
     motebehovUbehandlet: null,
@@ -375,7 +375,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
   },
   {
     fnr: '99999966670',
-    navn: '',
+    navn: 'Vissen Plass',
     enhet: '0316',
     veilederIdent: 'Wienerbrød',
     motebehovUbehandlet: null,
@@ -405,7 +405,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
   },
   {
     fnr: '99999966671',
-    navn: '',
+    navn: 'Mør Benk',
     enhet: '0316',
     veilederIdent: 'Z999991',
     motebehovUbehandlet: null,
@@ -435,7 +435,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
   },
   {
     fnr: '99999966672',
-    navn: '',
+    navn: 'Grønn Due',
     enhet: '0316',
     veilederIdent: 'Z999991',
     motebehovUbehandlet: null,

diff --git a/src/components/Labels.tsx b/src/components/Labels.tsx
@@ -2,30 +2,30 @@ import React from 'react';
 import { PersonData } from '@/api/types/personregisterTypes';
 import { getReadableSkjermingskode } from '@/utils/personDataUtil';
 import styled from 'styled-components';
-import { Tag } from '@navikt/ds-react';
+import { Tooltip } from '@navikt/ds-react';
+import { ExclamationmarkTriangleFillIcon } from '@navikt/aksel-icons';
 
 const LabelColumnWrapper = styled.div`
-  padding: 0.5em 0;
-
-  > * {
-    margin: 0.2em;
-  }
+  display: flex;
 `;
 
 interface LabelColumnProps {
   personData: PersonData;
 }
 
 export const Labels = ({ personData }: LabelColumnProps) => {
-  const showSkjermingskode =
-    personData.skjermingskode && personData.skjermingskode !== 'INGEN';
+  const { skjermingskode } = personData;
+  const showSkjermingskode = skjermingskode && skjermingskode !== 'INGEN';
 
   return (
     <LabelColumnWrapper>
       {showSkjermingskode && (
-        <Tag variant="warning" size="small">
-          {getReadableSkjermingskode(personData.skjermingskode)}
-        </Tag>
+        <Tooltip content={getReadableSkjermingskode(skjermingskode)}>
+          <ExclamationmarkTriangleFillIcon
+            fontSize="1.5rem"
+            color="var(--a-orange-600)"
+          />
+        </Tooltip>
       )}
     </LabelColumnWrapper>
   );

diff --git a/src/data/personregisterHooks.ts b/src/data/personregisterHooks.ts
@@ -7,37 +7,33 @@ import { ApiErrorException } from '@/api/errors';
 import { FetchPersonregisterFailed } from '@/context/notification/Notifications';
 import { useNotifications } from '@/context/notification/NotificationContext';
 import { useAsyncError } from '@/data/useAsyncError';
+import { useAktivEnhet } from '@/context/aktivEnhet/AktivEnhetContext';
 
 export const personregisterQueryKeys = {
-  personregister: ['personregister'],
+  personregister: (enhetId: string | undefined) => ['personregister', enhetId],
 };
 
 export const usePersonregisterQuery = () => {
-  const personoversiktQuery = usePersonoversiktQuery();
+  const { aktivEnhet } = useAktivEnhet();
+  const { data } = usePersonoversiktQuery();
   const { displayNotification, clearNotification } = useNotifications();
   const throwError = useAsyncError();
 
-  const fnrForPersonerUtenNavnListe =
-    personoversiktQuery.data &&
-    personoversiktQuery.data
-      .filter((p) => !p.navn)
-      .map((person) => ({
-        fnr: person.fnr,
-      }));
+  const fnrForPersonerListe = data.map((person) => ({ fnr: person.fnr }));
 
   const fetchPersonregister = () => {
     const personregisterData = post<PersonregisterData[]>(
       `${SYFOPERSON_ROOT}/person/info`,
-      fnrForPersonerUtenNavnListe || []
+      fnrForPersonerListe
     );
 
     return personregisterData || [];
   };
 
   return useQuery({
-    queryKey: personregisterQueryKeys.personregister,
+    queryKey: personregisterQueryKeys.personregister(aktivEnhet),
     queryFn: fetchPersonregister,
-    enabled: fnrForPersonerUtenNavnListe.length > 0,
+    enabled: !!aktivEnhet && fnrForPersonerListe.length > 0,
     onError: (error) => {
       if (error instanceof ApiErrorException && error.code === 403) {
         throwError(error);

diff --git a/test/components/Personrad.test.tsx b/test/components/Personrad.test.tsx
@@ -93,7 +93,7 @@ describe('Personrad', () => {
     );
   });
 
-  it('Skal rendre riktig navn, fodselsnummer og skjermingskode', () => {
+  it('Skal rendre riktig navn, fodselsnummer og ikon for skjermingskode', () => {
     renderPersonrad(defaultPersonData);
 
     expect(
@@ -102,7 +102,13 @@ describe('Personrad', () => {
       })
     ).to.exist;
     expect(screen.getByText(testdata.fnr1)).to.exist;
-    expect(screen.getByText('diskresjonsmerket')).to.exist;
+    expect(screen.getByRole('img')).to.exist;
+  });
+
+  it('Rendrer ikke ikon når person mangler skjermingskode', () => {
+    renderPersonrad({ ...defaultPersonData, skjermingskode: 'INGEN' });
+
+    expect(screen.queryByRole('img')).to.not.exist;
   });
 
   it('Skal rendre frist-dato for aktivitetskrav AVVENT', () => {