fix(ui/env-vars): apply controlled input to field [EE-6411]

fix [EE-6411]

app/portainer/react/components/index.ts

@@ -8,6 +8,7 @@ import { AnnotationsBeTeaser } from '@/react/kubernetes/annotations/AnnotationsB
 import { withFormValidation } from '@/react-tools/withFormValidation';
 import { GroupAssociationTable } from '@/react/portainer/environments/environment-groups/components/GroupAssociationTable';
 import { AssociatedEnvironmentsSelector } from '@/react/portainer/environments/environment-groups/components/AssociatedEnvironmentsSelector';
+import { withControlledInput } from '@/react-tools/withControlledInput';
 
 import {
   EnvironmentVariablesFieldset,
@@ -225,7 +226,7 @@ export const componentsModule = ngModule.name;
 
 withFormValidation(
   ngModule,
-  EnvironmentVariablesFieldset,
+  withControlledInput(EnvironmentVariablesFieldset, { values: 'onChange' }),
   'environmentVariablesFieldset',
   [],
   envVarValidation
@@ -233,7 +234,7 @@ withFormValidation(
 
 withFormValidation(
   ngModule,
-  EnvironmentVariablesPanel,
+  withControlledInput(EnvironmentVariablesPanel, { values: 'onChange' }),
   'environmentVariablesPanel',
   ['explanation', 'showHelpMessage'],
   envVarValidation

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 { Value } from './types';
 import { EnvironmentVariablesFieldset } from './EnvironmentVariablesFieldset';
 
+type FieldsetProps = ComponentProps<typeof EnvironmentVariablesFieldset>;
+
 export function EnvironmentVariablesPanel({
   explanation,
   onChange,
@@ -14,11 +15,8 @@ export function EnvironmentVariablesPanel({
   errors,
 }: {
   explanation?: string;
-  values: Value;
-  onChange(value: Value): void;
   showHelpMessage?: boolean;
-  errors?: ArrayError<Value>;
-}) {
+} & FieldsetProps) {
   return (
     <FormSection title="Environment variables">
       <div className="form-group">