[Contextual Security][Fleet] Add Cloud Connector Edit Button and Management Flyout

[seanrathier]

Summary

This PR adds an inline edit button to the cloud connector selector dropdown and introduces a comprehensive management flyout, enabling users to view, edit, and track usage of their reusable cloud connectors directly from the integration setup flow. Includes new Fleet API endpoints to support usage tracking and connector updates.

closes https://github.com/elastic/security-team/issues/14608

Key Changes

1. Inline Edit Button in Selector

Added a pencil icon button next to the selected cloud connector option in the dropdown selector that opens a management flyout.

2. Cloud Connector Management Flyout

New CloudConnectorPoliciesFlyout component provides a comprehensive view of the selected connector.

Flyout Header:

• Connector name (editable in-place with validation)
• Provider identifier (AWS Role ARN or Azure Cloud Connector ID) with copy button
• Save button with loading states
• Real-time validation feedback

Flyout Body - Usage Tracking:

• Paginated table showing all integrations using this connector
• Columns: Name, Integration Type, Created Date, Last Updated Date
• Clickable integration names that navigate to their edit pages
• Empty, loading, and error states with appropriate messaging

3. New Fleet Cloud Connector APIs

Usage API - GET /api/fleet/cloud_connectors/{id}/usage

• Returns paginated list of package policies using the connector
• Query parameters: page and perPage
• Response includes integration details (name, package info, timestamps)

Update API - PUT /api/fleet/cloud_connectors/{id}

• Updates connector metadata (e.g., name)
• Validates updates and returns the updated connector object

4. Frontend API Integration Hooks

useCloudConnectorUsage - Fetches integration usage data with:

• Pagination support (default 10 items per page)
• Query caching with 1-minute stale time
• Previous data retention to prevent flashing during page transitions
• Automatic refetch disabled on window focus

useUpdateCloudConnector - Updates connector metadata with:

• Optimistic UI updates
• Automatic query invalidation for get-cloud-connectors and cloud-connector-usage
• Success/error toast notifications
• Optional callbacks for custom success/error handling

Checklist

Reviewers should verify this PR satisfies this list as well.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
• This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
• Flaky Test Runner was used on any tests changed
• The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
• Review the backport guidelines and apply applicable backport:* labels.

[Copilot]

Pull request overview

This PR enhances the cloud connector management experience by adding inline editing capabilities and a comprehensive management flyout to the integration setup flow. It introduces new Fleet API endpoints for tracking connector usage and updating connector metadata, along with corresponding React hooks and comprehensive test coverage.

Key Changes:

• Added an inline edit button to the cloud connector selector dropdown
• Created a management flyout component to view, edit, and track connector usage
• Implemented new Fleet API endpoints for usage tracking and connector updates

Reviewed changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
utils.ts	Added cloud connector name validation utilities with max length constant and validation functions
utils.test.ts	Comprehensive test coverage for name validation functions including edge cases
use_update_cloud_connector.ts	New React hook for updating cloud connector metadata with optimistic updates and notifications
use_cloud_connector_usage.ts	New React hook for fetching paginated connector usage data
use_cloud_connector_usage.test.ts	Test coverage for usage hook including error and edge cases
use_cloud_connector_setup.ts	Refactored to use shared name validation utility
use_cloud_connector_setup.test.ts	Updated mock to include new validation function
cloud_connector_selector.tsx	Added edit button with flyout integration and state management
cloud_connector_selector.test.tsx	Simplified tests focused on new flyout functionality
cloud_connector_name_field.tsx	Refactored to use shared validation utilities and added test subject support
cloud_connector_policies_flyout/index.tsx	New flyout component with name editing, usage table, and pagination
cloud_connector_policies_flyout/index.test.tsx	Comprehensive test coverage for flyout functionality
test_subjects.ts	Added test subjects for new flyout and edit button components
rest_spec/cloud_connector.ts	Added request/response schemas for usage API endpoint
cloud_connector/index.ts	Registered new usage API route with versioning
cloud_connector/handlers.ts	Implemented usage handler that queries package policies by connector ID
cloud_connector.ts (types)	Added TypeScript interfaces for usage response data
routes.ts	Added usage endpoint pattern to route constants
bundle.serverless.json	Generated OAS documentation for new usage endpoint
bundle.json	Generated OAS documentation for new usage endpoint

Comments suppressed due to low confidence (1)

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/components/fleet_extensions/cloud_connector/cloud_connector_policies_flyout/index.tsx:1

• Using as any type assertions bypasses TypeScript's type safety. The cloudConnectorVars prop is typed as Record<string, any> but could be properly typed based on the provider. Consider using a discriminated union type or proper type guards to avoid unsafe type assertions.

/*

[elasticmachine]

Pinging @elastic/contextual-security-apps (Team:Cloud Security)

[elasticmachine]

Pinging @elastic/fleet (Team:Fleet)

[elasticmachine]

⏳ Build in-progress

• Buildkite Build
• Commit: 2c220f3
• Cloud Deployment
• Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-244542-2c220f3dfa6b
• Security Deployment

Failed CI Steps

• FTR Configs #52

Test Failures

• [job] [logs] FTR Configs #52 / cases security and spaces enabled: trial Common migrations migrations 8.0 id migration awesome space "before all" hook in "awesome space"

History

• 💔 Build #368772 failed c03e6fb
• 💔 Build #368761 failed 0f64068
• 💔 Build #368727 failed 4059a75
• 💔 Build #368721 failed dd90ca1

cc @seanrathier