Merge pull request cangzhang#7 from cangzhang/feat/mr-detail

uniquemo · web-flow · commit e9c04c7f18d1 · 2020-11-20T17:59:48.000+08:00
feat: complete mr detail webview logic
diff --git a/package.json b/package.json
@@ -12,17 +12,25 @@
   ],
   "main": "./out/extension",
   "activationEvents": [
-    "onCommand:codingPlugin.helloWorld",
+    "onCustomEditor:customEditor.mrDetail",
     "onView:codingPlugin.treeMR",
     "onView:codingPlugin.treeDepot",
     "onView:codingPlugin.webview"
   ],
   "contributes": {
-    "commands": [
+    "customEditors": [
       {
-        "command": "codingPlugin.helloWorld",
-        "title": "Hello World"
-      },
+        "viewType": "customEditor.mrDetail",
+        "displayName": "MR Detail",
+        "selector": [
+          {
+            "fileNamePattern": "hosts"
+          }
+        ],
+        "priority": "default"
+      }
+    ],
+    "commands": [
       {
         "command": "codingPlugin.mrTreeItemClick",
         "title": "Click MR Tree Item"
@@ -37,16 +45,6 @@
       }
     ],
     "menus": {
-      "editor/context": [
-        {
-          "command": "codingPlugin.helloWorld",
-          "group": "z_commands",
-          "when": "editorTextFocus"
-        },
-        {
-          "group": "z_commands"
-        }
-      ],
       "view/item/context": [
         {
           "command": "codingPlugin.createDepot",
diff --git a/src/customEditors/mergeRequest.ts b/src/customEditors/mergeRequest.ts
@@ -0,0 +1,102 @@
+import hx from 'hbuilderx';
+import path from 'path';
+import toast from '../utils/toast';
+
+interface IMessage {
+  command: string;
+  data: any;
+}
+
+const { CustomDocument, CustomEditorProvider } = hx.CustomEditor;
+
+class MRCustomDocument extends CustomDocument {
+  constructor(uri: string) {
+    super(uri);
+  }
+
+  dispose() {
+    super.dispose();
+  }
+}
+
+export default class MRCustomEditorProvider extends CustomEditorProvider {
+  constructor(context: any) {
+    super();
+    this.context = context;
+    this.panel = null;
+  }
+
+  listen(webViewPanel: IWebviewPanel) {
+    webViewPanel.webView.onDidReceiveMessage((message: IMessage) => {
+      console.log('webview receive message => ', message);
+      const { command, data } = message;
+
+      switch (command) {
+        case 'webview.mrDetail':
+          hx.env.openExternal(data);
+          break;
+        case 'webview.toast':
+          toast.error(data);
+          break;
+        default:
+          hx.commands.executeCommand(command);
+          return;
+      }
+    });
+
+    webViewPanel.onDidDispose(function () {
+      console.log('custom editor disposed');
+    });
+  }
+
+  update(data: any) {
+    if (!this.panel) {
+      setTimeout(() => {
+        this.update(data);
+      }, 500);
+      return;
+    }
+    const webview = this.panel?.webView;
+    const fileInfo = hx.Uri.file(path.resolve(__dirname, '../../out/webviews/main.js'));
+
+    const config = hx.workspace.getConfiguration();
+    const colorScheme = config.get('editor.colorScheme');
+
+    const COLORS: Record<string, string> = {
+      Monokai: 'themeDark',
+      'Atom One Dark': 'themeDarkBlue',
+      Default: 'themeLight',
+    };
+
+    webview.html = `
+      <html>
+        <body class='${COLORS[colorScheme]}'>
+          <div>
+            <div id='root'></div>
+          </div>
+          <script>
+            window.__CODING__ = '${JSON.stringify(data)}'
+          </script>
+          <script src='${fileInfo}'></script>
+        </body>
+      </html>
+    `;
+  }
+
+  openCustomDocument(uri: any) {
+    return Promise.resolve(new MRCustomDocument(uri));
+  }
+
+  resolveCustomEditor(document: any, webViewPanel: IWebviewPanel) {
+    this.panel = webViewPanel;
+    this.listen(webViewPanel);
+  }
+
+  saveCustomDocument(document: any) {
+    return true;
+  }
+
+  saveCustomDocumentAs(document: any, destination: any) {
+    return true;
+  }
+}
diff --git a/src/extension.ts b/src/extension.ts
@@ -1,25 +1,35 @@
 import init from './init';
-import WebviewProvider from './webview';
 import CodingServer from './services/codingServer';
+import WebviewProvider from './webviews';
 import ACTIONS, { dispatch } from './utils/actions';
 import { proxyCtx } from './utils/proxy';
 import toast from './utils/toast';
 import { readConfig } from './services/dcloud';
 
-const accessToken = '7e4d9d17f87875e731d536d13635a700ddf52b12';
+// const accessToken = '7e4d9d17f87875e731d536d13635a700ddf52b12';
+// const user = {
+//   id: 8005956,
+//   avatar: 'https://coding-net-production-static-ci.codehub.cn/WM-TEXT-AVATAR-lvVeBfbGLtCPdcsAOPod.jpg',
+//   global_key: 'PDCOwrBjib',
+//   name: 'uniquemo',
+//   path: '/u/PDCOwrBjib',
+//   team: 'uniquemo',
+// };
+
+const accessToken = '6e15bbb9960810111c90086a6efc07a923dea5a3';
 const user = {
-  id: 8005956,
+  id: 8003868,
   avatar: 'https://coding-net-production-static-ci.codehub.cn/WM-TEXT-AVATAR-lvVeBfbGLtCPdcsAOPod.jpg',
-  global_key: 'PDCOwrBjib',
-  name: 'uniquemo',
-  path: '/u/PDCOwrBjib',
-  team: 'uniquemo',
+  global_key: 'dHzOCagiSb',
+  name: '莫泳欣',
+  path: '/u/dHzOCagiSb',
+  team: 'codingcorp',
 };
 
 async function activate(context: IContext) {
   // TODO: 认证，拿到用户信息
-
   const webviewProvider = new WebviewProvider();
+
   const repoInfo = await CodingServer.getRepoParams();
   console.log('repoInfo ==> ', repoInfo);
   const token = await readConfig(`token`);
diff --git a/src/init.ts b/src/init.ts
@@ -1,6 +1,7 @@
 import hx from 'hbuilderx';
 import DepotTreeDataProvider from './trees/depot';
 import MRTreeDataProvider from './trees/mr';
+import MRCustomEditorProvider from './customEditors/mergeRequest';
 
 import toast from './utils/toast';
 import ACTIONS, { dispatch } from './utils/actions';
@@ -10,23 +11,16 @@ import * as DCloudService from './services/dcloud';
 const { registerCommand } = hx.commands;
 
 export function registerCommands(context: IContext) {
-  const { codingServer, webviewProvider } = context;
-
-  context.subscriptions.push(
-    registerCommand('codingPlugin.helloWorld', () => {
-      toast.info('hello');
-    }),
-  );
+  const { codingServer } = context;
 
   context.subscriptions.push(
     registerCommand('codingPlugin.mrTreeItemClick', async function ([team, mrItem]: [string, IMRItem]) {
       const matchRes = mrItem.path.match(/\/p\/([^/]+)\/d\/([^/]+)\/git\/merge\/([0-9]+)/);
       if (matchRes) {
         const [, project, repo, mergeRequestIId] = matchRes;
-        const result = await codingServer.getMrDetail({ team, project, repo, mergeRequestIId });
-        webviewProvider.update({
+        context.webviewProvider.update({
           session: codingServer.session,
-          mrItem: result,
+          mergeRequestIId,
           repoInfo: {
             team,
             project,
@@ -52,6 +46,12 @@ export function registerCommands(context: IContext) {
       const depot = await hx.window.showInputBox({
         prompt: '请输入仓库名',
       });
+
+      if (!depot) {
+        toast.warn('仓库名不能为空');
+        return;
+      }
+
       const team = codingServer.session?.user?.team;
       await codingServer.createDepot(team, depot, depot);
       toast.info('仓库创建成功');
@@ -91,6 +91,16 @@ export function clear(context: IContext) {
   context.subscriptions.forEach(({ dispose }) => dispose());
 }
 
+export function registerCustomEditors(context: IContext) {
+  const mrCustomEditor = new MRCustomEditorProvider(context);
+  hx.window.registerCustomEditorProvider('customEditor.mrDetail', mrCustomEditor);
+
+  dispatch(ACTIONS.SET_MR_CUSTOM_EDITOR, {
+    context,
+    value: mrCustomEditor,
+  });
+}
+
 async function initCredentials(context: IContext) {
   try {
     let hbToken = await DCloudService.readConfig(`hbToken`);
diff --git a/src/typings/common.ts b/src/typings/common.ts
@@ -27,6 +27,8 @@ export interface ISessionData {
 
 export interface IReviewer {
   reviewer: IUserInfo;
+  value: number;
+  volunteer: string;
 }
 
 export interface IMRItem {
diff --git a/src/typings/hbuilderx.d.ts b/src/typings/hbuilderx.d.ts
@@ -9,13 +9,15 @@ interface IContext {
   subscriptions: any[];
   ctx: {
     [key: string]: any;
-  },
+  };
   [key: string]: any;
 }
 
 interface IWebviewPanel {
   webView: any;
   postMessage: (message: any) => void;
+  onDidDispose: (cb: () => void) => void;
+  dispose: () => void;
 }
 
 interface ITreeItem {
diff --git a/src/utils/actions.ts b/src/utils/actions.ts
@@ -2,6 +2,7 @@ const enum ACTIONS {
   SET_DEPOTS = 'SET_DEPOTS',
   SET_SELECTED_DEPOT = 'SET_SELECTED_DEPOT',
   SET_CTX = 'SET_CTX',
+  SET_MR_CUSTOM_EDITOR = 'SET_MR_CUSTOM_EDITOR',
 }
 
 interface IPayload {
@@ -20,6 +21,9 @@ export const dispatch = (type: ACTIONS, { context, value }: IPayload) => {
     case ACTIONS.SET_CTX:
       context.ctx = value;
       break;
+    case ACTIONS.SET_MR_CUSTOM_EDITOR:
+      context.mrCustomEditor = value;
+      break;
     default:
       return;
   }
diff --git a/src/utils/mr.ts b/src/utils/mr.ts
@@ -1,3 +1,5 @@
+import hx from 'hbuilderx';
+import os from 'os';
 import { IRepoInfo, IDepot, IUserInfo } from '../typings/common';
 
 export const getMrListParams = (selectedDepot: IDepot, depots: IDepot[], user: IUserInfo): IRepoInfo | undefined => {
@@ -17,3 +19,21 @@ export const getMrListParams = (selectedDepot: IDepot, depots: IDepot[], user: I
     }
   }
 };
+
+export const getHostsPath = () => {
+  const operatingSystem = os.platform();
+  let file;
+  switch (operatingSystem) {
+    case 'win32':
+      break;
+    case 'darwin':
+    default:
+      file = '/etc/hosts';
+  }
+  return file;
+};
+
+export const openHosts = () => {
+  const hostsPath = getHostsPath();
+  hx.workspace.openTextDocument(hostsPath);
+};
diff --git a/src/webviews/index.ts b/src/webviews/index.ts
@@ -1,6 +1,6 @@
 import hx from 'hbuilderx';
 import path from 'path';
-import toast from './utils/toast';
+import toast from '../utils/toast';
 
 interface IMessage {
   command: string;
@@ -44,18 +44,29 @@ export default class WebviewProvider {
 
   update(data: any) {
     const webview = this.panel.webView;
-    const fileInfo = hx.Uri.file(path.resolve(__dirname, '../out/webviews/main.js'));
+    const fileInfo = hx.Uri.file(path.resolve(__dirname, '../../out/webviews/main.js'));
+
+    const config = hx.workspace.getConfiguration();
+    const colorScheme = config.get('editor.colorScheme');
+
+    const COLORS: Record<string, string> = {
+      Monokai: 'themeDark',
+      'Atom One Dark': 'themeDarkBlue',
+      Default: 'themeLight',
+    };
 
     webview.html = `
-      <body>
-        <div>
-          <div id='root'></div>
-        </div>
-        <script>
-          window.__CODING__ = '${JSON.stringify(data)}'
-        </script>
-        <script src='${fileInfo}'></script>
-      </body>
+      <html>
+        <body class='${COLORS[colorScheme]}'>
+          <div>
+            <div id='root'></div>
+          </div>
+          <script>
+            window.__CODING__ = '${JSON.stringify(data)}'
+          </script>
+          <script src='${fileInfo}'></script>
+        </body>
+      </html>
     `;
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -8,7 +8,6 @@ module.exports = {
     path: path.resolve(__dirname, 'out/webviews'),
     filename: '[name].js',
   },
-  // devtool: 'cheap-module-source-map',
   resolve: {
     extensions: ['.js', '.ts', '.tsx', '.json'],
   },
diff --git a/webviews/App.tsx b/webviews/App.tsx
diff --git a/webviews/services/index.ts b/webviews/services/index.ts
diff --git a/webviews/style.css b/webviews/style.css

Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,8 @@ export interface ISessionData {`
`27`	`27`
`28`	`28`	`export interface IReviewer {`
`29`	`29`	`reviewer: IUserInfo;`
	`30`	`+ value: number;`
	`31`	`+ volunteer: string;`
`30`	`32`	`}`
`31`	`33`
`32`	`34`	`export interface IMRItem {`