feat(k8sconfigure): migrate configure to react [EE-5524] (#10218)

app/react/components/Alert/Alert.tsx

@@ -43,23 +43,33 @@ const alertSettings: Record<
 export function Alert({
   color,
   title,
+  className,
   children,
-}: PropsWithChildren<{ color: AlertType; title?: string }>) {
+}: PropsWithChildren<{
+  color: AlertType;
+  title?: string;
+  className?: string;
+}>) {
   const { container, header, body, icon } = alertSettings[color];
 
   return (
-    <AlertContainer className={container}>
+    <AlertContainer className={clsx(container, className)}>
       {title ? (
         <>
           <AlertHeader className={header}>
             <Icon icon={icon} />
             {title}
           </AlertHeader>
-          <AlertBody className={body}>{children}</AlertBody>
+          <AlertBody className={body} hasTitle={!!title}>
+            {children}
+          </AlertBody>
         </>
       ) : (
-        <AlertBody className={clsx(body, 'flex items-center gap-2')}>
-          <Icon icon={icon} /> {children}
+        <AlertBody
+          className={clsx(body, 'flex items-start gap-2')}
+          hasTitle={!!title}
+        >
+          <Icon icon={icon} className="!mt-0.5 flex-none" /> {children}
         </AlertBody>
       )}
     </AlertContainer>
@@ -96,7 +106,12 @@ function AlertHeader({
 
 function AlertBody({
   className,
+  hasTitle,
   children,
-}: PropsWithChildren<{ className?: string }>) {
-  return <div className={clsx('ml-6 text-sm', className)}>{children}</div>;
+}: PropsWithChildren<{ className?: string; hasTitle: boolean }>) {
+  return (
+    <div className={clsx('text-sm', className, { 'ml-6': hasTitle })}>
+      {children}
+    </div>
+  );
 }

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

@@ -7,6 +7,7 @@ interface Props {
   loadingText: string;
   isLoading: boolean;
   isValid: boolean;
+  'data-cy'?: string;
 }
 
 export function FormActions({
@@ -15,6 +16,7 @@ export function FormActions({
   isLoading,
   children,
   isValid,
+  'data-cy': dataCy,
 }: PropsWithChildren<Props>) {
   return (
     <div className="form-group">
@@ -24,6 +26,7 @@ export function FormActions({
           loadingText={loadingText}
           isLoading={isLoading}
           disabled={!isValid}
+          data-cy={dataCy}
         >
           {submitLabel}
         </LoadingButton>

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

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import { ComponentProps } from 'react';
 import uuid from 'uuid';
+import { ComponentProps, PropsWithChildren, ReactNode } from 'react';
 
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
 
@@ -24,6 +24,7 @@ export interface Props {
   dataCy?: string;
   disabled?: boolean;
   featureId?: FeatureId;
+  valueExplanation?: ReactNode;
 }
 
 export function SwitchField({
@@ -40,7 +41,8 @@ export function SwitchField({
   featureId,
   switchClass,
   setTooltipHtmlMessage,
-}: Props) {
+  valueExplanation,
+}: PropsWithChildren<Props>) {
   const toggleName = name ? `toggle_${name}` : '';
 
   return (
@@ -65,6 +67,7 @@ export function SwitchField({
         featureId={featureId}
         dataCy={dataCy}
       />
+      {valueExplanation && <span>{valueExplanation}</span>}
     </div>
   );
 }