fix(FE): Redirect plugin should not show in route step3

web/cypress/integration/route/create-edit-delete-route.spec.js

@@ -68,6 +68,14 @@ context('Create and Delete Route', () => {
     // go to step3
     cy.contains('Next').click();
 
+    // redirect plugin should not display in route step3
+    const nameSelector = '[data-cy-plugin-name]';
+    cy.get(nameSelector).then((cards) => {
+      [...cards].forEach(card => {
+        expect(card.innerText).to.not.equal('redirect')
+      });
+    });
+
     // config prometheus plugin
     cy.contains('.ant-card', 'prometheus').within(() => {
       cy.get('button').first().click();

web/src/components/Plugin/PluginPage.tsx

@@ -21,14 +21,15 @@ import { orderBy } from 'lodash';
 
 import PluginDetail from './PluginDetail';
 import { fetchList } from './service';
-import { PLUGIN_ICON_LIST } from './data'
+import { PLUGIN_ICON_LIST, PLUGIN_FILTER_LIST } from './data'
 import defaultPluginImg from '../../../public/static/default-plugin.png';
 
 type Props = {
   readonly?: boolean;
   type?: 'global' | 'scoped';
   initialData?: PluginComponent.Data;
   schemaType?: PluginComponent.Schema;
+  referPage?: PluginComponent.ReferPage;
   onChange?: (data: PluginComponent.Data) => void;
 };
 
@@ -49,6 +50,7 @@ const PluginPage: React.FC<Props> = ({
   readonly = false,
   initialData = {},
   schemaType = 'route',
+  referPage = '',
   type = 'scoped',
   onChange = () => { },
 }) => {
@@ -59,8 +61,8 @@ const PluginPage: React.FC<Props> = ({
   const firstUpperCase = ([first, ...rest]: string) => first.toUpperCase() + rest.join('');
   useEffect(() => {
     fetchList().then((data) => {
-      setPluginList(data);
-
+      const filteredData = data.filter((item) => !(PLUGIN_FILTER_LIST[item.name] && PLUGIN_FILTER_LIST[item.name].list.includes(referPage)));
+      setPluginList(filteredData);
       const categoryList: string[] = [];
       data.forEach((item) => {
         if (!categoryList.includes(firstUpperCase(item.type))) {

web/src/components/Plugin/data.tsx

@@ -26,3 +26,9 @@ export const PLUGIN_ICON_LIST: Record<string, any> = {
   'openid-connect': <IconFont name="iconicons8-openid" />,
   'kafka-logger': <IconFont name="iconApache_kafka" />,
 };
+
+// This list is used to filter out plugins that cannot be displayed in the plugins list.
+export const PLUGIN_FILTER_LIST: Record<string, { list: PluginComponent.ReferPage[] }> =
+{
+  redirect: { list: ['route'] } // Filter out the redirect plugin on the route page.
+}

web/src/components/Plugin/typing.d.ts

@@ -17,7 +17,7 @@
 declare namespace PluginComponent {
   type Data = object;
 
-  type Schema = '' | 'route' | 'consumer' | 'service';
+  type Schema = '' | 'route' | 'consumer';
 
   type Meta = {
     name: string;
@@ -27,4 +27,6 @@ declare namespace PluginComponent {
     version: number;
     consumer_schema?: object;
   };
+
+  type ReferPage = '' | 'route' | 'consumer' | 'service' | 'plugin'
 }

web/src/pages/Route/components/Step3/index.tsx

@@ -85,6 +85,7 @@ const Page: React.FC<Props> = ({ data, onChange, readonly = false, isForceHttps
         <PluginPage
           initialData={plugins}
           schemaType="route"
+          referPage='route'
           onChange={(pluginsData) => onChange({ plugins: pluginsData, script: {} })}
         />
       )}