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

app/react/components/WebEditorForm.tsx

@@ -15,7 +15,7 @@ import { buildConfirmButton } from './modals/utils';
 const otherEditorConfig = {
   tooltip: (
     <>
-      <div>Ctrl+F - Start searching</div>
+      <div>CtrlF - Start searching</div>
       <div>Ctrl+G - Find next</div>
       <div>Ctrl+Shift+G - Find previous</div>
       <div>Ctrl+Shift+F - Replace</div>
@@ -29,7 +29,7 @@ const otherEditorConfig = {
   searchCmdLabel: 'Ctrl+F for search',
 } as const;
 
-const editorConfig = {
+export const editorConfig = {
   mac: {
     tooltip: (
       <>
@@ -59,6 +59,7 @@ interface Props {
   placeholder?: string;
   yaml?: boolean;
   readonly?: boolean;
+  titleContent?: React.ReactNode;
   hideTitle?: boolean;
   error?: string;
   height?: string;
@@ -69,6 +70,7 @@ export function WebEditorForm({
   onChange,
   placeholder,
   value,
+  titleContent = '',
   hideTitle,
   readonly,
   yaml,
@@ -80,16 +82,11 @@ export function WebEditorForm({
     <div>
       <div className="web-editor overflow-x-hidden">
         {!hideTitle && (
-          <FormSectionTitle htmlFor={id}>
-            Web editor
-            <div className="text-muted small vertical-center ml-auto">
-              {editorConfig[BROWSER_OS_PLATFORM].searchCmdLabel}
-
-              <Tooltip message={editorConfig[BROWSER_OS_PLATFORM].tooltip} />
-            </div>
-          </FormSectionTitle>
+          <>
+            <DefaultTitle id={id} />
+            {titleContent ?? null}
+          </>
         )}
-
         {children && (
           <div className="form-group text-muted small">
             <div className="col-sm-12 col-lg-12">{children}</div>
@@ -116,6 +113,19 @@ export function WebEditorForm({
   );
 }
 
+function DefaultTitle({ id }: { id: string }) {
+  return (
+    <FormSectionTitle htmlFor={id}>
+      Web editor
+      <div className="text-muted small vertical-center ml-auto">
+        {editorConfig[BROWSER_OS_PLATFORM].searchCmdLabel}
+
+        <Tooltip message={editorConfig[BROWSER_OS_PLATFORM].tooltip} />
+      </div>
+    </FormSectionTitle>
+  );
+}
+
 export function usePreventExit(
   initialValue: string,
   value: string,

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}
     />
   );
 }