- Update test to render ident without "(HOVEDPERSON)" suffix

- Add warning for duplicate related idents in HendelseIdDataVisning
- Change Alert component to StyledAlert for import notification
- Refactor related persons handling to ensure uniqueness
- Adjust button class for consistent styling

#deploy-test-dolly-frontend

Author: stigus

apps/dolly-frontend/src/main/js/src/__tests__/pages/gruppe/PersonVisning/PersonMiljoeinfo/HendelseIdDataVisning.test.tsx

@@ -55,7 +55,7 @@ describe('HendelseIdDataVisning', () => {
 
 	it('should render ident trigger button when ident is provided', () => {
 		render(<HendelseIdDataVisning ident="12345678901" />)
-		expect(screen.getByText('12345678901 (HOVEDPERSON)')).toBeInTheDocument()
+		expect(screen.getByText('12345678901')).toBeInTheDocument()
 	})
 
 	it('should render one trigger button per related person', () => {
@@ -109,6 +109,24 @@ describe('HendelseIdDataVisning', () => {
 		)
 	})
 
+	it('should only show one imported warning for duplicate related idents', () => {
+		mockUseHendelseId.mockReturnValue({
+			data: makeRelatertResponse([]),
+			loading: false,
+			error: undefined,
+		})
+		render(
+			<HendelseIdDataVisning
+				ident="12345678901"
+				relatertePersoner={[
+					{ type: 'BARN', id: '11111111111' },
+					{ type: 'BARN', id: '11111111111' },
+				]}
+			/>,
+		)
+		expect(screen.getAllByText(/importert/i)).toHaveLength(1)
+	})
+
 	it('should render one accordion header per infoElement for main person', () => {
 		mockUseHendelseId.mockReturnValue({
 			data: makeMainResponse([

apps/dolly-frontend/src/main/js/src/pages/gruppe/PersonVisning/PersonMiljoeinfo/DataVisning.less

@@ -80,3 +80,7 @@
   margin-right: 0;
   margin-bottom: 8px;
 }
+
+.hendelse-miljoe-knapp {
+  line-height: normal;
+}

apps/dolly-frontend/src/main/js/src/pages/gruppe/PersonVisning/PersonMiljoeinfo/HendelseIdDataVisning.tsx

@@ -9,6 +9,7 @@ import { TitleValue } from '@/components/ui/titleValue/TitleValue'
 import { useHendelseId } from '@/utils/hooks/useHendelseId'
 import { codeToNorskLabel } from '@/utils/DataFormatter'
 import { ApiFeilmelding } from '@/pages/gruppe/PersonVisning/PersonMiljoeinfo/PdlDataVisning'
+import StyledAlert from '@/components/ui/alert/StyledAlert'
 
 export type RelatertPerson = {
 	type: string
@@ -70,9 +71,9 @@ const hendelseHarFeil = (hendelse: Hendelse): boolean =>
 
 const ImportertRelasjonMelding = () => {
 	return (
-		<Alert variant="warning" size="small" className="hendelse-importert-relasjon">
+		<StyledAlert variant="info" size="small" className="hendelse-importert-relasjon">
 			{IMPORTERT_RELASJON_MESSAGE}
-		</Alert>
+		</StyledAlert>
 	)
 }
 
@@ -228,7 +229,7 @@ const HendelseTooltip = ({ triggerText, ident, relatertIdent }: HendelseTooltipP
 			overlayStyle={{ opacity: 1 }}
 			destroyTooltipOnHide={{ keepParent: false }}
 		>
-			<button type="button" className="miljoe-knapp">
+			<button type="button" className="miljoe-knapp hendelse-miljoe-knapp">
 				{triggerText}
 			</button>
 		</DollyTooltip>
@@ -277,6 +278,15 @@ export const HendelseIdDataVisning = ({
 	if (!ident) {
 		return null
 	}
+	const unikeRelatertePersoner =
+		relatertePersoner?.reduce<RelatertPerson[]>((acc, person) => {
+			if (acc.some((existing) => existing.id === person.id)) {
+				return acc
+			}
+			acc.push(person)
+			return acc
+		}, []) ?? []
+	const harRelatertePersoner = unikeRelatertePersoner.length > 0
 	const [relasjonTilstand, setRelasjonTilstand] = React.useState<
 		Record<string, { erImportertRelasjon: boolean; erAvklart: boolean }>
 	>({})
@@ -291,10 +301,10 @@ export const HendelseIdDataVisning = ({
 		!errorHovedperson &&
 		Boolean(typedHovedpersonData?.hovedperson) &&
 		(typedHovedpersonData?.hovedperson?.ordrer?.length ?? 0) === 0
-	const harImportertRelasjon = (relatertePersoner ?? []).some(
+	const harImportertRelasjon = unikeRelatertePersoner.some(
 		(person) => relasjonTilstand[person.id]?.erImportertRelasjon,
 	)
-	const alleRelaterteAvklart = (relatertePersoner ?? []).every(
+	const alleRelaterteAvklart = unikeRelatertePersoner.every(
 		(person) => relasjonTilstand[person.id]?.erAvklart,
 	)
 	const skalViseKunImportvarsel = erImportertHovedperson || harImportertRelasjon
@@ -324,17 +334,20 @@ export const HendelseIdDataVisning = ({
 
 	return (
 		<div className="flexbox--flex-wrap">
-			{erImportertHovedperson && <ImportertRelasjonMelding />}
+			{skalViseKunImportvarsel && <ImportertRelasjonMelding />}
 			{visHovedpersonTooltip && (
-				<HendelseTooltip triggerText={`${ident} (HOVEDPERSON)`} ident={ident} />
+				<HendelseTooltip
+					triggerText={harRelatertePersoner ? `${ident} (HOVEDPERSON)` : ident}
+					ident={ident}
+				/>
 			)}
-			{relatertePersoner?.map((person) => (
+			{unikeRelatertePersoner.map((person) => (
 				<RelatertHendelseElement
 					key={`${person.type}-${person.id}`}
 					ident={ident}
 					person={person}
 					visTooltip={!skalViseKunImportvarsel}
-					visImportMelding={!erImportertHovedperson}
+					visImportMelding={false}
 					onImportertChange={oppdaterImportertRelasjon}
 				/>
 			))}