feat: add validation for agent import URL (#1544)

Author: Tomas2D

apps/agentstack-ui/src/modules/agents/components/import/ImportAgentsModal.tsx

@@ -27,6 +27,7 @@ import type { ModalProps } from '#contexts/Modal/modal-context.ts';
 import { useImportAgent } from '#modules/agents/hooks/useImportAgent.ts';
 import type { ImportAgentFormValues } from '#modules/agents/types.ts';
 import { ProviderSource } from '#modules/providers/types.ts';
+import { isValidUrl } from '#utils/url.ts';
 
 import classes from './ImportAgentsModal.module.scss';
 
@@ -43,10 +44,10 @@ export function ImportAgentsModal({ onRequestClose, ...modalProps }: ModalProps)
     register,
     handleSubmit,
     resetField,
-    formState: { isValid },
+    formState: { isValid, errors },
     control,
   } = useForm<ImportAgentFormValues>({
-    mode: 'onChange',
+    mode: 'onTouched',
     defaultValues: {
       source: featureFlags.ProviderBuilds ? ProviderSource.GitHub : ProviderSource.Docker,
     },
@@ -139,25 +140,34 @@ export function ImportAgentsModal({ onRequestClose, ...modalProps }: ModalProps)
                 <RadioButton labelText="Container image URL" value={ProviderSource.Docker} />
               </RadioButtonGroup>
 
-              {sourceField.value === ProviderSource.GitHub ? (
-                <TextInput
-                  id={`${id}:location`}
-                  size="lg"
-                  labelText="GitHub repository URL"
-                  placeholder="Enter your agent’s GitHub repository URL"
-                  hideLabel
-                  {...register('location', { required: true, disabled: isPending })}
-                />
-              ) : (
-                <TextInput
-                  id={`${id}:location`}
-                  size="lg"
-                  labelText="Container image URL"
-                  placeholder="Enter your agent’s container image URL"
-                  hideLabel
-                  {...register('location', { required: true, disabled: isPending })}
-                />
-              )}
+              <TextInput
+                id={`${id}:location`}
+                size="lg"
+                hideLabel
+                invalid={Boolean(errors.location)}
+                invalidText={errors.location?.message}
+                {...(sourceField.value === ProviderSource.GitHub
+                  ? {
+                      labelText: 'GitHub repository URL',
+                      placeholder: 'Enter your agent’s GitHub repository URL',
+                    }
+                  : {
+                      labelText: 'Container image URL',
+                      placeholder: 'Enter your agent’s container image URL',
+                    })}
+                {...register('location', {
+                  required: 'Enter your agent’s location.',
+                  disabled: isPending,
+                  setValueAs: (value: string) => value.trim(),
+                  validate: (value: string) => {
+                    if (sourceField.value === ProviderSource.GitHub) {
+                      return isValidUrl(value) || 'Enter a valid GitHub repository URL.';
+                    }
+
+                    return true;
+                  },
+                })}
+              />
             </div>
           )}
 

apps/agentstack-ui/src/utils/url.ts

@@ -7,3 +7,13 @@
 const ABSOLUTE_URL_REGEX = new RegExp('^(?:[a-z+]+:)?//', 'i');
 
 export const isAbsoluteUrl = (url: string) => ABSOLUTE_URL_REGEX.test(url);
+
+export const isValidUrl = (value: string): boolean => {
+  try {
+    const { protocol } = new URL(value);
+
+    return protocol === 'http:' || protocol === 'https:';
+  } catch {
+    return false;
+  }
+};