tiennm99/ccs
1
0
Fork 0
mirror of https://github.com/tiennm99/ccs.git synced 2026-07-16 20:17:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add value input for new environment variables

Browse Source 
- Add newEnvValue state to profile editor
- Update add variable section to include key + value inputs
- Apply to both OpenRouter and standard profile editors
- Clear both key and value after adding variable
This commit is contained in:
kaitranntt
2025-12-20 23:22:04 -05:00
parent 3f7add5c10
commit f947aeb21b
3 changed files with 35 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/profiles/editor/env-editor-section.tsx
+13 -2
View File
@@ -16,7 +16,9 @@ import type { Settings } from './types';
interface EnvEditorSectionProps {
currentSettings: Settings | undefined;
newEnvKey: string;
newEnvValue: string;
onNewEnvKeyChange: (value: string) => void;
onNewEnvValueChange: (value: string) => void;
onEnvValueChange: (key: string, value: string) => void;
onAddEnvVar: () => void;
}
@@ -24,7 +26,9 @@ interface EnvEditorSectionProps {
export function EnvEditorSection({
currentSettings,
newEnvKey,
newEnvValue,
onNewEnvKeyChange,
onNewEnvValueChange,
onEnvValueChange,
onAddEnvVar,
}: EnvEditorSectionProps) {
@@ -82,8 +86,15 @@ export function EnvEditorSection({
placeholder="VARIABLE_NAME"
value={newEnvKey}
onChange={(e) => onNewEnvKeyChange(e.target.value.toUpperCase())}
className="font-mono text-sm h-8"
onKeyDown={(e) => e.key === 'Enter' && onAddEnvVar()}
className="font-mono text-sm h-8 w-2/5"
onKeyDown={(e) => e.key === 'Enter' && newEnvKey.trim() && onAddEnvVar()}
/>
<Input
placeholder="value"
value={newEnvValue}
onChange={(e) => onNewEnvValueChange(e.target.value)}
className="font-mono text-sm h-8 flex-1"
onKeyDown={(e) => e.key === 'Enter' && newEnvKey.trim() && onAddEnvVar()}
/>
<Button
variant="outline"
ui/src/components/profiles/editor/friendly-ui-section.tsx
+15 -2
View File
@@ -26,7 +26,9 @@ interface FriendlyUISectionProps {
data: SettingsResponse | undefined;
currentSettings: Settings | undefined;
newEnvKey: string;
newEnvValue: string;
onNewEnvKeyChange: (key: string) => void;
onNewEnvValueChange: (value: string) => void;
onEnvValueChange: (key: string, value: string) => void;
onAddEnvVar: () => void;
onEnvBulkChange?: (env: Record<string, string>) => void;
@@ -37,7 +39,9 @@ export function FriendlyUISection({
data,
currentSettings,
newEnvKey,
newEnvValue,
onNewEnvKeyChange,
onNewEnvValueChange,
onEnvValueChange,
onAddEnvVar,
onEnvBulkChange,
@@ -222,8 +226,15 @@ export function FriendlyUISection({
placeholder="VARIABLE_NAME"
value={newEnvKey}
onChange={(e) => onNewEnvKeyChange(e.target.value.toUpperCase())}
className="font-mono text-sm h-8"
onKeyDown={(e) => e.key === 'Enter' && onAddEnvVar()}
className="font-mono text-sm h-8 w-2/5"
onKeyDown={(e) => e.key === 'Enter' && newEnvKey.trim() && onAddEnvVar()}
/>
<Input
placeholder="value"
value={newEnvValue}
onChange={(e) => onNewEnvValueChange(e.target.value)}
className="font-mono text-sm h-8 flex-1"
onKeyDown={(e) => e.key === 'Enter' && newEnvKey.trim() && onAddEnvVar()}
/>
<Button
variant="outline"
@@ -242,7 +253,9 @@ export function FriendlyUISection({
<EnvEditorSection
currentSettings={currentSettings}
newEnvKey={newEnvKey}
newEnvValue={newEnvValue}
onNewEnvKeyChange={onNewEnvKeyChange}
onNewEnvValueChange={onNewEnvValueChange}
onEnvValueChange={onEnvValueChange}
onAddEnvVar={onAddEnvVar}
/>
ui/src/components/profiles/editor/index.tsx
+7 -2
View File
@@ -21,6 +21,7 @@ export function ProfileEditor({ profileName, onDelete }: ProfileEditorProps) {
const [conflictDialog, setConflictDialog] = useState(false);
const [rawJsonEdits, setRawJsonEdits] = useState<string | null>(null);
const [newEnvKey, setNewEnvKey] = useState('');
const [newEnvValue, setNewEnvValue] = useState('');
const queryClient = useQueryClient();
// Fetch settings for selected profile
@@ -69,10 +70,12 @@ export function ProfileEditor({ profileName, onDelete }: ProfileEditorProps) {
const addNewEnvVar = () => {
if (!newEnvKey.trim()) return;
const key = newEnvKey.trim();
const newEnv = { ...(currentSettings?.env || {}), [key]: '' };
setLocalEdits((prev) => ({ ...prev, [key]: '' }));
const value = newEnvValue;
const newEnv = { ...(currentSettings?.env || {}), [key]: value };
setLocalEdits((prev) => ({ ...prev, [key]: value }));
setRawJsonEdits(JSON.stringify({ ...currentSettings, env: newEnv }, null, 2));
setNewEnvKey('');
setNewEnvValue('');
};
// Computed validity and changes check
@@ -172,7 +175,9 @@ export function ProfileEditor({ profileName, onDelete }: ProfileEditorProps) {
data={data}
currentSettings={currentSettings}
newEnvKey={newEnvKey}
newEnvValue={newEnvValue}
onNewEnvKeyChange={setNewEnvKey}
onNewEnvValueChange={setNewEnvValue}
onEnvValueChange={updateEnvValue}
onAddEnvVar={addNewEnvVar}
/>