feat: add depotMR tree view

uniquemo · uniquemo · commit 889c7badedc0 · 2020-11-22T12:22:34.000+08:00
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
   "main": "./out/extension",
   "activationEvents": [
     "onCustomEditor:customEditor.mrDetail",
+    "onView:codingPlugin.treeDepotMR",
     "onView:codingPlugin.treeMR",
     "onView:codingPlugin.treeDepot",
     "onView:codingPlugin.webview"
@@ -55,12 +56,8 @@
     "viewsContainers": {
       "activitybar": [
         {
-          "id": "CODING-MR",
-          "title": "CODING 合并请求"
-        },
-        {
-          "id": "CODING-DEPOT",
-          "title": "CODING 仓库"
+          "id": "CODING-DEPOT-MR",
+          "title": "CODING 代码仓库"
         }
       ],
       "rightside": [
@@ -71,16 +68,10 @@
       ]
     },
     "views": {
-      "CODING-MR": [
-        {
-          "id": "codingPlugin.treeMR",
-          "name": "CODING 合并请求"
-        }
-      ],
-      "CODING-DEPOT": [
+      "CODING-DEPOT-MR": [
         {
-          "id": "codingPlugin.treeDepot",
-          "name": "CODING 仓库"
+          "id": "codingPlugin.treeDepotMR",
+          "name": "CODING 代码仓库"
         }
       ],
       "WebviewContainerId": [
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 DepotMRTreeDataProvider from './trees/depotMR';
 import MRCustomEditorProvider from './customEditors/mergeRequest';
 
 import toast from './utils/toast';
@@ -9,6 +10,7 @@ import { IDepot, IMRItem } from './typings/common';
 import * as DCloudService from './services/dcloud';
 
 const { registerCommand } = hx.commands;
+const { createTreeView } = hx.window;
 
 export function registerCommands(context: IContext) {
   const { codingServer } = context;
@@ -53,26 +55,35 @@ export function registerCommands(context: IContext) {
       }
 
       const team = codingServer.session?.user?.team;
-      await codingServer.createDepot(team, depot, depot);
-      toast.info('仓库创建成功');
+      const result = await codingServer.createDepot(team, depot, depot);
+      if (result) {
+        toast.info('仓库创建成功');
+      }
     }),
   );
 }
 
 export function createTreeViews(context: IContext) {
   context.subscriptions.push(
-    hx.window.createTreeView('codingPlugin.treeMR', {
+    createTreeView('codingPlugin.treeMR', {
       showCollapseAll: false,
       treeDataProvider: new MRTreeDataProvider(context),
     }),
   );
 
   context.subscriptions.push(
-    hx.window.createTreeView('codingPlugin.treeDepot', {
-      showCollapseAll: true,
+    createTreeView('codingPlugin.treeDepot', {
+      showCollapseAll: false,
       treeDataProvider: new DepotTreeDataProvider(context),
     }),
   );
+
+  context.subscriptions.push(
+    createTreeView('codingPlugin.treeDepotMR', {
+      showCollapseAll: false,
+      treeDataProvider: new DepotMRTreeDataProvider(context),
+    }),
+  );
 }
 
 export function workspaceInit() {
diff --git a/src/services/codingServer.ts b/src/services/codingServer.ts
@@ -134,7 +134,9 @@ export default class CodingServer {
 
   async createDepot(team: string, project: string, depot: string) {
     try {
-      await this.createProject(team, project);
+      const projectRes = await this.createProject(team, project);
+
+      if (!projectRes) return;
 
       const result = await axios({
         method: 'post',
@@ -150,6 +152,8 @@ export default class CodingServer {
           shared: false,
         }),
       });
+
+      return result.data;
     } catch (err) {
       console.error(err);
     }
diff --git a/src/trees/depotMR.ts b/src/trees/depotMR.ts
@@ -0,0 +1,141 @@
+import hx from 'hbuilderx';
+import ACTIONS, { dispatch } from '../utils/actions';
+import toast from '../utils/toast';
+import { getMrListParams } from '../utils/mr';
+import { IDepot, IMRItem, IReviewer } from '../typings/common';
+
+interface IItem extends ITreeItem {
+  _create: boolean;
+  _auth: boolean;
+  _disabled: boolean;
+  _isDepot: boolean;
+}
+
+type IElement = IDepot & IMRItem & IItem;
+
+const getCommand = (element: IElement) => {
+  if (element.children || element._disabled) return '';
+  if (element._auth) return 'codingPlugin.auth';
+  if (element._create) return 'codingPlugin.createDepot';
+  if (element.vcsType) return 'codingPlugin.depotTreeItemClick';
+  return 'codingPlugin.mrTreeItemClick';
+};
+
+class DepotMRTreeDataProvider extends hx.TreeDataProvider {
+  constructor(context: IContext) {
+    super();
+    this.context = context;
+  }
+
+  getUser() {
+    return this.context.codingServer.session?.user;
+  }
+
+  getRepoInfo() {
+    const { selectedDepot, depots, codingServer } = this.context;
+    const user = codingServer.session?.user;
+    return getMrListParams(selectedDepot, depots, user);
+  }
+
+  async getChildren(element: IElement) {
+    const user = this.getUser();
+    if (!user) {
+      toast.warn('请先绑定 CODING 账户');
+      return Promise.resolve([
+        {
+          name: '绑定 CODING 账户',
+          _auth: true,
+        },
+      ]);
+    }
+
+    if (element) {
+      return Promise.resolve(element.children);
+    }
+
+    const repoInfo = this.getRepoInfo();
+    const promises = [this.context.codingServer.getDepotList()];
+    if (repoInfo) {
+      promises.push(this.context.codingServer.getMrList(repoInfo));
+    }
+
+    try {
+      const [depots, list] = await Promise.all(promises);
+      let createdList: IMRItem[] = [];
+      let reviewerList: IMRItem[] = [];
+      let others = [];
+      if (list) {
+        createdList = list.filter((item: IMRItem) => item.author.id === user.id);
+        reviewerList = list.filter((item: IMRItem) => item.reviewers.find((r: IReviewer) => r.reviewer.id === user.id));
+        others = list.filter((item: IMRItem) => {
+          const isNotInCreatedList = createdList.findIndex((i) => i.id === item.id) === -1;
+          const isNotInReviewerList = reviewerList.findIndex((i) => i.id === item.id) === -1;
+          return isNotInCreatedList && isNotInReviewerList;
+        });
+      }
+
+      dispatch(ACTIONS.SET_DEPOTS, {
+        context: this.context,
+        value: depots,
+      });
+
+      return Promise.resolve([
+        {
+          name: '+ 创建仓库',
+          _create: true,
+          _isDepot: true,
+        },
+        {
+          name: '仓库列表',
+          children: depots,
+          _isDepot: true,
+        },
+        {
+          title: `合并请求列表（当前选中仓库 ${this.context.selectedDepot?.name || '-'}）`,
+          children: [
+            {
+              title: `我创建的 (${createdList?.length})`,
+              children: createdList,
+            },
+            {
+              title: `需要我 Review 的 (${reviewerList?.length})`,
+              children: reviewerList,
+            },
+            {
+              title: `其他（${others?.length}）`,
+              children: others,
+            },
+          ],
+        },
+      ]);
+    } catch {
+      toast.error('获取数据失败');
+    }
+  }
+
+  getTreeItem(element: IElement) {
+    if (element.vcsType || element._isDepot) {
+      return {
+        label: element.name,
+        collapsibleState: element.children ? 1 : 0,
+        command: {
+          command: getCommand(element),
+          arguments: element,
+        },
+        contextValue: 'createDepot',
+      };
+    }
+
+    const user = this.getUser();
+    return {
+      label: element.title,
+      collapsibleState: element.children ? 1 : 0,
+      command: {
+        command: getCommand(element),
+        arguments: [user?.team, element],
+      },
+    };
+  }
+}
+
+export default DepotMRTreeDataProvider;
diff --git a/src/trees/mr.ts b/src/trees/mr.ts
@@ -5,12 +5,10 @@ import { IMRItem, IReviewer } from '../typings/common';
 
 interface IItem extends ITreeItem {
   _disabled: boolean;
-  _create: boolean;
 }
 
 const getCommand = (element: IMRItem & IItem) => {
   if (element.children || element._disabled) return '';
-  if (element._create) return 'codingPlugin.createDepot';
   return 'codingPlugin.mrTreeItemClick';
 };
 
diff --git a/webviews/App.tsx b/webviews/App.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import cn from 'classnames';
 
 import {
@@ -12,6 +12,11 @@ import {
 import { MERGE_STATUS_TEXT, MERGE_STATUS } from './constants';
 import style from './style.css';
 
+interface IReviewers {
+  reviewers: any[];
+  volunteer_reviewers: any[];
+}
+
 const toast = (msg: string) => {
   window.hbuilderx.postMessage({
     command: 'webview.toast',
@@ -26,23 +31,35 @@ const App = () => {
   const user = session?.user;
   const team = user?.team;
 
+  // Fix initialize isAgreed doesn't work
+  const agreedRef = useRef<boolean>(true);
+
   const [isClosing, setIsClosing] = useState(false);
   const [isMerging, setIsMerging] = useState(false);
   const [isAllowing, setIsAllowing] = useState(false);
   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 [reviewers, setReviewers] = useState<IReviewers>({ reviewers: [], volunteer_reviewers: [] });
+
+  const getInitialAgreed = () => {
+    let agreed = true;
+    const index = reviewers.reviewers.findIndex((r) => r.reviewer.id === user.id);
+
+    if (index >= 0) {
+      agreed = reviewers.reviewers[index].value === 100;
+    } else {
+      agreed = reviewers.volunteer_reviewers.findIndex((r) => r.reviewer.id === user.id) >= 0;
+    }
+    return agreed;
+  };
 
-  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(getInitialAgreed());
 
-  const [isAgreed, setIsAgreed] = useState(agreed);
+  const getIsAgreed = () => {
+    if (agreedRef.current) return getInitialAgreed();
+    return isAgreed;
+  };
 
   const getParams = () => ({
     ...repoInfo,
@@ -128,6 +145,7 @@ const App = () => {
 
     if (!result.code) {
       setIsAgreed(true);
+      agreedRef.current = false;
     } else {
       toast('操作失败');
     }
@@ -143,6 +161,7 @@ const App = () => {
 
     if (!result.code) {
       setIsAgreed(false);
+      agreedRef.current = false;
     } else {
       toast('操作失败');
     }
@@ -180,7 +199,7 @@ const App = () => {
       <div dangerouslySetInnerHTML={{ __html: body }} />
 
       <div className={style.btnGroup}>
-        {showAllowMergeBtn && !isAgreed && (
+        {showAllowMergeBtn && !getIsAgreed() && (
           <div
             className={cn(style.btn, style.btnPrimary, isAllowing && style.disabled)}
             onClick={handleAllowMerge}
@@ -189,7 +208,7 @@ const App = () => {
           </div>
         )}
 
-        {showAllowMergeBtn && isAgreed && (
+        {showAllowMergeBtn && getIsAgreed() && (
           <div
             className={cn(style.btn, style.btnPrimary, isDisAllowing && style.disabled)}
             onClick={handleDisAllowMerge}
diff --git a/webviews/style.css b/webviews/style.css
@@ -47,7 +47,7 @@ a:hover {
 
 .btn {
   margin-right: 10px;
-  padding: 3px 5px;
+  padding: 3px 10px;
   border-radius: 3px;
   border: 1px solid #ccc;
   cursor: pointer;
@@ -82,9 +82,11 @@ a:hover {
 
 .status.success {
   background-color: #bbfada;
+  color: #08934d;
 }
 .status.error {
-  background-color: red;
+  background-color: #fed2d2;
+  color: #ca1628;
 }
 .status.merged {
   background-color: #cceaff;
