feat(mr): update desc.

cangzhang · cangzhang · commit 7f559bdb88d0 · 2020-12-11T17:04:45.000+08:00
diff --git a/src/codingServer.ts b/src/codingServer.ts
@@ -15,6 +15,7 @@ import {
   ICreateMRResp,
   IBranchListResp,
   IMemberListResp,
+  IMRContentResp,
 } from 'src/typings/respResult';
 import { PromiseAdapter, promiseFromEvent, parseQuery, parseCloneUrl } from 'src/common/utils';
 import { GitService } from 'src/common/gitService';
@@ -660,6 +661,30 @@ export class CodingServer {
     return fulfilled;
   }
 
+  public async updateMRDesc(iid: string, content: string) {
+    try {
+      const { repoApiPrefix } = await this.getApiPrefix();
+      const resp: IMRContentResp = await got
+        .put(`${repoApiPrefix}/merge/${iid}/update-content`, {
+          form: {
+            content,
+          },
+          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;
   }
diff --git a/src/panel.ts b/src/panel.ts
@@ -162,6 +162,14 @@ export class Panel {
               } catch (err) {}
               break;
             }
+            case `mr.update.desc`: {
+              try {
+                const [iid, content] = args;
+                const resp = await codingSrv.updateMRDesc(iid, content);
+                this.broadcast(command, [iid, resp.data]);
+              } catch (e) {}
+              break;
+            }
             default:
               break;
           }
diff --git a/src/typings/commonTypes.ts b/src/typings/commonTypes.ts
@@ -36,6 +36,7 @@ export interface IMRWebViewDetail {
   repoInfo: IRepoInfo;
   data: IMRDetail & {
     loading: boolean;
+    editingDesc: boolean;
   };
   user: IUserItem;
 }
diff --git a/src/typings/respResult.ts b/src/typings/respResult.ts
@@ -229,3 +229,12 @@ export interface IMemberItem {
 }
 
 export interface IMemberListResp extends IListResponse<IMemberItem> {}
+
+export interface IMRContent {
+  body: string;
+  body_plan: string;
+}
+
+export interface IMRContentResp extends CodingResponse {
+  data: IMRContent;
+}
diff --git a/webviews/App.tsx b/webviews/App.tsx
@@ -1,11 +1,14 @@
-import React, { useRef, useState } from 'react';
-
+import React, { FormEvent, useRef, useState } from 'react';
 import { view } from '@risingstack/react-easy-state';
+
 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 messageTransferHook from 'webviews/hooks/messageTransferHook';
+import EditButton from 'webviews/components/EditButton';
+import { requestUpdateMRContent } from 'webviews/service/mrService';
+
 import {
   EmptyWrapper,
   TitleWrapper,
@@ -17,13 +20,17 @@ import {
   Empty,
   BranchName,
   EditBtn,
-} from 'webviews/styles/MROverview';
+  OperationBtn,
+  SectionTitle,
+} from 'webviews/app.styles';
 
 function App() {
-  const { currentMR, updateMRTitle } = appStore;
-  const [isEditing, setEditing] = useState(false);
+  const { currentMR, updateMRTitle, toggleUpdatingDesc } = 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 { repoInfo, data } = currentMR;
   const { merge_request: mergeRequest } = data || {};
 
@@ -33,7 +40,7 @@ function App() {
   const handleKeyDown = async (event: any) => {
     if (event.key === 'Enter') {
       await updateMRTitle(title);
-      setEditing(false);
+      setEditingTitle(false);
     }
   };
 
@@ -47,10 +54,23 @@ function App() {
   };
 
   const handleEdit = () => {
-    setEditing(true);
+    setEditingTitle(true);
     inputRef.current?.focus();
   };
 
+  const onEditDesc = () => {
+    toggleUpdatingDesc();
+    setDesc(currentMR.data.merge_request.body_plan);
+  };
+
+  const onChangeDesc = (ev: FormEvent<HTMLTextAreaElement>) => {
+    setDesc(ev.currentTarget.value);
+  };
+
+  const onSaveDesc = async () => {
+    await requestUpdateMRContent(currentMR.iid, desc);
+  };
+
   if (!currentMR.iid) {
     return <EmptyWrapper>Please select an merge request first.</EmptyWrapper>;
   }
@@ -62,13 +82,13 @@ function App() {
   return (
     <div>
       <TitleWrapper>
-        {isEditing ? (
+        {isEditingTitle ? (
           <input
             type='text'
             value={title}
             ref={(ref) => (inputRef.current = ref)}
-            onBlur={() => setEditing(false)}
-            onFocus={() => setEditing(true)}
+            onBlur={() => setEditingTitle(false)}
+            onFocus={() => setEditingTitle(true)}
             onKeyDown={handleKeyDown}
             onChange={handleTitleChange}
           />
@@ -91,14 +111,39 @@ function App() {
       </Row>
       <BodyWrap>
         <Body>
-          <h3>Description</h3>
-          <Desc>
-            {mergeRequest?.body ? (
-              <div dangerouslySetInnerHTML={{ __html: mergeRequest?.body }} />
-            ) : (
-              <Empty>Empty</Empty>
+          <SectionTitle>
+            Description
+            {!currentMR.data.editingDesc && <EditButton onClick={onEditDesc} />}
+            {currentMR.data.editingDesc && (
+              <>
+                <OperationBtn className={`colored`} onClick={onSaveDesc}>
+                  Save
+                </OperationBtn>
+                <OperationBtn className={`colored secondary`} onClick={() => toggleUpdatingDesc()}>
+                  Cancel
+                </OperationBtn>
+              </>
             )}
-          </Desc>
+          </SectionTitle>
+          {!currentMR.data.editingDesc && (
+            <Desc>
+              {mergeRequest?.body ? (
+                <div dangerouslySetInnerHTML={{ __html: mergeRequest?.body }} />
+              ) : (
+                <Empty>This MR has no description.</Empty>
+              )}
+            </Desc>
+          )}
+          {currentMR.data.editingDesc && (
+            <textarea
+              name='desc'
+              id='mr-desc'
+              cols={30}
+              rows={20}
+              value={desc}
+              onChange={onChangeDesc}
+            />
+          )}
           <h3>Activities</h3>
           <Activities />
         </Body>
diff --git a/webviews/app.styles.tsx b/webviews/app.styles.tsx
@@ -53,3 +53,11 @@ export const Empty = styled.div`
 export const BranchName = styled.code`
   margin: 0 1ex;
 `;
+
+export const OperationBtn = styled.button`
+  margin-left: 1em;
+`;
+
+export const SectionTitle = styled.h3`
+  line-height: 28px;
+`;
diff --git a/webviews/components/EditButton.tsx b/webviews/components/EditButton.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import EditIcon from 'webviews/assets/edit.svg';
+
+const IconButton = 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 path {
+    fill: var(--vscode-foreground);
+  }
+`;
+
+interface Props {
+  onClick?: () => void;
+}
+
+const EditButton = ({ onClick = () => null }: Props) => {
+  return (
+    <IconButton onClick={onClick}>
+      <EditIcon />
+    </IconButton>
+  );
+};
+
+export default EditButton;
diff --git a/webviews/components/Reviewers.tsx b/webviews/components/Reviewers.tsx
@@ -4,7 +4,7 @@ import { view } from '@risingstack/react-easy-state';
 
 import appStore from 'webviews/store/appStore';
 import { Avatar, AuthorLink } from 'webviews/components/User';
-import EditIcon from 'webviews/assets/edit.svg';
+import EditButton from 'webviews/components/EditButton';
 
 const Title = styled.div`
   margin-top: 15px;
@@ -15,36 +15,14 @@ const FlexCenter = styled.div`
   display: flex;
   align-items: center;
 `;
-const Item = styled(FlexCenter)`
+const Reviewer = styled(FlexCenter)`
   padding: 5px 0;
   justify-content: space-between;
 
   a:first-child {
     margin-right: 5px;
   }
 `;
-const IconButton = 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 path {
-    fill: var(--vscode-foreground);
-  }
-`;
 
 function Reviewers() {
   const { reviewers, currentMR } = appStore;
@@ -61,19 +39,17 @@ function Reviewers() {
     <div>
       <Title>
         Reviewers
-        <IconButton onClick={onUpdateReviewer}>
-          <EditIcon />
-        </IconButton>
+        <EditButton onClick={onUpdateReviewer} />
       </Title>
       {allReviewers.map((r) => {
         return (
-          <Item key={r.reviewer.global_key}>
+          <Reviewer key={r.reviewer.global_key}>
             <FlexCenter>
               <Avatar for={r.reviewer} />
               <AuthorLink for={r.reviewer} />
             </FlexCenter>
             {r.value === 100 && `👍`}
-          </Item>
+          </Reviewer>
         );
       })}
     </div>
diff --git a/webviews/hooks/messageTransferHook.tsx b/webviews/hooks/messageTransferHook.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import appStore from 'webviews/store/appStore';
 import { actions } from 'webviews/store/constants';
+import { IMRContent } from 'src/typings/respResult';
 
 export default function messageTransferHook() {
   useEffect(() => {
@@ -11,6 +12,8 @@ export default function messageTransferHook() {
         updateMRReviewers,
         updateMRComments,
         toggleMRLoading,
+        updateMRDesc,
+        toggleUpdatingDesc,
       } = appStore;
       const { command, res } = ev?.data;
 
@@ -35,6 +38,12 @@ export default function messageTransferHook() {
           res && updateMRReviewers(res);
           break;
         }
+        case actions.MR_UPDATE_DESC: {
+          const [iid, resp] = res as [string, IMRContent];
+          updateMRDesc(iid, resp);
+          toggleUpdatingDesc();
+          break;
+        }
         default:
           break;
       }
diff --git a/webviews/service/mrService.ts b/webviews/service/mrService.ts
@@ -0,0 +1,9 @@
+import { vscode } from 'webviews/constants/vscode';
+import { actions } from 'webviews/store/constants';
+
+export const requestUpdateMRContent = async (iid: string, content: string) => {
+  await vscode.postMessage({
+    command: actions.MR_UPDATE_DESC,
+    args: [iid, content],
+  });
+};
diff --git a/webviews/store/appStore.ts b/webviews/store/appStore.ts
diff --git a/webviews/store/constants.ts b/webviews/store/constants.ts

Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,7 @@ export interface IMRWebViewDetail {`
`36`	`36`	`repoInfo: IRepoInfo;`
`37`	`37`	`data: IMRDetail & {`
`38`	`38`	`loading: boolean;`
	`39`	`+ editingDesc: boolean;`
`39`	`40`	`};`
`40`	`41`	`user: IUserItem;`
`41`	`42`	`}`