✨ Source platform render updates #2529

sjd78 · 2025-08-01T21:24:19Z

Changes:

Rename providerType to platformKind across the components
platformKind is labeled as Type in the UI
Only show source identities in the source platform form
Add credentials to the source platform detail drawer
Rename usePlatformProviderList to usePlatformKindList
Minor rendering changes

Screenshots:

Summary by CodeRabbit

New Features
- Added a new "platformKind" translation key for improved labeling.
- Introduced a credentials field in the platform details view.
Refactor
- Replaced "providerType" terminology with "platformKind" across the user interface.
- Updated platform kind selection and labeling in forms and tables.
- Simplified application count display and UI layout in platform details.
- Streamlined styling for the platform detail drawer.
- Improved component structure for platform detail tabs.
Chores
- Removed unused files and replaced internal logic for listing platform kinds.

Changes: - Rename `providerType` to `platformKind` across the components - `platformKind` is labeled as `Type` in the UI - Only show source identities in the source platform form - Add credentials to the source platform detail drawer - Rename `usePlatformProviderList` to `usePlatformKindList` - Minor rendering changes Signed-off-by: Scott J Dickerson <[email protected]>

coderabbitai · 2025-08-01T21:24:26Z

Walkthrough

This change replaces the term "providerType" with "platformKind" throughout the source platforms feature, updating UI labels, translation keys, and related logic. It introduces a new usePlatformKindList hook, removes the old provider list hook, updates forms and tables to use "platform kind," and adjusts component structure and styling for consistency.

Changes

Cohort / File(s)	Change Summary
Translation Key Update `client/public/locales/en/translation.json`	Added a new translation key `"platformKind": "Type"` under the "terms" section.
Platform Kind Hook Refactor `client/src/app/pages/source-platforms/usePlatformKindList.ts`, `client/src/app/pages/source-platforms/usePlatformProviderList.ts`	Added new `usePlatformKindList` hook and removed the old `usePlatformProviderList` hook, shifting from "provider" to "kind" terminology and updating the default value.
Source Platforms Table & Actions `client/src/app/pages/source-platforms/source-platforms.tsx`	Replaced all "providerType" references with "platformKind" in UI, filters, and sorting. Changed the `discoverApplications` function to accept a platform object instead of an ID and simplified its logic. Updated imports for the new hook and component structure.
Platform Form Update `client/src/app/pages/source-platforms/components/platform-form.tsx`, `client/src/app/pages/source-platforms/components/platform-form/index.ts`	Updated the form to use platform kind terminology, select options, and hook. Removed the default export index file. Updated filtering of identities and removed unused form methods.
Platform Detail Drawer & Styling `client/src/app/pages/source-platforms/components/platform-detail-drawer.tsx`, `client/src/app/pages/source-platforms/components/platform-detail-drawer.css`	Updated the detail drawer to use new layout components, added a credentials description group, changed label to "platformKind," and adjusted styling to use design system variables.
Platform Applications Table `client/src/app/pages/source-platforms/components/platform-applications-table.tsx`	Removed unused spacing utility import and corresponding styling from the Toolbar component.
Platform Applications Link `client/src/app/pages/source-platforms/components/link-to-platform-applications.tsx`	Simplified translation logic for application count, removing conditional pluralization and using a single translation key.
Identities Query `client/src/app/queries/identities.ts`	Added a comment regarding future enhancement to filter identities by kind; no functional changes.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant SourcePlatformsPage
    participant PlatformForm
    participant PlatformDetailDrawer
    participant usePlatformKindList

    User->>SourcePlatformsPage: Opens Source Platforms
    SourcePlatformsPage->>usePlatformKindList: Fetch platform kinds
    usePlatformKindList-->>SourcePlatformsPage: Return kind list
    User->>PlatformForm: Add/Edit Platform
    PlatformForm->>usePlatformKindList: Fetch platform kinds
    usePlatformKindList-->>PlatformForm: Return kind list
    PlatformForm-->>User: Show platform kind select
    User->>PlatformDetailDrawer: View Platform Details
    PlatformDetailDrawer->>usePlatformKindList: Fetch platform kinds (if needed)
    PlatformDetailDrawer-->>User: Show details (with platform kind)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

