Tooltip

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/AwsParameterStoreSyncFields.tsx

@@ -30,7 +30,29 @@ export const AwsParameterStoreSyncFields = () => {
       />
       <Controller
         render={({ field: { value, onChange }, fieldState: { error } }) => (
-          <FormControl isError={Boolean(error)} errorText={error?.message} label="Path">
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Path"
+            tooltipText={
+              <>
+                The path is required and will be prepended to the key schema. For example, if you
+                have a path of{" "}
+                <code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
+                  /demo/path/
+                </code>{" "}
+                and a key schema of{" "}
+                <code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
+                  INFISICAL_{"{{secretKey}}"}
+                </code>
+                , then the result will be{" "}
+                <code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
+                  /demo/path/INFISICAL_{"{{secretKey}}"}
+                </code>
+              </>
+            }
+            tooltipClassName="max-w-lg"
+          >
             <Input value={value} onChange={onChange} placeholder="Path..." />
           </FormControl>
         )}