KAIZEN-0 Wrapper rader med <a> for å forbedre UU og åpne i ny fane

Author: AlexGaard

src/components/user-table/body/user-table-body.less

@@ -15,15 +15,21 @@
 }
 
 .user-table-row {
-  display: grid;
-  grid-template-columns: 2.5fr repeat(2, 2fr) 3fr repeat(3, 2fr) 1fr;
-  justify-items: start;
-  padding: 1.5rem 2rem;
-  cursor: pointer;
-  text-align: center;
-  align-items: end;
-
-  &--maskert {
+  display: block;
+
+  &__innhold {
+    display: grid;
+    grid-template-columns: 2.5fr repeat(2, 2fr) 3fr repeat(3, 2fr) 1fr;
+    justify-items: start;
+    padding: 1.5rem 2rem;
+    cursor: pointer;
+    text-align: center;
+    align-items: end;
+    color: @navMorkGra;
+    text-decoration: none;
+  }
+
+  &__innhold--maskert {
     cursor: not-allowed;
   }
 

src/components/user-table/body/user-table-row.tsx

@@ -19,23 +19,27 @@ export const UserRow = (props: { bruker: Bruker, aktivEnhet: OrNothing<string> }
 
 	const erMaskert = brukerFnr === '';
 
-	function handleOnUserRowClicked() {
+	function lagBrukerUrl() {
 		if (!erMaskert) {
 			const enhetQueryParam = props.aktivEnhet ? `?enhet=${props.aktivEnhet}` : '';
-			window.location.href = `/veilarbpersonflatefs/${brukerFnr}${enhetQueryParam}#visVedtaksstotte`;
+			return `/veilarbpersonflatefs/${brukerFnr}${enhetQueryParam}#visVedtaksstotte`;
 		}
+
+		return undefined;
 	}
 
 	return (
-		<li className={cls('user-table-row', {'user-table-row--maskert': erMaskert})} onClick={handleOnUserRowClicked}>
-			<Normaltekst>{lagBrukerNavn(brukerFornavn, brukerEtternavn)}</Normaltekst>
-			<Element>{brukerFnr}</Element>
-			<Normaltekst>{formatDateStr(vedtakStartet)}</Normaltekst>
-			<UtkastStatusData status={status}/>
-			<Element>{beslutterNavn || '-'}</Element>
-			<Normaltekst>{veilederNavn}</Normaltekst>
-			<Normaltekst>{formatDateTime(statusEndret)}</Normaltekst>
-			<Normaltekst>{fjernNavFraEnhetNavn(brukerOppfolgingsenhetNavn)}</Normaltekst>
+		<li className="user-table-row">
+			<a className={cls('user-table-row__innhold', {'user-table-row__innhold--maskert': erMaskert})} href={lagBrukerUrl()}>
+				<Normaltekst>{lagBrukerNavn(brukerFornavn, brukerEtternavn)}</Normaltekst>
+				<Element>{brukerFnr}</Element>
+				<Normaltekst>{formatDateStr(vedtakStartet)}</Normaltekst>
+				<UtkastStatusData status={status}/>
+				<Element>{beslutterNavn || '-'}</Element>
+				<Normaltekst>{veilederNavn}</Normaltekst>
+				<Normaltekst>{formatDateTime(statusEndret)}</Normaltekst>
+				<Normaltekst>{fjernNavFraEnhetNavn(brukerOppfolgingsenhetNavn)}</Normaltekst>
+			</a>
 		</li>
 	);
 };

src/mock/data/brukere.ts

@@ -15,29 +15,28 @@ function randomFnr(): string {
 	return `${dag.toString().padStart(2, '0')}${mnd.toString().padStart(2, '0')}${ar.toString().padStart(2, '0')}${individsifre}${kontrollsifre}`;
 }
 
-function tEllerNull<T>(t: T): T | null {
-	if (randBetween(1, 5) === 1) return null;
-	else return t;
-}
-
 export const lagBrukere = (antallBrukere: number): Bruker[] => {
 	const brukere: Bruker[] = [];
 
 	let maskerteBrukere = 4;
 
 	for (let i = 0; i < antallBrukere; i++) {
 		const randomEnhet = faker.random.arrayElement(enheter);
-		const beslutterNavn = tEllerNull(faker.name.firstName() + ' ' + faker.name.lastName());
+		const randomStatus = faker.random.objectElement(UtkastStatus) as UtkastStatus;
+		const beslutterNavn = randomStatus === UtkastStatus.TRENGER_BESLUTTER
+			? null
+			: faker.name.firstName() + ' ' + faker.name.lastName();
+
 		const bruker: Bruker = {
-			beslutterNavn: tEllerNull(faker.name.firstName() + ' ' + faker.name.lastName()),
+			beslutterNavn,
 			veilederNavn: faker.name.firstName() + ' ' + faker.name.lastName(),
 			brukerFnr: randomFnr(),
 			brukerFornavn: faker.name.firstName(),
 			brukerEtternavn: faker.name.lastName(),
 			vedtakStartet: faker.date.recent(30).toISOString(),
 			brukerOppfolgingsenhetId: randomEnhet.enhetId,
 			brukerOppfolgingsenhetNavn: randomEnhet.navn,
-			status: !beslutterNavn ? UtkastStatus.TRENGER_BESLUTTER : faker.random.objectElement(UtkastStatus) as UtkastStatus,
+			status: randomStatus,
 			statusEndret: faker.date.recent().toISOString()
 		};