Merge pull request cangzhang#4 from cangzhang/feat/webview

feat: add mr detail webview ui

Author: uniquemo

package.json

@@ -68,7 +68,7 @@
       "rightside": [
         {
           "id": "WebviewContainerId",
-          "title": "WEBVIEW"
+          "title": "CODING 合并请求详情"
         }
       ]
     },
@@ -88,7 +88,7 @@
       "WebviewContainerId": [
         {
           "id": "codingPlugin.webview",
-          "title": "WEBVIEW"
+          "title": "CODING 合并请求详情"
         }
       ]
     }
@@ -116,12 +116,14 @@
   },
   "dependencies": {
     "axios": "^0.21.0",
+    "classnames": "^2.2.6",
     "isomorphic-git": "^1.8.0",
     "querystring": "^0.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.11",
     "@types/node": "^14.14.7",
     "@types/react": "^16.9.56",
     "@types/react-dom": "^16.9.9",

src/extension.ts

@@ -5,7 +5,7 @@ import ACTIONS, { dispatch } from './utils/actions';
 import { proxyCtx } from './utils/proxy';
 import toast from './utils/toast';
 
-const accessToken = '1b7fca3bd7594a89b0f5e2a0250c1147';
+const accessToken = '7e4d9d17f87875e731d536d13635a700ddf52b12';
 const user = {
   id: 8005956,
   avatar: 'https://coding-net-production-static-ci.codehub.cn/WM-TEXT-AVATAR-lvVeBfbGLtCPdcsAOPod.jpg',

src/init.ts

@@ -3,14 +3,13 @@ import DepotTreeDataProvider from './trees/depot';
 import MRTreeDataProvider from './trees/mr';
 
 import toast from './utils/toast';
-import { getMRUrl } from './utils/repo';
 import ACTIONS, { dispatch } from './utils/actions';
 import { IDepot, IMRItem } from './typings/common';
 
 const { registerCommand } = hx.commands;
 
 export function registerCommands(context: IContext) {
-  const { codingServer } = context;
+  const { codingServer, webviewProvider } = context;
 
   context.subscriptions.push(
     registerCommand('codingPlugin.helloWorld', () => {
@@ -20,7 +19,10 @@ export function registerCommands(context: IContext) {
 
   context.subscriptions.push(
     registerCommand('codingPlugin.mrTreeItemClick', function ([team, mrItem]: [string, IMRItem]) {
-      hx.env.openExternal(getMRUrl(team, mrItem));
+      webviewProvider.update({
+        team,
+        ...mrItem,
+      });
     }),
   );
 
@@ -40,8 +42,8 @@ export function registerCommands(context: IContext) {
         prompt: '请输入仓库名',
       });
       const team = codingServer.session?.user?.team;
-      const result = await codingServer.createDepot(team, depot, depot);
-      // TODO: 拉取代码，更新workspace
+      await codingServer.createDepot(team, depot, depot);
+      toast.info('仓库创建成功');
     }),
   );
 }

src/services/codingServer.ts

@@ -24,9 +24,9 @@ export default class CodingServer {
     return this._session;
   }
 
-  get repo() {
-    return this._repo;
-  }
+  getHeaders = (token?: string) => ({
+    Authorization: `token ${token || this._session.accessToken}`,
+  });
 
   static async getRepoParams() {
     const folders = await hx.workspace.getWorkspaceFolders();
@@ -49,9 +49,7 @@ export default class CodingServer {
       const result = await axios({
         method: 'get',
         url: `https://${team}.coding.net/api/current_user`,
-        params: {
-          access_token: token,
-        },
+        headers: this.getHeaders(),
       });
 
       return result?.data;
@@ -66,13 +64,13 @@ export default class CodingServer {
       const result = await axios({
         method: 'get',
         url,
+        headers: this.getHeaders(),
         params: {
           status: `open`,
           sort: `action_at`,
           page: 1,
           PageSize: 100,
           sortDirection: `DESC`,
-          access_token: this._session.accessToken,
         },
       });
       return result?.data?.list || [];
@@ -87,9 +85,7 @@ export default class CodingServer {
       const result = await axios({
         method: 'get',
         url: `https://${team}.coding.net/api/user/${team}/project/${project}/repos`,
-        params: {
-          access_token: this._session.accessToken,
-        },
+        headers: this.getHeaders(),
       });
 
       return result?.data?.depots || [];
@@ -102,7 +98,8 @@ export default class CodingServer {
     try {
       const result = await axios({
         method: 'post',
-        url: `https://${team}.coding.net/api/team/${team}/template-project?access_token=${this._session.accessToken}`,
+        url: `https://${team}.coding.net/api/team/${team}/template-project`,
+        headers: this.getHeaders(),
         data: {
           name: project,
           displayName: project,
@@ -123,9 +120,10 @@ export default class CodingServer {
 
       const result = await axios({
         method: 'post',
-        url: `https://${team}.coding.net/api/user/${team}/project/${project}/depot?access_token=${this._session.accessToken}`,
+        url: `https://${team}.coding.net/api/user/${team}/project/${project}/depot`,
         headers: {
           'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
+          ...this.getHeaders(),
         },
         data: qs.stringify({
           name: depot,

src/webview.ts

@@ -1,7 +1,11 @@
 import hx from 'hbuilderx';
-import fs from 'fs';
 import path from 'path';
 
+interface IMessage {
+  command: string;
+  text: string;
+}
+
 export default class WebviewProvider {
   panel: IWebviewPanel;
 
@@ -11,8 +15,14 @@ export default class WebviewProvider {
   }
 
   listen() {
-    this.panel.webView.onDidReceiveMessage((message: any) => {
+    this.panel.webView.onDidReceiveMessage((message: IMessage) => {
       console.log('webview receive message => ', message);
+      const { command, text } = message;
+      if (command === 'webview.mrDetail') {
+        hx.env.openExternal(text);
+      } else {
+        hx.commands.executeCommand(command);
+      }
     });
   }
 
@@ -24,35 +34,17 @@ export default class WebviewProvider {
     return webviewPanel;
   }
 
-  update(itemId: string) {
+  update(data: any) {
     const webview = this.panel.webView;
     const fileInfo = hx.Uri.file(path.resolve(__dirname, '../out/webviews/main.js'));
 
     webview.html = `
       <body>
-        <div style="max-width:200px;">
+        <div>
           <div id='root'></div>
-          <button onclick="test()">测试</button>
-          <div>${itemId}</div>
         </div>
         <script>
-          window.__TEXT__ = '${itemId}'
-          function test() {
-            alert('abc')
-
-            window.fetch("https://api.github.com/search/repositories?q=react", {
-              "method": "GET",
-              "mode": "cors",
-              "credentials": "include"
-            }).then((res) => {
-              res.json().then(data => alert(JSON.stringify(data.items[0])))
-            })
-          }
-        </script>
-        <script>
-          window.addEventListener("message", (msg) => {
-            console.log(msg);
-          });
+          window.__CODING__ = '${JSON.stringify(data)}'
         </script>
         <script src='${fileInfo}'></script>
       </body>

webpack.config.js

@@ -27,6 +27,11 @@ module.exports = {
           },
           {
             loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[path][name]__[local]--[hash:base64:5]',
+              },
+            },
           },
         ],
       },

webviews/App.tsx

@@ -1,23 +1,34 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
+import cn from 'classnames';
+import style from './style.css';
 
 const App = () => {
-  const [msg, setMsg] = useState();
+  const data = JSON.parse(window.__CODING__);
+  const { team, title, srcBranch, desBranch, author, path } = data;
+  const url = `https://${team}.coding.net${path}`;
 
-  useEffect(() => {
-    window.addEventListener('message', (msg: any) => {
-      setMsg(msg);
+  const viewOnWeb = () => {
+    window.hbuilderx.postMessage({
+      command: 'webview.mrDetail',
+      text: url
     });
-  }, []);
-
-  const handleClick = () => {
-    alert((window as any).__TEXT__);
   };
 
   return (
-    <div>
-      app
-      <button onClick={handleClick}>哈哈哈</button>
-      {msg}
+    <div className={style.root}>
+      <a onClick={viewOnWeb}>前往 web 端查看</a>
+
+      <div className={style.title}>
+        {title}
+      </div>
+      <div>{`将分支 ${srcBranch} 合并到分支 ${desBranch}`}</div>
+      <div>创建人：{author.name}</div>
+
+      <div className={style.btnGroup}>
+        <div className={cn(style.btn, style.btnPrimary)}>合并</div>
+        <div className={cn(style.btn, style.btnPrimary)}>允许合并</div>
+        <div className={style.btn}>关闭</div>
+      </div>
     </div>
   );
 };

webviews/style.css

@@ -0,0 +1,49 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", 微软雅黑, sans-serif;
+}
+
+a {
+  cursor: pointer;
+  color: #06f;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.root {
+  padding: 20px;
+  font-size: 14px;
+}
+
+.title {
+  margin-top: 20px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.btnGroup {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.btn {
+  margin-right: 10px;
+  padding: 3px 5px;
+  border-radius: 3px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+}
+
+.btn:hover {
+  opacity: 0.8;
+}
+
+.btnPrimary {
+  border: none;
+  background-color: #06f;
+  color: #fff;
+}

webviews/typings/global.d.ts

@@ -0,0 +1,9 @@
+interface Window {
+  hbuilderx: any;
+  __CODING__: string;
+}
+
+declare module '*.css' {
+  const content: any;
+  export default content;
+}

yarn.lock

@@ -60,6 +60,11 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
+"@types/classnames@^2.2.11":
+  version "2.2.11"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.11.tgz#2521cc86f69d15c5b90664e4829d84566052c1cf"
+  integrity sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==
+
 "@types/eslint-scope@^3.7.0":
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.0.tgz#4792816e31119ebd506902a482caec4951fabd86"
@@ -559,6 +564,11 @@ ci-info@^2.0.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
+classnames@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 clean-git-ref@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/clean-git-ref/-/clean-git-ref-2.0.1.tgz#dcc0ca093b90e527e67adb5a5e55b1af6816dcd9"