feat(mr): status check.

Author: cangzhang

src/codingServer.ts

@@ -17,6 +17,7 @@ import {
   IMemberListResp,
   IMRContentResp,
   ICreateCommentResp,
+  IMRStatusResp,
 } from 'src/typings/respResult';
 import { PromiseAdapter, promiseFromEvent, parseQuery, parseCloneUrl } from 'src/common/utils';
 import { GitService } from 'src/common/gitService';
@@ -96,6 +97,13 @@ export class CodingServer {
       await vscode.commands.executeCommand('setContext', 'hasRepo', !!repoInfo?.repo);
       const result = await this.getUserInfo(repoInfo?.team || ``, accessToken);
       const { data: userInfo } = result;
+
+      if (userInfo.team !== repoInfo?.team) {
+        this._loggedIn = false;
+        await vscode.commands.executeCommand('setContext', 'loggedIn', this._loggedIn);
+        throw new Error(`team not match`);
+      }
+
       const ret: ISessionData = {
         id: nanoid(),
         user: userInfo,
@@ -686,6 +694,27 @@ export class CodingServer {
     }
   }
 
+  public async fetchMRStatus(iid: string) {
+    try {
+      const { repoApiPrefix } = await this.getApiPrefix();
+      const resp: IMRStatusResp = await got
+        .get(`${repoApiPrefix}/merge/${iid}/commit-statuses`, {
+          searchParams: {
+            access_token: this._session?.accessToken,
+          },
+        })
+        .json();
+
+      if (resp.code) {
+        return Promise.reject(resp);
+      }
+
+      return resp;
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }
+
   get loggedIn() {
     return this._loggedIn;
   }

src/panel.ts

@@ -152,6 +152,14 @@ export class Panel {
           } catch (e) {}
           break;
         }
+        case `mr.fetch.status`: {
+          try {
+            const { iid } = args;
+            const resp = await this._codingSrv.fetchMRStatus(iid);
+            this._replyMessage(message, resp.data);
+          } catch (e) {}
+          break;
+        }
         default:
           return this.MESSAGE_UNHANDLED;
       }

src/tree/mrTree.ts

@@ -20,6 +20,8 @@ enum ItemType {
   Node = `node`,
 }
 
+const capitalized = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
+
 const getIcon = (name: string, theme: string) =>
   path.join(__filename, `../../../assets/${theme}/${name}.png`);
 
@@ -58,7 +60,7 @@ export class MRTreeDataProvider implements vscode.TreeDataProvider<ListItem<ITre
   private _disposables: vscode.Disposable[];
 
   private _context: vscode.ExtensionContext;
