fix

2026-06-04 12:32:58 +00:00 · 2026-02-23 16:43:39 +01:00
parent b62cf649d9
commit 0977d95539
301 changed files with 52067 additions and 3801 deletions
@@ -0,0 +1,204 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Plus, Trash2, Save, Eye, EyeOff, Key, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { variablesApi } from '@/lib/api';
+
+interface EnvironmentVariable {
+  id: string;
+  service_id: string;
+  key: string;
+  value: string;
+  is_secret: boolean;
+  created_at: string;
+  updated_at: string;
+}
+
+interface EnvVariablesEditorProps {
+  serviceId: string;
+}
+
+function _EnvVariablesEditor({ serviceId }: EnvVariablesEditorProps) {
+  const [variables, setVariables] = useState<{ key: string; value: string; is_secret: boolean }[]>([]);
+  const [showSecrets, setShowSecrets] = useState<Record<string, boolean>>({});
+  const [hasChanges, setHasChanges] = useState(false);
+  const queryClient = useQueryClient();
+
+  const { data: existingVars, isLoading } = useQuery({
+    queryKey: ['variables', serviceId],
+    queryFn: async () => {
+      const response = await variablesApi.getVariables(serviceId);
+      return response.variables as EnvironmentVariable[];
+    },
+  });
+
+  useState(() => {
+    if (existingVars) {
+      setVariables(
+        existingVars.map((v) => ({
+          key: v.key,
+          value: v.is_secret ? '' : v.value,
+          is_secret: v.is_secret,
+        }))
+      );
+    }
+  });
+
+  const updateVariables = useMutation({
+    mutationFn: async (vars: { key: string; value: string; is_secret: boolean }[]) => {
+      const response = await variablesApi.updateVariables(serviceId, vars);
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['variables', serviceId] });
+      setHasChanges(false);
+    },
+  });
+
+  const addVariable = () => {
+    setVariables([...variables, { key: '', value: '', is_secret: false }]);
+    setHasChanges(true);
+  };
+
+  const removeVariable = (index: number) => {
+    setVariables(variables.filter((_, i) => i !== index));
+    setHasChanges(true);
+  };
+
+  const updateVariable = (
+    index: number,
+    field: 'key' | 'value' | 'is_secret',
+    newValue: string | boolean
+  ) => {
+    const updated = [...variables];
+    updated[index] = { ...updated[index], [field]: newValue };
+    setVariables(updated);
+    setHasChanges(true);
+  };
+
+  const handleSave = () => {
+    const validVars = variables.filter((v) => v.key.trim() !== '');
+    updateVariables.mutate(validVars);
+  };
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardContent className="p-6">
+          <div className="flex items-center justify-center">
+            <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-lg">Environment Variables</CardTitle>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={addVariable}>
+              <Plus className="w-4 h-4 mr-1" />
+              Add Variable
+            </Button>
+            {hasChanges && (
+              <Button size="sm" onClick={handleSave} disabled={updateVariables.isPending}>
+                {updateVariables.isPending ? (
+                  <Loader2 className="w-4 h-4 mr-1 animate-spin" />
+                ) : (
+                  <Save className="w-4 h-4 mr-1" />
+                )}
+                Save Changes
+              </Button>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {variables.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">
+              No environment variables configured. Click "Add Variable" to add one.
+            </div>
+          ) : (
+            variables.map((variable, index) => (
+              <div key={index} className="flex items-center gap-2 group">
+                <div className="flex-1 grid grid-cols-2 gap-2">
+                  <Input
+                    placeholder="KEY"
+                    value={variable.key}
+                    onChange={(e) => updateVariable(index, 'key', e.target.value)}
+                    className="font-mono"
+                  />
+                  <div className="relative">
+                    <Input
+                      type={
+                        variable.is_secret && !showSecrets[index] ? 'password' : 'text'
+                      }
+                      placeholder="value"
+                      value={variable.value}
+                      onChange={(e) => updateVariable(index, 'value', e.target.value)}
+                      className="font-mono pr-16"
+                    />
+                    {variable.is_secret && (
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 p-0"
+                        onClick={() =>
+                          setShowSecrets({
+                            ...showSecrets,
+                            [index]: !showSecrets[index],
+                          })
+                        }
+                      >
+                        {showSecrets[index] ? (
+                          <EyeOff className="w-4 h-4" />
+                        ) : (
+                          <Eye className="w-4 h-4" />
+                        )}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => updateVariable(index, 'is_secret', !variable.is_secret)}
+                  className={variable.is_secret ? 'text-amber-500' : 'text-muted-foreground'}
+                  title={variable.is_secret ? 'Secret (hidden)' : 'Regular variable'}
+                >
+                  <Key className="w-4 h-4" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => removeVariable(index)}
+                  className="text-destructive opacity-0 group-hover:opacity-100 transition-opacity"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </Button>
+              </div>
+            ))
+          )}
+        </div>
+
+        {variables.length > 0 && (
+          <div className="mt-4 p-3 bg-muted/30 rounded-md text-sm text-muted-foreground">
+            <p className="font-medium mb-1">Tips:</p>
+            <ul className="list-disc list-inside space-y-1 text-xs">
+              <li>Secret variables are encrypted and hidden in the UI</li>
+              <li>Changes are applied after the next deployment</li>
+              <li>Use uppercase keys with underscores (e.g., DATABASE_URL)</li>
+            </ul>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}