定制Backstage @backstage/plugin-github-actions插件视图的最佳实践

1. 优先使用官方插件的扩展点（Extension Points） #

Backstage的核心设计之一是插件可扩展性，多数官方插件会暴露Extension Point，允许外部插入自定义逻辑或UI。你可以先查看@backstage/plugin-github-actions的文档或源码，确认是否存在用于扩展实体页面按钮栏、内容区域的扩展点。

如果存在对应扩展点，只需在应用代码中注册扩展组件即可，无需修改原插件代码。例如，若插件允许在操作栏添加自定义按钮，可通过registerExtension方法注册你的view按钮组件，关联自定义业务逻辑。

2. 使用组件重写（Component Overrides）机制 #

Backstage支持通过ComponentOverride API替换插件中的特定组件，这是无需修改原插件代码就能定制UI的高效方式。

操作步骤： #

1. 在应用的packages/app/src/components/catalog/EntityPage.tsx中，找到GitHub Actions插件的路由配置。
2. 用ComponentOverride包裹原插件的页面组件，指定需要替换的子组件（如按钮栏组件），传入自定义组件：

import { ComponentOverride } from '@backstage/core-plugin-api';
import { GitHubActionsPage } from '@backstage/plugin-github-actions';
import CustomActionsToolbar from './CustomActionsToolbar';

// 在EntityLayout的路由配置中
<EntityLayout.Route path="/github-actions" title="GitHub Actions">
  <ComponentOverride
    component={GitHubActionsPage}
    overrides={{
      // 假设原插件中按钮栏组件的key是ActionsToolbar
      ActionsToolbar: CustomActionsToolbar,
    }}
  />
</EntityLayout.Route>

3. 实现CustomActionsToolbar组件：复用原组件逻辑（可通过props.children或直接导入原组件），添加view按钮：

import { OriginalActionsToolbar } from '@backstage/plugin-github-actions';

const CustomActionsToolbar = (props) => {
  return (
    <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
      <OriginalActionsToolbar {...props} />
      <button onClick={() => {/* 你的自定义逻辑 */}}>View</button>
    </div>
  );
};

export default CustomActionsToolbar;

3. 深度定制时采用Fork插件仓库的方式 #

如果插件没有提供足够的扩展点，必须修改核心逻辑，不要直接复制整个插件到本地仓库，而是fork官方插件仓库：

• 在fork的仓库中完成定制修改（比如添加view按钮）。
• 在Backstage应用的package.json中依赖这个fork的版本：

"@backstage/plugin-github-actions": "git+https://github.com/your-username/plugin-github-actions.git#your-custom-branch"

• 定期同步官方仓库的更新到你的fork，解决代码冲突，既能保留定制功能，又能跟进官方的bug修复和新特性。

4. 用高阶组件（HOC）增强现有组件 #

如果上述方式都不适用，可以用高阶组件包裹原插件的页面组件，在合适的位置插入view按钮：

import { GitHubActionsPage } from '@backstage/plugin-github-actions';

const EnhancedGitHubActionsPage = () => {
  return (
    <div>
      {/* 保留原插件的所有内容 */}
      <GitHubActionsPage />
      {/* 在合适的位置插入自定义按钮 */}
      <button style={{ position: 'fixed', bottom: '20px', right: '20px' }} onClick={() => {/* 你的逻辑 */}}>View</button>
    </div>
  );
};

// 然后在EntityLayout路由中使用EnhancedGitHubActionsPage代替原组件

内容的提问来源于stack exchange，提问作者Liam Nguyen