refactor(containers): migrate volumes tab to react [EE-5209] (#10284)

app/react/components/PageHeader/HeaderTitle.tsx

@@ -16,10 +16,10 @@ export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
   return (
     <div className="flex justify-between whitespace-normal pt-3">
       <div className="flex items-center gap-2">
-        <div className="text-2xl font-medium text-gray-11 th-highcontrast:text-white th-dark:text-white">
+        <h1 className="m-0 text-2xl font-medium text-gray-11 th-highcontrast:text-white th-dark:text-white">
           {title}
-        </div>
-        {children && <span>{children}</span>}
+        </h1>
+        {children && <>{children}</>}
       </div>
       <div className="flex items-end">
         <NotificationsMenu />

app/react/components/buttons/ButtonGroup.tsx

@@ -5,15 +5,21 @@ export type Size = 'xsmall' | 'small' | 'large';
 export interface Props {
   size?: Size;
   className?: string;
+  'aria-label'?: string;
 }
 
 export function ButtonGroup({
   size = 'small',
   children,
   className,
+  'aria-label': ariaLabel,
 }: PropsWithChildren<Props>) {
   return (
-    <div className={clsx('btn-group', sizeClass(size), className)} role="group">
+    <div
+      className={clsx('btn-group', sizeClass(size), className)}
+      role="group"
+      aria-label={ariaLabel}
+    >
       {children}
     </div>
   );

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

@@ -19,9 +19,10 @@ interface Props<T> {
   disabled?: boolean;
   readOnly?: boolean;
   className?: string;
+  'aria-label'?: string;
 }
 
-export function ButtonSelector<T extends string | number>({
+export function ButtonSelector<T extends string | number | boolean>({
   value,
   onChange,
   size,
@@ -29,12 +30,17 @@ export function ButtonSelector<T extends string | number>({
   disabled,
   readOnly,
   className,
+  'aria-label': ariaLabel,
 }: Props<T>) {
   return (
-    <ButtonGroup size={size} className={clsx(styles.group, className)}>
+    <ButtonGroup
+      size={size}
+      className={clsx(styles.group, className)}
+      aria-label={ariaLabel}
+    >
       {options.map((option) => (
         <OptionItem
-          key={option.value}
+          key={option.value.toString()}
           selected={value === option.value}
           onChange={() => onChange(option.value)}
           disabled={disabled}

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

@@ -17,8 +17,8 @@ type ArrElement<ArrType> = ArrType extends readonly (infer ElementType)[]
   ? ElementType
   : never;
 
-export type ArrayError<T> =
-  | FormikErrors<ArrElement<T>>[]
+export type ArrayError<TArray> =
+  | Array<FormikErrors<ArrElement<TArray> | undefined>>
   | string
   | string[]
   | undefined;