From 308bd355e2c4703d402c18520c4e6ba9cdee0434 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Wed, 28 Jun 2023 17:05:05 +0100
Subject: [PATCH] ClipboardField allows passing in a secure string

---
 .../components/primitives/ClipboardField.tsx  | 12 +++-
 .../stories/ClipboardField.stories.tsx        | 56 +++++++++++++++++++
 2 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/primitives/ClipboardField.tsx b/apps/webapp/app/components/primitives/ClipboardField.tsx
index c73c78999..ef2e6f810 100644
--- a/apps/webapp/app/components/primitives/ClipboardField.tsx
+++ b/apps/webapp/app/components/primitives/ClipboardField.tsx
@@ -69,7 +69,7 @@ const variations = {
 
 type ClipboardFieldProps = {
   value: string;
-  secure?: boolean;
+  secure?: boolean | string;
   variant: keyof typeof variations;
   className?: string;
   icon?: IconNames | React.ReactNode;
@@ -82,7 +82,7 @@ export function ClipboardField({
   className,
   icon,
 }: ClipboardFieldProps) {
-  const [isSecure, setIsSecure] = useState(secure);
+  const [isSecure, setIsSecure] = useState(secure !== undefined && secure);
   const [copied, setCopied] = useState(false);
 
   const copy = useCallback(
@@ -120,7 +120,13 @@ export function ClipboardField({
       <input
         type="text"
         ref={inputIcon}
-        value={isSecure ? "•".repeat(value.length) : value}
+        value={
+          isSecure
+            ? typeof secure === "string"
+              ? secure
+              : "•".repeat(value.length)
+            : value
+        }
         readOnly={true}
         className={cn("shrink grow select-all overflow-x-auto", input)}
         size={value.length}
diff --git a/apps/webapp/app/components/stories/ClipboardField.stories.tsx b/apps/webapp/app/components/stories/ClipboardField.stories.tsx
index beb6ef8ce..038d0353a 100644
--- a/apps/webapp/app/components/stories/ClipboardField.stories.tsx
+++ b/apps/webapp/app/components/stories/ClipboardField.stories.tsx
@@ -103,6 +103,62 @@ function ClipboardFieldExample() {
           secure={true}
         />
       </div>
+      <div className="flex flex-col items-start gap-y-8 p-8">
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="primary/small"
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="secondary/small"
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="tertiary/small"
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="tertiary/small"
+          icon={<EnvironmentLabel environment={{ type: "STAGING" }} />}
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="tertiary/small"
+          icon="search"
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="primary/medium"
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="secondary/medium"
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="tertiary/medium"
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="tertiary/medium"
+          icon={<EnvironmentLabel environment={{ type: "PRODUCTION" }} />}
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="tertiary/medium"
+          icon="search"
+          secure="npx ••••••••"
+        />
+      </div>
     </div>
   );
 }