Fix trigger ui issue (#75)

Co-authored-by: 灵轮 <[email protected]>
serverless-cd · May 6, 2024 · 3d74b22 · 3d74b22
1 parent 95b3f6f
commit 3d74b22
Show file tree

Hide file tree

Showing 8 changed files with 215 additions and 5 deletions.
diff --git a/packages/trigger-ui/package.json b/packages/trigger-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@serverless-cd/trigger-ui",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -35,4 +35,4 @@
     "father": "^4.0.0-rc.2"
   },
   "repository": "[email protected]:g-fengchen/ui.git"
-}
+}
diff --git a/packages/trigger-ui/src/TriggerContent.tsx b/packages/trigger-ui/src/TriggerContent.tsx
@@ -19,6 +19,7 @@ const Trigger = (props: TriggersProps, ref) => {
     loading,
     branchList,
     isRefresh,
+    isPrMatchNew,
     onRefresh,
     valueRender = defaultValueRender,
     selectBranchConfig = defaultSelectBranchConfig,
@@ -72,6 +73,7 @@ const Trigger = (props: TriggersProps, ref) => {
           valueRender={valueRender}
           ref={strictRef}
           isRefresh={isRefresh}
+          isPrMatchNew={isPrMatchNew}
           onRefresh={onRefresh}
         />
       )}

