🐛 Add tooltip for Cloud Foundry credential on create platform wizard #2698
Conversation
WalkthroughAdded a translation key for Cloud Foundry credential tooltips, extended the platform-kind KIND_MAP and hook to include a credential tooltip key, and updated the platform form to show a credential tooltip Popover for credentials when applicable. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Form as PlatformFormRenderer
participant Hook as usePlatformKindList
participant I18n as i18n/translation.json
Note over Form,Hook: User opens / edits platform form
Form->>Hook: getCredentialTooltip(selectedKind)
Hook->>I18n: lookup credentialTooltipKey for kind
I18n-->>Hook: translated tooltip text (or empty)
alt tooltip text present
Hook-->>Form: tooltip text
Form->>Form: render HelpIcon -> Popover with text
else no tooltip
Hook-->>Form: empty string
Form->>Form: no Popover rendered
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
client/public/locales/en/translation.json(1 hunks)client/src/app/hooks/usePlatformKindList.ts(2 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-08-29T16:01:04.207Z
Learnt from: sjd78
Repo: konveyor/tackle2-ui PR: 2583
File: client/src/app/pages/identities/components/identity-form/kind-source-form.tsx:17-26
Timestamp: 2025-08-29T16:01:04.207Z
Learning: Skip i18n/internationalization suggestions for the file client/src/app/pages/identities/components/identity-form/kind-source-form.tsx - hardcoded strings like "Username/Password" and "Private Key/Passphrase" should remain as-is.
Applied to files:
client/src/app/hooks/usePlatformKindList.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: unit-test
- GitHub Check: build-and-upload-for-global-ci
🔇 Additional comments (3)
client/public/locales/en/translation.json (1)
877-878: LGTM! Translation key added correctly.The new
credentialTooltiptranslation key follows the existing naming convention and the JSON structure is valid.client/src/app/hooks/usePlatformKindList.ts (2)
54-62: LGTM! Function implementation follows existing patterns.The
getCredentialTooltipfunction correctly mirrors the implementation pattern ofgetUrlTooltip, with proper null/undefined handling and an appropriate fallback to an empty string. Once the translation key issue on Line 17 is fixed, this will work as expected.
64-64: LGTM! Public API correctly extended.The return statement properly exposes the new
getCredentialTooltipfunction, maintaining a consistent API pattern with the existing helpers.
Signed-off-by: Nandini Chandra <[email protected]>
nachandr
force-pushed
the
cf_credential_tooltip
branch
from
99c03de to
2f3a25f
Compare
nachandr
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
client/src/app/pages/source-platforms/components/platform-form.tsx (1)
236-249: LGTM! Tooltip implementation follows established patterns.The credential field tooltip correctly mirrors the URL field tooltip implementation (lines 215-228):
- Conditional rendering based on tooltip availability
- Proper accessibility with descriptive aria-label
- Prevents default button behavior
- Uses PatternFly's Popover and HelpIcon components consistently
Optional: Consider extracting the Popover pattern to reduce duplication.
Since the URL and credentials fields use identical Popover patterns, you could extract this into a reusable
TooltipIconcomponent:const TooltipIcon: React.FC<{ tooltip: string; ariaLabel: string }> = ({ tooltip, ariaLabel }) => ( <Popover bodyContent={<div>{tooltip}</div>}> <button type="button" aria-label={ariaLabel} onClick={(e) => e.preventDefault()} className="pf-v5-c-button pf-m-plain" > <HelpIcon /> </button> </Popover> );Then use it as:
labelIcon={ getCredentialTooltip(selectedKind) ? ( <TooltipIcon tooltip={getCredentialTooltip(selectedKind)} ariaLabel="More info for credential field" /> ) : undefined }This is entirely optional and can be deferred to reduce duplication across the codebase later.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
client/public/locales/en/translation.json(1 hunks)client/src/app/hooks/usePlatformKindList.ts(2 hunks)client/src/app/pages/source-platforms/components/platform-form.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- client/public/locales/en/translation.json
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2025-08-29T16:01:04.207Z
Learnt from: sjd78
Repo: konveyor/tackle2-ui PR: 2583
File: client/src/app/pages/identities/components/identity-form/kind-source-form.tsx:17-26
Timestamp: 2025-08-29T16:01:04.207Z
Learning: Skip i18n/internationalization suggestions for the file client/src/app/pages/identities/components/identity-form/kind-source-form.tsx - hardcoded strings like "Username/Password" and "Private Key/Passphrase" should remain as-is.
Applied to files:
client/src/app/hooks/usePlatformKindList.tsclient/src/app/pages/source-platforms/components/platform-form.tsx
📚 Learning: 2025-07-29T14:20:50.580Z
Learnt from: sjd78
Repo: konveyor/tackle2-ui PR: 2468
File: client/src/app/pages/source-platforms/usePlatformProviderList.ts:1-3
Timestamp: 2025-07-29T14:20:50.580Z
Learning: The TargetCard component operates independently from the usePlatformProviderList hook and source platform functionality. References to cloud providers like "Azure" in TargetCard are unrelated to the platform provider list changes and serve a different purpose in the application.
Applied to files:
client/src/app/pages/source-platforms/components/platform-form.tsx
📚 Learning: 2025-07-29T14:20:50.580Z
Learnt from: sjd78
Repo: konveyor/tackle2-ui PR: 2468
File: client/src/app/pages/source-platforms/usePlatformProviderList.ts:1-3
Timestamp: 2025-07-29T14:20:50.580Z
Learning: TargetCard component is focused on transformation targets, not source platform providers. It imports Target/TargetLabel models and operates independently from usePlatformProviderList. The codebase maintains clear separation between source platforms (managed by usePlatformProviderList) and transformation targets (managed by TargetCard).
Applied to files:
client/src/app/pages/source-platforms/components/platform-form.tsx
🧬 Code graph analysis (1)
client/src/app/pages/source-platforms/components/platform-form.tsx (1)
client/src/app/hooks/usePlatformKindList.ts (1)
usePlatformKindList(22-65)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: unit-test
- GitHub Check: build-and-upload-for-global-ci
🔇 Additional comments (4)
client/src/app/hooks/usePlatformKindList.ts (3)
10-17: LGTM! Type extension and translation key are correct.The KIND_MAP type has been properly extended to include
credentialTooltipKey, and the cloudfoundry entry uses the correct translation key"platformKind.cloudfoundry.credentialTooltip"instead of a literal string. This follows the established pattern forlabelKeyandurlTooltipKey.
54-62: LGTM! Implementation follows existing patterns.The
getCredentialTooltipfunction correctly mirrors the implementation pattern ofgetUrlTooltipandgetDisplayLabel:
- Proper null/undefined checks before accessing KIND_MAP
- Safe use of non-null assertion after
has()check- Correctly wrapped in useCallback with appropriate dependency
- Returns empty string for unknown/missing kinds
64-64: LGTM! Public API appropriately extended.The hook now exposes
getCredentialTooltipalongside the existing utilities, maintaining a clean and consistent API surface.client/src/app/pages/source-platforms/components/platform-form.tsx (1)
64-64: LGTM! Hook integration is correct.The
getCredentialTooltipfunction is properly destructured fromusePlatformKindList()alongside the existing tooltip utilities, maintaining consistency with the URL tooltip implementation pattern.
1 participant
Resolves Jira 6244
Summary by CodeRabbit