Merge pull request #27 from navikt/dev

AlexGaard · web-flow · commit f4a7f5d1c337 · 2021-04-06T13:30:54.000+02:00
Prodsetting
diff --git a/src/app.tsx b/src/app.tsx
@@ -5,7 +5,6 @@ import { InternflateDecorator } from './components/internflate-decorator/internf
 import { Hovedside } from './hovedside/hovedside';
 import { DataFetcher } from './components/datafetcher';
 import { useDataFetcherStore } from './stores/data-fetcher-store';
-import { PTO_VEDTAKSSTOTTE_PILOT } from './rest/feature';
 import { PrelanseringInfoSide } from './prelansering-side/prelansering-side';
 
 function App() {
@@ -20,16 +19,16 @@ function App() {
 }
 
 function Innhold() {
-	const { featuresFetcher } = useDataFetcherStore();
-	const erPilotTogglePa = featuresFetcher.data[PTO_VEDTAKSSTOTTE_PILOT];
+	const { tilhorerVeilederUtrulletKontorFetcher } = useDataFetcherStore();
+	const harTilgang = tilhorerVeilederUtrulletKontorFetcher.data;
 
-	return !erPilotTogglePa ? (
-		<PrelanseringInfoSide />
-	) : (
+	return harTilgang ? (
 		<>
 			<Header />
 			<Hovedside />
 		</>
+	) : (
+		<PrelanseringInfoSide />
 	);
 }
 
diff --git a/src/components/datafetcher.tsx b/src/components/datafetcher.tsx
@@ -5,7 +5,7 @@ import { AlertStripeFeil } from 'nav-frontend-alertstriper';
 import Spinner from './felles/spinner/spinner';
 
 export function DataFetcher(props: { children: any }) {
-	const { innloggetVeilederFetcher, aktivEnhetFetcher, featuresFetcher } = useDataFetcherStore();
+	const { innloggetVeilederFetcher, aktivEnhetFetcher, tilhorerVeilederUtrulletKontorFetcher } = useDataFetcherStore();
 
 	useEffect(() => {
 		if (isNotStarted(innloggetVeilederFetcher)) {
@@ -16,16 +16,16 @@ export function DataFetcher(props: { children: any }) {
 			aktivEnhetFetcher.fetch(null);
 		}
 
-		if (isNotStarted(featuresFetcher)) {
-			featuresFetcher.fetch(null);
+		if (isNotStarted(tilhorerVeilederUtrulletKontorFetcher)) {
+			tilhorerVeilederUtrulletKontorFetcher.fetch(null);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [innloggetVeilederFetcher, aktivEnhetFetcher, featuresFetcher]);
+	}, [innloggetVeilederFetcher, aktivEnhetFetcher, tilhorerVeilederUtrulletKontorFetcher]);
 
 	// Trenger ikke å sjekke om aktivEnhetFetcher er ferdig
-	if (isAnyNotStartedOrPending([innloggetVeilederFetcher, aktivEnhetFetcher, featuresFetcher])) {
+	if (isAnyNotStartedOrPending([innloggetVeilederFetcher, aktivEnhetFetcher, tilhorerVeilederUtrulletKontorFetcher])) {
 		return <Spinner />;
-	} else if (hasAnyFailed([innloggetVeilederFetcher, aktivEnhetFetcher, featuresFetcher])) {
+	} else if (hasAnyFailed([innloggetVeilederFetcher, aktivEnhetFetcher, tilhorerVeilederUtrulletKontorFetcher])) {
 		return (
 			<AlertStripeFeil className="vedtaksstotte-alert">
 				Det oppnås for tiden ikke kontakt med alle baksystemer.
diff --git a/src/components/filters/bruker-filter/bruker-filter.tsx b/src/components/filters/bruker-filter/bruker-filter.tsx
@@ -15,6 +15,7 @@ export const BrukerFilter = () => {
 		<div className="bruker-filter">
 			<Element>Bruker</Element>
 			<Checkbox
+				aria-label="Filtrer mine brukere"
 				label="Mine brukere"
 				className="bruker-filter__checkbox"
 				checked={filters.visMineBrukere}
diff --git a/src/components/filters/status-dropwdown/status-dropdown.tsx b/src/components/filters/status-dropwdown/status-dropdown.tsx
@@ -30,6 +30,7 @@ export const StatusDropdown = () => {
 		<div className="status-dropdown">
 			<Element>Status</Element>
 			<Select
+				aria-label="Filtrer på status"
 				inputId="status-filter"
 				placeholder="Filtrer på status"
 				value={value}
diff --git a/src/components/pagination-bar/pagination-bar.tsx b/src/components/pagination-bar/pagination-bar.tsx
@@ -49,7 +49,7 @@ export function PaginationBar() {
         <div className="pagination-bar">
             <div>
                 <Show if={hasData(brukereFetcher)}>
-                    <Element>
+                    <Element aria-live="polite">
                         Viser {fraBruker}-{tilBruker} av totalt {totaltBrukere} brukere
                     </Element>
                 </Show>
@@ -67,7 +67,7 @@ export function PaginationBar() {
                     <PagineringKnapp aria-label="Første side" onClick={() => handlePageChanged(1)}>1</PagineringKnapp>
                 </Show>
 
-                <PagineringKnapp aria-label="Valgt side">
+                <PagineringKnapp aria-live="polite" aria-label="Valgt side">
                     <strong>{currentPage}</strong>
                 </PagineringKnapp>
 
diff --git a/src/components/sok-sync.tsx b/src/components/sok-sync.tsx
@@ -5,7 +5,6 @@ import { useSokStore } from '../stores/sok-store';
 import { hasFinishedWithData } from '../rest/utils';
 import { usePrevious } from '../utils';
 import { BeslutteroversiktSok } from '../rest/api';
-import { PTO_VEDTAKSSTOTTE_PILOT } from '../rest/feature';
 import { logMetrikk } from '../utils/logger';
 
 function logSokMetrikker(sok: BeslutteroversiktSok, currentPage: number): void {
@@ -27,13 +26,13 @@ function logSokMetrikker(sok: BeslutteroversiktSok, currentPage: number): void {
 }
 
 export const SokSync = () => {
-	const { brukereFetcher, featuresFetcher } = useDataFetcherStore();
+	const { brukereFetcher, tilhorerVeilederUtrulletKontorFetcher } = useDataFetcherStore();
 	const { filters, currentPage, pageSize, orderByDirection, orderByField, seeAll, setTotalPages, setCurrentPage } = useSokStore();
 	const previousFilters = usePrevious(filters);
 
 	useEffect(() => {
 		// Ikke søk hvis man ikke har tilgang til piloten
-		if (!featuresFetcher.data || !featuresFetcher.data[PTO_VEDTAKSSTOTTE_PILOT]) {
+		if (!tilhorerVeilederUtrulletKontorFetcher.data) {
 			return;
 		}
 
@@ -47,7 +46,7 @@ export const SokSync = () => {
 		brukereFetcher.fetch({ sok });
 		logSokMetrikker(sok, currentPage);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [filters, currentPage, orderByDirection, orderByField, seeAll, featuresFetcher.data]);
+	}, [filters, currentPage, orderByDirection, orderByField, seeAll, tilhorerVeilederUtrulletKontorFetcher.data]);
 
 	useEffect(() => {
 		if (hasFinishedWithData(brukereFetcher)) {
diff --git a/src/components/user-table/body/user-table-body.less b/src/components/user-table/body/user-table-body.less
@@ -22,7 +22,7 @@
     display: grid;
     .column-template();
     justify-items: start;
-    padding: 1.5rem 2rem;
+    padding: 1rem 2rem;
     cursor: pointer;
     text-align: center;
     align-items: end;
diff --git a/src/components/user-table/body/user-table-body.tsx b/src/components/user-table/body/user-table-body.tsx
@@ -11,8 +11,8 @@ interface UserTableBodyProps {
 
 export const UserTableBody = (props: UserTableBodyProps) => {
     return (
-	    <ul className="user-table-body">
-		    {props.brukere.map((bruker, idx) => <UserRow bruker={bruker} aktivEnhet={props.aktivEnhet} key={idx} />)}
-	    </ul>
+	    <div role="rowgroup" className="user-table-body">
+		    {props.brukere.map((bruker, idx) => <UserRow idx={idx} bruker={bruker} aktivEnhet={props.aktivEnhet} key={idx} />)}
+	    </div>
     );
 };
diff --git a/src/components/user-table/body/user-table-row.tsx b/src/components/user-table/body/user-table-row.tsx
@@ -10,7 +10,7 @@ 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: { idx: number, bruker: Bruker, aktivEnhet: OrNothing<string> }) => {
 	const {
 		brukerFnr, brukerFornavn, brukerEtternavn, statusEndret,
 		brukerOppfolgingsenhetNavn, vedtakStartet,
@@ -31,18 +31,18 @@ export const UserRow = (props: { bruker: Bruker, aktivEnhet: OrNothing<string> }
 	const alignStart: CSSProperties = { textAlign: 'start' };
 
 	return (
-		<li className="user-table-row">
+		<div role="row" aria-rowindex={props.idx} className="user-table-row">
 			<a className={cls('user-table-row__innhold', {'user-table-row__innhold--maskert': erMaskert})} href={lagBrukerUrl()}>
-				<Normaltekst style={alignStart}>{lagBrukerNavn(brukerFornavn, brukerEtternavn)}</Normaltekst>
-				<Element>{brukerFnr}</Element>
-				<Normaltekst>{formatDateStr(vedtakStartet)}</Normaltekst>
+				<Normaltekst tag="span" role="cell" style={alignStart}>{lagBrukerNavn(brukerFornavn, brukerEtternavn)}</Normaltekst>
+				<Element tag="span" role="cell">{brukerFnr}</Element>
+				<Normaltekst tag="span" role="cell">{formatDateStr(vedtakStartet)}</Normaltekst>
 				<UtkastStatusData status={status}/>
-				<Element style={alignStart}>{beslutterNavn || '-'}</Element>
-				<Normaltekst style={alignStart}>{veilederNavn}</Normaltekst>
-				<Normaltekst>{formatDateTime(statusEndret)}</Normaltekst>
-				<Normaltekst>{fjernNavFraEnhetNavn(brukerOppfolgingsenhetNavn)}</Normaltekst>
+				<Element tag="span" role="cell" style={alignStart}>{beslutterNavn || '-'}</Element>
+				<Normaltekst tag="span" role="cell" style={alignStart}>{veilederNavn}</Normaltekst>
+				<Normaltekst tag="span" role="cell">{formatDateTime(statusEndret)}</Normaltekst>
+				<Normaltekst tag="span" role="cell">{fjernNavFraEnhetNavn(brukerOppfolgingsenhetNavn)}</Normaltekst>
 			</a>
-		</li>
+		</div>
 	);
 };
 
@@ -65,7 +65,7 @@ const UtkastStatusData = (props: { status: UtkastStatus }) => {
 	}
 
 	return (
-		<span className={'status'}>
+		<span role="cell" className={'status'}>
 			<img className={'status_ikon'} src={statusIkon} alt={'status ikon'}/>
 			<Normaltekst>{mapBrukerStatusTilTekst(props.status)}</Normaltekst>
 		</span>
diff --git a/src/components/user-table/header/user-table-header.tsx b/src/components/user-table/header/user-table-header.tsx
@@ -1,11 +1,6 @@
 import React from 'react';
 import cls from 'classnames';
-import {
-	INITIAL_DIRECTION,
-	OnOrderByChanged,
-	OrderByData,
-	toggleOrderByDirection
-} from '../table-utils';
+import { INITIAL_DIRECTION, OnOrderByChanged, OrderByData, toggleOrderByDirection } from '../table-utils';
 import Show from '../../felles/show';
 import arrowDownIcon from './arrow-down.svg';
 import './user-table-header.less';
@@ -33,15 +28,17 @@ export const UserTableHeader = (props: UserTableHeaderProps) => {
 	}
 
     return (
-    	<div className="user-table-header">
-		    <HeaderField name={HeaderFieldName.BRUKER_ETTERNAVN} text="Etternavn, Fornavn" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
-		    <HeaderField name={HeaderFieldName.BRUKER_FNR} text="Fødselsnummer" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
-		    <HeaderField name={HeaderFieldName.VEDTAK_STARTET} text="Vedtak startet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
-		    <HeaderField name={HeaderFieldName.STATUS} text="Status" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
-		    <HeaderField name={HeaderFieldName.BESLUTTER_NAVN} text="Kvalitetssikrer" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
-		    <HeaderField name={HeaderFieldName.VEILEDER_NAVN} text="Veileder" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
-		    <HeaderField name={HeaderFieldName.STATUS_ENDRET} text="Status endret" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
-		    <HeaderField name={HeaderFieldName.BRUKER_OPPFOLGINGSENHET_NAVN} text="Enhet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
+    	<div role="rowgroup">
+		    <div role="row" className="user-table-header">
+			    <HeaderField name={HeaderFieldName.BRUKER_ETTERNAVN} text="Etternavn, Fornavn" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
+			    <HeaderField name={HeaderFieldName.BRUKER_FNR} text="Fødselsnummer" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
+			    <HeaderField name={HeaderFieldName.VEDTAK_STARTET} text="Vedtak startet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
+			    <HeaderField name={HeaderFieldName.STATUS} text="Status" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
+			    <HeaderField name={HeaderFieldName.BESLUTTER_NAVN} text="Kvalitetssikrer" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
+			    <HeaderField name={HeaderFieldName.VEILEDER_NAVN} text="Veileder" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
+			    <HeaderField name={HeaderFieldName.STATUS_ENDRET} text="Status endret" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
+			    <HeaderField name={HeaderFieldName.BRUKER_OPPFOLGINGSENHET_NAVN} text="Enhet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
+		    </div>
 	    </div>
     );
 };
@@ -60,8 +57,12 @@ const HeaderField = (props: HeaderFieldProps) => {
 		'table-header-field__order-icon--asc': orderByData.direction === OrderByDirection.ASC
 	});
 
+	const ariaSort = name === orderByData.field && orderByData.direction
+			? (orderByData.direction === OrderByDirection.ASC ? 'ascending' : 'descending')
+			: 'none';
+
 	return (
-		<button onClick={() => onOrderByChanged(name)} className="table-header-field">
+		<button role="columnheader" aria-sort={ariaSort} onClick={() => onOrderByChanged(name)} className="table-header-field">
 			{text}
 			<Show if={orderByData.field === name && orderByData.direction !== undefined}>
 				<img className={iconClasses} src={arrowDownIcon} alt={alt} />
diff --git a/src/components/user-table/user-table.less b/src/components/user-table/user-table.less
@@ -2,6 +2,8 @@
 
 .user-table {
   width: 100%;
+  min-width: 950px;
+  overflow-x: auto;
 
   &__no-users {
     margin: 2rem auto 0 auto;
diff --git a/src/components/user-table/user-table.tsx b/src/components/user-table/user-table.tsx
@@ -26,21 +26,20 @@ export const UserTable = () => {
 	}
 
     return (
-    	<section className="user-table">
+    	<div role="table" aria-label="Brukere som trenger kvalitetssikring" aria-rowcount={tableBrukere.length} className="user-table">
 		    <UserTableHeader orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
 		    <Show if={isNotStartedOrPending(brukereFetcher)}>
 			    <Spinner />
 		    </Show>
-
 		    {
 		    	tableBrukere.length === 0 && hasFinished(brukereFetcher)
 				    ? (
 					    <AlertStripeInfo className="user-table__no-users">
-						    Fant ingen brukere
+						    <span role="alert" aria-live="polite">Fant ingen brukere</span>
 					    </AlertStripeInfo>
 			        )
 				    : <UserTableBody brukere={tableBrukere} aktivEnhet={aktivEnhet} />
 		    }
-	    </section>
+	    </div>
     );
 };
diff --git a/src/hovedside/hovedside.less b/src/hovedside/hovedside.less
@@ -4,6 +4,7 @@
   flex-direction: column;
 
   &__table {
+    max-width: 1900px;
     margin: 2rem 2.5rem;
   }
 
diff --git a/src/mock/data/features.ts b/src/mock/data/features.ts
diff --git a/src/mock/index.ts b/src/mock/index.ts
@@ -1,9 +1,8 @@
 import FetchMock, { MiddlewareUtils, MockHandler } from 'yet-another-fetch-mock';
 import { mockBeslutteroversiktSok } from './sok-mock';
-import { MODIACONTEXTHOLDER_API, VEILARBVEILEDER_API } from '../rest/api';
+import { MODIACONTEXTHOLDER_API, VEILARBVEDTAKSSTOTTE_API, VEILARBVEILEDER_API } from '../rest/api';
 import { innloggetVeileder } from './data/innlogget-veileder';
 import { aktivEnhet } from './data/aktiv-enhet';
-import features from './data/features';
 
 export interface Mock {
 	url: string;
@@ -18,7 +17,7 @@ const fetchMock = FetchMock.configure({
 fetchMock.post(mockBeslutteroversiktSok.url, mockBeslutteroversiktSok.handler);
 fetchMock.get(`${VEILARBVEILEDER_API}/veileder/v2/me`, jsonResponse(innloggetVeileder));
 fetchMock.get(`${MODIACONTEXTHOLDER_API}/context/aktivenhet`, jsonResponse(aktivEnhet));
-fetchMock.get('/veilarbpersonflatefs/api/feature', jsonResponse(features));
+fetchMock.get(`${VEILARBVEDTAKSSTOTTE_API}/utrulling/tilhorerVeilederUtrulletKontor`, jsonResponse(true));
 
 function jsonResponse(value: any): MockHandler {
 	return (req, res, ctx) => res(ctx.json(value));
diff --git a/src/rest/api.ts b/src/rest/api.ts
@@ -1,12 +1,10 @@
 import { FetchInfo } from './utils';
 import { OrNothing } from '../utils/types/ornothing';
 import { UtkastStatus } from './data/bruker';
-import { TOGGLES } from './feature';
 
 export const VEILARBVEDTAKSSTOTTE_API = '/veilarbvedtaksstotte/api';
 export const VEILARBVEILEDER_API = '/veilarbveileder/api';
 export const MODIACONTEXTHOLDER_API = '/modiacontextholder/api';
-export const FEATURE_TOGGLE_URL = '/veilarbpersonflatefs/api/feature';
 
 export interface BeslutteroversiktSok {
 	fra: number;
@@ -37,14 +35,10 @@ export enum OrderByField {
 }
 
 export enum OrderByDirection {
-	ASC, DESC
+	ASC = 'ASC',
+	DESC = 'DESC'
 }
 
-export const lagHentFeaturesFetchInfo = (): FetchInfo => {
-	const toggles = TOGGLES.map(element => 'feature=' + element).join('&');
-	return { url: `${FEATURE_TOGGLE_URL}/?${toggles}` };
-};
-
 export const lagHentBrukereFetchInfo = (params: { sok: BeslutteroversiktSok }): FetchInfo => ({
 	url: `${VEILARBVEDTAKSSTOTTE_API}/beslutteroversikt/sok`,
 	method: 'POST',
@@ -64,3 +58,8 @@ export const lagHentAktivEnhetFetchInfo = (): FetchInfo => ({
 	credentials: 'same-origin',
 	url: `${MODIACONTEXTHOLDER_API}/context/aktivenhet`
 });
+
+export const lagHentTilhorerVeilederUtrulletKontor = (): FetchInfo => ({
+	credentials: 'same-origin',
+	url: `${VEILARBVEDTAKSSTOTTE_API}/utrulling/tilhorerVeilederUtrulletKontor`
+});
diff --git a/src/rest/feature.ts b/src/rest/feature.ts
diff --git a/src/stores/data-fetcher-store.ts b/src/stores/data-fetcher-store.ts
@@ -3,20 +3,19 @@ import useFetch from '../rest/use-fetch';
 import {
 	BeslutteroversiktSok,
 	lagHentAktivEnhetFetchInfo,
-	lagHentBrukereFetchInfo, lagHentFeaturesFetchInfo,
-	lagHentInnloggetVeilederFetchInfo
+	lagHentBrukereFetchInfo,
+	lagHentInnloggetVeilederFetchInfo, lagHentTilhorerVeilederUtrulletKontor
 } from '../rest/api';
 import { BrukereMedAntall } from '../rest/data/bruker';
 import { InnloggetVeileder } from '../rest/data/innlogget-veileder';
 import { AktivEnhet } from '../rest/data/aktiv-enhet';
 import { OrNothing } from '../utils/types/ornothing';
-import { Features } from '../rest/feature';
 
 export const [DataFetcherStoreProvider, useDataFetcherStore] = constate(() => {
 	const brukereFetcher = useFetch<BrukereMedAntall, { sok: BeslutteroversiktSok }>(lagHentBrukereFetchInfo);
 	const innloggetVeilederFetcher = useFetch<InnloggetVeileder>(lagHentInnloggetVeilederFetchInfo);
 	const aktivEnhetFetcher = useFetch<OrNothing<AktivEnhet>>(lagHentAktivEnhetFetchInfo);
-	const featuresFetcher = useFetch<Features>(lagHentFeaturesFetchInfo);
+	const tilhorerVeilederUtrulletKontorFetcher = useFetch<boolean>(lagHentTilhorerVeilederUtrulletKontor);
 
-	return { brukereFetcher, innloggetVeilederFetcher, aktivEnhetFetcher, featuresFetcher };
+	return { brukereFetcher, innloggetVeilederFetcher, aktivEnhetFetcher, tilhorerVeilederUtrulletKontorFetcher };
 });
