diff --git a/app/react/edge/edge-stacks/CreateView/CreateForm.tsx b/app/react/edge/edge-stacks/CreateView/CreateForm.tsx index e0f38c94f..7938a3472 100644 --- a/app/react/edge/edge-stacks/CreateView/CreateForm.tsx +++ b/app/react/edge/edge-stacks/CreateView/CreateForm.tsx @@ -29,13 +29,16 @@ export function CreateForm() { const [webhookId] = useState(() => createWebhookId()); const [templateParams, setTemplateParams] = useTemplateParams(); - const templateQuery = useTemplate(templateParams.type, templateParams.id); + const templateQuery = useTemplate( + templateParams.templateType, + templateParams.templateId + ); const validation = useValidation(templateQuery); const mutation = useCreate({ webhookId, template: templateQuery.customTemplate || templateQuery.appTemplate, - templateType: templateParams.type, + templateType: templateParams.templateType, }); const initialValues = useInitialValues(templateQuery, templateParams); @@ -53,6 +56,7 @@ export function CreateForm() { initialValues={initialValues} onSubmit={mutation.onSubmit} validationSchema={validation} + validateOnMount > , - relativePath: relativePathValidation(), + relativePath: mixed().when('method', { + is: 'repository', + then: () => relativePathValidation(), + }) as SchemaOf, useManifestNamespaces: boolean().default(false), }) ), diff --git a/app/react/edge/edge-stacks/CreateView/DockerComposeForm.tsx b/app/react/edge/edge-stacks/CreateView/DockerComposeForm.tsx index 63b3a4d91..2f4c29f83 100644 --- a/app/react/edge/edge-stacks/CreateView/DockerComposeForm.tsx +++ b/app/react/edge/edge-stacks/CreateView/DockerComposeForm.tsx @@ -28,8 +28,8 @@ const buildMethods = [editor, upload, git, edgeStackTemplate] as const; interface Props { webhookId: string; onChangeTemplate: (change: { - type: 'app' | 'custom' | undefined; - id: number | undefined; + templateType: 'app' | 'custom' | undefined; + templateId: number | undefined; }) => void; } @@ -76,8 +76,8 @@ export function DockerComposeForm({ webhookId, onChangeTemplate }: Props) { values.templateValues ); onChangeTemplate({ - id: templateValues.templateId, - type: templateValues.type, + templateId: templateValues.templateId, + templateType: templateValues.type, }); setValues((values) => ({ ...values, @@ -145,6 +145,7 @@ export function DockerComposeForm({ webhookId, onChangeTemplate }: Props) { setValues((values) => ({ diff --git a/app/react/edge/edge-stacks/CreateView/InnerForm.tsx b/app/react/edge/edge-stacks/CreateView/InnerForm.tsx index 0c0ec8c14..4335f09ad 100644 --- a/app/react/edge/edge-stacks/CreateView/InnerForm.tsx +++ b/app/react/edge/edge-stacks/CreateView/InnerForm.tsx @@ -29,11 +29,11 @@ export function InnerForm({ webhookId: string; isLoading: boolean; onChangeTemplate: ({ - type, - id, + templateType, + templateId, }: { - type: 'app' | 'custom' | undefined; - id: number | undefined; + templateType: 'app' | 'custom' | undefined; + templateId: number | undefined; }) => void; }) { const { values, setFieldValue, errors, setValues, setFieldError, isValid } = @@ -128,6 +128,7 @@ export function InnerForm({ setFieldValue('staggerConfig', newStaggerValues) } diff --git a/app/react/edge/edge-stacks/CreateView/useTemplateParams.tsx b/app/react/edge/edge-stacks/CreateView/useTemplateParams.tsx index 45b384811..f3ae28368 100644 --- a/app/react/edge/edge-stacks/CreateView/useTemplateParams.tsx +++ b/app/react/edge/edge-stacks/CreateView/useTemplateParams.tsx @@ -1,15 +1,14 @@ import { useParamsState } from '@/react/hooks/useParamState'; export function useTemplateParams() { - const [{ id, type }, setTemplateParams] = useParamsState( - ['templateId', 'templateType'], + const [{ templateId, templateType }, setTemplateParams] = useParamsState( (params) => ({ - id: parseTemplateId(params.templateId), - type: parseTemplateType(params.templateType), + templateId: parseTemplateId(params.templateId), + templateType: parseTemplateType(params.templateType), }) ); - return [{ id, type }, setTemplateParams] as const; + return [{ templateId, templateType }, setTemplateParams] as const; } function parseTemplateId(param?: string) { diff --git a/app/react/hooks/useParamState.ts b/app/react/hooks/useParamState.ts index d31203ae8..518ccd9e3 100644 --- a/app/react/hooks/useParamState.ts +++ b/app/react/hooks/useParamState.ts @@ -22,32 +22,15 @@ export function useParamState( /** Use this when you need to use/update multiple params at once. */ export function useParamsState>( - params: string[], parseParams: (params: Record) => T ) { const { params: stateParams } = useCurrentStateAndParams(); const router = useRouter(); - const state = parseParams( - params.reduce( - (acc, param) => { - acc[param] = stateParams[param]; - return acc; - }, - {} as Record - ) - ); + const state = parseParams(stateParams); function setState(newState: Partial) { - const newStateParams = Object.entries(newState).reduce( - (acc, [key, value]) => { - acc[key] = value; - return acc; - }, - {} as Record - ); - - router.stateService.go('.', newStateParams, { reload: false }); + router.stateService.go('.', newState, { reload: false }); } return [state, setState] as const;