refactor(app): persisted folders form section [EE-6235] (#10693)

* refactor(app): persisted folder section [EE-6235]

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

@@ -9,6 +9,7 @@ import styles from './ButtonSelector.module.css';
 export interface Option<T> {
   value: T;
   label?: ReactNode;
+  disabled?: boolean;
 }
 
 interface Props<T> {
@@ -43,7 +44,7 @@ export function ButtonSelector<T extends string | number | boolean>({
           key={option.value.toString()}
           selected={value === option.value}
           onChange={() => onChange(option.value)}
-          disabled={disabled}
+          disabled={disabled || option.disabled}
           readOnly={readOnly}
         >
           {option.label || option.value.toString()}

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

@@ -10,6 +10,7 @@ interface Props {
   titleSize?: 'sm' | 'md' | 'lg';
   isFoldable?: boolean;
   defaultFolded?: boolean;
+  titleClassName?: string;
 }
 
 export function FormSection({
@@ -18,6 +19,7 @@ export function FormSection({
   children,
   isFoldable = false,
   defaultFolded = isFoldable,
+  titleClassName,
 }: PropsWithChildren<Props>) {
   const [isExpanded, setIsExpanded] = useState(!defaultFolded);
 
@@ -26,6 +28,7 @@ export function FormSection({
       <FormSectionTitle
         htmlFor={isFoldable ? `foldingButton${title}` : ''}
         titleSize={titleSize}
+        className={titleClassName}
       >
         {isFoldable && (
           <button

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

@@ -4,6 +4,7 @@ import { PropsWithChildren } from 'react';
 interface Props {
   htmlFor?: string;
   titleSize?: 'sm' | 'md' | 'lg';
+  className?: string;
 }
 
 const tailwindTitleSize = {
@@ -16,6 +17,7 @@ export function FormSectionTitle({
   children,
   htmlFor,
   titleSize = 'md',
+  className,
 }: PropsWithChildren<Props>) {
   if (htmlFor) {
     return (
@@ -23,7 +25,8 @@ export function FormSectionTitle({
         htmlFor={htmlFor}
         className={clsx(
           'col-sm-12 mb-2 mt-1 flex cursor-pointer items-center pl-0 font-medium',
-          tailwindTitleSize[titleSize]
+          tailwindTitleSize[titleSize],
+          className
         )}
       >
         {children}
@@ -34,7 +37,8 @@ export function FormSectionTitle({
     <div
       className={clsx(
         'col-sm-12 mb-2 mt-4 pl-0 font-medium',
-        tailwindTitleSize[titleSize]
+        tailwindTitleSize[titleSize],
+        className
       )}
     >
       {children}

app/react/components/form-components/InputGroup/InputGroupAddon.tsx

@@ -6,11 +6,13 @@ import { useInputGroupContext } from './InputGroup';
 type BaseProps<TProps> = {
   as?: ComponentType<TProps> | string;
   required?: boolean;
+  className?: string;
 };
 
 export function InputGroupAddon<TProps>({
   children,
   as = 'span',
+  className,
   required,
   ...props
 }: PropsWithChildren<BaseProps<TProps> & TProps>) {
@@ -19,7 +21,7 @@ export function InputGroupAddon<TProps>({
 
   return (
     <Component
-      className={clsx('input-group-addon', required && 'required')}
+      className={clsx('input-group-addon', required && 'required', className)}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
     >