Migrert Vite fra major versjon 4 til 5

En del mer refaktorering på Formik -> React-hook-forms

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

@@ -1,6 +1,7 @@
 {
   "name": "dolly",
   "version": "2.5.36",
+  "type": "module",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -121,9 +122,8 @@
     "swr": "^2.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.2",
-    "vite": "^4.0.3",
+    "vite": "^5.0.0",
     "vite-plugin-environment": "^1.1.3",
-    "vite-plugin-svgr": "^4.0.0",
     "vite-tsconfig-paths": "^4.0.0"
   },
   "prettier": {

apps/dolly-frontend/src/main/js/src/components/bestilling/gjenopprett/GjenopprettModal.tsx

@@ -1,12 +1,13 @@
 import DollyModal from '@/components/ui/modal/DollyModal'
-import { Formik } from 'formik'
 import { filterMiljoe } from '@/components/miljoVelger/MiljoeInfo'
 import React, { Fragment } from 'react'
 import { MiljoVelger } from '@/components/miljoVelger/MiljoVelger'
 import NavButton from '@/components/ui/button/NavButton/NavButton'
 import * as yup from 'yup'
 import { ErrorBoundary } from '@/components/ui/appError/ErrorBoundary'
 import { useDollyEnvironments } from '@/utils/hooks/useEnvironments'
+import { useForm } from 'react-hook-form'
+import { yupResolver } from '@hookform/resolvers/yup'
 
 type GjenopprettModalProps = {
 	gjenopprettHeader: any
@@ -26,44 +27,35 @@ export const GjenopprettModal = ({
 	brukertype,
 }: GjenopprettModalProps) => {
 	const { dollyEnvironments: tilgjengeligeEnvironments } = useDollyEnvironments()
-
 	const schemaValidation = yup.object().shape({
 		environments: yup.array().required('Velg minst ett miljø'),
 	})
+	const formMethods = useForm({
+		defaultValues: { environments: filterMiljoe(tilgjengeligeEnvironments, environments) },
+		resolver: yupResolver(schemaValidation),
+	})
 
 	return (
 		<DollyModal isOpen={true} closeModal={closeModal} width="50%" overflow="auto">
 			<ErrorBoundary>
 				{gjenopprettHeader}
-				<Formik
-					initialValues={{
-						environments: filterMiljoe(tilgjengeligeEnvironments, environments),
-					}}
-					onSubmit={submitFormik}
-					validationSchema={schemaValidation}
-				>
-					{(formikProps) => {
-						return (
-							<Fragment>
-								<MiljoVelger
-									bestillingsdata={bestilling ? bestilling.bestilling : null}
-									heading="Velg miljø å gjenopprette i"
-									bankIdBruker={brukertype && brukertype === 'BANKID'}
-									alleredeValgtMiljoe={[]}
-								/>
+				<Fragment>
+					<MiljoVelger
+						bestillingsdata={bestilling ? bestilling.bestilling : null}
+						heading="Velg miljø å gjenopprette i"
+						bankIdBruker={brukertype && brukertype === 'BANKID'}
+						alleredeValgtMiljoe={[]}
+					/>
 
-								<div className="dollymodal_buttons">
-									<NavButton variant={'danger'} onClick={closeModal}>
-										Avbryt
-									</NavButton>
-									<NavButton variant={'primary'} onClick={formikProps.submitForm}>
-										Utfør
-									</NavButton>
-								</div>
-							</Fragment>
-						)
-					}}
-				</Formik>
+					<div className="dollymodal_buttons">
+						<NavButton variant={'danger'} onClick={closeModal}>
+							Avbryt
+						</NavButton>
+						<NavButton variant={'primary'} onClick={formMethods.handleSubmit(submitFormik)}>
+							Utfør
+						</NavButton>
+					</div>
+				</Fragment>
 			</ErrorBoundary>
 		</DollyModal>
 	)

apps/dolly-frontend/src/main/js/src/components/bestilling/statusListe/BestillingProgresjon/BestillingProgresjon.tsx

@@ -108,7 +108,7 @@ export const BestillingProgresjon = ({
 	}
 
 	const SECONDS_BEFORE_WARNING_MESSAGE = 120
-	const SECONDS_BEFORE_WARNING_MESSAGE_ORGANISASJON = 300
+	const SECONDS_BEFORE_WARNING_MESSAGE_ORGANISASJON = 200
 
 	const { bestilling, loading } = useBestillingById(bestillingID, erOrganisasjon, true)
 	const { bestillingStatus } = useOrganisasjonBestillingStatus(bestillingID, erOrganisasjon, true)

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

@@ -15,7 +15,7 @@ import * as _ from 'lodash-es'
 import { tpsfAttributter } from '@/components/bestillingsveileder/utils'
 import { Mal, useDollyMaler } from '@/utils/hooks/useMaler'
 import { CypressSelector } from '../../../../../cypress/mocks/Selectors'
-import { useFormContext } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
 import { UseFormReturn } from 'react-hook-form/dist/types'
 
 const initialValues = {
@@ -48,7 +48,7 @@ export const NyIdent = ({ brukernavn, onAvbryt, onSubmit }: NyBestillingProps) =
 	const [bruker, setBruker] = useState(brukernavn)
 	const [malAktiv, toggleMalAktiv] = useToggle(false)
 	const { maler, loading } = useDollyMaler()
-	const formMethods = useFormContext()
+	const formMethods = useForm({ defaultValues: initialValues })
 
 	const brukerOptions = getBrukerOptions(maler)
 	const malOptions = getMalOptions(maler, bruker)
@@ -140,7 +140,7 @@ export const NyIdent = ({ brukernavn, onAvbryt, onSubmit }: NyBestillingProps) =
 					data-cy={CypressSelector.BUTTON_START_BESTILLING}
 					submitknapp="Start bestilling"
 					disabled={!formMethods.formState.isValid || formMethods.formState.isSubmitting}
-					onSubmit={formMethods.handleSubmit}
+					onSubmit={formMethods.handleSubmit(preSubmit(formMethods.getValues()))}
 					onAvbryt={onAvbryt}
 					center
 				/>

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

@@ -24,7 +24,7 @@ const STEPS = [Steg1, Steg2, Steg3]
 
 export const StegVelger = ({ initialValues, onSubmit }) => {
 	const [step, setStep] = useState(0)
-	const methods = useForm({ defaultValues: initialValues, resolver: yupResolver(Validations) })
+	const formMethods = useForm({ defaultValues: initialValues, resolver: yupResolver(Validations) })
 
 	const opts = useContext(BestillingsveilederContext)
 	const mutate = useMatchMutate()
@@ -33,10 +33,9 @@ export const StegVelger = ({ initialValues, onSubmit }) => {
 	const isLastStep = () => step === STEPS.length - 1
 	const handleNext = () => setStep(step + 1)
 
-	const handleBack = (formikBag) => {
+	const handleBack = () => {
 		if (isLastStep()) {
-			const { setSubmitting } = formikBag
-			setSubmitting(false)
+			// const { setSubmitting } = formMethods.setSubmitting(false)
 		}
 		if (step !== 0) setStep(step - 1)
 	}
@@ -48,7 +47,7 @@ export const StegVelger = ({ initialValues, onSubmit }) => {
 		}
 
 		sessionStorage.clear()
-		methods.reset()
+		formMethods.reset()
 
 		onSubmit(values)
 		mutate(REGEX_BACKEND_GRUPPER)
@@ -72,14 +71,14 @@ export const StegVelger = ({ initialValues, onSubmit }) => {
 
 	const labels = STEPS.map((v) => ({ label: v.label }))
 
-	const stateModifier = stateModifierFns(methods, opts)
+	const stateModifier = stateModifierFns(formMethods, opts)
 	const devEnabled =
 		window.location.hostname.includes('localhost') ||
 		window.location.hostname.includes('dolly-frontend-dev')
 
 	return (
-		<FormProvider {...methods}>
-			<form onSubmit={methods.handleSubmit(_handleSubmit)}>
+		<FormProvider {...formMethods}>
+			<form onSubmit={formMethods.handleSubmit(_handleSubmit)}>
 				<Stepper orientation="horizontal" activeStep={step + 1}>
 					{labels.map((label, index) => (
 						<Stepper.Step key={index}>{label.label}</Stepper.Step>

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Form, Formik, getIn } from 'formik'
+// import { Form, Formik, getIn } from 'formik'
 import NavButton from '@/components/ui/button/NavButton/NavButton'
 import * as yup from 'yup'
 import Loading from '@/components/ui/loading/Loading'
@@ -31,7 +31,7 @@ const RedigerGruppe = ({
 }: Props): JSX.Element => {
 	const navigate = useNavigate()
 	const { gruppe } = useGruppeById(gruppeId)
-	const erRedigering = Boolean(getIn(gruppe, 'id', false))
+	const erRedigering = getIn(gruppe, 'id', false)
 	const mutate = useMatchMutate()
 
 	const onHandleSubmit = async (values: { hensikt: any; navn: any }, _actions: any) => {

apps/dolly-frontend/src/main/js/src/components/ui/form/inputs/select/Select.tsx

@@ -1,4 +1,3 @@
-import { useField } from 'formik'
 import { createFilter, default as ReactSelect } from 'react-select'
 import cn from 'classnames'
 import { Vis } from '@/components/bestillingsveileder/VisAttributt'
@@ -10,6 +9,7 @@ import MenuList from '@/components/ui/form/inputs/select/MenuList'
 import Option from '@/components/ui/form/inputs/select/Option'
 import * as _ from 'lodash-es'
 import { useKodeverk } from '@/utils/hooks/useKodeverk'
+import { useController } from 'react-hook-form'
 
 type SelectProps = {
 	id?: string
@@ -121,7 +121,7 @@ export const DollySelect = (props: SelectProps) => (
 )
 
 const P_FormikSelect = ({ feil, ...props }: SelectProps) => {
-	const [field, meta] = useField(props)
+	const { field, fieldState: meta } = useController(props)
 	const handleChange = (selected, meta) => {
 		let value
 		if (props.isMulti) {

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

@@ -12,7 +12,6 @@
     },
     "types": [
       "vite/client",
-      "vite-plugin-svgr/client",
       "cypress",
       "node",
       "cypress-react-selector",

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

@@ -1,6 +1,5 @@
 import { defineConfig } from 'vite'
 import viteTsconfigPaths from 'vite-tsconfig-paths'
-import svgr from 'vite-plugin-svgr'
 import proxyRoutes from './proxy-routes.json'
 import path from 'path'
 import EnvironmentPlugin from 'vite-plugin-environment'
@@ -74,7 +73,6 @@ export default defineConfig(({ mode }) => ({
 				],
 			},
 		}),
-		svgr(),
 		viteTsconfigPaths(),
 		preserveRefPlugin(),
 		EnvironmentPlugin({