FO-2772 Fjern "," på navn til maskerte brukere og blokker trykk

Author: AlexGaard

src/components/filters/filters.less

@@ -3,9 +3,13 @@
   justify-content: space-between;
   flex-wrap: wrap;
   margin-bottom: 2rem;
-  padding: 1rem 2rem 2rem 2rem;
+  padding: 1rem 2rem;
   background-color: white;
 
+  > * {
+    margin-bottom: 1rem;
+  }
+
   &__dropdowns {
     display: flex;
     flex-direction: row;

src/components/filters/sokefelt/sokefelt.less

@@ -1,8 +1,10 @@
 .sokefelt {
+  margin-left: 1rem;
   margin-top: auto;
   width: 400px;
 
   input {
+    height: 38px;
     font-size: 14px;
     text-overflow: ellipsis;
   }

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

@@ -23,6 +23,10 @@
   text-align: center;
   align-items: end;
 
+  &--maskert {
+    cursor: not-allowed;
+  }
+
   &:hover {
     position: relative;
     z-index: 1;

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

@@ -1,42 +1,48 @@
 import React from 'react';
+import cls from 'classnames';
 import { Bruker, UtkastStatus } from '../../../rest/data/bruker';
 import { formatDateStr, formatDateTime } from '../../../utils/date-utils';
 import { Normaltekst, Element } from 'nav-frontend-typografi';
-import { fjernNavFraEnhetNavn, mapBrukerStatusTilTekst } from '../../../utils';
+import { fjernNavFraEnhetNavn, lagBrukerNavn, mapBrukerStatusTilTekst } from '../../../utils';
 import klarForUtsendelseIcon from './status/klar_for_utsendelse.svg';
 import trengerBeslutterIcon from './status/trenger_beslutter.svg';
 import trengerTilbakemeldingIcon from './status/trenger_tilbakemelding.svg';
 import venterPaResponsIcon from './status/venter_pa_respons.svg';
 import { OrNothing } from '../../../utils/types/ornothing';
 
-export const UserRow = (props: {bruker: Bruker, aktivEnhet: OrNothing<string>}) => {
+export const UserRow = (props: { bruker: Bruker, aktivEnhet: OrNothing<string> }) => {
 	const {
 		brukerFnr, brukerFornavn, brukerEtternavn, statusEndret,
 		brukerOppfolgingsenhetNavn, vedtakStartet,
 		beslutterNavn, veilederNavn, status
 	} = props.bruker;
 
+	const erMaskert = brukerFnr === '';
+
 	function handleOnUserRowClicked() {
-		const enhetQueryParam = props.aktivEnhet ? `?enhet=${props.aktivEnhet}` : '';
-		window.location.href = `/veilarbpersonflatefs/${brukerFnr}${enhetQueryParam}#visVedtaksstotte`;
+		if (!erMaskert) {
+			const enhetQueryParam = props.aktivEnhet ? `?enhet=${props.aktivEnhet}` : '';
+			window.location.href = `/veilarbpersonflatefs/${brukerFnr}${enhetQueryParam}#visVedtaksstotte`;
+		}
 	}
 
-    return (
-    	<li className="user-table-row" onClick={handleOnUserRowClicked}>
-		    <Normaltekst>{brukerEtternavn + ', ' + brukerFornavn}</Normaltekst>
-		    <Element>{brukerFnr}</Element>
-		    <Normaltekst>{formatDateStr(vedtakStartet)}</Normaltekst>
+	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>
-    );
+			<Element>{beslutterNavn || '-'}</Element>
+			<Normaltekst>{veilederNavn}</Normaltekst>
+			<Normaltekst>{formatDateTime(statusEndret)}</Normaltekst>
+			<Normaltekst>{fjernNavFraEnhetNavn(brukerOppfolgingsenhetNavn)}</Normaltekst>
+		</li>
+	);
 };
 
 const UtkastStatusData = (props: { status: UtkastStatus }) => {
 	let statusIkon;
+
 	switch (props.status) {
 		case UtkastStatus.TRENGER_BESLUTTER:
 			statusIkon = trengerBeslutterIcon;
@@ -51,9 +57,11 @@ const UtkastStatusData = (props: { status: UtkastStatus }) => {
 			statusIkon = klarForUtsendelseIcon;
 			break;
 	}
+
 	return (
 		<span className={'status'}>
-			<img className={'status_ikon'} src={statusIkon} alt={'status ikon'} />
-		<Normaltekst>{mapBrukerStatusTilTekst(props.status)}</Normaltekst>
-	</span>);
+			<img className={'status_ikon'} src={statusIkon} alt={'status ikon'}/>
+			<Normaltekst>{mapBrukerStatusTilTekst(props.status)}</Normaltekst>
+		</span>
+	);
 };

src/mock/data/brukere.ts

@@ -23,6 +23,8 @@ function tEllerNull<T>(t: T): T | null {
 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());
@@ -39,6 +41,14 @@ export const lagBrukere = (antallBrukere: number): Bruker[] => {
 			statusEndret: faker.date.recent().toISOString()
 		};
 
+		if (maskerteBrukere > 0) {
+			bruker.brukerFnr = '';
+			bruker.brukerFornavn = '';
+			bruker.brukerEtternavn = '';
+
+			maskerteBrukere--;
+		}
+
 		brukere.push(bruker);
 	}
 

src/utils/index.ts

@@ -15,6 +15,20 @@ export function fjernNavFraEnhetNavn(enhetNavn: string): string {
 	return enhetNavn.replace('NAV', '').trim();
 }
 
+export function lagBrukerNavn(fornavn: string, etternavn: string): string {
+	const manglerFornavn = fornavn === '';
+	const manglerEtternavn = etternavn === '';
+
+	if (manglerFornavn && manglerEtternavn) {
+		return '';
+	} else if (manglerFornavn || manglerEtternavn) {
+		// Skal egentlig ikke skje, men hvis ett av navnene mangler så trenger vi ikke å separere med ","
+		return fornavn + etternavn;
+	}
+
+	return fornavn + ', ' + etternavn;
+}
+
 export function mapBrukerStatusTilTekst(status: UtkastStatus): string {
 	switch (status) {
 		case UtkastStatus.TRENGER_BESLUTTER: