feat(namespace): migrate create ns to react [EE-2226] (#10377)

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

@@ -36,7 +36,7 @@ export function Slider({
   return (
     <div className={styles.root}>
       <RcSlider
-        handleRender={sliderTooltip}
+        handleRender={visible ? sliderTooltip : undefined}
         min={min}
         max={max}
         marks={marks}

app/react/components/form-components/Slider/SliderWithInput.tsx

@@ -6,10 +6,16 @@ export function SliderWithInput({
   value,
   onChange,
   max,
+  step = 1,
+  dataCy,
+  visibleTooltip = false,
 }: {
   value: number;
   onChange: (value: number) => void;
   max: number;
+  dataCy: string;
+  step?: number;
+  visibleTooltip?: boolean;
 }) {
   return (
     <div className="flex items-center gap-4">
@@ -22,7 +28,9 @@ export function SliderWithInput({
             value={value}
             min={0}
             max={max}
-            step={256}
+            step={step}
+            dataCy={`${dataCy}Slider`}
+            visibleTooltip={visibleTooltip}
           />
         </div>
       )}
@@ -33,6 +41,7 @@ export function SliderWithInput({
         value={value}
         onChange={(e) => onChange(e.target.valueAsNumber)}
         className="w-32"
+        data-cy={`${dataCy}Input`}
       />
     </div>
   );

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

@@ -0,0 +1,18 @@
+import { FormikErrors } from 'formik';
+
+export function isErrorType<T>(
+  error: string | FormikErrors<T> | undefined
+): error is FormikErrors<T> {
+  return error !== undefined && typeof error !== 'string';
+}
+
+export function isArrayErrorType<T>(
+  error:
+    | string[]
+    | FormikErrors<T>[]
+    | string
+    | undefined
+    | (FormikErrors<T> | undefined)[]
+): error is FormikErrors<T>[] {
+  return error !== undefined && typeof error !== 'string';
+}

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

@@ -0,0 +1,56 @@
+import _ from 'lodash';
+import { AnySchema, TestContext, TypeOf, ValidationError } from 'yup';
+import Lazy from 'yup/lib/Lazy';
+import { AnyObject } from 'yup/lib/types';
+
+/**
+ * Builds a uniqueness test for yup.
+ * @param errorMessage The error message to display for duplicates.
+ * @param path The path to the value to test for uniqueness (if the list item is an object).
+ * @returns A function that can be passed to yup's `test` method.
+ */
+export function buildUniquenessTest<
+  T extends AnySchema | Lazy<AnySchema, AnySchema>,
+>(errorMessage: (errorIndex: number) => string, path = '') {
+  return (
+    list: Array<TypeOf<T>> | undefined,
+    testContext: TestContext<AnyObject>
+  ) => {
+    if (!list) {
+      return true;
+    }
+
+    const values = list.map(mapper);
+
+    // check for duplicates, adding the index of each duplicate to an array
+    const seen = new Set<TypeOf<T>>();
+    const duplicates: number[] = [];
+    values.forEach((value, i) => {
+      if (seen.has(value)) {
+        duplicates.push(i);
+      } else {
+        seen.add(value);
+      }
+    });
+
+    // create an array of yup validation errors for each duplicate
+    const errors = duplicates.map((i) => {
+      const error = new ValidationError(
+        errorMessage(i),
+        list[i],
+        `${testContext.path}[${i}]${path}`
+      );
+      return error;
+    });
+
+    if (errors.length > 0) {
+      throw new ValidationError(errors);
+    }
+
+    return true;
+  };
+
+  function mapper(a: TypeOf<T>) {
+    return path ? _.get(a, path) : a;
+  }
+}