Allow hyphens and period for env var (opendatahub-io#3759)

jenny-s51 · Feb 14, 2025 · 96d8eb8 · 96d8eb8
1 parent c5ef95e
commit 96d8eb8
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 21 deletions.
diff --git a/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts b/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts
@@ -258,13 +258,14 @@ describe('isValidEnvVar', () => {
     expect(isValidEnvVar('NAME')).toBe(true);
     expect(isValidEnvVar('UNDERSCORE_NAME')).toBe(true);
     expect(isValidEnvVar('has_digits_1234')).toBe(true);
+    expect(isValidEnvVar('.dockerconfigjson')).toBe(true);
   });
 
   it('should be invalid env var', () => {
-    expect(isValidEnvVar('.dot')).toBe(false);
-    expect(isValidEnvVar('has-dash')).toBe(false);
-    expect(isValidEnvVar('1_digit_as_first_char')).toBe(false);
     expect(isValidEnvVar('has space')).toBe(false);
+    expect(isValidEnvVar('has+=')).toBe(false);
+    expect(isValidEnvVar('has!$@#*')).toBe(false);
+    expect(isValidEnvVar('')).toBe(false);
   });
 });
 

diff --git a/frontend/src/concepts/connectionTypes/fields/UriFormField.tsx b/frontend/src/concepts/connectionTypes/fields/UriFormField.tsx
@@ -56,7 +56,7 @@ const UriFormField: React.FC<FieldProps<UriField>> = ({
             : (_e, v) => {
                 onChange(v);
                 if (!isValid) {
-                  setIsValid(validateUrl(value));
+                  setIsValid(validateUrl(v));
                 }
               }
         }

diff --git a/frontend/src/concepts/connectionTypes/utils.ts b/frontend/src/concepts/connectionTypes/utils.ts
@@ -118,7 +118,7 @@ export const fieldNameToEnvVar = (name: string): string => {
   return allUppercase;
 };
 
-export const ENV_VAR_NAME_REGEX = new RegExp('^[_a-zA-Z][_a-zA-Z0-9]*$');
+export const ENV_VAR_NAME_REGEX = new RegExp('^[-_.a-zA-Z0-9]+$');
 export const isValidEnvVar = (name: string): boolean => ENV_VAR_NAME_REGEX.test(name);
 
 export const isUriConnectionType = (connectionType: ConnectionTypeConfigMapObj): boolean =>

diff --git a/frontend/src/concepts/connectionTypes/validationUtils.ts b/frontend/src/concepts/connectionTypes/validationUtils.ts
@@ -5,7 +5,7 @@ import {
   isDuplicateExtension,
 } from '~/concepts/connectionTypes/fields/fieldUtils';
 import { ConnectionTypeFieldType } from '~/concepts/connectionTypes/types';
-import { ENV_VAR_NAME_REGEX, isConnectionTypeDataField } from '~/concepts/connectionTypes/utils';
+import { isConnectionTypeDataField } from '~/concepts/connectionTypes/utils';
 
 const baseFieldSchema = z.object({
   name: z.string().min(1, { message: 'Name is required' }),
@@ -17,10 +17,7 @@ const baseFieldPropertiesSchema = z.object({
 });
 
 const baseDataFieldPropertiesSchema = baseFieldSchema.extend({
-  envVar: z.string().regex(ENV_VAR_NAME_REGEX, {
-    message:
-      'Must start with a letter or underscore. Valid characters include letters, numbers, and underscores ( _ ).',
-  }),
+  envVar: z.string(),
   required: z.boolean().optional(),
 });
 

diff --git a/frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx b/frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx
@@ -11,11 +11,7 @@ import {
   TextInput,
 } from '@patternfly/react-core';
 import { Modal } from '@patternfly/react-core/deprecated';
-import {
-  ExclamationCircleIcon,
-  OutlinedQuestionCircleIcon,
-  WarningTriangleIcon,
-} from '@patternfly/react-icons';
+import { OutlinedQuestionCircleIcon, WarningTriangleIcon } from '@patternfly/react-icons';
 import DashboardModalFooter from '~/concepts/dashboard/DashboardModalFooter';
 import {
   ConnectionTypeDataField,
@@ -81,7 +77,7 @@ export const ConnectionTypeDataFieldModal: React.FC<Props> = ({
 
   const isEnvVarValid = !envVar || isValidEnvVar(envVar);
 
-  const isValid = isPropertiesValid && !!name && !!envVar && isEnvVarValid;
+  const isValid = isPropertiesValid && !!name && !!envVar;
 
   // Cast from specific type to generic type
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions,@typescript-eslint/no-explicit-any
@@ -183,16 +179,16 @@ export const ConnectionTypeDataFieldModal: React.FC<Props> = ({
               setData('envVar', value);
             }}
             data-testid="field-env-var-input"
-            validated={!isEnvVarValid ? 'error' : isEnvVarConflict ? 'warning' : 'default'}
+            validated={!isEnvVarValid || isEnvVarConflict ? 'warning' : 'default'}
           />
           <FormHelperText>
             <HelperText>
               <HelperTextItem
-                variant={isEnvVarValid ? 'default' : 'error'}
-                icon={isEnvVarValid ? undefined : <ExclamationCircleIcon />}
+                variant={isEnvVarValid ? 'default' : 'warning'}
+                icon={isEnvVarValid ? undefined : <WarningTriangleIcon />}
               >
-                Must start with a letter or underscore. Valid characters include letters, numbers,
-                and underscores ( _ ).
+                For highest compatibility, field must consist of alphanumeric characters, ( - ), ( _
+                ), or ( . )
               </HelperTextItem>
             </HelperText>
             {isEnvVarConflict ? (