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

Author: cangzhang

package.json

@@ -110,20 +110,29 @@
     "watch:webviews": "webpack --watch --mode development",
     "lint": "eslint . --ext .ts,.tsx"
   },
+  "babel": {
+    "plugins": [
+      "babel-plugin-styled-components"
+    ]
+  },
+  "resolutions": {
+    "styled-components": "^5"
+  },
   "dependencies": {
     "@risingstack/react-easy-state": "^6.3.0",
     "got": "^11.7.0",
     "keytar": "^7.0.0",
-    "ky": "^0.24.0",
     "nanoid": "^3.1.16",
     "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react-dom": "^17.0.0",
+    "styled-components": "^5.2.1"
   },
   "devDependencies": {
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
     "@typescript-eslint/eslint-plugin": "^3.0.2",
     "@typescript-eslint/parser": "^3.0.2",
+    "babel-plugin-styled-components": "^1.12.0",
     "css-loader": "^5.0.0",
     "eslint": "^7.1.0",
     "husky": "^5.0.4",

src/codingServer.ts

@@ -322,7 +322,7 @@ export class CodingServer {
     }
   }
 
-  public async getMRDetail(iid: number) {
+  public async getMRDetail(iid: string) {
     try {
       const repoInfo = this._context.workspaceState.get(`repoInfo`) as IRepoInfo;
       if (!repoInfo?.team) {
@@ -339,9 +339,11 @@ export class CodingServer {
           },
         )
         .json();
+
       if (diff.code) {
         return Promise.reject(diff);
       }
+
       return diff;
     } catch (err) {
       return Promise.reject(err);

src/extension.ts

@@ -47,9 +47,14 @@ export async function activate(context: vscode.ExtensionContext) {
 
   context.subscriptions.push(vscode.window.registerUriHandler(uriHandler));
   context.subscriptions.push(
-    vscode.commands.registerCommand('codingPlugin.showMROverview', (data: IMRWebViewDetail) => {
-      Panel.createOrShow(context, data);
-      Panel.currentPanel?.broadcast(`action.UPDATE_CURRENT_MR`, data);
+    vscode.commands.registerCommand('codingPlugin.showMROverview', async (mr: IMRWebViewDetail) => {
+      Panel.createOrShow(context);
+      const resp = await codingSrv.getMRDetail(mr.iid);
+      mr.data = resp.data.merge_request;
+      Panel.currentPanel?.broadcast(`action.UPDATE_CURRENT_MR`, {
+        ...mr,
+        data: resp.data.merge_request,
+      });
     }),
   );
   context.subscriptions.push(

src/panel.ts

@@ -1,7 +1,5 @@
 import * as vscode from 'vscode';
-import * as path from 'path';
 
-import { IMRWebViewDetail } from './typings/commonTypes';
 import { getNonce } from './common/utils';
 
 export class Panel {
@@ -17,7 +15,7 @@ export class Panel {
   private readonly _extensionPath: string;
   private _disposables: vscode.Disposable[] = [];
 
-  public static createOrShow(context: vscode.ExtensionContext, data: IMRWebViewDetail) {
+  public static createOrShow(context: vscode.ExtensionContext) {
     const { extensionUri, extensionPath } = context;
     const column = vscode.window.activeTextEditor
       ? vscode.window.activeTextEditor.viewColumn
@@ -42,7 +40,7 @@ export class Panel {
       },
     );
 
-    Panel.currentPanel = new Panel(panel, extensionUri, extensionPath, data);
+    Panel.currentPanel = new Panel(panel, extensionUri, extensionPath);
   }
 
   public static revive(
@@ -53,13 +51,13 @@ export class Panel {
     Panel.currentPanel = new Panel(panel, extensionUri, extensionPath);
   }
 
-  private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri, extensionPath: string, mr?: IMRWebViewDetail) {
+  private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri, extensionPath: string) {
     this._panel = panel;
     this._extensionUri = extensionUri;
     this._extensionPath = extensionPath;
 
     // Set the webview's initial html content
-    this._update(mr);
+    this._update();
 
     // Listen for when the panel is disposed
     // This happens when the user closes the panel or when the panel is closed programatically
@@ -117,28 +115,28 @@ export class Panel {
     }
   }
 
-  private _update(data?: IMRWebViewDetail) {
+  private _update() {
     const webview = this._panel.webview;
 
     // Vary the webview's content based on where it is located in the editor.
     switch (this._panel.viewColumn) {
       case vscode.ViewColumn.Two:
-        this._updateForCat(webview, data);
+        this._updateForCat(webview);
         return;
 
       case vscode.ViewColumn.Three:
-        this._updateForCat(webview, data);
+        this._updateForCat(webview);
         return;
 
       case vscode.ViewColumn.One:
       default:
-        this._updateForCat(webview, data);
+        this._updateForCat(webview);
         return;
     }
   }
 
-  private _updateForCat(webview: vscode.Webview, data?: IMRWebViewDetail) {
-    this._panel.title = `Merge Request ${data?.iid || ``}`;
+  private _updateForCat(webview: vscode.Webview) {
+    this._panel.title = `Merge Request`;
     this._panel.webview.html = this._getHtmlForWebview(webview);
   }
 
@@ -154,7 +152,7 @@ export class Panel {
 			  <title>Merge Request Overview</title>
 			  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 			  <meta http-equiv="Content-Security-Policy"
-              content="default-src 'unsafe-eval'; style-src vscode-resource: 'unsafe-inline' http: https: data:;; img-src vscode-resource: https:; script-src 'nonce-${nonce}' 'unsafe-eval'; connect-src https:">
+              content="default-src 'none'; style-src vscode-resource: 'unsafe-inline' http: https: data:;; img-src vscode-resource: https:; script-src 'nonce-${nonce}' 'unsafe-eval'; connect-src https:">
 		  </head>
 		  <body>
 			  <div id="root"></div>

webviews/App.tsx

@@ -1,38 +1,61 @@
 import React, { useEffect } from 'react';
+import styled from 'styled-components';
 
 import { view } from '@risingstack/react-easy-state';
 import appStore from './store/appStore';
 import { actions } from './store/constants';
-import { fetchMRDetail } from './service';
+
+const LoadingWrapper = styled.div`
+  font-size: 16px;
+`;
+const TitleWrapper = styled.div`
+  font-size: 20px;
+`;
+const Row = styled.div`
+  margin: 16px 0;
+`;
+const Desc = styled.article`
+  border: 1px solid gray;
+  padding: 10px;
+`;
 
 function App() {
-  const { currentMR, switchMR, setMRDetail } = appStore;
+  const { currentMR, updateCurrentMR } = appStore;
 
   useEffect(() => {
     window.addEventListener(`message`, async (ev) => {
       const { type, value } = ev.data;
       switch (type) {
         case actions.UPDATE_CURRENT_MR: {
-          switchMR(value);
+          updateCurrentMR(value);
           break;
         }
         default:
           console.log(type, value);
           break;
       }
     });
-  }, [switchMR]);
+  }, [updateCurrentMR]);
 
-  useEffect(() => {
-    fetchMRDetail(currentMR.repoInfo, currentMR.iid, currentMR.accessToken).then(r => {
-      setMRDetail(r.merge_request);
-    });
-  }, [currentMR.iid]);
+  if (!currentMR.iid) {
+    return <LoadingWrapper>Please select an merge request first.</LoadingWrapper>;
+  }
 
+  const { repoInfo, data } = currentMR;
   return (
-    <>
-      <h2>#{currentMR?.iid || ``} {currentMR?.data?.title}</h2>
-    </>
+    <div>
+      <TitleWrapper>
+        {data.title} (<a
+        href={`https://${repoInfo.team}.coding.net/p/${repoInfo.project}/d/${repoInfo.repo}/git/merge/${currentMR.iid}`}>#{currentMR.iid}</a>)
+      </TitleWrapper>
+      <Row>
+        <code>{data.srcBranch}</code> → <code>{data.desBranch}</code>
+      </Row>
+      <h3>Description:</h3>
+      <Desc>
+        <div dangerouslySetInnerHTML={{ __html: data.body }} />
+      </Desc>
+    </div>
   );
 }
 

webviews/global.d.ts

@@ -1 +1,2 @@
 declare const acquireVsCodeApi: any;
+declare module 'styled-components';

webviews/service.ts

@@ -1,15 +1,11 @@
 import { store } from '@risingstack/react-easy-state';
 import { IMRWebViewDetail } from '../../src/typings/commonTypes';
-import { IMRDetail } from '../../src/typings/respResult';
 
 const appStore = store({
   currentMR: {} as IMRWebViewDetail,
-  switchMR(data: IMRWebViewDetail) {
+  updateCurrentMR(data: IMRWebViewDetail) {
     appStore.currentMR = data;
   },
-  setMRDetail(data: IMRDetail) {
-    appStore.currentMR.data = data;
-  }
 });
 
 export default appStore;