Add tooltip for Cloud Foundry credential on create platform wizard

Signed-off-by: Nandini Chandra <[email protected]>

Author: nachandr

client/public/locales/en/translation.json

@@ -874,7 +874,8 @@
   "platformKind": {
     "cloudfoundry": {
       "label": "Cloud Foundry",
-      "urlTooltip": "API URL to Cloud Foundry"
+      "urlTooltip": "API URL to Cloud Foundry",
+      "credentialTooltip": "Use credential of type source control"
     }
   }
 }

client/src/app/hooks/usePlatformKindList.ts

@@ -7,13 +7,14 @@ export const DEFAULT_KIND = "cloudfoundry";
 
 export const KIND_MAP: Map<
   string,
-  { labelKey: string; urlTooltipKey: string }
+  { labelKey: string; urlTooltipKey: string; credentialTooltipKey: string }
 > = new Map([
   [
     "cloudfoundry",
     {
       labelKey: "platformKind.cloudfoundry.label",
       urlTooltipKey: "platformKind.cloudfoundry.urlTooltip",
+      credentialTooltipKey: "platformKind.cloudfoundry.credentialTooltip",
     },
   ],
 ]);
@@ -50,5 +51,15 @@ export const usePlatformKindList = () => {
     [t]
   );
 
-  return { kinds, getDisplayLabel, getUrlTooltip };
+  const getCredentialTooltip = useCallback(
+    (kind: string | undefined | null): string => {
+      if (kind && KIND_MAP.has(kind)) {
+        return t(KIND_MAP.get(kind)!.credentialTooltipKey);
+      }
+      return "";
+    },
+    [t]
+  );
+
+  return { kinds, getDisplayLabel, getUrlTooltip, getCredentialTooltip };
 };

client/src/app/pages/source-platforms/components/platform-form.tsx

@@ -61,7 +61,7 @@ const PlatformFormRenderer: React.FC<PlatformFormProps> = ({
   onClose,
 }) => {
   const { t } = useTranslation();
-  const { kinds: platformKindList, getUrlTooltip } = usePlatformKindList();
+  const { kinds: platformKindList, getUrlTooltip, getCredentialTooltip } = usePlatformKindList();
 
   const { existingPlatforms, createPlatform, updatePlatform } =
     usePlatformFormData({
@@ -233,6 +233,20 @@ const PlatformFormRenderer: React.FC<PlatformFormProps> = ({
         name="credentials"
         label={t("terms.credentials")}
         fieldId="credentials"
+        labelIcon={
+          getCredentialTooltip(selectedKind) ? (
+            <Popover bodyContent={<div>{getCredentialTooltip(selectedKind)}</div>}>
+              <button
+                type="button"
+                aria-label="More info for credential field"
+                onClick={(e) => e.preventDefault()}
+                className="pf-v5-c-button pf-m-plain"
+              >
+                <HelpIcon />
+              </button>
+            </Popover>
+          ) : undefined
+        }
         renderInput={({ field: { value, name, onChange } }) => (
           <>
             <SimpleSelect