✨ add source platforms page to the ui #2368: Introduced the "providerType" translation key, which this PR now replaces with "platformKind".
✨ Finalize Source Platforms #2501: Modified the provider list logic, which is now replaced by the new platform kind list in this PR.

Suggested reviewers

rszwajko
ibolton336

Poem

A hop, a skip, a platform kind,
Provider types are left behind.
New hooks emerge, old ones retire,
UI labels now inspire.
With every change, the code aligned—
A rabbit’s joy, in “kind” redefined! 🐇✨

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0605d29 and 30fbc62.

📒 Files selected for processing (11)

client/public/locales/en/translation.json (1 hunks)
client/src/app/pages/source-platforms/components/link-to-platform-applications.tsx (1 hunks)
client/src/app/pages/source-platforms/components/platform-applications-table.tsx (1 hunks)
client/src/app/pages/source-platforms/components/platform-detail-drawer.css (1 hunks)
client/src/app/pages/source-platforms/components/platform-detail-drawer.tsx (3 hunks)
client/src/app/pages/source-platforms/components/platform-form.tsx (3 hunks)
client/src/app/pages/source-platforms/components/platform-form/index.ts (0 hunks)
client/src/app/pages/source-platforms/source-platforms.tsx (8 hunks)
client/src/app/pages/source-platforms/usePlatformKindList.ts (1 hunks)
client/src/app/pages/source-platforms/usePlatformProviderList.ts (0 hunks)
client/src/app/queries/identities.ts (1 hunks)

💤 Files with no reviewable changes (2)

client/src/app/pages/source-platforms/components/platform-form/index.ts
client/src/app/pages/source-platforms/usePlatformProviderList.ts

🧰 Additional context used

🧠 Learnings (4)

📓 Common learnings

Learnt from: sjd78
PR: konveyor/tackle2-ui#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.

Learnt from: sjd78
PR: konveyor/tackle2-ui#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).

📚 Learning: targetcard component is focused on transformation targets, not source platform providers. it imports...

Learnt from: sjd78
PR: konveyor/tackle2-ui#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-applications-table.tsx
client/src/app/pages/source-platforms/components/link-to-platform-applications.tsx
client/src/app/pages/source-platforms/components/platform-form.tsx
client/src/app/pages/source-platforms/source-platforms.tsx
client/src/app/pages/source-platforms/components/platform-detail-drawer.tsx

📚 Learning: the targetcard component operates independently from the useplatformproviderlist hook and source pla...

Learnt from: sjd78
PR: konveyor/tackle2-ui#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-applications-table.tsx
client/src/app/pages/source-platforms/components/platform-form.tsx
client/src/app/pages/source-platforms/usePlatformKindList.ts
client/src/app/pages/source-platforms/source-platforms.tsx
client/src/app/pages/source-platforms/components/platform-detail-drawer.tsx

📚 Learning: the tackle2-ui codebase uses react query v4 (@tanstack/react-query v4.22.0), where the onerror callb...

Learnt from: sjd78
PR: konveyor/tackle2-ui#2467
File: client/src/app/queries/generators.ts:20-20
Timestamp: 2025-07-21T06:01:43.078Z
Learning: The tackle2-ui codebase uses React Query v4 (@tanstack/react-query v4.22.0), where the onError callback in query configurations is still valid and supported. The deprecation of onError callbacks only applies to React Query v5, so suggestions about removing them are premature until the codebase is upgraded.

Applied to files:

client/src/app/pages/source-platforms/source-platforms.tsx

🧬 Code Graph Analysis (2)

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

client/src/app/pages/source-platforms/usePlatformKindList.ts (1)

