Improve help text for YAML and HF catalog sources (kubeflow#2186)

Signed-off-by: manaswinidas <dasmanaswini10@gmail.com>

Author: manaswinidas

clients/ui/frontend/src/app/pages/modelCatalogSettings/components/ModelVisibilitySection.tsx

@@ -16,10 +16,10 @@ import {
   FORM_LABELS,
   PLACEHOLDERS,
   DESCRIPTIONS,
-  FIELD_HELPER_TEXT,
   getFilterInfoWithOrg,
   getAllowedModelsHelp,
   getExcludedModelsHelp,
+  getModelsFieldHelperText,
 } from '~/app/pages/modelCatalogSettings/constants';
 import { CatalogSourceType } from '~/app/modelCatalogTypes';
 
@@ -44,6 +44,7 @@ const ModelVisibilitySection: React.FC<ModelVisibilitySectionProps> = ({
 
   const allowedModelsHelp = getAllowedModelsHelp(organization);
   const excludedModelsHelp = getExcludedModelsHelp(organization);
+  const modelsFieldHelperText = getModelsFieldHelperText(isHuggingFaceMode);
 
   const allowedModelsPlaceholder = isHuggingFaceMode
     ? PLACEHOLDERS.ALLOWED_MODELS_HF
@@ -101,7 +102,7 @@ const ModelVisibilitySection: React.FC<ModelVisibilitySectionProps> = ({
           </FormHelperText>
           <FormHelperText>
             <HelperText>
-              <HelperTextItem>{FIELD_HELPER_TEXT.INCLUDED_MODELS}</HelperTextItem>
+              <HelperTextItem>{modelsFieldHelperText}</HelperTextItem>
             </HelperText>
           </FormHelperText>
         </FormGroup>
@@ -115,7 +116,7 @@ const ModelVisibilitySection: React.FC<ModelVisibilitySectionProps> = ({
           </FormHelperText>
           <FormHelperText>
             <HelperText>
-              <HelperTextItem>{FIELD_HELPER_TEXT.EXCLUDED_MODELS}</HelperTextItem>
+              <HelperTextItem>{modelsFieldHelperText}</HelperTextItem>
             </HelperText>
           </FormHelperText>
         </FormGroup>

clients/ui/frontend/src/app/pages/modelCatalogSettings/constants.ts

@@ -42,9 +42,9 @@ export const HELP_TEXT = {
 export const PLACEHOLDERS = {
   ORGANIZATION: 'Example: Google',
   ALLOWED_MODELS_HF: 'Enter model names, one per line (e.g., gemma-7b*)',
-  ALLOWED_MODELS_GENERIC: 'Example: Llama*, Llama-3.1-8B-Instruct',
+  ALLOWED_MODELS_GENERIC: 'Example: Google/gemma-7b*, Meta/Llama-3.1-8B-Instruct',
   EXCLUDED_MODELS_HF: 'Enter model names, one per line (e.g., gemma-7b-test*)',
-  EXCLUDED_MODELS_GENERIC: 'Example: Llama*, Llama-3.1-8B-Instruct',
+  EXCLUDED_MODELS_GENERIC: 'Example: Google/gemma-7b-test*, Meta/Llama*',
 } as const;
 
 export const DESCRIPTIONS = {
@@ -72,9 +72,7 @@ export const getExcludedModelsHelp = (organization?: string): string =>
     ? `Enter the names of ${organization} models to exclude from this source. These models will not appear in the model catalog.`
     : 'Enter the names of models to exclude from this source. These models will not appear in the model catalog.';
 
-export const FIELD_HELPER_TEXT = {
-  INCLUDED_MODELS:
-    'Separate model names using commas. To include all models with a specific prefix, enter the prefix followed by an asterisk. Example, Llama*',
-  EXCLUDED_MODELS:
-    'Separate model names using commas. To exclude all models with a specific prefix, enter the prefix followed by an asterisk. Example, Llama*',
-} as const;
+export const getModelsFieldHelperText = (isHuggingFaceSource: boolean): string =>
+  isHuggingFaceSource
+    ? 'Separate model names using commas. Use an asterisk for prefix matching. Example: Llama*'
+    : 'Separate model names using commas, including the organization prefix. Use an asterisk for prefix matching. Example: Google/gemma*';