Merge pull request #301 from navikt/dev

Prodsetting

package.json

@@ -11,72 +11,64 @@
 		"prepare": "husky install"
 	},
 	"dependencies": {
-		"@craco/craco": "^6.4.3",
-		"@navikt/ds-css": "0.16.19",
-		"@navikt/ds-css-internal": "0.7.3",
-		"@navikt/ds-icons": "0.8.10",
-		"@navikt/ds-react": "0.17.21",
-		"@navikt/ds-react-internal": "0.13.6",
-		"@navikt/fnrvalidator": "^1.1.4",
-		"@navikt/frontendlogger": "^2.0.0",
-		"@navikt/navspa": "4.1.1",
-		"animated-scroll-to": "^2.2.0",
+		"@craco/craco": "7.0.0-alpha.7",
+		"@navikt/ds-css": "0.18.27",
+		"@navikt/ds-css-internal": "0.7.7",
+		"@navikt/ds-icons": "0.8.20",
+		"@navikt/ds-react": "0.19.25",
+		"@navikt/ds-react-internal": "0.14.26",
+		"@navikt/fnrvalidator": "1.3.0",
+		"@navikt/navspa": "5.0.1",
 		"axios": "^0.27.2",
 		"classnames": "^2.3.1",
-		"constate": "^3.1.0",
-		"craco-less": "1.20.0",
-		"loadjs": "^4.2.0",
-		"lodash.throttle": "^4.1.1",
-		"moment": "^2.29.2",
-		"nav-frontend-chevron": "^1.0.25",
-		"nav-frontend-chevron-style": "^1.0.2",
-		"nav-frontend-core": "^5.1.1",
-		"nav-frontend-ekspanderbartpanel": "4.0.2",
+		"constate": "3.3.2",
+		"craco-less": "2.1.0-alpha.0",
+		"moment": "2.29.4",
+		"nav-frontend-chevron": "1.0.30",
+		"nav-frontend-chevron-style": "1.0.4",
+		"nav-frontend-core": "6.0.1",
+		"nav-frontend-ekspanderbartpanel": "4.0.3",
 		"nav-frontend-ekspanderbartpanel-style": "2.0.1",
-		"nav-frontend-etiketter": "^2.1.3",
-		"nav-frontend-etiketter-style": "^1.0.17",
-		"nav-frontend-ikoner-assets": "^2.0.8",
-		"nav-frontend-js-utils": "^1.0.15",
-		"nav-frontend-knapper": "^2.1.4",
-		"nav-frontend-knapper-style": "^1.0.13",
-		"nav-frontend-lenker": "^1.0.56",
-		"nav-frontend-lenker-style": "^0.2.41",
-		"nav-frontend-lukknapp": "^1.2.2",
-		"nav-frontend-lukknapp-style": "^0.2.36",
-		"nav-frontend-modal": "^1.2.2",
-		"nav-frontend-modal-style": "^0.3.49",
-		"nav-frontend-paneler": "^2.0.26",
-		"nav-frontend-paneler-style": "^0.3.33",
-		"nav-frontend-skjema": "^4.0.1",
-		"nav-frontend-skjema-style": "^3.0.1",
-		"nav-frontend-spinner": "^2.0.12",
-		"nav-frontend-spinner-style": "^0.2.9",
-		"nav-frontend-tekstomrade": "^2.1.3",
-		"nav-frontend-typografi": "^3.1.2",
-		"nav-frontend-typografi-style": "^1.1.1",
+		"nav-frontend-etiketter": "3.0.2",
+		"nav-frontend-etiketter-style": "2.0.2",
+		"nav-frontend-ikoner-assets": "3.0.1",
+		"nav-frontend-js-utils": "1.0.20",
+		"nav-frontend-knapper": "3.1.2",
+		"nav-frontend-knapper-style": "2.1.1",
+		"nav-frontend-lenker": "2.0.1",
+		"nav-frontend-lenker-style": "2.0.1",
+		"nav-frontend-lukknapp": "2.0.1",
+		"nav-frontend-lukknapp-style": "2.0.1",
+		"nav-frontend-modal": "2.0.1",
+		"nav-frontend-modal-style": "2.0.1",
+		"nav-frontend-paneler": "3.0.1",
+		"nav-frontend-paneler-style": "2.0.1",
+		"nav-frontend-skjema": "4.0.5",
+		"nav-frontend-skjema-style": "3.0.2",
+		"nav-frontend-spinner": "3.0.1",
+		"nav-frontend-spinner-style": "1.0.2",
+		"nav-frontend-tekstomrade": "3.0.1",
+		"nav-frontend-typografi": "4.0.1",
+		"nav-frontend-typografi-style": "2.0.1",
 		"prop-types": "^15.7.2",
 		"react": "17.0.2",
 		"react-app-polyfill": "3.0.0",
 		"react-collapse": "^5.1.0",
 		"react-dom": "17.0.2",
-		"react-modal": "^3.12.1",
-		"react-motion": "^0.5.2",
-		"react-scripts": "^4.0.3"
+		"react-modal": "3.15.1",
+		"react-scripts": "5.0.1"
 	},
 	"devDependencies": {
 		"@types/classnames": "^2.2.11",
-		"@types/jest": "27.4.1",
-		"@types/loadjs": "^4.0.0",
-		"@types/node": "17.0.21",
-		"@types/react": "^17.0.40 ",
+		"@types/react": "17.0.47",
 		"@types/react-collapse": "^5.0.0",
 		"@types/react-dom": "17.0.13",
-		"@types/react-modal": "^3.10.6",
+		"@types/react-modal": "3.13.1",
 		"cross-env": "^7.0.3",
-		"husky": "^7.0.4",
-		"msw": "^0.26.0",
-		"prettier": "2.6.2",
-		"typescript": "4.6.2"
+		"husky": "7.0.4",
+		"msw": "0.42.3",
+		"prettier": "2.7.1",
+		"typescript": "4.7.4"
 	},
 	"eslintConfig": {
 		"extends": [

src/components/felles/kopiknapp.tsx

@@ -1,14 +1,14 @@
 import { Copy, CopyFilled } from '@navikt/ds-icons';
 import { Button } from '@navikt/ds-react';
 import { useState } from 'react';
-import { logger } from '../../utils/logger';
+import { logMetrikk } from '../../utils/logger';
 import './kopiknapp.less';
 
 function Kopiknapp(props: { kopitekst: string; type: string }) {
 	const [hover, setHover] = useState(false);
 
 	function copyToClipboard() {
-		logger.event('maofs.kopiknapp', { type: props.type });
+		logMetrikk('maofs.kopiknapp', { type: props.type });
 		navigator.clipboard.writeText(props.kopitekst);
 	}
 

src/components/felles/til-toppen-knapp.tsx

@@ -10,7 +10,7 @@ export const TilToppenKnapp = () => {
 
 	const skrollOgLogg = () => {
 		scrollTilElement('#veilarbpersonflatefs-root');
-		logMetrikk('tiltoppenknapp');
+		logMetrikk('veilarbmaofs.metrikker.tiltoppenknapp');
 	};
 
 	const synlighet = () => {

src/components/paneler/innhold/cv/last-ned-cv.tsx

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import Lenke from 'nav-frontend-lenker';
-import { logger } from '../../../../utils/logger';
+import { logMetrikk } from '../../../../utils/logger';
 import { Download, DownloadFilled } from '@navikt/ds-icons';
 
 export function LastNedCV(props: { erManuell: boolean; lastNedCvLenke: string }) {
 	const [hover, setHover] = useState(false);
 
 	const handleOnLastNedLenkeClicked = () => {
-		logger.event('veilarbmaofs.metrikker.last-ned-cv', { erManuell: props.erManuell });
+		logMetrikk('veilarbmaofs.metrikker.last-ned-cv', { erManuell: props.erManuell });
 	};
 
 	return (

src/components/paneler/panel.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Ekspanderbartpanel from 'nav-frontend-ekspanderbartpanel';
 import ErrorBoundary from '../felles/error-boundry';
-import { logger } from '../../utils/logger';
+import { logMetrikk } from '../../utils/logger';
 import { useEffect } from 'react';
 import { useAppStore } from '../../stores/app-store';
 
@@ -20,7 +20,7 @@ const Panel: React.FC<PanelProps> = ({ defaultOpen, name, id, children, tittel }
 
 	const onClick = () => {
 		const eventType = !isOpen ? 'open' : 'close';
-		logger.event('maofs.lamell-click.v2', {}, { lamell: name, type: eventType });
+		logMetrikk('maofs.lamell-click.v2', {}, { lamell: name, type: eventType });
 		if (isOpen) {
 			fjernSidemenyElement(id);
 		}

src/components/tilbakemelding/fab/tilbakemelding-fab.tsx

@@ -1,12 +1,12 @@
 import React, { useRef, useState } from 'react';
 import cls from 'classnames';
 import TilbakemeldingModal, { TilbakemeldingProps } from '../tilbakemelding-modal';
-import { logEvent } from '../../../utils/frontend-logger';
 import lukkBilde from './lukk.svg';
 import tilbakemeldingBilde from './tilbakemelding.svg';
 import './tilbakemelding-fab.less';
 import { SPOR_OM_TILBAKEMELDING } from '../../../rest/datatyper/feature';
 import { useAppStore } from '../../../stores/app-store';
+import { logMetrikk } from '../../../utils/logger';
 
 // FAB = Floating Action Button
 
@@ -28,7 +28,7 @@ export function TilbakemeldingFab() {
 
 	const handleFabClicked = () => {
 		if (!isModalOpen) {
-			logEvent('detaljer.tilbakemelding_modal_apnet');
+			logMetrikk('veilarbmaofs.detaljer.tilbakemelding_modal_apnet');
 		}
 		setModalOpen(!isModalOpen);
 	};
@@ -43,7 +43,7 @@ export function TilbakemeldingFab() {
 		startAutoClose();
 		setHideFab(true);
 		window.localStorage.setItem(TILBAKEMELDING_LOCALSTORAGE_NAME, 'true');
-		logEvent('detaljer.tilbakemelding', {
+		logMetrikk('veilarbmaofs.detaljer.tilbakemelding', {
 			feature: TILBAKEMELDING_FEATURE_TAG,
 			...tilbakemelding,
 			...checkboxStatusListe

src/mock/api/index.ts

@@ -1,13 +1,11 @@
-import { RequestHandlersList } from 'msw/lib/types/setupWorker/glossary';
-import { frontendloggerHandlers } from './frontendlogger';
 import { veilarboppfolgingHandlers } from './veilarboppfolging';
 import { veilarbpersonHandlers } from './veilarbperson';
 import { veilarbpersonflatefsHandlers } from './veilarbpersonflatefs';
 import { veilarbveilederHandlers } from './veilarbveileder';
 import { veilarbvedtaksstotteHandlers } from './veilarbvedtaksstotte';
+import { RequestHandler } from 'msw';
 
-export const allHandlers: RequestHandlersList = [
-	...frontendloggerHandlers,
+export const allHandlers: RequestHandler[] = [
 	...veilarboppfolgingHandlers,
 	...veilarbpersonHandlers,
 	...veilarbpersonflatefsHandlers,

src/mock/api/veilarboppfolging.ts

@@ -2,7 +2,7 @@ import { rest } from 'msw';
 import { UnderOppfolgingData } from '../../rest/datatyper/underOppfolgingData';
 import { OppfolgingsstatusData } from '../../rest/datatyper/oppfolgingsstatus';
 import { YtelseData } from '../../rest/datatyper/ytelse';
-import { RequestHandlersList } from 'msw/lib/types/setupWorker/glossary';
+import { RequestHandler } from 'msw';
 
 const oppfolging: UnderOppfolgingData = {
 	erManuell: true,
@@ -61,7 +61,7 @@ const ytelsestatus: YtelseData = {
 	]
 };
 
-export const veilarboppfolgingHandlers: RequestHandlersList = [
+export const veilarboppfolgingHandlers: RequestHandler[] = [
 	rest.get('/veilarboppfolging/api/person/:fnr/oppfolgingsstatus', (req, res, ctx) => {
 		return res(ctx.delay(500), ctx.json(oppfolingstatus));
 	}),

src/mock/api/veilarbperson.ts

@@ -1,5 +1,5 @@
 import { rest } from 'msw';
-import { RequestHandlersList } from 'msw/lib/types/setupWorker/glossary';
+import { RequestHandler } from 'msw';
 import { ArenaPerson, FagdokumentType, KursVarighetEnhet } from '../../rest/datatyper/arenaperson';
 import { AktorId } from '../../rest/datatyper/aktor-id';
 import { Gradering, PersonaliaV2Info, RelasjonsBosted } from '../../rest/datatyper/personaliav2';
@@ -620,7 +620,7 @@ const sykmeldtRegistering: RegistreringsData = {
 	}
 };
 
-export const veilarbpersonHandlers: RequestHandlersList = [
+export const veilarbpersonHandlers: RequestHandler[] = [
 	rest.get('/veilarbperson/api/person/cv_jobbprofil', (req, res, ctx) => {
 		return res(ctx.delay(500), ctx.json(cvOgJobbprofil));
 	}),

src/mock/api/veilarbpersonflatefs.ts

@@ -1,5 +1,5 @@
 import { rest } from 'msw';
-import { RequestHandlersList } from 'msw/lib/types/setupWorker/glossary';
+import { RequestHandler } from 'msw';
 import {
 	Features,
 	SPOR_OM_TILBAKEMELDING,
@@ -11,7 +11,7 @@ const features: Features = {
 	[INNSATSGRUPPE_OG_HOVEDMAL_FRA_VEDTAKSSTOTTE]: false
 };
 
-export const veilarbpersonflatefsHandlers: RequestHandlersList = [
+export const veilarbpersonflatefsHandlers: RequestHandler[] = [
 	rest.get('/veilarbpersonflatefs/api/feature', (req, res, ctx) => {
 		return res(ctx.delay(500), ctx.json(features));
 	})

src/mock/api/veilarbvedtaksstotte.ts

@@ -1,4 +1,4 @@
-import { RequestHandlersList } from 'msw/lib/types/setupWorker/glossary';
+import { RequestHandler } from 'msw';
 import { rest } from 'msw';
 import { Hovedmal, Innsatsbehov, Innsatsgruppe } from '../../rest/datatyper/innsatsbehov';
 
@@ -9,7 +9,7 @@ const innsatsbehov: Innsatsbehov = {
 
 const tilhorerBrukerUtrulletKontor = false;
 
-export const veilarbvedtaksstotteHandlers: RequestHandlersList = [
+export const veilarbvedtaksstotteHandlers: RequestHandler[] = [
 	rest.get('/veilarbvedtaksstotte/api/innsatsbehov', (req, res, ctx) => {
 		return res(ctx.delay(500), ctx.json(innsatsbehov));
 	}),

src/mock/api/veilarbveileder.ts

@@ -1,5 +1,5 @@
 import { rest } from 'msw';
-import { RequestHandlersList } from 'msw/lib/types/setupWorker/glossary';
+import { RequestHandler } from 'msw';
 import { VeilederData } from '../../rest/datatyper/veileder';
 
 const veileder: VeilederData = {
@@ -9,7 +9,7 @@ const veileder: VeilederData = {
 	navn: 'TJ Veiledersen'
 };
 
-export const veilarbveilederHandlers: RequestHandlersList = [
+export const veilarbveilederHandlers: RequestHandler[] = [
 	rest.get('/veilarbveileder/api/veileder/:veilederId', (req, res, ctx) => {
 		return res(ctx.delay(500), ctx.json(veileder));
 	})

src/rest/api.ts

@@ -1,6 +1,7 @@
 import { axiosInstance } from './utils';
 import { OrNothing } from '../utils/felles-typer';
 import { toggles } from './datatyper/feature';
+import { FrontendEvent } from '../utils/logger';
 
 export const fetchRegistrering = (fnr: string) => {
 	return axiosInstance.get(`/veilarbperson/api/person/registrering?fnr=${fnr}`);
@@ -53,3 +54,7 @@ export const fetchFeatureToggle = () => {
 export const fetchTilgorerBrukerUtrulletKontorForVedtaksstotte = (fnr: string) => {
 	return axiosInstance.get(`/veilarbvedtaksstotte/api/utrulling/tilhorerBrukerUtrulletKontor?fnr=${fnr}`);
 };
+
+export function sendEventTilVeilarbperson(event: FrontendEvent) {
+	return axiosInstance.post(`/veilarbperson/api/logger/event`, event);
+}

src/utils/logger.ts

@@ -1,12 +1,16 @@
-import { createFrontendLogger, DEFAULT_FRONTENDLOGGER_API_URL } from '@navikt/frontendlogger/lib';
-import { APP_NAME } from './konstanter';
+import { sendEventTilVeilarbperson } from '../rest/api';
 
-export const logger = createFrontendLogger(APP_NAME, DEFAULT_FRONTENDLOGGER_API_URL);
-
-export const logError = (fields?: {}, tags?: {}): void => {
-	logger.event(`${APP_NAME}.error`, fields, tags);
-};
+export interface FrontendEvent {
+	name: string;
+	fields?: {};
+	tags?: {};
+}
 
 export const logMetrikk = (metrikkNavn: string, fields?: {}, tags?: {}): void => {
-	logger.event(`${APP_NAME}.metrikker.${metrikkNavn}`, fields, tags);
+	if (process.env.REACT_APP_DEV === 'true') {
+		// tslint:disable-next-line:no-console
+		console.log('Event', metrikkNavn, 'Fields:', fields, 'Tags:', tags);
+	} else {
+		sendEventTilVeilarbperson({ name: `${metrikkNavn}`, fields, tags });
+	}
 };