From d7a418d7464e81369591bdf926ec538a5b3f0ab7 Mon Sep 17 00:00:00 2001
From: Christopher Hubert <christopher.hubert@semanticbits.com>
Date: Thu, 5 Dec 2024 15:09:12 -0500
Subject: [PATCH 1/8] MAT-7791: add fields to argument section in function
 builder

---
 .../argumentSection/ArgumentSection.tsx       | 155 ++++++++++++++++++
 .../argumentSection/Arguments.tsx             | 137 ++++++++++++++++
 .../functionBuilder/FunctionBuilder.tsx       |   9 +-
 src/model/CqlBuilderLookup.ts                 |   7 +-
 4 files changed, 305 insertions(+), 3 deletions(-)
 create mode 100644 src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
 create mode 100644 src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx

diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
new file mode 100644
index 00000000..e0a2ad1a
--- /dev/null
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
@@ -0,0 +1,155 @@
+import React, { useCallback, useEffect, useState } from "react";
+import "twin.macro";
+import "styled-components/macro";
+import {
+  Select,
+  Button,
+  AutoComplete,
+  TextField,
+} from "@madie/madie-design-system/dist/react";
+import ExpandingSection from "../../../common/ExpandingSection";
+import { MenuItem } from "@mui/material";
+import * as _ from "lodash";
+
+import { useFormik, useFormikContext } from "formik";
+import Arguments from "./Arguments";
+import { FunctionArgument } from "../../../model/CqlBuilderLookup";
+
+interface ArgumentsProps {
+  functionArgument?: FunctionArgument;
+  setConfirmationDialog: Function;
+  canEdit: boolean;
+}
+
+const availableDataTypes = [
+  "Boolean",
+  "Date",
+  "Date Time",
+  "Decimal",
+  "Integer",
+  "Ratio",
+  "String",
+  "Time",
+  "Other",
+];
+
+export default function ArgumentSection(props: ArgumentsProps) {
+  const { functionArgument, setConfirmationDialog, canEdit } = props;
+  const [functionDataType, setFunctionDataType] = useState(
+    functionArgument?.dataType || ""
+  );
+
+  const formik = useFormik({
+    initialValues: {
+      argumentName: "",
+      dataType: "",
+      other: "",
+    },
+    // validationSchema: FunctionSectionSchemaValidator,
+    enableReinitialize: true,
+    onSubmit: (values) => {},
+  });
+
+  const { resetForm } = formik;
+
+  return (
+    <>
+      <div tw="flex flex-wrap">
+        <div tw="w-1/2">
+          <TextField
+            label="Name"
+            id="argument-name-field"
+            name="argumentName"
+            tw="w-full"
+            readOnly={!canEdit}
+            disabled={!canEdit}
+            placeholder=""
+            inputProps={{
+              "data-testid": "argument-name-input",
+            }}
+            {...formik.getFieldProps("argumentName")}
+            error={Boolean(formik.errors.argumentName)}
+            helperText={formik.errors.argumentName}
+          />
+        </div>
+        <div tw="flex-grow pl-5">
+          <Select
+            label="Available DataTypes"
+            id="type-selector"
+            inputProps={{
+              "data-testid": "type-selector-input",
+            }}
+            data-testid="type-selector"
+            SelectDisplayProps={{
+              "aria-required": "true",
+            }}
+            options={availableDataTypes.map((value) => (
+              <MenuItem
+                key={`${value}-option`}
+                value={value}
+                data-testid={`${value}-option`}
+              >
+                {value}
+              </MenuItem>
+            ))}
+            disabled={!canEdit}
+            {...formik.getFieldProps("dataType")}
+            error={Boolean(formik.errors.dataType)}
+            helperText={formik.errors.dataType}
+            onChange={(evt) => {
+              setFunctionDataType(evt.target.value);
+              formik.setFieldValue("dataType", evt.target.value);
+            }}
+          />
+        </div>
+      </div>
+      {functionDataType && functionDataType === "Other" && (
+        <div tw="flex flex-wrap">
+          <div tw="pt-6 w-1/2">
+            <TextField
+              label="Other"
+              id="other-field"
+              name="otherType"
+              tw="w-full"
+              readOnly={!canEdit}
+              disabled={!canEdit}
+              placeholder=""
+              inputProps={{
+                "data-testid": "other-type-input",
+              }}
+              {...formik.getFieldProps("other")}
+              error={Boolean(formik.errors.other)}
+              helperText={formik.errors.other}
+            />
+          </div>
+        </div>
+      )}
+      <div style={{ paddingTop: "24px", justifySelf: "end" }}>
+        <Button
+          id="clear-function-argument-btn"
+          variant="outline"
+          data-testid="clear-function-argument-btn"
+          disabled={!canEdit}
+          tw="mr-4"
+          onClick={() => {
+            resetForm();
+            setFunctionDataType("");
+            setConfirmationDialog(true);
+          }}
+        >
+          Clear
+        </Button>
+        <Button
+          data-testid={`function-argument-add-btn`}
+          disabled={!canEdit}
+          onClick={() => {}}
+        >
+          Add
+        </Button>
+      </div>
+      <div style={{ paddingTop: "24px" }}>
+        <Arguments functionArguments={[]} canEdit={canEdit} />
+      </div>
+    </>
+  );
+}
diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx b/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
new file mode 100644
index 00000000..69a7376c
--- /dev/null
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
@@ -0,0 +1,137 @@
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import React, { useMemo } from "react";
+import { FunctionArgument } from "../../../model/CqlBuilderLookup";
+import tw from "twin.macro";
+import "styled-components/macro";
+
+type PropTypes = {
+  functionArguments: Array<FunctionArgument>;
+  canEdit: boolean;
+};
+
+type RowDef = {
+  arrows: string;
+  name: string;
+  datatype: string;
+  action: string;
+};
+
+const TH = tw.th`p-3 text-left text-sm font-bold capitalize`;
+
+const Arguments = ({ functionArguments, canEdit }: PropTypes) => {
+  // table data
+  const data = functionArguments.map((argument) => {
+    return {
+      arrows: null,
+      name: argument.argumentName,
+      datatype: argument.dataType,
+      action: null,
+    };
+  });
+  const columns = useMemo<ColumnDef<RowDef>[]>(() => {
+    return [
+      {
+        header: "",
+        accessorKey: "arrows",
+      },
+      {
+        header: "Name",
+        accessorKey: "name",
+      },
+      {
+        header: "DataType",
+        accessorKey: "datatype",
+      },
+      {
+        header: "",
+        accessorKey: "action",
+      },
+    ];
+  }, [functionArguments]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <>
+      <div className="function-argument-container">
+        <table
+          tw="min-w-full"
+          data-testid="function-argument-tbl"
+          id="function-argument-tbl"
+          style={{
+            borderBottom: "solid 1px #8c8c8c",
+          }}
+        >
+          <thead tw="bg-slate">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TH key={header.id} scope="col">
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TH>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody data-testid="function-argument-table-body">
+            {functionArguments?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <tr key={row.id} data-test-id={`row-${row.id}`}>
+                  {row.getVisibleCells().map((cell) => (
+                    <td key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </td>
+                  ))}
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={columns.length} tw="text-center p-2">
+                  No Results were found
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+        {/* {functionArguments?.length > 0 && (
+        <div className="pagination-container">
+          <Pagination
+            data-testid="function-argument-pagination"
+            totalItems={totalItems}
+            limitOptions={[5, 10, 25, 50]}
+            visibleItems={visibleItems}
+            offset={offset}
+            handlePageChange={handlePageChange}
+            handleLimitChange={handleLimitChange}
+            page={currentPage}
+            limit={currentLimit}
+            count={totalPages}
+            hideNextButton={!canGoNext}
+            hidePrevButton={!canGoPrev}
+            shape="rounded"
+          />
+        </div>
+      )} */}
+      </div>
+    </>
+  );
+};
+
+export default Arguments;
diff --git a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx
index f56399f4..2daa32b4 100644
--- a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx
+++ b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx
@@ -13,6 +13,7 @@ import ExpandingSection from "../../../common/ExpandingSection";
 import { Checkbox, FormControlLabel } from "@mui/material";
 import { Box } from "@mui/system";
 import ConfirmationDialog from "../../common/ConfirmationDialog";
+import ArgumentSection from "../argumentSection/ArgumentSection";
 
 export interface Funct {
   functionName?: string;
@@ -114,8 +115,12 @@ export default function FunctionBuilder({
         <ExpandingSection
           title="Arguments"
           showHeaderContent={argumentsEditorOpen}
-          children={<></>}
-        />
+        >
+          <ArgumentSection
+            setConfirmationDialog={setConfirmationDialog}
+            canEdit={canEdit}
+          />
+        </ExpandingSection>
         <div style={{ marginTop: "36px" }} />
         <ExpandingSection
           title="Expression Editor"
diff --git a/src/model/CqlBuilderLookup.ts b/src/model/CqlBuilderLookup.ts
index 3617ecc5..5ded0a02 100644
--- a/src/model/CqlBuilderLookup.ts
+++ b/src/model/CqlBuilderLookup.ts
@@ -15,5 +15,10 @@ export interface Lookup {
 
 export interface FunctionLookup extends Lookup {
   isFluent?: string;
-  argumentNames?: string[];
+  arguments?: FunctionArgument[];
+}
+
+export interface FunctionArgument {
+  argumentName?: string;
+  dataType?: string;
 }

From 1e5512d41a594138a50dcc994ec5b016fbf51ad0 Mon Sep 17 00:00:00 2001
From: mcmcphillips <matt.mcphillips@icf.com>
Date: Thu, 5 Dec 2024 12:50:15 -0800
Subject: [PATCH 2/8] MAT-7791: partial

---
 .../argumentSection/ArgumentSection.tsx       | 40 ++++++++++++-------
 .../functionBuilder/FunctionBuilder.tsx       | 12 +++++-
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
index e0a2ad1a..0bc436b5 100644
--- a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
@@ -11,14 +11,15 @@ import ExpandingSection from "../../../common/ExpandingSection";
 import { MenuItem } from "@mui/material";
 import * as _ from "lodash";
 
-import { useFormik, useFormikContext } from "formik";
+import { useFormik } from "formik";
 import Arguments from "./Arguments";
 import { FunctionArgument } from "../../../model/CqlBuilderLookup";
 
 interface ArgumentsProps {
-  functionArgument?: FunctionArgument;
+  functionArguments?: FunctionArgument[];
   setConfirmationDialog: Function;
   canEdit: boolean;
+  addArgumentToFunctionsArguments: Function;
 }
 
 const availableDataTypes = [
@@ -34,10 +35,12 @@ const availableDataTypes = [
 ];
 
 export default function ArgumentSection(props: ArgumentsProps) {
-  const { functionArgument, setConfirmationDialog, canEdit } = props;
-  const [functionDataType, setFunctionDataType] = useState(
-    functionArgument?.dataType || ""
-  );
+  const {
+    addArgumentToFunctionsArguments,
+    functionArguments,
+    setConfirmationDialog,
+    canEdit,
+  } = props;
 
   const formik = useFormik({
     initialValues: {
@@ -46,10 +49,19 @@ export default function ArgumentSection(props: ArgumentsProps) {
       other: "",
     },
     // validationSchema: FunctionSectionSchemaValidator,
-    enableReinitialize: true,
+    enableReinitialize: false,
     onSubmit: (values) => {},
   });
+  const { dataType } = formik.values;
 
+  const handleSubmit = () => {
+    const fnToAdd = {
+      argumentName: formik.values.argumentName,
+      dataType: formik.values.dataType,
+    };
+    addArgumentToFunctionsArguments(fnToAdd);
+    formik.resetForm();
+  };
   const { resetForm } = formik;
 
   return (
@@ -83,7 +95,7 @@ export default function ArgumentSection(props: ArgumentsProps) {
             SelectDisplayProps={{
               "aria-required": "true",
             }}
-            options={availableDataTypes.map((value) => (
+            options={availableDataTypes?.map((value) => (
               <MenuItem
                 key={`${value}-option`}
                 value={value}
@@ -97,13 +109,12 @@ export default function ArgumentSection(props: ArgumentsProps) {
             error={Boolean(formik.errors.dataType)}
             helperText={formik.errors.dataType}
             onChange={(evt) => {
-              setFunctionDataType(evt.target.value);
               formik.setFieldValue("dataType", evt.target.value);
             }}
           />
         </div>
       </div>
-      {functionDataType && functionDataType === "Other" && (
+      {dataType && dataType === "Other" && (
         <div tw="flex flex-wrap">
           <div tw="pt-6 w-1/2">
             <TextField
@@ -132,8 +143,7 @@ export default function ArgumentSection(props: ArgumentsProps) {
           disabled={!canEdit}
           tw="mr-4"
           onClick={() => {
-            resetForm();
-            setFunctionDataType("");
+            // resetForm();
             setConfirmationDialog(true);
           }}
         >
@@ -141,14 +151,14 @@ export default function ArgumentSection(props: ArgumentsProps) {
         </Button>
         <Button
           data-testid={`function-argument-add-btn`}
-          disabled={!canEdit}
-          onClick={() => {}}
+          disabled={!canEdit || !formik.isValid}
+          onClick={handleSubmit}
         >
           Add
         </Button>
       </div>
       <div style={{ paddingTop: "24px" }}>
-        <Arguments functionArguments={[]} canEdit={canEdit} />
+        <Arguments functionArguments={functionArguments} canEdit={canEdit} />
       </div>
     </>
   );
diff --git a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx
index 2daa32b4..0f4e3f2b 100644
--- a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx
+++ b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef } from "react";
 import "twin.macro";
 import "styled-components/macro";
-import { useFormik } from "formik";
+import { useFormik, FormikProvider } from "formik";
 import {
   Button,
   TextArea,
@@ -18,6 +18,7 @@ import ArgumentSection from "../argumentSection/ArgumentSection";
 export interface Funct {
   functionName?: string;
   fluentFunction?: boolean;
+  functionsArguments: any;
   comment?: string;
 }
 
@@ -48,6 +49,7 @@ export default function FunctionBuilder({
       functionName: funct?.functionName || "",
       comment: funct?.comment || "",
       fluentFunction: funct?.fluentFunction || true,
+      functionsArguments: funct?.functionsArguments || [],
     },
     validationSchema: FunctionSectionSchemaValidator,
     enableReinitialize: true,
@@ -55,6 +57,11 @@ export default function FunctionBuilder({
   });
   const { resetForm } = formik;
 
+  const addArgumentToFunctionsArguments = (fn) => {
+    const newArgs = [...formik.values.functionsArguments, fn];
+    formik.setFieldValue("functionsArguments", newArgs);
+  };
+
   return (
     <div>
       <form id="function-form" onSubmit={formik.handleSubmit}>
@@ -119,8 +126,11 @@ export default function FunctionBuilder({
           <ArgumentSection
             setConfirmationDialog={setConfirmationDialog}
             canEdit={canEdit}
+            addArgumentToFunctionsArguments={addArgumentToFunctionsArguments}
+            functionArguments={formik.values.functionsArguments}
           />
         </ExpandingSection>
+
         <div style={{ marginTop: "36px" }} />
         <ExpandingSection
           title="Expression Editor"

From 66761c66586b3ce7eb2847255152dc0940a49507 Mon Sep 17 00:00:00 2001
From: Christopher Hubert <christopher.hubert@semanticbits.com>
Date: Thu, 5 Dec 2024 16:01:47 -0500
Subject: [PATCH 3/8] MAT-7791: add pagination

---
 .../argumentSection/ArgumentSection.tsx       |  24 ++--
 .../argumentSection/Arguments.tsx             | 130 +++++++++++++++---
 .../functionBuilder/FunctionBuilder.tsx       |   1 -
 3 files changed, 123 insertions(+), 32 deletions(-)

diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
index 0bc436b5..e667fa2e 100644
--- a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
@@ -14,10 +14,10 @@ import * as _ from "lodash";
 import { useFormik } from "formik";
 import Arguments from "./Arguments";
 import { FunctionArgument } from "../../../model/CqlBuilderLookup";
+import ConfirmationDialog from "../../common/ConfirmationDialog";
 
 interface ArgumentsProps {
   functionArguments?: FunctionArgument[];
-  setConfirmationDialog: Function;
   canEdit: boolean;
   addArgumentToFunctionsArguments: Function;
 }
@@ -35,12 +35,9 @@ const availableDataTypes = [
 ];
 
 export default function ArgumentSection(props: ArgumentsProps) {
-  const {
-    addArgumentToFunctionsArguments,
-    functionArguments,
-    setConfirmationDialog,
-    canEdit,
-  } = props;
+  const { addArgumentToFunctionsArguments, functionArguments, canEdit } = props;
+  const [functionDataType, setFunctionDataType] = useState("");
+  const [confirmationDialog, setConfirmationDialog] = useState<boolean>(false);
 
   const formik = useFormik({
     initialValues: {
@@ -109,12 +106,13 @@ export default function ArgumentSection(props: ArgumentsProps) {
             error={Boolean(formik.errors.dataType)}
             helperText={formik.errors.dataType}
             onChange={(evt) => {
+              setFunctionDataType(evt.target.value);
               formik.setFieldValue("dataType", evt.target.value);
             }}
           />
         </div>
       </div>
-      {dataType && dataType === "Other" && (
+      {functionDataType && functionDataType === "Other" && (
         <div tw="flex flex-wrap">
           <div tw="pt-6 w-1/2">
             <TextField
@@ -143,7 +141,6 @@ export default function ArgumentSection(props: ArgumentsProps) {
           disabled={!canEdit}
           tw="mr-4"
           onClick={() => {
-            // resetForm();
             setConfirmationDialog(true);
           }}
         >
@@ -160,6 +157,15 @@ export default function ArgumentSection(props: ArgumentsProps) {
       <div style={{ paddingTop: "24px" }}>
         <Arguments functionArguments={functionArguments} canEdit={canEdit} />
       </div>
+      <ConfirmationDialog
+        open={confirmationDialog}
+        onClose={() => setConfirmationDialog(false)}
+        onSubmit={() => {
+          resetForm();
+          setFunctionDataType("");
+          setConfirmationDialog(false);
+        }}
+      />
     </>
   );
 }
diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx b/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
index 69a7376c..43d6280b 100644
--- a/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
@@ -4,13 +4,20 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import React, { useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { FunctionArgument } from "../../../model/CqlBuilderLookup";
 import tw from "twin.macro";
 import "styled-components/macro";
+import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import { Pagination } from "@madie/madie-design-system/dist/react";
+import { Stack } from "@mui/material";
+import ToolTippedIcon from "../../../toolTippedIcon/ToolTippedIcon";
 
 type PropTypes = {
   functionArguments: Array<FunctionArgument>;
+  handleDeleteArgument?: (argument) => void;
   canEdit: boolean;
 };
 
@@ -23,10 +30,72 @@ type RowDef = {
 
 const TH = tw.th`p-3 text-left text-sm font-bold capitalize`;
 
-const Arguments = ({ functionArguments, canEdit }: PropTypes) => {
+const Arguments = ({
+  functionArguments,
+  handleDeleteArgument,
+  canEdit,
+}: PropTypes) => {
+  const [visibleArguments, setVisibleArguments] = useState<FunctionArgument[]>(
+    []
+  );
+
+  // pagination utilities
+  const [totalPages, setTotalPages] = useState<number>(0);
+  const [totalItems, setTotalItems] = useState<number>(0);
+  const [visibleItems, setVisibleItems] = useState<number>(0);
+  const [offset, setOffset] = useState<number>(0);
+  const [currentLimit, setCurrentLimit] = useState<number>(5);
+  const [currentPage, setCurrentPage] = useState<number>(1);
+
+  const managePagination = useCallback(() => {
+    if (functionArguments.length < currentLimit) {
+      setOffset(0);
+      setVisibleArguments([...functionArguments]);
+      setVisibleItems(functionArguments.length);
+      setTotalItems(functionArguments.length);
+      setTotalPages(1);
+    } else {
+      const start = (currentPage - 1) * currentLimit;
+      const end = start + currentLimit;
+      const newVisibleArguments = [...functionArguments].slice(start, end);
+      setVisibleArguments(newVisibleArguments);
+      setOffset(start);
+      setVisibleItems(newVisibleArguments.length);
+      setTotalItems(functionArguments.length);
+      setTotalPages(Math.ceil(functionArguments.length / currentLimit));
+    }
+  }, [
+    currentLimit,
+    currentPage,
+    functionArguments,
+    setOffset,
+    setVisibleArguments,
+    setVisibleItems,
+    setTotalItems,
+    setTotalPages,
+  ]);
+
+  const canGoNext = (() => {
+    return currentPage < totalPages;
+  })();
+  const canGoPrev = currentPage > 1;
+
+  const handlePageChange = (e, v) => {
+    setCurrentPage(v);
+  };
+  const handleLimitChange = (e) => {
+    setCurrentLimit(e.target.value);
+    setCurrentPage(1);
+  };
+
+  useEffect(() => {
+    managePagination();
+  }, [functionArguments, currentPage, currentLimit]);
+
   // table data
-  const data = functionArguments.map((argument) => {
+  const data = visibleArguments.map((argument) => {
     return {
+      //   id: i,
       arrows: null,
       name: argument.argumentName,
       datatype: argument.dataType,
@@ -50,6 +119,23 @@ const Arguments = ({ functionArguments, canEdit }: PropTypes) => {
       {
         header: "",
         accessorKey: "action",
+        cell: (row: any) => {
+          return (
+            <Stack direction="row" alignItems="center">
+              <ToolTippedIcon
+                tooltipMessage="Delete"
+                buttonProps={{
+                  "data-testid": `delete-button-${row.id}`,
+                  "aria-label": `delete-button-${row.id}`,
+                  size: "small",
+                  onClick: () => {},
+                }}
+              >
+                <DeleteOutlineIcon color="error" />
+              </ToolTippedIcon>
+            </Stack>
+          );
+        },
       },
     ];
   }, [functionArguments]);
@@ -110,25 +196,25 @@ const Arguments = ({ functionArguments, canEdit }: PropTypes) => {
             )}
           </tbody>
         </table>
-        {/* {functionArguments?.length > 0 && (
-        <div className="pagination-container">
-          <Pagination
-            data-testid="function-argument-pagination"
-            totalItems={totalItems}
-            limitOptions={[5, 10, 25, 50]}
-            visibleItems={visibleItems}
-            offset={offset}
-            handlePageChange={handlePageChange}
-            handleLimitChange={handleLimitChange}
-            page={currentPage}
-            limit={currentLimit}
-            count={totalPages}
-            hideNextButton={!canGoNext}
-            hidePrevButton={!canGoPrev}
-            shape="rounded"
-          />
-        </div>
-      )} */}
+        {functionArguments?.length > 0 && (
+          <div className="pagination-container">
+            <Pagination
+              data-testid="function-argument-pagination"
+              totalItems={totalItems}
+              limitOptions={[5, 10, 25, 50]}
+              visibleItems={visibleItems}
+              offset={offset}
+              handlePageChange={handlePageChange}
+              handleLimitChange={handleLimitChange}
+              page={currentPage}
+              limit={currentLimit}
+              count={totalPages}
+              hideNextButton={!canGoNext}
+              hidePrevButton={!canGoPrev}
+              shape="rounded"
+            />
+          </div>
+        )}
       </div>
     </>
   );
diff --git a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx
index 0f4e3f2b..1f4e47a2 100644
--- a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx
+++ b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx
@@ -124,7 +124,6 @@ export default function FunctionBuilder({
           showHeaderContent={argumentsEditorOpen}
         >
           <ArgumentSection
-            setConfirmationDialog={setConfirmationDialog}
             canEdit={canEdit}
             addArgumentToFunctionsArguments={addArgumentToFunctionsArguments}
             functionArguments={formik.values.functionsArguments}

From 4b32d57e49cd317a8c5e38a64b805401d3ab5324 Mon Sep 17 00:00:00 2001
From: mcmcphillips <matt.mcphillips@icf.com>
Date: Thu, 5 Dec 2024 13:25:13 -0800
Subject: [PATCH 4/8] MAT-7791: partial

---
 .../argumentSection/Arguments.scss              | 17 +++++++++++++++++
 .../argumentSection/Arguments.tsx               | 17 +++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.scss

diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.scss b/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.scss
new file mode 100644
index 00000000..fd932117
--- /dev/null
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.scss
@@ -0,0 +1,17 @@
+#function-argument-tbl {
+  .arrow-container {
+    display: flex;
+    flex-direction: column;
+    > button {
+      display: flex;
+      align-self: center;
+      &:hover > svg {
+        color: #197b9e;
+      }
+    }
+    > button > svg {
+      color: #000; // Default color
+      display: flex;
+    }
+  }
+}
diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx b/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
index 43d6280b..70e77b1a 100644
--- a/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
@@ -8,12 +8,13 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { FunctionArgument } from "../../../model/CqlBuilderLookup";
 import tw from "twin.macro";
 import "styled-components/macro";
-import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import ArrowDropDownOutlinedIcon from "@mui/icons-material/ArrowDropDownOutlined";
+import ArrowDropUpOutlinedIcon from "@mui/icons-material/ArrowDropUpOutlined";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import { Pagination } from "@madie/madie-design-system/dist/react";
 import { Stack } from "@mui/material";
 import ToolTippedIcon from "../../../toolTippedIcon/ToolTippedIcon";
+import "./Arguments.scss";
 
 type PropTypes = {
   functionArguments: Array<FunctionArgument>;
@@ -107,6 +108,18 @@ const Arguments = ({
       {
         header: "",
         accessorKey: "arrows",
+        cell: (row: any) => {
+          return (
+            <div className="arrow-container">
+              <button>
+                <ArrowDropUpOutlinedIcon />
+              </button>
+              <button>
+                <ArrowDropDownOutlinedIcon />
+              </button>
+            </div>
+          );
+        },
       },
       {
         header: "Name",

From 772ff06ad50eb1ae8d45ab52abaa48a1a9270fb5 Mon Sep 17 00:00:00 2001
From: Christopher Hubert <christopher.hubert@semanticbits.com>
Date: Thu, 5 Dec 2024 17:41:02 -0500
Subject: [PATCH 5/8] MAT-7791: make elements in argument table moveable

---
 .../argumentSection/ArgumentSection.tsx       |  6 +-
 .../argumentSection/Arguments.tsx             | 66 +++++++++++++++++--
 2 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
index e667fa2e..cc31dc4c 100644
--- a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
@@ -52,9 +52,13 @@ export default function ArgumentSection(props: ArgumentsProps) {
   const { dataType } = formik.values;
 
   const handleSubmit = () => {
+    let value = formik.values.dataType;
+    if (functionDataType === "Other") {
+      value = formik.values.other;
+    }
     const fnToAdd = {
       argumentName: formik.values.argumentName,
-      dataType: formik.values.dataType,
+      dataType: value,
     };
     addArgumentToFunctionsArguments(fnToAdd);
     formik.resetForm();
diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx b/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
index 70e77b1a..8b359d2c 100644
--- a/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
@@ -4,17 +4,28 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useState,
+} from "react";
 import { FunctionArgument } from "../../../model/CqlBuilderLookup";
 import tw from "twin.macro";
 import "styled-components/macro";
 import ArrowDropDownOutlinedIcon from "@mui/icons-material/ArrowDropDownOutlined";
 import ArrowDropUpOutlinedIcon from "@mui/icons-material/ArrowDropUpOutlined";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
-import { Pagination } from "@madie/madie-design-system/dist/react";
+import {
+  MadieDeleteDialog,
+  Pagination,
+  Toast,
+} from "@madie/madie-design-system/dist/react";
 import { Stack } from "@mui/material";
 import ToolTippedIcon from "../../../toolTippedIcon/ToolTippedIcon";
 import "./Arguments.scss";
+import toastReducer from "../../../common/ToastReducer";
 
 type PropTypes = {
   functionArguments: Array<FunctionArgument>;
@@ -23,6 +34,7 @@ type PropTypes = {
 };
 
 type RowDef = {
+  id: number;
   arrows: string;
   name: string;
   datatype: string;
@@ -40,6 +52,19 @@ const Arguments = ({
     []
   );
 
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState<boolean>(false);
+
+  // toast utilities
+  const [toastState, dispatch] = useReducer(
+    toastReducer,
+    {
+      open: false,
+      type: "danger",
+      message: "",
+    },
+    undefined
+  );
+
   // pagination utilities
   const [totalPages, setTotalPages] = useState<number>(0);
   const [totalItems, setTotalItems] = useState<number>(0);
@@ -94,15 +119,24 @@ const Arguments = ({
   }, [functionArguments, currentPage, currentLimit]);
 
   // table data
-  const data = visibleArguments.map((argument) => {
+  const data = visibleArguments.map((argument, i) => {
     return {
-      //   id: i,
+      id: i,
       arrows: null,
       name: argument.argumentName,
       datatype: argument.dataType,
       action: null,
     };
   });
+
+  const moveItem = (fromIndex, toIndex) => {
+    setVisibleArguments((prevItems) => {
+      const newItems = [...prevItems];
+      const [item] = newItems.splice(fromIndex, 1);
+      newItems.splice(toIndex, 0, item);
+      return newItems;
+    });
+  };
   const columns = useMemo<ColumnDef<RowDef>[]>(() => {
     return [
       {
@@ -111,10 +145,14 @@ const Arguments = ({
         cell: (row: any) => {
           return (
             <div className="arrow-container">
-              <button>
+              <button
+                onClick={() => moveItem(row.row.index, row.row.index - 1)}
+              >
                 <ArrowDropUpOutlinedIcon />
               </button>
-              <button>
+              <button
+                onClick={() => moveItem(row.row.index, row.row.index + 1)}
+              >
                 <ArrowDropDownOutlinedIcon />
               </button>
             </div>
@@ -229,6 +267,22 @@ const Arguments = ({
           </div>
         )}
       </div>
+      <Toast
+        toastKey="function-argument-toast"
+        testId="function-argument-toast"
+        toastType={toastState.type}
+        open={toastState.open}
+        message={toastState.message}
+        onClose={() => dispatch({ type: "HIDE_TOAST" })}
+        autoHideDuration={8000}
+      />
+      <MadieDeleteDialog
+        open={deleteDialogOpen}
+        onContinue={() => handleDeleteArgument(null)}
+        onClose={() => setDeleteDialogOpen(false)}
+        dialogTitle="Are you sure?"
+        name={"this Argument"}
+      />
     </>
   );
 };

From fb69bb3c692f6e5e13925cd8f45f7dad021bcd4d Mon Sep 17 00:00:00 2001
From: Christopher Hubert <christopher.hubert@semanticbits.com>
Date: Fri, 6 Dec 2024 11:57:34 -0500
Subject: [PATCH 6/8] MAT-7791: update delete function

---
 .../argumentSection/ArgumentSection.tsx       | 14 +++++++--
 .../argumentSection/Arguments.tsx             | 30 ++++++++++++++++---
 .../functionBuilder/FunctionBuilder.tsx       | 12 ++++++++
 3 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
index cc31dc4c..0fe37201 100644
--- a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
@@ -20,6 +20,7 @@ interface ArgumentsProps {
   functionArguments?: FunctionArgument[];
   canEdit: boolean;
   addArgumentToFunctionsArguments: Function;
+  deleteArgumentFromFunctionArguments: Function;
 }
 
 const availableDataTypes = [
@@ -35,7 +36,12 @@ const availableDataTypes = [
 ];
 
 export default function ArgumentSection(props: ArgumentsProps) {
-  const { addArgumentToFunctionsArguments, functionArguments, canEdit } = props;
+  const {
+    addArgumentToFunctionsArguments,
+    deleteArgumentFromFunctionArguments,
+    functionArguments,
+    canEdit,
+  } = props;
   const [functionDataType, setFunctionDataType] = useState("");
   const [confirmationDialog, setConfirmationDialog] = useState<boolean>(false);
 
@@ -159,7 +165,11 @@ export default function ArgumentSection(props: ArgumentsProps) {
         </Button>
       </div>
       <div style={{ paddingTop: "24px" }}>
-        <Arguments functionArguments={functionArguments} canEdit={canEdit} />
+        <Arguments
+          functionArguments={functionArguments}
+          canEdit={canEdit}
+          handleDeleteArgument={deleteArgumentFromFunctionArguments}
+        />
       </div>
       <ConfirmationDialog
         open={confirmationDialog}
diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx b/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
index 8b359d2c..d13987db 100644
--- a/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/Arguments.tsx
@@ -29,7 +29,7 @@ import toastReducer from "../../../common/ToastReducer";
 
 type PropTypes = {
   functionArguments: Array<FunctionArgument>;
-  handleDeleteArgument?: (argument) => void;
+  handleDeleteArgument?: Function;
   canEdit: boolean;
 };
 
@@ -51,7 +51,7 @@ const Arguments = ({
   const [visibleArguments, setVisibleArguments] = useState<FunctionArgument[]>(
     []
   );
-
+  const [selectedArgument, setSelectedArgument] = useState<FunctionArgument>();
   const [deleteDialogOpen, setDeleteDialogOpen] = useState<boolean>(false);
 
   // toast utilities
@@ -118,6 +118,21 @@ const Arguments = ({
     managePagination();
   }, [functionArguments, currentPage, currentLimit]);
 
+  const deleteFunctionArgument = () => {
+    handleDeleteArgument(selectedArgument);
+    setDeleteDialogOpen(false);
+    dispatch({
+      type: "SHOW_TOAST",
+      payload: {
+        type: "success",
+        message:
+          "Argument " +
+          selectedArgument.argumentName +
+          " has been successfully removed from the function",
+      },
+    });
+  };
+
   // table data
   const data = visibleArguments.map((argument, i) => {
     return {
@@ -179,7 +194,14 @@ const Arguments = ({
                   "data-testid": `delete-button-${row.id}`,
                   "aria-label": `delete-button-${row.id}`,
                   size: "small",
-                  onClick: () => {},
+                  onClick: () => {
+                    // const rowModal = table.getRow(row.id).original;
+                    setSelectedArgument({
+                      argumentName: row.row.original.name,
+                      dataType: row.row.original.datatype,
+                    } as FunctionArgument);
+                    setDeleteDialogOpen(true);
+                  },
                 }}
               >
                 <DeleteOutlineIcon color="error" />
@@ -278,7 +300,7 @@ const Arguments = ({
       />
       <MadieDeleteDialog
         open={deleteDialogOpen}
-        onContinue={() => handleDeleteArgument(null)}
+        onContinue={() => deleteFunctionArgument()}
         onClose={() => setDeleteDialogOpen(false)}
         dialogTitle="Are you sure?"
         name={"this Argument"}
diff --git a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx
index 1f4e47a2..83a3ad8e 100644
--- a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx
+++ b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx
@@ -62,6 +62,15 @@ export default function FunctionBuilder({
     formik.setFieldValue("functionsArguments", newArgs);
   };
 
+  const deleteArgumentFromFunctionArguments = (fn) => {
+    const newArgs = formik.values.functionsArguments.filter(
+      (argument) =>
+        argument?.argumentName !== fn.argumentName &&
+        argument?.dataType !== fn.dataType
+    );
+    formik.setFieldValue("functionsArguments", newArgs);
+  };
+
   return (
     <div>
       <form id="function-form" onSubmit={formik.handleSubmit}>
@@ -126,6 +135,9 @@ export default function FunctionBuilder({
           <ArgumentSection
             canEdit={canEdit}
             addArgumentToFunctionsArguments={addArgumentToFunctionsArguments}
+            deleteArgumentFromFunctionArguments={
+              deleteArgumentFromFunctionArguments
+            }
             functionArguments={formik.values.functionsArguments}
           />
         </ExpandingSection>

From 8b81ecdf60d2e86e48eaa626cc7f936472294605 Mon Sep 17 00:00:00 2001
From: Christopher Hubert <christopher.hubert@semanticbits.com>
Date: Fri, 6 Dec 2024 13:07:20 -0500
Subject: [PATCH 7/8] MAT-7791: add tests

---
 .../argumentSection/ArgumentSection.tsx       |   6 +-
 .../functionBuilder/FunctionBuilder.test.tsx  | 122 +++++++++++++++++-
 2 files changed, 124 insertions(+), 4 deletions(-)

diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
index 0fe37201..5a5da2d9 100644
--- a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
@@ -53,7 +53,7 @@ export default function ArgumentSection(props: ArgumentsProps) {
     },
     // validationSchema: FunctionSectionSchemaValidator,
     enableReinitialize: false,
-    onSubmit: (values) => {},
+    onSubmit: () => {},
   });
   const { dataType } = formik.values;
 
@@ -148,7 +148,7 @@ export default function ArgumentSection(props: ArgumentsProps) {
           id="clear-function-argument-btn"
           variant="outline"
           data-testid="clear-function-argument-btn"
-          disabled={!canEdit}
+          disabled={!canEdit || !formik.dirty}
           tw="mr-4"
           onClick={() => {
             setConfirmationDialog(true);
@@ -158,7 +158,7 @@ export default function ArgumentSection(props: ArgumentsProps) {
         </Button>
         <Button
           data-testid={`function-argument-add-btn`}
-          disabled={!canEdit || !formik.isValid}
+          disabled={!canEdit || !formik.isValid || !formik.dirty}
           onClick={handleSubmit}
         >
           Add
diff --git a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.test.tsx b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.test.tsx
index 6dc614ab..5d0b679d 100644
--- a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.test.tsx
+++ b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.test.tsx
@@ -1,8 +1,15 @@
 import * as React from "react";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+  within,
+} from "@testing-library/react";
 import { describe, it } from "@jest/globals";
 import "@testing-library/jest-dom";
 import FunctionBuilder from "./FunctionBuilder";
+import userEvent from "@testing-library/user-event";
 
 describe("CQL Function Builder Tests", () => {
   it("Should display name and comment fields", async () => {
@@ -17,6 +24,10 @@ describe("CQL Function Builder Tests", () => {
     });
     expect(functionCommentTextBox).toBeInTheDocument();
 
+    expect(
+      screen.getByTestId("terminology-section-Arguments-sub-heading")
+    ).toBeInTheDocument();
+
     expect(
       screen.getByTestId("terminology-section-Expression Editor-sub-heading")
     ).toBeInTheDocument();
@@ -90,4 +101,113 @@ describe("CQL Function Builder Tests", () => {
     fireEvent.click(clearButton);
     expect(functionNameInput.value).toBe("");
   });
+
+  it("Should expand argument section", async () => {
+    render(<FunctionBuilder canEdit={true} handleApplyFunction={jest.fn()} />);
+    const functionNameInput = (await screen.findByTestId(
+      "function-name-text-input"
+    )) as HTMLInputElement;
+    const argumentsSection = screen.getByTestId(
+      "terminology-section-Arguments-sub-heading"
+    );
+    const argumentSectionButton = await within(argumentsSection).findByRole(
+      "button"
+    );
+    fireEvent.click(argumentSectionButton);
+
+    const argumentNameTextBox = await screen.findByRole("textbox", {
+      name: "Name",
+    });
+    expect(argumentNameTextBox).toBeInTheDocument();
+
+    const argumentDataTypeTextBox = await screen.findByRole("combobox", {
+      name: "Available DataTypes",
+    });
+    expect(argumentDataTypeTextBox).toBeInTheDocument();
+
+    const clearButton = screen.getByTestId("clear-function-argument-btn");
+    expect(clearButton).toBeInTheDocument();
+    expect(clearButton).not.toBeEnabled();
+
+    const addButton = screen.getByTestId("function-argument-add-btn");
+    expect(addButton).toBeInTheDocument();
+    expect(addButton).not.toBeEnabled();
+
+    const functionArgumentTable = screen.getByTestId("function-argument-tbl");
+    expect(functionArgumentTable).toBeInTheDocument();
+  });
+
+  it("Should add field in argument section when Other selected", async () => {
+    render(<FunctionBuilder canEdit={true} handleApplyFunction={jest.fn()} />);
+    const functionNameInput = (await screen.findByTestId(
+      "function-name-text-input"
+    )) as HTMLInputElement;
+    const argumentsSection = screen.getByTestId(
+      "terminology-section-Arguments-sub-heading"
+    );
+    const argumentSectionButton = await within(argumentsSection).findByRole(
+      "button"
+    );
+    fireEvent.click(argumentSectionButton);
+
+    const argumentNameTextBox = await screen.findByRole("textbox", {
+      name: "Name",
+    });
+    expect(argumentNameTextBox).toBeInTheDocument();
+
+    const argumentDataTypeTextBox = await screen.findByRole("combobox", {
+      name: "Available DataTypes",
+    });
+    expect(argumentDataTypeTextBox).toBeInTheDocument();
+    userEvent.click(argumentDataTypeTextBox);
+    const optionList = screen.getAllByRole("option");
+    expect(optionList.length).toEqual(9);
+    const otherOption = await screen.findByRole("option", { name: "Other" });
+    userEvent.click(otherOption);
+
+    const otherTextbox = await screen.findByRole("textbox", {
+      name: "Other",
+    });
+    expect(otherTextbox).toBeInTheDocument();
+  });
+
+  it("Should clear argument section", async () => {
+    render(<FunctionBuilder canEdit={true} handleApplyFunction={jest.fn()} />);
+    const functionNameInput = (await screen.findByTestId(
+      "function-name-text-input"
+    )) as HTMLInputElement;
+    const argumentsSection = screen.getByTestId(
+      "terminology-section-Arguments-sub-heading"
+    );
+    const argumentSectionButton = await within(argumentsSection).findByRole(
+      "button"
+    );
+    fireEvent.click(argumentSectionButton);
+
+    const argumentNameInput = (await screen.findByTestId(
+      "argument-name-input"
+    )) as HTMLInputElement;
+    expect(argumentNameInput).toBeInTheDocument();
+    expect(argumentNameInput.value).toBe("");
+    fireEvent.change(argumentNameInput, {
+      target: { value: "Test" },
+    });
+    expect(argumentNameInput.value).toBe("Test");
+
+    const clearButton = screen.getByTestId("clear-function-argument-btn");
+    expect(clearButton).toBeInTheDocument();
+    expect(clearButton).toBeEnabled();
+
+    const addButton = screen.getByTestId("function-argument-add-btn");
+    expect(addButton).toBeInTheDocument();
+    expect(addButton).toBeEnabled();
+
+    fireEvent.click(clearButton);
+
+    const confirmationDialog = screen.getByText("Are you sure?");
+    const confirmClearButton = screen.getByTestId("confirmation-clear-button");
+    expect(confirmClearButton).toBeEnabled();
+    fireEvent.click(confirmClearButton);
+    expect(argumentNameInput.value).toBe("");
+  });
 });

From aa68b85f15e4b2c3faa5d0725e2b355f5661aa3a Mon Sep 17 00:00:00 2001
From: Christopher Hubert <christopher.hubert@semanticbits.com>
Date: Fri, 6 Dec 2024 14:52:57 -0500
Subject: [PATCH 8/8] MAT-7791: validation for argument name

---
 .../argumentSection/ArgumentSection.tsx                |  5 +++--
 src/validations/FunctionArgumentSchemaValidator.ts     | 10 ++++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 src/validations/FunctionArgumentSchemaValidator.ts

diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
index 5a5da2d9..04bedf46 100644
--- a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
+++ b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx
@@ -15,6 +15,7 @@ import { useFormik } from "formik";
 import Arguments from "./Arguments";
 import { FunctionArgument } from "../../../model/CqlBuilderLookup";
 import ConfirmationDialog from "../../common/ConfirmationDialog";
+import { FunctionArgumentSchemaValidator } from "../../../validations/FunctionArgumentSchemaValidator";
 
 interface ArgumentsProps {
   functionArguments?: FunctionArgument[];
@@ -51,7 +52,7 @@ export default function ArgumentSection(props: ArgumentsProps) {
       dataType: "",
       other: "",
     },
-    // validationSchema: FunctionSectionSchemaValidator,
+    validationSchema: FunctionArgumentSchemaValidator,
     enableReinitialize: false,
     onSubmit: () => {},
   });
@@ -86,9 +87,9 @@ export default function ArgumentSection(props: ArgumentsProps) {
             inputProps={{
               "data-testid": "argument-name-input",
             }}
-            {...formik.getFieldProps("argumentName")}
             error={Boolean(formik.errors.argumentName)}
             helperText={formik.errors.argumentName}
+            {...formik.getFieldProps("argumentName")}
           />
         </div>
         <div tw="flex-grow pl-5">
diff --git a/src/validations/FunctionArgumentSchemaValidator.ts b/src/validations/FunctionArgumentSchemaValidator.ts
new file mode 100644
index 00000000..61c68f11
--- /dev/null
+++ b/src/validations/FunctionArgumentSchemaValidator.ts
@@ -0,0 +1,10 @@
+import * as Yup from "yup";
+
+export const FunctionArgumentSchemaValidator = Yup.object().shape({
+  argumentName: Yup.string().matches(
+    /^[a-zA-Z0-9_]*$/,
+    "No spaces or special characters besides underscore are allowed"
+  ),
+  dataType: Yup.string(),
+  other: Yup.string(),
+});