Merge pull request #155 from dschoepel/fix/add-toggle-for-integration-api-key

feat: add optional Use API Key checkbox to AI configuration

Author: dschoepel

app/(config)/_components/IntegrationsConfigEditor.jsx

@@ -16,11 +16,25 @@ const IntegrationsConfigEditor = ({
   isLoading,
   onDirtyChange
 }) => {
-  // Pass data as-is - let YAML serializer handle quoting naturally
+  // Strip internal UI flags before saving, then pass to onSave
   const handleSaveWithTransform = useCallback((formData) => {
-    onSave(formData);
+    const output = JSON.parse(JSON.stringify(formData));
+    if (output?.ai?.configuration) {
+      delete output.ai.configuration.useApiKey;
+    }
+    onSave(output);
   }, [onSave]);
 
+  // Inject useApiKey flag derived from whether a key value exists
+  const processedInitialData = useMemo(() => {
+    if (!initialData?.ai?.configuration) return initialData;
+    const data = JSON.parse(JSON.stringify(initialData));
+    if (data.ai.configuration.useApiKey === undefined) {
+      data.ai.configuration.useApiKey = !!data.ai.configuration.key;
+    }
+    return data;
+  }, [initialData]);
+
   // Custom validation for integrations fields
   const validateIntegrationsFields = useCallback((formData, getNestedValue) => {
     const errors = {};
@@ -47,8 +61,9 @@ const IntegrationsConfigEditor = ({
       }
 
       if (aiConfig.configuration) {
-        if (!aiConfig.configuration.key || aiConfig.configuration.key.trim() === '') {
-          errors['ai.configuration.key'] = 'API key is required';
+        if (aiConfig.configuration.useApiKey &&
+            (!aiConfig.configuration.key || aiConfig.configuration.key.trim() === '')) {
+          errors['ai.configuration.key'] = 'API key is required when "Use API Key" is enabled';
         }
 
         if (!aiConfig.configuration.model || aiConfig.configuration.model.trim() === '') {
@@ -92,7 +107,7 @@ const IntegrationsConfigEditor = ({
   return (
     <BaseConfigEditor
       sectionName="integrations"
-      initialData={initialData}
+      initialData={processedInitialData}
       onSave={handleSaveWithTransform}
       onCancel={onCancel}
       isLoading={isLoading}

app/(config)/_components/integrations/AIConfigSection.jsx

@@ -45,6 +45,17 @@ const AIConfigSection = ({ config = {}, onChange, errors = {} }) => {
     });
   };
 
+  const handleToggleApiKey = (useKey) => {
+    onChange({
+      ...config,
+      configuration: {
+        ...config.configuration,
+        useApiKey: useKey,
+        key: useKey ? (config.configuration?.key || '') : ''
+      }
+    });
+  };
+
   return (
     <Box 
       p={4} 
@@ -169,38 +180,59 @@ const AIConfigSection = ({ config = {}, onChange, errors = {} }) => {
                   Provider Configuration
                 </Text>
 
-                {/* API Key */}
-                <Field.Root invalid={!!errors['ai.configuration.key']}>
-                  <Field.Label fontSize={{ base: "xs", sm: "sm" }}>API Key</Field.Label>
-                  <HStack gap={2}>
-                    <Input
-                      type={showApiKey ? "text" : "password"}
-                      value={config.configuration?.key || ''}
-                      onChange={(e) => handleUpdateConfig('key', e.target.value)}
-                      placeholder="YOUR-API-KEY"
-                      bg="inputBg"
-                      size={{ base: "sm", sm: "md" }}
-                      flex={1}
-                    />
-                    <IconButton
-                      aria-label={showApiKey ? "Hide API key" : "Show API key"}
-                      onClick={() => setShowApiKey(!showApiKey)}
-                      size={{ base: "sm", sm: "md" }}
-                      variant="ghost"
-                    >
-                      {showApiKey ? <MdVisibilityOff /> : <MdVisibility />}
-                    </IconButton>
-                  </HStack>
-                  {errors['ai.configuration.key'] && (
-                    <Field.ErrorText fontSize={{ base: "xs", sm: "sm" }}>
-                      {errors['ai.configuration.key']}
-                    </Field.ErrorText>
-                  )}
+                {/* Use API Key */}
+                <Field.Root>
+                  <Checkbox.Root
+                    checked={!!config.configuration?.useApiKey}
+                    onCheckedChange={(e) => handleToggleApiKey(e.checked)}
+                    colorPalette="blue"
+                    size={{ base: "sm", sm: "md" }}
+                  >
+                    <Checkbox.HiddenInput />
+                    <Checkbox.Control>
+                      <Checkbox.Indicator />
+                    </Checkbox.Control>
+                    <Checkbox.Label fontSize={{ base: "xs", sm: "sm" }}>Use API Key</Checkbox.Label>
+                  </Checkbox.Root>
                   <Field.HelperText fontSize={{ base: "xs", sm: "sm" }}>
-                    Your API key for the selected provider
+                    Enable to provide an API key for authentication with the selected provider
                   </Field.HelperText>
                 </Field.Root>
 
+                {/* API Key */}
+                {config.configuration?.useApiKey && (
+                  <Field.Root invalid={!!errors['ai.configuration.key']}>
+                    <Field.Label fontSize={{ base: "xs", sm: "sm" }}>API Key</Field.Label>
+                    <HStack gap={2}>
+                      <Input
+                        type={showApiKey ? "text" : "password"}
+                        value={config.configuration?.key || ''}
+                        onChange={(e) => handleUpdateConfig('key', e.target.value)}
+                        placeholder="YOUR-API-KEY"
+                        bg="inputBg"
+                        size={{ base: "sm", sm: "md" }}
+                        flex={1}
+                      />
+                      <IconButton
+                        aria-label={showApiKey ? "Hide API key" : "Show API key"}
+                        onClick={() => setShowApiKey(!showApiKey)}
+                        size={{ base: "sm", sm: "md" }}
+                        variant="ghost"
+                      >
+                        {showApiKey ? <MdVisibilityOff /> : <MdVisibility />}
+                      </IconButton>
+                    </HStack>
+                    {errors['ai.configuration.key'] && (
+                      <Field.ErrorText fontSize={{ base: "xs", sm: "sm" }}>
+                        {errors['ai.configuration.key']}
+                      </Field.ErrorText>
+                    )}
+                    <Field.HelperText fontSize={{ base: "xs", sm: "sm" }}>
+                      Your API key for the selected provider
+                    </Field.HelperText>
+                  </Field.Root>
+                )}
+
                 {/* Model */}
                 <Field.Root invalid={!!errors['ai.configuration.model']}>
                   <Field.Label fontSize={{ base: "xs", sm: "sm" }}>Model Name</Field.Label>
@@ -259,7 +291,8 @@ AIConfigSection.propTypes = {
     configuration: PropTypes.shape({
       key: PropTypes.string,
       model: PropTypes.string,
-      url: PropTypes.string
+      url: PropTypes.string,
+      useApiKey: PropTypes.bool
     })
   }),
   onChange: PropTypes.func.isRequired,