Description

This PR adds convenient operationId copying functionality to Swagger UI, providing users with two intuitive ways to copy operationId values:

1. Clickable operationId text - Users can directly click on the displayed operationId text to copy it to clipboard
2. Dedicated copy button - A new green copy button specifically for operationId, positioned next to the existing path copy button

Key Features:

• Visual feedback: Clickable operationId shows green background with checkmark (✓) when copied
• Auto-reset: Copy success state automatically resets after 2 seconds
• Color differentiation: Green copy button for operationId vs gray for path copying
• Conditional rendering: Only appears when displayOperationId is enabled and operationId exists
• Priority handling: Correctly prioritizes originalOperationId over operationId

UI/UX Improvements:

• Hover effects for better user interaction feedback
• Tooltip messages for clear functionality indication
• Seamless integration with existing UI components
• Responsive design that works across different screen sizes

Motivation and Context

Problem Statement

Currently, Swagger UI only provides a copy button for API paths, but developers frequently need to copy operationId values for:

• Code generation: Using operationId in client SDK generation tools
• Documentation: Referencing specific operations in technical documentation
• Testing: Writing automated tests that reference specific operations
• Integration: Connecting with other tools that use operationId as identifiers

User Pain Points

• Users had to manually select and copy operationId text, which is error-prone
• No visual indication that operationId text could be copied
• Inconsistent user experience compared to other copyable elements in the UI
• Time-consuming workflow when working with multiple operations

Solution Benefits

• Improved Developer Experience: Streamlines the workflow for developers working with OpenAPI specifications
• Reduced Errors: Eliminates manual text selection errors when copying operationId
• Consistency: Aligns with existing copy functionality patterns in Swagger UI
• Accessibility: Provides clear visual cues and feedback for copy actions
• Efficiency: Saves time when working with multiple API operations

Context

This enhancement is particularly valuable for:

• API developers using code generation tools
• Technical writers creating API documentation
• QA engineers writing automated tests
• DevOps teams integrating APIs with monitoring tools

How Has This Been Tested?

Testing Environment

• Node.js Version: 22.11.0
• Browser Testing: Chrome, Firefox, Safari, Edge (latest versions)
• API Specification: OpenAPI 3.0 Petstore example
• Configuration: displayOperationId: true enabled

Manual Testing Scenarios

1. Basic Functionality Testing

• ✅ Clickable operationId text: Verified clicking operationId text copies correct value to clipboard
• ✅ Copy button functionality: Confirmed green copy button successfully copies operationId
• ✅ Content verification: Tested that copied content matches expected operationId value
• ✅ Priority handling: Verified originalOperationId takes precedence over operationId when both exist

2. Visual Feedback Testing

• ✅ Click feedback: Confirmed green background and checkmark (✓) appear on successful copy
• ✅ Auto-reset: Verified visual feedback automatically resets after 2 seconds
• ✅ Hover effects: Tested hover states for both clickable text and copy button
• ✅ Color differentiation: Confirmed green button for operationId vs gray for path copying

3. Edge Cases and Error Handling

• ✅ Missing operationId: Verified components are hidden when operationId doesn't exist
• ✅ Disabled feature: Confirmed functionality is disabled when displayOperationId: false
• ✅ Empty values: Tested behavior with null/undefined operationId values
• ✅ Long operationId: Verified UI handles long operationId names gracefully

4. Integration Testing

• ✅ Component registration: Confirmed new components are properly registered in core plugins
• ✅ Existing functionality: Verified existing copy functionality remains unaffected
• ✅ Style conflicts: Tested for CSS conflicts with existing styles
• ✅ Responsive design: Verified functionality works on mobile and tablet viewports

5. Cross-browser Compatibility

• ✅ Chrome: Full functionality confirmed
• ✅ Firefox: Copy to clipboard and visual feedback working
• ✅ Safari: All features operational
• ✅ Edge: Complete functionality verified

Screenshots (if appropriate):

click green button to copy operationId easier.

Checklist

My PR contains...

• No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
• Dependency changes (any modification to dependencies in package.json)
• Bug fixes (non-breaking change which fixes an issue)
• Improvements (misc. changes to existing features)
• Features (non-breaking change which adds functionality)

My changes...

• are breaking changes to a public API (config options, System API, major UI change, etc).
• are breaking changes to a private API (Redux, component props, utility functions, etc.).
• are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
• are not breaking changes.

Documentation

• My changes do not require a change to the project documentation.
• My changes require a change to the project documentation.
• If yes to above: I have updated the documentation accordingly.

