feat: add optional params to redactable value (#112)

* feat: add optional params to redactable value * fix: lint * chore: add tests --------- Co-authored-by: Lucas <lucas_yap@tech.gov.sg>
Open-Attestation · Sep 4, 2023 · 0bd96ea · 0bd96ea
1 parent 69b85c1
commit 0bd96ea
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 3 deletions.
diff --git a/src/components/common/RedactableValue.test.tsx b/src/components/common/RedactableValue.test.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { RedactableValue } from "./RedactableValue";
+import { DEFAULT_NO_VALUE_MSG, DEFAULT_REDACTED_MSG, RedactableValue } from "./RedactableValue";
 import { screen, render, fireEvent } from "@testing-library/react";
 
 describe("redactablevalue component", () => {
@@ -43,4 +43,54 @@ describe("redactablevalue component", () => {
     fireEvent.click(screen.getByText("foobar"));
     expect(callback).toHaveBeenCalledTimes(1);
   });
+
+  it("should display default redacted message when no redacted message is specified", () => {
+    const callback = jest.fn();
+    render(
+      <RedactableValue value="Text to display" onRedactionRequested={callback} editable iconRedact={<>foobar</>} />
+    );
+
+    fireEvent.click(screen.getByText("foobar"));
+    expect(screen.getByText(DEFAULT_REDACTED_MSG)).toBeInTheDocument();
+  });
+
+  it("should display custom redacted message when redacted message is provided", () => {
+    const callback = jest.fn();
+    const CUSTOM_REDACTED_MSG = "custom redacted message";
+    render(
+      <RedactableValue
+        value="Text to display"
+        onRedactionRequested={callback}
+        editable
+        iconRedact={<>foobar</>}
+        redactedMessage={CUSTOM_REDACTED_MSG}
+      />
+    );
+
+    fireEvent.click(screen.getByText("foobar"));
+    expect(screen.getByText(CUSTOM_REDACTED_MSG)).toBeInTheDocument();
+  });
+
+  it("should display default no value message when no custom message is specified", () => {
+    const callback = jest.fn();
+    render(<RedactableValue value={undefined} onRedactionRequested={callback} editable iconRedact={<>foobar</>} />);
+
+    expect(screen.getByText(DEFAULT_NO_VALUE_MSG)).toBeInTheDocument();
+  });
+
+  it("should display custom no value message when provided", () => {
+    const callback = jest.fn();
+    const CUSTOM_NO_VALUE_MSG = "custom no value message";
+    render(
+      <RedactableValue
+        value={undefined}
+        onRedactionRequested={callback}
+        editable
+        iconRedact={<>foobar</>}
+        noValueMessage={CUSTOM_NO_VALUE_MSG}
+      />
+    );
+
+    expect(screen.getByText(CUSTOM_NO_VALUE_MSG)).toBeInTheDocument();
+  });
 });
diff --git a/src/components/common/RedactableValue.tsx b/src/components/common/RedactableValue.tsx
@@ -26,8 +26,13 @@ export interface RedactValueProps {
   onRedactionRequested?: () => void;
   editable?: boolean;
   iconRedact?: React.ReactElement;
+  redactedMessage?: string;
+  noValueMessage?: string;
 }
 
+export const DEFAULT_REDACTED_MSG = "**Redacted**";
+export const DEFAULT_NO_VALUE_MSG = "**Field value does not exist**";
+
 /**
  * RedactableValue component is almost a duplicate of ObfuscatableValue component
  * ObfuscatableValue component started from OpenCerts, and may be in use on existing certificates, hence we do not want to meddle with the existing functionality
@@ -38,11 +43,23 @@ export const RedactableValue: FunctionComponent<RedactValueProps> = ({
   onRedactionRequested = noop,
   editable = false,
   iconRedact = <IconRedact />,
+  redactedMessage,
+  noValueMessage,
 }) => {
   const [isRedacted, setRedacted] = useState(false);
 
-  if (isRedacted) return <span style={{ display: "inline-block", color: "#454B50" }}>**Redacted**</span>;
-  if (!value) return <span style={{ display: "inline-block", color: "#454B50" }}>**Field value does not exists**</span>;
+  if (isRedacted)
+    return (
+      <span style={{ display: "inline-block", color: "#454B50" }}>
+        {redactedMessage ? redactedMessage : DEFAULT_REDACTED_MSG}
+      </span>
+    );
+  if (!value)
+    return (
+      <span style={{ display: "inline-block", color: "#454B50" }}>
+        {noValueMessage ? noValueMessage : DEFAULT_NO_VALUE_MSG}
+      </span>
+    );
 
   return (
     <>