Add Hugging Face organization slug helper under Allowed organization (kubeflow#2600)

* add helper text for hf

Signed-off-by: Taj010 <rsheen003@gmail.com>

* adjust the message

Signed-off-by: Taj010 <rsheen003@gmail.com>

* rebase and adjust

Signed-off-by: Taj010 <rsheen003@gmail.com>

---------

Signed-off-by: Taj010 <rsheen003@gmail.com>

Author: Taj010

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

@@ -88,15 +88,22 @@ const CredentialsSection: React.FC<CredentialsSectionProps> = ({
     ) : undefined;
 
   const organizationFormGroup = (
-    <ThemeAwareFormGroupWrapper
-      label={FORM_LABELS.ORGANIZATION}
-      fieldId="organization"
-      isRequired
-      descriptionTextNode={organizationDescriptionTxtNode}
-      helperTextNode={organizationHelperTxtNode}
-    >
-      {organizationInput}
-    </ThemeAwareFormGroupWrapper>
+    <>
+      <ThemeAwareFormGroupWrapper
+        label={FORM_LABELS.ORGANIZATION}
+        fieldId="organization"
+        isRequired
+        descriptionTextNode={organizationDescriptionTxtNode}
+        helperTextNode={organizationHelperTxtNode}
+      >
+        {organizationInput}
+      </ThemeAwareFormGroupWrapper>
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem>{HELPER_TEXT.ORGANIZATION_SLUG}</HelperTextItem>
+        </HelperText>
+      </FormHelperText>
+    </>
   );
 
   const accessTokenInput = (

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

@@ -47,6 +47,8 @@ export const DESCRIPTION_TEXT = {
 export const HELPER_TEXT = {
   ACCESS_TOKEN: 'Enter your Hugging Face access token.',
   YAML: 'Upload or paste a YAML string.',
+  ORGANIZATION_SLUG:
+    'Hugging Face organization’s name is case-sensitive and should match the organization’s URL, which may differ from the displayed name. Use the organization’s URL slug found in the URL (e.g., Input: meta-llama from huggingface.co/meta-llama).',
 } as const;
 
 export const PLACEHOLDERS = {