Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat: support collapse/expand all files in multiDiffEditor #4531

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
May 12, 2025
Merged

feat: support collapse/expand all files in multiDiffEditor #4531

merged 1 commit into from
May 12, 2025

Conversation

ensorrow
Copy link
Contributor

@ensorrow ensorrow commented May 9, 2025 •
edited by coderabbitai bot
Loading

Types

  • 🎉 New Features

Background or solution

feat: support collapse/expand all files in multiDiffEditor

Changelog

feat: support collapse/expand all files in multiDiffEditor

Summary by CodeRabbit

  • 新功能
    • 多文件对比编辑器新增“一键折叠全部文件”和“一键展开全部文件”操作按钮，可在编辑器标题栏使用。
  • 本地化
    • 新增对“折叠全部文件”和“展开全部文件”操作的中英文支持。
  • 优化
    • 多文件对比编辑器在切换和关闭时，相关状态管理更加准确，提升了操作体验。

@opensumi opensumi bot added the 🎨 feature feature required label May 9, 2025
@ensorrow
Copy link
Contributor Author

ensorrow commented May 9, 2025

/next

@coderabbitai coderabbitai
Copy link
Contributor

coderabbitai bot commented May 9, 2025

Walkthrough

本次更改为多文件差异编辑器（multi-diff editor）引入了“全部折叠”和“全部展开”功能，包括命令、菜单项、上下文感知、接口扩展及本地化支持。主要涉及多文件差异编辑器的命令注册、菜单显示、状态管理和相关接口方法的实现。

Changes

文件/分组 变更摘要
packages/core-browser/src/common/common.command.ts 新增 MULTI_DIFF_EDITOR_COMMANDS 命名空间，定义了 COLLAPSE_FILES 和 EXPAND_FILES 两个多文件差异编辑器相关命令。
packages/editor/src/browser/editor.view.tsx 移除了 ResizeObserver 回调中对 observer.disconnect() 的即时调用，改为在 effect 清理阶段断开连接。
packages/editor/src/browser/multi-diff/multi-diff-editor.ts BrowserMultiDiffEditor 类新增 collapseAll() 和 expandAll() 公共方法，实现全部折叠/展开功能。
packages/editor/src/browser/multi-diff/multi-diff.contribution.ts MultiDiffEditorContribution 类实现了 MenuContribution 和 CommandContribution 接口，注册了相关命令和菜单项，并注入了 WorkbenchEditorService。
packages/editor/src/browser/workbench-editor.service.ts EditorGroup 类增加了 _isInMultiDiffEditorContextKey 上下文键及 isMultiDiffEditorMode() 方法，用于追踪和判断当前是否为多文件差异编辑器模式。
packages/editor/src/common/editor.ts IEditorGroup 接口新增 multiDiffEditor: IMultiDiffEditor 属性。
packages/editor/src/common/multi-diff.ts IMultiDiffEditor 接口新增 collapseAll() 和 expandAll() 方法。
packages/i18n/src/common/en-US.lang.ts
packages/i18n/src/common/zh-CN.lang.ts		 新增多文件差异编辑器“全部折叠文件”和“全部展开文件”相关的中英文本地化字符串。

Sequence Diagram(s)

sequenceDiagram
    participant 用户
    participant 菜单/命令
    participant WorkbenchEditorService
    participant MultiDiffEditor
    用户->>菜单/命令: 选择“全部折叠”或“全部展开”
    菜单/命令->>WorkbenchEditorService: 获取当前 EditorGroup
    WorkbenchEditorService->>MultiDiffEditor: 调用 collapseAll()/expandAll()
    MultiDiffEditor->>MultiDiffEditor: 更新所有 diff 条目的 collapsed 状态
Loading

Suggested labels

🎨 feature

Suggested reviewers

  • life2015
  • Ricbet

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

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

