feat(FR-1726): Auto-populate ENV variables based on selected Inference Runtime Variant

Author: agatha197

react/src/components/EnvVarFormList.test.tsx

@@ -33,4 +33,18 @@ describe('emptySensitiveEnv', () => {
 
     expect(result).toEqual([]);
   });
+
+  it('should not sanitize NGC_API_KEY even though it matches sensitive pattern', () => {
+    const envs = [
+      { variable: 'NGC_API_KEY', value: 'my-secret-ngc-key' },
+      { variable: 'OTHER_API_KEY', value: 'should-be-sanitized' },
+    ];
+
+    const result = sanitizeSensitiveEnv(envs);
+
+    expect(result).toEqual([
+      { variable: 'NGC_API_KEY', value: 'my-secret-ngc-key' },
+      { variable: 'OTHER_API_KEY', value: '' },
+    ]);
+  });
 });

react/src/components/EnvVarFormList.tsx

@@ -1,13 +1,29 @@
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Form, FormItemProps, Input, InputRef } from 'antd';
+import {
+  AutoComplete,
+  Button,
+  Form,
+  FormItemProps,
+  Input,
+  InputRef,
+} from 'antd';
 import { FormListProps } from 'antd/lib/form';
 import { BAIFlex } from 'backend.ai-ui';
 import _ from 'lodash';
 import React, { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
+export interface EnvVarConfig {
+  variable: string;
+  placeholder?: string;
+  required?: boolean;
+  description?: string;
+}
+
 interface EnvVarFormListProps extends Omit<FormListProps, 'children'> {
   formItemProps?: FormItemProps;
+  requiredEnvVars?: EnvVarConfig[];
+  optionalEnvVars?: EnvVarConfig[];
 }
 
 export interface EnvVarFormListValue {
@@ -17,11 +33,67 @@ export interface EnvVarFormListValue {
 // TODO: validation rule for duplicate variable name
 const EnvVarFormList: React.FC<EnvVarFormListProps> = ({
   formItemProps,
+  requiredEnvVars,
+  optionalEnvVars,
   ...props
 }) => {
+  'use memo';
   const inputRef = useRef<InputRef>(null);
   const { t } = useTranslation();
   const form = Form.useFormInstance();
+
+  const allEnvVars = [
+    ..._.filter(
+      requiredEnvVars || [],
+      (env): env is EnvVarConfig => env != null && !!env.variable,
+    ),
+    ..._.filter(
+      optionalEnvVars || [],
+      (env): env is EnvVarConfig => env != null && !!env.variable,
+    ),
+  ];
+
+  const getPlaceholderForVariable = (variable: string) => {
+    if (!variable || !allEnvVars.length)
+      return t('session.launcher.EnvironmentVariableValue');
+    const envVarConfig = _.find(
+      allEnvVars,
+      (env) => env && env.variable === variable,
+    );
+    return (
+      envVarConfig?.placeholder ||
+      t('session.launcher.EnvironmentVariableValue')
+    );
+  };
+
+  const getAutoCompleteOptions = () => {
+    const currentValues = form.getFieldValue(props.name) || [];
+    const usedVariables = _.map(
+      _.filter(
+        currentValues,
+        (item: EnvVarFormListValue) =>
+          item != null &&
+          typeof item.variable === 'string' &&
+          item.variable.trim() !== '',
+      ),
+      'variable',
+    );
+
+    return _.map(
+      _.filter(
+        optionalEnvVars || [],
+        (env): env is EnvVarConfig =>
+          env != null &&
+          !!env.variable &&
+          !_.includes(usedVariables, env.variable),
+      ),
+      (env) => ({
+        value: env.variable,
+        label: env.variable,
+      }),
+    );
+  };
+
   return (
     <Form.List {...props}>
       {(fields, { add, remove }) => {
@@ -34,6 +106,7 @@ const EnvVarFormList: React.FC<EnvVarFormListProps> = ({
                   style={{ marginBottom: 0, flex: 1 }}
                   name={[name, 'variable']}
                   rules={[
+                    ...(formItemProps?.rules || []),
                     {
                       required: true,
                       message: t('session.launcher.EnterEnvironmentVariable'),
@@ -71,18 +144,38 @@ const EnvVarFormList: React.FC<EnvVarFormListProps> = ({
                   ]}
                   {...formItemProps}
                 >
-                  <Input
-                    ref={index === fields.length - 1 ? inputRef : null}
-                    placeholder="Variable"
-                    onChange={() => {
-                      const fieldNames = fields.map((_field, index) => [
-                        props.name,
-                        index,
-                        'variable',
-                      ]);
-                      form.validateFields(fieldNames);
-                    }}
-                  />
+                  {optionalEnvVars && getAutoCompleteOptions().length > 0 ? (
+                    <AutoComplete
+                      placeholder={t('session.launcher.EnvironmentVariable')}
+                      options={getAutoCompleteOptions()}
+                      onChange={() => {
+                        const fieldNames = fields.map((_field, index) => [
+                          props.name,
+                          index,
+                          'variable',
+                        ]);
+                        form.validateFields(fieldNames);
+                      }}
+                      filterOption={(inputValue, option) =>
+                        option?.value
+                          ?.toLowerCase()
+                          .indexOf(inputValue.toLowerCase()) !== -1
+                      }
+                    />
+                  ) : (
+                    <Input
+                      ref={index === fields.length - 1 ? inputRef : null}
+                      placeholder={t('session.launcher.EnvironmentVariable')}
+                      onChange={() => {
+                        const fieldNames = fields.map((_field, index) => [
+                          props.name,
+                          index,
+                          'variable',
+                        ]);
+                        form.validateFields(fieldNames);
+                      }}
+                    />
+                  )}
                 </Form.Item>
                 <Form.Item
                   {...restField}
@@ -97,17 +190,12 @@ const EnvVarFormList: React.FC<EnvVarFormListProps> = ({
                     },
                   ]}
                   validateTrigger={['onChange', 'onBlur']}
+                  dependencies={[[props.name, name, 'variable']]}
                 >
                   <Input
-                    placeholder="Value"
-                    // onChange={() => {
-                    //   const valueFields = fields.map((field, index) => [
-                    //     props.name,
-                    //     index,
-                    //     'value',
-                    //   ]);
-                    //   form.validateFields(valueFields);
-                    // }}
+                    placeholder={getPlaceholderForVariable(
+                      form.getFieldValue([props.name, name, 'variable']),
+                    )}
                   />
                 </Form.Item>
                 <MinusCircleOutlined onClick={() => remove(name)} />
@@ -161,12 +249,20 @@ const sensitivePatterns = [
 ];
 
 export function isSensitiveEnv(key: string) {
-  return sensitivePatterns.some((pattern) => pattern.test(key));
+  return _.some(sensitivePatterns, (pattern) => pattern.test(key));
 }
 
+// Environment variables that should not be sanitized even if they match sensitive patterns
+const SANITIZE_EXCEPTIONS = ['NGC_API_KEY'];
+
 export function sanitizeSensitiveEnv(envs: EnvVarFormListValue[]) {
   return _.map(envs, (env) => {
-    if (env && isSensitiveEnv(env.variable)) {
+    if (
+      env &&
+      env.variable &&
+      !_.includes(SANITIZE_EXCEPTIONS, env.variable) &&
+      isSensitiveEnv(env.variable)
+    ) {
       return { ...env, value: '' };
     }
     return env;