-  private _service: CodingServer;
+  private readonly _service: CodingServer;
 
   constructor(context: vscode.ExtensionContext, service: CodingServer) {
     this._context = context;
@@ -83,7 +85,7 @@ export class MRTreeDataProvider implements vscode.TreeDataProvider<ListItem<ITre
 
   getChildren(element?: ListItem<ITreeNode>): Thenable<ListItem<ITreeNode>[]> {
     if (!this._service.loggedIn) {
-      vscode.window.showErrorMessage(`[MR Tree] Invalid credentials.`);
+      console.error(`[MR Tree] Invalid credentials.`);
       return Promise.resolve([]);
     }
 
@@ -94,17 +96,13 @@ export class MRTreeDataProvider implements vscode.TreeDataProvider<ListItem<ITre
 
     if (!element) {
       return Promise.resolve([
+        new CategoryItem(capitalized(MRType.Open), MRType.Open, TreeItemCollapsibleState.Collapsed),
         new CategoryItem(
-          MRType.Open.toUpperCase(),
-          MRType.Open,
-          TreeItemCollapsibleState.Collapsed,
-        ),
-        new CategoryItem(
-          MRType.Closed.toUpperCase(),
+          capitalized(MRType.Closed),
           MRType.Closed,
           TreeItemCollapsibleState.Collapsed,
         ),
-        new CategoryItem(MRType.All.toUpperCase(), MRType.All, TreeItemCollapsibleState.Collapsed),
+        new CategoryItem(capitalized(MRType.All), MRType.All, TreeItemCollapsibleState.Collapsed),
       ]);
     }
 
@@ -115,7 +113,7 @@ export class MRTreeDataProvider implements vscode.TreeDataProvider<ListItem<ITre
           .then((resp) => {
             if (resp.code) {
               const msg = Object.values(resp.msg || {})[0];
-              vscode.window.showErrorMessage(`[MR] list: ${msg}`);
+              console.error(`[MR] list: ${msg}`);
               return [];
             }
 

src/typings/respResult.ts

@@ -244,3 +244,25 @@ export interface IMRContentResp extends CodingResponse {
 export interface ICreateCommentResp extends CodingResponse {
   data: IComment;
 }
+
+export interface IMRStatusItem {
+  state: string;
+  sha: string;
+  context: string;
+  target_url: string;
+  description: string;
+  ignore: boolean;
+}
+
+export interface IMRStatus {
+  state: string;
+  pendingStateCount: number;
+  successStateCount: number;
+  failureStateCount: number;
+  errorStateCount: number;
+  statuses: IMRStatusItem[];
+}
+
+export interface IMRStatusResp extends CodingResponse {
+  data: IMRStatus;
+}

webviews/App.tsx

@@ -1,13 +1,16 @@
-import React, { FormEvent, useRef, useState } from 'react';
+import React, { FormEvent, useEffect, useRef, useState, useCallback } from 'react';
 import { view } from '@risingstack/react-easy-state';
 
+import { IMRStatus } from 'src/typings/respResult';
+
 import appStore from 'webviews/store/appStore';
 import persistDataHook from 'webviews/hooks/persistDataHook';
-import Activities from 'webviews/components/Activities';
-import Reviewers from 'webviews/components/Reviewers';
 import initDataHook from 'webviews/hooks/initDataHook';
-import EditButton from 'webviews/components/EditButton';
-// import { requestUpdateMRContent } from 'webviews/service/mrService';
+
+import Activities from 'webviews/components/mr/Activities';
+import Reviewers from 'webviews/components/mr/Reviewers';
+import EditButton from 'webviews/components/mr/EditButton';
+import StatusCheck from 'webviews/components/mr/StatusCheck';
 
 import {
   EmptyWrapper,
@@ -25,18 +28,46 @@ import {
 } from 'webviews/app.styles';
 
 function App() {
-  const { currentMR, updateMRTitle, toggleUpdatingDesc, updateMRDesc } = appStore;
+  const { currentMR, updateMRTitle, toggleUpdatingDesc, updateMRDesc, fetchMRStatus } = appStore;
   const [isEditingTitle, setEditingTitle] = useState(false);
   const [title, setTitle] = useState(currentMR?.data?.merge_request?.title);
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [desc, setDesc] = useState(``);
+  const statusChecker = useRef<undefined | number>();
+  const [statusData, setStatusData] = useState<IMRStatus | null>(null);
 
   const { repoInfo, data } = currentMR;
   const { merge_request: mergeRequest } = data || {};
 
   persistDataHook();
   initDataHook();
 
+  useEffect(() => {
+    statusChecker.current = window.setTimeout(async () => {
+      try {
+        await onRefreshStatus();
+      } finally {
+        window.clearTimeout(statusChecker.current);
+
+        statusChecker.current = window.setInterval(async () => {
+          await onRefreshStatus();
+        }, 30 * 1000);
+      }
+    }, 5 * 1000);
+
+    return () => {
+      window.clearTimeout(statusChecker.current);
+      window.clearInterval(statusChecker.current);
+      setStatusData(null);
+    };
+  }, [currentMR.iid]);
+
+  const onRefreshStatus = useCallback(async () => {
+    const resp = await fetchMRStatus(currentMR.iid);
+    setStatusData(resp);
+    return null;
+  }, [currentMR.iid]);
+
   const handleKeyDown = async (event: any) => {
     if (event.key === 'Enter') {
       await updateMRTitle(title);
@@ -146,6 +177,9 @@ function App() {
               onChange={onChangeDesc}
             />
           )}
+
+          <StatusCheck data={statusData} onRefresh={onRefreshStatus} />
+
           <SectionTitle>Activities</SectionTitle>
           <Activities />
         </Body>

webviews/assets/edit.svg

@@ -0,0 +1,67 @@
+import React from 'react';
+import styled, { css, keyframes } from 'styled-components';
+
+interface Props {
+  onClick?: () => void;
+  children: React.ReactElement;
+  title?: string;
+  width?: number;
+  height?: number;
+  rotate?: boolean;
+}
+
+const rotate = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+const Button = styled.button`
+  border: unset;
+  background: unset;
+  width: 20px;
+  height: 20px;
+  margin-left: 1ex;
+  padding: 2px 0;
+  vertical-align: middle;
+
+  :hover {
+    cursor: pointer;
+  }
+
+  :focus {
+    outline: 1px solid var(--vscode-focusBorder);
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: ${(props: Props) => props.height || 16}px;
+    height: ${(props: Props) => props.width || 16}px;
+    overflow: hidden;
+  }
+
+  svg path {
+    fill: var(--vscode-foreground);
+  }
+`;
+
+const IconButton = ({
+  onClick = () => null,
+  children,
+  title = ``,
+  width,
+  height,
+  rotate = false,
+}: Props) => {
+  return (
+    <Button title={title} width={width} height={height} rotate={rotate} onClick={onClick}>
+      {children}
+    </Button>
+  );
+};
+
+export default IconButton;