chore: Create route form optimization (#2336)

Author: oil-oil

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/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': '目标节点',