refactor(edge/stacks): migrate create view to react [EE-2223] (#11575)

app/react/components/form-components/FileUpload/FileUploadForm.test.tsx

@@ -6,6 +6,7 @@ test('render should include description', async () => {
   const onClick = vi.fn();
   const { findByText } = render(
     <FileUploadForm
+      value={undefined}
       title="test button"
       onChange={onClick}
       description={<span>test description</span>}

app/react/components/form-components/FileUpload/FileUploadForm.tsx

@@ -6,8 +6,8 @@ import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
 import { FileUploadField } from '@@/form-components/FileUpload/FileUploadField';
 
 export interface Props {
-  onChange(value: unknown): void;
-  value?: File;
+  onChange(value?: File): void;
+  value: File | undefined;
   title?: string;
   required?: boolean;
   description: ReactNode;

app/react/components/form-components/FormSection/FormSection.tsx

@@ -12,6 +12,7 @@ interface Props {
   defaultFolded?: boolean;
   titleClassName?: string;
   className?: string;
+  htmlFor?: string;
 }
 
 export function FormSection({
@@ -22,13 +23,14 @@ export function FormSection({
   defaultFolded = isFoldable,
   titleClassName,
   className,
+  htmlFor = '',
 }: PropsWithChildren<Props>) {
   const [isExpanded, setIsExpanded] = useState(!defaultFolded);
 
   return (
     <div className={className}>
       <FormSectionTitle
-        htmlFor={isFoldable ? `foldingButton${title}` : ''}
+        htmlFor={isFoldable ? `foldingButton${title}` : htmlFor}
         titleSize={titleSize}
         className={titleClassName}
       >

app/react/components/form-components/SwitchField/SwitchField.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import uuid from 'uuid';
-import { ComponentProps, PropsWithChildren, ReactNode } from 'react';
+import { ComponentProps, PropsWithChildren, ReactNode, useState } from 'react';
 
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
 import { AutomationTestingProps } from '@/types';
@@ -33,7 +33,7 @@ export function SwitchField({
   checked,
   label,
   index,
-  name = uuid(),
+  name,
   labelClass,
   fieldClass,
   'data-cy': dataCy,
@@ -44,13 +44,14 @@ export function SwitchField({
   setTooltipHtmlMessage,
   valueExplanation,
 }: PropsWithChildren<Props>) {
+  const [toggleId] = useState(() => `toggle_${uuid()}`);
   const toggleName = name ? `toggle_${name}` : '';
 
   return (
     <div className={clsx(styles.root, fieldClass)}>
       <label
         className={clsx('space-right control-label !p-0 text-left', labelClass)}
-        htmlFor={toggleName}
+        htmlFor={toggleId}
       >
         {label}
         {tooltip && (
@@ -60,7 +61,7 @@ export function SwitchField({
       <Switch
         className={clsx('space-right', switchClass)}
         name={toggleName}
-        id={toggleName}
+        id={toggleId}
         checked={checked}
         disabled={disabled}
         onChange={onChange}