From b1e65426611ff194bd49c4282690c86f3f0387cd Mon Sep 17 00:00:00 2001
From: Sim Boon Long <simboonlong@gmail.com>
Date: Tue, 19 Sep 2023 15:06:10 +0800
Subject: [PATCH] feat: redact hide (#115) (#116)

---
 .../common/RedactableValue.stories.tsx        | 10 ++++-
 .../common/RedactableValue.test.tsx           | 14 +++----
 src/components/common/RedactableValue.tsx     | 41 +++++++++++--------
 3 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/src/components/common/RedactableValue.stories.tsx b/src/components/common/RedactableValue.stories.tsx
index e39fda9..e9afa87 100644
--- a/src/components/common/RedactableValue.stories.tsx
+++ b/src/components/common/RedactableValue.stories.tsx
@@ -7,7 +7,15 @@ export default {
 };
 
 export const RedactableValueDefault = (): ReactElement => {
-  return <RedactableValue value="Some value" />;
+  return (
+    <RedactableValue
+      value="Some value"
+      editable={false}
+      onRedactionRequested={() => {
+        console.log("Please redact");
+      }}
+    />
+  );
 };
 
 export const RedactableValueIconDefault = (): ReactElement => {
diff --git a/src/components/common/RedactableValue.test.tsx b/src/components/common/RedactableValue.test.tsx
index aac6a00..3e38cce 100644
--- a/src/components/common/RedactableValue.test.tsx
+++ b/src/components/common/RedactableValue.test.tsx
@@ -3,14 +3,6 @@ import { DEFAULT_NO_VALUE_MSG, DEFAULT_REDACTED_MSG, RedactableValue } from "./R
 import { screen, render, fireEvent } from "@testing-library/react";
 
 describe("redactablevalue component", () => {
-  it("should display value only when editable is not set", () => {
-    const callback = jest.fn();
-    render(<RedactableValue value="Text to display" onRedactionRequested={callback} />);
-
-    expect(screen.getByText("Text to display")).toBeInTheDocument();
-    expect(screen.queryByTitle("Redact handler")).not.toBeInTheDocument();
-  });
-
   it("should display value only when editable is set to false", () => {
     const callback = jest.fn();
     render(<RedactableValue value="Text to display" onRedactionRequested={callback} editable={false} />);
@@ -93,4 +85,10 @@ describe("redactablevalue component", () => {
 
     expect(screen.getByText(CUSTOM_NO_VALUE_MSG)).toBeInTheDocument();
   });
+
+  it("should hide value when isValueHidden", () => {
+    const callback = jest.fn();
+    render(<RedactableValue value={`foo`} isValueHidden onRedactionRequested={callback} editable />);
+    expect(screen.queryByTestId("redactable-value")).not.toBeInTheDocument();
+  });
 });
diff --git a/src/components/common/RedactableValue.tsx b/src/components/common/RedactableValue.tsx
index 93f5d2d..eabc7b9 100644
--- a/src/components/common/RedactableValue.tsx
+++ b/src/components/common/RedactableValue.tsx
@@ -22,12 +22,14 @@ const IconRedact: FunctionComponent = () => {
 };
 
 export interface RedactValueProps {
-  value?: string | number;
-  onRedactionRequested?: () => void;
-  editable?: boolean;
+  value?: string | number | Record<string, unknown> | Record<string, unknown>[];
+  isValueHidden?: boolean;
+  onRedactionRequested: () => void;
+  editable: boolean;
   iconRedact?: React.ReactElement;
   redactedMessage?: string;
   noValueMessage?: string;
+  className?: string;
 }
 
 export const DEFAULT_REDACTED_MSG = "**Redacted**";
@@ -36,38 +38,41 @@ 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
- * RedactableValue component displays a value and a cross when editable props is set to true, allows custom redact icon, hints at redacted values
  */
 export const RedactableValue: FunctionComponent<RedactValueProps> = ({
   value,
+  isValueHidden = false,
   onRedactionRequested = noop,
   editable = false,
   iconRedact = <IconRedact />,
   redactedMessage,
   noValueMessage,
+  className = "",
 }) => {
   const [isRedacted, setRedacted] = useState(false);
 
-  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>
-    );
+  const getMessage = () => {
+    switch (true) {
+      case isRedacted:
+        return redactedMessage ? redactedMessage : DEFAULT_REDACTED_MSG;
+      case !value:
+        return noValueMessage ? noValueMessage : DEFAULT_NO_VALUE_MSG;
+      default:
+        return value;
+    }
+  };
 
   return (
     <>
-      <span style={{ display: "inline-block", marginRight: "8px" }}>{value}</span>
+      {!isValueHidden && (
+        <span className={`inline-block text-[#454B50]`} data-testid="redactable-value">
+          {getMessage()}
+        </span>
+      )}
       {editable && (
         <span
           title="Redact handler"
-          style={{ display: "inline-block", cursor: "pointer" }}
+          className={`inline-block cursor-pointer ${className}`}
           onClick={() => {
             if (editable) {
               onRedactionRequested();