From be2bf9c4f704d311e427dfd67e453426160b13e9 Mon Sep 17 00:00:00 2001
From: sb-cecilialiu <cecilia.liu@icf.com>
Date: Fri, 27 Dec 2024 08:02:56 -0600
Subject: [PATCH] MAT-7676 Base64Binary component

---
 .../types/Base64BinaryComponent.test.tsx      | 60 ++++++++++++++++++
 .../element/types/Base64BinaryComponent.tsx   | 61 +++++++++++++++++++
 2 files changed, 121 insertions(+)
 create mode 100644 src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.test.tsx
 create mode 100644 src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.tsx

diff --git a/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.test.tsx b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.test.tsx
new file mode 100644
index 00000000..d21addd0
--- /dev/null
+++ b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.test.tsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import Base64BinaryComponent from "./Base64BinaryComponent";
+import userEvent from "@testing-library/user-event";
+
+describe("Base64BinaryComponent", () => {
+  it("Should render Base64BinaryComponent", async () => {
+    const handleChange = jest.fn();
+
+    render(
+      <Base64BinaryComponent
+        value={null}
+        label="Base64BinaryComponent"
+        canEdit={true}
+        fieldRequired={false}
+        onChange={handleChange}
+        structureDefinition={null}
+      />
+    );
+
+    expect(screen.getByText("Base64BinaryComponent")).toBeInTheDocument();
+    expect(
+      screen.getByTestId("field-input-Base64BinaryComponent")
+    ).toBeInTheDocument();
+  });
+
+  it("Should validate input", async () => {
+    const handleChange = jest.fn();
+
+    render(
+      <Base64BinaryComponent
+        value={null}
+        label="Base64BinaryComponent"
+        canEdit={true}
+        fieldRequired={false}
+        onChange={handleChange}
+        structureDefinition={null}
+      />
+    );
+
+    const base64BinaryInput = screen.getByTestId(
+      "field-input-Base64BinaryComponent"
+    ) as HTMLInputElement;
+
+    // valid base64BinaryInput
+    userEvent.type(base64BinaryInput, "abcd");
+    expect(base64BinaryInput.value).toBe("abcd");
+    expect(
+      screen.getByTestId("field-input-helper-text-Base64BinaryComponent")
+    ).toBeEmptyDOMElement();
+
+    // invalid base64BinaryInput
+    userEvent.clear(base64BinaryInput);
+    userEvent.type(base64BinaryInput, "invalid base64BinaryInput.");
+    expect(base64BinaryInput).toHaveValue("invalid base64BinaryInput.");
+    expect(
+      screen.getByTestId("field-input-helper-text-Base64BinaryComponent")
+    ).toHaveTextContent("Please enter a valid Base64Binary");
+  });
+});
diff --git a/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.tsx b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.tsx
new file mode 100644
index 00000000..e862f2db
--- /dev/null
+++ b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.tsx
@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { FormHelperText } from "@mui/material";
+import { TypeComponentProps } from "./TypeComponentProps";
+import { TextField } from "@madie/madie-design-system/dist/react";
+import _ from "lodash";
+
+const isBase64 = (str) => {
+  try {
+    const decoded = atob(str);
+    return decoded && new RegExp(/(\s*([0-9a-zA-Z\+\=]){4}\s*)+/).test(str);
+  } catch (err) {
+    return false;
+  }
+};
+
+const Base64BinaryComponent = ({
+  canEdit,
+  fieldRequired,
+  label = "Base64Binary",
+  value,
+  onChange,
+  structureDefinition,
+}: TypeComponentProps) => {
+  const [isValid, setValid] = useState<boolean>(value ? isBase64(value) : true);
+
+  const handleChange = (base64BinaryString) => {
+    setValid(true);
+    if (isBase64(base64BinaryString)) {
+      onChange(base64BinaryString);
+    } else if (!_.isEmpty(base64BinaryString)) {
+      setValid(false);
+    }
+  };
+  return (
+    <TextField
+      label={`${label}`}
+      required={fieldRequired}
+      disabled={!canEdit}
+      inputProps={{
+        "data-testid": `field-input-${label}`,
+        "aria-describedby": `field-input-helper-text-${label}`,
+        required: fieldRequired,
+        "aria-required": fieldRequired,
+      }}
+      size="small"
+      fullWidth
+      value={value}
+      onChange={(e) => handleChange(e.target.value)}
+      helperText={
+        <FormHelperText
+          data-testid={`field-input-helper-text-${label}`}
+          error={!isValid}
+        >
+          {isValid ? "" : "Please enter a valid Base64Binary"}
+        </FormHelperText>
+      }
+    />
+  );
+};
+
+export default Base64BinaryComponent;