refactor(app): migrate remaining form sections [EE-6231] (#10938)

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

@@ -2,6 +2,7 @@ import { ComponentProps, PropsWithChildren, ReactNode } from 'react';
 import clsx from 'clsx';
 
 import { Tooltip } from '@@/Tip/Tooltip';
+import { InlineLoader } from '@@/InlineLoader';
 
 import { FormError } from '../FormError';
 
@@ -17,6 +18,8 @@ export interface Props {
   errors?: ReactNode;
   required?: boolean;
   className?: string;
+  isLoading?: boolean; // whether to show an inline loader, instead of the children
+  loadingText?: ReactNode; // text to show when isLoading is true
 }
 
 export function FormControl({
@@ -29,6 +32,8 @@ export function FormControl({
   className,
   required = false,
   setTooltipHtmlMessage,
+  isLoading = false,
+  loadingText = 'Loading...',
 }: PropsWithChildren<Props>) {
   return (
     <div
@@ -52,7 +57,8 @@ export function FormControl({
       </label>
 
       <div className={sizeClassChildren(size)}>
-        {children}
+        {isLoading && <InlineLoader>{loadingText}</InlineLoader>}
+        {!isLoading && children}
         {errors && <FormError>{errors}</FormError>}
       </div>
     </div>

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

@@ -28,6 +28,7 @@ interface SharedProps extends AutomationTestingProps {
   isClearable?: boolean;
   bindToBody?: boolean;
   isLoading?: boolean;
+  noOptionsMessage?: () => string;
 }
 
 interface MultiProps<TValue> extends SharedProps {
@@ -85,6 +86,7 @@ export function SingleSelect<TValue = string>({
   bindToBody,
   components,
   isLoading,
+  noOptionsMessage,
 }: SingleProps<TValue>) {
   const selectedValue =
     value || (typeof value === 'number' && value === 0)
@@ -108,6 +110,7 @@ export function SingleSelect<TValue = string>({
       menuPortalTarget={bindToBody ? document.body : undefined}
       components={components}
       isLoading={isLoading}
+      noOptionsMessage={noOptionsMessage}
     />
   );
 }
@@ -148,6 +151,7 @@ export function MultiSelect<TValue = string>({
   bindToBody,
   components,
   isLoading,
+  noOptionsMessage,
 }: Omit<MultiProps<TValue>, 'isMulti'>) {
   const selectedOptions = findSelectedOptions(options, value);
   return (
@@ -169,6 +173,7 @@ export function MultiSelect<TValue = string>({
       menuPortalTarget={bindToBody ? document.body : undefined}
       components={components}
       isLoading={isLoading}
+      noOptionsMessage={noOptionsMessage}
     />
   );
 }