fiks komponent bruk i FormattedMessage (#3583)

sirimykland · web-flow · commit 82443744cda6 · 2025-03-24T14:31:58.000+01:00
* fiks missing key og unique key warnings

* oppdater type for chunks i BTag og H3 tag

* endre type til btag og h3 til ReactNode
diff --git a/packages/fakta-beregning/src/BeregningFaktaIndex.spec.tsx b/packages/fakta-beregning/src/BeregningFaktaIndex.spec.tsx
@@ -4,7 +4,7 @@ import { composeStories } from '@storybook/react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import * as stories from '../BeregningFaktaIndex.stories';
+import * as stories from './BeregningFaktaIndex.stories';
 
 const {
   ArbeidOgDagpengerAp5058,
@@ -22,7 +22,7 @@ const {
   VurderingAvEtterlønnSluttpakkeAp5058,
 } = composeStories(stories);
 
-describe('<BeregningFaktaIndexSpec', () => {
+describe('BeregningFaktaIndex', () => {
   it('skal kunne løse aksjonspunkt for Arbeid og full AAP', async () => {
     render(<ArbeidOgAAPAp5052 />);
     // TODO: Valider på at AAP ikkje skal kunne endres
diff --git a/packages/fakta-beregning/src/BeregningFaktaIndex.tsx b/packages/fakta-beregning/src/BeregningFaktaIndex.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useState } from 'react';
+import React, { ReactElement, ReactNode, useEffect, useState } from 'react';
 import { FormattedMessage, RawIntlProvider } from 'react-intl';
 
 import { ExclamationmarkTriangleFillIcon } from '@navikt/aksel-icons';
@@ -88,6 +88,11 @@ const skalVurderes = (bg: Beregningsgrunnlag, vilkårsperioder: Vilkårperiode[]
     !aktuellPeriode.erForlengelse
   );
 };
+const H3 = (chunks: ReactNode[]) => (
+  <Heading size="xsmall" level="3" key="h3">
+    {chunks}
+  </Heading>
+);
 
 export const lagHelpTextsForFakta = (
   beregningsgrunnlag: Beregningsgrunnlag,
@@ -112,11 +117,7 @@ export const lagHelpTextsForFakta = (
               : 'BeregningInfoPanel.VurderFaktaBeregningField.ATFLSammeOrgUtenIM'
           }
           values={{
-            h3: (...chunks) => (
-              <Heading size="xsmall" level="3">
-                {chunks}
-              </Heading>
-            ),
+            h3: H3,
           }}
         />
       </Alert>,
@@ -129,11 +130,7 @@ export const lagHelpTextsForFakta = (
         <FormattedMessage
           id="BeregningInfoPanel.VurderFaktaBeregningField.VurderLonnsendringHelpText"
           values={{
-            h3: (...chunks) => (
-              <Heading size="xsmall" level="3">
-                {chunks}
-              </Heading>
-            ),
+            h3: H3,
           }}
         />
       </Alert>,
@@ -146,11 +143,7 @@ export const lagHelpTextsForFakta = (
         <FormattedMessage
           id="BeregningInfoPanel.VurderFaktaBeregningField.VurderMottarYtelseHelpTextFrilans"
           values={{
-            h3: (...chunks) => (
-              <Heading size="xsmall" level="3">
-                {chunks}
-              </Heading>
-            ),
+            h3: H3,
           }}
         />
       </Alert>,
@@ -164,11 +157,7 @@ export const lagHelpTextsForFakta = (
         <FormattedMessage
           id="BeregningInfoPanel.VurderFaktaBeregningField.VurderMottarYtelseHelpTextArbeidstaker"
           values={{
-            h3: (...chunks) => (
-              <Heading size="xsmall" level="3">
-                {chunks}
-              </Heading>
-            ),
+            h3: H3,
           }}
         />
       </Alert>,
@@ -182,11 +171,7 @@ export const lagHelpTextsForFakta = (
         <FormattedMessage
           id="BeregningInfoPanel.VurderFaktaBeregningField.VurderEtterlonnSluttpakkeHelpText"
           values={{
-            h3: (...chunks) => (
-              <Heading size="xsmall" level="3">
-                {chunks}
-              </Heading>
-            ),
+            h3: H3,
           }}
         />
       </Alert>,
@@ -219,11 +204,7 @@ export const lagHelpTextsForFakta = (
           id="BeregningInfoPanel.VurderFaktaBeregningField.TidsbegrensetArbeidsforholdHelpText"
           values={{
             arbeidsgiverVisningsnavn: arbeidsgivereNavn,
-            h3: (...chunks) => (
-              <Heading size="xsmall" level="3">
-                {chunks}
-              </Heading>
-            ),
+            h3: H3,
           }}
         />
       </Alert>,
@@ -237,11 +218,7 @@ export const lagHelpTextsForFakta = (
         <FormattedMessage
           id="BeregningInfoPanel.VurderFaktaBeregningField.VurderMilitaerSiviltjenesteHelpText"
           values={{
-            h3: (...chunks) => (
-              <Heading size="xsmall" level="3">
-                {chunks}
-              </Heading>
-            ),
+            h3: H3,
           }}
         />
       </Alert>,
@@ -256,11 +233,7 @@ export const lagHelpTextsForFakta = (
           <FormattedMessage
             id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelseHelpText"
             values={{
-              h3: (...chunks) => (
-                <Heading size="xsmall" level="3">
-                  {chunks}
-                </Heading>
-              ),
+              h3: H3,
             }}
           />
           <ReadMore
@@ -321,11 +294,7 @@ export const lagHelpTextsForFakta = (
         <FormattedMessage
           id="BeregningInfoPanel.VurderFaktaBeregningField.VurderNyoppstartetFLHelpText"
           values={{
-            h3: (...chunks) => (
-              <Heading size="xsmall" level="3">
-                {chunks}
-              </Heading>
-            ),
+            h3: H3,
           }}
         />
       </Alert>,
@@ -339,11 +308,7 @@ export const lagHelpTextsForFakta = (
         <FormattedMessage
           id="BeregningInfoPanel.VurderFaktaBeregningField.VurderSNNyIArbeidslivetHelpText"
           values={{
-            h3: (...chunks) => (
-              <Heading size="xsmall" level="3">
-                {chunks}
-              </Heading>
-            ),
+            h3: H3,
           }}
         />
       </Alert>,
@@ -371,11 +336,7 @@ export const lagHelpTextsForFakta = (
           id="BeregningInfoPanel.VurderFaktaBeregningField.VurderRefusjonskravKommetForSentHelpText"
           values={{
             arbeidsgiverVisningsnavn: arbeidsgivereNavn,
-            h3: (...chunks) => (
-              <Heading size="xsmall" level="3">
-                {chunks}
-              </Heading>
-            ),
+            h3: H3,
           }}
         />
       </Alert>,
diff --git a/packages/fakta-fordel-beregningsgrunnlag/src/components/fordeling/FordelingHelpText.tsx b/packages/fakta-fordel-beregningsgrunnlag/src/components/fordeling/FordelingHelpText.tsx
@@ -12,7 +12,7 @@ import {
   PerioderMedGraderingEllerRefusjon,
 } from '@navikt/ft-types';
 import { AksjonspunktHelpTextHTML } from '@navikt/ft-ui-komponenter';
-import { DDMMYYYY_DATE_FORMAT, ISO_DATE_FORMAT } from '@navikt/ft-utils';
+import { BTag, DDMMYYYY_DATE_FORMAT, ISO_DATE_FORMAT } from '@navikt/ft-utils';
 
 import { FaktaFordelBeregningAvklaringsbehovCode } from '../../types/interface/FaktaFordelBeregningAvklaringsbehovCode';
 import { createVisningsnavnForAktivitetFordeling } from '../util/visningsnavnHelper';
@@ -135,7 +135,7 @@ const createGraderingOrRefusjonString = (
       key="EndringBeregningsgrunnlagFastsetÅrsbeløp"
       id="BeregningInfoPanel.AksjonspunktHelpText.FaktaOmBeregning.EndringBeregningsgrunnlag.TilkommetAktivitet"
       values={{
-        b: (...chunks) => <b>{chunks}</b>,
+        b: BTag,
         br: <br />,
       }}
     />,
diff --git a/packages/prosess-beregningsgrunnlag/src/components/arbeidstaker/GrunnlagForAarsinntektPanelAT.tsx b/packages/prosess-beregningsgrunnlag/src/components/arbeidstaker/GrunnlagForAarsinntektPanelAT.tsx
@@ -114,7 +114,7 @@ const createArbeidinntektRows = (
   ));
   if (relevanteAndeler.length > 1) {
     const summaryRow = (
-      <VStack gap="0">
+      <VStack gap="0" key="summary-row">
         <HStack justify="space-between">
           <FormattedMessage id="Beregningsgrunnlag.AarsinntektPanel.TotaltArbeidsinntekt" />
           <HStack gap="10" justify="end">
diff --git a/packages/prosess-beregningsgrunnlag/src/components/beregningsresultat/OppsummertGrunnlagPanel.tsx b/packages/prosess-beregningsgrunnlag/src/components/beregningsresultat/OppsummertGrunnlagPanel.tsx
@@ -8,7 +8,7 @@ import dayjs from 'dayjs';
 import { AktivitetStatus, Dekningsgrad, FagsakYtelseType, VilkarUtfallType } from '@navikt/ft-kodeverk';
 import { Beregningsgrunnlag, YtelseGrunnlag } from '@navikt/ft-types';
 import { FlexColumn, FlexContainer, FlexRow, VerticalSpacer } from '@navikt/ft-ui-komponenter';
-import { DDMMYYYY_DATE_FORMAT, formatCurrencyNoKr } from '@navikt/ft-utils';
+import { BTag, DDMMYYYY_DATE_FORMAT, formatCurrencyNoKr } from '@navikt/ft-utils';
 
 import { TabellData, TabellRadData } from '../../types/BeregningsresultatTabellType';
 import { Vilkårperiode } from '../../types/Vilkår';
@@ -108,7 +108,7 @@ const lagIkkeOppfyltVisning = (grunnbeløp: number, erMidlertidigInaktiv: boolea
         }
         values={{
           grunnbeløp: formatCurrencyNoKr(grunnbeløp),
-          b: chunks => <b>{chunks}</b>,
+          b: BTag,
         }}
       />
     </BodyShort>
diff --git a/packages/prosess-beregningsgrunnlag/src/components/fellesPaneler/AksjonspunktTittel.tsx b/packages/prosess-beregningsgrunnlag/src/components/fellesPaneler/AksjonspunktTittel.tsx
@@ -12,6 +12,7 @@ import {
   SammenligningsgrunlagProp,
 } from '@navikt/ft-types';
 import { AksjonspunktHelpTextHTML, VerticalSpacer } from '@navikt/ft-ui-komponenter';
+import { BTag } from '@navikt/ft-utils';
 
 import { ProsessBeregningsgrunnlagAvklaringsbehovCode } from '../../types/interface/ProsessBeregningsgrunnlagAvklaringsbehovCode';
 
@@ -110,7 +111,7 @@ const lagAksjonspunktHelpText = (
               )}
               values={{
                 verdi: getAvviksprosent(ap, sammenligningsgrunnlag),
-                b: (chunks: any) => <b>{chunks}</b>,
+                b: BTag,
                 br: <br />,
               }}
             />
diff --git a/packages/prosess-beregningsgrunnlag/src/components/fellesPaneler/SaksopplysningPanel.tsx b/packages/prosess-beregningsgrunnlag/src/components/fellesPaneler/SaksopplysningPanel.tsx
@@ -1,11 +1,12 @@
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import dayjs from 'dayjs';
 import norskFormat from 'dayjs/locale/nb';
 
 import { LønnsendringScenario } from '@navikt/ft-kodeverk';
 import { ArbeidsgiverOpplysningerPerId, LønnsendringSaksopplysning, Saksopplysninger } from '@navikt/ft-types';
-import { BlaBoksMedCheckmarkListe, VerticalSpacer } from '@navikt/ft-ui-komponenter';
+import { BlaBoksMedCheckmarkListe } from '@navikt/ft-ui-komponenter';
 import { DDMMYYYY_DATE_FORMAT, unique, YYYY_MM_FORMAT } from '@navikt/ft-utils';
 
 import { createVisningsnavnForAktivitet } from '../../util/createVisningsnavnForAktivitet';
@@ -119,11 +120,9 @@ function lagLesMer(
 ) {
   const unikeScenario = unique(opplysninger.map(o => o.lønnsendringscenario));
   return unikeScenario.map(scenario => (
-    <>
+    <p key={scenario}>
       {finnScenarioTekst(scenario, skjeringstidspunktDato, opplysninger, arbeidsgiverOpplysningerPerId)}
-      <br />
-      <VerticalSpacer sixteenPx />
-    </>
+    </p>
   ));
 }
 
diff --git a/packages/prosess-beregningsgrunnlag/src/components/selvstendigNaeringsdrivende/NaeringsOpplysningsPanel.tsx b/packages/prosess-beregningsgrunnlag/src/components/selvstendigNaeringsdrivende/NaeringsOpplysningsPanel.tsx
@@ -6,7 +6,7 @@ import { BodyShort, Detail, Heading, Label } from '@navikt/ds-react';
 import { AktivitetStatus } from '@navikt/ft-kodeverk';
 import { ArbeidsgiverOpplysningerPerId, BeregningsgrunnlagAndel, Næring } from '@navikt/ft-types';
 import { FlexColumn, FlexRow, VerticalSpacer } from '@navikt/ft-ui-komponenter';
-import { dateFormat, formatCurrencyNoKr } from '@navikt/ft-utils';
+import { BTag, dateFormat, formatCurrencyNoKr } from '@navikt/ft-utils';
 
 import { Ledelinje } from '../fellesPaneler/Ledelinje';
 
@@ -66,10 +66,7 @@ const lagIntroTilEndringspanel = (næring: Næring): React.ReactNode => {
   }
   return (
     <Label size="small" className={beregningStyles.semiBoldText}>
-      <FormattedMessage
-        id={hendelseTekst}
-        values={{ dato: dateFormat(hendelseDato), b: (chunks: any) => <b>{chunks}</b> }}
-      />
+      <FormattedMessage id={hendelseTekst} values={{ dato: dateFormat(hendelseDato), b: BTag }} />
     </Label>
   );
 };
diff --git a/packages/prosess-tilbakekreving/src/components/TilbakekrevingPeriodeForm.tsx b/packages/prosess-tilbakekreving/src/components/TilbakekrevingPeriodeForm.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { FormattedMessage, useIntl } from 'react-intl';
 
@@ -10,7 +10,7 @@ import { hasValidText, maxLength, minLength, required } from '@navikt/ft-form-va
 import { TilbakekrevingKodeverkType } from '@navikt/ft-kodeverk';
 import { KodeverkMedNavn } from '@navikt/ft-types';
 import { usePrevious } from '@navikt/ft-ui-komponenter';
-import { DDMMYYYY_DATE_FORMAT, decodeHtmlEntity, formatCurrencyNoKr } from '@navikt/ft-utils';
+import { BTag, DDMMYYYY_DATE_FORMAT, decodeHtmlEntity, formatCurrencyNoKr } from '@navikt/ft-utils';
 
 import { Aktsomhet, AKTSOMHET_REKKEFØLGE } from '../kodeverk/aktsomhet';
 import { SærligGrunn } from '../kodeverk/særligGrunn';
@@ -183,8 +183,6 @@ export const TilbakekrevingPeriodeForm = ({
     }
   };
 
-  const transformToBold = useCallback((chunks: any) => <b>{chunks}</b>, []);
-
   const vurdertePerioder = vilkarsVurdertePerioder.filter(
     per => !per.erForeldet && per.valgtVilkarResultatType != null,
   );
@@ -201,7 +199,7 @@ export const TilbakekrevingPeriodeForm = ({
                       ? 'TilbakekrevingPeriodeForm.FeilutbetaltBelopTrekk'
                       : 'TilbakekrevingPeriodeForm.FeilutbetaltBelopEtterbetaling'
                   }
-                  values={{ belop: formatCurrencyNoKr(belop.belop), b: transformToBold }}
+                  values={{ belop: formatCurrencyNoKr(belop.belop), b: BTag }}
                 />
               </BodyShort>
             ))}
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
@@ -36,7 +36,7 @@ export { replaceNorwegianCharacters, getLanguageFromSprakkode } from './src/lang
 export { notNull, isObjectEmpty, diff, isEqual, isObject, omit, omitOne, omitMany } from './src/objectUtils';
 export { parseQueryString, buildPath, formatQueryString } from './src/urlUtils';
 
-export { createIntl } from './src/createIntl';
+export { createIntl, BTag } from './src/createIntl';
 
 export { bemUtils } from './src/bemUtils';
 export { Period } from './src/Period';
diff --git a/packages/utils/src/arrayUtils.ts b/packages/utils/src/arrayUtils.ts
@@ -2,7 +2,7 @@ export const range = (length: number) => [...Array(length).keys()];
 
 export const isArrayEmpty = (array: any[]): boolean => !array || array.length === 0;
 
-export const unique = (array: any[]) => array.filter((it, index, self) => index === self.findIndex(t => t === it));
+export const unique = <T>(array: T[]) => array.filter((it, index, self) => index === self.findIndex(t => t === it));
 
 export const haystack = (object: Record<string, any>, keys: string | string[], defaultValue = null): any => {
   const keysArray = Array.isArray(keys) ? keys : keys.replace(/(\[(\d+)\])/g, '.$2').split('.');
diff --git a/packages/utils/src/createIntl.tsx b/packages/utils/src/createIntl.tsx
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { createIntl as createReactIntl, createIntlCache, IntlShape } from 'react-intl';
 
 const cache = createIntlCache();
@@ -10,3 +11,5 @@ export const createIntl = (messages: Record<string, string>): IntlShape =>
     },
     cache,
   );
+
+export const BTag = (chunks: ReactNode[]) => <b key="bold">{chunks}</b>;
