feat(mr): animation; reviewers filter.

Author: cangzhang

src/panel.ts

@@ -106,12 +106,17 @@ export class Panel {
           break;
         case 'mr.update.reviewers': {
           try {
-            const { iid, list: selected }: { iid: string; list: number[] } = args;
+            const {
+              iid,
+              list: selected,
+              author,
+            }: { iid: string; list: number[]; author: string } = args;
             const {
               data: { list: memberList },
             } = await this._codingSrv.getProjectMembers();
+
             const list = memberList
-              .filter((i) => i.user.global_key !== this._codingSrv.session?.user?.global_key)
+              .filter((i) => i.user.global_key !== author)
               .map((i) => ({
                 label: i.user.name,
                 description: i.user.global_key,

src/typings/commonTypes.ts

@@ -1,4 +1,4 @@
-import { IMRDetail, IUserItem } from './respResult';
+import { IMRDetail, IMRStatusItem, IUserItem } from './respResult';
 
 export interface IRepoInfo {
   team: string;
@@ -37,6 +37,7 @@ export interface IMRWebViewDetail {
   data: IMRDetail & {
     loading: boolean;
     editingDesc: boolean;
+    commit_statuses: IMRStatusItem[];
   };
   user: IUserItem;
 }

webviews/components/IconButton.tsx

@@ -20,7 +20,7 @@ const rotate = keyframes`
   }
 `;
 
-const Button = styled.button`
+const Button = styled(({ height, width, rotate, ...rest }: Props) => <button {...rest} />)`
   border: unset;
   background: unset;
   width: 20px;
@@ -42,6 +42,12 @@ const Button = styled.button`
     width: ${(props: Props) => props.height || 16}px;
     height: ${(props: Props) => props.width || 16}px;
     overflow: hidden;
+    animation: ${(props: Props) =>
+      props.rotate
+        ? css`
+            ${rotate} 2s linear infinite
+          `
+        : css``};
   }
 
   svg path {

webviews/components/mr/Reviewers.tsx

@@ -32,7 +32,7 @@ function Reviewers() {
 
   const onUpdateReviewer = useCallback(() => {
     const list = allReviewers.map((i) => i.reviewer.id);
-    updateReviewers(currentMR.iid, list);
+    updateReviewers(currentMR.iid, list, currentMR.data.merge_request.author.global_key);
   }, [allReviewers]);
 
   return (

webviews/components/mr/StatusCheck.tsx

@@ -1,21 +1,35 @@
 import React, { useState } from 'react';
+import styled from 'styled-components';
 
+import { sleep } from 'webviews/utils/helper';
 import { IMRStatus } from 'src/typings/respResult';
 import { SectionTitle } from 'webviews/app.styles';
 import RefreshIcon from 'webviews/assets/refresh.svg';
 import IconButton from 'webviews/components/IconButton';
 
 interface Props {
   data: IMRStatus | null;
-  onRefresh: () => Promise<any>;
+  onRefresh: (...args: any[]) => Promise<any>;
 }
 
+const ListItem = styled.li`
+  i {
+    margin-left: 2ex;
+  }
+`;
+
 function StatusCheck(props: Props) {
+  const { data } = props;
   const [refreshing, setRefreshing] = useState(false);
 
   const onRefresh = async () => {
+    if (refreshing) {
+      return;
+    }
+
     setRefreshing(true);
-    await Promise.allSettled([props.onRefresh]);
+    // minimum 1s
+    await Promise.allSettled([props.onRefresh, sleep(1000)]);
     setRefreshing(false);
   };
 
@@ -33,14 +47,20 @@ function StatusCheck(props: Props) {
         </IconButton>
       </SectionTitle>
       <ul>
-        {props.data?.statuses.map((i) => {
-          return (
-            <li key={i.context}>
-              {i.context}
-              <i>{i.description}</i>
-            </li>
-          );
-        })}
+        {data?.statuses ? (
+          data?.statuses.map((i) => {
+            return (
+              <ListItem key={i.context}>
+                {i.context}
+                <i>
+                  <a href={i.target_url}>{i.description}</a>
+                </i>
+              </ListItem>
+            );
+          })
+        ) : (
+          <li>No Job for now</li>
+        )}
       </ul>
     </>
   );

webviews/store/appStore.ts

@@ -106,10 +106,10 @@ const appStore = store({
     appStore.comments.push([result] as any);
     return result;
   },
-  async updateReviewers(iid: string, list: number[]) {
+  async updateReviewers(iid: string, list: number[], author: string) {
     const resp = await getMessageHandler(appStore.messageHandler)().postMessage({
       command: actions.MR_UPDATE_REVIEWERS,
-      args: { iid, list },
+      args: { iid, list, author },
     });
     appStore.reviewers = resp;
     appStore.refreshMRActivities();

webviews/utils/helper.ts

@@ -0,0 +1,7 @@
+export function sleep(timeout: number) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, timeout);
+  });
+}