Feature optimize approval center (#27)

* feat: approval optimize

Author: frankzhaopeng

package.json

@@ -109,5 +109,5 @@
   "resolutions": {
     "@types/react": "17.0.43"
   },
-  "proxy": "https://featureprobe.io/"
+  "proxy": "http://featureprobe-df.intra.xiaojukeji.com/"
 }

src/interfaces/approval.ts

@@ -14,10 +14,11 @@ export interface IApproval {
   toggleKey: string;
   toggleName: string;
   comment?: string;
-  approvalTime?: string;
-  sketchTime?: string;
   locked?: boolean;
   lockedTime?: string;
+  modifiedTime?: string;
+  canceled: boolean;
+  cancelReason?: string;
 }
 
 export interface IApprovalList {
@@ -38,7 +39,7 @@ export interface IApprovalParams {
   pageIndex?: number;
   pageSize?: number;
   keyword?: string;
-  status: string;
+  status: string[];
   type: string;
 }
 

src/interfaces/project.ts

@@ -11,6 +11,7 @@ export interface IEnvironment {
   clientSdkKey: string;
   serverSdkKey: string;
   archived?: boolean;
+  enableApproval?: boolean;
 }
 
 export interface IEnvironmentParams {

src/interfaces/toggle.ts

@@ -28,6 +28,7 @@ export interface IToggle {
   locked?: boolean;
   lockedBy?: string;
   lockedTime?: string;
+  releaseStatus: string;
 }
 
 export interface IEditToggleParams {

src/layout/hooks.ts

@@ -1,6 +1,6 @@
+import { useState } from 'react';
 import { createContainer } from 'unstated-next';
 import { useLocalStorage } from 'utils/hooks';
-import { useState } from 'react';
 
 export const usePutaway = () => {
   const [ isPutAway, setIsputAway ] = useLocalStorage('sidebarIsPutAway', false);
@@ -15,12 +15,15 @@ export const useUserInfo = () => {
   const [ userInfo, saveUserInfo ] = useState({
     account: '',
     role: '',
-    approvalCount: 0,
   });
 
+  const [ approvalCount, saveApprovalCount ] = useState<number>(0);
+
   return {
     userInfo,
+    approvalCount,
     saveUserInfo,
+    saveApprovalCount,
   };
 };
 

src/layout/pageHeader.tsx

@@ -1,4 +1,4 @@
-import { SyntheticEvent, useCallback, useEffect, useState } from 'react';
+import { SyntheticEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { Popup } from 'semantic-ui-react';
 import classNames from 'classnames';
@@ -9,14 +9,14 @@ import { PROJECT_PATH } from 'router/routes';
 import { getUserInfo } from 'services/user';
 import { getApprovalList } from 'services/approval';
 import { IUser } from 'interfaces/member';
+import { IApprovalList } from 'interfaces/approval';
 import { I18NContainer } from 'hooks';
 import { APPROVAL_ROUTE_LIST, PROJECT_ROUTE_LIST, SETTING_ROUTE_LIST } from 'constants/pathname';
 import logo from 'images/logo.svg';
 import logoWhite from 'images/logo-white.svg';
 import { HeaderContainer } from './hooks';
 import { EventTrack } from 'utils/track';
 import styles from './pageHeader.module.scss';
-import { IApprovalList } from 'interfaces/approval';
 
 const PROJECT_NAV = 'projects';
 const SETTING_NAV = 'settings';
@@ -27,7 +27,7 @@ const PageHeader = () => {
   const history = useHistory();
   const location = useLocation();
   const intl = useIntl();
-  const { userInfo, saveUserInfo } = HeaderContainer.useContainer();
+  const { approvalCount, saveUserInfo, saveApprovalCount } = HeaderContainer.useContainer();
 
   const [ selectedNav, setSelectedNav ] = useState<string>('');
   const [ account, setAccount ] = useState<string>('');
@@ -40,6 +40,8 @@ const PageHeader = () => {
     setI18n
   } = I18NContainer.useContainer();
 
+  const timer: { current: NodeJS.Timeout | null } = useRef(null);
+
   const headerCls = classNames(
     styles['header'],
     {
@@ -85,43 +87,48 @@ const PageHeader = () => {
     return () => window.removeEventListener('click', handler);
   }, [menuOpen, helpMenuOpen, i18nMenuOpen]);
 
-  useEffect(() => {
-    let result: IUser;
 
+  useEffect(() => {
     getUserInfo<IUser>().then(res => {
       const { success } = res;
       if (success) {
-        const { data } = res;
-        if (data) {
-          setAccount(data?.account);
-          saveUserInfo({
-            ...data,
-            approvalCount: userInfo.approvalCount,
-          });
-          EventTrack.setUserId(data.account);
-          result = data;
+        if (res.data) {
+          setAccount(res.data.account);
+          saveUserInfo(res.data);
+          EventTrack.setUserId(res.data.account);
         }
       } else {
         message.error(intl.formatMessage({id: 'header.getuser.error.text'}));
       }
     });
+  }, [intl, saveUserInfo]);
 
+  const initApprovalList = useCallback(() => {
     getApprovalList<IApprovalList>({
 			pageIndex: 0,
-			status: 'PENDING',
+			status: ['PENDING'],
 			type: 'APPROVAL',
 			keyword: '',
 		}).then(res => {
 			const { success, data } = res;
 			if (success && data) {
 				const { totalElements } = data;
-        saveUserInfo({
-          ...result,
-          approvalCount: totalElements,
-        });
+        saveApprovalCount(totalElements);
       }
 		});
-  }, [intl, userInfo.approvalCount, saveUserInfo]);
+  }, [saveApprovalCount]);
+
+  useEffect(() => {
+    if (timer.current) {
+      clearInterval(timer.current);
+    }
+    initApprovalList();
+    timer.current = setInterval(initApprovalList, 5000);
+    
+    return () => {
+      clearInterval(timer.current as NodeJS.Timeout);
+    };
+  }, [initApprovalList]);
 
   useEffect(() => {
     const reg = new RegExp('[^/]+$');
@@ -192,7 +199,7 @@ const PageHeader = () => {
 
         <div className={approvalCls} onClick={handleGotoApproval}>
           <FormattedMessage id='approvals.center' />
-          { userInfo.approvalCount !== 0 && <span className={styles.count}>{userInfo.approvalCount > 99 ? '99+' : userInfo.approvalCount}</span> }
+          { approvalCount !== 0 && <span className={styles.count}>{approvalCount > 99 ? '99+' : approvalCount}</span> }
         </div>
       </div>
       <div className={'user'}>

src/locales/en-US.json

@@ -195,6 +195,7 @@
   "toggles.filter.status": "Status",
   "toggles.filter.search.placeholder": "Search for name, key or description",
   "toggles.table.brief": "Brief",
+  "toggles.table.publishing.status": "Publishing Status",
   "toggles.table.status": "Status",
   "toggles.table.evaluation": "Evaluation",
   "toggles.table.lastmodified": "Template Modified",
@@ -288,7 +289,7 @@
   "targeting.view.more": "Load more",
 
   "targeting.approval.tips": "Owner can set approval reviewers for this environment.",
-  "targeting.approval.operation.skip.approval": "Skip Approval",
+  "targeting.approval.operation.skip.approval": "Skip Approval and Publish",
   "targeting.approval.operation.view.changes": "Show Changes",
   "targeting.approval.operation.publish": "Publish",
   "targeting.approval.operation.discard": "Discard",
@@ -307,8 +308,8 @@
   "targeting.approval.pass.error": "Error acceptting",
   "targeting.approval.reject.success": "Successfully declined ",
   "targeting.approval.reject.error": "Error declining",
-  "targeting.approval.cancel.success": "Successfully cancelled",
-  "targeting.approval.cancel.error": "Error cancelling",
+  "targeting.approval.cancel.success": "Successfully abandoned",
+  "targeting.approval.cancel.error": "Error abandoning",
   "targeting.approval.operate.success": "Successfully updated",
   "targeting.approval.operate.error": "Error operating",
   "targeting.approval.request.success": "Successfully requested",
@@ -395,22 +396,23 @@
   "approvals.lists": "Approval list",
   "approvals.application.lists": "Application list",
   "approvals.status.pending": "Pending review",
-  "approvals.status.passed": "Accepted",
+  "approvals.status.accepted": "Accepted",
   "approvals.status.declined": "Declined",
   "approvals.status.skipped": "Skipped",
   "approvals.status.withdrawn": "Withdrawn",
   "approvals.status.published": "Published",
   "approvals.status.cancelled": "Cancelled",
   "approvals.status.unpublished": "Pending publish",
   "approvals.table.header.title": "Title",
-  "approvals.table.header.request": "Requested",
+  "approvals.table.header.request": "Requested by/at",
   "approvals.table.header.status": "Status",
-  "approvals.table.header.review": "Reviewed",
+  "approvals.table.header.review": "Operated by/at",
   "approvals.table.header.comment": "Comment",
   "approvals.table.header.published.time": "Pulished time",
   "approvals.table.header.cancelled.time": "Cancelled time",
   "approvals.table.header.skipped.time": "Skipped time",
   "approvals.table.header.withdrawn.time": "Withdrawn time",
+  "approvals.table.header.abandoned": "Changes are abandoned",
   "approvals.search.placeholder": "Please input keywords",
   "approvals.total": " approvals in total",
   "approvals.lists.error": "Error getting approval lists",

src/locales/zh-CN.json

@@ -195,6 +195,7 @@
   "toggles.filter.status": "状态",
   "toggles.filter.search.placeholder": "搜索名称、标识或描述",
   "toggles.table.brief": "简介",
+  "toggles.table.publishing.status": "发布状态",
   "toggles.table.status": "状态",
   "toggles.table.evaluation": "访问",
   "toggles.table.lastmodified": "模板更新",
@@ -288,7 +289,7 @@
   "targeting.view.more": "查看更多",
 
   "targeting.approval.tips": "支持为该项目统一设置审批人",
-  "targeting.approval.operation.skip.approval": "跳过审批",
+  "targeting.approval.operation.skip.approval": "跳过审批并发布",
   "targeting.approval.operation.view.changes": "查看变更",
   "targeting.approval.operation.publish": "发布",
   "targeting.approval.operation.discard": "取消发布",
@@ -307,8 +308,8 @@
   "targeting.approval.pass.error": "同意审批失败",
   "targeting.approval.reject.success": "拒绝审批成功",
   "targeting.approval.reject.error": "拒绝审批失败",
-  "targeting.approval.cancel.success": "取消发布成功",
-  "targeting.approval.cancel.error": "取消发布失败",
+  "targeting.approval.cancel.success": "放弃变更成功",
+  "targeting.approval.cancel.error": "放弃变更失败",
   "targeting.approval.operate.success": "操作成功",
   "targeting.approval.operate.error": "操作失败",
   "targeting.approval.request.success": "发起审批成功",
@@ -395,22 +396,23 @@
   "approvals.lists": "审批列表",
   "approvals.application.lists": "申请列表",
   "approvals.status.pending": "待审批",
-  "approvals.status.passed": "已通过",
+  "approvals.status.accepted": "已通过",
   "approvals.status.declined": "已拒绝",
   "approvals.status.skipped": "已跳过",
   "approvals.status.withdrawn": "已撤回",
   "approvals.status.published": "已发布",
   "approvals.status.cancelled": "已取消",
   "approvals.status.unpublished": "待发布",
   "approvals.table.header.title": "标题",
-  "approvals.table.header.request": "申请",
-  "approvals.table.header.status": "发布状态",
-  "approvals.table.header.review": "审批",
+  "approvals.table.header.request": "申请人/时间",
+  "approvals.table.header.status": "状态",
+  "approvals.table.header.review": "操作人/时间",
   "approvals.table.header.comment": "原因",
   "approvals.table.header.published.time": "发布时间",
   "approvals.table.header.cancelled.time": "取消时间",
   "approvals.table.header.skipped.time": "跳过时间",
   "approvals.table.header.withdrawn.time": "撤回时间",
+  "approvals.table.header.abandoned": "变更已放弃",
   "approvals.search.placeholder": "搜索变更说明",
   "approvals.total": "审批总量",
   "approvals.lists.error": "获取审批列表失败",