refactor(ui): improve Yup usage (#2647)

- move creation of validation schemas out of render blocks
- use a new validation schema for console context as it isn't a any json object but map[string]string
- update Yup to new major version

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: erka

ui/package-lock.json

@@ -39,7 +39,7 @@
     "react-router-dom": "^6.21.1",
     "tailwind-merge": "^2.2.0",
     "uuid": "^9.0.1",
-    "yup": "^0.32.11"
+    "yup": "^1.3.3"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.23.3",

ui/package.json

@@ -20,7 +20,7 @@ import { evaluateURL, evaluateV2 } from '~/data/api';
 import { useError } from '~/data/hooks/error';
 import { useSuccess } from '~/data/hooks/success';
 import {
-  jsonValidation,
+  contextValidation,
   keyValidation,
   requiredValidation
 } from '~/data/validations';
@@ -43,6 +43,12 @@ function ResetOnNamespaceChange({ namespace }: { namespace: INamespace }) {
   return null;
 }
 
+const consoleValidationSchema = Yup.object({
+  flagKey: keyValidation,
+  entityId: requiredValidation,
+  context: contextValidation
+});
+
 interface ConsoleFormValues {
   flagKey: string;
   entityId: string;
@@ -186,11 +192,7 @@ export default function Console() {
             <div className="mt-8 w-full overflow-hidden md:w-1/2">
               <Formik
                 initialValues={initialvalues}
-                validationSchema={Yup.object({
-                  flagKey: keyValidation,
-                  entityId: requiredValidation,
-                  context: jsonValidation
-                })}
+                validationSchema={consoleValidationSchema}
                 onSubmit={(values) => {
                   handleSubmit(selectedFlag, values);
                 }}

ui/src/app/console/Console.tsx

@@ -35,6 +35,11 @@ const flagTypes = [
   }
 ];
 
+const flagValidationSchema = Yup.object({
+  key: keyValidation,
+  name: requiredValidation
+});
+
 export default function FlagForm(props: { flag?: IFlag }) {
   const { flag } = props;
 
@@ -99,10 +104,7 @@ export default function FlagForm(props: { flag?: IFlag }) {
             setSubmitting(false);
           });
       }}
