From 799e69aa9e4017db7b50f430f11cf0bad990a9bc Mon Sep 17 00:00:00 2001
From: litesun <sunyi@apache.org>
Date: Mon, 19 Jul 2021 16:55:38 +0800
Subject: [PATCH] fix: only auth type plugin need to configure in consumer
 (#1983)

---
 .../create-delete-in-drawer-plugin.spec.js      | 17 +++++++++++++++++
 web/src/components/Plugin/PluginDetail.tsx      |  7 +++----
 web/src/components/Plugin/service.ts            |  1 +
 web/src/components/Plugin/typing.d.ts           |  1 +
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js b/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js
index ca633af94b..0141c3b040 100644
--- a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js
+++ b/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js
@@ -70,6 +70,23 @@ context('Delete Plugin List with the Drawer', () => {
     }).should('not.exist');
   });
 
+  it('should verify openid-connect and authz-keycloak plugin need to configure', function () {
+    cy.visit('/');
+    cy.contains('Plugin').click();
+    cy.contains('Enable').click();
+    ['openid-connect', 'authz-keycloak'].forEach((plugin) => {
+      cy.contains(plugin).parents(selector.pluginCardBordered).within(() => {
+        cy.get('button').click({
+          force: true
+        });
+      });
+      cy.get(selector.drawer).should('be.visible').within(() => {
+        cy.contains('.ant-alert-warning', 'Doesn\'t need configuration').should('not.exist');
+        cy.contains('button', 'Cancel').click();
+      });
+    })
+  })
+
   it('should delete the plugin with the drawer', function () {
     cy.visit('/plugin/list');
     cy.get(selector.refresh).click();
diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx
index c4daac6aac..41480125e5 100644
--- a/web/src/components/Plugin/PluginDetail.tsx
+++ b/web/src/components/Plugin/PluginDetail.tsx
@@ -43,7 +43,6 @@ import type {languages} from "monaco-editor";
 import { fetchSchema } from './service';
 import { json2yaml, yaml2json } from '../../helpers';
 import { PluginForm, PLUGIN_UI_LIST } from './UI';
-import { PluginType } from './data';
 
 type Props = {
   name: string;
@@ -107,7 +106,7 @@ const PluginDetail: React.FC<Props> = ({
   const [form] = Form.useForm();
   const [UIForm] = Form.useForm();
   const data = initialData[name] || {};
-  const pluginType = pluginList.find((item) => item.name === name)?.type;
+  const pluginType = pluginList.find((item) => item.name === name)?.originType;
   const [content, setContent] = useState<string>(JSON.stringify(data, null, 2));
   const [monacoMode, setMonacoMode] = useState<PluginComponent.MonacoLanguage>(monacoModeList.JSON);
   const modeOptions: { label: string; value: string }[] = [
@@ -281,7 +280,7 @@ const PluginDetail: React.FC<Props> = ({
     setMonacoMode(value);
   };
 
-  const isNoConfigurationRequired = pluginType === PluginType.authentication && schemaType !== 'consumer' && (monacoMode !== monacoModeList.UIForm);
+  const isNoConfigurationRequired = pluginType === 'auth' && schemaType !== 'consumer' && (monacoMode !== monacoModeList.UIForm);
 
   return (
     <Drawer
@@ -412,7 +411,7 @@ const PluginDetail: React.FC<Props> = ({
           </Button>
         ]}
       />
-      {Boolean(monacoMode === monacoModeList.UIForm) && <PluginForm name={name} form={UIForm} renderForm={!(pluginType === PluginType.authentication && schemaType !== 'consumer')} />}
+      {Boolean(monacoMode === monacoModeList.UIForm) && <PluginForm name={name} form={UIForm} renderForm={!(pluginType === 'auth' && schemaType !== 'consumer')} />}
       <div style={{ display: monacoMode === monacoModeList.UIForm ? 'none' : 'unset' }}>
         <Editor
           value={content}
diff --git a/web/src/components/Plugin/service.ts b/web/src/components/Plugin/service.ts
index 98f04fcec2..bf2f0a59f2 100644
--- a/web/src/components/Plugin/service.ts
+++ b/web/src/components/Plugin/service.ts
@@ -34,6 +34,7 @@ export const fetchList = () => {
     const typedData = data.data.map(item => ({
       ...item,
       type: PLUGIN_LIST[item.name]?.type || "other",
+      originType: item.type,
       hidden: PLUGIN_LIST[item.name]?.hidden || false
     }));
 
diff --git a/web/src/components/Plugin/typing.d.ts b/web/src/components/Plugin/typing.d.ts
index 126b560097..c6400f1c76 100644
--- a/web/src/components/Plugin/typing.d.ts
+++ b/web/src/components/Plugin/typing.d.ts
@@ -24,6 +24,7 @@ declare namespace PluginComponent {
     priority: number;
     schema: Record<string, any>;
     type: string;
+    originType: string,
     version: number;
     consumer_schema?: Record<string, any>;
     hidden?: boolean;