Feature/react compiler migration

apps/dolly-backend/src/main/java/no/nav/dolly/provider/InfostripeController.java

@@ -19,11 +19,14 @@
 import org.springframework.web.bind.annotation.PutMapping;
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.ResponseStatus;
 import org.springframework.web.bind.annotation.RestController;
 import reactor.core.publisher.Flux;
 import reactor.core.publisher.Mono;
 
+import static org.apache.commons.lang3.BooleanUtils.isTrue;
+
 @Slf4j
 @RestController
 @RequiredArgsConstructor
@@ -34,11 +37,14 @@ public class InfostripeController {
     private final MapperFacade mapperFacade;
 
     @GetMapping
-    @Operation(description = "Hent alle gyldige informasjonsmeldinger")
-    public Flux<InfostripeMelding> hentAlle() {
+    @Operation(description = "Hent alle gjeldende informasjonsmeldinger")
+    public Flux<InfostripeMelding> hentAlle(@RequestParam(required = false, defaultValue = "false", name = "inkluderFremtidige") boolean inkluderFremtidige) {
 
-        return informasjonsmeldingRepository.findGyldigMeldinger()
-                .map(melding -> mapperFacade.map(melding, InfostripeMelding.class));
+        return isTrue(inkluderFremtidige) ?
+                informasjonsmeldingRepository.findGjeldendeOgFremtidigeMeldinger()
+                        .map(melding -> mapperFacade.map(melding, InfostripeMelding.class)) :
+                informasjonsmeldingRepository.findGjeldendeMeldinger()
+                        .map(melding -> mapperFacade.map(melding, InfostripeMelding.class));
     }
 
     @PostMapping

apps/dolly-backend/src/main/java/no/nav/dolly/repository/InformasjonsmeldingRepository.java

@@ -15,5 +15,12 @@ public interface InformasjonsmeldingRepository extends ReactiveCrudRepository<In
             (i.expires is null or i.expires >= current_timestamp)
             order by i.id desc
             """)
-    Flux<InfoStripe> findGyldigMeldinger();
+    Flux<InfoStripe> findGjeldendeMeldinger();
+
+    @Query("""
+            select * from info_stripe i where
+            (i.expires is null or i.expires >= current_timestamp)
+            order by i.id desc
+            """)
+    Flux<InfoStripe> findGjeldendeOgFremtidigeMeldinger();
 }

apps/dolly-frontend/src/main/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dolly",
-  "version": "3.1.13",
+  "version": "3.2.0",
   "type": "module",
   "description": "",
   "main": "index.js",

apps/dolly-frontend/src/main/js/playwright.config.js

@@ -36,16 +36,11 @@ export default defineConfig({
 		},
 	},
 
-	/* Configure projects for major browsers */
 	projects: [
 		{
 			name: 'Google Chrome',
 			use: { ...devices['Desktop Chrome'], channel: 'chrome' },
 		},
-		{
-			name: 'Microsoft Edge',
-			use: { ...devices['Desktop Edge'], channel: 'msedge' },
-		},
 	],
 
 	/* Run the local dev server before starting the tests */

apps/dolly-frontend/src/main/js/playwright/tests/Identvisning.spec.ts

@@ -20,8 +20,10 @@ test('Åpne bestilt ident med knytning mot alle fagsystem', async ({ page }) =>
 		})
 	await page.getByTestId(TestComponentSelectors.TOGGLE_VISNING_PERSONER).click()
 	await page.getByTestId(TestComponentSelectors.TOGGLE_PERSON_IBRUK).click()
-	await expect(page.getByTestId(TestComponentSelectors.TOGGLE_PERSON_IBRUK)).toBeEnabled()
+	await expect(page.getByTestId(TestComponentSelectors.TOGGLE_PERSON_IBRUK)).toBeChecked()
 	await page.getByTestId(TestComponentSelectors.TOGGLE_PERSON_IBRUK).click()
+	await expect(page.getByTestId(TestComponentSelectors.TOGGLE_PERSON_IBRUK)).not.toBeChecked()
+
 	await page.getByTestId(TestComponentSelectors.BUTTON_OPEN_IDENT).click()
 	await page.getByTestId(TestComponentSelectors.BUTTON_OPEN_BESTILLINGSDETALJER).click()
 	await page.waitForTimeout(300)
@@ -40,6 +42,7 @@ test('Åpne bestilt ident med knytning mot alle fagsystem', async ({ page }) =>
 
 	for (const hover_miljoe of await page.getByTestId(TestComponentSelectors.HOVER_MILJOE).all()) {
 		await hover_miljoe.click()
+		await page.waitForTimeout(200)
 		await page.getByTestId(TestComponentSelectors.BUTTON_OPEN_KONTAKTINFO).hover()
 		// Hover over kontaktinfo for å lukke gjeldende åpne miljø hover
 		await page.waitForTimeout(200)

apps/dolly-frontend/src/main/js/src/allRoutes.tsx

@@ -11,7 +11,6 @@ const NyansettelserPage = lazyWithPreload(() => import('@/pages/nyansettelser/Ny
 const GruppeOversikt = lazyWithPreload(() => import('@/pages/gruppeOversikt/GruppeOversikt'))
 const Organisasjon = lazyWithPreload(() => import('@/pages/organisasjoner/Organisasjoner'))
 const MinSide = lazyWithPreload(() => import('@/pages/minSide/MinSide'))
-const UI = lazyWithPreload(() => import('@/pages/ui/index'))
 const Endringsmelding = lazyWithPreload(() => import('@/pages/endringsmelding/Endringsmelding'))
 const DollySoekPage = lazyWithPreload(() => import('@/pages/dollySoek/DollySoekPage'))
 const TenorSoekPage = lazyWithPreload(() => import('@/pages/tenorSoek/TenorSoekPage'))
@@ -85,7 +84,6 @@ const allRoutes = [
 		element: Bestillingsveileder,
 	},
 	{ path: '/minside', handle: { crumb: () => 'Min side' }, element: MinSide },
-	{ path: '/ui', handle: { crumb: () => 'UI demo' }, element: UI },
 	{
 		path: '/dollysoek',
 		handle: { crumb: () => 'Søk i Dolly' },

apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/startModal/NyIdent/NyIdent.tsx

@@ -6,7 +6,7 @@ import { FormTextInput } from '@/components/ui/form/inputs/textInput/TextInput'
 import { Option } from '@/service/SelectOptionsOppslag'
 import {
 	BestillingsveilederContext,
-	BestillingsveilederContextType,
+	BestillingsveilederContextType
 } from '@/components/bestillingsveileder/BestillingsveilederContext'
 import { useDollyEnvironments } from '@/utils/hooks/useEnvironments'
 import { BVOptions } from '@/components/bestillingsveileder/options/options'
@@ -40,6 +40,7 @@ export function NyIdent({ gruppeId }: any) {
 						isClearable={false}
 					/>
 					<FormTextInput
+						useControlled
 						name="antall"
 						label="Antall"
 						type="number"

apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/stateModifier.tsx

@@ -1,10 +1,12 @@
 import { useContext } from 'react'
 import { UseFormReturn } from 'react-hook-form'
-import { BestillingsveilederContext } from './BestillingsveilederContext'
+import { BestillingsveilederContext, BestillingsveilederContextType } from './BestillingsveilederContext'
 import * as _ from 'lodash-es'
 
 export const useStateModifierFns = (formMethods: UseFormReturn, setFormMutate: any) => {
-	const { setValue, watch, resetField, getValues, reset, formState } = formMethods
+	'use no memo' // Skip compilation for this component
+
+	const { setValue, watch, resetField, getValues, reset } = formMethods
 	const opts = useContext(BestillingsveilederContext) as BestillingsveilederContextType
 
 	const set = (path: string, value: any) => setValue(path, value)
@@ -13,16 +15,15 @@ export const useStateModifierFns = (formMethods: UseFormReturn, setFormMutate: a
 	const delMutate = () => setFormMutate?.(() => undefined)
 
 	const del = (path: string | string[]) => {
-		if (Array.isArray(path)) {
-			path.forEach((p) => resetField(p))
-		} else {
-			resetField(path)
-		}
-		let newObj = _.omit(getValues(), path)
+		if (Array.isArray(path)) path.forEach((p) => resetField(p))
+		else resetField(path)
 
-		// Ingen tomme objekter guard
+		let newObj = _.omit(getValues(), path)
 		let rootPath = Array.isArray(path) ? path[0].split('.')[0] : path.split('.')[0]
-		if (path.includes('pdldata.person') || path[0].includes('pdldata.person'))
+		if (
+			(Array.isArray(path) && path[0].includes('pdldata.person')) ||
+			(!Array.isArray(path) && path.includes('pdldata.person'))
+		)
 			rootPath = 'pdldata.person'
 		if (_.isEmpty(_.get(newObj, rootPath))) newObj = _.omit(newObj, rootPath)
 		reset(newObj)
@@ -34,8 +35,8 @@ export const useStateModifierFns = (formMethods: UseFormReturn, setFormMutate: a
 
 	const allCheckedLabels = (attrs: Record<string, any>) =>
 		Object.values(attrs)
-			.filter((a) => a.checked)
-			.map((b) => b.label)
+			.filter((a: any) => a.checked) // getter recomputed each render
+			.map((b: any) => b.label)
 
 	const batchUpdate = (
 		attrs: Record<string, any>,
@@ -60,8 +61,19 @@ export const useStateModifierFns = (formMethods: UseFormReturn, setFormMutate: a
 			methods: UseFormReturn
 		}) => Record<string, any>,
 	) => {
+		// Build attrs with checked as a getter tied to form values
 		const attrs =
-			fn({ set, setMulti, opts, del, delMutate, has, values, methods: formMethods }) || {}
+			fn({
+				set,
+				setMulti,
+				opts,
+				del,
+				delMutate,
+				has,
+				values,
+				methods: formMethods,
+			}) || {}
+
 		const checked = allCheckedLabels(attrs)
 		return {
 			attrs,

apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/stegVelger/steg/steg1/Attributt.tsx

@@ -1,29 +1,43 @@
-import { DollyCheckbox } from '@/components/ui/form/inputs/checbox/Checkbox'
 import { CheckboxGroup } from '@navikt/ds-react'
+import { DollyCheckbox } from '@/components/ui/form/inputs/checbox/Checkbox'
 import { Hjelpetekst } from '@/components/hjelpetekst/Hjelpetekst'
+import React from 'react'
 
-export const Attributt = ({
+interface AttrItem {
+	label: string
+	readonly checked: boolean
+	add: () => void
+	remove: () => void
+}
+interface AttributtProps {
+	attr: AttrItem
+	vis?: boolean
+	disabled?: boolean
+	title?: string
+	id?: string
+	infoTekst?: string
+	[key: string]: any
+}
+export const Attributt: React.FC<AttributtProps> = ({
 	attr,
 	vis = true,
 	disabled = false,
-	title = null,
-	id = null,
+	title,
+	id,
 	infoTekst = '',
 	...props
 }) => {
-	if (!vis) {
-		return null
-	}
+	if (!vis) return null
 	return (
 		<div title={title} style={{ display: 'flex' }}>
 			<DollyCheckbox
-				wrapperSize={null}
-				label={attr?.label}
-				attributtCheckbox={true}
-				size={'small'}
-				onChange={attr?.checked ? attr?.remove : attr?.add}
-				value={attr?.label}
-				isDisabled={disabled}
+				wrapperSize="grow"
+				label={attr.label}
+				attributtCheckbox
+				size="small"
+				onChange={(e) => (e.target.checked ? attr.add() : attr.remove())}
+				value={attr.label}
+				disabled={disabled}
 				id={id}
 				{...props}
 			/>
@@ -34,21 +48,24 @@ export const Attributt = ({
 	)
 }
 
-export const AttributtKategori = ({ title, children, attr }) => {
+interface AttributtKategoriProps {
+	title: string
+	children: React.ReactNode
+	attr: Record<string, AttrItem>
+}
+export const AttributtKategori: React.FC<AttributtKategoriProps> = ({ title, children, attr }) => {
+	'use no memo' // Skip compilation for this component
 	const values = attr && Object.values(attr)
-	const checked = values
-		?.filter((attribute) => attribute.checked)
-		?.map((attribute) => attribute.label)
+	const checkedValues = values?.filter((a) => a.checked)?.map((a) => a.label) || []
 
 	const attributter = Array.isArray(children) ? children : [children]
-	const attributterSomSkalVises = attributter.some(
-		(attr) => attr.props.vis || !attr.props.hasOwnProperty('vis'),
+	const showAny = attributter.some(
+		(child: any) => child?.props?.vis || !child?.props?.hasOwnProperty('vis'),
 	)
-	if (!attributterSomSkalVises) {
-		return null
-	}
+	if (!showAny) return null
+
 	return (
-		<CheckboxGroup name={title} legend={title} value={checked}>
+		<CheckboxGroup name={title} legend={title} value={checkedValues}>
 			<div className="attributt-velger_panelsubcontent">{children}</div>
 		</CheckboxGroup>
 	)

apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/stegVelger/steg/steg3/MalOppsummering.tsx

@@ -76,6 +76,7 @@ export const MalOppsummering = ({
 					/>
 				) : (
 					<FormTextInput
+						useControlled
 						data-testid={TestComponentSelectors.INPUT_BESTILLING_MALNAVN}
 						name="malBestillingNavn"
 						size={'xlarge'}

apps/dolly-frontend/src/main/js/src/components/redigerGruppe/RedigerGruppe.tsx

@@ -1,15 +1,15 @@
 import { useNavigate } from 'react-router'
 import { useGruppeById } from '@/utils/hooks/useGruppe'
 import { REGEX_BACKEND_GRUPPER, useMatchMutate } from '@/utils/hooks/useMutate'
-import { Form, FormProvider, useForm } from 'react-hook-form'
+import { FormProvider, useForm } from 'react-hook-form'
 import { yupResolver } from '@hookform/resolvers/yup'
 import * as Yup from 'yup'
 import { DollyApi } from '@/service/Api'
 import React, { useState } from 'react'
 import Loading from '@/components/ui/loading/Loading'
 import NavButton from '@/components/ui/button/NavButton/NavButton'
 import { TestComponentSelectors } from '#/mocks/Selectors'
-import { FormTextInput } from '@/components/ui/form/inputs/textInput/TextInput'
+import { DollyTextInput } from '@/components/ui/form/inputs/textInput/TextInput'
 import './RedigerGruppe.less'
 import { Alert } from '@navikt/ds-react'
 
@@ -98,17 +98,6 @@ export const RedigerGruppe = ({ gruppeId, onCancel }: Props) => {
 				data-testid={TestComponentSelectors.BUTTON_OPPRETT}
 				variant={'primary'}
 				type={'submit'}
-				onClick={() => {
-					formMethods.trigger(['navn', 'hensikt'])
-					formMethods.setValue('navn', formMethods.getValues('navn'), {
-						shouldValidate: true,
-						shouldTouch: true,
-					})
-					formMethods.setValue('hensikt', formMethods.getValues('hensikt'), {
-						shouldValidate: true,
-						shouldTouch: true,
-					})
-				}}
 			>
 				{erRedigering ? 'Lagre' : 'Opprett og gå til gruppe'}
 			</NavButton>
@@ -120,27 +109,26 @@ export const RedigerGruppe = ({ gruppeId, onCancel }: Props) => {
 
 	return (
 		<FormProvider {...formMethods}>
-			<Form
-				control={formMethods.control}
+			<form
 				className={'opprett-tabellrad'}
 				autoComplete={'off'}
 				onSubmit={formMethods.handleSubmit(erRedigering ? handleUpdateGruppe : handleCreateGruppe)}
 			>
 				<div className="fields">
-					<FormTextInput
+					<DollyTextInput
+						useControlled
 						data-testid={TestComponentSelectors.INPUT_NAVN}
 						name="navn"
 						label="NAVN"
 						size="grow"
-						useOnChange={true}
 						autoFocus
 					/>
-					<FormTextInput
+					<DollyTextInput
+						useControlled
 						data-testid={TestComponentSelectors.INPUT_HENSIKT}
 						name="hensikt"
 						label="HENSIKT"
 						size="grow"
-						useOnChange={true}
 					/>
 					{buttons}
 				</div>
@@ -149,7 +137,7 @@ export const RedigerGruppe = ({ gruppeId, onCancel }: Props) => {
 						{feilmelding}
 					</Alert>
 				)}
-			</Form>
+			</form>
 		</FormProvider>
 	)
 }