Fix for URI form field regex validation (#3157)

opendatahub-io · Sep 6, 2024 · e344d82 · e344d82
1 parent aab23b9
commit e344d82
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 10 deletions.
diff --git a/frontend/src/concepts/connectionTypes/fields/UriFormField.tsx b/frontend/src/concepts/connectionTypes/fields/UriFormField.tsx
@@ -11,13 +11,12 @@ import { UriField } from '~/concepts/connectionTypes/types';
 import { FieldProps } from '~/concepts/connectionTypes/fields/types';
 import DefaultValueTextRenderer from '~/concepts/connectionTypes/fields/DefaultValueTextRenderer';
 
-const URI_REGEX = new RegExp(
-  '(?:(?:https?|ftp|file)://|www.|ftp.)(?:([-A-Z0-9+&@#/%=~_|$?!:,.]*)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:([-A-Z0-9+&@#/%=~_|$?!:,.]*)|[A-Z0-9+&@#/%=~_|$])',
-);
-
 const validateUrl = (url?: string) => {
+  if (!url) {
+    return true;
+  }
   try {
-    return !url || URI_REGEX.test(url);
+    return !!new URL(url);
   } catch (e) {
     return false;
   }
@@ -68,9 +67,9 @@ const UriFormField: React.FC<FieldProps<UriField>> = ({
       />
       {!isValid && (
         <FormHelperText>
-          <HelperText>
+          <HelperText data-testid="uri-form-field-helper-text">
             <HelperTextItem icon={<ExclamationCircleIcon />} variant={ValidatedOptions.error}>
-              Invalid URL
+              Invalid URI
             </HelperTextItem>
           </HelperText>
         </FormHelperText>

diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/UriFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/UriFormField.spec.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
 import { UriField } from '~/concepts/connectionTypes/types';
 import UriFormField from '~/concepts/connectionTypes/fields/UriFormField';
 
@@ -22,7 +21,7 @@ describe('UriFormField', () => {
     expect(input).toHaveValue('http://bar.com');
     expect(input).not.toBeDisabled();
 
-    act(() => {
+    React.act(() => {
       fireEvent.change(input, { target: { value: 'http://new.com' } });
     });
     expect(onChange).toHaveBeenCalledWith('http://new.com');
@@ -53,7 +52,7 @@ describe('UriFormField', () => {
     expect(input).not.toBeDisabled();
     expect(input).toHaveAttribute('aria-readonly', 'true');
 
-    act(() => {
+    React.act(() => {
       fireEvent.change(input, { target: { value: 'http://new.com' } });
     });
     expect(onChange).not.toHaveBeenCalled();
@@ -74,4 +73,48 @@ describe('UriFormField', () => {
     expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
     expect(screen.queryByText('http://foo.com')).toBeInTheDocument();
   });
+
+  it('should validate the URI entry', async () => {
+    const field: UriField = {
+      type: 'uri',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'http://foo.com',
+        defaultReadOnly: false,
+      },
+    };
+    let renderResult;
+
+    const validURIs = [
+      'http://www.someplace.com',
+      'https://www.someplace.com:9090/blah',
+      'http://www.ics.uci.edu/pub/ietf/uri?name=test/#Related',
+      'ftp://ftp.someplace.com:9090/blah/test.tst',
+      'file://var/log/some-log.log',
+      'file:/www.someplace.com:9090/c:/mydir/myfile.csv.gz',
+      'file:/www.someplace.com:9090/spaces are allowed/my file with no extension',
+      'gs://',
+      's3://',
+      'hdfs://',
+      'webhdfs://',
+      'model-registry://iris/v1',
+      'pvc://PVC-NAME/model.joblib',
+    ];
+    validURIs.forEach((uri) => {
+      renderResult = render(<UriFormField id="test" field={field} value={uri} />);
+      expect(screen.queryByTestId('uri-form-field-helper-text')).not.toBeInTheDocument();
+      renderResult.unmount();
+    });
+
+    const invalidURIs = [
+      '://www.someplace.com:9090/blah',
+      'https://www.something ?#?!@#$%&()!@#$%&(?#>/.,/ is this valid',
+    ];
+    invalidURIs.forEach((uri) => {
+      renderResult = render(<UriFormField id="test" field={field} value={uri} />);
+      expect(screen.queryByTestId('uri-form-field-helper-text')).toBeInTheDocument();
+      renderResult.unmount();
+    });
+  });
 });