feat: 增加blame插件

guqiankun.gqk · guqiankun.gqk · commit 50d6e081e7b8 · 2022-02-07T11:58:13.000+08:00
diff --git a/package.json b/package.json
@@ -153,6 +153,11 @@
       "publisher": "cloud-ide-ext",
       "name": "antcode-scaning",
       "version": "0.0.8"
+    },
+    {
+      "publisher": "cloud-ide-ext",
+      "name": "acr-editor-blame",
+      "version": "0.0.1"
     }
   ]
 }
diff --git a/packages/integrations/src/antcode-cr/antcode/repo.service.ts b/packages/integrations/src/antcode-cr/antcode/repo.service.ts
@@ -0,0 +1,50 @@
+import { apiService } from './api.service';
+import { FileWithCommit, TreeEntry } from './types/file';
+import { Blame } from './types/commit';
+
+export const repoService = {
+  async getFileList(projectId: number, refName: string, path: string, withCommit?: boolean) {
+    return (await apiService.get(`/webapi/projects/${projectId}/repository/tree`, {
+      refName,
+      path,
+      withCommit,
+    })) as FileWithCommit[];
+  },
+
+  async getTreeEntry(projectId: number, refName: string, path: string) {
+    return (await apiService.get(`/api/v3/projects/${projectId}/repository/tree_entry`, {
+      refName,
+      path,
+    })) as TreeEntry;
+  },
+
+  async getFileDetail(projectId: number, ref: string, filepath: string, charsetName?: string) {
+    return await apiService.get(
+      `/api/v3/projects/${projectId}/repository/blobs/${encodeURIComponent(ref)}`,
+      {
+        filepath,
+        charsetName,
+      },
+      {
+        disableResponseConvert: true,
+        getOriginalResponse: true,
+      }
+    );
+  },
+
+  async getCodeSymbols(projectId: number, ref: string, filepath: string) {
+    return await apiService.get(
+      `/api/v3/projects/${projectId}/repository/file_symbols/${encodeURIComponent(ref)}/`,
+      {
+        filepath,
+      }
+    );
+  },
+
+  async getCodeBlame(projectId: number, sha: string, filePath: string) {
+    return (await apiService.get(`/api/v3/projects/${projectId}/repository/blame`, {
+      sha,
+      filePath,
+    })) as Blame[];
+  },
+};
diff --git a/packages/integrations/src/antcode-cr/antcode/types/file.ts b/packages/integrations/src/antcode-cr/antcode/types/file.ts
@@ -0,0 +1,41 @@
+import { Commit } from './commit';
+
+export enum FileListType {
+  tree = 'tree',
+  blob = 'blob',
+  commit = 'commit',
+}
+
+export interface File {
+  id: string;
+  mode: string;
+  name: string;
+  path: string;
+  type: FileListType;
+  url?: string;
+}
+
+export interface FileWithCommit extends File {
+  commit?: Commit;
+}
+
+export interface FileDetail {
+  charsetName: string;
+  content: string;
+  fileName: string;
+  filePath: string;
+  highlightedContent: string;
+  ref: string;
+  size: number;
+}
+
+export interface TreeEntry extends File {
+  size: number;
+  render: string;
+}
+
+export enum FileShowType {
+  text = 'text',
+  image = 'image',
+  download = 'download',
+}
diff --git a/packages/integrations/src/antcode-cr/index.tsx b/packages/integrations/src/antcode-cr/index.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Button, Switch } from 'antd';
 import 'antd/dist/antd.css';
+import type { CheckboxChangeEvent } from 'antd/lib/checkbox';
 
 import AntcodeCR from '@alipay/alex-acr';
 import { IAntcodeCRProps } from '@alipay/alex-acr/lib/modules/antcode-service/base';
@@ -20,12 +21,15 @@ import {
 } from './antcode/components';
 import { projectService } from './antcode/project.service';
 import { lsifService } from './antcode/lsif.service';
+import { repoService } from './antcode/repo.service';
 import { FileActionHeader, FileAction } from './antcode/types/file-action';
 import { useFileReadMarkChange$ } from './hooks';
 import { useLoadLocalExtensionMetadata } from '../common/local-extension.module';
 import acrPlugin from '../common/plugin';
+import CodeBlamePlugin, { ExtensionCommand } from '../common/code-blame.plugin';
 import CodeScaningPlugin from '../common/code-scaning.plugin';
 import CodeScaning from '@alipay/alex/extensions/cloud-ide-ext.antcode-scaning';
+import CodeBlame from '@alipay/alex/extensions/cloud-ide-ext.acr-editor-blame';
 import { mockService } from './antcode/mock.service';
 import './style.less';
 
@@ -78,6 +82,29 @@ const App = () => {
     CodeScaningPlugin.commands?.executeCommand('antcode-cr.update', 'annotations', annotationPacks);
   }, [annotationPacks]);
 
