MAT-7790: Function Builder defaults (#382)

* MAT-7790: update defaults and fix button movement * MAT-7790: fix styles * MAT-7790: remove function name validation
MeasureAuthoringTool · Nov 25, 2024 · fb951f0 · fb951f0
1 parent 5ac33f6
commit fb951f0
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 1 deletion.
diff --git a/src/CqlBuilderPanel/definitionsSection/Definitions.scss b/src/CqlBuilderPanel/definitionsSection/Definitions.scss
@@ -68,6 +68,9 @@
       margin-top: 1rem;
       margin-right: 32px;
     }
+    > #clear-definition-btn:focus {
+      margin-right: 16px;
+    }
     > button[type="submit"] {
       margin-top: 0;
     }

diff --git a/src/CqlBuilderPanel/functionsSection/Functions.scss b/src/CqlBuilderPanel/functionsSection/Functions.scss
@@ -68,6 +68,9 @@
       margin-top: 1rem;
       margin-right: 32px;
     }
+    > #clear-function-btn:focus {
+      margin-right: 16px;
+    }
     > button[type="submit"] {
       margin-top: 0;
     }

diff --git a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx
@@ -8,6 +8,7 @@ import {
   TextField,
 } from "@madie/madie-design-system/dist/react";
 import "../Functions.scss";
+import { FunctionSectionSchemaValidator } from "../../../validations/FunctionSectionSchemaValidator";
 import ExpandingSection from "../../../common/ExpandingSection";
 import { Checkbox, FormControlLabel } from "@mui/material";
 import { Box } from "@mui/system";
@@ -45,8 +46,9 @@ export default function FunctionBuilder({
     initialValues: {
       functionName: funct?.functionName || "",
       comment: funct?.comment || "",
-      fluentFunction: funct?.fluentFunction || false,
+      fluentFunction: funct?.fluentFunction || true,
     },
+    validationSchema: FunctionSectionSchemaValidator,
     enableReinitialize: true,
     onSubmit: (values) => {},
   });
@@ -69,6 +71,8 @@ export default function FunctionBuilder({
               inputProps={{
                 "data-testid": "function-name-text-input",
               }}
+              error={Boolean(formik.errors.functionName)}
+              helperText={formik.errors.functionName}
               {...formik.getFieldProps("functionName")}
             />
           </div>
@@ -120,6 +124,7 @@ export default function FunctionBuilder({
         />
         <div className="form-actions">
           <Button
+            id="clear-function-btn"
             variant="outline"
             data-testid="clear-function-btn"
             disabled={!formik.dirty || !canEdit}
@@ -133,6 +138,7 @@ export default function FunctionBuilder({
           <Button
             data-testid={`function-apply-btn`}
             disabled={!formik.values.functionName || !canEdit || !formik.dirty}
+            // tw="ml-4"
             onClick={() => {}}
           >
             Apply

diff --git a/src/validations/FunctionSectionSchemaValidator.ts b/src/validations/FunctionSectionSchemaValidator.ts
@@ -0,0 +1,8 @@
+import * as Yup from "yup";
+
+export const FunctionSectionSchemaValidator = Yup.object().shape({
+  functionName: Yup.string().required("Function name is required"),
+  comment: Yup.string(),
+  fluentFunction: Yup.boolean(),
+  body: Yup.string(),
+});