periphery secrets in dep env working

frontend/src/components/resources/deployment/config/components/environment.tsx

@@ -4,7 +4,7 @@ import { env_to_text, text_to_env } from "@lib/utils";
 import { Types } from "@monitor/client";
 import { Button } from "@ui/button";
 import { Textarea } from "@ui/textarea";
-import { useEffect, useState } from "react";
+import { RefObject, createRef, useEffect, useState } from "react";
 
 export const EnvVars = ({
   vars,
@@ -16,6 +16,7 @@ export const EnvVars = ({
   /// eg server id
   server?: string;
 }) => {
+  const ref = createRef<HTMLTextAreaElement>();
   const [env, setEnv] = useState(env_to_text(vars));
   useEffect(() => {
     !!env && set({ environment: text_to_env(env) });
@@ -26,8 +27,11 @@ export const EnvVars = ({
       label="Environment Variables"
       className="flex-col gap-4 items-start"
     >
-      {server && <Secrets server={server} />}
+      {server && (
+        <Secrets server={server} env={env} setEnv={setEnv} envRef={ref} />
+      )}
       <Textarea
+        ref={ref}
         className="min-h-[400px]"
         placeholder="VARIABLE=value"
         value={env}
@@ -38,20 +42,35 @@ export const EnvVars = ({
 };
 
 const Secrets = ({
-  // vars,
-  // set,
+  env,
+  setEnv,
+  envRef,
   server,
 }: {
-  // vars: Types.EnvironmentVar[];
-  // set: (input: Partial<Types.DeploymentConfig>) => void;
+  env?: string;
+  setEnv: (env: string) => void;
+  envRef: RefObject<HTMLTextAreaElement>;
   /// eg server id
   server: string;
 }) => {
   const secrets = useRead("GetAvailableSecrets", { server }).data;
+  const _env = env || "";
   return (
-    <div className="w-full flex gap-4 justify-end">
+    <div className="w-full flex gap-4 justify-end items-center">
+      <div className="text-muted-foreground">secrets:</div>
       {secrets?.map((secret) => (
-        <Button key={secret}>{secret}</Button>
+        <Button
+          key={secret}
+          onClick={() =>
+            setEnv(
+              _env.slice(0, envRef.current?.selectionStart) +
+                `[[${secret}]]` +
+                _env.slice(envRef.current?.selectionStart, undefined)
+            )
+          }
+        >
+          {secret}
+        </Button>
       ))}
     </div>
   );