usePlatformKindList (5-7)

client/src/app/queries/identities.ts (1)

useFetchIdentities (56-70)

client/src/app/components/SimpleSelect.tsx (1)

SimpleSelect (31-69)

client/src/app/Constants.ts (1)

DEFAULT_SELECT_MAX_HEIGHT (21-21)

client/src/app/pages/source-platforms/source-platforms.tsx (1)

client/src/app/api/models.ts (1)

SourcePlatform (928-937)

⏰ 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 (24)

client/public/locales/en/translation.json (1)

452-452: LGTM! Translation key addition supports terminology update.

The new platformKind translation key with value "Type" correctly supports the broader change from "providerType" to "platformKind" terminology throughout the source platform components.

client/src/app/pages/source-platforms/components/platform-detail-drawer.css (1)

2-2: Excellent use of design system variables.

Replacing the fixed margin-top value with var(--pf-v5-global--spacer--md) improves consistency with the PatternFly design system and makes the styling more maintainable.

client/src/app/queries/identities.ts (1)

55-55: Good practice documenting future enhancement.

The TODO comment clearly indicates the planned enhancement to filter identities by kind, which aligns well with the platform kind terminology updates being made throughout the codebase.

client/src/app/pages/source-platforms/components/platform-applications-table.tsx (1)

111-111: Good styling cleanup removing unnecessary overrides.

Simplifying the Toolbar component by removing the explicit spacing className reduces complexity and relies on PatternFly's default styling, which aligns with the broader styling improvements in this PR.
client/src/app/pages/source-platforms/components/link-to-platform-applications.tsx (1)

39-41: Potential i18n pluralization issue.

This change removes proper i18next pluralization handling by replacing the _one/_other suffix pattern with a single translation key. This could break pluralization in languages with complex plural rules.

Consider reverting to the original pluralization approach:
-      {t("message.platformApplicationCount", {
-        count: platform?.applications?.length ?? 0,
-      })}
+      {t("message.platformApplicationCount", {
+        count: platform?.applications?.length ?? 0,
+      })}
Ensure the translation file has both platformApplicationCount_one and platformApplicationCount_other keys to support proper pluralization across different languages.

Likely an incorrect or invalid review comment.
client/src/app/pages/source-platforms/usePlatformKindList.ts (3)

3-3: Good architectural decision for future extensibility.

The comment indicates plans for either expanding the list or using API-driven data, which shows good forward-thinking design.

5-7: Clean hook implementation.

The hook follows React patterns correctly and provides a simple, consistent interface for accessing platform kinds.

1-1: DEFAULT_KIND value update verified
A full-text search of the repository shows no occurrences of the old "cloud-foundry" string and only the new "cloudfoundry" in:

client/src/app/pages/source-platforms/usePlatformKindList.ts

This change is safe to merge.

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

33-33: LGTM - Updated import aligns with new terminology.

The import change from usePlatformProviderList to usePlatformKindList is consistent with the overall refactoring.

62-62: Good variable naming consistency.

The destructuring update from providers: providersList to kinds: platformKindList maintains clear, descriptive variable names that align with the new terminology.

70-72: Appropriate filtering for source identities.

Filtering identities to only include those with kind === "source" is the correct approach for source platform forms, ensuring only relevant credentials are displayed.

177-177: UI terminology consistently updated.

The label change from "providerType" to "platformKind" maintains consistency with the overall terminology refactoring and matches the translation key structure.

184-194: Form accessibility properly maintained.

All form field IDs, aria-labels, and placeholder text have been appropriately updated to reflect the new "platform kind" terminology while maintaining accessibility standards.

client/src/app/pages/source-platforms/source-platforms.tsx (5)

2-2: Minor import organization improvement.

Moving the AxiosError import earlier in the list improves the overall import organization.

51-51: Import change aligns with component structure.

The change to a named import for PlatformForm is appropriate and reflects the updated component export structure.