+  // 插件
+  const [pluginActivated, setPluginActivated] = useState(false);
+  const blamePlugin = useRef(
+    new CodeBlamePlugin(
+      () => setPluginActivated(true),
+      (commitId: string) =>
+        window.open(`/${project.namespace.path}/${project.path}/commit/${commitId}`),
+      (projectId, commitId, path) => repoService.getCodeBlame(projectId, commitId, path)
+    )
+  );
+
+  useEffect(() => {
+    if (!pluginActivated) {
+      return;
+    }
+    const projectData = {
+      projectId: project.id,
+      prevSha: diffsPack.fromVersion?.headCommitSha ?? diffsPack.toVersion.baseCommitSha,
+      nextSha: diffsPack.toVersion.headCommitSha,
+    };
+    blamePlugin.current.commands?.executeCommand(ExtensionCommand.setProjectData, projectData);
+  }, [pluginActivated, diffsPack]);
+
   // const extensionMetadata = useLoadLocalExtensionMetadata();
   // if (!extensionMetadata) return null;
   if (!diffsPack) return null;
@@ -156,8 +183,8 @@ const App = () => {
       staticServicePath: Uri.parse(window.location.href)
         .with({ path: path.join('/antcode', project.pathWithNamespace, 'raw') })
         .toString(),
-      plugins: [acrPlugin, CodeScaningPlugin],
-      extensionMetadata: [CodeScaning],
+      plugins: [acrPlugin, CodeScaningPlugin, blamePlugin.current],
+      extensionMetadata: [CodeScaning, CodeBlame],
       // extensionMetadata,
     },
   } as IAntcodeCRProps;
diff --git a/packages/integrations/src/antcode-cr/style.less b/packages/integrations/src/antcode-cr/style.less
@@ -1,3 +1,5 @@
+@c45: rgba(0, 0, 0, 0.45);
+@c85: rgba(0, 0, 0, 0.85);
 html, body, #main {
   overflow: visible;
 }
@@ -21,3 +23,26 @@ html, body, #main {
     margin-right: 8px;
   }
 }
+
+.monaco-editor-hover {
+  border: none !important;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  transform: translate(-20px, 0px);
+}
+
+.monaco-editor-hover-content .markdown-hover .hover-contents {
+  padding: 16px;
+  background: #fff;
+
+  h1 {
+    color: @c85;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  p {
+    color: @c45;
+  }
+}
+
diff --git a/packages/integrations/src/common/code-blame.plugin.ts b/packages/integrations/src/common/code-blame.plugin.ts
@@ -0,0 +1,73 @@
+import { IPluginModule, IPluginAPI } from '@alipay/alex/lib/editor';
+
+export enum ExtensionCommand {
+  toggleBlame = 'code.blame.toggleBlame',
+  linkToCommit = 'code.blame.linktocommit',
+  onActive = 'code.blame.extension.active',
+  setPerference = 'code.blame.setPerference',
+  setProjectData = 'code.blame.setProjectData',
+  getBlameData = 'code.blame.getBlameData',
+}
+
+export default class IDEPlugin implements IPluginModule {
+  commands: IPluginAPI['commands'];
+  onActivate: () => void;
+  linkToCommit: (commitId: string) => void;
+  getBlame: (projectId: number, commitId: string, path: string) => Promise<any>;
+
+  /**
+   * 插件 ID，用于唯一标识插件
+   */
+  PLUGIN_ID = 'ACR_BLAME';
+
+  constructor(
+    onActive: () => void,
+    linkToCommit: (commitId: string) => void,
+    getBlame: (projectId: number, commitId: string, path: string) => Promise<any>
+  ) {
+    this.onActivate = onActive;
+    this.linkToCommit = linkToCommit;
+    this.getBlame = getBlame;
+  }
+
+  /**
+   * 激活插件
+   */
+  activate = (ctx: IPluginAPI) => {
+    const { commands, context } = ctx;
+    this.commands = commands;
+    context.subscriptions.push(
+      commands.registerCommand(ExtensionCommand.onActive, () => {
+        this.onActivate();
+      }),
+      commands.registerCommand(ExtensionCommand.linkToCommit, (params) => {
+        const { commitId } = params;
+        this.linkToCommit(commitId);
+      }),
+      commands.registerCommand(ExtensionCommand.getBlameData, async (sendData) => {
+        const { projectId, prevSha, nextSha, filePath } = sendData;
+        //  kaitian内uri 和 antcode内不同 多了一个 /
+        const path = filePath.startsWith('/') ? filePath.slice(1) : filePath;
+        const response = await this.getBlame(projectId, nextSha, path).then((res) => {
+          return res;
+        });
+        return response;
+      })
+    );
+  };
+
+  /**
+   * 注销插件，可在此时机清理副作用
+   */
+  deactivate() {}
+
+  /**
+   * 修改配置项
+   * @param name 配置项名称
+   * @param value 值
+   * @param global 是否全局生效
+   */
+  setPerference(name: string, value: string, global?: boolean) {
+    this.commands.executeCommand(ExtensionCommand.setPerference, name, value, !!global);
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -153,6 +153,11 @@`
`153`	`153`	`"publisher": "cloud-ide-ext",`
`154`	`154`	`"name": "antcode-scaning",`
`155`	`155`	`"version": "0.0.8"`
	`156`	`+ },`
	`157`	`+ {`
	`158`	`+ "publisher": "cloud-ide-ext",`
	`159`	`+ "name": "acr-editor-blame",`
	`160`	`+ "version": "0.0.1"`
`156`	`161`	`}`
`157`	`162`	`]`
`158`	`163`	`}`