Merge branch 'origin'

* origin:
  chore: Create route form optimization (apache#2336)
  fix: add rejected_msg field to limit-count plugin form (apache#2328)

web/cypress/integration/route/create-route-with-limit-count-plugin-form.spec.js

@@ -35,6 +35,7 @@ context('Create and delete route with limit-count form', () => {
     redis_timeout: '#time_window',
     key: '#key',
     rejected_code: '#rejected_code',
+    rejected_msg: '#rejected_msg',
     policy: '#policy',
     group: '#group',
     redis_host: '#redis_host',
@@ -52,6 +53,7 @@ context('Create and delete route with limit-count form', () => {
     submitSuccess: 'Submit Successfully',
     port: '80',
     weight: 1,
+    rejected_msg: 'Requests are too frequent, please try again later.',
     redisClusterName: 'Please Enter redis_cluster_name',
     redisClusterNode: 'Please Enter redis_cluster_node',
   };
@@ -86,6 +88,7 @@ context('Create and delete route with limit-count form', () => {
     cy.get(selector.count).type(1);
     cy.get(selector.time_window).type(1);
     cy.get(selector.rejected_code).type(500);
+    cy.get(selector.rejected_msg).type(data.rejected_msg);
     cy.get(selector.group).type('test_group');
     cy.get(selector.drawer).within(() => {
       cy.contains('Submit').click({

web/cypress/integration/route/create-route-with-search-service-and-set-priority.spec.js

@@ -32,7 +32,6 @@ context('Create Route with search service name', () => {
     serviceSelector: '[title="None"]',
     upstreamSelector: '#upstream_id',
     deleteAlert: '.ant-modal-body',
-    drawer: '.ant-drawer-content',
   };
 
   const data = {
@@ -52,7 +51,7 @@ context('Create Route with search service name', () => {
     deleteRouteSuccess: 'Delete Route Successfully',
     routeName: 'route_test1',
     searchServiceName: 'service_test2',
-    upstreamName: 'None',
+    upstreamName: 'None (Only available when binding the service)',
   };
 
   beforeEach(() => {
@@ -101,12 +100,15 @@ context('Create Route with search service name', () => {
 
     // set name
     cy.get(selector.name).type(data.routeName);
-    cy.get(selector.serviceSelector).type(data.serviceName2 + '\n');
+    cy.get(selector.serviceSelector).type(`${data.serviceName2}\n`);
     // set priority
     cy.get(selector.priority).type(data.priority);
     cy.contains('Next').click();
     // select upstream with None
-    cy.get(selector.upstreamSelector).type(data.upstreamName + '\n');
+    cy.get('.ant-select-selector')
+      .find(selector.upstreamSelector)
+      .type(`${data.upstreamName}\n`, { force: true });
+
     cy.contains('Next').click();
     cy.contains('Next').click();
     cy.contains('Submit').click();
@@ -117,7 +119,7 @@ context('Create Route with search service name', () => {
     let serviceUuid = '';
     cy.visit('/');
     cy.contains('Service').click();
-    cy.get(selector.name).type(data.serviceName2 + '\n');
+    cy.get(selector.name).type(`${data.serviceName2}\n`);
     cy.contains(data.serviceName2)
       .siblings()
       .first()
@@ -126,7 +128,7 @@ context('Create Route with search service name', () => {
       });
     cy.visit('/');
     cy.contains('Route').click();
-    cy.get(selector.name).type(data.routeName + '\n');
+    cy.get(selector.name).type(`${data.routeName}\n`);
     cy.contains(data.routeName).siblings().contains('More').click();
     cy.contains('View').click();
     cy.get(selector.drawer).should('be.visible');
@@ -139,7 +141,7 @@ context('Create Route with search service name', () => {
   it('should delete the route and services', function () {
     cy.visit('/');
     cy.contains('Route').click();
-    cy.get(selector.name).type(data.routeName + '\n');
+    cy.get(selector.name).type(`${data.routeName}\n`);
     cy.contains(data.routeName).siblings().contains('More').click();
     cy.contains('Delete').click();
     cy.get(selector.deleteAlert)

web/src/components/Plugin/UI/limit-count.tsx

@@ -305,6 +305,13 @@ const LimitCount: React.FC<Props> = ({ form, schema }) => {
           max={properties.rejected_code.maximum}
         />
       </Form.Item>
+      <Form.Item
+        label="rejected_msg"
+        name="rejected_msg"
+        tooltip={formatMessage({ id: 'component.pluginForm.limit-req.rejected_msg.tooltip' })}
+      >
+        <Input />
+      </Form.Item>
       <Form.Item
         initialValue={policy}
         label="policy"

web/src/components/Plugin/locales/en-US.ts

@@ -130,6 +130,8 @@ export default {
   'component.pluginForm.limit-count.key.tooltip': 'The user specified key to limit the count.',
   'component.pluginForm.limit-count.rejected_code.tooltip':
     'The HTTP status code returned when the request exceeds the threshold is rejected, default 503.',
+  'component.pluginForm.limit-count.rejected_msg.tooltip':
+    'The response body returned when the request exceeds the threshold is rejected.',
   'component.pluginForm.limit-count.policy.tooltip':
     'The rate-limiting policies to use for retrieving and incrementing the limits. Available values are local(the counters will be stored locally in-memory on the node) and redis(counters are stored on a Redis server and will be shared across the nodes, usually use it to do the global speed limit) and redis-cluster(the same function as redis, only use Redis cluster pattern).',
   'component.pluginForm.limit-count.allow_degradation.tooltip':

web/src/components/Plugin/locales/zh-CN.ts

@@ -122,6 +122,7 @@ export default {
     '用来做请求计数的有效值。例如，可以使用主机名（或服务器区域）作为关键字，以便限制每个主机名规定时间内的请求次数。我们也可以使用客户端地址作为关键字，这样我们就可以避免单个客户端规定时间内多次的连接我们的服务。',
   'component.pluginForm.limit-count.rejected_code.tooltip':
     '当请求超过阈值被拒绝时，返回的 HTTP 状态码。',
+  'component.pluginForm.limit-count.rejected_msg.tooltip': '当请求超过阈值被拒绝时，返回的响应体。',
   'component.pluginForm.limit-count.policy.tooltip':
     '用于检索和增加限制的速率限制策略。可选的值有：local(计数器被以内存方式保存在节点本地，默认选项) 和 redis(计数器保存在 Redis 服务节点上，从而可以跨节点共享结果，通常用它来完成全局限速)；以及redis-cluster，跟 redis 功能一样，只是使用 redis 集群方式。',
   'component.pluginForm.limit-count.allow_degradation.tooltip':

web/src/components/Upstream/UpstreamForm.tsx

@@ -16,7 +16,7 @@
  */
 import { Divider, Form, notification, Switch } from 'antd';
 import React, { useState, forwardRef, useImperativeHandle, useEffect } from 'react';
-import { useIntl } from 'umi';
+import { useIntl, useLocation } from 'umi';
 import type { FormInstance } from 'antd/es/form';
 
 import PanelSection from '@/components/PanelSection';
@@ -67,6 +67,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
     },
     ref,
   ) => {
+    const location = useLocation();
     const { formatMessage } = useIntl();
     const [readonly, setReadonly] = useState(false);
     const [hiddenForm, setHiddenForm] = useState(false);
@@ -281,7 +282,13 @@ const UpstreamForm: React.FC<Props> = forwardRef(
     };
 
     return (
-      <Form form={form} labelCol={{ span: 3 }}>
+      <Form
+        initialValues={{
+          upstream_id: !required && location.pathname === '/routes/create' ? 'None' : 'Custom',
+        }}
+        form={form}
+        labelCol={{ span: 3 }}
+      >
         {showSelector && (
           <UpstreamSelector
             list={list}

web/src/components/Upstream/components/UpstreamSelector.tsx

@@ -16,7 +16,7 @@
  */
 import React from 'react';
 import { Form, Select } from 'antd';
-import { useIntl } from 'umi';
+import { useIntl, useLocation } from 'umi';
 
 type Upstream = {
   name?: string;
@@ -32,6 +32,7 @@ type Props = {
 
 const UpstreamSelector: React.FC<Props> = ({ onChange, list = [], disabled, required }) => {
   const { formatMessage } = useIntl();
+  const location = useLocation();
 
   return (
     <Form.Item
@@ -50,7 +51,11 @@ const UpstreamSelector: React.FC<Props> = ({ onChange, list = [], disabled, requ
         </Select.Option>
         {[
           {
-            name: formatMessage({ id: 'page.upstream.step.select.upstream.select.option' }),
+            name: formatMessage({
+              id: `page.upstream.step.select.upstream.select.option${
+                !required && location.pathname === '/routes/create' ? '.serviceSelected' : ''
+              }`,
+            }),
             id: 'Custom',
           },
           ...list,

web/src/components/Upstream/locales/en-US.ts

@@ -147,7 +147,7 @@ export default {
   'component.upstream.fields.checks.passive.unhealthy.timeouts.tooltip':
     'Number of timeouts in proxied traffic to consider a target unhealthy, as observed by passive health checks.',
 
-  'component.upstream.other.none': 'None',
+  'component.upstream.other.none': 'None (Only available when binding the service)',
   'component.upstream.other.pass_host-with-multiple-nodes.title':
     'Please check the target node configuration',
   'component.upstream.other.pass_host-with-multiple-nodes':

web/src/pages/Upstream/locales/en-US.ts

@@ -17,6 +17,8 @@
 export default {
   'page.upstream.step.select.upstream': 'Select Upstream',
   'page.upstream.step.select.upstream.select.option': 'Custom',
+  'page.upstream.step.select.upstream.select.option.serviceSelected':
+    'Custom (The current configuration will override the bound service)',
   'page.upstream.step.select.upstream.select.none': 'None',
   'page.upstream.step.backend.server.domain.or.ip': 'Backend Server Host/IP',
   'page.upstream.form.item-label.node.domain.or.ip': 'Targets',

web/src/pages/Upstream/locales/zh-CN.ts

@@ -17,6 +17,8 @@
 export default {
   'page.upstream.step.select.upstream': '选择上游服务',
   'page.upstream.step.select.upstream.select.option': '手动填写',
+  'page.upstream.step.select.upstream.select.option.serviceSelected':
+    '手动填写（当前配置将会覆盖已绑定的服务）',
   'page.upstream.step.select.upstream.select.none': '无',
   'page.upstream.step.backend.server.domain.or.ip': '后端服务域名或 IP',
   'page.upstream.form.item-label.node.domain.or.ip': '目标节点',