From c8109b4e8439033ad5f66f5d0ab407a7c3a58d01 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Tue, 12 Nov 2024 16:46:35 -0800
Subject: [PATCH] improvement: add example paste value formats

---
 .../components/v2/FormControl/FormControl.tsx |  5 ++-
 .../SecretDropzone/PasteSecretEnvModal.tsx    | 34 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/v2/FormControl/FormControl.tsx b/frontend/src/components/v2/FormControl/FormControl.tsx
index 45f3f9cd1..8651422a1 100644
--- a/frontend/src/components/v2/FormControl/FormControl.tsx
+++ b/frontend/src/components/v2/FormControl/FormControl.tsx
@@ -83,6 +83,7 @@ export type FormControlProps = {
   className?: string;
   icon?: ReactNode;
   tooltipText?: ReactElement | string;
+  tooltipClassName?: string;
 };
 
 export const FormControl = ({
@@ -96,7 +97,8 @@ export const FormControl = ({
   isError,
   icon,
   className,
-  tooltipText
+  tooltipText,
+  tooltipClassName
 }: FormControlProps): JSX.Element => {
   return (
     <div className={twMerge("mb-4", className)}>
@@ -108,6 +110,7 @@ export const FormControl = ({
           id={id}
           icon={icon}
           tooltipText={tooltipText}
+          tooltipClassName={tooltipClassName}
         />
       ) : (
         label
diff --git a/frontend/src/views/SecretMainPage/components/SecretDropzone/PasteSecretEnvModal.tsx b/frontend/src/views/SecretMainPage/components/SecretDropzone/PasteSecretEnvModal.tsx
index 718bf7f1c..aecb6c8a4 100644
--- a/frontend/src/views/SecretMainPage/components/SecretDropzone/PasteSecretEnvModal.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretDropzone/PasteSecretEnvModal.tsx
@@ -1,6 +1,6 @@
 import { useForm } from "react-hook-form";
 import { subject } from "@casl/ability";
-import { faPaste } from "@fortawesome/free-solid-svg-icons";
+import { faInfoCircle, faPaste } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -67,6 +67,38 @@ const PasteEnvForm = ({ onParsedEnv }: Pick<Props, "onParsedEnv">) => {
         label="Secret Values"
         isError={Boolean(errors.value)}
         errorText={errors.value?.message}
+        icon={<FontAwesomeIcon size="sm" className="text-mineshaft-400" icon={faInfoCircle} />}
+        tooltipClassName="max-w-lg px-2 whitespace-pre-line"
+        tooltipText={
+          <div className="flex flex-col gap-2">
+            <p>Example Formats:</p>
+            <pre className="rounded-md bg-mineshaft-900 p-3 text-xs">
+              {/* eslint-disable-next-line react/jsx-no-comment-textnodes */}
+              <p className="text-mineshaft-400">// .json</p>
+              {JSON.stringify(
+                {
+                  APP_NAME: "example-service",
+                  APP_VERSION: "1.2.3",
+                  NODE_ENV: "production"
+                },
+                null,
+                2
+              )}
+            </pre>
+            <pre className="rounded-md bg-mineshaft-900 p-3 text-xs">
+              <p className="text-mineshaft-400"># .env</p>
+              <p>APP_NAME=&quot;example-service&quot;</p>
+              <p>APP_VERSION=&quot;1.2.3&quot;</p>
+              <p>NODE_ENV=&quot;production&quot;</p>
+            </pre>
+            <pre className="rounded-md bg-mineshaft-900 p-3 text-xs">
+              <p className="text-mineshaft-400"># .yml</p>
+              <p>APP_NAME: example-service</p>
+              <p>APP_VERSION: 1.2.3</p>
+              <p>NODE_ENV: production</p>
+            </pre>
+          </div>
+        }
       >
         <TextArea
           {...register("value")}