Automated tests

• My changes can not or do not need to be tested.
• My changes can and should be tested by unit and/or integration tests.
• If yes to above: I have added tests to cover my changes.
• If yes to above: I have taken care to cover edge cases in my tests.
• All new and existing tests passed.

描述

此 PR 为 Swagger UI 添加了便捷的 operationId 复制功能，为用户提供两种直观的复制 operationId 值的方式：

1. 可点击的 operationId 文本 - 用户可以直接点击显示的 operationId 文本将其复制到剪贴板
2. 专用复制按钮 - 专门用于 operationId 的新绿色复制按钮，位于现有路径复制按钮旁边

主要功能：

• 视觉反馈：可点击的 operationId 在复制时显示绿色背景和勾选标记 (✓)
• 自动重置：复制成功状态在 2 秒后自动重置
• 颜色区分：operationId 使用绿色复制按钮，路径复制使用灰色按钮
• 条件渲染：仅在启用 displayOperationId 且存在 operationId 时显示
• 优先级处理：正确优先使用 originalOperationId 而非 operationId

UI/UX 改进：

• 悬停效果提供更好的用户交互反馈
• 工具提示消息清晰指示功能
• 与现有 UI 组件无缝集成
• 响应式设计，适配不同屏幕尺寸

动机和背景

问题陈述

目前，Swagger UI 仅为 API 路径提供复制按钮，但开发者经常需要复制 operationId 值用于：

• 代码生成：在客户端 SDK 生成工具中使用 operationId
• 文档编写：在技术文档中引用特定操作
• 测试：编写引用特定操作的自动化测试
• 集成：与其他使用 operationId 作为标识符的工具连接

用户痛点

• 用户必须手动选择和复制 operationId 文本，容易出错
• 没有视觉提示表明 operationId 文本可以复制
• 与 UI 中其他可复制元素相比，用户体验不一致
• 处理多个操作时工作流程耗时

解决方案优势

• 改善开发者体验：简化使用 OpenAPI 规范的开发者工作流程
• 减少错误：消除复制 operationId 时的手动文本选择错误
• 一致性：与 Swagger UI 中现有的复制功能模式保持一致
• 可访问性：为复制操作提供清晰的视觉提示和反馈
• 效率：在处理多个 API 操作时节省时间

背景

此增强功能对以下用户特别有价值：

• 使用代码生成工具的 API 开发者
• 创建 API 文档的技术写作人员
• 编写自动化测试的 QA 工程师
• 将 API 与监控工具集成的 DevOps 团队

如何测试

测试环境

• Node.js 版本: 22.11.0
• 浏览器测试: Chrome、Firefox、Safari、Edge（最新版本）
• API 规范: OpenAPI 3.0 Petstore 示例
• 配置: 启用 displayOperationId: true

手动测试场景

1. 基本功能测试

• ✅ 可点击的 operationId 文本：验证点击 operationId 文本能正确复制值到剪贴板
• ✅ 复制按钮功能：确认绿色复制按钮成功复制 operationId
• ✅ 内容验证：测试复制的内容与预期的 operationId 值匹配
• ✅ 优先级处理：验证当两者都存在时，originalOperationId 优先于 operationId

2. 视觉反馈测试

• ✅ 点击反馈：确认成功复制时出现绿色背景和勾选标记 (✓)
• ✅ 自动重置：验证视觉反馈在 2 秒后自动重置
• ✅ 悬停效果：测试可点击文本和复制按钮的悬停状态
• ✅ 颜色区分：确认 operationId 使用绿色按钮，路径复制使用灰色按钮

3. 边界情况和错误处理

• ✅ 缺少 operationId：验证当 operationId 不存在时组件被隐藏
• ✅ 功能禁用：确认当 displayOperationId: false 时功能被禁用
• ✅ 空值：测试 null/undefined operationId 值的行为
• ✅ 长 operationId：验证 UI 优雅地处理长 operationId 名称

4. 集成测试

• ✅ 组件注册：确认新组件在核心插件中正确注册
• ✅ 现有功能：验证现有复制功能保持不受影响
• ✅ 样式冲突：测试与现有样式的 CSS 冲突
• ✅ 响应式设计：验证功能在移动端和平板视口上正常工作

5. 跨浏览器兼容性

• ✅ Chrome：确认完整功能
• ✅ Firefox：复制到剪贴板和视觉反馈正常工作
• ✅ Safari：所有功能正常运行
• ✅ Edge：验证完整功能