fix(ui): Fix yup validation bug (caraml-dev#80)

* Update yup validation schemas * Update mlp * Remove custom css styles for flyout
deadlycoconuts · Jul 23, 2024 · cb06eda · cb06eda
1 parent 7a0bf3a
commit cb06eda
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 24 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -8,7 +8,7 @@
   "//": "[@sentry/browser] pinned to 7.118.0 because craco/module federation has issues resolving this dependency; see",
   "//": "https://github.com/caraml-dev/turing/pull/384#discussion_r1666418144 for more details",
   "dependencies": {
-    "@caraml-dev/ui-lib": "^1.13.0-build.3-a234b6b",
+    "@caraml-dev/ui-lib": "^1.13.0-build.4-09c363a",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eui": "88.2.0",
     "@emotion/css": "^11.11.2",

diff --git a/ui/src/experiments/components/form/validation/schema.js b/ui/src/experiments/components/form/validation/schema.js
@@ -138,10 +138,10 @@ const schema = [
       .max(64, "Name should be between 4 and 64 characters")
       .matches(nameRegex, nameRegexDescription),
     type: yup
-      .mixed()
+      .string()
       .required("Experiment Type should be selected")
       .oneOf(experimentTypeValues, "Valid Experiment Type should be selected"),
-    interval: yup.mixed().when("type", (type, schema) => {
+    interval: yup.string().when("type", ([type], schema) => {
       return type === "Switchback"
         ? yup
           .number()
@@ -151,11 +151,11 @@ const schema = [
         : schema;
     }),
     tier: yup
-      .mixed()
+      .string()
       .required("Experiment Tier should be selected")
       .oneOf(experimentTierValues, "Valid Experiment Tier should be selected"),
     status: yup
-      .mixed()
+      .string()
       .required("Experiment Status should be selected")
       .oneOf(
         experimentStatusValues,
@@ -165,7 +165,7 @@ const schema = [
     end_time: yup
       .date()
       .required("End Time is required")
-      .when("start_time", (startTime, schema) => {
+      .when("start_time", ([startTime], schema) => {
         return startTime ? schema.min(startTime) : schema;
       }),
   }),
@@ -176,7 +176,7 @@ const schema = [
     treatments: yup
       .array()
       .of(treatmentSchema)
-      .when("type", (type, schema) => {
+      .when("type", ([type], schema) => {
         switch (type) {
           case "A/B":
             return schema

diff --git a/ui/src/experiments/list/search/SearchExperimentsPanel.js b/ui/src/experiments/list/search/SearchExperimentsPanel.js
@@ -6,16 +6,14 @@ import { SegmenterContextProvider } from "providers/segmenter/context";
 
 import SearchExperimentsFilters from "./SearchExperimentsFilters";
 
-import "./SearchExperimentsPanel.scss";
-
 const SearchExperimentsPanel = ({ onChange, onClose, projectId }) => {
   return (
     <SegmenterContextProvider projectId={projectId}>
       <EuiFlyout
         id="experiments-search-panel"
-        className="euiFlyout--searchPanel"
         side="left"
         onClose={onClose}
+        size={"s"}
         maxWidth={true}
         hideCloseButton={true}
         paddingSize="m"

diff --git a/ui/src/experiments/list/search/SearchExperimentsPanel.scss b/ui/src/experiments/list/search/SearchExperimentsPanel.scss
diff --git a/ui/src/experiments/list/search/validation/schema.js b/ui/src/experiments/list/search/validation/schema.js
@@ -4,7 +4,7 @@ const schema = yup.lazy((obj) => {
   if (!!obj.start_time || !!obj.end_time) {
     return yup.object().shape({
       start_time: yup.date().required("End time is set, Start time required"),
-      end_time: yup.mixed().when("start_time", (startTime, schema) => {
+      end_time: yup.mixed().when("start_time", ([startTime], schema) => {
         return !!startTime
           ? yup
               .date()

diff --git a/ui/src/segments/components/form/validation/schema.js b/ui/src/segments/components/form/validation/schema.js
@@ -8,7 +8,7 @@ export const segmentConfigSchema = yup.lazy((obj) =>
       return {
         ...acc,
         [key]: yup.mixed()
-          .when("$segmenterTypes", (segmenterTypes) => {
+          .when("$segmenterTypes", ([segmenterTypes], _) => {
             switch ((segmenterTypes[key] || "").toUpperCase()) {
               case "BOOL":
                 return yup.array(
@@ -43,7 +43,7 @@ export const segmentConfigSchema = yup.lazy((obj) =>
           })
           .when(
             "$requiredSegmenterNames",
-            (requiredSegmenterNames, schema) => {
+            ([requiredSegmenterNames], schema) => {
               if (requiredSegmenterNames.includes(key)) {
                 return schema
                   .required(`Segmenter ${key} is required`)

diff --git a/ui/src/settings/segmenters/components/form/validation/schema.js b/ui/src/settings/segmenters/components/form/validation/schema.js
@@ -74,7 +74,7 @@ const schema = [
       .max(64, "Name should be between 4 and 64 characters")
       .matches(nameRegex, nameRegexDescription),
     type: yup
-      .mixed()
+      .string()
       .required("Segmenter Value Type should be selected")
       .oneOf(
         typeOptionsValues,

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -1913,10 +1913,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@caraml-dev/ui-lib@^1.13.0-build.3-a234b6b":
-  version "1.13.0-build.3-a234b6b"
-  resolved "https://registry.yarnpkg.com/@caraml-dev/ui-lib/-/ui-lib-1.13.0-build.3-a234b6b.tgz#f24d09d00c77f1288953da8f06893970cdeeda13"
-  integrity sha512-aiOWz2QNKJ3uK8No8r9FAfHHQNHe9cvSV5Bgznj7PRaTMpJbfDDSY8U+z+B60SjdtZ7qeeTiC14cEpmv/Ot07Q==
+"@caraml-dev/ui-lib@^1.13.0-build.4-09c363a":
+  version "1.13.0-build.4-09c363a"
+  resolved "https://registry.yarnpkg.com/@caraml-dev/ui-lib/-/ui-lib-1.13.0-build.4-09c363a.tgz#c80987fa5c7989450095d354acf51a023ca94e15"
+  integrity sha512-kqb/5koS2IQtdLJIh5tk+t30ZX2GvvQO7kAuE9oKXKlwBPr83Q+lvLxcvSg+rxILYxjOUeNn2izoej0ZGMDoRg==
   dependencies:
     "@react-oauth/google" "0.12.1"
     classnames "^2.5.1"