Skip to content

Commit ef7cc11

Browse files
g-fengchenwb-fc932227
g-fengchen
and
wb-fc932227
authored
trigger组件标准模式重构，钉钉组件文案更新 (#44)
Co-authored-by: wb-fc932227 <wb-fc932227@alibaba-inc.com>
1 parent 7deddf2 commit ef7cc11

File tree

25 files changed

+596
-431
lines changed

25 files changed

+596
-431
lines changed

‎packages/dingtalk-ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@serverless-cd/dingtalk-ui",
3-
"version": "0.0.5",
3+
"version": "0.0.8",
44
"scripts": {
55
"start": "dumi dev",
66
"docs:build": "dumi build",

‎packages/dingtalk-ui/src/constants/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ const HELP_PARMAS = {
2727
[HELP_TYPE.AT_USER_IDS]: {
2828
text: i18n('ui.notifiy.help.atUserIds.text'),
2929
},
30+
[HELP_TYPE.ENABLE]: {
31+
text: i18n('ui.notifiy.help.enable.text'),
32+
},
3033
};
3134

3235
export const HELP_RENDER = {
@@ -35,4 +38,5 @@ export const HELP_RENDER = {
3538
[HELP_TYPE.MESSAGE_CONTENT]: <TelpText {...HELP_PARMAS[HELP_TYPE.MESSAGE_CONTENT]} />,
3639
[HELP_TYPE.AT_MOBILES]: <TelpText {...HELP_PARMAS[HELP_TYPE.AT_MOBILES]} />,
3740
[HELP_TYPE.AT_USER_IDS]: <TelpText {...HELP_PARMAS[HELP_TYPE.AT_USER_IDS]} />,
41+
[HELP_TYPE.ENABLE]: <TelpText {...HELP_PARMAS[HELP_TYPE.ENABLE]} />,
3842
};

‎packages/dingtalk-ui/src/index.less‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,13 @@
2121
.switch-center {
2222
align-items: center !important;
2323
}
24+
.switch-baseline {
25+
align-items: baseline !important;
26+
}
27+
28+
.code-text {
29+
padding: 0.2em 0.4em;
30+
color: #555;
31+
background-color: #eef1f3;
32+
border-radius: 2px;
33+
}

‎packages/dingtalk-ui/src/index.md‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
Demo:
44

55
```tsx
6-
import React, { useEffect, useState } from 'react';
6+
import React, { useEffect, useState, useRef } from 'react';
77
import '@alicloud/console-components/dist/wind.css';
88
import { Field, Button } from '@alicloud/console-components';
99
import DingTalk from '@serverless-cd/dingtalk-ui';
@@ -16,10 +16,11 @@ export default () => {
1616
const { init, getValue, setValue, getValues, validate } = field;
1717
const [disabled, setDisabled] = useState(true);
1818
const values = getValues();
19-
const onClick = () => {
19+
const dingdingRef = useRef(null);
20+
const onVerify = () => {
2021
new Promise((resolve, reject) => {
21-
validate((error, values) => {
22-
console.log(values, 'values');
22+
dingdingRef.current.validate((error, values) => {
23+
console.log(error, values, 'values');
2324
return error ? reject(false) : resolve(true);
2425
});
2526
});
@@ -29,36 +30,32 @@ export default () => {
2930
setDisabled(!disabled);
3031
};
3132

33+
const onSubmit = () => {
34+
console.log(getValue('dingding'), 'dingding');
35+
};
36+
3237
const initValue = {
33-
webhook:
34-
'https://oapi.dingtalk.com/robot/send?access_token=ec05814556ffb676e4f4e554334effe6fa3fb3546f2c96969167ac685cfcf3f7',
38+
webhook: 'https://xxxxx.com',
3539
enable: true,
36-
secret: 'SEC19fc9b9192c3a7562cf20d5c0915ddd4176e1e60dc24aa96ebc83e4c3f52dfd3',
37-
message: {
38-
at: {
39-
isAtAll: true,
40-
atUserIds: [],
41-
atMobiles: [],
42-
},
43-
text: {
44-
content: 'e2e scenario: default content.',
45-
},
46-
msgtype: 'text',
47-
},
40+
secret: 'xxxxxxx',
4841
skipOnSuccess: false,
49-
isAtAll: true,
5042
atMobiles: '',
5143
atUserIds: '',
5244
messageContent: 'e2e scenario: default content.',
53-
deployFile: 's.yaml',
5445
remindType: 'owner',
5546
};
5647

5748
return (
5849
<>
59-
<DingTalk field={field} isPreview={disabled} initValue={initValue} />
60-
<Button onClick={onClick}>校验</Button>
50+
<DingTalk
51+
{...init('dingding', { initValue })}
52+
isPreview={disabled}
53+
initValue={initValue}
54+
ref={dingdingRef}
55+
/>
56+
<Button onClick={onVerify}>校验</Button>
6157
<Button onClick={onEdit}>{disabled ? '编辑' : '保存'}</Button>
58+
<Button onClick={onSubmit}>提交</Button>
6259
</>
6360
);
6461
};

‎packages/dingtalk-ui/src/index.tsx‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from 'react';
1+
import React, { forwardRef, useImperativeHandle } from 'react';
22
import { isEmpty } from 'lodash';
3-
import { Form, Input, Switch, Select, Button } from '@alicloud/console-components';
3+
import { Form, Input, Switch, Select, Field } from '@alicloud/console-components';
44
import { FORM_CUSTOM_MIDDLE_LABEL_LEFT, IProps, HELP_TYPE } from './types';
55
import { HELP_RENDER } from './constants';
66
import './index.less';
@@ -12,9 +12,19 @@ const dataSource = [
1212
{ value: 'appoint', label: i18n('ui.notifiy.remindType.appoint') },
1313
];
1414

15-
const DingTalk = (props: IProps) => {
16-
const { field, initValue = {}, className = {}, isPreview } = props;
17-
const { init, getValue } = field;
15+
const DingTalk = (props: IProps, ref) => {
16+
const { value, onChange, className = {}, isPreview } = props;
17+
const field = Field.useField({
18+
onChange: () => {
19+
onChange(getValues());
20+
},
21+
});
22+
23+
const { init, getValue, getValues, validate } = field;
24+
25+
useImperativeHandle(ref, () => ({
26+
validate,
27+
}));
1828

1929
const validateWebhook = async (rule, value, callback) => {
2030
if (!getValue('enable')) return callback();
@@ -33,11 +43,15 @@ const DingTalk = (props: IProps) => {
3343
className={className}
3444
{...FORM_CUSTOM_MIDDLE_LABEL_LEFT}
3545
>
36-
<Form.Item label={i18n('ui.notifiy.enable.label')} className="switch-center">
46+
<Form.Item
47+
label={i18n('ui.notifiy.enable.label')}
48+
className="switch-baseline"
49+
help={HELP_RENDER[HELP_TYPE.ENABLE]}
50+
>
3751
<Switch
3852
{...(init('enable', {
3953
valueName: 'checked',
40-
initValue: initValue['enable'],
54+
initValue: value['enable'],
4155
}) as {})}
4256
></Switch>
4357
</Form.Item>
@@ -50,7 +64,7 @@ const DingTalk = (props: IProps) => {
5064
>
5165
<Input
5266
{...init('webhook', {
53-
initValue: initValue['webhook'],
67+
initValue: value['webhook'],
5468
rules: [{ validator: validateWebhook }],
5569
})}
5670
placeholder={i18n('ui.notifiy.webhook.placeholder')}
@@ -59,16 +73,16 @@ const DingTalk = (props: IProps) => {
5973
</Form.Item>
6074
<Form.Item label={i18n('ui.notifiy.secret.label')} help={HELP_RENDER[HELP_TYPE.SECRET]}>
6175
<Input
62-
{...init('secret', { initValue: initValue['secret'] })}
76+
{...init('secret', { initValue: value['secret'] })}
6377
placeholder={i18n('ui.notifiy.secret.placeholder')}
6478
className="full-width"
6579
/>
6680
</Form.Item>
67-
<Form.Item label={i18n('ui.notifiy.skipOnSuccess.label')}>
81+
<Form.Item label={i18n('ui.notifiy.skipOnSuccess.label')} className="switch-center">
6882
<Switch
6983
{...(init('skipOnSuccess', {
7084
valueName: 'checked',
71-
initValue: initValue['skipOnSuccess'],
85+
initValue: value['skipOnSuccess'],
7286
}) as {})}
7387
></Switch>
7488
</Form.Item>
@@ -77,7 +91,7 @@ const DingTalk = (props: IProps) => {
7791
help={HELP_RENDER[HELP_TYPE.MESSAGE_CONTENT]}
7892
>
7993
<Input.TextArea
80-
{...init('messageContent', { initValue: initValue['messageContent'] })}
94+
{...init('messageContent', { initValue: value['messageContent'] })}
8195
placeholder={i18n('ui.notifiy.messageContent.placeholder')}
8296
className="full-width"
8397
/>
@@ -86,7 +100,7 @@ const DingTalk = (props: IProps) => {
86100
<Select
87101
placeholder={i18n('ui.notifiy.remindType.placeholder')}
88102
{...(init('remindType', {
89-
initValue: initValue['remindType'] || 'needless',
103+
initValue: value['remindType'] || 'needless',
90104
}) as {})}
91105
dataSource={dataSource}
92106
className="full-width"
@@ -99,21 +113,19 @@ const DingTalk = (props: IProps) => {
99113
help={HELP_RENDER[HELP_TYPE.AT_MOBILES]}
100114
>
101115
<Input
102-
{...init('atMobiles', { initValue: initValue['atMobiles'] })}
116+
{...init('atMobiles', { initValue: value['atMobiles'] })}
103117
placeholder={i18n('ui.notifiy.atMobiles.placeholder')}
104118
className="full-width"
105-
disabled={getValue('isAtAll')}
106119
/>
107120
</Form.Item>
108121
<Form.Item
109122
label={i18n('ui.notifiy.atUserIds.label')}
110123
help={HELP_RENDER[HELP_TYPE.AT_USER_IDS]}
111124
>
112125
<Input
113-
{...init('atUserIds', { initValue: initValue['atUserIds'] })}
126+
{...init('atUserIds', { initValue: value['atUserIds'] })}
114127
placeholder={i18n('ui.notifiy.atUserIds.placeholder')}
115128
className="full-width"
116-
disabled={getValue('isAtAll')}
117129
/>
118130
</Form.Item>
119131
</>
@@ -124,4 +136,4 @@ const DingTalk = (props: IProps) => {
124136
);
125137
};
126138

127-
export default DingTalk;
139+
export default forwardRef(DingTalk);

‎packages/dingtalk-ui/src/types.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ interface fieldProps {
1818
}
1919

2020
export interface IProps {
21-
field: fieldProps;
22-
initValue?: object;
21+
value?: object;
22+
onChange?: Function;
2323
className?: object | any;
2424
isPreview?: boolean;
2525
}
@@ -30,4 +30,5 @@ export enum HELP_TYPE {
3030
MESSAGE_CONTENT = 'messageContent',
3131
AT_MOBILES = 'atMobiles',
3232
AT_USER_IDS = 'atUserIds',
33+
ENABLE = 'enable',
3334
}

‎packages/dingtalk-ui/src/utils/i18n/en.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,12 @@ export default {
3131
'ui.notifiy.help.secret.text':
3232
'In order to ensure the security of custom robots, it is recommended that you configure this option. For details, please refer to',
3333
'ui.notifiy.help.secret.link.label': 'DingTalk custom robot security settings document',
34-
'ui.notifiy.help.messageContent.text': `Supports defining messages through variables, including: application name {{ .appName }}, environment name {{ .envName }}, deployment version {{ .versionId }}, current execution task name {{ .taskName }}, current execution task Details {{ .currentTask }}, whether the task execution is successful {{ .success }}, task failure information {{ .error }}.
35-
</br>*For example: the execution result of the application "{{ .appName }}" in {{ .envName }} is {{ .success }}, the current task details are {{ .currentTask }}, and the failure information is {{ .error }}`,
34+
'ui.notifiy.help.messageContent.text': `Supports defining messages through variables, including: application name <span class="code-text">{{ .appName }}</span>, environment name <span class="code-text">{{ .envName }} </span>, deployment version <span class="code-text">{{ .versionId }}</span>, currently executing task name <span class="code-text">{{ .taskName }}</span> span>, the current execution task details <span class="code-text">{{ .currentTask }}</span>, whether the task execution is successful <span class="code-text">{{ .success }}</span> span> , task failure message <span class="code-text">{{ .error }}</span> .
35+
</br>*Example: Apply "<span class="code-text">{{ .appName }}</span>" in <span class="code-text">{{ .envName }}</span The execution result in > is <span class="code-text">{{ .success }}</span>, and the current task details are <span class="code-text">{{ .currentTask }}</span> , the failure message is <span class="code-text">{{ .error }}</span>`,
3636
'ui.notifiy.help.atMobiles.text':
3737
'If you need @multiple users, you can use English comma "," to split, for example: 135xxxxxxxx, 132xxxxxxxx',
3838
'ui.notifiy.help.atUserIds.text':
3939
'If you need @multiple users, you can use English comma "," to split, for example: dfounderliu, mydingding',
40+
'ui.notifiy.help.enable.text':
41+
'After the DingTalk robot needs to be activated and configured here, the DingTalk robot notifications in each process of the pipeline will take effect.',
4042
};

‎packages/dingtalk-ui/src/utils/i18n/ja.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,12 @@ export default {
3131
'ui.notifiy.help.secret.text':
3232
'カスタム ロボットのセキュリティを確保するために、このオプションを構成することをお勧めします。詳細については、 を参照してください。',
3333
'ui.notifiy.help.secret.link.label': 'DingTalk カスタム ロボット セキュリティ設定ドキュメント',
34-
'ui.notifiy.help.messageContent.text': `アプリケーション名 {{ .appName }}、環境名 {{ .envName }}、デプロイメント バージョン {{ .versionId }}、現在の実行タスク名 {{ .taskName }}、現在の実行タスクの詳細など、変数によるメッセージの定義をサポートします。 {{ .currentTask }}、タスクの実行が成功したかどうか {{ .success }}、タスクの失敗情報 {{ .error }}。
35-
</br>*例: {{ .envName }} 内のアプリケーション「{{ .appName }}」の実行結果は {{ .success }}、現在のタスクの詳細は {{ .currentTask }}、障害情報は {{ .error }} です`,
34+
'ui.notifiy.help.messageContent.text': `アプリケーション名 <span class="code-text">{{ .appName }}</span>、環境名 <span class="code-text">{{ .envName }} < などの変数によるメッセージの定義をサポート/span>、デプロイ バージョン <span class="code-text">{{ .versionId }}</span>、現在実行中のタスク名 <span class="code-text">{{ .taskName }}</span > span>、現在の実行タスクの詳細 <span class="code-text">{{ .currentTask }}</span>、タスクの実行が成功したかどうか <span class="code-text">{{ .success }}</span> span> 、タスク失敗メッセージ <span class="code-text">{{ .error }}</span> .
35+
</br>*例: <span class="code-text">{{ .envName }}</span に "<span class="code-text">{{ .appName }}</span>" を適用します。 > の実行結果は <span class="code-text">{{ .success }}</span> で、現在のタスクの詳細は <span class="code-text">{{ .currentTask }}< です。 /span> 、失敗メッセージは <span class="code-text">{{ .error }}</span> です`,
3636
'ui.notifiy.help.atMobiles.text':
3737
'@複数のユーザーが必要な場合は、英語のコンマ「,」を使用して分割できます。例: 135xxxxxxxx, 132xxxxxxxx',
3838
'ui.notifiy.help.atUserIds.text':
3939
'@複数のユーザーが必要な場合は、英語のカンマ「,」を使用して分割できます。例: dfounderliu, mydingding',
40+
'ui.notifiy.help.enable.text':
41+
'ここで DingTalk ロボットをアクティブ化して構成する必要があると、パイプラインの各プロセスでの DingTalk ロボット通知が有効になります。',
4042
};

‎packages/dingtalk-ui/src/utils/i18n/zh.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,12 @@ export default {
2626
'ui.notifiy.help.webhook.link.label': '钉钉自定义机器人接入文档',
2727
'ui.notifiy.help.secret.text': '为保障自定义机器人安全，推荐您配置该选项，具体内容可以参考',
2828
'ui.notifiy.help.secret.link.label': '钉钉自定义机器人安全设置文档',
29-
'ui.notifiy.help.messageContent.text': `支持通过变量进行定义消息，包括:应用名{{ .appName }}，环境名{{ .envName }}，部署版本{{ .versionId }}，当前执行任务名{{ .taskName }}，当前执行任务详情{{ .currentTask }}，任务执行是否成功{{ .success }} ，任务失败信息{{ .error }} 。
30-
</br>*例如:应用“{{ .appName }}”在{{ .envName }}中执行结果为{{ .success }}，当前任务详情为{{ .currentTask }}，失败信息为{{ .error }}`,
29+
'ui.notifiy.help.messageContent.text': `支持通过变量进行定义消息，包括:应用名<span class="code-text">{{ .appName }}</span>，环境名<span class="code-text">{{ .envName }}</span>，部署版本<span class="code-text">{{ .versionId }}</span>，当前执行任务名<span class="code-text">{{ .taskName }}</span>，当前执行任务详情<span class="code-text">{{ .currentTask }}</span>，任务执行是否成功<span class="code-text">{{ .success }}</span> ，任务失败信息<span class="code-text">{{ .error }}</span> 。
30+
</br>*例如:应用“<span class="code-text">{{ .appName }}</span>”在<span class="code-text">{{ .envName }}</span>中执行结果为<span class="code-text">{{ .success }}</span>，当前任务详情为<span class="code-text">{{ .currentTask }}</span>，失败信息为<span class="code-text">{{ .error }}</span>`,
3131
'ui.notifiy.help.atMobiles.text':
3232
'如果需要@多个用户,可以用英文逗号“,”进行分割,例如:135xxxxxxxx,132xxxxxxxx',
3333
'ui.notifiy.help.atUserIds.text':
3434
'如果需要@多个用户,可以用英文逗号“,”进行分割,例如:dfounderliu, mydingding',
35+
'ui.notifiy.help.enable.text':
36+
'需要在此处开通并配置钉钉机器人后，流水线各个流程中的钉钉机器人通知才会生效。',
3537
};

‎packages/trigger-ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@serverless-cd/trigger-ui",
3-
"version": "0.0.5",
3+
"version": "0.0.15",
44
"scripts": {
55
"start": "dumi dev",
66
"docs:build": "dumi build",

0 commit comments

Comments
 (0)