refactor(edge/groups): migrate view to react [EE-2219] (#11758)

app/react/components/Redirect.tsx

@@ -0,0 +1,10 @@
+import { useRouter } from '@uirouter/react';
+import { useEffect } from 'react';
+
+export function Redirect({ to, params = {} }: { to: string; params?: object }) {
+  const router = useRouter();
+  useEffect(() => {
+    router.stateService.go(to, params);
+  }, [params, router.stateService, to]);
+  return null;
+}

app/react/components/TagSelector/TagSelector.tsx

@@ -6,6 +6,7 @@ import { useCreateTagMutation, useTags } from '@/portainer/tags/queries';
 import { Creatable, Select } from '@@/form-components/ReactSelect';
 import { FormControl } from '@@/form-components/FormControl';
 import { Link } from '@@/Link';
+import { ArrayError } from '@@/form-components/InputList/InputList';
 
 import { TagButton } from '../TagButton';
 
@@ -13,6 +14,7 @@ interface Props {
   value: TagId[];
   allowCreate?: boolean;
   onChange(value: TagId[]): void;
+  errors?: ArrayError<TagId[]>;
 }
 
 interface Option {
@@ -20,7 +22,12 @@ interface Option {
   label: string;
 }
 
-export function TagSelector({ value, allowCreate = false, onChange }: Props) {
+export function TagSelector({
+  value,
+  allowCreate = false,
+  onChange,
+  errors,
+}: Props) {
   // change the struct because react-select has a bug with Creatable (https://github.com/JedWatson/react-select/issues/3417#issuecomment-461868989)
   const tagsQuery = useTags({
     select: (tags) => tags?.map((opt) => ({ label: opt.Name, value: opt.ID })),
@@ -62,19 +69,29 @@ export function TagSelector({ value, allowCreate = false, onChange }: Props) {
     <>
       {value.length > 0 && (
         <FormControl label="Selected tags">
-          {selectedTags.map((tag) => (
-            <TagButton
-              key={tag.value}
-              title="Remove tag"
-              value={tag.value}
-              label={tag.label}
-              onRemove={() => handleRemove(tag.value)}
-            />
-          ))}
+          <div data-cy="selected-tags">
+            {selectedTags.map((tag) => (
+              <TagButton
+                key={tag.value}
+                title="Remove tag"
+                value={tag.value}
+                label={tag.label}
+                onRemove={() => handleRemove(tag.value)}
+              />
+            ))}
+          </div>
         </FormControl>
       )}
 
-      <FormControl label="Tags" inputId="tags-selector">
+      <FormControl
+        label="Tags"
+        inputId="tags-selector"
+        errors={
+          typeof errors === 'string'
+            ? errors
+            : errors?.map((e) => e?.toString())
+        }
+      >
         <SelectComponent
           inputId="tags-selector"
           value={[] as { label: string; value: number }[]}

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

@@ -11,6 +11,7 @@ interface Props extends AutomationTestingProps {
   loadingText: string;
   isLoading: boolean;
   isValid: boolean;
+  errors?: unknown;
 }
 
 export function FormActions({
@@ -19,6 +20,7 @@ export function FormActions({
   isLoading,
   children,
   isValid,
+  errors,
   'data-cy': dataCy,
 }: PropsWithChildren<Props>) {
   return (
@@ -35,6 +37,13 @@ export function FormActions({
             >
               {submitLabel}
             </LoadingButton>
+
+            {!isValid && (
+              <div className="hidden" data-cy="errors">
+                {JSON.stringify(errors)}
+              </div>
+            )}
+
             {children}
           </div>
         </div>