feat: switch mr overview.

Author: cangzhang

package.json

@@ -114,7 +114,6 @@
     "@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"

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

@@ -3,31 +3,28 @@ import React, { useEffect } from 'react';
 import { view } from '@risingstack/react-easy-state';
 import appStore from './store/appStore';
 import { actions } from './store/constants';
-import { fetchMRDetail } from './service';
 
 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 <div>Loading...</div>
+  }
 
   return (
     <>

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;

webviews/store/appStore.ts

@@ -4161,11 +4161,6 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
-ky@^0.24.0:
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/ky/-/ky-0.24.0.tgz#337e534a7f47c12476988eef3cb968daef318349"
-  integrity sha512-/vpuQguwV30jErrqLpoaU/YJAFALrUkqqWLILnSoBOj5/O/LKzro/pPNtxbLgY6m4w5XNM6YZ3v7/or8qLlFuw==
-
 lazy-cache@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-2.0.2.tgz#b9190a4f913354694840859f8a8f7084d8822264"