From 4d4f0a62d178c2ffbed01bf78ecb0cf285680abd Mon Sep 17 00:00:00 2001
From: mcmcphillips <matt.mcphillips@icf.com>
Date: Tue, 10 Dec 2024 11:42:02 -0800
Subject: [PATCH] MAT-7791: address feedback

---
 .../argumentSection/ArguementsSection.scss           |  5 +++++
 .../argumentSection/ArgumentSection.tsx              |  7 +++++--
 .../functionsSection/argumentSection/Arguments.scss  |  9 ++++++++-
 .../functionsSection/argumentSection/Arguments.tsx   | 12 ++++++++++++
 .../functionBuilder/FunctionBuilder.tsx              |  2 +-
 src/validations/FunctionArgumentSchemaValidator.ts   |  2 +-
 6 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100644 src/CqlBuilderPanel/functionsSection/argumentSection/ArguementsSection.scss

diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/ArguementsSection.scss b/src/CqlBuilderPanel/functionsSection/argumentSection/ArguementsSection.scss
new file mode 100644
index 0000000..5fd1c49
--- /dev/null
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/ArguementsSection.scss
@@ -0,0 +1,5 @@
+#clear-function-argument-btn {
+  &:focus {
+    margin-right: 16px;
+  }
+}
diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
index 7bffe06..8643395 100644
--- a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
@@ -16,6 +16,7 @@ import Arguments from "./Arguments";
 import { FunctionArgument } from "../../../model/CqlBuilderLookup";
 import ConfirmationDialog from "../../common/ConfirmationDialog";
 import { FunctionArgumentSchemaValidator } from "../../../validations/FunctionArgumentSchemaValidator";
+import "./ArguementsSection.scss";
 
 interface ArgumentsProps {
   functionArguments?: FunctionArgument[];
@@ -119,6 +120,7 @@ export default function ArgumentSection(props: ArgumentsProps) {
             onChange={(evt) => {
               setFunctionDataType(evt.target.value);
               formik.setFieldValue("dataType", evt.target.value);
+              formik.setFieldValue("other", "");
             }}
           />
         </div>
@@ -137,9 +139,9 @@ export default function ArgumentSection(props: ArgumentsProps) {
               inputProps={{
                 "data-testid": "other-type-input",
               }}
-              // required
+              required
               {...formik.getFieldProps("other")}
-              error={Boolean(formik.errors.other)}
+              error={formik.touched.other && Boolean(formik.errors.other)}
               helperText={formik.errors.other}
             />
           </div>
@@ -167,6 +169,7 @@ export default function ArgumentSection(props: ArgumentsProps) {
         </Button>
       </div>
       <div style={{ paddingTop: "24px" }}>
+        {/* tableData with pagination. */}
         <Arguments
           functionArguments={functionArguments}
           canEdit={canEdit}
diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.scss b/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.scss
index fd93211..d9fa67f 100644
--- a/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.scss
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.scss
@@ -2,15 +2,22 @@
   .arrow-container {
     display: flex;
     flex-direction: column;
+
     > button {
       display: flex;
       align-self: center;
+
       &:hover > svg {
         color: #197b9e;
       }
+
+      // prevent hover from showing on disabled
+      &:disabled > svg {
+        color: #717171 !important;
+      }
     }
     > button > svg {
-      color: #000; // Default color
+      color: #000;
       display: flex;
     }
   }
diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx b/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
index b3a473a..f13638c 100644
--- a/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
@@ -74,6 +74,7 @@ const Arguments = ({
   const [currentPage, setCurrentPage] = useState<number>(1);
 
   const managePagination = useCallback(() => {
+    //  page zero for no pages available
     if (functionArguments.length < currentLimit) {
       setOffset(0);
       setVisibleArguments([...functionArguments]);
@@ -109,6 +110,15 @@ const Arguments = ({
   const handlePageChange = (e, v) => {
     setCurrentPage(v);
   };
+  // maybe an additional useEffect if functionArguments. letting this happen outside of useCallback to prevent us having to compare against old values using refs.
+  // slightly less performant, but much less complicated then a bunch of refs and checking prev state to delegate pagination correctly
+  useEffect(() => {
+    if (functionArguments?.length > currentLimit) {
+      const newTotalPages = Math.ceil(functionArguments.length / currentLimit);
+      handlePageChange(null, newTotalPages);
+    }
+  }, [functionArguments, currentLimit]);
+
   const handleLimitChange = (e) => {
     setCurrentLimit(e.target.value);
     setCurrentPage(1);
@@ -163,11 +173,13 @@ const Arguments = ({
               <div className="arrow-container">
                 <button
                   onClick={() => moveItem(row.row.index, row.row.index - 1)}
+                  disabled={row.row.index == 0}
                 >
                   <ArrowDropUpOutlinedIcon />
                 </button>
                 <button
                   onClick={() => moveItem(row.row.index, row.row.index + 1)}
+                  disabled={row.row.index === functionArguments.length - 1}
                 >
                   <ArrowDropDownOutlinedIcon />
                 </button>
diff --git a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx
index 12873a0..96ac947 100644
--- a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx
+++ b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx
@@ -50,7 +50,6 @@ export default function FunctionBuilder({
     useState<boolean>(false);
   const textAreaRef = useRef(null);
   const [confirmationDialog, setConfirmationDialog] = useState<boolean>(false);
-
   const [expressionEditorValue, setExpressionEditorValue] = useState("");
   const [cursorPosition, setCursorPosition] = useState(null);
   const [autoInsert, setAutoInsert] = useState(false);
@@ -180,6 +179,7 @@ export default function FunctionBuilder({
           title="Arguments"
           showHeaderContent={argumentsEditorOpen}
         >
+          {/* functional input fields */}
           <ArgumentSection
             canEdit={canEdit}
             addArgumentToFunctionsArguments={addArgumentToFunctionsArguments}
diff --git a/src/validations/FunctionArgumentSchemaValidator.ts b/src/validations/FunctionArgumentSchemaValidator.ts
index 48c0373..7cc13d3 100644
--- a/src/validations/FunctionArgumentSchemaValidator.ts
+++ b/src/validations/FunctionArgumentSchemaValidator.ts
@@ -9,7 +9,7 @@ export const FunctionArgumentSchemaValidator = Yup.object().shape({
   other: Yup.string().when("dataType", {
     is: (value: any) => value === "Other",
     then: (schema) =>
-      schema.required("This field is required when dataType is 'Other'."),
+      schema.required("Other is required when dataType is Other."),
     otherwise: (schema) => schema,
   }),
 });