125-125: Comprehensive terminology update.

All references to "providerType" have been consistently updated to "platformKind" across UI labels, filter categories, sortable columns, and table headers. This maintains consistency throughout the user interface.

Also applies to: 148-149, 153-153, 161-161, 164-164, 256-256, 305-305

206-210: Verify the console.log is intentional.

The discoverApplications function now accepts a full SourcePlatform object (which is better than just an ID) but only logs to console. Ensure this console.log is intentional and not a placeholder for actual implementation.

Is this console.log temporary, or should there be actual application discovery logic here?

329-329: Function call properly updated.

The call to discoverApplications correctly passes the full platform object, matching the updated function signature.

client/src/app/pages/source-platforms/components/platform-detail-drawer.tsx (6)

22-26: Good UI structure improvements.

The addition of DrawerTabContent and DrawerTabsContainer components improves the overall layout structure and consistency across the application.

66-66: Proper use of new layout containers.

The wrapping of tabs content with DrawerTabsContainer follows the expected pattern for the new UI components.

Also applies to: 142-142

75-111: Well-implemented details section with proper empty states.

The Details tab structure is well-organized with:

Clear description list layout

Consistent terminology update from "providerType" to "platformKind"

Good credentials display with proper empty state handling using EmptyTextMessage

Thoughtful TODO comment about future identity linking functionality

85-85: Terminology consistently updated.

The label change from "terms.providerType" to "terms.platformKind" maintains consistency with the overall refactoring effort.

120-127: Commented code properly maintained.

Even the commented coordinates tab has been updated with the new layout components, showing attention to detail for future use.

135-139: Applications tab properly structured.

The Applications tab content is appropriately wrapped with the new DrawerTabContent component for consistency.

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

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.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

sjd78 requested review from ibolton336 and rszwajko as code owners August 1, 2025 21:24

ibolton336 approved these changes Aug 1, 2025

View reviewed changes

sjd78 merged commit 39b6ce1 into konveyor:main Aug 1, 2025
12 checks passed

sjd78 deleted the sourceplatform_providerType_to_type branch August 1, 2025 23:17

This was referenced Aug 6, 2025

operator konveyor-operator (0.8.0-alpha.2) k8s-operatorhub/community-operators#6662

Merged

operator konveyor-operator (0.8.0-alpha.2) redhat-openshift-ecosystem/community-operators-prod#7340

Merged

coderabbitai bot mentioned this pull request Aug 13, 2025

✨ Workflow - Source platform discover and import applications wizard #2545

Merged

This was referenced Aug 22, 2025

operator konveyor-operator (0.8.0-beta.1) k8s-operatorhub/community-operators#6777

Merged

operator konveyor-operator (0.8.0-beta.1) redhat-openshift-ecosystem/community-operators-prod#7491

Merged

coderabbitai bot mentioned this pull request Aug 27, 2025

🐛 Add labels and tooltips per platform kind for Source Platforms #2577

Merged

This was referenced Sep 8, 2025

operator konveyor-operator (0.8.0-beta.4) k8s-operatorhub/community-operators#6811

Merged

operator konveyor-operator (0.8.0-beta.4) redhat-openshift-ecosystem/community-operators-prod#7584

Merged

This was referenced Sep 10, 2025

🐛 Fix missing tooltip text in create platform wizard #2604

Merged

🐛 Fix platform kind filtering to use display labels #2605

Merged

✨ Hide URL popover when there is no tooltip to display #2607

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

✨ Source platform render updates #2529

✨ Source platform render updates #2529

Uh oh!

sjd78 commented Aug 1, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Aug 1, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

Uh oh!

Uh oh!

✨ Source platform render updates #2529

✨ Source platform render updates #2529

Uh oh!

Conversation

sjd78 commented Aug 1, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Aug 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

Uh oh!

Uh oh!

sjd78 commented Aug 1, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Aug 1, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)