diff --git a/packages/trigger-ui/src/strict-mode/PrMatchNewContent.tsx b/packages/trigger-ui/src/strict-mode/PrMatchNewContent.tsx
@@ -0,0 +1,185 @@
+import React from 'react';
+import { map, isEmpty, get } from 'lodash';
+import { Select, Form, Checkbox, Input, Radio } from '@alicloud/console-components';
+import { ActivityTypes } from '../constants';
+import { i18n } from '../utils';
+import Refresh from './Refresh';
+import '../index.less';
+
+const { Group: CheckboxGroup } = Checkbox;
+const RadioGroup = Radio.Group;
+
+type Align = 'left' | 'right' | undefined;
+
+interface IProps {
+  type: string;
+  field: object | any;
+  branchList: any[];
+  initValue: object | any;
+  disabled: boolean;
+  loading: boolean;
+  onRefresh: Function;
+  isRefresh: boolean;
+  valueRender: Function;
+  selectBranchConfig: any;
+}
+
+const FORM_LAYOUT = {
+  labelCol: {
+    fixedSpan: 4,
+  },
+  labelTextAlign: 'left' as Align,
+};
+
+
+const PrMatchNewContent = (props: IProps) => {
+  const {
+    type,
+    field,
+    branchList,
+    initValue,
+    disabled,
+    loading,
+    onRefresh,
+    isRefresh,
+    valueRender,
+    selectBranchConfig,
+  } = props;
+  const { init, getValue } = field;
+
+  const filterTargetValue = (value) => {
+    if (isEmpty(branchList)) return [];
+    return map(branchList, (branchItem) => {
+      let newItem = { ...branchItem };
+      newItem.disabled = newItem.value === value;
+      return newItem;
+    });
+  };
+
+  return (
+    <Form field={field} {...FORM_LAYOUT}>
+      <Form.Item
+        required
+        label={i18n('ui.strict.on.pr.type.label')}
+        style={{ display: 'flex', alignItems: 'flex-start' }}
+      >
+        <CheckboxGroup
+          {...init(`${type}Types`, {
+            initValue: initValue[`${type}Types`] || ['merged'],
+            rules: [
+              {
+                required: true,
+                trigger: 'onChange',
+                message: i18n('ui.trigger.activity.type.verify.text'),
+              },
+            ],
+          })}
+          dataSource={ActivityTypes}
+          disabled={disabled}
+        />
+      </Form.Item>
+      <div style={{ marginBottom: 15, color: '#333' }}>
+        {i18n('ui.trigger.match.type.branches')}
+      </div>
+      <Form.Item
+        required
+        label={i18n('ui.trigger.target.branch')}
+        className="full-width"
+        extra={
+          isEmpty(branchList) && !loading ? (
+            <span style={{ color: '#ed6a0c' }}>{i18n('ui.strict.branch.list.null.help')}</span>
+          ) : (
+            i18n('ui.strict.on.pr.branch.help')
+          )
+        }
+      >
+        <div style={{ position: 'relative' }}>
+          <Form.Item style={{ marginBottom: 0 }}>
+            {!isEmpty(branchList) ? (
+              <Select
+                className="full-width"
+                {...init(`${type}Target`, {
+                  initValue: initValue[`${type}Target`],
+                  rules: [{ required: true, message: i18n('ui.branch.verify.text') }],
+                })}
+                dataSource={branchList}
+                valueRender={valueRender}
+                placeholder={i18n('ui.trigger.match.branch.precise.value')}
+                disabled={disabled || loading || get(selectBranchConfig, 'disabled', false)}
+                state={loading ? 'loading' : undefined}
+              />
+            ) : (
+              <Input
+                className="full-width"
+                {...init(`${type}Target`, {
+                  initValue: initValue[`${type}Target`],
+                  rules: [{ required: true, message: i18n('ui.branch.verify.text') }],
+                })}
+                disabled={disabled || loading}
+                state={loading ? 'loading' : undefined}
+                placeholder={i18n('ui.trigger.match.branch.precise.value')}
+              />
+            )}
+          </Form.Item>
+          {isRefresh && <Refresh style={{ top: 0 }} onRefresh={onRefresh} />}
+        </div>
+      </Form.Item>
+      <Form.Item
+        label={i18n('ui.trigger.source.branch')}
+        className="full-width"
+        help={i18n('ui.strict.on.pr.source.help')}
+      >
+        <RadioGroup
+          {...init(`${type}Trigger`, {
+              initValue: initValue[`${type}Trigger`] || 'manual',
+              props: {
+                onChange: (value) => {
+                  if (value === 'manual') {// 切换手动选择, 如果输入框为字符串,则晴空Source
+                    if (typeof getValue(`${type}Source`)==='string') {
+                      field.setValues({
+                        [`${type}Source`]: [],
+                      });
+                    }
+                  }
+                },
+              },
+          })}
+          style={{ display: 'flex', flexDirection: 'row', marginBottom: 16 }}
+          >
+          <Radio id="manual" value="manual" label="手动选择" />
+          <Radio id="reg" value="reg" label="正则过滤" />
+        </RadioGroup>
+
+        {getValue(`${type}Trigger`) === 'manual' ? (
+          <div style={{ position: 'relative' }}>
+            <Select
+              className="full-width"
+              {...init(`${type}Source`, {
+                initValue: initValue[`${type}Source`] || [],
+              })}
+              valueRender={valueRender}
+              dataSource={filterTargetValue(getValue(`${type}Target`))}
+              placeholder={i18n('ui.trigger.match.source.branch')}
+              disabled={disabled || loading}
+              state={loading ? 'loading' : undefined}
+              mode='tag'
+            />
+            {isRefresh && <Refresh style={{ top: 0 }} onRefresh={onRefresh} />}
+          </div>
+        ) : (
+          <Input
+            className="full-width"
+            {...init(`${type}Source`, {
+              initValue: initValue[`${type}Source`],
+            })}
+            placeholder={i18n('ui.trigger.match.source.branch')}
+            disabled={disabled || loading}
+            state={loading ? 'loading' : undefined}
+          />
+        )}
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default PrMatchNewContent;
diff --git a/packages/trigger-ui/src/strict-mode/StrictMatch.tsx b/packages/trigger-ui/src/strict-mode/StrictMatch.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Select, Input, Form, Message } from '@alicloud/console-components';
 import { STRICT_TYPE } from '../constants';
 import PrMatchContent from './PrMatchContent';
+import PrMatchNewContent from './PrMatchNewContent';
 import Refresh from './Refresh';
 import { i18n } from '../utils';
 import '../index.less';
@@ -17,6 +18,7 @@ interface IProps {
   loading: boolean;
   onRefresh: Function;
   isRefresh: boolean;
+  isPrMatchNew?: boolean;
   setBranchList: Function;
   valueRender: Function;
   selectBranchConfig: any;
@@ -32,6 +34,7 @@ const StrictMatch = (props: IProps) => {
     disabled,
     loading,
     onRefresh,
+    isPrMatchNew,
     isRefresh,
     valueRender,
     selectBranchConfig,
@@ -91,7 +94,20 @@ const StrictMatch = (props: IProps) => {
           />
         )}
         {type === STRICT_TYPE.PUSH_REQUEST && (
-          <PrMatchContent
+            isPrMatchNew ? <PrMatchNewContent
+            {...{
+              type,
+              field,
+              branchList,
+              initValue,
+              disabled,
+              loading,
+              onRefresh,
+              isRefresh,
+              valueRender,
+              selectBranchConfig,
+            }}
+          /> :<PrMatchContent
             {...{
               type,
               field,

diff --git a/packages/trigger-ui/src/strict-mode/index.tsx b/packages/trigger-ui/src/strict-mode/index.tsx
@@ -15,6 +15,7 @@ const StrictModeTrigger = (props: StrictModeProps, ref) => {
     branchList,
     isRefresh,
     onRefresh,
+    isPrMatchNew=false,
     initValue,
     onChange = noop,
     valueRender,
@@ -59,6 +60,7 @@ const StrictModeTrigger = (props: StrictModeProps, ref) => {
                 disabled={disabled}
                 initValue={initValue}
                 isRefresh={isRefresh}
+                isPrMatchNew={isPrMatchNew}
                 onRefresh={onRefresh}
                 branchList={newBranchList}
                 valueRender={valueRender}

diff --git a/packages/trigger-ui/src/types.tsx b/packages/trigger-ui/src/types.tsx
@@ -38,6 +38,7 @@ export interface TriggersProps {
   branchList?: Array<any>;
   loading?: boolean;
   isRefresh?: boolean;
+  isPrMatchNew?: boolean;
   onRefresh?: Function;
   valueRender?: Function;
   selectBranchConfig: any;
@@ -51,6 +52,7 @@ export interface StrictModeProps {
   branchList?: Array<any>;
   loading?: boolean;
   isRefresh?: boolean;
+  isPrMatchNew?: boolean;
   onRefresh?: Function;
   ref?: any;
   valueRender?: Function;

diff --git a/packages/trigger-ui/src/utils/i18n/zh.tsx b/packages/trigger-ui/src/utils/i18n/zh.tsx
@@ -11,7 +11,7 @@ export default {
   'ui.trigger.match.type.branches': '分支匹配',
   'ui.trigger.match.type.tag': 'Tag 匹配',
   'ui.trigger.match.branch.prefix.value': '请填写分支前缀，不填默认监听所有分支',
-  'ui.trigger.match.source.branch': '请填写来源分支',
+  'ui.trigger.match.source.branch': '请选择分支名称或输入正则表达式指定',
   'ui.trigger.match.branch.precise.value': '请填写完整分支名称',
   'ui.trigger.match.branch.include.value': '请填写正则表达式',
   'ui.trigger.match.branch.exclude.value': '请填写完整分支名称',

diff --git a/packages/trigger-ui/src/utils/util.tsx b/packages/trigger-ui/src/utils/util.tsx
@@ -123,6 +123,9 @@ export const againstParseValues = (values) => {
     if (!isEmpty(precise)) {
       set(newValues, `${triggerType}Target`, get(precise, 'target'));
       set(newValues, `${triggerType}Source`, get(precise, 'source'));
+      if (get(precise, 'trigger')) {// 添加手动选择/ 正则表达式
+        set(newValues, `${triggerType}Trigger`, get(precise, 'trigger'));
+      }
     }
     if (!isEmpty(types)) {
       set(newValues, `${triggerType}Types`, types);