refactor(app): app service form to react [EE-5415] (#8994)

app/react/components/Link.tsx

@@ -4,6 +4,7 @@ import { UISref, UISrefProps } from '@uirouter/react';
 interface Props {
   title?: string;
   target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+  rel?: AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
 }
 
 export function Link({
@@ -16,7 +17,7 @@ export function Link({
     // eslint-disable-next-line react/jsx-props-no-spreading
     <UISref className={className} {...props}>
       {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-      <a title={title} target={props.target}>
+      <a title={title} target={props.target} rel={props.rel}>
         {children}
       </a>
     </UISref>

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

@@ -18,6 +18,7 @@ interface Props<T> {
   size?: Size;
   disabled?: boolean;
   readOnly?: boolean;
+  className?: string;
 }
 
 export function ButtonSelector<T extends string | number>({
@@ -27,9 +28,10 @@ export function ButtonSelector<T extends string | number>({
   options,
   disabled,
   readOnly,
+  className,
 }: Props<T>) {
   return (
-    <ButtonGroup size={size} className={styles.group}>
+    <ButtonGroup size={size} className={clsx(styles.group, className)}>
       {options.map((option) => (
         <OptionItem
           key={option.value}

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

@@ -13,7 +13,7 @@ export function FormError({ children, className }: PropsWithChildren<Props>) {
     <p
       className={clsx(`text-muted small vertical-center help-block`, className)}
     >
-      <Icon icon={AlertTriangle} className="icon-warning" />
+      <Icon icon={AlertTriangle} className="icon-warning shrink-0" />
       <span className="text-warning">{children}</span>
     </p>
   );

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

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

app/react/components/form-components/validate-form.ts

@@ -3,7 +3,8 @@ import { SchemaOf } from 'yup';
 
 export async function validateForm<T>(
   schemaBuilder: () => SchemaOf<T>,
-  formValues: T
+  formValues: T,
+  validationContext?: object
 ) {
   const validationSchema = schemaBuilder();
 
@@ -11,6 +12,8 @@ export async function validateForm<T>(
     await validationSchema.validate(formValues, {
       strict: true,
       abortEarly: false,
+      // workaround to access all parents for nested fields. See clusterIpFormValidation for a use case.
+      context: { formValues, validationContext },
     });
     return undefined;
   } catch (error) {