MAT-7791: address feedback

src/CqlBuilderPanel/functionsSection/argumentSection/ArguementsSection.scss

@@ -0,0 +1,5 @@
+#clear-function-argument-btn {
+  &:focus {
+    margin-right: 16px;
+  }
+}

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}

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;
     }
   }

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>

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}

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,
   }),
 });