- Fix for Mal og ny forms funksjonalitet som gikk i beina på react-ho…

…ok-forms i react v19 - Oppdatering og refaktor diverse steder #deploy-test-frontend
navikt · Jan 20, 2025 · 7bb3098 · 7bb3098
1 parent ef86b1a
commit 7bb3098
Show file tree

Hide file tree

Showing 9 changed files with 328 additions and 861 deletions.
diff --git a/apps/dolly-frontend/src/main/js/package-lock.json b/apps/dolly-frontend/src/main/js/package-lock.json
diff --git a/apps/dolly-frontend/src/main/js/package.json b/apps/dolly-frontend/src/main/js/package.json
@@ -80,7 +80,7 @@
     "@typescript-eslint/eslint-plugin": "^8.12.2",
     "@typescript-eslint/parser": "^8.12.2",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/ui": "^2.1.6",
+    "@vitest/ui": "^3.0.1",
     "babel-plugin-styled-components": "^2.1.4",
     "dot-prop": "^9.0.0",
     "eslint": "^9.13.0",
@@ -102,7 +102,7 @@
     "vite": "^6.0.1",
     "vite-plugin-environment": "^1.1.3",
     "vite-tsconfig-paths": "^5.1.3",
-    "vitest": "^2.1.6"
+    "vitest": "^3.0.1"
   },
   "prettier": {
     "singleQuote": true,

diff --git a/apps/dolly-frontend/src/main/js/playwright/tests/Organisasjoner.spec.ts b/apps/dolly-frontend/src/main/js/playwright/tests/Organisasjoner.spec.ts
@@ -24,7 +24,6 @@ test.describe('Naviger til organisasjoner og start en bestilling med alle tilval
 	test('passes', async ({ page }) => {
 		await page.goto('http://localhost:5678/organisasjoner')
 
-		// await page.getByTestId(TestComponentSelectors.BUTTON_HEADER_ORGANISASJONER).click()
 		await page.getByTestId(TestComponentSelectors.BUTTON_OPPRETT_ORGANISASJON).click()
 		await page.getByTestId(TestComponentSelectors.BUTTON_START_BESTILLING).click()
 

diff --git a/apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/Bestillingsveileder.tsx b/apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/Bestillingsveileder.tsx
@@ -54,7 +54,7 @@ export const Bestillingsveileder = () => {
 
 	const handleSubmit = async (values) => {
 		try {
-			await dispatch(sendBestilling(values, options, gruppeId, navigate))
+			dispatch(sendBestilling(values, options, gruppeId, navigate))
 		} catch (err) {
 			setError(err)
 		}

diff --git a/apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/options/options.tsx b/apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/options/options.tsx
@@ -26,7 +26,7 @@ export const BVOptions = (
 		opprettOrganisasjon = null,
 		leggTilPaaGruppe = null,
 		gruppe,
-	} = {},
+	}: any = {},
 	gruppeId,
 ) => {
 	const { dollyEnvironments } = useDollyEnvironments()

diff --git a/...ly-frontend/src/main/js/src/components/bestillingsveileder/startModal/NyIdent/NyIdent.tsx b/...ly-frontend/src/main/js/src/components/bestillingsveileder/startModal/NyIdent/NyIdent.tsx
@@ -88,97 +88,95 @@ export const NyIdent = ({ brukernavn, onAvbryt, onSubmit }: NyBestillingProps) =
 
 	return (
 		<FormProvider {...formMethods}>
-			<form onSubmit={() => preSubmit(formMethods.getValues())}>
-				<div className="ny-bestilling-form">
-					<h3>Velg type og antall</h3>
-					<div className="ny-bestilling-form_selects">
-						<FormSelect
-							name="identtype"
-							label="Velg identtype"
+			<div className="ny-bestilling-form">
+				<h3>Velg type og antall</h3>
+				<div className="ny-bestilling-form_selects">
+					<FormSelect
+						name="identtype"
+						label="Velg identtype"
+						size="medium"
+						options={Options('identtype')}
+						isClearable={false}
+					/>
+					<FormTextInput
+						name="antall"
+						label="Antall"
+						type="number"
+						size="medium"
+						onBlur={(event) => formMethods.setValue('antall', event?.target?.value || '1')}
+					/>
+				</div>
+				<div className="ny-bestilling-form_maler">
+					<div>
+						<DollyCheckbox
+							data-testid={TestComponentSelectors.TOGGLE_MAL}
+							name="aktiver-maler"
+							onChange={() => handleMalChange(formMethods)}
+							label="Opprett fra mal"
+							wrapperSize={'none'}
+							size={'small'}
+							isSwitch
+						/>
+					</div>
+
+					<InputDiv>
+						<DollySelect
+							name="zIdent"
+							label="Bruker"
+							isLoading={loading}
+							options={brukerOptions}
 							size="medium"
-							options={Options('identtype')}
+							onChange={(e) => handleBrukerChange(e, formMethods)}
+							value={bruker}
 							isClearable={false}
+							isDisabled={!malAktiv}
 						/>
-						<FormTextInput
-							name="antall"
-							label="Antall"
-							type="number"
-							size="medium"
-							onBlur={(event) => formMethods.setValue('antall', event?.target?.value || '1')}
+						<FormSelect
+							data-testid={TestComponentSelectors.SELECT_MAL}
+							name="mal"
+							label="Maler"
+							isLoading={loading}
+							options={malOptions}
+							size="grow"
+							isDisabled={!malAktiv}
 						/>
+					</InputDiv>
+					{erGammelFullmaktMal && (
+						<Alert variant={'warning'} size={'small'} style={{ width: '97%' }}>
+							Denne malen er utdatert, og vil muligens ikke fungere som den skal. Dette fordi master
+							for fullmakt er endret til Representasjon. Vi anbefaler at du oppretter en ny mal og
+							sletter denne malen.
+						</Alert>
+					)}
+					{erTpsfMal && (
+						<Alert variant={'warning'} size={'small'} style={{ width: '97%' }}>
+							Denne malen er utdatert, og vil dessverre ikke fungere som den skal. Dette fordi
+							master for bestillinger er endret fra TPS til PDL. Vi anbefaler at du oppretter en ny
+							mal og sletter denne malen.
+						</Alert>
+					)}
+					{erGammelAmeldingMal && (
+						<Alert variant={'warning'} size={'small'} style={{ width: '97%' }}>
+							Denne malen er utdatert, og vil ikke fungere som den skal. Dette fordi den inneholder
+							arbeidsforhold med A-melding, som ikke lenger er støttet. Vi anbefaler at du sletter
+							denne malen og oppretter en ny.
+						</Alert>
+					)}
+					<div className="mal-admin">
+						<Button kind="maler" fontSize={'1.2rem'}>
+							<NavLink to="/minside">Administrer maler</NavLink>
+						</Button>
 					</div>
-					<div className="ny-bestilling-form_maler">
-						<div>
-							<DollyCheckbox
-								data-testid={TestComponentSelectors.TOGGLE_MAL}
-								name="aktiver-maler"
-								onChange={() => handleMalChange(formMethods)}
-								label="Opprett fra mal"
-								wrapperSize={'none'}
-								size={'small'}
-								isSwitch
-							/>
-						</div>
-
-						<InputDiv>
-							<DollySelect
-								name="zIdent"
-								label="Bruker"
-								isLoading={loading}
-								options={brukerOptions}
-								size="medium"
-								onChange={(e) => handleBrukerChange(e, formMethods)}
-								value={bruker}
-								isClearable={false}
-								isDisabled={!malAktiv}
-							/>
-							<FormSelect
-								data-testid={TestComponentSelectors.SELECT_MAL}
-								name="mal"
-								label="Maler"
-								isLoading={loading}
-								options={malOptions}
-								size="grow"
-								isDisabled={!malAktiv}
-							/>
-						</InputDiv>
-						{erGammelFullmaktMal && (
-							<Alert variant={'warning'} size={'small'} style={{ width: '97%' }}>
-								Denne malen er utdatert, og vil muligens ikke fungere som den skal. Dette fordi
-								master for fullmakt er endret til Representasjon. Vi anbefaler at du oppretter en ny
-								mal og sletter denne malen.
-							</Alert>
-						)}
-						{erTpsfMal && (
-							<Alert variant={'warning'} size={'small'} style={{ width: '97%' }}>
-								Denne malen er utdatert, og vil dessverre ikke fungere som den skal. Dette fordi
-								master for bestillinger er endret fra TPS til PDL. Vi anbefaler at du oppretter en
-								ny mal og sletter denne malen.
-							</Alert>
-						)}
-						{erGammelAmeldingMal && (
-							<Alert variant={'warning'} size={'small'} style={{ width: '97%' }}>
-								Denne malen er utdatert, og vil ikke fungere som den skal. Dette fordi den
-								inneholder arbeidsforhold med A-melding, som ikke lenger er støttet. Vi anbefaler at
-								du sletter denne malen og oppretter en ny.
-							</Alert>
-						)}
-						<div className="mal-admin">
-							<Button kind="maler" fontSize={'1.2rem'}>
-								<NavLink to="/minside">Administrer maler</NavLink>
-							</Button>
-						</div>
-					</div>
-					<ModalActionKnapper
-						data-testid={TestComponentSelectors.BUTTON_START_BESTILLING}
-						submitknapp="Start bestilling"
-						disabled={!formMethods.formState.isValid || formMethods.formState.isSubmitting}
-						onSubmit={() => preSubmit(formMethods.getValues())}
-						onAvbryt={onAvbryt}
-						center
-					/>
 				</div>
-			</form>
+				<ModalActionKnapper
+					data-testid={TestComponentSelectors.BUTTON_START_BESTILLING}
+					submitknapp="Start bestilling"
+					disabled={!formMethods.formState.isValid || formMethods.formState.isSubmitting}
+					onSubmit={() => preSubmit(formMethods.getValues())}
+					onAvbryt={onAvbryt}
+					center
+				/>
+			</div>
 		</FormProvider>
 	)
 }

diff --git a/apps/dolly-frontend/src/main/js/src/components/ui/modal/DollyModal.tsx b/apps/dolly-frontend/src/main/js/src/components/ui/modal/DollyModal.tsx
@@ -31,6 +31,9 @@ type DollyModalProps = {
 	minWidth?: string
 }
 
+// Set the app element for accessibility
+Modal.setAppElement('#root')
+
 export const DollyModal: React.FC<DollyModalProps> = ({
 	children,
 	isOpen,