feat: add custom editor

uniquemo · uniquemo · commit f9ea52595692 · 2020-11-20T15:37:18.000+08:00
diff --git a/package.json b/package.json
@@ -21,9 +21,11 @@
       {
         "viewType": "customEditor.mrDetail",
         "displayName": "MR Detail",
-        "selector": [{
+        "selector": [
+          {
             "fileNamePattern": "hosts"
-        }],
+          }
+        ],
         "priority": "default"
       }
     ],
diff --git a/src/customEditors/mergeRequest.ts b/src/customEditors/mergeRequest.ts
@@ -26,8 +26,8 @@ export default class MRCustomEditorProvider extends CustomEditorProvider {
     this.panel = null;
   }
 
-  listen() {
-    this.panel.webView.onDidReceiveMessage((message: IMessage) => {
+  listen(webViewPanel: IWebviewPanel) {
+    webViewPanel.webView.onDidReceiveMessage((message: IMessage) => {
       console.log('webview receive message => ', message);
       const { command, data } = message;
 
@@ -44,25 +44,42 @@ export default class MRCustomEditorProvider extends CustomEditorProvider {
       }
     });
 
-    this.panel.onDidDispose(function () {
+    webViewPanel.onDidDispose(function () {
       console.log('custom editor disposed');
     });
   }
 
   update(data: any) {
-    const webview = this.panel.webView;
+    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 = `
-      <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>
     `;
   }
 
@@ -72,7 +89,7 @@ export default class MRCustomEditorProvider extends CustomEditorProvider {
 
   resolveCustomEditor(document: any, webViewPanel: IWebviewPanel) {
     this.panel = webViewPanel;
-    this.listen();
+    this.listen(webViewPanel);
   }
 
   saveCustomDocument(document: any) {
diff --git a/src/extension.ts b/src/extension.ts
@@ -4,14 +4,24 @@ import ACTIONS, { dispatch } from './utils/actions';
 import { proxyCtx } from './utils/proxy';
 import toast from './utils/toast';
 
-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) {
diff --git a/src/init.ts b/src/init.ts
@@ -19,10 +19,9 @@ export function registerCommands(context: IContext) {
       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 });
         context.mrCustomEditor.update({
           session: codingServer.session,
-          mrItem: result,
+          mergeRequestIId,
           repoInfo: {
             team,
             project,
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/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
@@ -1,7 +1,14 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import cn from 'classnames';
 
-import { closeMergeRequest, mergeMergeRequest, allowMerge } from './services';
+import {
+  getMergeRequestDetail,
+  closeMergeRequest,
+  mergeMergeRequest,
+  allowMerge,
+  disallowMerge,
+  getReviewers
+} from './services';
 import { MERGE_STATUS_TEXT, MERGE_STATUS } from './constants';
 import style from './style.css';
 
@@ -14,20 +21,58 @@ const toast = (msg: string) => {
 
 const App = () => {
   const data = JSON.parse(window.__CODING__);
-  const { session, mrItem, repoInfo } = data;
+  const { session, repoInfo, mergeRequestIId } = data;
   const { accessToken } = session;
   const user = session?.user;
   const team = user?.team;
 
-  const { can_merge: canMerge, merge_request: mergeRequest } = mrItem;
-  const { title, srcBranch, desBranch, author, merge_status: mergeStatus } = mergeRequest;
-  const url = `https://${team}.coding.net${mergeRequest.path}`;
-
   const [isClosing, setIsClosing] = useState(false);
   const [isMerging, setIsMerging] = useState(false);
   const [isAllowing, setIsAllowing] = useState(false);
-  const [mrStatus, setMrStatus] = useState(mergeStatus);
-  const [allowText, setAllowText] = useState('允许合并');
+  const [isDisAllowing, setIsDisAllowing] = useState(false);
+  const [mrStatus, setMrStatus] = useState<MERGE_STATUS>(MERGE_STATUS.CANMERGE);
+  const [mrDetail, setMrDetail] = useState();
+  const [reviewers, setReviewers] = useState<{ reviewers: any[], volunteer_reviewers: any[] }>({ reviewers: [], volunteer_reviewers: [] });
+
+  const index = reviewers.reviewers.findIndex((r) => r.reviewer.id === user.id);
+  let agreed = true;
+  if (index >= 0) {
+    agreed = reviewers.reviewers[index].value === 100;
+  } else {
+    agreed = reviewers.volunteer_reviewers.findIndex((r) => r.reviewer.id === user.id) >= 0;
+  }
+
+  const [isAgreed, setIsAgreed] = useState(agreed);
+
+  const getParams = () => ({
+    ...repoInfo,
+    mergeRequestIId
+  });
+
+  useEffect(() => {
+    const asyncFn = async () => {
+      const [detailRes, reviewersRes] = await Promise.all([
+        getMergeRequestDetail(accessToken, { ...getParams() }),
+        getReviewers(accessToken, { ...getParams() })
+      ]);
+
+      if (!reviewersRes.code) {
+        setReviewers(reviewersRes.data);
+      }
+
+      if (!detailRes.code) {
+        setMrDetail(detailRes.data);
+        setMrStatus(detailRes.data.merge_request.merge_status);
+      }
+    };
+    asyncFn();
+  }, []);
+
+  if (!mrDetail) return null;
+
+  const { can_merge: canMerge, merge_request: mergeRequest } = mrDetail as any;
+  const { title, srcBranch, desBranch, author, body } = mergeRequest;
+  const url = `https://${team}.coding.net${mergeRequest.path}`;
 
   const viewOnWeb = () => {
     window.hbuilderx.postMessage({
@@ -40,10 +85,7 @@ const App = () => {
     if (isClosing) return;
 
     setIsClosing(true);
-    const result = await closeMergeRequest(accessToken, {
-      ...repoInfo,
-      mergeRequestIId: mergeRequest.iid
-    });
+    const result = await closeMergeRequest(accessToken, { ...getParams() });
 
     if (!result.code) {
       setMrStatus(MERGE_STATUS.REFUSED);
@@ -59,8 +101,7 @@ const App = () => {
 
     setIsMerging(true);
     const result = await mergeMergeRequest(accessToken, {
-      ...repoInfo,
-      mergeRequestIId: mergeRequest.iid,
+      ...getParams(),
       message: `
         Accept Merge Request #${mergeRequest.iid}: (${srcBranch} -> ${desBranch})
         Merge Request: ${title}
@@ -83,20 +124,32 @@ const App = () => {
     if (isAllowing) return;
 
     setIsAllowing(true);
-    const result = await allowMerge(accessToken, {
-      ...repoInfo,
-      mergeRequestIId: mergeRequest.iid
-    });
+    const result = await allowMerge(accessToken, { ...getParams() });
 
     if (!result.code) {
-      setAllowText('已允许');
+      setIsAgreed(true);
     } else {
       toast('操作失败');
     }
 
     setIsAllowing(false);
   };
 
+  const handleDisAllowMerge = async () => {
+    if (isDisAllowing) return;
+
+    setIsDisAllowing(true);
+    const result = await disallowMerge(accessToken, { ...getParams() });
+
+    if (!result.code) {
+      setIsAgreed(false);
+    } else {
+      toast('操作失败');
+    }
+
+    setIsDisAllowing(false);
+  };
+
   const renderStatus = () => {
     const CNS = {
       [MERGE_STATUS.CANMERGE]: style.success,
@@ -106,6 +159,8 @@ const App = () => {
     return <span className={cn(style.status, CNS[mrStatus])}>{MERGE_STATUS_TEXT[mrStatus]}</span>;
   };
 
+  const renderActionText = (loading: boolean, text: string) => loading ? `${text}中...` : text;
+
   const showCloseBtn = (canMerge || user.id === mergeRequest.author.id) && mrStatus !== MERGE_STATUS.REFUSED && mrStatus !== MERGE_STATUS.ACCEPTED;
   const mrStatusOk = mrStatus === MERGE_STATUS.CANMERGE || mrStatus === MERGE_STATUS.CANNOTMERGE;
   const showMergeBtn = mrStatus === MERGE_STATUS.CANMERGE;
@@ -121,22 +176,34 @@ const App = () => {
       <div>{`将分支 ${srcBranch} 合并到分支 ${desBranch}`}</div>
       <div>创建人：{author.name}</div>
 
+      <h3>概览：</h3>
+      <div dangerouslySetInnerHTML={{ __html: body }} />
+
       <div className={style.btnGroup}>
         {showMergeBtn && (
           <div
             className={cn(style.btn, style.btnPrimary, isMerging && style.disabled)}
             onClick={handleMerge}
           >
-            {isMerging ? '合并中...' : '合并'}
+            {renderActionText(isMerging, '合并')}
           </div>
         )}
 
-        {showAllowMergeBtn && (
+        {showAllowMergeBtn && !isAgreed && (
           <div
             className={cn(style.btn, style.btnPrimary, isAllowing && style.disabled)}
             onClick={handleAllowMerge}
           >
-            {allowText}
+            {renderActionText(isAllowing, '允许合并')}
+          </div>
+        )}
+
+        {showAllowMergeBtn && isAgreed && (
+          <div
+            className={cn(style.btn, style.btnPrimary, isDisAllowing && style.disabled)}
+            onClick={handleDisAllowMerge}
+          >
+            {renderActionText(isDisAllowing, '撤销允许合并')}
           </div>
         )}
 
@@ -145,7 +212,7 @@ const App = () => {
             className={cn(style.btn, isClosing && style.disabled)}
             onClick={handleClose}
           >
-            {isClosing ? '关闭中...' : '关闭'}
+            {renderActionText(isClosing, '关闭')}
           </div>
         )}
       </div>
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
`@@ -21,9 +21,11 @@`
`21`	`21`	`{`
`22`	`22`	`"viewType": "customEditor.mrDetail",`
`23`	`23`	`"displayName": "MR Detail",`
`24`		`- "selector": [{`
	`24`	`+ "selector": [`
	`25`	`+ {`
`25`	`26`	`"fileNamePattern": "hosts"`
`26`		`- }],`
	`27`	`+ }`
	`28`	`+ ],`
`27`	`29`	`"priority": "default"`
`28`	`30`	`}`
`29`	`31`	`],`
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 {`