Background

The tower-analytics-frontend application currently uses PatternFly 5 (PF5) components that were completely removed in PatternFly 6. While the initial PF6 dependency upgrade has been completed (packages upgraded to v6.4.0, codemods applied, CSS classes/tokens updated), several core components are running on temporary placeholder shims that provide limited functionality. All work in this epic needs to be based off this branch https://github.com/prat98/tower-analytics-frontend/tree/AAP-64250-pf6-migration-groundwork which lays the groundwork for development

Current State:

• Application runs but uses pf5Shim.tsx for Select and Dropdown components (basic HTML placeholders lacking accessibility, keyboard navigation, and full styling)
• Notifications use notificationsShim.ts that logs warnings but doesn't display notifications to users
• ~31 files have @ts-nocheck TypeScript directives as temporary workarounds

Value Proposition:

• Restore full component functionality (filtering, typeahead, keyboard navigation, accessibility)
• Enable proper user notifications for API errors and success messages
• Maintain alignment with Red Hat's design system and accessibility standards
• Reduce technical debt and enable future PatternFly upgrades
• Remove temporary workarounds that mask potential issues

  Repository and Scope

Repository: https://github.com/prat98/tower-analytics-frontend/tree/AAP-64250-pf6-migration-groundwork

The team will perform the following work:

1. Update the application to PatternFly 6 - Migrate all PF5 components to their PF6 equivalents
2. Implement common build pattern - Use git submodule to https://github.com/RedHatInsights/insights-frontend-builder-common
3. Onboard to frontend operator - Complete the onboarding process for the frontend operator

   User Stories

   _ As a crc tower {_}analytics user{*}, I want dropdown menus and select inputs to work with keyboard navigation so that I can efficiently navigate the UI without a mouse.
   _ As a crc tower analytics {_}user{*}, I want to receive notifications when actions succeed or fail so that I understand the result of my interactions.
   _ As a {_}developer{*}, I want the codebase to use supported PatternFly 6 components so that I can confidently build new features without compatibility concerns.

   Supporting Documentation

• PatternFly 6 Select Migration Guide
• PatternFly 6 Dropdown Migration Guide
• PatternFly 6 Upgrade Guide
• Frontend Components Notifications
• Frontend Builder Common

Files Reference:

• Current PF5 Shim: src/pf5Shim.tsx
• Current Notifications Shim: src/notificationsShim.ts

  Definition of Done

• All PF5 shim imports have been replaced with native PF6 component implementations
• All temporary shim files (pf5Shim.tsx, notificationsShim.ts) have been deleted
• All @ts-nocheck directives have been removed
• Application builds successfully (npm run build)
• Linting passes (npm run lint)
• All existing Cypress tests pass
• Manual smoke testing confirms no regressions in affected components
• Common build pattern using git submodule to insights-frontend-builder-common is implemented
• Application is successfully onboarded to frontend operator
• Code has been reviewed and approved
• Changes have been merged to main branch

  Acceptance Criteria

  Requirements

1. All Select components use PF6 composable Select API (Select, SelectOption, SelectList, MenuToggle)
2. All Dropdown components use PF6 composable Dropdown API (Dropdown, DropdownList, DropdownItem, MenuToggle)
3. Notifications API uses the new store-based API from @redhat-cloud-services/frontend-components-notifications v6
4. Single-select, multi-select, and typeahead Select variants function correctly
5. Kebab menus render correctly with MenuToggle variant="plain"
6. Dropdown action items, separators, and disabled states work as expected
7. API error notifications display to users
8. Success/info notifications display to users
9. No imports reference deleted shim files
10. No @ts-nocheck TypeScript directives remain in the codebase
11. Git submodule to insights-frontend-builder-common is properly configured
12. Application is successfully deployed through frontend operator

End to End Test

Test: Verify Select Component Migration

1. Navigate to a Reports page with filters
2. Click on a filter dropdown (e.g., status, cluster, organization)
3. Use keyboard arrow keys to navigate between options
4. Press Enter to select an option
5. Verify the selection is applied and the page filters correctly

If the previous steps are possible, then the test succeeds. Otherwise, the test fails.

Test: Verify Dropdown Component Migration

1. Navigate to the Savings Planner list view
2. Locate a plan item with a kebab (⋮) actions menu
3. Click the kebab menu
4. Verify dropdown appears with action items (Edit, Delete, etc.)
5. Click an action item
6. Verify the action executes correctly

If the previous steps are possible, then the test succeeds. Otherwise, the test fails.

Test: Verify Notifications Migration

1. Navigate to the Automation Calculator page
2. Perform an action that triggers a notification (e.g., save calculation, API error)
3. Verify notification toast appears in the notification drawer
4. Verify notification can be dismissed

If the previous steps are possible, then the test succeeds. Otherwise, the test fails.

Original ticket: AAP-64407