yarn install v1.22.22
[1/4] Resolving packages...
warning [email protected]: This version is no longer supported. Please see https://eslint.org/version-support for other options.
warning eslint > @humanwhocodes/[email protected]: Use @eslint/config-array instead
warning eslint > @humanwhocodes/config-array > @humanwhocodes/[email protected]: Use @eslint/object-schema instead
warning eslint > file-entry-cache > flat-cache > [email protected]: Rimraf versions prior to v4 are no longer supported
warning eslint > file-entry-cache > flat-cache > rimraf > [email protected]: Glob versions prior to v9 are no longer supported
warning eslint > file-entry-cache > flat-cache > rimraf > glob > [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
warning eslint-import-resolver-typescript > [email protected]: Glob versions prior to v9 are no longer supported
error Couldn't find any versions for "@opensumi/ide-dev-tool" that matches "workspace:*"
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Tip

⚡️ Faster reviews with caching
  • CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.

Enjoy the performance boost—your workflow just got faster.

📜 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 fb82396 and 2fa47d2.

📒 Files selected for processing (9)
  • packages/core-browser/src/common/common.command.ts (1 hunks)
  • packages/editor/src/browser/editor.view.tsx (0 hunks)
  • packages/editor/src/browser/multi-diff/multi-diff-editor.ts (3 hunks)
  • packages/editor/src/browser/multi-diff/multi-diff.contribution.ts (4 hunks)
  • packages/editor/src/browser/workbench-editor.service.ts (4 hunks)
  • packages/editor/src/common/editor.ts (1 hunks)
  • packages/editor/src/common/multi-diff.ts (1 hunks)
  • packages/i18n/src/common/en-US.lang.ts (1 hunks)
  • packages/i18n/src/common/zh-CN.lang.ts (1 hunks)
💤 Files with no reviewable changes (1)
  • packages/editor/src/browser/editor.view.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/editor/src/common/editor.ts (1)
packages/editor/src/common/multi-diff.ts (1)
  • IMultiDiffEditor (57-97)
⏰ Context from checks skipped due to timeout of 90000ms (9)
  • GitHub Check: 🚀🚀🚀 Next Version for pull request
  • GitHub Check: build-windows
  • GitHub Check: unittest (ubuntu-latest, 18.x, node)
  • GitHub Check: build (ubuntu-latest, 20.x)
  • GitHub Check: build (macos-latest, 20.x)
  • GitHub Check: unittest (ubuntu-latest, 18.x, jsdom)
  • GitHub Check: ubuntu-latest, Node.js 20.x
  • GitHub Check: unittest (macos-latest, 18.x, jsdom)
  • GitHub Check: unittest (macos-latest, 18.x, node)
🔇 Additional comments (16)
packages/editor/src/common/editor.ts (1)

418-421: 代码变更看起来不错！

向 IEditorGroup 接口添加 multiDiffEditor 属性，与现有的 codeEditor 和 diffEditor 属性保持一致的模式。注释清晰地说明了该属性的用途。

packages/editor/src/common/multi-diff.ts (1)

87-96: 很好的接口扩展！

添加了 collapseAll() 和 expandAll() 方法，为多文件差异编辑器提供了折叠和展开所有文件的功能。方法签名简洁明了，注释清晰地描述了它们的功能。

packages/i18n/src/common/zh-CN.lang.ts (1)

1160-1161: 本地化项添加正确

为多文件差异编辑器的新功能添加了中文翻译，翻译内容准确且与系统其他类似功能的翻译风格一致（如比较第 51 行的 'file.action.collapse': '全部折叠'）。

packages/i18n/src/common/en-US.lang.ts (1)

981-982: 新增的多文件差异编辑器折叠/展开文本标签正确实现

新增的本地化条目为多文件差异编辑器的折叠和展开功能提供了清晰的文本标签，与系统其他部分保持一致的风格。

packages/core-browser/src/common/common.command.ts (1)

720-732: 命令定义结构清晰，符合项目惯例

新增的 MULTI_DIFF_EDITOR_COMMANDS 命名空间及其命令定义遵循了项目的命名和结构规范，便于集成到命令系统中。命令 ID 和类别设置合理。

packages/editor/src/browser/multi-diff/multi-diff-editor.ts (3)

3-3: 已正确更新导入

添加了 ISelection 接口的导入，这是新增的折叠/展开功能所需的。

14-14: 已正确添加 ISelection 导入

从 Monaco 编辑器核心导入了 ISelection 接口，这是实现折叠/展开功能时保留选择状态所必需的。

224-276: 折叠和展开功能实现良好

collapseAll 和 expandAll 方法通过修改视图状态来实现所有差异条目的折叠和展开功能，同时保留了选择状态等其他属性。这种实现方式非常干净，同时：

  1. 保留了现有的选择状态（selections）
  2. 仅修改了需要更改的属性（collapsed）
  3. 使用了不可变的方式创建新状态
  4. 有良好的类型定义和注释
packages/editor/src/browser/workbench-editor.service.ts (3)

813-814: 添加了新的上下文键以支持多文件差异编辑器模式检测

这个添加的私有上下文键 _isInMultiDiffEditorContextKey 将用于追踪当前编辑器组是否处于多文件差异编辑器模式。这是支持后续菜单项条件显示的基础。

2332-2334: 添加了多文件差异编辑器模式的检测方法

这个新增的 isMultiDiffEditorMode() 方法用于检查当前打开类型是否为 multiDiff，与其他现有的模式检测方法（如 isDiffEditorMode()）保持一致的风格。

1009-1009: 在上下文键设置中应用多文件差异编辑器模式

这行代码更新了 setContextKeys() 方法，设置新增的 _isInMultiDiffEditorContextKey 上下文键值，确保它能正确反映当前编辑器的状态。

packages/editor/src/browser/multi-diff/multi-diff.contribution.ts (5)

2-12: 更新导入以支持命令和菜单功能

导入了必要的命令和菜单相关的类型和服务，包括新增的 MULTI_DIFF_EDITOR_COMMANDS 常量，用于实现折叠/展开所有文件功能。

25-28: 扩展贡献类以实现命令和菜单接口

通过更新 @Domain 装饰器并实现 MenuContribution 和 CommandContribution 接口，使 MultiDiffEditorContribution 类能够注册命令和菜单项。这是实现新功能的必要步骤。

38-40: 注入工作台编辑器服务

添加了 WorkbenchEditorService 的依赖注入，使贡献类能够访问当前编辑器组和多文件差异编辑器实例，从而执行折叠/展开操作。

76-93: 实现命令注册方法

注册了两个新命令：COLLAPSE_FILES 和 EXPAND_FILES，它们分别调用多文件差异编辑器的 collapseAll() 和 expandAll() 方法。命令实现正确地检查了当前编辑器类型，确保只在多文件差异编辑器模式下执行操作。

95-119: 实现菜单注册方法

在编辑器标题菜单中注册了两个新菜单项，分别对应折叠和展开所有文件的命令。使用 when: 'isInMultiDiffEditor' 条件确保这些菜单项只在多文件差异编辑器活动时显示。菜单项使用了适当的图标并分组在 'navigation' 组中。

注意：有一个 TODO 注释提到需要通过更精细的事件判断当前视图状态是否已经全部折叠，这可能是未来的改进点。

可以考虑在将来实现这个 TODO，通过检查当前所有文件的折叠状态来动态启用/禁用相应的按钮，提高用户体验。这可能需要在 BrowserMultiDiffEditor 类中添加 isAllCollapsed() 和 isAllExpanded() 方法。

✨ Finishing Touches
  • 📝 Generate Docstrings

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.
    • Generate unit testing code for this file.
    • 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 generate unit testing code for this file.
    • @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 generate unit testing code.
    • @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 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.

@opensumi
Copy link
Contributor

opensumi bot commented May 9, 2025

🎉 PR Next publish successful!

3.8.3-next-1746775533.0

@codecov Codecov
Copy link

codecov bot commented May 9, 2025 •
edited
Loading

Codecov Report

Attention: Patch coverage is 36.00000% with 16 lines in your changes missing coverage. Please review.

Project coverage is 52.89%. Comparing base (fb82396) to head (2fa47d2).
Report is 3 commits behind head on main.

Files with missing lines Patch % Lines
...editor/src/browser/multi-diff/multi-diff-editor.ts 5.88% 16 Missing ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##             main    #4531      +/-   ##
==========================================
- Coverage   52.89%   52.89%   -0.01%     
==========================================
  Files        1677     1677              
  Lines      103326   103350      +24     
  Branches    22387    22383       -4     
==========================================
+ Hits        54659    54667       +8     
- Misses      40488    40504      +16     
  Partials     8179     8179
Flag Coverage Δ
jsdom 48.40% <36.00%> (-0.01%) ⬇️
node 12.06% <0.00%> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@ensorrow ensorrow merged commit ffa44be into main May 12, 2025
17 of 18 checks passed
@ensorrow ensorrow deleted the feat/multidiff-toggle-all branch May 12, 2025 06:44
@erha19 erha19 mentioned this pull request May 20, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@erha19 erha19 erha19 approved these changes

@Ricbet Ricbet Ricbet approved these changes

@hacke2 hacke2 Awaiting requested review from hacke2

@bk1012 bk1012 Awaiting requested review from bk1012

@life2015 life2015 Awaiting requested review from life2015

@Aaaaash Aaaaash Awaiting requested review from Aaaaash

Assignees
No one assigned
Labels
🎨 feature feature required
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@ensorrow @erha19 @Ricbet