From 5770b915ffdc6ea071c58e3ffd226004555b406b Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Thu, 14 Jan 2021 23:36:55 +0800
Subject: [PATCH 01/12] feat: user can skip upstream when select service_id

---
 web/src/components/Upstream/UpstreamForm.tsx  | 220 +++++++++---------
 web/src/pages/Route/Create.tsx                |   7 +-
 .../components/Step2/RequestRewriteView.tsx   |   3 +
 web/src/pages/Route/transform.ts              |   3 +-
 web/src/pages/Route/typing.d.ts               |   1 +
 5 files changed, 122 insertions(+), 112 deletions(-)

diff --git a/web/src/components/Upstream/UpstreamForm.tsx b/web/src/components/Upstream/UpstreamForm.tsx
index 3e7cff7d7b..a632a31724 100644
--- a/web/src/components/Upstream/UpstreamForm.tsx
+++ b/web/src/components/Upstream/UpstreamForm.tsx
@@ -61,6 +61,7 @@ type Props = {
   showSelector?: boolean;
   // FIXME: use proper typing
   ref?: any;
+  required: boolean,
 };
 
 const removeBtnStyle = {
@@ -70,11 +71,12 @@ const removeBtnStyle = {
 };
 
 const UpstreamForm: React.FC<Props> = forwardRef(
-  ({ form, disabled, list = [], showSelector }, ref) => {
+  ({ form, disabled, list = [], showSelector, required = true }, ref) => {
     const { formatMessage } = useIntl();
     const [readonly, setReadonly] = useState(
       Boolean(form.getFieldValue('upstream_id')) || disabled,
     );
+    const [hidenForm, setHidenForm] = useState(false);
 
     const timeoutFields = [
       {
@@ -610,6 +612,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
             name="upstream_id"
             shouldUpdate={(prev, next) => {
               setReadonly(Boolean(next.upstream_id));
+              setHidenForm(!Boolean(next.upstream_id === 'None'));
               if (prev.upstream_id !== next.upstream_id) {
                 const id = next.upstream_id;
                 if (id) {
@@ -639,120 +642,123 @@ const UpstreamForm: React.FC<Props> = forwardRef(
                   {item.name}
                 </Select.Option>
               ))}
+              {Boolean(!required) && <Select.Option value={'None'} >None</Select.Option>}
             </Select>
           </Form.Item>
         )}
 
-        <Form.Item
-          label={formatMessage({ id: 'page.upstream.step.type' })}
-          name="type"
-          rules={[{ required: true }]}
-        >
-          <Select disabled={readonly}>
-            {Object.entries(Type).map(([label, value]) => {
-              return (
-                <Select.Option value={value} key={value}>
-                  {label}
-                </Select.Option>
-              );
-            })}
-          </Select>
-        </Form.Item>
-        <Form.Item shouldUpdate noStyle>
-          {() => {
-            if (form.getFieldValue('type') === 'chash') {
-              return <CHash />;
-            }
-            return null;
-          }}
-        </Form.Item>
-        {NodeList()}
-        <Form.Item
-          label={formatMessage({ id: 'page.upstream.step.pass-host' })}
-          name="pass_host"
-          extra={formatMessage({ id: 'page.upstream.step.pass-host.tips' })}
-        >
-          <Select disabled={readonly}>
-            <Select.Option value="pass">
-              {formatMessage({ id: 'page.upstream.step.pass-host.pass' })}
-            </Select.Option>
-            <Select.Option value="node">
-              {formatMessage({ id: 'page.upstream.step.pass-host.node' })}
-            </Select.Option>
-            <Select.Option value="rewrite">
-              {formatMessage({ id: 'page.upstream.step.pass-host.rewrite' })}
-            </Select.Option>
-          </Select>
-        </Form.Item>
-        <Form.Item
-          noStyle
-          shouldUpdate={(prev, next) => {
-            return prev.pass_host !== next.pass_host;
-          }}
-        >
-          {() => {
-            if (form.getFieldValue('pass_host') === 'rewrite') {
-              return (
-                <Form.Item
-                  label={formatMessage({ id: 'page.upstream.step.pass-host.upstream_host' })}
-                  name="upstream_host"
-                >
-                  <Input disabled={readonly} />
-                </Form.Item>
-              );
-            }
-            return null;
-          }}
-        </Form.Item>
-
-        {timeoutFields.map(({ label, name }) => (
-          <Form.Item label={label} required key={label}>
-            <Form.Item
-              name={name}
-              noStyle
-              rules={[
-                {
-                  required: true,
-                  message: formatMessage({ id: `page.upstream.step.input.${name[1]}.timeout` }),
-                },
-              ]}
-            >
-              <InputNumber disabled={readonly} />
-            </Form.Item>
-            <TimeUnit />
+        {hidenForm && (<>
+          <Form.Item
+            label={formatMessage({ id: 'page.upstream.step.type' })}
+            name="type"
+            rules={[{ required: true }]}
+          >
+            <Select disabled={readonly}>
+              {Object.entries(Type).map(([label, value]) => {
+                return (
+                  <Select.Option value={value} key={value}>
+                    {label}
+                  </Select.Option>
+                );
+              })}
+            </Select>
+          </Form.Item>
+          <Form.Item shouldUpdate noStyle>
+            {() => {
+              if (form.getFieldValue('type') === 'chash') {
+                return <CHash />;
+              }
+              return null;
+            }}
+          </Form.Item>
+          {NodeList()}
+          <Form.Item
+            label={formatMessage({ id: 'page.upstream.step.pass-host' })}
+            name="pass_host"
+            extra={formatMessage({ id: 'page.upstream.step.pass-host.tips' })}
+          >
+            <Select disabled={readonly}>
+              <Select.Option value="pass">
+                {formatMessage({ id: 'page.upstream.step.pass-host.pass' })}
+              </Select.Option>
+              <Select.Option value="node">
+                {formatMessage({ id: 'page.upstream.step.pass-host.node' })}
+              </Select.Option>
+              <Select.Option value="rewrite">
+                {formatMessage({ id: 'page.upstream.step.pass-host.rewrite' })}
+              </Select.Option>
+            </Select>
+          </Form.Item>
+          <Form.Item
+            noStyle
+            shouldUpdate={(prev, next) => {
+              return prev.pass_host !== next.pass_host;
+            }}
+          >
+            {() => {
+              if (form.getFieldValue('pass_host') === 'rewrite') {
+                return (
+                  <Form.Item
+                    label={formatMessage({ id: 'page.upstream.step.pass-host.upstream_host' })}
+                    name="upstream_host"
+                  >
+                    <Input disabled={readonly} />
+                  </Form.Item>
+                );
+              }
+              return null;
+            }}
           </Form.Item>
-        ))}
 
-        <PanelSection
-          title={formatMessage({ id: 'page.upstream.step.healthyCheck.healthy.check' })}
-        >
-          {[
-            {
-              label: formatMessage({ id: 'page.upstream.step.healthyCheck.active' }),
-              name: ['checks', 'active'],
-              component: <ActiveHealthCheck />,
-            },
-            {
-              label: formatMessage({ id: 'page.upstream.step.healthyCheck.passive' }),
-              name: ['checks', 'passive'],
-              component: <InActiveHealthCheck />,
-            },
-          ].map(({ label, name, component }) => (
-            <div key={label}>
-              <Form.Item label={label} name={name} valuePropName="checked" key={label}>
-                <Switch disabled={readonly} />
-              </Form.Item>
-              <Form.Item shouldUpdate noStyle>
-                {() => {
-                  if (form.getFieldValue(name)) {
-                    return component;
-                  }
-                  return null;
-                }}
+          {timeoutFields.map(({ label, name }) => (
+            <Form.Item label={label} required key={label}>
+              <Form.Item
+                name={name}
+                noStyle
+                rules={[
+                  {
+                    required: true,
+                    message: formatMessage({ id: `page.upstream.step.input.${name[1]}.timeout` }),
+                  },
+                ]}
+              >
+                <InputNumber disabled={readonly} />
               </Form.Item>
-            </div>
+              <TimeUnit />
+            </Form.Item>
           ))}
-        </PanelSection>
+
+          <PanelSection
+            title={formatMessage({ id: 'page.upstream.step.healthyCheck.healthy.check' })}
+          >
+            {[
+              {
+                label: formatMessage({ id: 'page.upstream.step.healthyCheck.active' }),
+                name: ['checks', 'active'],
+                component: <ActiveHealthCheck />,
+              },
+              {
+                label: formatMessage({ id: 'page.upstream.step.healthyCheck.passive' }),
+                name: ['checks', 'passive'],
+                component: <InActiveHealthCheck />,
+              },
+            ].map(({ label, name, component }) => (
+              <div key={label}>
+                <Form.Item label={label} name={name} valuePropName="checked" key={label}>
+                  <Switch disabled={readonly} />
+                </Form.Item>
+                <Form.Item shouldUpdate noStyle>
+                  {() => {
+                    if (form.getFieldValue(name)) {
+                      return component;
+                    }
+                    return null;
+                  }}
+                </Form.Item>
+              </div>
+            ))}
+          </PanelSection>
+        </>)}
       </Form>
     );
   },
diff --git a/web/src/pages/Route/Create.tsx b/web/src/pages/Route/Create.tsx
index ab1257f130..e4911803e9 100644
--- a/web/src/pages/Route/Create.tsx
+++ b/web/src/pages/Route/Create.tsx
@@ -135,7 +135,7 @@ const Page: React.FC<Props> = (props) => {
         );
       }
 
-      return <Step2 form={form2} upstreamRef={upstreamRef} />;
+      return <Step2 form={form2} upstreamRef={upstreamRef} isServiceId={form1.getFieldValue('service_id') !== ''} />;
     }
 
     if (step === 3) {
@@ -256,11 +256,10 @@ const Page: React.FC<Props> = (props) => {
   return (
     <>
       <PageHeaderWrapper
-        title={`${
-          (props as any).match.params.rid
+        title={`${(props as any).match.params.rid
             ? formatMessage({ id: 'component.global.edit' })
             : formatMessage({ id: 'component.global.create' })
-        } ${formatMessage({ id: 'menu.routes' })}`}
+          } ${formatMessage({ id: 'menu.routes' })}`}
       >
         <Card bordered={false}>
           <Steps current={step - 1} className={styles.steps}>
diff --git a/web/src/pages/Route/components/Step2/RequestRewriteView.tsx b/web/src/pages/Route/components/Step2/RequestRewriteView.tsx
index a3bf8dcb0f..1bd428f02d 100644
--- a/web/src/pages/Route/components/Step2/RequestRewriteView.tsx
+++ b/web/src/pages/Route/components/Step2/RequestRewriteView.tsx
@@ -23,7 +23,9 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({
   form,
   upstreamRef,
   disabled,
+  isServiceId = false
 }) => {
+  console.log('isServiceId: ', isServiceId);
   const [list, setList] = useState<UpstreamModule.RequestBody[]>([]);
   useEffect(() => {
     fetchUpstreamList().then(({ data }) => setList(data));
@@ -35,6 +37,7 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({
       disabled={disabled}
       list={list}
       showSelector
+      required={!isServiceId}
       key={1}
     />
   );
diff --git a/web/src/pages/Route/transform.ts b/web/src/pages/Route/transform.ts
index bb794d227f..2085890bc7 100644
--- a/web/src/pages/Route/transform.ts
+++ b/web/src/pages/Route/transform.ts
@@ -107,6 +107,7 @@ export const transformStepData = ({
       'ret_code',
       'redirectOption',
       service_id.length === 0 ? 'service_id' : '',
+      form2Data.upstream_id === 'None'? 'upstream_id': '',
       !Object.keys(data.plugins || {}).length ? 'plugins' : '',
       !Object.keys(data.script || {}).length ? 'script' : '',
       form1Data.hosts.filter(Boolean).length === 0 ? 'hosts' : '',
@@ -177,7 +178,7 @@ export const transformRouteData = (data: RouteModule.Body) => {
     vars,
     status,
     upstream,
-    upstream_id,
+    upstream_id = 'None',
     service_id = '',
     priority = 0,
     enable_websocket,
diff --git a/web/src/pages/Route/typing.d.ts b/web/src/pages/Route/typing.d.ts
index 992a845dcb..fd9af57119 100644
--- a/web/src/pages/Route/typing.d.ts
+++ b/web/src/pages/Route/typing.d.ts
@@ -163,6 +163,7 @@ declare namespace RouteModule {
     form: FormInstance;
     disabled?: boolean;
     upstreamRef: any;
+    isServiceId: boolean;
   };
 
   type Form2Data = {

From d561238c7ab0cea3a13c8d8ce3d22959e6a9874c Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Thu, 14 Jan 2021 23:58:04 +0800
Subject: [PATCH 02/12] feat: update code

---
 web/src/components/Upstream/UpstreamForm.tsx | 13 +++++++++----
 web/src/pages/Route/transform.ts             |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/src/components/Upstream/UpstreamForm.tsx b/web/src/components/Upstream/UpstreamForm.tsx
index a632a31724..a0ee533883 100644
--- a/web/src/components/Upstream/UpstreamForm.tsx
+++ b/web/src/components/Upstream/UpstreamForm.tsx
@@ -98,13 +98,18 @@ const UpstreamForm: React.FC<Props> = forwardRef(
     }));
 
     useEffect(() => {
-      const id = form.getFieldValue('upstream_id');
+      const formData = form.getFieldsValue();
+      const { id } = formData;
       if (id) {
         setReadonly(true);
         requestAnimationFrame(() => {
           form.setFieldsValue(list.find((item) => item.id === id));
         });
       }
+
+      if (!required && !id && !Object.keys(formData).length) {
+        form.setFieldsValue({ upstream_id: 'None' });
+      }
     }, [list]);
 
     const CHash = () => (
@@ -612,7 +617,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
             name="upstream_id"
             shouldUpdate={(prev, next) => {
               setReadonly(Boolean(next.upstream_id));
-              setHidenForm(!Boolean(next.upstream_id === 'None'));
+              setHidenForm(Boolean(next.upstream_id === 'None'));
               if (prev.upstream_id !== next.upstream_id) {
                 const id = next.upstream_id;
                 if (id) {
@@ -631,6 +636,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
                 form.setFieldsValue(list.find((item) => item.id === id));
               }}
             >
+              {Boolean(!required) && <Select.Option value={'None'} >None</Select.Option>}
               {[
                 {
                   name: formatMessage({ id: 'page.upstream.step.select.upstream.select.option' }),
@@ -642,12 +648,11 @@ const UpstreamForm: React.FC<Props> = forwardRef(
                   {item.name}
                 </Select.Option>
               ))}
-              {Boolean(!required) && <Select.Option value={'None'} >None</Select.Option>}
             </Select>
           </Form.Item>
         )}
 
-        {hidenForm && (<>
+        {!hidenForm && (<>
           <Form.Item
             label={formatMessage({ id: 'page.upstream.step.type' })}
             name="type"
diff --git a/web/src/pages/Route/transform.ts b/web/src/pages/Route/transform.ts
index 2085890bc7..99eb2aa7ca 100644
--- a/web/src/pages/Route/transform.ts
+++ b/web/src/pages/Route/transform.ts
@@ -178,7 +178,7 @@ export const transformRouteData = (data: RouteModule.Body) => {
     vars,
     status,
     upstream,
-    upstream_id = 'None',
+    upstream_id,
     service_id = '',
     priority = 0,
     enable_websocket,

From 63302190afa45c84bc8998fe80184dc84a1c7ec5 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Fri, 15 Jan 2021 11:57:53 +0800
Subject: [PATCH 03/12] feat: update upstream

---
 web/src/components/Upstream/UpstreamForm.tsx  | 50 ++++++++++---------
 .../components/Step2/RequestRewriteView.tsx   |  1 -
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/web/src/components/Upstream/UpstreamForm.tsx b/web/src/components/Upstream/UpstreamForm.tsx
index a0ee533883..e31b07fb76 100644
--- a/web/src/components/Upstream/UpstreamForm.tsx
+++ b/web/src/components/Upstream/UpstreamForm.tsx
@@ -98,18 +98,34 @@ const UpstreamForm: React.FC<Props> = forwardRef(
     }));
 
     useEffect(() => {
-      const formData = form.getFieldsValue();
-      const { id } = formData;
-      if (id) {
-        setReadonly(true);
+      const formData = transformRequest(form.getFieldsValue()) || {};
+      const { upstream_id } = form.getFieldsValue();
+
+      if (required && upstream_id ==='None') {
+        requestAnimationFrame(() => {
+          form.resetFields();
+          setHidenForm(false);
+        });
+      }
+
+      if (upstream_id === 'None') {
+        setHidenForm(true);
+      }
+
+      if (upstream_id) {
         requestAnimationFrame(() => {
-          form.setFieldsValue(list.find((item) => item.id === id));
+          form.setFieldsValue(list.find((item) => item.id === upstream_id));
         });
       }
 
-      if (!required && !id && !Object.keys(formData).length) {
-        form.setFieldsValue({ upstream_id: 'None' });
+      if (!required && !Object.keys(formData).length && upstream_id !== 'None') {
+        requestAnimationFrame(() => {
+          form.setFieldsValue({ upstream_id: 'None' });
+          setHidenForm(true);
+        });
       }
+
+      setReadonly(Boolean(upstream_id));
     }, [list]);
 
     const CHash = () => (
@@ -615,25 +631,13 @@ const UpstreamForm: React.FC<Props> = forwardRef(
           <Form.Item
             label={formatMessage({ id: 'page.upstream.step.select.upstream' })}
             name="upstream_id"
-            shouldUpdate={(prev, next) => {
-              setReadonly(Boolean(next.upstream_id));
-              setHidenForm(Boolean(next.upstream_id === 'None'));
-              if (prev.upstream_id !== next.upstream_id) {
-                const id = next.upstream_id;
-                if (id) {
-                  form.setFieldsValue(list.find((item) => item.id === id));
-                  form.setFieldsValue({
-                    upstream_id: id,
-                  });
-                }
-              }
-              return prev.upstream_id !== next.upstream_id;
-            }}
           >
             <Select
               disabled={disabled}
-              onChange={(id) => {
-                form.setFieldsValue(list.find((item) => item.id === id));
+              onChange={(upstream_id) => {
+                setReadonly(Boolean(upstream_id));
+                setHidenForm(Boolean(upstream_id === 'None'));
+                form.setFieldsValue(list.find((item) => item.id === upstream_id));
               }}
             >
               {Boolean(!required) && <Select.Option value={'None'} >None</Select.Option>}
diff --git a/web/src/pages/Route/components/Step2/RequestRewriteView.tsx b/web/src/pages/Route/components/Step2/RequestRewriteView.tsx
index 1bd428f02d..ddd2c1a2d7 100644
--- a/web/src/pages/Route/components/Step2/RequestRewriteView.tsx
+++ b/web/src/pages/Route/components/Step2/RequestRewriteView.tsx
@@ -25,7 +25,6 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({
   disabled,
   isServiceId = false
 }) => {
-  console.log('isServiceId: ', isServiceId);
   const [list, setList] = useState<UpstreamModule.RequestBody[]>([]);
   useEffect(() => {
     fetchUpstreamList().then(({ data }) => setList(data));

From b7010dad62ce56d483e0e2da7dfc08c7364518d0 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Fri, 15 Jan 2021 13:10:37 +0800
Subject: [PATCH 04/12] fix: manual input

---
 web/src/components/Upstream/UpstreamForm.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/Upstream/UpstreamForm.tsx b/web/src/components/Upstream/UpstreamForm.tsx
index e31b07fb76..b6fc9df910 100644
--- a/web/src/components/Upstream/UpstreamForm.tsx
+++ b/web/src/components/Upstream/UpstreamForm.tsx
@@ -101,7 +101,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
       const formData = transformRequest(form.getFieldsValue()) || {};
       const { upstream_id } = form.getFieldsValue();
 
-      if (required && upstream_id ==='None') {
+      if (required && upstream_id === 'None') {
         requestAnimationFrame(() => {
           form.resetFields();
           setHidenForm(false);
@@ -125,7 +125,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
         });
       }
 
-      setReadonly(Boolean(upstream_id));
+      setReadonly(Boolean(upstream_id) || disabled);
     }, [list]);
 
     const CHash = () => (

From cd53dd79fe30f20cf1f6bac891ac349465098ebc Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Thu, 21 Jan 2021 08:58:50 +0800
Subject: [PATCH 05/12] feat: update CreateStep4

---
 web/src/pages/Route/components/CreateStep4/CreateStep4.tsx | 2 +-
 web/src/pages/Route/transform.ts                           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx b/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx
index 95fc6dcf3f..b53340919f 100644
--- a/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx
+++ b/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx
@@ -50,7 +50,7 @@ const CreateStep4: React.FC<Props> = ({ form1, form2, redirect, upstreamRef, ...
           <h2 style={style}>
             {formatMessage({ id: 'page.route.steps.stepTitle.defineApiBackendServe' })}
           </h2>
-          <Step2 form={form2} upstreamRef={upstreamRef} disabled />
+          <Step2 form={form2} upstreamRef={upstreamRef} disabled isServiceId={form1.getFieldValue('service_id') !== ''} />
           <h2 style={style}>
             {formatMessage({ id: 'component.global.steps.stepTitle.pluginConfig' })}
           </h2>
diff --git a/web/src/pages/Route/transform.ts b/web/src/pages/Route/transform.ts
index 99eb2aa7ca..65e48e1fe3 100644
--- a/web/src/pages/Route/transform.ts
+++ b/web/src/pages/Route/transform.ts
@@ -107,7 +107,7 @@ export const transformStepData = ({
       'ret_code',
       'redirectOption',
       service_id.length === 0 ? 'service_id' : '',
-      form2Data.upstream_id === 'None'? 'upstream_id': '',
+      form2Data.upstream_id === 'None' ? 'upstream_id' : '',
       !Object.keys(data.plugins || {}).length ? 'plugins' : '',
       !Object.keys(data.script || {}).length ? 'script' : '',
       form1Data.hosts.filter(Boolean).length === 0 ? 'hosts' : '',

From 1a6d93c93e4a85e1eaba6f1b2090ab413827daa3 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Thu, 21 Jan 2021 09:11:34 +0800
Subject: [PATCH 06/12] fix: Select Upstream show empty string

---
 web/src/pages/Route/transform.ts | 4 ++++
 web/src/pages/Route/typing.d.ts  | 1 +
 2 files changed, 5 insertions(+)

diff --git a/web/src/pages/Route/transform.ts b/web/src/pages/Route/transform.ts
index 65e48e1fe3..3b9fa4f09f 100644
--- a/web/src/pages/Route/transform.ts
+++ b/web/src/pages/Route/transform.ts
@@ -216,6 +216,10 @@ export const transformRouteData = (data: RouteModule.Body) => {
 
   const advancedMatchingRules: RouteModule.MatchingRule[] = transformVarsToRules(vars);
 
+  if (upstream && Object.keys(upstream).length) {
+    upstream.upstream_id = '';
+  }
+
   const form2Data: RouteModule.Form2Data = upstream || { upstream_id };
 
   const { plugins, script } = data;
diff --git a/web/src/pages/Route/typing.d.ts b/web/src/pages/Route/typing.d.ts
index fd9af57119..cbf46db95c 100644
--- a/web/src/pages/Route/typing.d.ts
+++ b/web/src/pages/Route/typing.d.ts
@@ -80,6 +80,7 @@ declare namespace RouteModule {
     remote_addrs: string[];
     vars: [string, Operator, string][];
     upstream: {
+      upstream_id?: string;
       type: 'roundrobin' | 'chash' | 'ewma';
       hash_on?: string;
       key?: string;

From ecd0f00eb3a9c98a3b54754c3bd2a907cfbc397b Mon Sep 17 00:00:00 2001
From: guoqqqi <979918879@qq.com>
Date: Thu, 21 Jan 2021 09:17:55 +0800
Subject: [PATCH 07/12] merge LiteSun/feat-route into test-route

---
 web/src/pages/Route/components/CreateStep4/CreateStep4.tsx | 2 +-
 web/src/pages/Route/transform.ts                           | 6 +++++-
 web/src/pages/Route/typing.d.ts                            | 1 +
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx b/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx
index 95fc6dcf3f..b53340919f 100644
--- a/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx
+++ b/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx
@@ -50,7 +50,7 @@ const CreateStep4: React.FC<Props> = ({ form1, form2, redirect, upstreamRef, ...
           <h2 style={style}>
             {formatMessage({ id: 'page.route.steps.stepTitle.defineApiBackendServe' })}
           </h2>
-          <Step2 form={form2} upstreamRef={upstreamRef} disabled />
+          <Step2 form={form2} upstreamRef={upstreamRef} disabled isServiceId={form1.getFieldValue('service_id') !== ''} />
           <h2 style={style}>
             {formatMessage({ id: 'component.global.steps.stepTitle.pluginConfig' })}
           </h2>
diff --git a/web/src/pages/Route/transform.ts b/web/src/pages/Route/transform.ts
index 99eb2aa7ca..3b9fa4f09f 100644
--- a/web/src/pages/Route/transform.ts
+++ b/web/src/pages/Route/transform.ts
@@ -107,7 +107,7 @@ export const transformStepData = ({
       'ret_code',
       'redirectOption',
       service_id.length === 0 ? 'service_id' : '',
-      form2Data.upstream_id === 'None'? 'upstream_id': '',
+      form2Data.upstream_id === 'None' ? 'upstream_id' : '',
       !Object.keys(data.plugins || {}).length ? 'plugins' : '',
       !Object.keys(data.script || {}).length ? 'script' : '',
       form1Data.hosts.filter(Boolean).length === 0 ? 'hosts' : '',
@@ -216,6 +216,10 @@ export const transformRouteData = (data: RouteModule.Body) => {
 
   const advancedMatchingRules: RouteModule.MatchingRule[] = transformVarsToRules(vars);
 
+  if (upstream && Object.keys(upstream).length) {
+    upstream.upstream_id = '';
+  }
+
   const form2Data: RouteModule.Form2Data = upstream || { upstream_id };
 
   const { plugins, script } = data;
diff --git a/web/src/pages/Route/typing.d.ts b/web/src/pages/Route/typing.d.ts
index fd9af57119..cbf46db95c 100644
--- a/web/src/pages/Route/typing.d.ts
+++ b/web/src/pages/Route/typing.d.ts
@@ -80,6 +80,7 @@ declare namespace RouteModule {
     remote_addrs: string[];
     vars: [string, Operator, string][];
     upstream: {
+      upstream_id?: string;
       type: 'roundrobin' | 'chash' | 'ewma';
       hash_on?: string;
       key?: string;

From 745747c799bdd6fa8db8997f63aa87f5e51d1cdc Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Thu, 21 Jan 2021 09:36:16 +0800
Subject: [PATCH 08/12] feat: auto fill DEFAULT_UPSTREAM

---
 web/src/components/Upstream/UpstreamForm.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/components/Upstream/UpstreamForm.tsx b/web/src/components/Upstream/UpstreamForm.tsx
index b6fc9df910..aa61d18209 100644
--- a/web/src/components/Upstream/UpstreamForm.tsx
+++ b/web/src/components/Upstream/UpstreamForm.tsx
@@ -18,10 +18,11 @@ import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Col, Divider, Form, Input, InputNumber, Row, Select, Switch } from 'antd';
 import React, { useState, forwardRef, useImperativeHandle, useEffect } from 'react';
 import { useIntl } from 'umi';
+import type { FormInstance } from 'antd/es/form';
 
 import { PanelSection } from '@api7-dashboard/ui';
 import { transformRequest } from '@/pages/Upstream/transform';
-import type { FormInstance } from 'antd/es/form';
+import { DEFAULT_UPSTREAM } from './constant'
 
 enum Type {
   roundrobin = 'roundrobin',
@@ -638,6 +639,9 @@ const UpstreamForm: React.FC<Props> = forwardRef(
                 setReadonly(Boolean(upstream_id));
                 setHidenForm(Boolean(upstream_id === 'None'));
                 form.setFieldsValue(list.find((item) => item.id === upstream_id));
+                if (upstream_id === '') {
+                  form.setFieldsValue(DEFAULT_UPSTREAM);
+                }
               }}
             >
               {Boolean(!required) && <Select.Option value={'None'} >None</Select.Option>}

From c9e3e092c78b2d826d2e65b2120eed625990a52d Mon Sep 17 00:00:00 2001
From: guoqqqi <979918879@qq.com>
Date: Thu, 21 Jan 2021 12:37:52 +0800
Subject: [PATCH 09/12] test:  create route can skip upstream

---
 .../create-route-can-skip-upstream.spec.js    | 125 ++++++++++++++++++
 1 file changed, 125 insertions(+)
 create mode 100644 web/cypress/integration/route/create-route-can-skip-upstream.spec.js

diff --git a/web/cypress/integration/route/create-route-can-skip-upstream.spec.js b/web/cypress/integration/route/create-route-can-skip-upstream.spec.js
new file mode 100644
index 0000000000..544d380281
--- /dev/null
+++ b/web/cypress/integration/route/create-route-can-skip-upstream.spec.js
@@ -0,0 +1,125 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* eslint-disable no-undef */
+
+context('Can select service_id skip upstream in route', () => {
+  const data = {
+    upstreamName: 'test_upstream',
+    serviceName: 'test_service',
+    routeName: 'test_route',
+    ip: '127.0.0.1',
+  }
+  const domSelector = {
+    name: '#name',
+    nodes_0_host: '#nodes_0_host',
+    upstream_id: '#upstream_id',
+    input: ':input',
+    custom: '[title=Custom]',
+    titleName: '[title=Name]',
+    testService: '[title=test_service]',
+  };
+
+  beforeEach(() => {
+    cy.login();
+  });
+
+  it('should create test upstream and service', () => {
+    cy.visit('/');
+    cy.contains('Upstream').click();
+    cy.contains('Create').click();
+
+    cy.get(domSelector.name).type(data.upstreamName);
+    cy.get(domSelector.nodes_0_host).type(data.ip);
+    cy.contains('Next').click();
+    cy.contains('Submit').click();
+
+    cy.visit('/');
+    cy.contains('Service').click();
+    cy.contains('Create').click();
+    cy.get(domSelector.name).type(data.serviceName);
+    cy.get(domSelector.custom).click();
+    cy.contains(data.upstreamName).click();
+    cy.contains('Next').click();
+    cy.contains('Next').click();
+    cy.contains('Submit').click();
+  });
+
+  it('should select service_id can skip upstream when create route', () => {
+    cy.visit('/');
+    cy.contains('Route').click();
+    cy.contains('Create').click();
+
+    // When no select service_id, the option None does not exist
+    cy.get(domSelector.name).type(data.routeName);
+    cy.contains('Next').click();
+    cy.get(domSelector.custom).click();
+    cy.contains('None').should('not.exist');
+
+    cy.contains('Previous').click();
+    cy.contains('None').click();
+    cy.contains(data.serviceName).click();
+    cy.contains('Next').click();
+
+    // make sure upstream data can be saved
+    cy.get(domSelector.custom).click();
+    cy.contains(data.upstreamName).click();
+    cy.get(domSelector.input).should('be.disabled');
+
+    cy.contains(data.upstreamName).click();
+    cy.contains('None').click();
+    cy.contains('Next').click();
+    cy.contains('Next').click();
+    cy.contains('Submit').click();
+    cy.contains('Goto List').click();
+  });
+
+  it('should select service_id can skip upstream when edit route', () => {
+    cy.visit('/');
+    cy.contains('Route').click();
+
+    cy.get(domSelector.titleName).type(data.routeName);
+    cy.contains('Search').click();
+    cy.contains(data.routeName).siblings().contains('Edit').click();
+    cy.get(domSelector.testService).click();
+    cy.contains('None').click();
+    cy.contains('Next').click();
+    cy.get(domSelector.upstream_id).click();
+    cy.contains('None').should('not.exist');
+    cy.contains(data.upstreamName).click();
+    cy.contains('Next').click();
+    cy.contains('Next').click();
+    cy.contains('Submit').click();
+  });
+
+  it('should delete upstream service and route', () => {
+    cy.visit('/');
+    cy.contains('Upstream').click();
+    cy.contains(data.upstreamName).siblings().contains('Delete').click();
+    cy.contains('button', 'Confirm').click();
+
+    cy.visit('/');
+    cy.contains('Service').click();
+    cy.contains(data.serviceName).siblings().contains('Delete').click();
+    cy.contains('button', 'Confirm').click();
+
+    cy.visit('/');
+    cy.contains('Route').click();
+    cy.contains(data.routeName).siblings().contains('Delete').click();
+    cy.contains('button', 'Confirm').click();
+  });
+});
+

From 244da8715192349587199dc037c1f29490d44c1e Mon Sep 17 00:00:00 2001
From: guoqqqi <979918879@qq.com>
Date: Thu, 21 Jan 2021 12:37:52 +0800
Subject: [PATCH 10/12] feat: update upstreamForm

---
 web/src/components/Upstream/UpstreamForm.tsx  | 41 +++++++++----------
 web/src/pages/Route/Create.tsx                |  2 +-
 .../components/CreateStep4/CreateStep4.tsx    |  2 +-
 .../components/Step2/RequestRewriteView.tsx   |  4 +-
 web/src/pages/Route/typing.d.ts               |  2 +-
 web/src/pages/Service/components/Step1.tsx    |  1 +
 6 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/web/src/components/Upstream/UpstreamForm.tsx b/web/src/components/Upstream/UpstreamForm.tsx
index aa61d18209..36b8bf48d6 100644
--- a/web/src/components/Upstream/UpstreamForm.tsx
+++ b/web/src/components/Upstream/UpstreamForm.tsx
@@ -102,30 +102,28 @@ const UpstreamForm: React.FC<Props> = forwardRef(
       const formData = transformRequest(form.getFieldsValue()) || {};
       const { upstream_id } = form.getFieldsValue();
 
-      if (required && upstream_id === 'None') {
-        requestAnimationFrame(() => {
-          form.resetFields();
-          setHidenForm(false);
-        });
-      }
-
       if (upstream_id === 'None') {
         setHidenForm(true);
+        if (required) {
+          requestAnimationFrame(() => {
+            form.resetFields();
+            form.setFieldsValue(DEFAULT_UPSTREAM);
+            setHidenForm(false);
+          });
+        }
+      } else {
+        if (upstream_id) {
+          requestAnimationFrame(() => {
+            form.setFieldsValue(list.find((item) => item.id === upstream_id));
+          });
+        }
+        if (!required && !Object.keys(formData).length) {
+          requestAnimationFrame(() => {
+            form.setFieldsValue({ upstream_id: 'None' });
+            setHidenForm(true);
+          });
+        }
       }
-
-      if (upstream_id) {
-        requestAnimationFrame(() => {
-          form.setFieldsValue(list.find((item) => item.id === upstream_id));
-        });
-      }
-
-      if (!required && !Object.keys(formData).length && upstream_id !== 'None') {
-        requestAnimationFrame(() => {
-          form.setFieldsValue({ upstream_id: 'None' });
-          setHidenForm(true);
-        });
-      }
-
       setReadonly(Boolean(upstream_id) || disabled);
     }, [list]);
 
@@ -640,6 +638,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
                 setHidenForm(Boolean(upstream_id === 'None'));
                 form.setFieldsValue(list.find((item) => item.id === upstream_id));
                 if (upstream_id === '') {
+                  form.resetFields();
                   form.setFieldsValue(DEFAULT_UPSTREAM);
                 }
               }}
diff --git a/web/src/pages/Route/Create.tsx b/web/src/pages/Route/Create.tsx
index e4911803e9..9155a082ca 100644
--- a/web/src/pages/Route/Create.tsx
+++ b/web/src/pages/Route/Create.tsx
@@ -135,7 +135,7 @@ const Page: React.FC<Props> = (props) => {
         );
       }
 
-      return <Step2 form={form2} upstreamRef={upstreamRef} isServiceId={form1.getFieldValue('service_id') !== ''} />;
+      return <Step2 form={form2} upstreamRef={upstreamRef} hasServiceId={form1.getFieldValue('service_id') !== ''} />;
     }
 
     if (step === 3) {
diff --git a/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx b/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx
index b53340919f..9e6f49f657 100644
--- a/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx
+++ b/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx
@@ -50,7 +50,7 @@ const CreateStep4: React.FC<Props> = ({ form1, form2, redirect, upstreamRef, ...
           <h2 style={style}>
             {formatMessage({ id: 'page.route.steps.stepTitle.defineApiBackendServe' })}
           </h2>
-          <Step2 form={form2} upstreamRef={upstreamRef} disabled isServiceId={form1.getFieldValue('service_id') !== ''} />
+          <Step2 form={form2} upstreamRef={upstreamRef} disabled hasServiceId={form1.getFieldValue('service_id') !== ''} />
           <h2 style={style}>
             {formatMessage({ id: 'component.global.steps.stepTitle.pluginConfig' })}
           </h2>
diff --git a/web/src/pages/Route/components/Step2/RequestRewriteView.tsx b/web/src/pages/Route/components/Step2/RequestRewriteView.tsx
index ddd2c1a2d7..023cac87f9 100644
--- a/web/src/pages/Route/components/Step2/RequestRewriteView.tsx
+++ b/web/src/pages/Route/components/Step2/RequestRewriteView.tsx
@@ -23,7 +23,7 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({
   form,
   upstreamRef,
   disabled,
-  isServiceId = false
+  hasServiceId = false
 }) => {
   const [list, setList] = useState<UpstreamModule.RequestBody[]>([]);
   useEffect(() => {
@@ -36,7 +36,7 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({
       disabled={disabled}
       list={list}
       showSelector
-      required={!isServiceId}
+      required={!hasServiceId}
       key={1}
     />
   );
diff --git a/web/src/pages/Route/typing.d.ts b/web/src/pages/Route/typing.d.ts
index cbf46db95c..342d7c1700 100644
--- a/web/src/pages/Route/typing.d.ts
+++ b/web/src/pages/Route/typing.d.ts
@@ -164,7 +164,7 @@ declare namespace RouteModule {
     form: FormInstance;
     disabled?: boolean;
     upstreamRef: any;
-    isServiceId: boolean;
+    hasServiceId: boolean;
   };
 
   type Form2Data = {
diff --git a/web/src/pages/Service/components/Step1.tsx b/web/src/pages/Service/components/Step1.tsx
index fd805ba950..e904a577dd 100644
--- a/web/src/pages/Service/components/Step1.tsx
+++ b/web/src/pages/Service/components/Step1.tsx
@@ -54,6 +54,7 @@ const Step1: React.FC<ServiceModule.Step1PassProps> = ({
       </Form>
       <UpstreamForm
         ref={upstreamRef}
+        required
         form={upstreamForm}
         disabled={disabled}
         list={list}

From bb67c34a5dc73f91969f09d5c9c7aef429cf3111 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Fri, 22 Jan 2021 15:30:14 +0800
Subject: [PATCH 11/12] feat: update testcase

---
 .../create-route-can-skip-upstream.spec.js    | 23 ++++++++++++-------
 web/src/pages/Upstream/locales/en-US.ts       |  4 ++--
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/web/cypress/integration/route/create-route-can-skip-upstream.spec.js b/web/cypress/integration/route/create-route-can-skip-upstream.spec.js
index 544d380281..af78885526 100644
--- a/web/cypress/integration/route/create-route-can-skip-upstream.spec.js
+++ b/web/cypress/integration/route/create-route-can-skip-upstream.spec.js
@@ -28,9 +28,10 @@ context('Can select service_id skip upstream in route', () => {
     nodes_0_host: '#nodes_0_host',
     upstream_id: '#upstream_id',
     input: ':input',
-    custom: '[title=Custom]',
+    customUpstream: '[title=Custom]',
     titleName: '[title=Name]',
     testService: '[title=test_service]',
+    notification: '.ant-notification-notice-message',
   };
 
   beforeEach(() => {
@@ -46,27 +47,29 @@ context('Can select service_id skip upstream in route', () => {
     cy.get(domSelector.nodes_0_host).type(data.ip);
     cy.contains('Next').click();
     cy.contains('Submit').click();
+    cy.get(domSelector.notification).should('contain', 'Create Upstream Successfully');
 
     cy.visit('/');
     cy.contains('Service').click();
     cy.contains('Create').click();
     cy.get(domSelector.name).type(data.serviceName);
-    cy.get(domSelector.custom).click();
+    cy.get(domSelector.customUpstream).click();
     cy.contains(data.upstreamName).click();
     cy.contains('Next').click();
     cy.contains('Next').click();
     cy.contains('Submit').click();
+    cy.get(domSelector.notification).should('contain', 'Create Service Successfully');
   });
 
-  it('should select service_id can skip upstream when create route', () => {
+  it('should skip upstream module after service is selected when creating route', () => {
     cy.visit('/');
     cy.contains('Route').click();
     cy.contains('Create').click();
 
-    // When no select service_id, the option None does not exist
+    // The None option doesn't exist when service isn't selected
     cy.get(domSelector.name).type(data.routeName);
     cy.contains('Next').click();
-    cy.get(domSelector.custom).click();
+    cy.get(domSelector.customUpstream).click();
     cy.contains('None').should('not.exist');
 
     cy.contains('Previous').click();
@@ -75,7 +78,7 @@ context('Can select service_id skip upstream in route', () => {
     cy.contains('Next').click();
 
     // make sure upstream data can be saved
-    cy.get(domSelector.custom).click();
+    cy.get(domSelector.customUpstream).click();
     cy.contains(data.upstreamName).click();
     cy.get(domSelector.input).should('be.disabled');
 
@@ -87,7 +90,7 @@ context('Can select service_id skip upstream in route', () => {
     cy.contains('Goto List').click();
   });
 
-  it('should select service_id can skip upstream when edit route', () => {
+  it('should skip Upstream module after service is selected when editing route', () => {
     cy.visit('/');
     cy.contains('Route').click();
 
@@ -103,23 +106,27 @@ context('Can select service_id skip upstream in route', () => {
     cy.contains('Next').click();
     cy.contains('Next').click();
     cy.contains('Submit').click();
+    cy.contains('Submit Successfully');
   });
 
-  it('should delete upstream service and route', () => {
+  it('should delete upstream, service and route', () => {
     cy.visit('/');
     cy.contains('Upstream').click();
     cy.contains(data.upstreamName).siblings().contains('Delete').click();
     cy.contains('button', 'Confirm').click();
+    cy.get(domSelector.notification).should('contain', 'Delete Upstream Successfully');
 
     cy.visit('/');
     cy.contains('Service').click();
     cy.contains(data.serviceName).siblings().contains('Delete').click();
     cy.contains('button', 'Confirm').click();
+    cy.get(domSelector.notification).should('contain', 'Delete Service Successfully');
 
     cy.visit('/');
     cy.contains('Route').click();
     cy.contains(data.routeName).siblings().contains('Delete').click();
     cy.contains('button', 'Confirm').click();
+    cy.get(domSelector.notification).should('contain', 'Delete Route Successfully');
   });
 });
 
diff --git a/web/src/pages/Upstream/locales/en-US.ts b/web/src/pages/Upstream/locales/en-US.ts
index caad2b4e82..f4063daac3 100644
--- a/web/src/pages/Upstream/locales/en-US.ts
+++ b/web/src/pages/Upstream/locales/en-US.ts
@@ -82,7 +82,7 @@ export default {
 
   'page.upstream.create.edit': 'Edit',
   'page.upstream.create.create': 'Create',
-  'page.upstream.create.upstream.successfully': 'upstream successfully',
+  'page.upstream.create.upstream.successfully': 'Upstream Successfully',
   'page.upstream.create.basic.info': 'Basic Information',
   'page.upstream.create.preview': 'Preview',
 
@@ -95,7 +95,7 @@ export default {
   'page.upstream.list.confirm.delete': 'Are you sure to delete ?',
   'page.upstream.list.confirm': 'Confirm',
   'page.upstream.list.cancel': 'Cancel',
-  'page.upstream.list.delete.successfully': 'Delete successfully',
+  'page.upstream.list.delete.successfully': 'Delete Upstream Successfully',
   'page.upstream.list.delete': 'Delete',
   'page.upstream.list': 'Upstream List',
   'page.upstream.list.input': 'Please input',

From 909fc2f03173f9a85979b97e5e15ff222635f28b Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Fri, 22 Jan 2021 18:00:01 +0800
Subject: [PATCH 12/12] feat: update upstream testcase

---
 .../upstream/create_and_delete_upstream.spec.js        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/cypress/integration/upstream/create_and_delete_upstream.spec.js b/web/cypress/integration/upstream/create_and_delete_upstream.spec.js
index b445f0c8e4..b6717414d1 100644
--- a/web/cypress/integration/upstream/create_and_delete_upstream.spec.js
+++ b/web/cypress/integration/upstream/create_and_delete_upstream.spec.js
@@ -45,8 +45,8 @@ context('Create and Delete Upstream', () => {
     cy.get('#nodes_0_port').clear().type('7000');
     cy.contains('Next').click();
     cy.contains('Submit').click();
-    cy.get(domSelectors.notification).should('contain', 'Create upstream successfully');
-    cy.contains('Create upstream successfully');
+    cy.get(domSelectors.notification).should('contain', 'Create Upstream Successfully');
+    cy.contains('Create Upstream Successfully');
     cy.wait(sleepTime * 5);
     cy.url().should('contains', 'upstream/list');
   });
@@ -57,7 +57,7 @@ context('Create and Delete Upstream', () => {
     cy.wait(sleepTime * 5);
     cy.contains(name).siblings().contains('Delete').click();
     cy.contains('button', 'Confirm').click();
-    cy.get(domSelectors.notification).should('contain', 'Delete successfully');
+    cy.get(domSelectors.notification).should('contain', 'Delete Upstream Successfully');
   });
 
   it('should create chash upstream', () => {
@@ -101,7 +101,7 @@ context('Create and Delete Upstream', () => {
     // next to finish
     cy.contains('Next').click();
     cy.contains('Submit').click();
-    cy.get(domSelectors.notification).should('contain', 'Create upstream successfully');
+    cy.get(domSelectors.notification).should('contain', 'Create Upstream Successfully');
     cy.wait(sleepTime * 5);
     cy.url().should('contains', 'upstream/list');
   });
@@ -112,6 +112,6 @@ context('Create and Delete Upstream', () => {
     cy.wait(sleepTime * 5);
     cy.contains(name).siblings().contains('Delete').click();
     cy.contains('button', 'Confirm').click();
-    cy.get(domSelectors.notification).should('contain', 'Delete successfully');
+    cy.get(domSelectors.notification).should('contain', 'Delete Upstream Successfully');
   });
 });