Skip to content

Commit 09529d7

Browse files
LordofAvernusLordofAvernus
authored
Merge pull request #866 from actiontech/feat-3047-workflow-approval-comments
feat: approval comment UI for SQL and data export workflows
2 parents c22013d + 501c0cf commit 09529d7

40 files changed

Lines changed: 507 additions & 85 deletions

File tree

‎packages/base/src/locale/en-US/dmsDataExport.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export default {
9898
},
9999
detail: {
100100
reject: {
101-
reason: '{{name}} rejected the current task, the reason is:',
101+
reason: '{{name}} rejected the current task, approval comment:',
102102
tips: 'When the task is rejected, the task creator needs to modify it and resubmit it for review. (currently, modifying the task is not supported.)'
103103
},
104104
exportResult: {
@@ -163,7 +163,7 @@ export default {
163163
title: 'Reject',
164164
text: 'Reject'
165165
},
166-
reason: 'Reject reason',
166+
reason: 'Approval comment',
167167
text: 'Reject audit',
168168
tips: 'The current operation will reject all export tasks under the task. please operate with caution!',
169169
successTips: 'Task rejected successfully!'
@@ -179,7 +179,10 @@ export default {
179179
unknown: 'Unknown step',
180180
waitAudit: 'Waiting for auditor operation',
181181
alreadyRejected: 'Task has been rejected',
182-
alreadyClosed: 'Task has been closed'
182+
alreadyClosed: 'Task has been closed',
183+
approvalComment: 'Approval comment',
184+
notFilled: 'Not filled',
185+
confirmApprove: 'Confirm approval'
183186
}
184187
},
185188
common: {

‎packages/base/src/locale/zh-CN/dmsDataExport.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export default {
109109
},
110110
detail: {
111111
reject: {
112-
reason: '{{name}}驳回了当前工单，驳回原因为：',
112+
reason: '{{name}}驳回了当前工单，审批意见为：',
113113
tips: '当工单被驳回时，工单创建者需要对其进行修改，然后重新提交审核。（目前暂不支持修改工单。）'
114114
},
115115
exportResult: {
@@ -173,7 +173,7 @@ export default {
173173
title: '驳回',
174174
text: '驳回'
175175
},
176-
reason: '驳回原因',
176+
reason: '审批意见',
177177
text: '审核驳回',
178178
tips: '当前操作将驳回工单下所有导出任务，请谨慎操作！',
179179
successTips: '工单驳回成功！'
@@ -189,7 +189,10 @@ export default {
189189
unknown: '未知步骤',
190190
waitAudit: '等待审核人操作',
191191
alreadyRejected: '工单已被驳回',
192-
alreadyClosed: '工单已被关闭'
192+
alreadyClosed: '工单已被关闭',
193+
approvalComment: '审批意见',
194+
notFilled: '未填写',
195+
confirmApprove: '确认通过'
193196
}
194197
},
195198
common: {

‎packages/base/src/page/DataExportManagement/Detail/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -848,6 +848,17 @@ exports[`test base/DataExport/Detail should match snapshot 1`] = `
848848
</span>
849849
</div>
850850
</div>
851+
<div
852+
class="step-info-approval-comment"
853+
>
854+
<span>
855+
审批意见
856+
：
857+
</span>
858+
<span>
859+
未填写
860+
</span>
861+
</div>
851862
</div>
852863
</div>
853864
</div>
@@ -3453,6 +3464,17 @@ exports[`test base/DataExport/Detail should match snapshot 2`] = `
34533464
</span>
34543465
</div>
34553466
</div>
3467+
<div
3468+
class="step-info-approval-comment"
3469+
>
3470+
<span>
3471+
审批意见
3472+
：
3473+
</span>
3474+
<span>
3475+
未填写
3476+
</span>
3477+
</div>
34563478
</div>
34573479
</div>
34583480
</div>
@@ -6034,6 +6056,17 @@ exports[`test base/DataExport/Detail should match snapshot 3`] = `
60346056
</span>
60356057
</div>
60366058
</div>
6059+
<div
6060+
class="step-info-approval-comment"
6061+
>
6062+
<span>
6063+
审批意见
6064+
：
6065+
</span>
6066+
<span>
6067+
未填写
6068+
</span>
6069+
</div>
60376070
</div>
60386071
</div>
60396072
</div>
@@ -8615,6 +8648,17 @@ exports[`test base/DataExport/Detail should match snapshot 4`] = `
86158648
</span>
86168649
</div>
86178650
</div>
8651+
<div
8652+
class="step-info-approval-comment"
8653+
>
8654+
<span>
8655+
审批意见
8656+
：
8657+
</span>
8658+
<span>
8659+
未填写
8660+
</span>
8661+
</div>
86188662
</div>
86198663
</div>
86208664
</div>
@@ -8922,7 +8966,7 @@ exports[`test base/DataExport/Detail should match snapshot with reject workflow
89228966
<div
89238967
class="reject-workflow-reason-content-text"
89248968
>
8925-
admin驳回了当前工单，驳回原因为：
8969+
admin驳回了当前工单，审批意见为：
89268970
<span
89278971
class="reject-workflow-reason-content-text-reason"
89288972
/>
@@ -11230,6 +11274,17 @@ exports[`test base/DataExport/Detail should match snapshot with reject workflow
1123011274
工单已被驳回
1123111275
</span>
1123211276
</div>
11277+
<div
11278+
class="step-info-approval-comment"
11279+
>
11280+
<span>
11281+
审批意见
11282+
：
11283+
</span>
11284+
<span>
11285+
未填写
11286+
</span>
11287+
</div>
1123311288
</div>
1123411289
</div>
1123511290
</div>

‎packages/base/src/page/DataExportManagement/Detail/components/PageHeaderAction/ApproveWorkflowModal/index.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { BasicButton, BasicInput, BasicModal } from '@actiontech/dms-kit';
2+
import { Form } from 'antd';
3+
import { useTranslation } from 'react-i18next';
4+
import {
5+
ApproveWorkflowModalFormFields,
6+
ApproveWorkflowModalProps
7+
} from './index.type';
8+
9+
const APPROVAL_COMMENT_MAX_LENGTH = 255;
10+
11+
const ApproveWorkflowModal: React.FC<ApproveWorkflowModalProps> = ({
12+
open,
13+
close,
14+
loading,
15+
approve
16+
}) => {
17+
const [form] = Form.useForm<ApproveWorkflowModalFormFields>();
18+
const { t } = useTranslation();
19+
const resetAndCloseApproveModal = () => {
20+
form.resetFields();
21+
close();
22+
};
23+
return (
24+
<BasicModal
25+
title={t('dmsDataExport.detail.action.approve.text')}
26+
open={open}
27+
closable={false}
28+
footer={
29+
<>
30+
<BasicButton onClick={resetAndCloseApproveModal} disabled={loading}>
31+
{t('common.cancel')}
32+
</BasicButton>
33+
<BasicButton
34+
type="primary"
35+
loading={loading}
36+
disabled={loading}
37+
onClick={async () => {
38+
const values = await form.validateFields();
39+
await approve({
40+
reason: values.reason?.trim()
41+
});
42+
resetAndCloseApproveModal();
43+
}}
44+
>
45+
{t('dmsDataExport.detail.operator.confirmApprove')}
46+
</BasicButton>
47+
</>
48+
}
49+
>
50+
<Form form={form} layout="vertical">
51+
<Form.Item
52+
label={t('dmsDataExport.detail.operator.approvalComment')}
53+
name="reason"
54+
rules={[
55+
{
56+
max: APPROVAL_COMMENT_MAX_LENGTH,
57+
message: t('common.form.rule.maxLength', {
58+
max: APPROVAL_COMMENT_MAX_LENGTH
59+
})
60+
}
61+
]}
62+
>
63+
<BasicInput.TextArea
64+
placeholder={t('common.form.placeholder.input')}
65+
rows={3}
66+
maxLength={APPROVAL_COMMENT_MAX_LENGTH}
67+
/>
68+
</Form.Item>
69+
</Form>
70+
</BasicModal>
71+
);
72+
};
73+
export default ApproveWorkflowModal;

‎packages/base/src/page/DataExportManagement/Detail/components/PageHeaderAction/ApproveWorkflowModal/index.type.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export type ApproveWorkflowModalProps = {
2+
open: boolean;
3+
approve: (
4+
values: ApproveWorkflowModalFormFields
5+
) => Promise<void> | undefined;
6+
loading: boolean;
7+
close: () => void;
8+
};
9+
10+
export type ApproveWorkflowModalFormFields = {
11+
reason?: string;
12+
};

‎packages/base/src/page/DataExportManagement/Detail/components/PageHeaderAction/__tests__/index.test.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
mockDataExportDetailRedux,
1010
mockUseDataExportDetailReduxManage
1111
} from '../../../testUtils/mockUseDataExportDetailReduxManage';
12-
import { fireEvent, screen } from '@testing-library/react';
12+
import { act, fireEvent, screen } from '@testing-library/react';
1313
import { mockUsePermission } from '@actiontech/shared/lib/testUtil/mockHook/mockUsePermission';
1414

1515
describe('test base/DataExport/Detail/PageHeaderAction', () => {
@@ -48,9 +48,16 @@ describe('test base/DataExport/Detail/PageHeaderAction', () => {
4848
).toHaveBeenCalledTimes(1);
4949
});
5050

51-
it('clicked approve workflow button', () => {
51+
it('clicked approve workflow button', async () => {
5252
baseSuperRender(<ExportDetailPageHeaderAction />);
5353
fireEvent.click(screen.getByText('审核通过'));
54+
expect(
55+
mockActionButtonStateData.approveWorkflowButtonMeta.action
56+
).not.toHaveBeenCalled();
57+
expect(screen.getByText('确认通过')).toBeInTheDocument();
58+
await act(async () => {
59+
fireEvent.click(screen.getByText('确认通过'));
60+
});
5461
expect(
5562
mockActionButtonStateData.approveWorkflowButtonMeta.action
5663
).toHaveBeenCalledTimes(1);

‎packages/base/src/page/DataExportManagement/Detail/components/PageHeaderAction/__tests__/useActionButtonState.test.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,8 @@ describe('test useActionButtonState', () => {
238238
result.current.approveWorkflowButtonMeta.action();
239239
expect(mockExportDetailActionData.approveWorkflow).toHaveBeenCalledTimes(1);
240240
expect(mockExportDetailActionData.approveWorkflow).toHaveBeenCalledWith(
241-
workflowID
241+
workflowID,
242+
undefined
242243
);
243244

244245
result.current.closeWorkflowButtonMeta.action();

‎packages/base/src/page/DataExportManagement/Detail/components/PageHeaderAction/actions.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
PermissionControl
55
} from '@actiontech/shared/lib/features';
66
import { ActionButton } from '@actiontech/shared';
7-
import { ActionMeta } from './index.type';
7+
import { ActionMeta, ApproveActionMeta } from './index.type';
88
import { Divider } from 'antd';
99
export const CloseWorkflowAction = (closeWorkflowButtonMeta: ActionMeta) => {
1010
return (
@@ -41,7 +41,8 @@ export const RejectWorkflowAction = (rejectWorkflowButtonMeta: ActionMeta) => {
4141
);
4242
};
4343
export const ApproveWorkflowAction = (
44-
approveWorkflowButtonMeta: ActionMeta
44+
approveWorkflowButtonMeta: ApproveActionMeta,
45+
openApproveModal: () => void
4546
) => {
4647
return (
4748
<PermissionControl
@@ -52,7 +53,7 @@ export const ApproveWorkflowAction = (
5253
text={t('dmsDataExport.detail.action.approve.text')}
5354
hidden={approveWorkflowButtonMeta.hidden}
5455
disabled={approveWorkflowButtonMeta.disabled}
55-
onClick={approveWorkflowButtonMeta.action}
56+
onClick={openApproveModal}
5657
loading={approveWorkflowButtonMeta.loading}
5758
type="primary"
5859
/>

‎packages/base/src/page/DataExportManagement/Detail/components/PageHeaderAction/index.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,25 @@ import useDataExportDetailReduxManage from '../../hooks/index.redux';
33
import { ExportDetailPageHeaderExtraStyleWrapper } from './style';
44
import { EmptyBox } from '@actiontech/dms-kit';
55
import { Divider, message } from 'antd';
6+
import { useBoolean } from 'ahooks';
67
import useActionButtonState from './useActionButtonState';
78
import {
89
CloseWorkflowAction,
910
RejectWorkflowAction,
1011
ApproveWorkflowAction,
1112
ExecuteWorkflowAction
1213
} from './actions';
14+
import ApproveWorkflowModal from './ApproveWorkflowModal';
15+
1316
const ExportDetailPageHeaderAction: React.FC = () => {
1417
const { t } = useTranslation();
1518
const [messageApi, messageContextHolder] = message.useMessage();
1619
const { workflowStepOpen, updateWorkflowStepOpen } =
1720
useDataExportDetailReduxManage();
21+
const [
22+
approveModalVisible,
23+
{ setTrue: openApproveModal, setFalse: closeApproveModal }
24+
] = useBoolean();
1825
const workflowDetailClickHandle = () => {
1926
updateWorkflowStepOpen(true);
2027
};
@@ -30,7 +37,7 @@ const ExportDetailPageHeaderAction: React.FC = () => {
3037

3138
{CloseWorkflowAction(closeWorkflowButtonMeta)}
3239
{RejectWorkflowAction(rejectWorkflowButtonMeta)}
33-
{ApproveWorkflowAction(approveWorkflowButtonMeta)}
40+
{ApproveWorkflowAction(approveWorkflowButtonMeta, openApproveModal)}
3441
{ExecuteWorkflowAction(executeExportButtonMeta)}
3542

3643
<EmptyBox
@@ -55,6 +62,15 @@ const ExportDetailPageHeaderAction: React.FC = () => {
5562
>
5663
{t('dmsDataExport.detail.action.workflowDetail')}
5764
</div>
65+
66+
<ApproveWorkflowModal
67+
open={approveModalVisible}
68+
approve={async (values) => {
69+
await approveWorkflowButtonMeta.action(values.reason);
70+
}}
71+
loading={approveWorkflowButtonMeta.loading}
72+
close={closeApproveModal}
73+
/>
5874
</ExportDetailPageHeaderExtraStyleWrapper>
5975
);
6076
};

‎packages/base/src/page/DataExportManagement/Detail/components/PageHeaderAction/index.type.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,10 @@ export type ActionMeta = {
44
hidden: boolean;
55
disabled?: boolean;
66
};
7+
8+
export type ApproveActionMeta = {
9+
action: (reason?: string) => void | Promise<void>;
10+
loading: boolean;
11+
hidden: boolean;
12+
disabled?: boolean;
13+
};

0 commit comments

Comments
 (0)