Support regex_uri in redirect plugin.

web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js

@@ -108,9 +108,9 @@ context('Create PluginTemplate Binding To Route', () => {
     cy.get(selector.nameSelector).type(data.routeName);
     cy.contains('Search').click();
     cy.contains(data.routeName).siblings().contains('Configure').click();
-
     cy.contains('Forbidden').click();
     cy.contains('Custom').click();
+    cy.wait(1000);
     cy.get(selector.redirectURIInput).clear().type('123');
     cy.get(selector.redirectCodeSelector).click();
     cy.contains('301(Permanent Redirect)').click();

web/cypress/e2e/route/create-edit-route-with-redirect-plugin.cy.js

@@ -62,15 +62,15 @@ context('Create Edit and Delete Route with redirect plugin', () => {
   it('should create route with custom redirect plugin', function () {
     cy.visit('/');
     cy.contains('Route').click();
-    cy.wait(timeout * 2);
     cy.get(selector.empty).should('be.visible');
     cy.contains('Create').click();
     cy.wait(timeout * 2);
     cy.contains('Next').click();
     cy.contains('Next').click();
     cy.get(selector.name).type(name);
+    cy.wait(timeout);
     cy.get(selector.redirect).click();
-    cy.contains('Custom').click({ force: true });
+    cy.contains('Custom').click();
     // after choose Custom option, Custom Redirect form field should be visible
     cy.get(selector.customRedirectLabel).should('be.visible');
     cy.get(selector.customRedirectUrI).should('be.visible');

web/cypress/e2e/route/create-edit-route-with-redirect-regex-plugin.cy.js

@@ -0,0 +1,130 @@
+/*
+ * 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('Create Edit and Delete Route with redirect plugin', () => {
+  const name = `routeName${Date.now()}`;
+  const newName = `newName${Date.now()}`;
+  const timeout = 2000;
+
+  const selector = {
+    empty: '.ant-empty-normal',
+    name: '#name',
+    redirect: '[data-cy=route-redirect]',
+    customRedirectSelectOpt: '#redirectOption_list_1',
+    regex: '#regex',
+    customRedirectCode: '[data-cy=redirect_code]',
+    customRedirectRegexLabel: "[title='Regexp']",
+    regexp: '#regex_uri_0',
+    template: '#regex_uri_1',
+    deleteAlert: '.ant-modal-body',
+    notificationCloseIcon: '.ant-notification-close-icon',
+    notification: '.ant-notification-notice-message',
+    webSocketSelector: '[title=WebSocket]',
+    enable_websocket_button: '#enable_websocket',
+  };
+
+  const data = {
+    customRedirectRegexUri: '^/iresty/(.)/(.)/(.*)',
+    customRedirectTemplate: '/$1-$2-$3',
+    submitSuccess: 'Submit Successfully',
+    deleteRouteSuccess: 'Delete Route Successfully',
+    step2Title: 'Define API Backend Server',
+    step3Title: 'Plugin Config',
+    setUpstreamNotice: 'If you do not bind the service, you must set the Upstream (Step 2)',
+  };
+
+  beforeEach(() => {
+    cy.login();
+  });
+
+  it('should create route with custom redirect plugin', function () {
+    cy.visit('/');
+    cy.contains('Route').click();
+    cy.get(selector.empty).should('be.visible');
+    cy.contains('Create').click();
+    cy.wait(timeout * 2);
+    cy.contains('Next').click();
+    cy.contains('Next').click();
+    cy.get(selector.name).type(name);
+    cy.wait(timeout);
+    cy.get(selector.redirect).click();
+    cy.contains('Custom').click({ force: true });
+    cy.get(selector.regex).click();
+
+    // after choose Custom option, Custom Redirect form field should be visible
+    cy.get(selector.customRedirectRegexLabel).should('be.visible');
+    cy.get(selector.regexp).should('be.visible');
+    cy.get(selector.template).should('be.visible');
+    cy.get(selector.customRedirectCode).should('be.visible');
+    cy.get(selector.webSocketSelector).should('exist');
+    cy.get(selector.enable_websocket_button).should('exist');
+
+    // step 2 and step 3 should not be visible
+    cy.contains(data.step2Title).should('not.exist');
+    cy.contains(data.step3Title).should('not.exist');
+    // type customRedirectRegexUri and customRedirectTemplate
+    cy.get(selector.regexp).type(data.customRedirectRegexUri);
+    cy.get(selector.template).type(data.customRedirectTemplate);
+    cy.contains('Next').click();
+    cy.contains('Submit').click();
+    cy.contains(data.submitSuccess);
+
+    // back to route list page
+    cy.contains('Goto List').click();
+    cy.url().should('contains', 'routes/list');
+  });
+
+  it('should edit the route without notice', function () {
+    cy.visit('/');
+    cy.contains('Route').click();
+
+    cy.get(selector.name).type(name);
+    cy.contains('Search').click();
+    cy.contains(name).siblings().contains('Configure').click();
+
+    // NOTE: make sure all components rerender done
+    cy.get('#status').should('have.class', 'ant-switch-checked');
+    // should not shown set upstream notice
+    cy.contains(data.setUpstreamNotice).should('not.exist');
+    cy.get(selector.name).clear().type(newName);
+    cy.get(selector.webSocketSelector).should('exist');
+    cy.get(selector.enable_websocket_button).should('exist');
+
+    cy.contains('Next').click();
+    cy.contains('Submit').click();
+    cy.contains(data.submitSuccess);
+    cy.contains('Goto List').click();
+    cy.url().should('contains', 'routes/list');
+    cy.contains(newName).should('be.visible');
+  });
+
+  it('should delete the route', function () {
+    cy.visit('/routes/list');
+    cy.get(selector.name).clear().type(newName);
+    cy.contains('Search').click();
+    cy.contains(newName).siblings().contains('More').click();
+    cy.contains('Delete').click();
+    cy.get(selector.deleteAlert)
+      .should('be.visible')
+      .within(() => {
+        cy.contains('OK').click();
+      });
+    cy.get(selector.notification).should('contain', data.deleteRouteSuccess);
+    cy.get(selector.notificationCloseIcon).click({ multiple: true });
+  });
+});

web/src/pages/Route/components/Step1/MetaView.tsx

@@ -14,15 +14,26 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AutoComplete, Button, Col, Input, notification, Row, Select, Switch, Tag } from 'antd';
+import {
+  AutoComplete,
+  Button,
+  Col,
+  Input,
+  notification,
+  Radio,
+  Row,
+  Select,
+  Switch,
+  Tag,
+} from 'antd';
 import Form from 'antd/es/form';
 import type { FC } from 'react';
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import { useIntl } from 'umi';
 
 import LabelsDrawer from '@/components/LabelsfDrawer';
 import PanelSection from '@/components/PanelSection';
-import { FORM_ITEM_WITHOUT_LABEL } from '@/pages/Route/constants';
+import { CUSTOM_REDIRECT_TYPE, FORM_ITEM_WITHOUT_LABEL } from '@/pages/Route/constants';
 
 import { fetchLabelList, fetchServiceList } from '../../service';
 
@@ -281,20 +292,12 @@ const Redirect: FC = () => {
   );
 };
 
-const CustomRedirect: FC = () => {
+const CustomRedirectType = () => {
+  const { disabled, form } = useContext(MetaViewContext);
   const { formatMessage } = useIntl();
-  const { disabled, onChange = () => {}, form } = useContext(MetaViewContext);
-  return (
-    <Form.Item
-      noStyle
-      shouldUpdate={(prev, next) => {
-        if (prev.redirectOption !== next.redirectOption) {
-          onChange({ action: 'redirectOptionChange', data: next.redirectOption });
-        }
-        return prev.redirectOption !== next.redirectOption;
-      }}
-    >
-      {form?.getFieldValue('redirectOption') === 'customRedirect' && (
+  switch (form.getFieldValue('customRedirectType')) {
+    case CUSTOM_REDIRECT_TYPE.STATIC:
+      return (
         <Form.Item
           label={formatMessage({ id: 'page.route.form.itemLabel.redirectCustom' })}
           required
@@ -337,7 +340,144 @@ const CustomRedirect: FC = () => {
             </Col>
           </Row>
         </Form.Item>
-      )}
+      );
+    case CUSTOM_REDIRECT_TYPE.REGEXP:
+      return (
+        <React.Fragment>
+          <Form.List name="regex_uri" initialValue={['', '']}>
+            {(regex_uris) =>
+              regex_uris.map((regex_uri, index) => {
+                switch (index) {
+                  case 0:
+                    return (
+                      <Form.Item
+                        label={formatMessage({ id: 'page.route.form.itemLabel.regex' })}
+                        name={regex_uri.name}
+                        key={regex_uri.name}
+                        rules={[
+                          {
+                            required: true,
+                            message: `${formatMessage({
+                              id: 'component.global.pleaseEnter',
+                            })} ${formatMessage({ id: 'page.route.form.itemLabel.regex' })}`,
+                          },
+                        ]}
+                      >
+                        <Input
+                          placeholder={`${formatMessage({
+                            id: 'component.global.pleaseEnter',
+                          })} ${formatMessage({ id: 'page.route.form.itemLabel.regex' })}`}
+                          disabled={disabled}
+                        />
+                      </Form.Item>
+                    );
+                  case 1:
+                    return (
+                      <Form.Item
+                        label={formatMessage({ id: 'page.route.form.itemLabel.template' })}
+                        name={regex_uri.name}
+                        key={regex_uri.name}
+                        rules={[
+                          {
+                            required: true,
+                            message: `${formatMessage({
+                              id: 'component.global.pleaseEnter',
+                            })} ${formatMessage({ id: 'page.route.form.itemLabel.template' })}`,
+                          },
+                        ]}
+                      >
+                        <Input
+                          placeholder={`${formatMessage({
+                            id: 'component.global.pleaseEnter',
+                          })} ${formatMessage({ id: 'page.route.form.itemLabel.template' })}`}
+                          disabled={disabled}
+                        />
+                      </Form.Item>
+                    );
+                  default:
+                    return null;
+                }
+              })
+            }
+          </Form.List>
+          <Form.Item
+            label={formatMessage({ id: 'page.route.form.itemLabel.redirectCode' })}
+            required
+            style={{ marginBottom: 0 }}
+          >
+            <Form.Item name="ret_code" rules={[{ required: true }]}>
+              <Select disabled={disabled} data-cy="redirect_code">
+                <Select.Option value={301}>
+                  {formatMessage({ id: 'page.route.select.option.redirect301' })}
+                </Select.Option>
+                <Select.Option value={302}>
+                  {formatMessage({ id: 'page.route.select.option.redirect302' })}
+                </Select.Option>
+              </Select>
+            </Form.Item>
+          </Form.Item>
+        </React.Fragment>
+      );
+    default:
+      return null;
+  }
+};
+
+const CustomRedirect: React.FC = () => {
+  const { formatMessage } = useIntl();
+  const { disabled, onChange = () => {}, form } = useContext(MetaViewContext);
+  const options = [
+    {
+      value: CUSTOM_REDIRECT_TYPE.STATIC,
+      label: formatMessage({ id: 'page.route.radio.static' }),
+    },
+    {
+      value: CUSTOM_REDIRECT_TYPE.REGEXP,
+      label: formatMessage({ id: 'page.route.radio.regex' }),
+    },
+  ];
+
+  return (
+    <Form.Item
+      noStyle
+      shouldUpdate={(prev, next) => {
+        if (prev.redirectOption !== next.redirectOption) {
+          onChange({ action: 'redirectOptionChange', data: next.redirectOption });
+        }
+        return prev.redirectOption !== next.redirectOption;
+      }}
+    >
+      {() => {
+        if (form.getFieldValue('redirectOption') === 'customRedirect') {
+          return (
+            <React.Fragment>
+              <Form.Item
+                label={formatMessage({ id: 'page.route.form.itemLabel.URIRewriteType' })}
+                name="customRedirectType"
+              >
+                <Radio.Group disabled={disabled}>
+                  {options.map((item) => (
+                    <Radio value={item.value} key={item.value} id={item.value ? 'regex' : 'static'}>
+                      {item.label}
+                    </Radio>
+                  ))}
+                </Radio.Group>
+              </Form.Item>
+              <Form.Item
+                shouldUpdate={(prevValues, curValues) =>
+                  prevValues.customRedirectType !== curValues.customRedirectType
+                }
+                noStyle
+              >
+                {() => {
+                  return CustomRedirectType();
+                }}
+              </Form.Item>
+            </React.Fragment>
+          );
+        }
+        return null;
+      }}
     </Form.Item>
   );
 };

web/src/pages/Route/constants.ts

@@ -14,6 +14,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+export enum CUSTOM_REDIRECT_TYPE {
+  STATIC = 0,
+  REGEXP,
+}
+
 export const HTTP_METHOD_OPTION_LIST: HttpMethod[] = [
   'GET',
   'POST',
@@ -66,7 +71,9 @@ export const DEFAULT_STEP_1_DATA: RouteModule.Form1Data = {
   uris: ['/*'],
   remote_addrs: [''],
   redirectOption: 'disabled',
+  customRedirectType: CUSTOM_REDIRECT_TYPE.STATIC,
   redirectURI: '',
+  regex_uri: ['', ''],
   ret_code: 302,
   methods: HTTP_METHOD_OPTION_LIST,
   service_id: '',

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

@@ -73,6 +73,7 @@ export default {
   'page.route.select.option.forbidden': 'Forbidden',
   'page.route.form.itemLabel.redirectCustom': 'Custom Redirect',
   'page.route.input.placeholder.redirectCustom': 'For example: /foo/index.html',
+  'page.route.form.itemLabel.redirectCode': 'Code',
   'page.route.select.option.redirect301': '301(Permanent Redirect)',
   'page.route.select.option.redirect302': '302(Temporary Redirect)',
   'page.route.form.itemLabel.username': 'Username',

web/src/pages/Route/locales/tr-TR.ts

@@ -73,6 +73,7 @@ export default {
   'page.route.select.option.forbidden': 'Yasaklılar',
   'page.route.form.itemLabel.redirectCustom': 'Özel yönlendirme',
   'page.route.input.placeholder.redirectCustom': 'Örn: /foo/index.html',
+  'page.route.form.itemLabel.redirectCode': 'Code',
   'page.route.select.option.redirect301': '301(Kalıcı Yönlendirme)',
   'page.route.select.option.redirect302': '302(Geçici Yönlendirme)',
   'page.route.form.itemLabel.username': 'Kullanıcı Adı',