ACM-30521: Add Azure HCP cluster creation and control plane selection UI#6384
ACM-30521: Add Azure HCP cluster creation and control plane selection UI#6384fxiang1 wants to merge 2 commits into
Conversation
Add Azure Hosted Control Plane (HCP) cluster creation UI, similar to the existing AWS HCP implementation: - Add Azure control plane type selection page (Hosted vs Standalone) at /multicloud/infrastructure/clusters/create/azure/control-plane - Add Azure HCP CLI instructions page with 7-step guide at /multicloud/infrastructure/clusters/create/azure/cli - Update cluster catalog to route Azure to control plane selection - Add navigation paths, routes, placeholder doc links, and unit tests Signed-off-by: fxiang1 <fxiang@redhat.com>
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: fxiang1 The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Enterprise Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (6)
🚧 Files skipped from review as they are similar to previous changes (5)
📝 WalkthroughWalkthroughAdds Azure control-plane route wiring, a hypershift-gated control-plane selection page, Azure Hypershift CLI instructions, documentation links, and focused behavior and accessibility tests. ChangesAzure control-plane flow
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant ProviderSelection
participant CreateAzureControlPlane
participant HypershiftStatus
participant HypershiftAzureCLI
participant DocPage
ProviderSelection->>CreateAzureControlPlane: navigate to Azure control-plane selection
CreateAzureControlPlane->>HypershiftStatus: load hosted control-plane status
HypershiftStatus-->>CreateAzureControlPlane: return enabled or disabled state
CreateAzureControlPlane->>HypershiftAzureCLI: navigate for hosted deployment
HypershiftAzureCLI->>DocPage: provide Azure steps, commands, and documentation link
DocPage-->>HypershiftAzureCLI: render instructional page
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
frontend/src/lib/doc-util.tsxESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateCluster/components/assisted-installer/hypershift/HypershiftAzureCLI.test.tsxESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox. frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateCluster/components/assisted-installer/hypershift/HypershiftAzureCLI.tsxESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.
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: 3
🧹 Nitpick comments (2)
frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateAzureControlPlane.tsx (1)
67-73: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse a PatternFly link/button for the alert CTA.
This new alert renders a raw
<a>even though the frontend TSX guidelines require PatternFly components instead of custom HTML. Wrapping the external doc CTA in a PatternFly link-style component keeps styling and behavior consistent with the rest of the catalog UI.Suggested change
-import { Icon } from '`@patternfly/react-core`' +import { Button, Icon } from '`@patternfly/react-core`' ... - return ( - <a href={DOC_LINKS.HOSTED_ENABLE_FEATURE_AZURE} target="_blank" rel="noopener noreferrer"> - {t('View documentation')} <ExternalLinkAltIcon /> - </a> - ) + return ( + <Button + component="a" + variant="link" + isInline + href={DOC_LINKS.HOSTED_ENABLE_FEATURE_AZURE} + target="_blank" + rel="noopener noreferrer" + icon={<ExternalLinkAltIcon />} + iconPosition="right" + > + {t('View documentation')} + </Button> + )As per coding guidelines, "Always use PatternFly components instead of custom HTML — import from
@patternfly/react-coreand@patternfly/react-icons".🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateAzureControlPlane.tsx` around lines 67 - 73, The alert CTA in CreateAzureControlPlane currently uses a raw anchor instead of a PatternFly component. Update the alertContent rendering to use a PatternFly link-style component from `@patternfly/react-core` for the external docs action, and keep the ExternalLinkAltIcon from `@patternfly/react-icons`. Preserve the existing href, target, rel, and translated label, and make the change in the CreateAzureControlPlane alertContent block so it matches the catalog UI conventions.Source: Coding guidelines
frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateAzureControlPlane.test.tsx (1)
10-30: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winStop importing Recoil atoms directly in this test harness.
This setup reaches into
../../../../../atomsto seedmanagedClusterAddonsStateandmultiClusterEnginesState, which is the exact coupling the frontend test guidelines prohibit. Please mock the shared atoms throughuseSharedAtoms()instead so the test stays aligned with the production access path.As per coding guidelines, "Mock Recoil atoms via
useSharedAtoms(), not direct imports" and "Access atoms throughuseSharedAtoms()— never import atoms directly".🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateAzureControlPlane.test.tsx` around lines 10 - 30, The test harness is importing Recoil atoms directly, which violates the shared-atom access pattern. Update CreateAzureControlPlane.test.tsx to seed managedClusterAddonsState and multiClusterEnginesState through useSharedAtoms() instead of importing from ../../../../../atoms, keeping the RecoilRoot setup in sync with the production access path while preserving the existing mockManagedClusterAddOn and mockMultiClusterEngine fixtures.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateCluster/components/assisted-installer/hypershift/HypershiftAzureCLI.test.tsx`:
- Around line 24-40: The HypershiftAzureCLI component test currently verifies
rendered content but is missing the required accessibility check. Update the
existing test in HypershiftAzureCLI.test.tsx to capture the rendered container
from render(<Component />) and add the standard jest-axe assertion, using
axe(container) and expect(...).toHaveNoViolations(), so this component test
matches the frontend accessibility testing convention.
In
`@frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateCluster/components/assisted-installer/hypershift/HypershiftAzureCLI.tsx`:
- Around line 228-234: The shared header in DocPage is still using the default
AWS “learn more” link, so the new Azure hypershift page shows the wrong docs.
Update HypershiftAzureCLI to pass an Azure-specific documentation link into
DocPage instead of relying on the default titleHelp behavior when breadcrumbs
are present. If DocPage does not already accept a doc-link override, add a prop
for it and use that in the header logic, keeping the change localized to DocPage
and its call site.
In
`@frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateAzureControlPlane.test.tsx`:
- Around line 41-67: The new CreateAzureControlPlane component tests are missing
the required accessibility assertion, so update the test setup in
CreateAzureControlPlane.test.tsx to capture the rendered container and add a
jest-axe check with expect(await axe(container)).toHaveNoViolations() for the
Component render path. Make sure this is included alongside the existing Hosted
and standalone cases, using the same Component and render/test harness already
in the file.
---
Nitpick comments:
In
`@frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateAzureControlPlane.test.tsx`:
- Around line 10-30: The test harness is importing Recoil atoms directly, which
violates the shared-atom access pattern. Update CreateAzureControlPlane.test.tsx
to seed managedClusterAddonsState and multiClusterEnginesState through
useSharedAtoms() instead of importing from ../../../../../atoms, keeping the
RecoilRoot setup in sync with the production access path while preserving the
existing mockManagedClusterAddOn and mockMultiClusterEngine fixtures.
In
`@frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateAzureControlPlane.tsx`:
- Around line 67-73: The alert CTA in CreateAzureControlPlane currently uses a
raw anchor instead of a PatternFly component. Update the alertContent rendering
to use a PatternFly link-style component from `@patternfly/react-core` for the
external docs action, and keep the ExternalLinkAltIcon from
`@patternfly/react-icons`. Preserve the existing href, target, rel, and translated
label, and make the change in the CreateAzureControlPlane alertContent block so
it matches the catalog UI conventions.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Enterprise
Run ID: af108205-00b3-4290-bc0f-61b5b3539135
⛔ Files ignored due to path filters (1)
frontend/public/locales/en/translation.jsonis excluded by!frontend/public/locales/**
📒 Files selected for processing (8)
frontend/src/NavigationPath.tsxfrontend/src/lib/doc-util.tsxfrontend/src/routes/Infrastructure/Clusters/Clusters.tsxfrontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateCluster/components/assisted-installer/hypershift/HypershiftAzureCLI.test.tsxfrontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateCluster/components/assisted-installer/hypershift/HypershiftAzureCLI.tsxfrontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateAzureControlPlane.test.tsxfrontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateAzureControlPlane.tsxfrontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateClusterCatalog.tsx
Signed-off-by: fxiang1 <fxiang@redhat.com>
|
|
PR needs rebase. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. |
1 participant
ACM-30521: Azure HCP cluster creation and control plane selection UI
Summary
Adds Azure Hosted Control Plane (HCP) cluster creation UI, similar to the existing AWS HCP implementation. When users click Azure in the infrastructure provider catalog, they now see a control plane type selection page (Hosted vs Standalone) instead of going directly to the standalone wizard.
Acceptance Criteria
/multicloud/infrastructure/clusters/create/aws/control-plane)/multicloud/infrastructure/clusters/create/aws/cli)Changes
NavigationPath.tsxcreateAzureControlPlaneandcreateAzureCLIpathsdoc-util.tsxHYPERSHIFT_DEPLOY_AZUREandHOSTED_ENABLE_FEATURE_AZUREplaceholder doc linksCreateClusterCatalog.tsxClusters.tsxCreateAzureControlPlane.tsxCreateAzureControlPlane.test.tsxHypershiftAzureCLI.tsxHypershiftAzureCLI.test.tsxtranslation.jsonAzure HCP CLI Steps
The CLI instructions page guides users through 7 steps:
hcp create cluster azurecommandTest Results
How to Test (Plugin Mode)
npm run pluginsOut of Scope
Summary by CodeRabbit