fix(ui): apply controlled input to field [EE-6411] (#10738)

app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesPanel.tsx

@@ -1,11 +1,12 @@
+import { ComponentProps } from 'react';
+
 import { FormSection } from '@@/form-components/FormSection';
 import { TextTip } from '@@/Tip/TextTip';
 
-import { ArrayError } from '../InputList/InputList';
-
-import { Values } from './types';
 import { EnvironmentVariablesFieldset } from './EnvironmentVariablesFieldset';
 
+type FieldsetProps = ComponentProps<typeof EnvironmentVariablesFieldset>;
+
 export function EnvironmentVariablesPanel({
   explanation,
   onChange,
@@ -15,12 +16,9 @@ export function EnvironmentVariablesPanel({
   isFoldable = false,
 }: {
   explanation?: string;
-  values: Values;
-  onChange(value: Values): void;
   showHelpMessage?: boolean;
-  errors?: ArrayError<Values>;
   isFoldable?: boolean;
-}) {
+} & FieldsetProps) {
   return (
     <FormSection
       title="Environment variables"

app/react/portainer/gitops/AuthFieldset/AuthFieldset.tsx

@@ -1,5 +1,6 @@
 import { FormikErrors } from 'formik';
 import { boolean, number, object, SchemaOf, string } from 'yup';
+import { useState } from 'react';
 
 import { GitAuthModel } from '@/react/portainer/gitops/types';
 import { useDebounce } from '@/react/hooks/useDebounce';
@@ -23,11 +24,12 @@ interface Props {
 }
 
 export function AuthFieldset({
-  value,
+  value: initialValue,
   onChange,
   isAuthExplanationVisible,
   errors,
 }: Props) {
+  const [value, setValue] = useState(initialValue); // TODO: remove this state when form is not inside angularjs
   const [username, setUsername] = useDebounce(
     value.RepositoryUsername || '',
     (username) => handleChange({ RepositoryUsername: username })
@@ -139,6 +141,7 @@ export function AuthFieldset({
 
   function handleChange(partialValue: Partial<GitAuthModel>) {
     onChange(partialValue);
+    setValue((value) => ({ ...value, ...partialValue }));
   }
 }
 

app/react/portainer/gitops/GitForm.tsx

@@ -1,5 +1,6 @@
 import { array, boolean, object, SchemaOf, string } from 'yup';
 import { FormikErrors } from 'formik';
+import { useState } from 'react';
 
 import { ComposePathField } from '@/react/portainer/gitops/ComposePathField';
 import { RefField } from '@/react/portainer/gitops/RefField';
@@ -35,7 +36,7 @@ interface Props {
 }
 
 export function GitForm({
-  value,
+  value: initialValue,
   onChange,
   environmentType = 'DOCKER',
   deployMethod = 'compose',
@@ -48,6 +49,7 @@ export function GitForm({
   webhookId,
   webhooksDocs,
 }: Props) {
+  const [value, setValue] = useState(initialValue); // TODO: remove this state when form is not inside angularjs
   return (
     <FormSection title="Git repository">
       <AuthFieldset
@@ -126,6 +128,7 @@ export function GitForm({
 
   function handleChange(partialValue: Partial<GitFormModel>) {
     onChange(partialValue);
+    setValue((value) => ({ ...value, ...partialValue }));
   }
 }