Merge pull request #716 from MeasureAuthoringTool/MAT-7681_OidComponent

Mat 7681 oid component

src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/OidComponent.test.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import OidComponent from "./OidComponent";
+import userEvent from "@testing-library/user-event";
+
+describe("OidComponent", () => {
+  it("Should render OidComponent", async () => {
+    const handleChange = jest.fn();
+
+    render(
+      <OidComponent
+        value={null}
+        label="OID"
+        canEdit={true}
+        fieldRequired={false}
+        onChange={handleChange}
+        structureDefinition={null}
+      />
+    );
+
+    expect(screen.getByText("OID")).toBeInTheDocument();
+    expect(screen.getByTestId("field-input-OID")).toBeInTheDocument();
+  });
+
+  it("Should validate input", async () => {
+    const handleChange = jest.fn();
+
+    render(
+      <OidComponent
+        value={null}
+        label="OID"
+        canEdit={true}
+        fieldRequired={false}
+        onChange={handleChange}
+        structureDefinition={null}
+      />
+    );
+
+    const oidInput = screen.getByTestId("field-input-OID") as HTMLInputElement;
+
+    // valid oidInput
+    userEvent.type(oidInput, "urn:oid:1.2.3.4.5");
+    expect(oidInput.value).toBe("urn:oid:1.2.3.4.5");
+    expect(
+      screen.getByTestId("field-input-helper-text-OID")
+    ).not.toHaveTextContent("Please enter a valid OID");
+
+    // invalid oidInput
+    userEvent.clear(oidInput);
+    userEvent.type(oidInput, "invalid OID.");
+    expect(oidInput).toHaveValue("invalid OID.");
+    expect(screen.getByTestId("field-input-helper-text-OID")).toHaveTextContent(
+      "Please enter a valid OID"
+    );
+  });
+});

src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/OidComponent.tsx

@@ -0,0 +1,55 @@
+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 OidComponent = ({
+  canEdit,
+  fieldRequired,
+  label = "OID",
+  value,
+  onChange,
+  structureDefinition,
+}: TypeComponentProps) => {
+  const oidRegex = /urn:oid:[0-2](\.(0|[1-9][0-9]*))+/;
+  const [isValid, setValid] = useState<boolean>(
+    value ? value.match(oidRegex) : true
+  );
+
+  const handleChange = (oid) => {
+    setValid(true);
+    if (oid.match(oidRegex)) {
+      onChange(oid);
+    } else if (!_.isEmpty(oid)) {
+      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 OID"}
+        </FormHelperText>
+      }
+    />
+  );
+};
+
+export default OidComponent;