-      validationSchema={Yup.object({
-        key: keyValidation,
-        name: requiredValidation
-      })}
+      validationSchema={flagValidationSchema}
     >
       {(formik) => {
         const { enabled } = formik.values;

ui/src/components/flags/FlagForm.tsx

@@ -19,6 +19,11 @@ import { useSuccess } from '~/data/hooks/success';
 import { jsonValidation, keyValidation } from '~/data/validations';
 import { IVariant, IVariantBase } from '~/types/Variant';
 
+const variantValidationSchema = Yup.object({
+  key: keyValidation,
+  attachment: jsonValidation
+});
+
 type VariantFormProps = {
   setOpen: (open: boolean) => void;
   flagKey: string;
@@ -82,10 +87,7 @@ const VariantForm = forwardRef((props: VariantFormProps, ref: any) => {
             setSubmitting(false);
           });
       }}
-      validationSchema={Yup.object({
-        key: keyValidation,
-        attachment: jsonValidation
-      })}
+      validationSchema={variantValidationSchema}
     >
       {(formik) => (
         <Form className="bg-white flex h-full flex-col overflow-y-scroll shadow-xl">

ui/src/components/flags/VariantForm.tsx

@@ -17,6 +17,11 @@ import { keyValidation, requiredValidation } from '~/data/validations';
 import { INamespace, INamespaceBase } from '~/types/Namespace';
 import { stringAsKey } from '~/utils/helpers';
 
+const namespaceValidationSchema = Yup.object({
+  key: keyValidation,
+  name: requiredValidation
+});
+
 type NamespaceFormProps = {
   setOpen: (open: boolean) => void;
   namespace?: INamespace;
@@ -66,10 +71,7 @@ const NamespaceForm = forwardRef((props: NamespaceFormProps, ref: any) => {
             setSubmitting(false);
           });
       }}
-      validationSchema={Yup.object({
-        key: keyValidation,
-        name: requiredValidation
-      })}
+      validationSchema={namespaceValidationSchema}
     >
       {(formik) => (
         <Form className="bg-white flex h-full flex-col overflow-y-scroll shadow-xl">

ui/src/components/namespaces/NamespaceForm.tsx

@@ -45,6 +45,17 @@ export const distTypes = [
   }
 ];
 
+const ruleValidationSchema = Yup.object({
+  segmentKeys: Yup.array()
+    .of(
+      Yup.object().shape({
+        key: keyValidation
+      })
+    )
+    .required()
+    .min(1)
+});
+
 const computePercentages = (n: number): number[] => {
   const sum = 100 * 100;
 
@@ -155,16 +166,7 @@ export default function RuleForm(props: RuleFormProps) {
         segmentKeys: initialSegmentKeys,
         operator: SegmentOperatorType.OR
       }}
-      validationSchema={Yup.object({
-        segmentKeys: Yup.array()
-          .of(
-            Yup.object().shape({
-              key: keyValidation
-            })
-          )
-          .required()
-          .min(1)
-      })}
+      validationSchema={ruleValidationSchema}
       onSubmit={(values, { setSubmitting }) => {
         handleSubmit(values)
           .then(() => {

ui/src/components/rules/forms/RuleForm.tsx

@@ -32,6 +32,11 @@ const segmentMatchTypes = [
   }
 ];
 
+const segmentValidationSchema = Yup.object({
+  key: keyValidation,
+  name: requiredValidation
+});
+
 type SegmentFormProps = {
   segment?: ISegment;
   segmentChanged?: () => void;
@@ -98,10 +103,7 @@ export default function SegmentForm(props: SegmentFormProps) {
             setSubmitting(false);
           });
       }}
-      validationSchema={Yup.object({
-        key: keyValidation,
-        name: requiredValidation
-      })}
+      validationSchema={segmentValidationSchema}
     >
       {(formik) => (
         <Form className="px-1 sm:overflow-hidden sm:rounded-md">

ui/src/components/segments/SegmentForm.tsx

@@ -17,6 +17,10 @@ import { requiredValidation } from '~/data/validations';
 import { IAuthTokenBase, IAuthTokenSecret } from '~/types/auth/Token';
 import { INamespace } from '~/types/Namespace';
 
+const tokenValidationSchema = Yup.object({
+  name: requiredValidation
+});
+
 type TokenFormProps = {
   setOpen: (open: boolean) => void;
   onSuccess: (token: IAuthTokenSecret) => void;
@@ -55,9 +59,7 @@ const TokenForm = forwardRef((props: TokenFormProps, ref: any) => {
   return (
     <Formik
       initialValues={initialValues}
-      validationSchema={Yup.object({
-        name: requiredValidation
-      })}
+      validationSchema={tokenValidationSchema}
       onSubmit={(values, { setSubmitting }) => {
         let token: IAuthTokenBase = {
           name: values.name,

ui/src/components/tokens/TokenForm.tsx

@@ -0,0 +1,20 @@
+import { contextValidation } from './validations';
+
+describe('contextValidation', () => {
+  it('should accept valid input', () => {
+    const result = contextValidation.isValidSync('{"a":"b", "c":"d"}');
+    expect(result).toEqual(true);
+  });
+  it('should reject arrays', () => {
+    let result = contextValidation.isValidSync('["a", "b"]');
+    expect(result).toEqual(false);
+    result = contextValidation.isValidSync('{"a":["b"]}');
+    expect(result).toEqual(false);
+  });
+  it('should reject simple values', () => {
+    let result = contextValidation.isValidSync('1');
+    expect(result).toEqual(false);
+    result = contextValidation.isValidSync('true');
+    expect(result).toEqual(false);
+  });
+});