feat(secret-rotation): updated helper text for options

backend/src/ee/secretRotation/templates/mysql.ts

@@ -1,4 +1,4 @@
-import { TProviderFunctionTypes, TDbProviderClients, TAssignOp } from "../types";
+import { TAssignOp, TDbProviderClients, TProviderFunctionTypes } from "../types";
 
 export const MYSQL_TEMPLATE = {
   inputs: {
@@ -9,9 +9,17 @@ export const MYSQL_TEMPLATE = {
       host: { type: "string" as const },
       database: { type: "string" as const },
       port: { type: "integer" as const, default: "3306" },
-      username1: { type: "string", default: "infisical-sql-user1" },
-      username2: { type: "string", default: "infisical-sql-user2" },
-      ca: { type: "string" }
+      username1: {
+        type: "string",
+        default: "infisical-sql-user1",
+        desc: "This user must be created in your database"
+      },
+      username2: {
+        type: "string",
+        default: "infisical-sql-user2",
+        desc: "This user must be created in your database"
+      },
+      ca: { type: "string", desc: "SSL certificate for db auth(string)" }
     },
     required: [
       "admin_username",

backend/src/ee/secretRotation/templates/postgres.ts

@@ -1,4 +1,4 @@
-import { TProviderFunctionTypes, TDbProviderClients, TAssignOp } from "../types";
+import { TAssignOp, TDbProviderClients, TProviderFunctionTypes } from "../types";
 
 export const POSTGRES_TEMPLATE = {
   inputs: {
@@ -9,9 +9,17 @@ export const POSTGRES_TEMPLATE = {
       host: { type: "string" as const },
       database: { type: "string" as const },
       port: { type: "integer" as const, default: "5432" },
-      username1: { type: "string", default: "infisical-pg-user1" },
-      username2: { type: "string", default: "infisical-pg-user2" },
-      ca: { type: "string" }
+      username1: {
+        type: "string",
+        default: "infisical-pg-user1",
+        desc: "This user must be created in your database"
+      },
+      username2: {
+        type: "string",
+        default: "infisical-pg-user2",
+        desc: "This user must be created in your database"
+      },
+      ca: { type: "string", desc: "SSL certificate for db auth(string)" }
     },
     required: [
       "admin_username",

backend/src/ee/secretRotation/templates/sendgrid.ts

@@ -1,11 +1,15 @@
-import { TProviderFunctionTypes, TAssignOp } from "../types";
+import { TAssignOp, TProviderFunctionTypes } from "../types";
 
 export const SENDGRID_TEMPLATE = {
   inputs: {
     type: "object" as const,
     properties: {
-      admin_api_key: { type: "string" as const },
-      scopes: { type: "array", items: { type: "string" as const } }
+      admin_api_key: { type: "string" as const, desc: "Sendgrid admin api key to create new keys" },
+      scopes: {
+        type: "array",
+        items: { type: "string" as const },
+        desc: "Scopes for created tokens by rotation(Array)"
+      }
     },
     required: ["admin_api_key", "scopes"],
     additionalProperties: false

backend/src/ee/secretRotation/types.ts

@@ -103,7 +103,7 @@ export type TProviderFunction = THttpProviderFunction | TDbProviderFunction;
 export type TProviderTemplate = {
   inputs: {
     type: "object";
-    properties: Record<string, { type: string; [x: string]: unknown }>;
+    properties: Record<string, { type: string; [x: string]: unknown; desc?: string }>;
     required?: string[];
   };
   outputs: Record<string, unknown>;

frontend/src/components/v2/FormControl/FormControl.tsx

@@ -9,16 +9,24 @@ export type FormLabelProps = {
   isRequired?: boolean;
   label?: ReactNode;
   icon?: ReactNode;
+  className?: string;
 };
 
-export const FormLabel = ({ id, label, isRequired, icon }: FormLabelProps) => (
+export const FormLabel = ({ id, label, isRequired, icon, className }: FormLabelProps) => (
   <Label.Root
-    className="mb-0.5 ml-1 block flex items-center text-sm font-normal text-mineshaft-400"
+    className={twMerge(
+      "mb-0.5 ml-1 block flex items-center text-sm font-normal text-mineshaft-400",
+      className
+    )}
     htmlFor={id}
   >
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
-    {icon && <span className="ml-2 text-mineshaft-300 hover:text-mineshaft-200 cursor-default">{icon}</span>}
+    {icon && (
+      <span className="ml-2 text-mineshaft-300 hover:text-mineshaft-200 cursor-default">
+        {icon}
+      </span>
+    )}
   </Label.Root>
 );
 

frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx

@@ -1,14 +1,16 @@
 import { Controller, useForm } from "react-hook-form";
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
-import { Button, FormControl, SecretInput } from "@app/components/v2";
+import { Button, FormControl, FormLabel, SecretInput, Tooltip } from "@app/components/v2";
 
 type Props = {
   onSubmit: (data: Record<string, string>) => void;
   onCancel: () => void;
   inputSchema: {
-    properties: Record<string, { type: string; helperText?: string; default?: string }>;
+    properties: Record<string, { type: string; desc?: string; default?: string }>;
     required: string[];
   };
 };
@@ -35,8 +37,24 @@ export const RotationInputForm = ({ onSubmit, onCancel, inputSchema }: Props) =>
           render={({ field }) => (
             <FormControl
               key={`provider-input-${inputName}`}
-              label={inputName.replaceAll("_", " ")}
-              helperText={inputSchema.properties[inputName]?.helperText}
+              label={
+                <div className="flex items-center space-x-2">
+                  <FormLabel className="uppercase mb-0" label={inputName.replaceAll("_", " ")} />
+                  {Boolean(inputSchema.properties[inputName]?.desc) && (
+                    <Tooltip
+                      className="max-w-xs"
+                      content={inputSchema.properties[inputName]?.desc}
+                      position="right"
+                    >
+                      <FontAwesomeIcon
+                        icon={faQuestionCircle}
+                        size="xs"
+                        className="text-bunker-300"
+                      />
+                    </Tooltip>
+                  )}
+                </div>
+              }
             >
               <SecretInput
                 {...field}

frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationOutputForm.tsx

@@ -35,6 +35,7 @@ export const RotationOutputForm = ({ onSubmit, onCancel, outputSchema = {} }: Pr
 
   const environment = watch("environment", environments?.[0]?.slug);
   const secretPath = watch("secretPath");
+  const selectedSecrets = watch("secrets");
 
   const { data: userWsKey } = useGetUserWsKey(workspaceId);
   const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecrets({
@@ -114,11 +115,16 @@ export const RotationOutputForm = ({ onSubmit, onCancel, outputSchema = {} }: Pr
                 position="popper"
               >
                 {!isSecretsLoading &&
-                  secrets?.map(({ key, _id }) => (
-                    <SelectItem value={_id} key={_id}>
-                      {key}
-                    </SelectItem>
-                  ))}
+                  secrets
+                    ?.filter(
+                      ({ _id }) =>
+                        value === _id || !Object.values(selectedSecrets || {}).includes(_id)
+                    )
+                    ?.map(({ key, _id }) => (
+                      <SelectItem value={_id} key={_id}>
+                        {key}
+                      </SelectItem>
+                    ))}
                 {isSecretsLoading && (
                   <SelectItem value="Loading" isDisabled>
                     <Spinner size="xs" />